.material-symbols-rounded {
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 48
  }

.container-lg {
      max-width: 1120px;
      margin: 0 auto;
    }

    header.brand-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom: 28px;
    }
    .brand-left { display:flex; align-items:center; gap:12px; }
    .brand-badge {
      width:36px; height:36px; border-radius:8px; background:var(--primary); display:inline-flex; align-items:center; justify-content:center;
    }
    .brand-badge svg { width:18px; height:18px; color:#fff; }

    /* Cards */
    .card {
      background: var(--surface);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    /* Episode image */
    .episode-img {
      width:100%;
      max-width: 220px;
      border-radius: 8px;
      object-fit:cover;
    }

    .text-primary-tag {
      color: var(--primary);
      font-weight:600;
      text-transform: none;
      font-size: 13px;
      margin-bottom:6px;
    }

    h2.episode-title {
      font-size: 26px;
      margin: 4px 0 12px;
      font-weight:700;
    }

    /* Progress */
    .progress-track {
      height: 8px;
      background: #e6e8eb;
      border-radius: 8px;
      overflow: hidden;
    }
    .progress-fill {
      height:100%;
      background: var(--primary);
      width: 33%;
    }
    .time-row { font-size:12px; color:var(--muted); display:flex; justify-content:space-between; margin-top:6px; }

    /* Player buttons */
    .player-controls { margin-top:16px; display:flex; align-items:center; justify-content:space-between; }
    .player-group { display:flex; align-items:center; gap:12px; }
    .player-btn {
      background: none;
      border: none;
      color: #374151;
      font-size: 20px;
    }
    .player-main {
      width:64px; height:64px; border-radius:50%; background:#1e40af; color:#fff; border:none; display:inline-flex;
      align-items:center; justify-content:center; font-size:28px; box-shadow: 0 6px 18px rgba(30,64,175,0.18);
    }

    .sidebar .media + .media { margin-top:16px; }

    .btn-primary-block {
      background: var(--primary);
      color: #111827;
      border: none;
      font-weight:700;
      padding:14px 16px;
      border-radius:8px;
    }

    .btn-outline-primary {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
      font-weight:700;
      padding:12px 14px;
      border-radius:8px;
    }

    .muted { color: var(--muted); }

    /* Responsive tweaks */
    @media (max-width: 767px){
      .episode-img { max-width:100%; height:auto; margin-bottom:12px; }
      .player-main { width:56px; height:56px; font-size:24px;}
    }

 .also-card{
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
  }

  .also-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
  }
  .also-header h3{ margin:0; font-size:20px; font-weight:700; }
  .also-header a{ color:var(--primary); font-weight:600; font-size:13px; text-decoration:none; }

  .also-list { list-style:none; margin:0; padding:0; }
  .also-item {
    display:block;
    padding:10px;
    border-radius:8px;
    text-decoration:none;
    color:inherit;
    transition: background-color .18s ease, transform .12s ease;
    margin-bottom:8px;
    align-items:center;
  }
  .also-item:last-child{ margin-bottom:0; }

  .also-item:focus,
  .also-item:hover {
    background-color: rgba(0,0,0,0.03);
    text-decoration:none;
    transform: translateY(-1px);
    outline: none;
  }

  .also-media { display:flex; gap:12px; align-items:center; }
  .also-thumb {
    width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }

  .also-title { margin:0; font-size:15px; font-weight:600; color:#111827; transition: color .15s ease; }
  .also-sub { margin:3px 0 0; font-size:13px; color:var(--muted); }

  /* hover color change for title */
  .also-item:hover .also-title,
  .also-item:focus .also-title {
    color: var(--primary);
  }

  /* keyboard focus visible */
  .also-item:focus { box-shadow: 0 0 0 3px rgba(229,152,102,0.14); }

  /* small screens: reduce spacing */
  @media (max-width:480px){
    .also-thumb{ width:56px; height:56px;}
  }