/* ══════════════════════════════════════════
   DOWNLOADER — DESKTOP FULL WIDTH + RESPONSIVE
   ══════════════════════════════════════════ */

.dl-hero {
  background: linear-gradient(135deg, var(--emerald-900) 0%, var(--emerald-700) 55%, var(--emerald-500) 100%);
  color: var(--white);
  padding: 90px 0 84px;
  margin-top: 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 0;
}
.dl-hero::before {
  content:''; position:absolute; top:-25%; right:-8%;
  width:560px; height:560px; border-radius:50%;
  background:rgba(255,255,255,0.04); pointer-events:none;
}
.dl-hero::after {
  content:''; position:absolute; bottom:-20%; left:-6%;
  width:420px; height:420px; border-radius:50%;
  background:rgba(255,255,255,0.03); pointer-events:none;
}
.dl-hero-inner {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:0 32px;
}

.dl-breadcrumb {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.82rem; color:rgba(255,255,255,0.6); margin-bottom:22px;
}
.dl-breadcrumb a { color:rgba(255,255,255,0.75); transition:color .2s; }
.dl-breadcrumb a:hover { color:#fff; }
.dl-breadcrumb span { color:rgba(255,255,255,0.35); }

.dl-hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,4.5vw,3.6rem);
  font-weight:800; line-height:1.12;
  letter-spacing:-0.5px; margin-bottom:18px;
}
.dl-hero h1 span { color:var(--emerald-300); }

.dl-hero-sub {
  font-size:clamp(1rem,1.8vw,1.15rem);
  opacity:.88; max-width:620px;
  margin:0 auto 36px; line-height:1.75;
}

.dl-platforms {
  display:flex; justify-content:center;
  flex-wrap:wrap; gap:10px; margin-bottom:36px;
}
.dl-platform-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.13);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff; font-size:13.5px; font-weight:500;
  padding:8px 18px 8px 11px;
  border-radius:var(--radius-full);
  backdrop-filter:blur(6px);
  transition:background .2s,transform .15s;
}
.dl-platform-badge:hover { background:rgba(255,255,255,0.22); transform:translateY(-2px); }
.dl-platform-badge img { width:21px; height:21px; object-fit:contain; border-radius:4px; }

.dl-search-wrap {
  max-width:780px; margin:0 auto;
  display:flex; background:var(--white);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 16px 60px rgba(0,0,0,0.28);
}
.dl-search-wrap input {
  flex:1; border:none; outline:none;
  padding:20px 24px; font-size:15.5px;
  font-family:'Inter',sans-serif; color:var(--gray-800); min-width:0;
}
.dl-search-wrap input::placeholder { color:var(--gray-400); }
.dl-btn-fetch {
  background:var(--emerald-600); color:var(--white);
  border:none; padding:0 36px;
  font-size:15.5px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer;
  transition:background var(--transition-base);
  white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:8px;
}
.dl-btn-fetch:hover    { background:var(--emerald-700); }
.dl-btn-fetch:disabled { background:var(--emerald-300); cursor:not-allowed; }

.dl-trust {
  display:flex; justify-content:center;
  flex-wrap:wrap; gap:28px; margin-top:26px;
}
.dl-trust-item {
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; color:rgba(255,255,255,0.75);
}
.dl-trust-item i { color:var(--emerald-300); font-size:13px; }

/* ── MAIN ── */
.dl-main {
  max-width:1200px; margin:0 auto;
  padding:52px 32px 80px;
}

/* Two-column layout on desktop */
.dl-layout {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:28px;
  align-items:start;
}
.dl-col-left  { min-width:0; }
.dl-col-right { min-width:0; }

