/* MedPocket design system */

:root {
  --mp-bg: hsl(210 45% 97%);
  --mp-fg: hsl(222 47% 11%);
  --mp-muted: hsl(215 16% 47%);
  --mp-accent: hsl(199 89% 48%);
  --mp-accent-deep: hsl(199 89% 38%);
  --mp-card: hsl(0 0% 100%);
  --mp-border: hsl(214 32% 91%);
  --mp-shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.04), 0 4px 12px hsl(199 89% 48% / 0.06);
  --mp-shadow-md: 0 4px 6px hsl(222 47% 11% / 0.04), 0 12px 32px hsl(199 89% 48% / 0.1);
  --mp-shadow-lg: 0 8px 24px hsl(222 47% 11% / 0.08), 0 24px 48px hsl(199 89% 48% / 0.12);
  --mp-radius: 1rem;
  --mp-radius-lg: 1.25rem;
  --mp-radius-xl: 1.5rem;
}

@keyframes mp-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mp-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--mp-fg);
  min-height: 100vh;
  position: relative;
  background: linear-gradient(
    165deg,
    hsl(199 70% 72%) 0%,
    hsl(210 55% 78%) 28%,
    hsl(270 48% 76%) 58%,
    hsl(199 65% 70%) 100%
  );
  -webkit-font-smoothing: antialiased;
}

/* Fixed gradient mesh — stays put while content scrolls */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 75% at 50% -20%, hsl(199 89% 42% / 0.7), transparent 52%),
    radial-gradient(ellipse 60% 50% at 100% 10%, hsl(270 55% 52% / 0.55), transparent 48%),
    radial-gradient(ellipse 55% 45% at 0% 70%, hsl(175 50% 42% / 0.5), transparent 48%),
    radial-gradient(ellipse 50% 40% at 90% 85%, hsl(199 75% 45% / 0.45), transparent 45%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    hsl(222 47% 11% / 0.04) 100%
  );
}

.text-accent,
.text-primary {
  color: var(--mp-accent);
}

.text-muted-foreground {
  color: var(--mp-muted);
}

.bg-card {
  background: var(--mp-card);
}

.border-border {
  border-color: var(--mp-border);
}

.bg-accent {
  background: var(--mp-accent);
}

/* —— Layout —— */
.mp-page {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 7.5rem;
}

.mp-page-header {
  margin-bottom: 0.25rem;
}

.mp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-accent);
  margin-bottom: 0.5rem;
}

.mp-brand-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--mp-accent), hsl(199 89% 65%));
  box-shadow: 0 0 12px hsl(199 89% 48% / 0.5);
}

.mp-title {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}

.mp-subtitle {
  font-size: 0.9rem;
  color: var(--mp-muted);
  margin: 0.35rem 0 0;
  line-height: 1.5;
}

.mp-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin: 0 0 0.75rem;
}

/* —— Hero stat card —— */
.mp-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--mp-radius-xl);
  padding: 1.35rem 1.5rem;
  color: white;
  background: linear-gradient(135deg, hsl(199 89% 52%), hsl(199 89% 36%) 55%, hsl(210 70% 32%));
  box-shadow: var(--mp-shadow-lg);
  animation: mp-fade-up 0.45s ease both;
}

.mp-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 55%;
  height: 120%;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.12);
  pointer-events: none;
}

.mp-hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 40%;
  height: 80%;
  border-radius: 50%;
  background: hsl(199 89% 70% / 0.15);
  pointer-events: none;
}

.mp-hero-stat {
  position: relative;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.mp-hero-label {
  position: relative;
  font-size: 0.85rem;
  opacity: 0.92;
  margin-top: 0.35rem;
}

.mp-hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  background: hsl(0 0% 100% / 0.2);
  border: 1px solid hsl(0 0% 100% / 0.25);
  border-radius: 9999px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}

.mp-hero-cta:hover {
  background: hsl(0 0% 100% / 0.3);
  transform: translateY(-1px);
}

/* —— Feature cards —— */
.mp-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--mp-radius-lg);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: mp-fade-up 0.4s ease both;
}

.mp-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-md);
}

.mp-feature--scan {
  background: linear-gradient(135deg, hsl(199 90% 97%), hsl(199 70% 94%));
  border-color: hsl(199 60% 88%);
}

.mp-feature--mind {
  background: linear-gradient(135deg, hsl(270 55% 97%), hsl(270 45% 94%));
  border-color: hsl(270 40% 88%);
}

.mp-feature--tracker {
  background: linear-gradient(135deg, hsl(152 55% 97%), hsl(152 45% 92%));
  border-color: hsl(152 40% 85%);
}

.mp-feature--health {
  background: linear-gradient(135deg, hsl(174 55% 97%), hsl(174 45% 92%));
  border-color: hsl(174 40% 85%);
}

.mp-feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: hsl(0 0% 100% / 0.85);
  box-shadow: var(--mp-shadow-sm);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.mp-feature-icon-img,
.mp-page-hero-icon-img,
.mp-title-icon-img,
.mp-search-icon-img,
.mp-section-icon-img,
.mp-inline-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-feature-icon-img-fallback,
.mp-page-hero-icon-img-fallback,
.mp-title-icon-img-fallback,
.mp-search-icon-img-fallback,
.mp-section-icon-img-fallback {
  font-size: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mp-page-hero-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 100% / 0.9);
  box-shadow: var(--mp-shadow-sm);
  font-size: 1.75rem;
}

.mp-title-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.mp-search-icon {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.mp-section-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.mp-feature-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}

.mp-feature-desc {
  font-size: 0.72rem;
  margin: 0.15rem 0 0;
  opacity: 0.75;
}

.mp-feature--scan .mp-feature-title {
  color: hsl(199 70% 28%);
}
.mp-feature--scan .mp-feature-desc {
  color: hsl(199 50% 38%);
}
.mp-feature--mind .mp-feature-title {
  color: hsl(270 45% 32%);
}
.mp-feature--mind .mp-feature-desc {
  color: hsl(270 35% 42%);
}

.mp-feature--tracker .mp-feature-title {
  color: hsl(152 45% 28%);
}
.mp-feature--tracker .mp-feature-desc {
  color: hsl(152 35% 38%);
}

.mp-feature--health .mp-feature-title {
  color: hsl(174 45% 28%);
}
.mp-feature--health .mp-feature-desc {
  color: hsl(174 35% 38%);
}

.mp-tracker-badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

.mp-tracker-badge--under {
  background: hsl(199 89% 48% / 0.15);
  color: hsl(199 70% 32%);
}

.mp-tracker-badge--normal {
  background: hsl(152 60% 40% / 0.15);
  color: hsl(152 50% 28%);
}

.mp-tracker-badge--over {
  background: hsl(38 92% 50% / 0.18);
  color: hsl(32 80% 32%);
}

.mp-tracker-badge--obese {
  background: hsl(0 72% 48% / 0.12);
  color: hsl(0 65% 38%);
}

.mp-tracker-tip {
  font-size: 0.875rem;
  line-height: 1.45;
  padding-left: 0.75rem;
  border-left: 2px solid hsl(199 89% 48% / 0.4);
  color: hsl(222 25% 28%);
}

