/* =========================================================
   SPIRIDUS HOME — CUSTOM CSS
   Homepage Docker stats — compact / subtle
   ========================================================= */

:root {
  
  --sp-content-width: 1100px;

  --sp-card-glass: rgba(255, 255, 255, 0.06);
  --sp-card-glass-hover: rgba(255, 255, 255, 0.10);

  --sp-border-glass: rgba(255, 255, 255, 0.10);
  --sp-border-glass-hover: rgba(255, 255, 255, 0.18);

  --sp-text: rgba(255, 255, 255, 0.95);
  --sp-desc: rgba(214, 224, 255, 0.58);

  --sp-blue: #38bdf8;
  --sp-purple: #a855f7;
  --sp-green: #34d399;
  --sp-orange: #fb923c;
  --sp-red: #f87171;
  --sp-amber: #fbbf24;

  --sp-radius: 10px;

  --sp-shadow:
    0 5px 14px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  --sp-shadow-hover:
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(56, 189, 248, 0.05);
}

/* =========================================================
   MAIN CONTAINER
   ========================================================= */

#inner_wrapper > div.container {
  width: var(--sp-content-width) !important;
  max-width: var(--sp-content-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   MAIN SECTIONS
   ========================================================= */

#inner_wrapper > div.container > #information-widgets,
#inner_wrapper > div.container > :is(#layout-groups, #services),
#inner_wrapper > div.container > #bookmarks,
#inner_wrapper > div.container > #footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#inner_wrapper > div.container > #information-widgets {
  margin: 0 !important;
}

#inner_wrapper > div.container > :is(#layout-groups, #services),
#inner_wrapper > div.container > #bookmarks {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   HEADER — compact, dar vizibil
   ========================================================= */

#inner_wrapper > div.container > #information-widgets {
  padding-top: 20px !important;
  padding-bottom: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#widgets-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

#widgets-wrap > .information-widget-resources,
#widgets-wrap > .resources {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 1rem !important;
}

#widgets-wrap > *:not(#information-widgets-right) {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   HEADER SEARCH
   ========================================================= */

#information-widgets-right {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#information-widgets-right form,
#information-widgets-right [class*="search"] {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

header input[type="text"],
header input[type="search"] {
  width: 100% !important;
  height: 50px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(125, 211, 252, 0.17) !important;
  background: rgba(8, 15, 27, 0.48) !important;
  color: var(--sp-text) !important;
  font-size: 0.92rem !important;
  text-align: left !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16),
              inset 0 1px 0 rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

header input[type="text"]:focus,
header input[type="search"]:focus {
  outline: none !important;
  border-color: rgba(56,189,248,0.40) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.05),
              0 9px 24px rgba(0,0,0,0.22) !important;
}

header input[type="text"]::placeholder,
header input[type="search"]::placeholder {
  color: rgba(220,230,255,0.34) !important;
}

/* =========================================================
   HEADER DATA / WEATHER
   ========================================================= */

#information-widgets-right > *:not(form):not([class*="search"]) {
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#information-widgets-right .rounded-md,
#information-widgets-right .rounded-lg {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   HEADER DIVIDER
   ========================================================= */

#inner_wrapper > div.container > #information-widgets::after {
  content: "";
  display: block;
  width: 52%;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent,
              rgba(56,189,248,0.18),
              rgba(168,85,247,0.16),
              transparent);
}

/* =========================================================
   SERVICES
   ========================================================= */

:is(#layout-groups, #services) {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

:is(#layout-groups, #services) .services-group {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 17px !important;
  margin-bottom: 19px !important;
}

:is(#layout-groups, #services) .services-group > div:first-child {
  margin-bottom: 8px !important;
}

:is(#layout-groups, #services) .services-group h2,
:is(#layout-groups, #services) .services-group h3 {
  display: flex !important;
  align-items: center !important;
  color: rgba(255,255,255,0.91) !important;
  font-size: 0.91rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
}

:is(#layout-groups, #services) .services-group h2::before,
:is(#layout-groups, #services) .services-group h3::before {
  content: "";
  width: 3px;
  height: 15px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sp-blue), var(--sp-purple));
  box-shadow: 0 0 8px rgba(56,189,248,0.38);
}

/* =========================================================
   3 COLUMN GRID – responsive
   ========================================================= */

:is(#layout-groups, #services) .services-list {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 9px !important;
}

:is(#layout-groups, #services) .service {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* =========================================================
   SERVICE CARD – Glassmorphism albicios
   ========================================================= */

:is(#layout-groups, #services) .service-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 88px !important;
  max-height: none !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--sp-border-glass) !important;
  background: var(--sp-card-glass) !important;
  box-shadow: var(--sp-shadow) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
  position: relative !important;
  isolation: isolate !important;
  transition: transform 0.18s ease, border-color 0.18s ease,
              background 0.18s ease, box-shadow 0.18s ease !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
}

:is(#layout-groups, #services) .service-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: linear-gradient(165deg,
              rgba(255, 255, 255, 0.10),
              rgba(255, 255, 255, 0) 42%) !important;
  pointer-events: none !important;
}

