:root {
  --page-bg: #fff8f2;
  --page-bg-soft: #fff4ec;
  --page-ink: #5f4b59;
  --page-ink-soft: #7d6774;
  --card-radius: 28px;
  --card-bg: rgba(255, 251, 247, 0.92);
  --card-border: rgba(173, 132, 145, 0.32);
  --card-shadow: 0 10px 28px rgba(201, 148, 164, 0.18);
  --card-shadow-hover: 0 16px 36px rgba(201, 148, 164, 0.25);
  --widget-bg: rgba(255, 248, 242, 0.9);
  --widget-border: rgba(182, 146, 156, 0.32);
  --line-soft: rgba(169, 139, 149, 0.22);
}

html,
body,
#__next,
#page_wrapper,
#inner_wrapper,
.container {
  background: transparent !important;
}

html.dark #__next,
html.scheme-dark #__next,
html.theme-slate #__next,
html.dark #page_wrapper,
html.scheme-dark #page_wrapper,
html.theme-slate #page_wrapper,
html.dark #inner_wrapper,
html.scheme-dark #inner_wrapper,
html.theme-slate #inner_wrapper,
html.dark .container,
html.scheme-dark .container,
html.theme-slate .container {
  background: transparent !important;
  background-color: transparent !important;
}

html.dark,
html.scheme-dark,
html.theme-slate,
html.dark body,
html.scheme-dark body,
html.theme-slate body {
  color-scheme: light !important;
}

body {
  color: var(--page-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 250, 0.96), rgba(255, 249, 244, 0.96)),
    url('/icons/uwarp-doodle-bg-light-v2.svg'),
    linear-gradient(180deg, #fffdf9 0%, #fff7f0 52%, #fffaf6 100%) !important;
  background-size: cover, 1320px auto, cover !important;
  background-position: center top, center top, center top !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-attachment: fixed, fixed, fixed !important;
}

body:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,251,247,0.22)),
    radial-gradient(circle at 10% 14%, rgba(253, 221, 230, 0.16), transparent 0 14%),
    radial-gradient(circle at 89% 17%, rgba(229, 220, 255, 0.14), transparent 0 13%),
    radial-gradient(circle at 14% 83%, rgba(224, 245, 235, 0.14), transparent 0 13%),
    radial-gradient(circle at 85% 78%, rgba(255, 236, 214, 0.14), transparent 0 13%);
  z-index: 0;
}

body:after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(232, 196, 208, 0.12) 0.85px, transparent 0.85px),
    radial-gradient(rgba(255,255,255,0.66) 0.9px, transparent 0.9px);
  background-size: 28px 28px, 36px 36px;
  background-position: 0 0, 12px 12px;
  opacity: 0.16;
  z-index: 0;
}

#information-widgets,
#services {
  gap: 1.15rem !important;
  position: relative;
  z-index: 1;
}

#information-widgets {
  background: var(--widget-bg) !important;
  border: 2px solid var(--widget-border) !important;
  border-radius: 28px !important;
  box-shadow: var(--card-shadow) !important;
}

#information-widgets:before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 2px dashed rgba(221, 179, 192, 0.35);
  pointer-events: none;
}