.mp-workout-chip {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1.5px solid hsl(214 32% 91%);
  background: white;
  color: hsl(215 16% 47%);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mp-workout-chip--active {
  border-color: hsl(168 60% 42%);
  background: hsl(168 50% 96%);
  color: hsl(168 76% 28%);
}
.mp-workout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.mp-workout-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  border-radius: 0.85rem;
  border: 1.5px solid hsl(214 32% 91%);
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  min-height: 5.5rem;
}
.mp-workout-card:active {
  transform: scale(0.98);
}
.mp-workout-card--active {
  border-color: hsl(168 60% 42%);
  background: hsl(168 50% 96% / 0.7);
  box-shadow: 0 4px 14px hsl(168 50% 40% / 0.15);
}
.mp-workout-card--done {
  border-color: hsl(152 60% 42% / 0.5);
}
.mp-workout-card-name {
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  color: hsl(222 47% 11%);
}
.mp-workout-done-mark {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-size: 0.65rem;
  color: hsl(152 60% 36%);
  font-weight: 700;
}
.mp-workout-detail {
  margin-top: 0.5rem;
  padding: 1rem;
  border-radius: 0.85rem;
  border: 1.5px solid hsl(168 60% 42% / 0.35);
  background: hsl(168 50% 98% / 0.5);
}
.mp-workout-stepper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.mp-workout-stepper-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mp-workout-start-btn,
.mp-workout-done-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.mp-workout-start-btn {
  background: linear-gradient(135deg, hsl(168 76% 36%), hsl(199 89% 48%));
  color: white;
}
.mp-workout-done-btn {
  background: hsl(152 55% 42%);
  color: white;
}

/* —— Fitness (pharmacy-style cards) —— */
.mp-fit-hero {
  background: linear-gradient(135deg, hsl(152 55% 38%) 0%, hsl(168 76% 42%) 50%, hsl(199 89% 48%) 100%);
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  color: white;
  box-shadow: 0 8px 24px hsl(152 50% 35% / 0.22);
}
.mp-fit-card {
  cursor: pointer;
  border: none;
  text-align: left;
  padding: 0;
}
.mp-fit-card--active {
  outline: 2px solid hsl(168 60% 42%);
  outline-offset: 2px;
}
.mp-fit-card--done {
  opacity: 0.92;
}
.mp-fit-card-img {
  background: linear-gradient(180deg, hsl(168 50% 97%) 0%, hsl(210 40% 98%) 100%);
}
.mp-fit-cat-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 2;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: hsl(168 70% 28%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.mp-fit-cat-badge--cardio { color: hsl(199 89% 38%); }
.mp-fit-cat-badge--core { color: hsl(280 60% 45%); }
.mp-fit-cat-badge--flex { color: hsl(32 90% 40%); }
.mp-fit-done-badge {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: hsl(152 55% 42%);
  color: white;
}
.mp-fit-tap-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: hsl(168 70% 32%);
}
.mp-fit-progress-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: hsl(152 55% 42% / 0.12);
  color: hsl(152 55% 32%);
  white-space: nowrap;
}
.mp-fit-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  animation: mp-fit-fade-in 0.2s ease;
}
.mp-fit-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: none;
  background: rgba(15, 23, 42, 0.5);
  cursor: pointer;
}
.mp-fit-overlay-sheet {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  background: hsl(210 40% 98%);
  display: flex;
  flex-direction: column;
  animation: mp-fit-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  min-height: 0;
  pointer-events: auto;
}
.mp-fit-overlay-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(214 32% 91%);
  background: hsl(210 40% 98%);
  z-index: 2;
}
.mp-fit-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: hsl(215 16% 40%);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.mp-fit-exit-btn:hover {
  background: hsl(214 32% 91% / 0.6);
  color: hsl(222 47% 11%);
}
.mp-fit-exit-link {
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: hsl(215 16% 47%);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.mp-fit-exit-link:hover {
  background: hsl(214 32% 91% / 0.5);
  color: hsl(222 47% 11%);
}
.mp-fit-timer-section {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 0.85rem;
  border: 1.5px solid hsl(168 60% 42% / 0.25);
  background: hsl(168 50% 98% / 0.45);
}
.mp-fit-timer-display {
  margin: 1rem 0;
  padding: 0.75rem;
  text-align: center;
  font-size: 2.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: hsl(168 70% 28%);
  line-height: 1.1;
}
.mp-fit-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, hsl(168 76% 36%), hsl(199 89% 48%));
  color: white;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px hsl(168 50% 40% / 0.35);
}
.mp-fit-start-btn:active {
  transform: scale(0.98);
}
.mp-fit-overlay-handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: hsl(214 32% 85%);
  margin: 0.65rem auto 0;
  flex-shrink: 0;
}
.mp-fit-overlay-close {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: hsl(215 16% 40%);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mp-fit-overlay-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.mp-fit-session-banner {
  position: relative;
  height: 14rem;
  flex-shrink: 0;
  background: hsl(168 50% 96%);
  overflow: hidden;
}
.mp-fit-session-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.mp-fit-session-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(210 40% 98%) 0%, transparent 55%);
}
.mp-fit-overlay-body {
  padding: 0 1.15rem 2rem;
  margin-top: -1.5rem;
  position: relative;
  z-index: 1;
  flex: 1;
}
@keyframes mp-fit-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mp-fit-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.mp-workout-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  background: hsl(0 70% 50%);
  color: white;
}

.mp-health-plan-block {
  border-radius: 0.85rem;
  border: 1px solid hsl(214 32% 91%);
  background: hsl(0 0% 100% / 0.6);
  padding: 0.75rem;
}

.mp-health-plan-block-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mp-accent);
  margin-bottom: 0.5rem;
}

.mp-plan-tabs {
  display: flex;
  border-radius: 0.85rem;
  border: 1px solid hsl(214 32% 91%);
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
}

.mp-plan-tab {
  flex: 1;
  padding: 0.6rem 0.5rem;
  border: none;
  background: white;
  color: var(--mp-muted);
  cursor: pointer;
}

.mp-plan-tab.is-active {
  background: var(--mp-accent);
  color: white;
}

.mp-food-total {
  background: linear-gradient(135deg, hsl(38 92% 96%), hsl(32 90% 92%));
  border: 1px solid hsl(38 70% 85%);
}

.mp-food-chip {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background: hsl(38 90% 92%);
  color: hsl(32 70% 28%);
  border: 1px solid hsl(38 60% 80%);
  cursor: pointer;
}

.mp-food-log-item {
  border-radius: 0.85rem;
  border: 1px solid hsl(214 32% 91%);
  background: hsl(0 0% 100% / 0.7);
  padding: 0.5rem 0.75rem;
}

.mp-food-del {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.mp-food-del:hover {
  color: hsl(0 72% 48%);
}

/* —— Category grid —— */
.mp-category {
  display: block;
  padding: 1rem 0.85rem;
  border-radius: var(--mp-radius);
  background: hsl(0 0% 100% / 0.92);
  border: 1px solid hsl(0 0% 100% / 0.5);
  box-shadow: var(--mp-shadow-sm);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--mp-fg);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  backdrop-filter: blur(8px);
}

.mp-category:hover {
  border-color: hsl(199 89% 48% / 0.45);
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
}

.mp-category-emoji {
  font-size: 1.35rem;
  display: block;
  margin-bottom: 0.35rem;
}