:is(#layout-groups, #services) .service-card:hover {
  transform: translateY(-1px);
  border-color: var(--sp-border-glass-hover) !important;
  background: var(--sp-card-glass-hover) !important;
  box-shadow: var(--sp-shadow-hover) !important;
}

/* SHINE */
:is(#layout-groups, #services) .service-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(115deg,
              transparent 0%,
              rgba(255,255,255,0.16) 45%,
              rgba(255,255,255,0.32) 50%,
              rgba(255,255,255,0.16) 55%,
              transparent 100%) !important;
  transform: translateX(-250%) skewX(-18deg) !important;
  transition: transform 0.75s ease, opacity 0.12s ease !important;
}

:is(#layout-groups, #services) .service-card:hover::after {
  opacity: 1 !important;
  transform: translateX(350%) skewX(-18deg) !important;
}

/* =========================================================
   TITLU + STATUS DOT
   ========================================================= */

:is(#layout-groups, #services) .service-title {
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding-right: 18px !important;
}

:is(#layout-groups, #services) .service-title-text {
  min-width: 0 !important;
}

:is(#layout-groups, #services) .service-name {
  color: var(--sp-text) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

:is(#layout-groups, #services) .service-card [class*="rounded-full"] {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

:is(#layout-groups, #services) .service-card [class*="rounded-full"][class*="bg-green"] {
  width: 7px !important;
  height: 7px !important;
  background: var(--sp-green) !important;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.10), 0 0 8px rgba(52,211,153,0.35) !important;
  animation: sp-status-good 2.8s ease-in-out infinite !important;
}

:is(#layout-groups, #services) .service-card [class*="rounded-full"][class*="bg-red"] {
  width: 7px !important;
  height: 7px !important;
  background: var(--sp-red) !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.11), 0 0 8px rgba(248,113,113,0.42) !important;
  animation: sp-status-bad 1.5s ease-in-out infinite !important;
}

