.app:has(> .main-wrap--learning) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.main-wrap--learning {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.main.main--learning {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  flex: 0 0 100dvh;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.view--learning {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.learning-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.learning-feed {
  width: min(100%, 56.25dvh, 520px);
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: #080808;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.learning-feed::-webkit-scrollbar {
  display: none;
}

.learning-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #080808;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.learning-card__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #080808;
  object-fit: cover;
}

.learning-card__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, transparent 34%);
}

.learning-card__topic {
  position: absolute;
  z-index: 2;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
}

.learning-card__content {
  position: absolute;
  z-index: 2;
  right: 74px;
  bottom: max(24px, calc(14px + env(safe-area-inset-bottom)));
  left: 16px;
  pointer-events: none;
}

.learning-card__counter {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.learning-card__title {
  margin: 0;
  color: #fff;
  font-size: clamp(17px, 4.7vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}

.learning-card__actions {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: max(24px, calc(14px + env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.learning-card__action {
  min-width: 52px;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.learning-card__action:active {
  transform: scale(0.96);
}

.learning-card__paused {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
}

.learning-card--paused .learning-card__paused {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.learning-feed__empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}

@media (min-width: 769px) {
  .learning-feed {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
  }
}

@media (max-width: 768px) {
  .main-wrap--learning .topbar {
    flex: 0 0 auto;
  }

  .main-wrap--learning .main.main--learning {
    height: calc(100dvh - 58px - env(safe-area-inset-top));
    flex-basis: calc(100dvh - 58px - env(safe-area-inset-top));
  }

  .learning-card__topic {
    top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-feed {
    scroll-behavior: auto;
  }

  .learning-card__paused {
    transition: none;
  }
}