.mp-category-thumb {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.35rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: hsl(0 0% 100% / 0.9);
  box-shadow: var(--mp-shadow-sm);
}

.mp-category-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-category-thumb-fallback {
  font-size: 1.35rem;
  line-height: 2.25rem;
  text-align: center;
  display: block;
}

/* —— Injury cards —— */
.mp-injury-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: var(--mp-radius-lg);
  border: 1px solid hsl(0 0% 100% / 0.6);
  background: hsl(0 0% 100% / 0.94);
  box-shadow: var(--mp-shadow-sm);
  backdrop-filter: blur(8px);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: mp-fade-up 0.35s ease both;
}

a:hover .mp-injury-card {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-md);
}

.mp-injury-emoji {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: hsl(0 0% 100% / 0.9);
  box-shadow: var(--mp-shadow-sm);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.mp-injury-thumb-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.mp-detail-hero-thumb {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  min-height: 4.5rem;
  margin: 0 auto;
  border-radius: 1.1rem;
  overflow: hidden;
  background: hsl(0 0% 100% / 0.85);
  box-shadow: var(--mp-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  position: relative;
}

.mp-detail-hero-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.mp-injury-thumb-fallback {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* —— Injury cards —— */
.mp-injury-name {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
}

.mp-injury-cat {
  font-size: 0.7rem;
  color: var(--mp-muted);
  margin: 0.1rem 0 0;
}

.mp-injury-chevron {
  color: hsl(199 89% 48% / 0.5);
  font-size: 1.1rem;
  transition: transform 0.2s;
}

a:hover .mp-injury-chevron {
  transform: translateX(2px);
  color: var(--mp-accent);
}

/* —— Pills (browse filters) —— */
.mp-pill {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1px solid var(--mp-border);
  background: hsl(0 0% 100% / 0.8);
  color: var(--mp-muted);
}

.mp-pill:hover {
  border-color: hsl(199 89% 48% / 0.35);
  color: var(--mp-fg);
}

.mp-pill--active {
  background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-deep));
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px hsl(199 89% 48% / 0.35);
}

/* —— Detail page —— */
.mp-detail-hero {
  border-radius: var(--mp-radius-xl);
  padding: 1.35rem;
  border: 1px solid hsl(0 0% 100% / 0.5);
  box-shadow: var(--mp-shadow-md);
}

.mp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--mp-muted);
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  margin: -0.35rem 0 0 -0.65rem;
  border-radius: 9999px;
  transition: color 0.2s, background 0.2s;
}

.mp-back:hover {
  color: var(--mp-fg);
  background: hsl(0 0% 100% / 0.6);
}

.mp-list-section h2 {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.mp-list-section li {
  font-size: 0.85rem;
  background: hsl(0 0% 100% / 0.85);
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow-sm);
  list-style: none;
}

.mp-list-section ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mp-condition-disclaimer {
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  border: 1.5px solid hsl(25 85% 72%);
  background: linear-gradient(160deg, hsl(38 95% 94%), hsl(25 90% 97%));
  box-shadow: var(--mp-shadow-sm);
}
.mp-condition-disclaimer-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(25 70% 35%);
  margin-bottom: 0.25rem;
}
.mp-condition-disclaimer-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: hsl(222 47% 14%);
  margin: 0 0 0.45rem;
}
.mp-condition-disclaimer-body {
  font-size: 0.88rem;
  line-height: 1.45;
  color: hsl(222 25% 28%);
  margin: 0 0 0.65rem;
}
.mp-condition-disclaimer-warn {
  font-size: 0.86rem;
  line-height: 1.45;
  color: hsl(0 55% 28%);
  background: hsl(0 80% 97%);
  border: 1px solid hsl(0 70% 88%);
  border-radius: 0.75rem;
  padding: 0.7rem 0.8rem;
  margin: 0;
}

/* —— Bottom nav —— */
.mp-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 0.65rem 0.65rem;
  pointer-events: none;
  overflow: visible;
}

.mp-nav-inner {
  position: relative;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0.4rem 0;
  background: hsl(0 0% 100% / 0.9);
  border: 1px solid hsl(0 0% 100% / 0.95);
  border-radius: 1.25rem;
  box-shadow: 0 4px 6px hsl(222 47% 11% / 0.04), 0 16px 40px hsl(199 89% 48% / 0.12);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  overflow: hidden;
}

.mp-nav-inner::before,
.mp-nav-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.25rem;
  z-index: 1;
  pointer-events: none;
}

.mp-nav-inner::before {
  left: 0;
  background: linear-gradient(to right, hsl(0 0% 100% / 0.95), transparent);
}

.mp-nav-inner::after {
  right: 0;
  background: linear-gradient(to left, hsl(0 0% 100% / 0.95), transparent);
}

.mp-nav-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

.mp-nav-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.mp-nav-track::-webkit-scrollbar {
  display: none;
}

.mp-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0.45rem 0.35rem;
  border: none;
  background: transparent;
  border-radius: 0.85rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--mp-muted);
  cursor: pointer;
  transition: all 0.2s;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.mp-nav-btn > span:first-child:not(.mp-nav-profile-icon):not(.mp-nav-icon) {
  font-size: 1.15rem;
  line-height: 1;
}

.mp-nav-icon {
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.35rem;
}

.mp-nav-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-nav-icon-fallback {
  font-size: 1.15rem;
  line-height: 1;
}

.mp-nav-profile-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(199 89% 48% / 0.12);
  border: 1px solid hsl(199 89% 48% / 0.25);
}

.mp-nav-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-nav-profile-initials {
  font-size: 0.45rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mp-accent);
}

.mp-nav-btn.is-active {
  color: var(--mp-accent);
  background: hsl(199 89% 48% / 0.1);
}

.mp-nav-btn.is-active span:first-child {
  transform: scale(1.08);
}

.mp-guide-pill-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.mp-guide-pill-thumb .mp-injury-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-guide-pill-thumb .mp-injury-thumb-fallback {
  font-size: 0.65rem;
  line-height: 1;
}

/* —— Profile —— */
.mp-profile-avatar {
  position: relative;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: var(--mp-shadow-md);
  overflow: hidden;
  background: linear-gradient(135deg, hsl(199 89% 48% / 0.2), hsl(199 70% 94%));
  padding: 0;
  cursor: pointer;
}

.mp-profile-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--mp-accent);
}

.mp-profile-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 0% / 0.35);
  opacity: 0;
  font-size: 1.5rem;
  transition: opacity 0.2s;
}

.mp-profile-avatar:hover .mp-profile-avatar-overlay {
  opacity: 1;
}

.mp-profile-card {
  border-radius: var(--mp-radius-lg);
  border: 1px solid var(--mp-border);
  background: hsl(0 0% 100% / 0.95);
  padding: 1.25rem;
  box-shadow: var(--mp-shadow-sm);
}

.mp-profile-input {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--mp-border);
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
  background: white;
}

.mp-profile-btn-primary {
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background: linear-gradient(135deg, var(--mp-accent), hsl(199 89% 38%));
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-profile-btn-secondary {
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--mp-border);
  background: white;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-profile-progress-bar {
  height: 0.65rem;
  border-radius: 9999px;
  background: hsl(210 40% 94%);
  overflow: hidden;
}

.mp-profile-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--mp-accent), hsl(199 70% 55%));
  transition: width 0.4s ease;
}

