/* Premium liquid-glass exercise cards. Content remains fully fluid on mobile. */
#screenContent .exercise-glass-card {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  min-height: 0;
  padding: 15px !important;
  border: 1px solid rgba(197, 228, 232, .16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 255, 0, .10), transparent 34%),
    linear-gradient(145deg, rgba(29, 49, 56, .78), rgba(9, 20, 27, .88)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 14px 30px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#screenContent .exercise-glass-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 38%;
  border-radius: 23px 23px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

#screenContent .exercise-glass-card:hover,
#screenContent .exercise-glass-card:focus-visible {
  border-color: rgba(200, 255, 0, .42) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 255, 0, .15), transparent 36%),
    linear-gradient(145deg, rgba(34, 58, 62, .84), rgba(10, 23, 29, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 18px 36px rgba(0,0,0,.28), 0 0 22px rgba(200,255,0,.07);
  outline: none;
}

#screenContent .exercise-glass-card:active { transform: scale(.988); }
#screenContent .exercise-card-index,
#screenContent .exercise-card-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

#screenContent .exercise-card-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(200,255,0,.28);
  border-radius: 12px;
  color: rgba(225,255,184,.92);
  background: linear-gradient(145deg, rgba(200,255,0,.19), rgba(200,255,0,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

#screenContent .exercise-card-index.is-complete {
  color: #142000;
  border-color: rgba(200,255,0,.75);
  background: linear-gradient(145deg, #d6ff38, #9fdc00);
}

#screenContent .exercise-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  color: #9eeaff;
  background: rgba(88, 205, 255, .10);
  border: 1px solid rgba(88, 205, 255, .20);
}

#screenContent .exercise-card-copy { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
#screenContent .exercise-card-title { margin: 0; color: #f7fbfb; font-size: 16px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
#screenContent .exercise-card-description { margin: 6px 0 0; color: rgba(224, 235, 236, .76); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
#screenContent .exercise-card-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 9px; color: rgba(198, 214, 216, .58); font-size: 12px; line-height: 1.35; }
#screenContent .exercise-card-meta strong { color: rgba(224, 242, 242, .78); font-weight: 700; }
#screenContent .exercise-card-muscle { position: relative; z-index: 1; flex: 0 0 auto; max-width: 28%; color: rgba(200,255,0,.78) !important; white-space: normal; text-align: right; }

#screenContent .workout-session-description {
  max-width: 680px;
  margin: 5px 0 0;
  color: rgba(224, 235, 236, .68);
  font-size: 13px;
  line-height: 1.45;
}

#screenContent .exercise-glass-card.is-complete {
  border-color: rgba(200,255,0,.32) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,255,0,.13), transparent 34%),
    linear-gradient(145deg, rgba(38, 58, 49, .80), rgba(11, 25, 27, .90)) !important;
}

@media (max-width: 520px) {
  #screenContent .exercise-glass-card { gap: 9px !important; padding: 13px !important; border-radius: 21px !important; }
  #screenContent .exercise-card-icon { display: none; }
  #screenContent .exercise-card-title { font-size: 15px; }
  #screenContent .exercise-card-description { font-size: 13px; line-height: 1.42; }
  #screenContent .exercise-card-muscle { max-width: 24%; font-size: 10px; }
}

/* Session cards use the same restrained glass language while keeping their
   existing click target and navigation behavior unchanged. */
#screenContent .workout-plan-glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(197, 228, 232, .14) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(30, 47, 55, .72), rgba(10, 20, 27, .86)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#screenContent .workout-plan-glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,.07), transparent 32%);
  pointer-events: none;
}

#screenContent .workout-plan-glass-card:hover,
#screenContent .workout-plan-glass-card:focus-visible {
  border-color: rgba(200,255,0,.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 32px rgba(0,0,0,.25), 0 0 18px rgba(200,255,0,.06);
  outline: none;
}

#screenContent .workout-plan-glass-card:active { transform: scale(.99); }
#screenContent .workout-plan-glass-card > * { position: relative; z-index: 1; }
#screenContent .workout-plan-glass-card .workout-session-description { margin-top: 6px; }
#screenContent .workout-session-title,
#screenContent .workout-detail-title { overflow-wrap: anywhere; white-space: normal; }

@media (max-width: 520px) {
  #screenContent .workout-plan-glass-card { gap: 11px !important; padding: 13px !important; border-radius: 20px !important; }
  #screenContent .workout-plan-glass-card > span:last-child { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  #screenContent .exercise-glass-card,
  #screenContent .workout-plan-glass-card { transition: none; }
}

/* Mobile safety net: keep the flex content column shrinkable and allow long
   exercise descriptions to use all available lines instead of being clipped. */
#screenContent .exercise-glass-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#screenContent .exercise-glass-card > .flex-1 {
  min-width: 0 !important;
  max-width: 100%;
}

#screenContent .exercise-glass-card .exercise-card-title,
#screenContent .exercise-glass-card .exercise-card-description,
#screenContent .exercise-glass-card .exercise-card-meta {
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal;
}

#screenContent .exercise-glass-card > .ng-tag-gray {
  min-width: 0;
  max-width: 24%;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-align: right;
  line-height: 1.2;
}

@media (max-width: 520px) {
  #screenContent .exercise-glass-card > .ng-tag-gray {
    max-width: 20%;
    font-size: 10px;
  }
}