/* «Потанцуем»: rounded glass style based on the existing dashboard. */

::-webkit-scrollbar { display: none; }

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#page_container { background-attachment: fixed !important; }

.service-card,
.bookmark-card,
.group-header,
div[id$="-card"],
div[id$="-card"] > div,
div[class*="rounded-lg"] {
  border-radius: 25px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.service-card,
li.bookmark a,
.widget-container {
  background-color: rgba(18, 24, 36, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  transition: transform 180ms ease, box-shadow 180ms ease,
    border-color 180ms ease !important;
}

.service-card:hover,
li.bookmark a:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(213, 167, 255, 0.42) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32) !important;
}

li:not(:has(.service-widget)) .service-card { min-height: 72px !important; }

/* Dance-club accents are applied automatically to future cards. */
.service-card { position: relative !important; }

.service-card::before {
  content: "";
  position: absolute;
  inset: 2px 2px 6px;
  z-index: 0;
  border-radius: 23px !important;
  background: linear-gradient(135deg, #8b7dff, #d76fc7) !important;
  opacity: 0.2;
  pointer-events: none;
}

li:nth-child(3n + 2) > .service-card::before {
  background: linear-gradient(135deg, #5aa9e6, #8b7dff) !important;
}

li:nth-child(3n) > .service-card::before {
  background: linear-gradient(135deg, #d49b4a, #d76fc7) !important;
}

.service-card > div { position: relative; z-index: 1; }

span[class*="status-"],
div[class*="status-"] {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 10 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.service-tags {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  top: 10px !important;
  right: 12px !important;
  position: absolute !important;
  z-index: 20 !important;
}

.service-ping .ping-status {
  width: auto !important;
  height: auto !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) none !important;
}

/* Centered pill navigation. */
#tabs ul {
  width: fit-content !important;
  margin-right: auto !important;
  margin-left: auto !important;
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50px !important;
  background-color: rgba(58, 58, 58, 0.2) !important;
  backdrop-filter: blur(14px) !important;
}

#tabs ul li { width: auto !important; flex: 0 0 auto !important; }

#tabs ul li button {
  width: auto !important;
  min-height: unset !important;
  padding: 6px 20px !important;
  border-radius: 50px !important;
  color: rgba(255, 255, 255, 0.52) !important;
  background-color: transparent !important;
}

#tabs ul li button[aria-selected="true"] {
  color: #d9b7ff !important;
  background-color: rgba(139, 92, 246, 0.17) !important;
  font-weight: 700 !important;
}

li.bookmark a { margin-bottom: 8px !important; overflow: hidden !important; }

li.bookmark .bookmark-icon {
  border-radius: 0 !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.bookmark-name,
.service-name,
.service-description { color: rgba(245, 245, 245, 0.72) !important; }

.bookmark-name { font-size: 0.85rem !important; font-weight: 600 !important; }
.bookmark-description { color: #94a3b8 !important; font-size: 0.7rem !important; }

.service-group-name,
.bookmark-group-name {
  color: rgba(238, 230, 255, 0.68) !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .widget-container,
  .information-widget-logo,
  [class*="information-widget-glances"] {
    height: 42px !important;
    margin-top: 10px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50px !important;
    background-color: rgba(58, 58, 58, 0.2) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px) {
  .widget-container,
  .information-widget-logo,
  [class*="information-widget-glances"] {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 5px 0 !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 25px !important;
    background-color: rgba(58, 58, 58, 0.2) !important;
  }

  #tabs ul { max-width: 100% !important; }
  #tabs ul li button { padding: 5px 10px !important; font-size: 13px !important; }
}