.mp-profile-stat {
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  background: hsl(199 90% 96%);
  border: 1px solid hsl(199 60% 90%);
}

.mp-profile-stat--violet {
  background: hsl(270 55% 97%);
  border-color: hsl(270 40% 90%);
}

.mp-profile-stat--green {
  background: hsl(150 50% 96%);
  border-color: hsl(150 40% 88%);
}

/* —— MedPocket Plus subscription —— */
.mp-sub-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.mp-sub-logo--card {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 1.1rem;
}
.mp-sub-panel {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 1.35rem 1.3rem 1.4rem;
  border-radius: 1.35rem;
  border: 1.5px solid hsl(199 55% 78%);
  background:
    radial-gradient(120% 140% at 100% 0%, hsl(199 90% 90% / 0.95), transparent 55%),
    linear-gradient(160deg, hsl(199 70% 96%), hsl(210 40% 99%) 42%, white 100%);
  box-shadow: var(--mp-shadow-md);
}
.mp-sub-panel--active {
  border-color: hsl(168 45% 55%);
  background:
    radial-gradient(120% 140% at 100% 0%, hsl(168 55% 88% / 0.9), transparent 55%),
    linear-gradient(160deg, hsl(168 40% 96%), hsl(210 40% 99%) 42%, white 100%);
}
.mp-sub-panel-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mp-sub-card-left {
  flex: 1;
  min-width: 0;
}
.mp-sub-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(199 80% 32%);
  margin-bottom: 0.35rem;
}
.mp-sub-panel--active .mp-sub-badge {
  color: hsl(168 55% 28%);
}
.mp-sub-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: hsl(222 47% 11%);
  line-height: 1.25;
}
.mp-sub-card-meta {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: hsl(215 16% 40%);
}
.mp-sub-trial-banner {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid hsl(199 55% 78%);
  background: linear-gradient(135deg, hsl(199 90% 94%), hsl(199 80% 97%));
}
.mp-sub-trial-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: hsl(199 80% 28%);
}
.mp-sub-trial-copy {
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: hsl(215 16% 38%);
  line-height: 1.4;
}
.mp-sub-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.mp-sub-benefit {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0.9rem;
  border-radius: 1.05rem;
  background: white;
  border: 1px solid hsl(214 32% 91%);
}
.mp-sub-benefit-icon {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 0.85rem;
  object-fit: cover;
  flex-shrink: 0;
  background: hsl(199 90% 95%);
}
.mp-sub-benefit-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: hsl(222 47% 11%);
}
.mp-sub-benefit-detail {
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: hsl(215 16% 42%);
  line-height: 1.35;
}
.mp-sub-plans-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(215 16% 42%);
  margin-top: 0.15rem;
}
.mp-sub-plans {
  display: grid;
  gap: 0.75rem;
}
.mp-sub-plan {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  min-height: 4.6rem;
  padding: 1.05rem 1.1rem;
  border-radius: 1.15rem;
  border: 2px solid hsl(214 32% 88%);
  background: white;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mp-sub-plan.is-selected {
  border-color: var(--mp-accent);
  background: hsl(199 90% 97%);
  box-shadow: 0 0 0 4px hsl(199 89% 48% / 0.14);
}
.mp-sub-plan-radio {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 2px solid hsl(214 20% 75%);
  flex-shrink: 0;
  position: relative;
}
.mp-sub-plan.is-selected .mp-sub-plan-radio {
  border-color: var(--mp-accent);
}
.mp-sub-plan.is-selected .mp-sub-plan-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--mp-accent);
}
.mp-sub-plan-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.mp-sub-plan-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.12rem;
  font-weight: 800;
  color: hsl(222 47% 11%);
}
.mp-sub-save {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: hsl(168 55% 28%);
  background: hsl(168 50% 90%);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.mp-sub-plan-tagline {
  font-size: 0.85rem;
  color: hsl(215 16% 42%);
}
.mp-sub-plan-price {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.mp-sub-plan-price strong {
  font-size: 1.2rem;
  color: hsl(222 47% 11%);
}
.mp-sub-plan-price span {
  font-size: 0.8rem;
  color: hsl(215 16% 45%);
}
.mp-sub-current {
  display: grid;
  gap: 0.25rem;
  font-size: 0.92rem;
  color: hsl(168 45% 28%);
  background: hsl(168 45% 94%);
  border: 1px solid hsl(168 35% 85%);
  border-radius: 0.95rem;
  padding: 0.8rem 0.95rem;
  text-align: center;
}
.mp-sub-current-since {
  display: block;
  font-size: 0.78rem;
  color: hsl(168 30% 38%);
}
.mp-sub-confirm-btn {
  min-height: 3.1rem;
  font-size: 1.05rem !important;
  border-radius: 1rem !important;
}
.mp-sub-cancel-link {
  border: none;
  background: transparent;
  color: hsl(215 16% 45%);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem;
  cursor: pointer;
}
.mp-sub-cancel-link:hover {
  color: hsl(0 70% 42%);
}
.mp-sub-legal {
  text-align: center;
  font-size: 0.78rem;
  color: hsl(215 16% 50%);
  line-height: 1.4;
}

/* —— Profile mood check-in —— */

/* —— Profile mood check-in —— */
.mp-mood-picker {
  display: flex;
  gap: 0.35rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mp-mood-picker--compact .mp-mood-btn {
  min-width: 3.1rem;
}
.mp-mood-btn {
  flex: 1;
  min-width: 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  border-radius: 0.75rem;
  border: 1.5px solid hsl(214 32% 91%);
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.mp-mood-btn:active {
  transform: scale(0.96);
}
.mp-mood-btn--active {
  border-color: hsl(168 60% 42%);
  background: hsl(168 50% 96%);
  box-shadow: 0 0 0 2px hsl(168 50% 88%);
}
.mp-mood-emoji {
  font-size: 1.65rem;
  line-height: 1;
}
.mp-mood-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: hsl(215 16% 47%);
  text-align: center;
  line-height: 1.15;
}
.mp-mood-btn--active .mp-mood-label {
  color: hsl(168 70% 28%);
}

/* —— Pharmacy shop —— */
.mp-shop-hero {
  background: linear-gradient(135deg, hsl(168 76% 42%) 0%, hsl(199 89% 48%) 100%);
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  color: white;
  box-shadow: 0 8px 24px hsl(168 60% 40% / 0.25);
}
.mp-shop-hero-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.mp-shop-hero-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 0.25rem;
}
.mp-shop-hero-sub {
  font-size: 0.75rem;
  opacity: 0.92;
  margin-top: 0.35rem;
  line-height: 1.4;
}
.mp-shop-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 1px solid hsl(214 32% 91%);
  border-radius: 9999px;
  padding: 0.5rem 0.85rem;
  box-shadow: 0 2px 8px hsl(214 32% 91% / 0.8);
}
.mp-shop-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  background: transparent;
}
.mp-shop-cart-icon {
  position: relative;
  padding: 0.35rem;
  color: hsl(168 70% 32%);
}
.mp-shop-cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: hsl(0 84% 55%);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-condition-med-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid hsl(168 40% 88%);
  background: hsl(168 55% 97% / 0.45);
  padding: 0.625rem 0.75rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px hsl(214 32% 91% / 0.45);
  transition: background 0.15s, border-color 0.15s;
}
.mp-condition-med-link:hover {
  background: hsl(168 55% 94%);
  border-color: hsl(168 40% 78%);
}
.mp-condition-med-thumb {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: white;
  border: 1px solid hsl(214 32% 91% / 0.8);
}
.mp-condition-med-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-condition-med-emoji {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: white;
}
.mp-body-map {
  border-radius: 0.85rem;
  border: 1px solid hsl(199 89% 88%);
  background: linear-gradient(135deg, hsl(199 89% 97%), #fff);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.mp-body-map-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(199 89% 38%);
  margin-bottom: 0.5rem;
}
.mp-body-map-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mp-body-map-svg {
  width: 6rem;
  height: 7rem;
  flex-shrink: 0;
  color: hsl(215 16% 65%);
}
.mp-body-map-figure {
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px hsl(215 60% 40% / 0.25));
}
.mp-body-map-glow {
  fill: hsl(199 89% 48% / 0.3);
  stroke: hsl(199 89% 48% / 0.45);
  stroke-width: 1.2;
  animation: mp-body-pulse 2s ease-in-out infinite;
}
.mp-body-map-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(222 47% 11%);
}
.mp-body-map-confidence {
  font-size: 0.68rem;
  color: hsl(215 16% 47%);
  margin-top: 0.125rem;
}
.mp-body-map-note {
  font-size: 0.62rem;
  color: hsl(215 16% 47%);
  margin-top: 0.5rem;
  line-height: 1.45;
}
@keyframes mp-body-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.mp-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.mp-shop-card {
  background: white;
  border: 1px solid hsl(214 32% 91%);
  border-radius: 0.85rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px hsl(214 32% 91% / 0.5);
  transition: box-shadow 0.15s, transform 0.15s;
}
.mp-shop-card:hover {
  box-shadow: 0 6px 16px hsl(168 40% 60% / 0.15);
  transform: translateY(-1px);
}
.mp-shop-card-img {
  position: relative;
  background: #fff;
  height: 8.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid hsl(214 32% 94%);
}
.mp-shop-card-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.mp-shop-card-photo.hidden {
  display: none;
}
.mp-shop-emoji {
  font-size: 2.25rem;
  line-height: 1;
}
.mp-shop-emoji-fb {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mp-shop-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  color: white;
}
.mp-shop-badge--sale { background: hsl(0 75% 50%); }
.mp-shop-badge--new { background: hsl(199 89% 48%); }
.mp-shop-badge--bestseller { background: hsl(168 76% 36%); }
.mp-shop-card-body {
  padding: 0.55rem 0.65rem 0.7rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.mp-shop-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  color: hsl(222 47% 11%);
}
.mp-shop-card-meta {
  font-size: 0.62rem;
  color: hsl(215 16% 47%);
  line-height: 1.3;
  flex: 1;
}
.mp-shop-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.15rem 0 0.35rem;
}
.mp-shop-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: hsl(168 70% 28%);
}
.mp-shop-was {
  font-size: 0.65rem;
  color: hsl(215 16% 55%);
  text-decoration: line-through;
}
.mp-shop-add-btn {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border-radius: 0.5rem;
  border: none;
  background: linear-gradient(135deg, hsl(168 76% 38%) 0%, hsl(199 89% 48%) 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.mp-shop-add-btn:active { opacity: 0.9; }
.mp-shop-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  padding: 0 1rem 0.5rem;
  pointer-events: none;
}
.mp-shop-sticky-btn {
  pointer-events: auto;
  max-width: 32rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 9999px;
  border: none;
  background: hsl(168 76% 32%);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 28px hsl(168 50% 30% / 0.45);
  cursor: pointer;
}
.mp-shop-sticky-cta {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(255,255,255,0.2);
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}
.mp-shop-panel {
  background: white;
  border: 1px solid hsl(214 32% 91%);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 8px hsl(214 32% 91% / 0.4);
}
.mp-shop-panel-title {
  font-size: 0.9rem;
  font-weight: 700;
}
.mp-shop-cart-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(214 32% 91%);
  background: hsl(210 40% 98%);
}
.mp-shop-qty-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(214 32% 91%);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mp-shop-delivery-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1.5px solid hsl(214 32% 91%);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mp-shop-delivery-opt--active {
  border-color: hsl(168 60% 42%);
  background: hsl(168 50% 96% / 0.6);
}
.mp-shop-pharmacy-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1.5px solid hsl(214 32% 91%);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.5rem;
}
.mp-pharmacy-map {
  height: 220px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1.5px solid hsl(214 32% 91%);
  z-index: 0;
}
.mp-pharmacy-map .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.mp-pharmacy-selected {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1.5px solid hsl(168 60% 42%);
  background: hsl(168 50% 96% / 0.6);
}
.mp-pharmacy-map-hint {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: hsl(215 16% 47%);
  text-align: center;
}
.mp-pharm-map-marker {
  background: transparent !important;
  border: none !important;
}
.mp-pharm-map-pin {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid hsl(199 89% 48%);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.mp-pharm-map-pin--active {
  border-color: hsl(168 76% 36%);
  background: hsl(168 50% 96%);
  transform: scale(1.12);
  box-shadow: 0 3px 12px hsl(168 50% 40% / 0.35);
}
.mp-shop-map-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: hsl(199 89% 38%);
  text-decoration: underline;
}
.mp-shop-map-link:hover {
  color: hsl(168 76% 30%);
}
.mp-shop-checkout-btn {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background: linear-gradient(135deg, hsl(168 76% 36%) 0%, hsl(199 89% 48%) 100%);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px hsl(168 50% 40% / 0.35);
}
.mp-shop-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(168 70% 32%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mp-shop-card-fields {
  padding-top: 0.25rem;
}
.mp-shop-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.mp-shop-card--tap {
  border: 1px solid hsl(214 32% 91%);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  padding: 0;
}
.mp-shop-detail-hero {
  position: relative;
  height: 11rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid hsl(214 32% 94%);
}
.mp-shop-detail-hero-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 1rem;
}
.mp-shop-detail-hero-emoji {
  position: absolute;
  font-size: 3rem;
  opacity: 0.35;
  pointer-events: none;
}
.mp-shop-detail-cat {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(168 70% 32%);
  background: hsl(168 55% 94%);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.mp-shop-detail-otc {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: hsl(199 70% 38%);
  background: hsl(199 80% 94%);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.mp-shop-detail-block {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: hsl(210 40% 98%);
  border: 1px solid hsl(214 32% 92%);
}
.mp-shop-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(215 16% 47%);
  margin: 0 0 0.4rem;
}
.mp-shop-detail-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: hsl(222 47% 18%);
  margin: 0;
}
.mp-shop-detail-block--tip {
  background: hsl(168 55% 96%);
  border-color: hsl(168 45% 88%);
}
.mp-shop-compare-block {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 0.85rem;
  background: hsl(210 40% 98%);
  border: 1px solid hsl(214 32% 90%);
}
.mp-shop-compare-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: hsl(222 47% 15%);
}
.mp-shop-compare-intro {
  font-size: 0.75rem;
  line-height: 1.5;
  color: hsl(215 16% 42%);
  margin: 0 0 0.75rem;
}
.mp-shop-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mp-shop-compare-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid hsl(214 32% 91%);
  background: white;
  cursor: pointer;
  font: inherit;
}
.mp-shop-compare-row:disabled {
  cursor: default;
  border-color: hsl(168 50% 75%);
  background: hsl(168 55% 96%);
}
.mp-shop-compare-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: hsl(222 47% 15%);
}
.mp-shop-compare-pick {
  display: block;
  font-size: 0.72rem;
  color: hsl(168 70% 28%);
  margin-top: 0.2rem;
  font-weight: 600;
}
.mp-shop-compare-vs {
  display: block;
  font-size: 0.72rem;
  color: hsl(215 16% 45%);
  margin-top: 0.25rem;
  line-height: 1.45;
}
.mp-shop-success {
  text-align: center;
  padding: 2rem 1rem;
  background: white;
  border-radius: 1rem;
  border: 1px solid hsl(214 32% 91%);
}

