/* lists.html */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background: linear-gradient(135deg, rgba(0, 171, 181, 0.1), rgba(181, 134, 50, 0.1));
      border: 1px solid rgba(0, 171, 181, 0.2);
      color: #00abb5;
    }

    * {
      font-family: 'Vazirmatn', system-ui, sans-serif;
    }

    body {
      background: linear-gradient(to bottom, #d5e4ec 0%, #00abb559 50%, #d5e4ec 100%);
      background-attachment: fixed;
    }

    .glass {
      background: rgba(232, 252, 255, 0.65);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(181, 140, 67, 0.15);
      box-shadow: 0 8px 32px rgba(0, 171, 181, 0.08);
    }

    .glass-strong {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }

    .episode-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .episode-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(0, 171, 181, 0.1) 0%, rgba(181, 134, 50, 0.1) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .episode-card:hover::before {
      opacity: 1;
    }

    .episode-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 60px rgba(0, 171, 181, 0.25);
    }

    .episode-cover {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9;
    }

    .episode-cover img {
      width: 100%;
      /* height: 100%; */
      object-fit: cover;
    }

    .episode-cover::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    }

    .play-button {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .play-button:hover {
      transform: scale(1.15);
      box-shadow: 0 8px 20px rgba(0, 171, 181, 0.4);
    }

    .filter-chip {
      transition: all 0.2s ease;
      position: relative;
    }

    .filter-chip::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(135deg, #00abb5, #b58632);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .filter-chip.active::before {
      opacity: 1;
    }

    .filter-chip.active {
      background: linear-gradient(135deg, rgba(0, 171, 181, 0.15), rgba(181, 134, 50, 0.15));
      color: #00abb5;
      font-weight: 600;
    }

    .search-input {
      transition: all 0.3s ease;
    }

    .search-input:focus {
      box-shadow: 0 0 0 4px rgba(0, 171, 181, 0.1);
      border-color: #00abb5;
    }

    .view-toggle-btn {
      transition: all 0.2s ease;
    }

    .view-toggle-btn.active {
      background: linear-gradient(135deg, #00abb5, #008a92);
      color: white;
      box-shadow: 0 4px 12px rgba(0, 171, 181, 0.3);
    }

    .list-view {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .list-view .episode-card {
      display: flex;
      flex-direction: row;
    }

    .list-view .episode-cover {
      width: 280px;
      height: 160px;
      flex-shrink: 0;
      aspect-ratio: 16 / 9;
    }

    .list-view .episode-content {
      flex: 1;
    }

    .grid-view {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in {
      animation: fadeIn 0.6s ease;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background: linear-gradient(135deg, rgba(0, 171, 181, 0.1), rgba(181, 134, 50, 0.1));
      border: 1px solid rgba(0, 171, 181, 0.2);
      color: #00abb5;
    }

    .skeleton {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

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

      100% {
        background-position: -200% 0;
      }
    }

    .tooltip {
      position: relative;
    }

    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      padding: 0.5rem 0.75rem;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      border-radius: 0.5rem;
      font-size: 0.75rem;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .tooltip:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(-4px);
    }
    .icon-grad { background: linear-gradient(135deg, #00abb5, #008a92); }