:is(#layout-groups, #services) .service-card [class*="rounded-full"][class*="bg-yellow"],
:is(#layout-groups, #services) .service-card [class*="rounded-full"][class*="bg-amber"],
:is(#layout-groups, #services) .service-card [class*="rounded-full"][class*="bg-orange"] {
  width: 7px !important;
  height: 7px !important;
  background: var(--sp-amber) !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.10), 0 0 8px rgba(251,191,36,0.35) !important;
  animation: sp-status-warn 2s ease-in-out infinite !important;
}

/* =========================================================
   DESCRIERE
   ========================================================= */

:is(#layout-groups, #services) .service-description {
  margin-top: 3px !important;
  color: var(--sp-desc) !important;
  font-size: 0.72rem !important;
  font-weight: 450 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.003em !important;
  opacity: 0.85 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  min-height: 1.8em !important;
  transition: opacity 0.2s ease !important;
  position: relative !important;
}

:is(#layout-groups, #services) .service-card:hover .service-description {
  opacity: 1 !important;
}

/* =========================================================
   FILLER ANIMATION
   ========================================================= */

:is(#layout-groups, #services) .service-card:not(:has(.service-container)) {
  padding-bottom: 20px !important;
}

@keyframes sp-scan-line {
  0%   { background-position: 200% 0; opacity: 0.25; }
  50%  { background-position: 0% 0;   opacity: 0.6; }
  100% { background-position: -200% 0; opacity: 0.25; }
}

/* =========================================================
   WIDGET DATA – STATISTICI API
   ========================================================= */

:is(#layout-groups, #services) .service-card > .service-container {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-around !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 4px 8px !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block {
  min-width: 58px !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0px !important;
  flex: 1 1 22% !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block > div:first-child {
  font-size: clamp(0.6rem, 2vw, 0.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  order: 0 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block > div:first-child:empty::after {
  content: "0" !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block > div:last-child {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
  color: rgba(255,255,255,0.75) !important;
  order: 1 !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block:nth-child(1) > div:first-child {
  color: #c084fc !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block:nth-child(2) > div:first-child {
  color: #6ee7b7 !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block:nth-child(3) > div:first-child {
  color: #fcd34d !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block:nth-child(4) > div:first-child {
  color: #fb7185 !important;
}

:is(#layout-groups, #services) .service-card .service-container .service-block:nth-child(n+5) > div:first-child {
  color: #60a5fa !important;
}

/* =========================================================
   STATUS ROW
   ========================================================= */

:is(#layout-groups, #services) .service-card > .service-container > div:not(.service-block):not([class*="font"]):not([class*="text"]) {
  order: -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  margin-bottom: 4px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
  font-weight: 450 !important;
  color: rgba(255,255,255,0.8) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  animation: sp-status-pulse 2s ease-in-out infinite !important;
}

:is(#layout-groups, #services) .service-card > .service-container > div:not(.service-block):not([class*="font"]):not([class*="text"])::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--sp-green) !important;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4) !important;
  flex-shrink: 0 !important;
  margin-right: 2px !important;
}

@keyframes sp-status-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* =========================================================
   DOCKER STATS
   ========================================================= */

:is(#layout-groups, #services) .service-card > .service-stats {
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container {
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: none !important;
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block::before {
  content: "" !important;
  order: 0 !important;
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background-color: rgba(255,255,255,0.5) !important;
  opacity: 0.8 !important;
  transition: none !important;
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block > div:first-child {
  order: 2 !important;
  margin: 0 !important;
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

:is(#layout-groups, #services) .service-card:hover > .service-stats > .service-container > .service-block > div:first-child {
  color: rgba(255,255,255,0.9) !important;
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block > div:last-child {
  display: none !important;
}

/* =========================================================
   CULORI SPECIFICE DOCKER STATS
   ========================================================= */

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block:nth-child(1)::before {
  background-color: var(--sp-blue) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='7' y='7' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/><path d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='7' y='7' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/><path d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block:nth-child(2):nth-last-child(3)::before {
  background-color: var(--sp-purple) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='7' width='18' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/><path d='M7 7V5M11 7V5M15 7V5M19 7V5M7 17v2M11 17v2M15 17v2M19 17v2M7 10h2M11 10h2M15 10h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='7' width='18' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/><path d='M7 7V5M11 7V5M15 7V5M19 7V5M7 17v2M11 17v2M15 17v2M19 17v2M7 10h2M11 10h2M15 10h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block:nth-child(2):nth-last-child(2)::before,
:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block:nth-child(3):nth-last-child(2)::before {
  background-color: var(--sp-green) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v11m0 0l-4-4m4 4l4-4M4 20h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v11m0 0l-4-4m4 4l4-4M4 20h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block:last-child::before {
  background-color: var(--sp-orange) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 14V3m0 0l-4 4m4-4l4 4M4 20h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 14V3m0 0l-4 4m4-4l4 4M4 20h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

:is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block:only-child::before {
  background-color: var(--sp-blue) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='7' y='7' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/><path d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='7' y='7' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='2'/><path d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}

/* =========================================================
   ANIMAȚII STATUS
   ========================================================= */

@keyframes sp-status-good {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes sp-status-bad {
  0%, 100% { opacity: 0.70; }
  50% { opacity: 1; }
}

@keyframes sp-status-warn {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* =========================================================
   RESPONSIVE — TABLETĂ ȘI MOBIL
   ========================================================= */

@media (max-width: 1100px) {
  #inner_wrapper > div.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  :is(#layout-groups, #services) .services-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #inner_wrapper > div.container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #information-widgets-right {
    max-width: 100% !important;
  }

  header input[type="text"],
  header input[type="search"] {
    height: 46px !important;
    font-size: 0.88rem !important;
  }

  :is(#layout-groups, #services) .services-list {
    gap: 8px !important;
  }

  :is(#layout-groups, #services) .service-card {
    min-height: 82px !important;
    padding: 8px 10px !important;
  }

  :is(#layout-groups, #services) .service-name {
    font-size: 0.8rem !important;
  }

  :is(#layout-groups, #services) .service-description {
    font-size: 0.68rem !important;
  }
}

/* =========================================================
   MOBIL ≤ 480px
   ========================================================= */

@media (max-width: 480px) {
  #inner_wrapper > div.container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #inner_wrapper > div.container > #information-widgets {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  header input[type="text"],
  header input[type="search"] {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
  }

  :is(#layout-groups, #services) .services-group h2,
  :is(#layout-groups, #services) .services-group h3 {
    font-size: 0.85rem !important;
  }

  :is(#layout-groups, #services) .services-list {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  :is(#layout-groups, #services) .service-card {
    min-height: 72px !important;
    padding: 8px 12px !important;
  }

  :is(#layout-groups, #services) .service-name {
    font-size: 0.85rem !important;
  }

  :is(#layout-groups, #services) .service-description {
    -webkit-line-clamp: 1 !important;
    font-size: 0.7rem !important;
    min-height: 1.4em !important;
  }

  :is(#layout-groups, #services) .service-card .service-container .service-block > div:first-child {
    font-size: 0.75rem !important;
  }

  :is(#layout-groups, #services) .service-card .service-container .service-block > div:last-child {
    font-size: 0.58rem !important;
  }

  :is(#layout-groups, #services) .service-card > .service-stats > .service-container > .service-block > div:first-child {
    font-size: 0.68rem !important;
  }
}

/* =========================================================
   POZIȚIONARE + ASCUNDERE "No Active Streams"
   ========================================================= */

:is(#layout-groups, #services) .service-card div[class~="h-5"][class~="w-full"] {
  margin-top: 1rem !important;
}

:is(#layout-groups, #services) .service-card.no-active-streams div[class~="h-5"][class~="w-full"] {
  display: none !important;
}

/* =========================================================
   ANIMAȚIE NAVIDROME — FĂRĂ STREAM-URI ACTIVE
   ========================================================= */

:is(#layout-groups, #services) li[data-name="Navidrome"] .service-card.no-active-streams div[class~="h-5"][class~="w-full"] > div {
  opacity: 0;
}

:is(#layout-groups, #services) li[data-name="Navidrome"] .service-card.no-active-streams div[class~="h-5"][class~="w-full"] {
  display: block !important;
  position: relative;
  margin-top: 1rem !important;
  height: 22px !important;
  overflow: hidden !important;

  background: var(--sp-blue);
  opacity: 0.28;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 220px 100%;
  mask-size: 220px 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'><path d='M0,11 Q55,2 110,11 T220,11' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'><path d='M0,11 Q55,2 110,11 T220,11' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>");
  animation: sp-wave-drift-1 7s linear infinite, sp-wave-color-1 11s ease-in-out infinite;
}

:is(#layout-groups, #services) li[data-name="Navidrome"] .service-card.no-active-streams div[class~="h-5"][class~="w-full"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sp-purple);
  opacity: 0.45;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 170px 100%;
  mask-size: 170px 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 22'><path d='M0,12 Q42.5,22 85,12 T170,12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 22'><path d='M0,12 Q42.5,22 85,12 T170,12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>");
  animation: sp-wave-drift-2 5.2s linear infinite reverse, sp-wave-color-2 15s ease-in-out infinite 2s;
}

:is(#layout-groups, #services) li[data-name="Navidrome"] .service-card.no-active-streams div[class~="h-5"][class~="w-full"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sp-green);
  opacity: 0.7;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 120px 100%;
  mask-size: 120px 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'><path d='M0,11 Q30,4 60,11 T120,11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'><path d='M0,11 Q30,4 60,11 T120,11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
  animation: sp-wave-drift-3 3.6s linear infinite, sp-wave-color-3 19s ease-in-out infinite 5s;
}

@keyframes sp-wave-drift-1 {
  0%   { -webkit-mask-position: 0 0; mask-position: 0 0; }
  100% { -webkit-mask-position: -220px 0; mask-position: -220px 0; }
}

@keyframes sp-wave-drift-2 {
  0%   { -webkit-mask-position: 0 0; mask-position: 0 0; }
  100% { -webkit-mask-position: -170px 0; mask-position: -170px 0; }
}

@keyframes sp-wave-drift-3 {
  0%   { -webkit-mask-position: 0 0; mask-position: 0 0; }
  100% { -webkit-mask-position: -120px 0; mask-position: -120px 0; }
}

@keyframes sp-wave-color-1 {
  0%, 62%  { filter: hue-rotate(0deg); }
  70%      { filter: hue-rotate(-175deg); }
  78%, 100% { filter: hue-rotate(0deg); }
}

@keyframes sp-wave-color-2 {
  0%, 55%  { filter: hue-rotate(0deg); }
  63%      { filter: hue-rotate(89deg); }
  71%, 100% { filter: hue-rotate(0deg); }
}

@keyframes sp-wave-color-3 {
  0%, 58%  { filter: hue-rotate(0deg); }
  66%      { filter: hue-rotate(-111deg); }
  74%, 100% { filter: hue-rotate(0deg); }
}

:is(#layout-groups, #services) li .service-card > .service-container > .service-block {
  transform: translateY(5px);
}

/* =========================================================
   MINIO — Docker Stats + FILES / IMAGES / BUCKETS
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats {
  position: relative !important;
  padding-bottom: 50px !important;
  overflow: visible !important;
}

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container {
  position: relative !important;
  overflow: visible !important;
}

/* =========================================================
   SEPARATOR — DUPĂ Docker Stats
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 42px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.09) !important;
  pointer-events: none !important;
}

/* =========================================================
   CATEGORII MINIO
   MUTATE CU +3px MAI JOS
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
  display: flex !important;
  position: absolute !important;

  /* ORIGINAL: 28px
     NOU: 31px = +3px mai jos */
  top: 31px !important;

  transform: translateY(2px) !important;

  width: 33.333333% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;

  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;

  opacity: 0.85 !important;
  color: rgba(255,255,255,0.75) !important;
  pointer-events: none !important;
}

/* Distribuire pe 3 coloane */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child {
  left: 0 !important;
}

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child {
  left: 33.333333% !important;
}

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child {
  left: 66.666667% !important;
}

/* =========================================================
   ICONIȚA CATEGORIEI
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
  content: "" !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;

  background-color: rgba(255,255,255,0.58) !important;
  opacity: 0.9 !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* =========================================================
   LABELUL CATEGORIEI
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
  display: block !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
}

/* =========================================================
   FILES — document
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::before {
  background-color: var(--sp-blue) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h8l4 4v14H6V3z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><path d='M14 3v5h5M9 13h6M9 17h6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h8l4 4v14H6V3z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><path d='M14 3v5h5M9 13h6M9 17h6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
}

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::after {
  content: "FILES" !important;
}

/* =========================================================
   IMAGES — imagine
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::before {
  background-color: var(--sp-purple) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.8'/><circle cx='8.5' cy='9' r='1.5' fill='black'/><path d='M4 17l5-5 3.5 3.5 2.5-2.5 5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.8'/><circle cx='8.5' cy='9' r='1.5' fill='black'/><path d='M4 17l5-5 3.5 3.5 2.5-2.5 5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::after {
  content: "IMAGES" !important;
}

/* =========================================================
   BUCKETS — storage
   ========================================================= */

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::before {
  background-color: var(--sp-green) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 6h14l-1 14H6L5 6z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><path d='M4 6h16M9 6V4h6v2M9 10v6M15 10v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 6h14l-1 14H6L5 6z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><path d='M4 6h16M9 6V4h6v2M9 10v6M15 10v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
}

:is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::after {
  content: "BUCKETS" !important;
}

/* =========================================================
   RESPONSIVE — categorii MinIO
   +3px și pe mobil
   ========================================================= */

@media (max-width: 768px) {
  :is(#layout-groups, #services) #minio-main .service-card > .service-stats {
    padding-bottom: 48px !important;
  }

  :is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
    /* ORIGINAL: 27px
       NOU: 30px = +3px mai jos */
    top: 30px !important;

    transform: translateY(2px) !important;
    gap: 3px !important;
  }

  :is(#layout-groups, #services) #minio-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }
}

/* =========================================================
   CASAOS — ANIMATED BEAM (hub + noduri, stil MagicUI, mini)
   ========================================================= */

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card {
  overflow: hidden !important;
}

/* containerul beam-ului: ia tot spațiul gol rămas sub descriere */
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam {
  flex: 0 0 auto !important;
  height: 46px !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* traseele statice, subtile */
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-track {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.14) !important;
  stroke-width: 0.8 !important;
}

/* cometele animate care circulă spre / dinspre hub */
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet {
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 24 200 !important;
  animation: sp-beam-flow 3.4s linear infinite !important;
}

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-1,
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-2 {
  filter: drop-shadow(0 0 2px rgba(56,189,248,0.65)) !important;
}

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-3,
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-4 {
  filter: drop-shadow(0 0 2px rgba(168,85,247,0.65)) !important;
}

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-2 { animation-delay: 0.55s !important; }
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-3 { animation-delay: 1.1s !important; }
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-comet-4 { animation-delay: 1.65s !important; }

@keyframes sp-beam-flow {
  0%   { stroke-dashoffset: 118; }
  100% { stroke-dashoffset: -100; }
}

/* nodurile de la capete — elemente HTML (span), NU în SVG,
   ca să rămână perfect rotunde indiferent de lățimea cardului */
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-node {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  z-index: 2 !important;
  animation: sp-beam-node-pulse 3s ease-in-out infinite !important;
}

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-node-l {
  background: var(--sp-blue) !important;
  box-shadow: 0 0 4px rgba(56,189,248,0.65) !important;
}

:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-node-r {
  background: var(--sp-purple) !important;
  box-shadow: 0 0 4px rgba(168,85,247,0.65) !important;
  animation-delay: 1.5s !important;
}

@keyframes sp-beam-node-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* hub-ul central — element HTML rotund, la fel ca nodurile */
:is(#layout-groups, #services) li[data-name="CasaOS"] .service-card .sp-beam-hub {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 0 6px rgba(56,189,248,0.55) !important;
  z-index: 2 !important;
  animation: sp-beam-hub-pulse 2.4s ease-in-out infinite !important;
}

@keyframes sp-beam-hub-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 1;   }
}


/* =========================================================
   N8N — Docker Stats + WORKFLOWS / TRIGGERS / EXECUTIONS
   (același model ca la MinIO)
   ========================================================= */

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats {
  position: relative !important;
  padding-bottom: 50px !important;
  overflow: visible !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container {
  position: relative !important;
  overflow: visible !important;
}

/* SEPARATOR — după Docker Stats */
:is(#layout-groups, #services) #n8n-main .service-card > .service-stats::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 42px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.09) !important;
  pointer-events: none !important;
}

/* CATEGORII N8N — poziționare pe 3 coloane */
:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
  display: flex !important;
  position: absolute !important;
  top: 31px !important;
  transform: translateY(2px) !important;

  width: 33.333333% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;

  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;

  opacity: 0.85 !important;
  color: rgba(255,255,255,0.75) !important;
  pointer-events: none !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child {
  left: 0 !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child {
  left: 33.333333% !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child {
  left: 66.666667% !important;
}

/* ICONIȚA CATEGORIEI */
:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
  content: "" !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;

  background-color: rgba(255,255,255,0.58) !important;
  opacity: 0.9 !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* LABELUL CATEGORIEI */
:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
}

/* =========================================================
   WORKFLOWS — noduri conectate
   ========================================================= */

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::before {
  background-color: var(--sp-blue) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='5' cy='6' r='2.6' fill='none' stroke='black' stroke-width='1.8'/><circle cx='19' cy='6' r='2.6' fill='none' stroke='black' stroke-width='1.8'/><circle cx='12' cy='19' r='2.6' fill='none' stroke='black' stroke-width='1.8'/><path d='M7.3 7.4L10.7 16.2M16.7 7.4L13.3 16.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='5' cy='6' r='2.6' fill='none' stroke='black' stroke-width='1.8'/><circle cx='19' cy='6' r='2.6' fill='none' stroke='black' stroke-width='1.8'/><circle cx='12' cy='19' r='2.6' fill='none' stroke='black' stroke-width='1.8'/><path d='M7.3 7.4L10.7 16.2M16.7 7.4L13.3 16.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::after {
  content: "WORKFLOWS" !important;
}

/* =========================================================
   TRIGGERS — fulger
   ========================================================= */

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::before {
  background-color: var(--sp-purple) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8 9-12h-6l1-8z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8 9-12h-6l1-8z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/></svg>") !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::after {
  content: "TRIGGERS" !important;
}

/* =========================================================
   EXECUTIONS — bifă în cerc
   ========================================================= */

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::before {
  background-color: var(--sp-green) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/><path d='M8.3 12.2l2.4 2.4 5-5.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/><path d='M8.3 12.2l2.4 2.4 5-5.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

:is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::after {
  content: "EXECUTIONS" !important;
}

/* =========================================================
   RESPONSIVE — la fel ca la MinIO
   ========================================================= */

@media (max-width: 768px) {
  :is(#layout-groups, #services) #n8n-main .service-card > .service-stats {
    padding-bottom: 48px !important;
  }

  :is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
    top: 30px !important;
    transform: translateY(2px) !important;
    gap: 3px !important;
  }

  :is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }

  :is(#layout-groups, #services) #n8n-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
    font-size: 0.54rem !important;
  }
}

/* =========================================================================================
   =========================================================================================
   ADĂUGIRI NOI — LINKURI EXTERNE COMPACTE + FOTBAL GENIUS / METUBE LA ÎNĂLȚIME COMPLETĂ
   =========================================================================================
   =========================================================================================

   Idee: fiecare grup (Finanțe / Fotbal / Descărcări) devine o grilă "dense":
   - cardurile complete (cu widget/stats reale) ocupă 2 "rânduri" (span 2) = înălțime completă
   - linkurile externe simple ocupă 1 "rând" (span 1) = mai puțin de jumătate din cardul complet
   Grid-ul (grid-auto-flow: dense) le împachetează SINGUR, în ordinea din services.yaml —
   nu trebuie schimbată ordinea, cea actuală e deja corectă:
     Finanțe:    Firefly, XTB, eToro                       (+ viitoare: crypto.com, binance...)
     Fotbal:     Fotbal Genius, Betano, Unibet, Flashscore, SofaScore, TV Sport HD
     Descărcări: Transmission, MeTube, Filelist, YouTube

   Ajustează --sp-mini-row mai jos dacă vrei cardurile mici mai mari/mici.
   ========================================================================================= */

:root {
  --sp-mini-row: 72px;
}

/* Grilă "dense" doar pentru cele 3 grupuri vizate (identificate după un card cunoscut din ele) */
.services-group:has(#finance-main) .services-list,
.services-group:has(#football-main) .services-list,
.services-group:has(#transmission-main) .services-list {
  grid-auto-flow: dense !important;
  grid-auto-rows: var(--sp-mini-row) !important;
}

/* Implicit: orice card din aceste grupuri e "complet" (2 rânduri) */
.services-group:has(#finance-main) .services-list > .service,
.services-group:has(#football-main) .services-list > .service,
.services-group:has(#transmission-main) .services-list > .service {
  grid-row: span 2 !important;
}

/* Excepție: linkurile externe simple sunt "mini" (1 rând) */
.services-group:has(#finance-main) .services-list > #finance-xtb,
.services-group:has(#finance-main) .services-list > #finance-etoro,
.services-group:has(#football-main) .services-list > #football-betano,
.services-group:has(#football-main) .services-list > #football-unibet,
.services-group:has(#football-main) .services-list > #football-flashscore,
.services-group:has(#football-main) .services-list > #football-sofascore,
.services-group:has(#football-main) .services-list > #football-tv,
.services-group:has(#transmission-main) .services-list > #filelist-link,
.services-group:has(#transmission-main) .services-list > #youtube-link {
  grid-row: span 1 !important;
}

/* =========================================================
   STIL CARD MINI — linkuri externe compacte
   ========================================================= */

#finance-xtb .service-card,
#finance-etoro .service-card,
#football-betano .service-card,
#football-unibet .service-card,
#football-flashscore .service-card,
#football-sofascore .service-card,
#football-tv .service-card,
#filelist-link .service-card,
#youtube-link .service-card {
  min-height: 0 !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 6px 12px !important;
}

#finance-xtb .service-title,
#finance-etoro .service-title,
#football-betano .service-title,
#football-unibet .service-title,
#football-flashscore .service-title,
#football-sofascore .service-title,
#football-tv .service-title,
#filelist-link .service-title,
#youtube-link .service-title {
  min-height: 0 !important;
}

#finance-xtb .service-description,
#finance-etoro .service-description,
#football-betano .service-description,
#football-unibet .service-description,
#football-flashscore .service-description,
#football-sofascore .service-description,
#football-tv .service-description,
#filelist-link .service-description,
#youtube-link .service-description {
  -webkit-line-clamp: 1 !important;
  min-height: 0 !important;
  margin-top: 1px !important;
  font-size: 0.68rem !important;
}

@media (max-width: 768px) {
  :root { --sp-mini-row: 74px; }
}

@media (max-width: 480px) {
  :root { --sp-mini-row: 66px; }
}

/* =========================================================
   FOTBAL GENIUS — Docker Stats + MECIURI / PONTURI / STIRI
   (același model ca la MinIO / N8N)
   ========================================================= */

#football-main .service-card > .service-stats {
  position: relative !important;
  padding-bottom: 50px !important;
  overflow: visible !important;
}

#football-main .service-card > .service-stats > .service-container {
  position: relative !important;
  overflow: visible !important;
}

#football-main .service-card > .service-stats::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 42px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.09) !important;
  pointer-events: none !important;
}

#football-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
  display: flex !important;
  position: absolute !important;
  top: 31px !important;
  transform: translateY(2px) !important;

  width: 33.333333% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;

  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;

  opacity: 0.85 !important;
  color: rgba(255,255,255,0.75) !important;
  pointer-events: none !important;
}

#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child { left: 0 !important; }
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child { left: 33.333333% !important; }
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child { left: 66.666667% !important; }

#football-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
  content: "" !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
  background-color: rgba(255,255,255,0.58) !important;
  opacity: 0.9 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

#football-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
}

/* MECIURI — minge de fotbal */
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::before {
  background-color: var(--sp-blue) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/><path d='M12 8l3.5 2.5-1.3 4h-4.4l-1.3-4z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/><path d='M12 3v5M6 8l2.5 2M18 8l-2.5 2M8.5 20l1-4M15.5 20l-1-4' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/><path d='M12 8l3.5 2.5-1.3 4h-4.4l-1.3-4z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/><path d='M12 3v5M6 8l2.5 2M18 8l-2.5 2M8.5 20l1-4M15.5 20l-1-4' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>") !important;
}
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::after { content: "MECIURI" !important; }

/* PONTURI — bec/idee (strategie de pariere) */
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::before {
  background-color: var(--sp-purple) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3 11c.6.5 1 1.2 1 2h4c0-.8.4-1.5 1-2a6 6 0 0 0-3-11z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3 11c.6.5 1 1.2 1 2h4c0-.8.4-1.5 1-2a6 6 0 0 0-3-11z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") !important;
}
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::after { content: "PONTURI" !important; }

/* STIRI — ziar */
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::before {
  background-color: var(--sp-green) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='14' height='15' rx='1' fill='none' stroke='black' stroke-width='1.8'/><path d='M17 8h4v10a2 2 0 0 1-2 2h-2' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M6 9h8M6 12h8M6 15h5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='14' height='15' rx='1' fill='none' stroke='black' stroke-width='1.8'/><path d='M17 8h4v10a2 2 0 0 1-2 2h-2' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M6 9h8M6 12h8M6 15h5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>") !important;
}
#football-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::after { content: "STIRI" !important; }

@media (max-width: 768px) {
  #football-main .service-card > .service-stats { padding-bottom: 48px !important; }
  #football-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
    top: 30px !important;
    transform: translateY(2px) !important;
    gap: 3px !important;
  }
  #football-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }
  #football-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
    font-size: 0.54rem !important;
  }
}

/* =========================================================
   METUBE — Docker Stats + DESCĂRCĂRI / COADĂ / FORMATE
   (același model ca la MinIO / N8N / Fotbal Genius)
   ========================================================= */

#metube-main .service-card > .service-stats {
  position: relative !important;
  padding-bottom: 50px !important;
  overflow: visible !important;
}

#metube-main .service-card > .service-stats > .service-container {
  position: relative !important;
  overflow: visible !important;
}

#metube-main .service-card > .service-stats::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 42px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.09) !important;
  pointer-events: none !important;
}

#metube-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
  display: flex !important;
  position: absolute !important;
  top: 31px !important;
  transform: translateY(2px) !important;

  width: 33.333333% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;

  font-size: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;

  opacity: 0.85 !important;
  color: rgba(255,255,255,0.75) !important;
  pointer-events: none !important;
}

#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child { left: 0 !important; }
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child { left: 33.333333% !important; }
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child { left: 66.666667% !important; }

#metube-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
  content: "" !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
  background-color: rgba(255,255,255,0.58) !important;
  opacity: 0.9 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

#metube-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
}

/* DESCĂRCĂRI — săgeată jos */
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::before {
  background-color: var(--sp-blue) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v13m0 0l-4.5-4.5M12 16l4.5-4.5M4 20h16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v13m0 0l-4.5-4.5M12 16l4.5-4.5M4 20h16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(1) > div:last-child::after { content: "DESCARCARI" !important; }

/* COADĂ — listă */
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::before {
  background-color: var(--sp-purple) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h10' stroke='black' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h10' stroke='black' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>") !important;
}
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(2) > div:last-child::after { content: "COADA" !important; }

/* FORMATE — video/film */
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::before {
  background-color: var(--sp-green) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/><path d='M8 5v14M16 5v14M3 9h5M3 15h5M16 9h5M16 15h5' stroke='black' stroke-width='1.4' fill='none'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/><path d='M8 5v14M16 5v14M3 9h5M3 15h5M16 9h5M16 15h5' stroke='black' stroke-width='1.4' fill='none'/></svg>") !important;
}
#metube-main .service-card > .service-stats > .service-container > .service-block:nth-child(3) > div:last-child::after { content: "FORMATE" !important; }

@media (max-width: 768px) {
  #metube-main .service-card > .service-stats { padding-bottom: 48px !important; }
  #metube-main .service-card > .service-stats > .service-container > .service-block > div:last-child {
    top: 30px !important;
    transform: translateY(2px) !important;
    gap: 3px !important;
  }
  #metube-main .service-card > .service-stats > .service-container > .service-block > div:last-child::before {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }
  #metube-main .service-card > .service-stats > .service-container > .service-block > div:last-child::after {
    font-size: 0.54rem !important;
  }
}

/* =========================================================
   INFRASTRUCTURĂ — CARDURI FĂRĂ LINK
   PostgreSQL / Caddy / Tor-Privoxy / Watchtower
   ========================================================= */

:is(#layout-groups, #services) .services-group:has(#postgresql-main) .service-card,
:is(#layout-groups, #services) .services-group:has(#caddy-main) .service-card,
:is(#layout-groups, #services) .services-group:has(#tor-privoxy-main) .service-card,
:is(#layout-groups, #services) .services-group:has(#watchtower-main) .service-card {
  cursor: default !important;
}

/* păstrăm hover-ul vizual, dar fără senzația de link */
:is(#layout-groups, #services) .services-group:has(#postgresql-main) .service-card:hover,
:is(#layout-groups, #services) .services-group:has(#caddy-main) .service-card:hover,
:is(#layout-groups, #services) .services-group:has(#tor-privoxy-main) .service-card:hover,
:is(#layout-groups, #services) .services-group:has(#watchtower-main) .service-card:hover {
  transform: translateY(-1px) !important;
}