/* —— Mind chat —— */
.mp-mind-shell {
  background: linear-gradient(180deg, hsl(270 55% 96% / 0.55) 0%, transparent 50%);
  min-height: 70vh;
}

.mp-mind-header {
  background: hsl(0 0% 100% / 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(270 40% 92%);
}

.mp-bubble-user {
  background: linear-gradient(135deg, hsl(270 55% 48%), hsl(270 50% 38%));
  color: white;
  border-radius: 1.15rem 1.15rem 0.35rem 1.15rem;
  box-shadow: 0 4px 16px hsl(270 50% 40% / 0.25);
}

.mp-bubble-assistant {
  background: hsl(0 0% 100% / 0.95);
  border: 1px solid hsl(270 35% 92%);
  border-radius: 1.15rem 1.15rem 1.15rem 0.35rem;
  box-shadow: var(--mp-shadow-sm);
}

.mp-mind-input-bar {
  background: #fff !important;
  border-top: 1px solid hsl(270 35% 90%) !important;
  box-shadow: 0 -8px 32px hsl(270 40% 40% / 0.08) !important;
}

.mp-mind-input {
  border: 1.5px solid hsl(214 32% 88%) !important;
  border-radius: 1rem !important;
  background: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.mp-mind-input:focus {
  border-color: hsl(270 50% 55%) !important;
  box-shadow: 0 0 0 3px hsl(270 50% 55% / 0.15) !important;
  outline: none !important;
}

.mp-mind-send {
  background: linear-gradient(135deg, hsl(270 55% 52%), hsl(270 50% 40%)) !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 4px 14px hsl(270 50% 40% / 0.3) !important;
}

.mp-starter-btn {
  border-radius: 0.85rem !important;
  border: 1px solid hsl(270 35% 90%) !important;
  background: hsl(0 0% 100% / 0.8) !important;
  transition: all 0.2s !important;
}

.mp-starter-btn:hover {
  border-color: hsl(270 45% 75%) !important;
  background: hsl(270 50% 98%) !important;
  transform: translateY(-1px);
}

.mp-mind-starter-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: hsl(270 50% 97%);
  border: 1px solid hsl(270 35% 90%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-mind-starter-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-mind-starter-emoji {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* —— Support page —— */
.mp-support-emergency-card {
  border-radius: var(--mp-radius-lg);
  border: 1px solid hsl(0 72% 88%);
  background: linear-gradient(135deg, hsl(0 85% 97%), hsl(0 0% 100%));
  padding: 1.25rem;
  box-shadow: var(--mp-shadow-sm);
}

.mp-support-customer-card {
  border-radius: var(--mp-radius-lg);
  border: 1px solid var(--mp-border);
  background: hsl(0 0% 100% / 0.95);
  padding: 1.25rem;
  box-shadow: var(--mp-shadow-sm);
}

.mp-support-emergency-head {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.mp-support-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.mp-support-icon--emergency {
  background: hsl(0 85% 94%);
}

.mp-support-icon--cs {
  background: hsl(199 90% 96%);
  border: 1px solid hsl(199 60% 90%);
}

.mp-support-h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.mp-support-h2--emergency {
  color: hsl(0 65% 28%);
}

.mp-support-desc {
  font-size: 0.85rem;
  color: var(--mp-muted);
  margin: 0.35rem 0 0;
  line-height: 1.5;
}

.mp-support-desc--emergency {
  color: hsl(0 50% 38%);
}

.mp-ambulance-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--mp-radius-lg);
  background: linear-gradient(135deg, hsl(0 72% 48%), hsl(0 70% 38%));
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px hsl(0 70% 40% / 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mp-ambulance-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px hsl(0 70% 40% / 0.45);
}

.mp-support-email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mp-fg);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mp-support-email-btn:hover {
  border-color: hsl(199 89% 48% / 0.4);
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-1px);
}

.mp-support-footnote {
  font-size: 0.7rem;
  color: var(--mp-muted);
  text-align: center;
  margin: 0.65rem 0 0;
  line-height: 1.4;
}

.mp-support-footnote--rose {
  color: hsl(0 50% 42%);
}

/* ── Relaxation ── */
.mp-feature--relax {
  background: linear-gradient(135deg, hsl(195 50% 97%), hsl(210 45% 92%));
  border-color: hsl(200 40% 85%);
}

.mp-feature--relax .mp-feature-title {
  color: hsl(200 45% 28%);
}

.mp-feature--relax .mp-feature-desc {
  color: hsl(200 35% 38%);
}

.mp-relax-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  background: hsl(214 32% 94%);
  border-radius: var(--mp-radius-lg);
}

.mp-relax-tab {
  flex: 1;
  padding: 0.55rem 0.35rem;
  border: none;
  border-radius: 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  background: transparent;
  color: var(--mp-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.mp-relax-tab--on {
  background: #fff;
  color: var(--mp-fg);
  box-shadow: var(--mp-shadow-sm);
}

.mp-relax-breathe-ring-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

/* Apple-style breathing flower */
.mp-breathe-flower {
  position: relative;
  width: 17rem;
  height: 17rem;
  margin: 0.5rem auto 0;
  border-radius: 50%;
  transition: background 0.6s ease;
}

.mp-breathe-flower--active {
  background: radial-gradient(circle, hsl(200 45% 96%) 0%, hsl(199 40% 90%) 55%, transparent 70%);
}

.mp-breathe-glow {
  position: absolute;
  inset: 0.75rem;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(185 70% 75% / 0.35) 0%, transparent 68%);
  transform: scale(var(--bloom, 0.5));
  transition: transform var(--bloom-dur, 4s) cubic-bezier(0.45, 0.05, 0.25, 1);
  pointer-events: none;
}

.mp-breathe-petals {
  position: absolute;
  inset: 0;
  transform: scale(var(--bloom, 0.5));
  transition: transform var(--bloom-dur, 4s) cubic-bezier(0.45, 0.05, 0.25, 1);
  pointer-events: none;
}

.mp-breathe-petals--inner {
  transform: scale(calc(var(--bloom, 0.5) * 0.72 + 0.18));
  transition: transform var(--bloom-dur, 4s) cubic-bezier(0.45, 0.05, 0.25, 1);
}

.mp-breathe-petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.35rem;
  height: 5.25rem;
  margin: -2.65rem 0 0 -1.175rem;
  transform-origin: center 2.65rem;
  transform: rotate(calc(var(--pi) * 30deg)) translateY(-2rem);
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(
    165deg,
    hsl(178 72% 78%) 0%,
    hsl(192 68% 58%) 45%,
    hsl(199 70% 46%) 100%
  );
  opacity: 0.92;
  box-shadow: 0 2px 14px hsl(199 55% 40% / 0.22);
}

.mp-breathe-petal--inner {
  width: 1.65rem;
  height: 3.6rem;
  margin: -1.85rem 0 0 -0.825rem;
  transform-origin: center 1.85rem;
  transform: rotate(calc(var(--pi) * 45deg)) translateY(-1.35rem);
  opacity: 0.55;
  background: linear-gradient(
    165deg,
    hsl(185 65% 82%) 0%,
    hsl(199 60% 62%) 100%
  );
}

.mp-breathe-flower--active .mp-breathe-petal {
  background: linear-gradient(
    165deg,
    hsl(175 80% 74%) 0%,
    hsl(189 75% 52%) 50%,
    hsl(199 80% 42%) 100%
  );
}

.mp-breathe-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7.25rem;
  height: 7.25rem;
  border-radius: 50%;
  border: none;
  background: radial-gradient(
    circle at 38% 32%,
    hsl(195 85% 92%) 0%,
    hsl(199 72% 58%) 55%,
    hsl(200 65% 46%) 100%
  );
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow:
    0 6px 28px hsl(199 55% 35% / 0.4),
    inset 0 2px 10px hsl(0 0% 100% / 0.4);
  transition: box-shadow 0.2s, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.mp-breathe-core:hover {
  box-shadow:
    0 8px 32px hsl(199 55% 35% / 0.48),
    inset 0 2px 10px hsl(0 0% 100% / 0.45);
}

.mp-breathe-core:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.mp-relax-breathe-ring-outer {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, hsl(199 70% 94%) 0%, hsl(199 50% 88%) 100%);
  box-shadow: 0 0 0 8px hsl(199 60% 92% / 0.5), var(--mp-shadow-md);
}