.services-group {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.service-block > div,
.service-card,
.bookmark,
.information-widget {
  border-radius: var(--card-radius) !important;
}

.service-card {
  position: relative;
  overflow: hidden;
  background: var(--card-bg) !important;
  border: 2px solid var(--card-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem 1rem 0.95rem !important;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.service-card:has(.service-stats) {
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.46rem 0.54rem !important;
}

.service-card:has(.service-stats):before {
  inset: 7px !important;
  border-radius: 16px !important;
}

.service-card:has(.service-stats):after {
  right: 8px !important;
  top: 7px !important;
  width: 54px !important;
  height: 20px !important;
}

.service-card:has(.service-stats) > .service-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.service-card:has(.service-stats) > .service-stats {
  flex: 0 0 auto !important;
  width: auto !important;
  max-height: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.service-card:has(.service-stats) .service-title a {
  gap: 0.45rem !important;
}

.service-card:has(.service-stats) .service-title-text {
  display: flex !important;
  align-items: center !important;
  min-height: auto !important;
}

.service-card:has(.service-stats) .service-icon {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  padding: 0.28rem !important;
  align-self: center !important;
  margin: 0 !important;
  border-radius: 0.92rem !important;
}

.service-card:has(.service-stats) .service-name {
  padding: 0 !important;
  line-height: 1.05 !important;
  font-size: 0.84rem !important;
  max-width: 86px !important;
}

.service-card:has(.service-stats) .service-description {
  margin-top: 0.02rem !important;
  font-size: 0.68rem !important;
  line-height: 1.05 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.service-card:has(.service-stats) .service-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.2rem !important;
  width: auto !important;
}

.service-card:has(.service-stats) .service-block:nth-child(n+3) {
  display: none !important;
}

.service-card:has(.service-stats) .service-block {
  width: 56px !important;
  min-width: 56px !important;
  min-height: 40px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

.service-card:has(.service-stats) .service-block .font-thin {
  font-size: 0.76rem !important;
  line-height: 1.02 !important;
}

.service-card:has(.service-stats) .service-block .font-bold {
  font-size: 0.58rem !important;
  line-height: 1 !important;
}

.service-card:not(:has(.service-stats)) {
  aspect-ratio: 1 / 1 !important;
  min-height: auto !important;
  padding: 0.22rem !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

.service-card:not(:has(.service-stats)):before,
.service-card:not(:has(.service-stats)):after {
  display: none !important;
}

.service-card:before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(228, 188, 198, 0.3);
  border-radius: 22px;
  pointer-events: none;
}

.service-card:after {
  content: '';
  position: absolute;
  right: 12px;
  top: 10px;
  width: 64px;
  height: 24px;
  background:
    radial-gradient(circle at 10px 12px, rgba(255, 214, 224, 0.7) 0 4px, transparent 4.5px),
    radial-gradient(circle at 28px 8px, rgba(217, 239, 223, 0.75) 0 3.5px, transparent 4px),
    radial-gradient(circle at 44px 14px, rgba(217, 207, 249, 0.75) 0 4px, transparent 4.5px);
  opacity: 0.7;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-3px) rotate(-0.25deg);
  box-shadow: none !important;
  border-color: rgba(216, 149, 171, 0.5) !important;
}

.service-card a {
  gap: 0.92rem !important;
}

.service-icon {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  border-radius: 1.15rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,244,238,0.92));
  box-shadow: 0 6px 14px rgba(207, 162, 176, 0.16), inset 0 0 0 2px rgba(255,255,255,0.8), inset 0 -2px 6px rgba(243, 211, 196, 0.35);
  padding: 0.46rem;
}

.service-icon img,
.service-icon svg {
  border-radius: 0.8rem;
}

.service-title,
.service-card [class*='text-theme-'] {
  color: var(--page-ink) !important;
}

.service-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
}

.service-name {
  line-height: 1.25 !important;
}

.service-card:not(:has(.service-stats)) .service-description {
  display: none !important;
}

.service-card:not(:has(.service-stats)) .service-title {
  min-height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}

.service-card:not(:has(.service-stats)) .service-title-text {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 0.28rem) !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

.service-card:not(:has(.service-stats)) .service-icon {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  border-radius: 0.7rem !important;
  padding: 0.16rem !important;
  box-shadow: 0 2px 5px rgba(207, 162, 176, 0.08), inset 0 0 0 1px rgba(255,255,255,0.75) !important;
}

.service-card:not(:has(.service-stats)) .service-name {
  padding: 0.08rem 0 0 !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  color: var(--page-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.service-card:not(:has(.service-stats)) .service-tags {
  display: none !important;
}

.service-description {
  margin-top: 0.14rem !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: var(--page-ink-soft) !important;
}

.service-stats {
  margin-top: 0.62rem !important;
  padding-top: 0.62rem !important;
  border-top: 2px dashed var(--line-soft);
  color: var(--page-ink) !important;
}

.service-container {
  gap: 0.08rem !important;
}

.service-block {
  min-height: 58px;
  margin: 0.22rem !important;
  border-radius: 14px !important;
  background: rgba(183, 170, 181, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.service-block .font-thin {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--page-ink) !important;
  line-height: 1.1 !important;
}

.service-block .font-bold {
  font-size: 0.68rem !important;
  letter-spacing: 0.05em;
  color: rgba(95, 75, 89, 0.82) !important;
}

.service-tag .docker-status {
  border-radius: 0 0 8px 8px !important;
  padding: 0.22rem 0.48rem !important;
  background: rgba(255,255,255,0.78) !important;
  box-shadow: 0 2px 6px rgba(208, 171, 180, 0.16);
}

.information-widget {
  background: rgba(255, 251, 247, 0.7) !important;
  border: 2px solid rgba(183, 150, 160, 0.24) !important;
  box-shadow: 0 6px 16px rgba(205, 171, 182, 0.13) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--page-ink) !important;
}

.information-widget .resource-value,
.information-widget .resource-label,
#information-widgets [class*='text-theme-'],
#information-widgets svg {
  color: var(--page-ink) !important;
}

h2,
.service-group-name {
  color: var(--page-ink) !important;
  font-size: 1.22rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
  margin-bottom: 0.82rem !important;
}

.service-group-name:before {
  content: '✿';
  display: inline-block;
  margin-right: 0.42rem;
  color: #e6a4b4;
  transform: translateY(-1px);
}

input,
.search-container,
.search {
  color: var(--page-ink) !important;
}

input::placeholder {
  color: rgba(111, 88, 99, 0.65) !important;
}

input,
#information-widgets input {
  background: rgba(255, 252, 249, 0.86) !important;
  border: 2px solid rgba(182, 148, 158, 0.28) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

button[class*='search'],
button[aria-label='search.search'] {
  color: var(--page-ink) !important;
}

.services-group:nth-of-type(2) .services-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
}

.services-group:nth-of-type(2) .service {
  display: flex;
  flex: 0 0 auto !important;
  margin-bottom: 1.1rem !important;
}

.services-group:nth-of-type(2) .service-card {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

@media (max-width: 1024px) {
  .service-card:has(.service-stats) {
    min-height: 74px !important;
    gap: 0.42rem !important;
    padding: 0.42rem 0.5rem !important;
  }

  .service-card:has(.service-stats) .service-icon {
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-width: 2.15rem !important;
    padding: 0.24rem !important;
  }

  .service-card:has(.service-stats) .service-name {
    font-size: 0.78rem !important;
    max-width: 76px !important;
  }

  .service-card:has(.service-stats) .service-description {
    font-size: 0.64rem !important;
  }

  .service-card:has(.service-stats) .service-block {
    width: 52px !important;
    min-width: 52px !important;
    min-height: 38px !important;
  }

  .service-card:has(.service-stats) .service-block .font-thin {
    font-size: 0.72rem !important;
  }

  .service-card:has(.service-stats) .service-block .font-bold {
    font-size: 0.56rem !important;
  }

  .services-group:nth-of-type(2) .services-list {
    gap: 0.55rem !important;
  }

  .services-group:nth-of-type(2) .service {
    margin-bottom: 1rem !important;
  }

  .services-group:nth-of-type(2) .service-card {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
}