/* ── SIDEBAR: MORE TOOLS (fills the gap below Quick Guide) ── */
.dl-sidebar-tools { margin-top:18px; }
.dl-sidebar-tools-card {
  background:#fff; border:1px solid var(--gray-100, #eee); border-radius:16px;
  padding:20px; overflow:hidden;
}
.dl-sidebar-tools-card h3 { font-size:1rem; margin-bottom:14px; color:var(--gray-900, #111); }
.dl-sidebar-tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dl-sidebar-tool-card {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--gray-50, #fafafa); border:1px solid var(--gray-100, #eee);
  border-radius:12px; padding:14px 8px;
  text-decoration:none; color:inherit; transition:all .2s ease;
}
.dl-sidebar-tool-card:hover { border-color:var(--emerald-600, #059669); background:#fff; transform:translateY(-2px); }
.dl-sidebar-tool-card img { width:36px; height:36px; object-fit:contain; margin-bottom:8px; }
.dl-sidebar-tool-card span { font-size:0.72rem; font-weight:700; color:var(--gray-800, #222); line-height:1.3; }

.dl-sidebar-house-ad {
  margin-top:18px; display:block; text-decoration:none;
  background:linear-gradient(160deg, var(--emerald-900, #063524) 0%, #0a2e20 100%);
  border:1px solid rgba(245,158,11,0.4); border-radius:16px;
  padding:20px; text-align:center;
}
.dl-sidebar-house-ad img { width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:10px; }
.dl-sidebar-house-ad h4 { color:#fff; font-size:0.92rem; margin-bottom:4px; }
.dl-sidebar-house-ad p  { color:rgba(255,255,255,0.72); font-size:0.76rem; margin-bottom:12px; line-height:1.4; }
.dl-sidebar-house-ad-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:#f59e0b; color:#1a1a1a; font-weight:700; font-size:0.8rem;
  padding:9px 18px; border-radius:var(--radius-full, 999px);
}

.dl-error-box {
  display:none;
  background:#fff5f5; border:1px solid #fecaca;
  border-left:4px solid #ef4444;
  padding:14px 18px; border-radius:var(--radius-md);
  color:#991b1b; font-size:14px;
  margin-bottom:24px; line-height:1.5;
}
.dl-error-box.show { display:block; }

/* VIDEO CARD */
.dl-video-card {
  display:none;
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-100);
  box-shadow:var(--shadow-lg);
  overflow:hidden; margin-bottom:28px;
  animation:dlSlideUp .32s cubic-bezier(.16,1,.3,1);
}
@keyframes dlSlideUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.dl-video-card.show { display:block; }

/* ── SUPPORT MEME BOX ── */
.dl-meme-box {
  display:none;
  background:linear-gradient(160deg, var(--emerald-900) 0%, #0a1f18 100%);
  border:1px solid rgba(245,158,11,0.4);
  border-radius:16px;
  margin-top:18px;
  padding:20px;
  align-items:center;
  gap:18px;
  animation:dlPopIn .35s ease;
}
.dl-meme-box.show { display:flex; }
.dl-meme-img {
  width:110px; height:110px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
  border:2px solid rgba(245,158,11,0.5);
  flex-shrink:0;
}
.dl-meme-content { flex:1; min-width:0; }
.dl-meme-content h4 {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; color:#fff; margin-bottom:6px; line-height:1.3;
}
.dl-meme-content p {
  font-size:0.83rem; color:rgba(255,255,255,0.78);
  line-height:1.5; margin-bottom:12px;
}
.dl-meme-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(90deg,#f59e0b,#d97706);
  color:#1a1a1a; font-weight:700; font-size:0.85rem;
  padding:9px 18px; border-radius:var(--radius-full, 999px);
  text-decoration:none; transition:all .2s ease;
}
.dl-meme-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(245,158,11,0.35); }
@media (max-width:560px) {
  .dl-meme-box { flex-direction:column; text-align:center; padding:18px; }
  .dl-meme-img { width:100px; height:100px; }
}

.dl-video-info { display:flex; gap:20px; padding:24px; align-items:flex-start; }
.dl-video-thumb {
  width:180px; min-width:180px; height:108px;
  border-radius:var(--radius-md); object-fit:cover; background:var(--gray-100);
}
.dl-video-meta { flex:1; min-width:0; }
.dl-video-meta h3 {
  font-size:15.5px; font-weight:600; color:var(--gray-800);
  line-height:1.5; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.dl-pills { display:flex; flex-wrap:wrap; gap:6px; }
.dl-pill {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--emerald-50); color:var(--emerald-700);
  border:1px solid var(--emerald-100);
  font-size:12px; font-weight:500;
  padding:4px 11px; border-radius:var(--radius-full);
}
.dl-pill img { width:13px; height:13px; object-fit:contain; border-radius:3px; }
.dl-pill.yt  { background:#fff5f5; border-color:#fecaca; color:#dc2626; }
.dl-pill.fb  { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.dl-pill.ig  { background:#fdf4ff; border-color:#e9d5ff; color:#7e22ce; }
.dl-pill.tt  { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

.dl-card-divider { height:1px; background:var(--gray-100); }

.dl-format-section { padding:22px 24px 24px; }
.dl-format-label {
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  color:var(--gray-400); margin-bottom:14px;
}

/* Shows ALL qualities in a responsive grid */
.dl-format-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:10px; margin-bottom:18px;
}
.dl-fmt-btn {
  position:relative; padding:13px 12px;
  border-radius:var(--radius-md);
  border:1.5px solid var(--gray-200);
  background:var(--white); cursor:pointer;
  text-align:center; transition:all var(--transition-fast);
  font-family:'Inter',sans-serif;
}
.dl-fmt-btn:hover  { border-color:var(--emerald-400); background:var(--emerald-50); }
.dl-fmt-btn.selected {
  border-color:var(--emerald-500); background:var(--emerald-50);
  box-shadow:0 0 0 3px rgba(16,185,129,.13);
}
.dl-fmt-btn .fmt-name { font-size:14px; font-weight:700; color:var(--gray-800); display:block; }
.dl-fmt-btn .fmt-sub  { font-size:11px; color:var(--gray-400); margin-top:3px; }
.dl-fmt-btn .fmt-size { font-size:11px; color:var(--emerald-700); font-weight:600; margin-top:2px; display:block; }
.dl-fmt-badge {
  position:absolute; top:-9px; right:8px;
  background:var(--emerald-600); color:var(--white);
  font-size:9px; font-weight:700;
  padding:2px 9px; border-radius:var(--radius-full);
  text-transform:uppercase; letter-spacing:.4px;
}
.dl-fmt-badge.hd-badge  { background:var(--accent-blue); }
.dl-fmt-badge.uhd-badge { background:#7c3aed; }

.dl-btn-download {
  width:100%; padding:17px;
  background:var(--emerald-600); color:var(--white);
  border:none; border-radius:var(--radius-md);
  font-size:16px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer;
  transition:background var(--transition-base),transform .1s,box-shadow var(--transition-base);
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 3px 12px rgba(5,150,105,.28);
}
.dl-btn-download:hover  { background:var(--emerald-700); transform:translateY(-1px); box-shadow:0 7px 24px rgba(5,150,105,.32); }
.dl-btn-download:active { transform:scale(.99); }
.dl-btn-download:disabled { background:var(--emerald-200); cursor:not-allowed; box-shadow:none; transform:none; }

/* INLINE PROGRESS (replaces popup) */
.dl-progress { display:none; margin-top:18px; padding:18px 20px;
  background:var(--emerald-50); border:1px solid var(--emerald-100);
  border-radius:var(--radius-md); animation:dlSlideUp .25s ease;
}
.dl-progress.show { display:block; }
.dl-progress-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; }
.dl-progress-stage { font-weight:700; color:var(--emerald-800); font-size:13.5px; display:flex; align-items:center; gap:8px; }
.dl-progress-stage .dl-spin { width:13px; height:13px; border-color:rgba(5,150,105,.3); border-top-color:var(--emerald-700); }
.dl-progress-percent { font-weight:800; color:var(--emerald-700); font-size:18px; font-variant-numeric:tabular-nums; }
.dl-progress-bar-bg {
  height:9px; background:#fff; border:1px solid var(--emerald-100);
  border-radius:10px; overflow:hidden; margin-bottom:12px; position:relative;
}
.dl-progress-bar-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--emerald-400),var(--emerald-600));
  border-radius:10px; transition:width .25s ease;
}
.dl-progress-bar-fill.indeterminate {
  width:35% !important;
  animation:dlIndetBar 1.4s ease-in-out infinite;
}
@keyframes dlIndetBar {
  0%   { transform:translateX(-110%); }
  100% { transform:translateX(320%);  }
}
.dl-progress-stats {
  display:flex; flex-wrap:wrap; gap:18px;
  font-size:12.5px; color:var(--gray-600);
  font-variant-numeric:tabular-nums;
}
.dl-progress-stats > span { display:inline-flex; align-items:center; gap:6px; }
.dl-progress-stats i { color:var(--emerald-600); font-size:12px; }
.dl-progress-stats b { color:var(--gray-800); font-weight:600; }

.dl-progress-success {
  display:none; margin-top:18px; padding:14px 18px;
  background:#d1fae5; border:1px solid #6ee7b7;
  border-radius:var(--radius-md); color:#065f46; font-weight:600;
  align-items:center; gap:10px; font-size:14px;
}
.dl-progress-success.show { display:flex; }
.dl-progress-success i { font-size:18px; color:#059669; }

/* SECTIONS */
.dl-section {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--shadow-md);
  border:1px solid var(--gray-100);
  margin-bottom:24px; position:relative; overflow:hidden;
  transition:all var(--transition-base);
}
.dl-section::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--emerald-400),var(--emerald-600));
  opacity:0; transition:opacity var(--transition-base);
}
.dl-section:hover::before { opacity:1; }
.dl-section-heading { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.dl-section-icon {
  width:44px; height:44px; border-radius:var(--radius-md);
  background:var(--emerald-50); border:1px solid var(--emerald-100);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
  transition:background var(--transition-base);
}
.dl-section:hover .dl-section-icon { background:var(--emerald-100); }
.dl-section-heading h2 {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; font-weight:800;
  color:var(--gray-900); margin:0; letter-spacing:-0.3px;
}

/* Feature grid — 3 cols desktop */
.dl-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.dl-feature-item {
  padding:22px 18px; background:var(--gray-50);
  border-radius:var(--radius-md); border:1px solid var(--gray-100);
  transition:all var(--transition-base);
}
.dl-feature-item:hover {
  background:var(--emerald-50); border-color:var(--emerald-100);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.dl-feature-emoji { font-size:26px; margin-bottom:10px; }
.dl-feature-title { font-size:14px; font-weight:700; color:var(--gray-800); margin-bottom:5px; }
.dl-feature-desc  { font-size:13px; color:var(--gray-500); line-height:1.6; }

/* Steps */
.dl-steps { display:grid; gap:20px; }
.dl-step  { display:flex; align-items:flex-start; gap:16px; }
.dl-step-num {
  width:34px; height:34px; min-width:34px;
  background:var(--emerald-600); color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; flex-shrink:0;
}
.dl-step-num.warn {
  background:#fef3c7; color:#92400e;
  border:1px solid #fde68a; font-size:16px;
}
.dl-step p { font-size:14.5px; color:var(--gray-600); line-height:1.7; padding-top:6px; }
.dl-step strong { color:var(--gray-800); font-weight:600; }

/* Quality table */
.dl-quality-table {
  width:100%; border-collapse:collapse; font-size:13.5px;
}
.dl-quality-table th {
  background:var(--emerald-800); color:var(--white);
  padding:12px 16px; text-align:left;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
}
.dl-quality-table th:first-child { border-radius:var(--radius-sm) 0 0 0; }
.dl-quality-table th:last-child  { border-radius:0 var(--radius-sm) 0 0; }
.dl-quality-table td {
  padding:11px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-700);
}
.dl-quality-table tr:last-child td { border-bottom:none; }
.dl-quality-table tr:hover td { background:var(--emerald-50); }
.dl-q-badge {
  display:inline-block; padding:2px 10px; border-radius:var(--radius-full);
  font-size:11px; font-weight:700;
}
.dl-q-badge.hd    { background:#dbeafe; color:#1e40af; }
.dl-q-badge.fhd   { background:#ede9fe; color:#5b21b6; }
.dl-q-badge.uhd   { background:#fce7f3; color:#9d174d; }
.dl-q-badge.sd    { background:var(--gray-100); color:var(--gray-600); }
.dl-q-badge.audio { background:var(--emerald-50); color:var(--emerald-700); }

/* FAQ */
.dl-faq-item { border-bottom:1px solid var(--gray-100); }
.dl-faq-item:last-child { border-bottom:none; }
.dl-faq-q {
  font-size:14.5px; font-weight:600; color:var(--gray-800);
  cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:8px; user-select:none;
  padding:18px 0; transition:color var(--transition-fast);
}
.dl-faq-q::after {
  content:'+'; font-size:22px; font-weight:300; color:var(--gray-400);
  flex-shrink:0; width:22px; text-align:center; transition:transform .25s,color .2s;
}
.dl-faq-item.open .dl-faq-q { color:var(--emerald-700); }
.dl-faq-item.open .dl-faq-q::after { transform:rotate(45deg); color:var(--emerald-600); }
.dl-faq-a {
  font-size:14px; color:var(--gray-500); line-height:1.78;
  max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s;
}
.dl-faq-item.open .dl-faq-a { max-height:300px; padding-bottom:18px; }

/* ── CROSS-PROMO: MORE TOOLS ── */
.dl-promo-section { margin-top:32px; }
.dl-promo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
  margin-top:14px;
}
.dl-promo-card {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--gray-100, #eee);
  border-radius:14px; padding:18px 14px;
  text-decoration:none; color:inherit;
  transition:all .2s ease;
}
.dl-promo-card:hover {
  border-color:var(--emerald-600, #059669);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.dl-promo-icon {
  width:52px; height:52px; object-fit:contain; margin-bottom:10px;
}
.dl-promo-card h4 {
  font-size:0.88rem; font-weight:700; color:var(--gray-900, #111); margin-bottom:4px;
}
.dl-promo-card p {
  font-size:0.75rem; color:var(--gray-500, #777); line-height:1.4;
}

/* ── AD SLOTS ── */
/* ── HOUSE ADS (self-promo banners, no third-party network) ── */
.dl-house-ad {
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(120deg, var(--emerald-900, #063524) 0%, #0a2e20 100%);
  border:1px solid rgba(245,158,11,0.35);
  border-radius:16px;
  padding:20px 24px;
  margin:24px 0;
  text-decoration:none;
  transition:all .2s ease;
}
.dl-house-ad:hover { border-color:rgba(245,158,11,0.7); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.18); }
.dl-house-ad-icon {
  width:56px; height:56px; object-fit:contain; flex-shrink:0;
  background:rgba(255,255,255,0.08); border-radius:12px; padding:8px;
}
.dl-house-ad-text { flex:1; min-width:0; }
.dl-house-ad-tag {
  display:inline-block; font-size:0.65rem; font-weight:700; letter-spacing:0.05em;
  color:#f59e0b; text-transform:uppercase; margin-bottom:4px;
}
.dl-house-ad-text h4 { font-size:1.02rem; color:#fff; margin-bottom:3px; }
.dl-house-ad-text p  { font-size:0.82rem; color:rgba(255,255,255,0.75); line-height:1.4; }
.dl-house-ad-cta {
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  background:#f59e0b; color:#1a1a1a; font-weight:700; font-size:0.82rem;
  padding:10px 18px; border-radius:var(--radius-full, 999px); white-space:nowrap;
}

/* Compact rectangle-style house ad */
.dl-house-ad.dl-house-ad-square {
  flex-direction:column; text-align:center; max-width:336px;
  margin-left:auto; margin-right:auto; padding:26px 20px;
}
.dl-house-ad.dl-house-ad-square .dl-house-ad-icon { width:64px; height:64px; margin-bottom:6px; }
.dl-house-ad.dl-house-ad-square .dl-house-ad-cta { margin-top:6px; }

@media (max-width:560px) {
  .dl-house-ad { flex-direction:column; text-align:center; padding:20px 18px; }
  .dl-house-ad-cta { width:100%; justify-content:center; }
}

/* ── NEWS / ARTICLE CARDS ── */
.dl-news-section { margin-top:32px; }
.dl-news-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:14px;
}
.dl-news-card {
  display:block; background:#fff;
  border:1px solid var(--gray-100, #eee); border-radius:14px;
  overflow:hidden; text-decoration:none; color:inherit;
  transition:all .2s ease;
}
.dl-news-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.dl-news-card img { width:100%; height:120px; object-fit:cover; display:block; }
.dl-news-card-body { padding:14px 16px; }
.dl-news-card h4 { font-size:0.88rem; font-weight:700; line-height:1.35; margin-bottom:6px; color:var(--gray-900, #111); }
.dl-news-card span { font-size:0.72rem; color:var(--emerald-700, #047857); font-weight:600; }

@media (max-width:600px) {
  .dl-promo-grid { grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; }
  .dl-promo-card { padding:14px 10px; }
  .dl-promo-icon { width:42px; height:42px; }
  .dl-news-grid { grid-template-columns:1fr; }
}

/* SEO copy */
.dl-seo-copy p { font-size:14.5px; color:var(--gray-500); line-height:1.82; margin-bottom:16px; }
.dl-seo-copy p:last-child { margin-bottom:0; }
.dl-seo-copy a { color:var(--emerald-600); font-weight:500; }
.dl-seo-copy a:hover { color:var(--emerald-800); text-decoration:underline; }

/* Sidebar */
.dl-sidebar-card {
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--gray-100); box-shadow:var(--shadow-md);
  overflow:hidden; margin-bottom:24px;
  position:static;
}
.dl-sidebar-head {
  background:linear-gradient(135deg,var(--emerald-800),var(--emerald-600));
  color:var(--white); padding:22px 24px;
}
.dl-sidebar-head h3 {
  font-family:'Playfair Display',serif;
  font-size:1.15rem; font-weight:800; margin-bottom:5px;
}
.dl-sidebar-head p { font-size:13px; opacity:.82; }
.dl-sidebar-body { padding:22px 24px; }
.dl-sidebar-step { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.dl-sidebar-step:last-child { margin-bottom:0; }
.dl-sidebar-num {
  width:28px; height:28px; min-width:28px;
  background:var(--emerald-600); color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.dl-sidebar-step p { font-size:13.5px; color:var(--gray-600); line-height:1.6; padding-top:3px; }
.dl-sidebar-step strong { color:var(--gray-800); font-weight:600; }
.dl-sidebar-supported { padding:0 24px 24px; }
.dl-sidebar-supported h4 {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--gray-400); margin-bottom:12px;
}
.dl-sidebar-platforms { display:flex; flex-wrap:wrap; gap:8px; }
.dl-sidebar-platform {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:var(--radius-full);
  border:1px solid var(--gray-200); background:var(--gray-50);
  font-size:12.5px; font-weight:500; color:var(--gray-700);
}
.dl-sidebar-platform img { width:15px; height:15px; object-fit:contain; border-radius:3px; }

@keyframes dlSpin { to { transform:rotate(360deg); } }
.dl-spin {
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:dlSpin .7s linear infinite;
  display:inline-block; vertical-align:middle;
}

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .dl-layout { grid-template-columns:1fr; }
  .dl-col-right { display:none; }
  .dl-feature-grid { grid-template-columns:repeat(3,1fr); }
  .dl-mobile-only-promo { display:block; }
}
.dl-mobile-only-promo { display:none; }
@media (max-width:768px) {
  .dl-hero    { padding:64px 0 60px; }
  .dl-main    { padding:36px 20px 60px; }
  .dl-section { padding:26px 20px; }
  .dl-feature-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .dl-hero        { padding:52px 0 52px; }
  .dl-hero-inner  { padding:0 20px; }
  .dl-search-wrap input { padding:16px; font-size:14px; }
  .dl-btn-fetch   { padding:0 20px; font-size:14px; }
  .dl-video-info  { flex-direction:column; }
  .dl-video-thumb { width:100%; height:200px; min-width:unset; }
  .dl-format-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .dl-section     { padding:20px 16px; }
  .dl-feature-grid { grid-template-columns:repeat(2,1fr); }
  .dl-platform-badge span { display:none; }
  .dl-platform-badge { padding:8px 10px; }
  .dl-trust { gap:14px; }
}

/* ── FASTEST DOWNLOAD BOX ── */
.dl-fast-box {
  display:none; margin-bottom:18px;
  background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);
  border:2px solid var(--emerald-400);
  border-radius:var(--radius-md);
  padding:16px 20px;
  animation:dlSlideUp .3s cubic-bezier(.16,1,.3,1);
}
.dl-fast-box.show { display:block; }
.dl-fast-box-head {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.dl-fast-box-head .dl-fast-icon {
  width:32px; height:32px; border-radius:50%;
  background:var(--emerald-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.dl-fast-box-head h4 {
  font-size:13.5px; font-weight:700; color:var(--emerald-800);
  margin:0; line-height:1.3;
}
.dl-fast-box-head h4 span {
  display:block; font-size:11.5px; font-weight:500;
  color:var(--emerald-600); margin-top:1px;
}
.dl-fast-badge {
  margin-left:auto; background:var(--emerald-600); color:#fff;
  font-size:10px; font-weight:700; padding:3px 10px;
  border-radius:var(--radius-full); text-transform:uppercase;
  letter-spacing:.4px; white-space:nowrap; flex-shrink:0;
}
.dl-btn-fast {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:13px;
  background:var(--emerald-600); color:#fff;
  border:none; border-radius:var(--radius-md);
  font-size:14.5px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer;
  text-decoration:none;
  transition:background var(--transition-base),transform .1s,box-shadow var(--transition-base);
  box-shadow:0 3px 10px rgba(5,150,105,.3);
}
.dl-btn-fast:hover  { background:var(--emerald-700); transform:translateY(-1px); box-shadow:0 6px 18px rgba(5,150,105,.35); }
.dl-btn-fast:active { transform:scale(.99); }
.dl-fast-note {
  margin-top:9px; font-size:11.5px; color:var(--emerald-700);
  display:flex; align-items:center; gap:5px;
}
.dl-fast-note i { font-size:11px; }

/* ══════════════════════════════════════════
   PLAYLIST UI
   ══════════════════════════════════════════ */

.dl-playlist-banner {
  display:none;
  background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);
  border:2px solid #f59e0b;
  border-radius:var(--radius-md);
  padding:18px 22px;
  margin-bottom:24px;
  animation:dlSlideUp .3s cubic-bezier(.16,1,.3,1);
}
.dl-playlist-banner.show { display:block; }
.dl-playlist-banner-head {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.dl-playlist-banner-icon {
  width:38px; height:38px; min-width:38px;
  background:#f59e0b; color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.dl-playlist-banner-text h4 {
  font-size:14.5px; font-weight:700; color:#92400e; margin:0 0 3px;
}
.dl-playlist-banner-text p {
  font-size:13px; color:#b45309; margin:0; line-height:1.5;
}
.dl-btn-download-playlist {
  width:100%; padding:14px;
  background:#f59e0b; color:#fff;
  border:none; border-radius:var(--radius-md);
  font-size:15px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .2s,transform .1s,box-shadow .2s;
  box-shadow:0 3px 12px rgba(245,158,11,.32);
}
.dl-btn-download-playlist:hover  { background:#d97706; transform:translateY(-1px); }
.dl-btn-download-playlist:active { transform:scale(.99); }

.dl-pl-quality-dropdown {
  display:none;
  background:#fff;
  border:1.5px solid #f59e0b;
  border-radius:var(--radius-md);
  padding:18px 20px;
  margin-top:14px;
  animation:dlSlideUp .22s ease;
}
.dl-pl-quality-dropdown.show { display:block; }
.dl-pl-quality-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--gray-400); margin-bottom:12px;
}
.dl-pl-quality-opts {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;
}
.dl-pl-q-btn {
  padding:12px 8px; border-radius:var(--radius-md);
  border:1.5px solid var(--gray-200); background:var(--white);
  cursor:pointer; text-align:center;
  font-family:'Inter',sans-serif;
  transition:all var(--transition-fast);
}
.dl-pl-q-btn:hover   { border-color:#f59e0b; background:#fffbeb; }
.dl-pl-q-btn.selected {
  border-color:#f59e0b; background:#fffbeb;
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.dl-pl-q-btn .q-icon  { font-size:22px; display:block; margin-bottom:6px; }
.dl-pl-q-btn .q-label { font-size:13px; font-weight:700; color:var(--gray-800); display:block; }
.dl-pl-q-btn .q-desc  { font-size:11px; color:var(--gray-400); margin-top:2px; }
.dl-btn-start-playlist {
  width:100%; padding:14px;
  background:#f59e0b; color:#fff;
  border:none; border-radius:var(--radius-md);
  font-size:15px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .2s,transform .1s;
}
.dl-btn-start-playlist:hover    { background:#d97706; transform:translateY(-1px); }
.dl-btn-start-playlist:disabled { background:#fcd34d; cursor:not-allowed; transform:none; }

.dl-playlist-panel {
  display:none;
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-100);
  box-shadow:var(--shadow-lg);
  overflow:hidden; margin-bottom:28px;
  animation:dlSlideUp .32s cubic-bezier(.16,1,.3,1);
}
.dl-playlist-panel.show { display:block; }
.dl-playlist-panel-head {
  background:linear-gradient(135deg,#92400e,#b45309);
  color:#fff; padding:18px 22px;
  display:flex; align-items:center; gap:12px;
}
.dl-playlist-panel-head h3 {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; font-weight:800; margin:0; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dl-pl-count-badge {
  background:rgba(255,255,255,.22); color:#fff;
  font-size:12px; font-weight:700; padding:4px 12px;
  border-radius:var(--radius-full); white-space:nowrap; flex-shrink:0;
}
.dl-pl-overall {
  padding:14px 22px; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; gap:14px;
}
.dl-pl-overall-bar-bg {
  flex:1; height:8px; background:var(--gray-100);
  border-radius:10px; overflow:hidden;
}
.dl-pl-overall-bar { height:100%; width:0%; background:#f59e0b; border-radius:10px; transition:width .4s ease; }
.dl-pl-overall-text { font-size:12.5px; font-weight:600; color:var(--gray-600); white-space:nowrap; }

.dl-pl-list { padding:0 22px 22px; }
.dl-pl-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--gray-50);
}
.dl-pl-item:last-child { border-bottom:none; }
.dl-pl-item-num {
  width:24px; min-width:24px; height:24px;
  border-radius:50%; background:var(--gray-100);
  color:var(--gray-500); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dl-pl-item-num.done    { background:var(--emerald-100); color:var(--emerald-700); }
.dl-pl-item-num.active  { background:#fef3c7; color:#92400e; }
.dl-pl-item-num.error   { background:#fee2e2; color:#dc2626; }
.dl-pl-thumb {
  width:80px; min-width:80px; height:46px;
  border-radius:6px; object-fit:cover;
  background:var(--gray-100); flex-shrink:0;
}
.dl-pl-item-info { flex:1; min-width:0; }
.dl-pl-item-title {
  font-size:13px; font-weight:600; color:var(--gray-800);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px;
}
.dl-pl-item-meta { font-size:11.5px; color:var(--gray-400); }
.dl-pl-item-status {
  font-size:12px; font-weight:600; white-space:nowrap;
  flex-shrink:0; text-align:right;
}
.dl-pl-item-status.waiting  { color:var(--gray-400); }
.dl-pl-item-status.fetching { color:#f59e0b; }
.dl-pl-item-status.done     { color:var(--emerald-600); }
.dl-pl-item-status.error    { color:#dc2626; }
.dl-pl-item-bar {
  height:3px; background:var(--gray-100); border-radius:4px;
  overflow:hidden; margin-top:5px;
}
.dl-pl-item-bar-fill {
  height:100%; width:0%; border-radius:4px;
  background:linear-gradient(90deg,#f59e0b,#d97706);
  transition:width .25s ease;
}
.dl-pl-load-more {
  display:flex; justify-content:center; padding:14px 0 0;
}
.dl-btn-load-more {
  padding:9px 28px; border-radius:var(--radius-full);
  border:1.5px solid #f59e0b; background:#fff;
  color:#b45309; font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s;
  font-family:'Inter',sans-serif;
}
.dl-btn-load-more:hover    { background:#fffbeb; }
.dl-btn-load-more:disabled { opacity:.5; cursor:not-allowed; }

/* ── SUPPORT US BANNER ── */
.dl-support-wrap {
  display:flex; justify-content:center;
  margin:16px auto 0;
}
.dl-support-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(245,158,11,0.55);
  color:#fff;
  padding:9px 18px;
  border-radius:var(--radius-full, 999px);
  font-size:0.85rem; font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
  backdrop-filter:blur(4px);
}
.dl-support-pill:hover {
  background:rgba(245,158,11,0.18);
  border-color:#f59e0b;
  transform:translateY(-1px);
}
.dl-support-pill i {
  color:#f59e0b;
}
@media (max-width:640px) {
  .dl-support-pill { font-size:0.78rem; padding:8px 14px; }
}

/* ── SUPPORT MODAL (one-time popup) ── */
.dl-support-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.72);
  display:none; align-items:center; justify-content:center;
  padding:20px;
  animation:dlFadeIn .25s ease;
}
.dl-support-modal-overlay.show { display:flex; }
@keyframes dlFadeIn { from{opacity:0;} to{opacity:1;} }
.dl-support-modal {
  background:linear-gradient(160deg, var(--emerald-900) 0%, #0a1f18 100%);
  border:1px solid rgba(245,158,11,0.4);
  border-radius:18px;
  max-width:440px; width:100%;
  padding:32px 28px 28px;
  text-align:center;
  color:#fff;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:dlPopIn .3s ease;
}
@keyframes dlPopIn { from{transform:scale(.92);opacity:0;} to{transform:scale(1);opacity:1;} }
.dl-support-modal-close {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:none; color:#fff;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.dl-support-modal-close:hover { background:rgba(255,255,255,0.18); }
.dl-support-modal-icon {
  width:56px; height:56px; border-radius:50%;
  background:rgba(245,158,11,0.15);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
  font-size:24px; color:#f59e0b;
}
.dl-support-modal-img {
  width:100%; max-width:220px; border-radius:14px;
  margin:0 auto 18px; display:block;
  border:2px solid rgba(245,158,11,0.5);
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.dl-support-modal h3 {
  font-family:'Playfair Display',serif;
  font-size:1.35rem; margin-bottom:10px; line-height:1.3;
}
.dl-support-modal p {
  font-size:0.92rem; color:rgba(255,255,255,0.82);
  line-height:1.6; margin-bottom:22px;
}
.dl-support-modal-actions {
  display:flex; flex-direction:row; gap:12px; justify-content:center;
}
.dl-support-modal-actions .dl-support-modal-btn { flex:1; }
.dl-support-modal-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:var(--radius-full, 999px);
  font-weight:700; font-size:0.95rem;
  text-decoration:none; cursor:pointer; border:none;
  transition:all .2s ease;
}
.dl-support-modal-btn.primary {
  background:#0d2818;
  border:1px solid rgba(34,197,94,0.4);
  color:#22c55e;
}
.dl-support-modal-btn.primary:hover { background:#123420; transform:translateY(-1px); box-shadow:0 6px 18px rgba(34,197,94,0.25); }
.dl-support-modal-btn.secondary {
  background:#2a0f0f;
  border:1px solid rgba(239,68,68,0.4);
  color:#f87171;
  font-weight:700; font-size:0.95rem; padding:13px 20px;
  border-radius:var(--radius-full, 999px);
}
.dl-support-modal-btn.secondary:hover { background:#3a1414; color:#fca5a5; }
.dl-support-modal-encourage {
  font-size:0.8rem; color:#f59e0b; font-weight:600;
  margin-top:16px; opacity:0.9;
}

@media (max-width:420px) {
  .dl-support-modal { padding:26px 20px 22px; border-radius:16px; }
  .dl-support-modal-img { max-width:150px; }
  .dl-support-modal h3 { font-size:1.15rem; }
  .dl-support-modal p { font-size:0.85rem; margin-bottom:18px; }
  .dl-support-modal-actions { flex-direction:column; gap:10px; }
  .dl-support-modal-actions .dl-support-modal-btn { flex:none; width:100%; }
  .dl-support-modal-btn.primary,
  .dl-support-modal-btn.secondary { padding:14px 18px; font-size:0.92rem; }
  .dl-support-modal-encourage { font-size:0.75rem; }
}

/* ── SUPPORT JAR WIDGET ── */
.dl-jar-widget {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 16px; padding: 18px 20px;
  backdrop-filter: blur(6px);
  width: 100%;
}
.dl-jar-widget--hero {
  max-width: 480px; margin: 18px auto 0; text-align: left;
}
.dl-jar-visual { position: relative; width: 78px; min-width: 78px; height: 88px; flex-shrink: 0; }
.dl-jar-svg { width: 100%; height: 100%; display: block; }
#dlJarFill { transition: height 1.4s cubic-bezier(.16,1,.3,1), y 1.4s cubic-bezier(.16,1,.3,1); }
.dl-jar-coins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dl-jar-coin {
  position: absolute; top: -10px; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg,#fde68a,#f59e0b);
  border: 1px solid #d97706;
  animation: dlCoinDrop 1.8s cubic-bezier(.5,0,.75,1) forwards;
}
@keyframes dlCoinDrop {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(70px) rotate(180deg); opacity: 0; }
}
.dl-jar-text { flex: 1; min-width: 0; }
.dl-jar-amount { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 800; color: #fff; word-break: break-word; }
.dl-jar-of { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.55); margin: 0 3px; }
.dl-jar-label { font-size: 0.76rem; color: rgba(255,255,255,0.7); margin: 3px 0 10px; line-height: 1.4; }
.dl-jar-bar-bg { height: 8px; background: rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; margin-bottom: 10px; width: 100%; }
.dl-jar-bar-fill {
  height: 100%; width: 0%; border-radius: 10px;
  background: linear-gradient(90deg,#fde68a,#f59e0b);
  transition: width 1.4s cubic-bezier(.16,1,.3,1);
}
.dl-jar-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f59e0b; color: #1a1a1a; font-weight: 700; font-size: 0.8rem;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease;
  white-space: nowrap;
}
.dl-jar-cta:hover { transform: translateY(-1px); }

@media (max-width: 768px) {
  .dl-jar-widget--hero { max-width: 420px; padding: 16px 18px; gap: 14px; }
  .dl-jar-visual { width: 68px; min-width: 68px; height: 78px; }
  .dl-jar-amount { font-size: 1.02rem; }
}
@media (max-width: 600px) {
  .dl-jar-widget--hero { flex-direction: column; text-align: center; max-width: 300px; padding: 18px 16px; }
  .dl-jar-visual { width: 66px; min-width: 66px; height: 74px; }
  .dl-jar-text { width: 100%; }
  .dl-jar-label { font-size: 0.73rem; }
}
@media (max-width: 420px) {
  .dl-jar-widget--hero { max-width: 100%; padding: 16px 14px; }
  .dl-jar-amount { font-size: 0.95rem; }
  .dl-jar-cta { font-size: 0.76rem; padding: 7px 14px; }
}