.mp-relax-breathe-ring {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: linear-gradient(145deg, hsl(199 89% 52%), hsl(199 70% 42%));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 1s ease-in-out;
  box-shadow: 0 8px 32px hsl(199 70% 40% / 0.35);
}

.mp-relax-breathe-phase {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  padding: 0 0.5rem;
  text-align: center;
}

.mp-relax-breathe-sec {
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.mp-relax-breath-pick {
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--mp-border);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mp-muted);
  cursor: pointer;
}

.mp-relax-breath-pick--on {
  border-color: hsl(199 89% 48%);
  background: hsl(199 89% 48% / 0.12);
  color: hsl(199 70% 32%);
}

.mp-relax-btn {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--mp-radius);
  background: hsl(199 89% 48%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.mp-relax-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--mp-shadow-md);
}

.mp-relax-btn-secondary {
  padding: 0.65rem 1rem;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mp-fg);
  cursor: pointer;
}

.mp-relax-select {
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.mp-relax-pl-chip {
  flex-shrink: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid hsl(210 30% 82%);
  background: hsl(210 40% 98%);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mp-muted);
  cursor: pointer;
  white-space: nowrap;
}

.mp-relax-pl-chip--on {
  background: linear-gradient(135deg, hsl(200 45% 28%), hsl(199 55% 38%));
  border-color: transparent;
  color: #fff;
}

.mp-relax-pl-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--mp-radius-lg);
  color: #fff;
  margin: 0.75rem 0;
  box-shadow: var(--mp-shadow-md);
}

.mp-relax-pl-hero-count {
  font-size: 0.65rem;
  margin: 0.35rem 0 0;
  opacity: 0.75;
}

.mp-relax-pl-playall {
  flex-shrink: 0;
  padding: 0.55rem 0.9rem;
  border: none;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.22);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.15s;
}

.mp-relax-pl-playall:hover {
  background: hsl(0 0% 100% / 0.32);
  transform: scale(1.03);
}

a.mp-relax-pl-playall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}

.mp-relax-spotify-wrap {
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  box-shadow: var(--mp-shadow-md);
  margin: 0.75rem 0 0;
  background: hsl(200 30% 12%);
}

.mp-relax-yt-embed {
  height: 16rem;
}

.mp-relax-spotify-embed {
  display: block;
  width: 100%;
  height: 22rem;
  border: 0;
}

@media (min-width: 400px) {
  .mp-relax-spotify-embed {
    height: 26rem;
  }
  .mp-relax-yt-embed {
    height: 20rem;
  }
}

.mp-relax-music-err.hidden {
  display: none;
}

.mp-relax-pl-hero-emoji {
  font-size: 2.5rem;
  line-height: 1;
}

.mp-relax-pl-hero-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.mp-relax-pl-hero-sub {
  font-size: 0.72rem;
  margin: 0.2rem 0 0;
  opacity: 0.85;
}

.mp-relax-tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mp-border);
  background: hsl(210 35% 98%);
}

.mp-relax-track {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: none;
  border-bottom: 1px solid hsl(214 32% 91%);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.mp-relax-track:last-child {
  border-bottom: none;
}

.mp-relax-track:hover {
  background: hsl(199 50% 96%);
}

.mp-relax-track--playing {
  background: hsl(199 60% 94%);
}

.mp-relax-track-num {
  width: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: hsl(199 70% 38%);
  text-align: center;
}

.mp-relax-track-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mp-relax-track-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mp-fg);
}

.mp-relax-track-artist {
  font-size: 0.68rem;
  color: var(--mp-muted);
}

.mp-relax-track-dur {
  font-size: 0.68rem;
  color: var(--mp-muted);
}

.mp-relax-now-playing {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5.5rem;
  width: calc(100% - 2rem);
  max-width: 28rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--mp-radius-lg);
  background: linear-gradient(135deg, hsl(200 45% 22%), hsl(199 50% 32%));
  color: #fff;
  box-shadow: 0 8px 32px hsl(200 50% 20% / 0.45);
  z-index: 40;
}

.mp-relax-now-playing.hidden {
  display: none;
}

.mp-relax-np-loading {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font-size: 0.6rem;
  opacity: 0.85;
}

.mp-relax-np-loading.hidden {
  display: none;
}

.mp-relax-np-ctrl {
  flex-shrink: 0;
  border: none;
  background: hsl(0 0% 100% / 0.12);
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: pointer;
  margin-top: 0.15rem;
}

.mp-relax-np-ctrl--main {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.85rem;
  background: hsl(0 0% 100% / 0.22);
}

.mp-relax-np-prog {
  width: 100%;
  height: 0.25rem;
  margin: 0.35rem 0 0.15rem;
  accent-color: hsl(175 70% 65%);
  cursor: pointer;
}

.mp-relax-np-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(152 70% 55%);
  animation: mp-relax-pulse 1.2s ease infinite;
}

@keyframes mp-relax-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

.mp-relax-np-title {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-relax-np-sub {
  font-size: 0.65rem;
  margin: 0.1rem 0 0;
  opacity: 0.8;
}

.mp-relax-np-stop {
  border: none;
  background: hsl(0 0% 100% / 0.15);
  color: #fff;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
}

.mp-relax-game-tab {
  flex: 1;
  padding: 0.5rem 0.35rem;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.mp-relax-game-tab--on {
  border-color: hsl(199 89% 48%);
  background: hsl(199 89% 48% / 0.1);
  color: hsl(199 70% 32%);
}

.mp-relax-games--chess {
  margin-left: -0.35rem;
  margin-right: -0.35rem;
}

/* Chess.com-style board layout */
.mp-chess-layout {
  --chess-light: #ebecd0;
  --chess-dark: #779556;
  --chess-last: #cdd26a;
  --chess-select: rgba(20, 85, 30, 0.55);
  --chess-frame: #312e2b;
  --chess-panel: #262421;
  width: 100%;
  max-width: min(100%, 34rem);
  margin: 0 auto;
}

.mp-chess-player {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  background: var(--chess-panel);
  border-radius: 0.35rem;
  color: #fff;
  min-height: 2.75rem;
}

.mp-chess-player--top {
  margin-bottom: 0.35rem;
}

.mp-chess-player--bottom {
  margin-top: 0.35rem;
}

.mp-chess-player-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  background: hsl(0 0% 100% / 0.08);
}

.mp-chess-player-avatar--bot {
  background: hsl(0 0% 100% / 0.12);
}

.mp-chess-player-avatar--you {
  background: hsl(199 60% 40% / 0.45);
}

.mp-chess-player-body {
  flex: 1;
  min-width: 0;
}

.mp-chess-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mp-chess-player-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mp-chess-clock {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.45rem;
  border-radius: 0.2rem;
  background: hsl(0 0% 100% / 0.08);
  color: hsl(0 0% 100% / 0.75);
  min-width: 2.1rem;
  text-align: center;
}

.mp-chess-clock--active {
  background: #fff;
  color: var(--chess-panel);
}

.mp-chess-captured {
  display: flex;
  flex-wrap: wrap;
  gap: 0.05rem;
  min-height: 0.85rem;
  margin-top: 0.15rem;
  opacity: 0.92;
}

.mp-chess-captured-piece {
  font-size: 0.72rem;
  line-height: 1;
}

.mp-chess-captured-piece--inv {
  filter: brightness(1.15);
}

.mp-chess-board-shell {
  display: flex;
  gap: 0.2rem;
  align-items: stretch;
  background: var(--chess-panel);
  padding: 0.35rem 0.35rem 0.25rem;
  border-radius: 0.35rem;
}

.mp-chess-ranks {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  font-size: 0.58rem;
  font-weight: 700;
  color: hsl(0 0% 100% / 0.45);
  padding: 0.2rem 0;
  width: 0.85rem;
  text-align: center;
}

.mp-chess-ranks span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-chess-board-col {
  flex: 1;
  min-width: 0;
}

.mp-chess-board-frame {
  position: relative;
  border-radius: 0.2rem;
  overflow: hidden;
  box-shadow: 0 4px 14px hsl(0 0% 0% / 0.28);
  border: 0.28rem solid var(--chess-frame);
}

.mp-chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  aspect-ratio: 1;
  width: 100%;
}

.mp-chess-fly-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.mp-chess-fly {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 11.5vw, 3.35rem);
  line-height: 1;
  filter: drop-shadow(0 2px 3px hsl(0 0% 0% / 0.4));
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mp-chess-drag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 11.5vw, 3.35rem);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px hsl(0 0% 0% / 0.45));
  will-change: transform;
  transition: transform 0.08s linear, filter 0.15s ease;
  cursor: grabbing;
}

.mp-chess-drag--active {
  filter: drop-shadow(0 10px 18px hsl(0 0% 0% / 0.55));
  font-size: clamp(2.2rem, 12vw, 3.6rem);
}

.mp-chess-board--dragging {
  touch-action: none;
  user-select: none;
  cursor: grabbing;
}

.mp-chess-board--dragging .mp-chess-sq {
  cursor: grabbing;
}

.mp-chess-sq--drop {
  box-shadow: inset 0 0 0 4px hsl(120 55% 38% / 0.85);
}

.mp-chess-files {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  font-size: 0.58rem;
  font-weight: 700;
  color: hsl(0 0% 100% / 0.45);
  padding: 0.15rem 0.2rem 0;
  text-align: center;
}

.mp-chess-sq {
  position: relative;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}

.mp-chess-sq--light {
  background: var(--chess-light);
}

.mp-chess-sq--dark {
  background: var(--chess-dark);
}

.mp-chess-sq--last {
  background-color: var(--chess-last) !important;
}

.mp-chess-sq--sel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chess-select);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.mp-chess-sq--hint-dot::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: hsl(0 0% 0% / 0.2);
  pointer-events: none;
  z-index: 1;
  transform: scale(0.6);
  animation: mp-chess-hint-in 0.2s ease forwards;
}

.mp-chess-sq--hint-cap::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 0.28rem solid hsl(0 0% 0% / 0.22);
  pointer-events: none;
  z-index: 1;
  transform: scale(0.85);
  animation: mp-chess-hint-in 0.2s ease forwards;
}

@keyframes mp-chess-hint-in {
  to {
    transform: scale(1);
  }
}

.mp-chess-piece {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 11.5vw, 3.35rem);
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 2px 2px hsl(0 0% 0% / 0.35));
  pointer-events: none;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
  cursor: grab;
}

.mp-chess-sq:has(.mp-chess-piece:not(:empty)) {
  cursor: grab;
}

.mp-chess-piece--lift {
  transform: scale(1.1) translateY(-2px);
}

.mp-chess-piece--fade {
  opacity: 0 !important;
  transform: scale(0.85);
}

.mp-chess-piece--black {
  color: #1a1a1a;
}

.mp-chess-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding: 0.45rem 0.55rem;
  background: var(--chess-panel);
  border-radius: 0.35rem;
  color: #fff;
}

.mp-chess-status {
  font-size: 0.72rem;
  font-weight: 600;
  color: hsl(0 0% 100% / 0.85);
  flex: 1;
  min-width: 0;
}

.mp-chess-hint {
  font-size: 0.58rem;
  color: hsl(0 0% 100% / 0.45);
  white-space: nowrap;
  display: none;
}

@media (min-width: 360px) {
  .mp-chess-hint {
    display: inline;
  }
}

.mp-chess-tool-btn {
  border: none;
  background: hsl(0 0% 100% / 0.12);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.mp-chess-tool-btn:active {
  background: hsl(0 0% 100% / 0.22);
}

.mp-relax-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

.mp-relax-scramble-letters {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
  color: hsl(199 70% 32%);
  margin: 0.5rem 0;
}

.mp-relax-puzzle-msg {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(152 45% 32%);
  margin-top: 0.5rem;
}

.mp-relax-ws-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.mp-relax-ws-chip {
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: hsl(214 32% 92%);
  color: var(--mp-muted);
}

.mp-relax-ws-chip--done {
  background: hsl(152 45% 88%);
  color: hsl(152 45% 28%);
  text-decoration: line-through;
}

.mp-relax-ws-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: 18rem;
  margin: 0 auto;
}

.mp-relax-ws-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: hsl(210 40% 96%);
  border-radius: 0.2rem;
  cursor: pointer;
  user-select: none;
}

.mp-relax-ws-cell--sel {
  background: hsl(199 70% 75%);
  color: #fff;
}