/* =========================================================================
   Download page redesign (scoped to .dl-page) — modern 9mod-style
   Relies on home-redesign.css for .app-grid / .app-card / .home-section.
   ========================================================================= */
.dl-page{
  --accent:#16a34a; --accent-dark:#13854a; --accent-soft:#e7f7ee;
  --ink:#1f2937; --muted:#6b7280; --line:#eceff2; --card:#fff;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);
  color:var(--ink); max-width:900px;
}
.dl-page *{ box-sizing:border-box; }
.dl-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px; margin-bottom:18px; }
@media (min-width:768px){ .dl-card{ padding:26px 28px; } }

/* ---- app bar ---- */
.dl-appbar{ display:flex; align-items:center; gap:16px; }
.dl-appbar img{ width:72px; height:72px; border-radius:18px; object-fit:cover; box-shadow:0 6px 16px rgba(16,24,40,.14); flex:0 0 auto; }
.dl-appbar h1{ font-size:1.2rem; font-weight:800; margin:0 0 4px; line-height:1.25; }
@media (min-width:768px){ .dl-appbar h1{ font-size:1.45rem; } }
.dl-appbar time{ color:var(--muted); font-size:.82rem; }

/* ---- section title within download ---- */
.dl-title{ font-size:1.05rem; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:9px; }
.dl-title svg{ width:20px; height:20px; fill:var(--accent); }

/* ---- file rows ---- */
.dl-files{ display:flex; flex-direction:column; gap:10px; }
.dl-file{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
  background:#fbfcfd; border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:.15s;
}
.dl-file:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.dl-file__ic{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dl-file__ic svg{ width:18px; height:18px; fill:var(--accent-dark); }
.dl-file__main{ min-width:0; flex:1; }
.dl-file__name{ font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.2px; display:block; line-height:1.2; }
.dl-file__sub{ font-size:.78rem; color:var(--muted); display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-file__size{ font-size:.8rem; font-weight:600; color:var(--muted); flex:0 0 auto; }

.dl-original .dl-title{ color:var(--accent-dark); }
.dl-original .dl-file__ic{ background:#e8f5e9; }

/* ---- intro / notes ---- */
.dl-intro{ color:#475569; font-size:.92rem; line-height:1.6; background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:16px; }
.dl-note{ font-size:.82rem; color:var(--muted); margin-top:6px; }

/* ===== FINAL DOWNLOAD CARD (wait -> button) ===== */
.dl-final{ text-align:center; }
.dl-final__app{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; }
.dl-final__app img{ width:96px; height:96px; border-radius:22px; object-fit:cover; box-shadow:0 8px 20px rgba(16,24,40,.16); }
.dl-final__app h1{ font-size:1.15rem; font-weight:800; margin:0; }
.dl-chip{ display:inline-block; background:#f1e9ff; color:#7c3aed; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }

/* wait / countdown */
.dl-wait{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 0 6px; }
.dl-ring{ position:relative; width:104px; height:104px; }
.dl-ring svg{ width:104px; height:104px; transform:rotate(-90deg); }
.dl-ring circle{ fill:none; stroke-width:8; }
.dl-ring .bg{ stroke:#e8edf3; }
.dl-ring .fg{ stroke:var(--accent); stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:0; animation:dlspin 4s linear forwards; }
@keyframes dlspin{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:283; } }
.dl-ring__num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:var(--accent-dark); }
.dl-wait p{ color:var(--muted); font-size:.9rem; margin:0; }

/* ready button */
.dl-go{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#22c277,#13a55f); color:#fff !important; text-decoration:none;
  font-size:1.05rem; font-weight:700; padding:15px 36px; border-radius:999px;
  box-shadow:0 10px 26px rgba(19,165,95,.4); transition:transform .12s, filter .12s;
}
.dl-go:hover{ transform:translateY(-2px); filter:brightness(1.04); color:#fff; }
.dl-go svg{ width:20px; height:20px; fill:#fff; }
.dl-go small{ font-weight:500; opacity:.9; }
.dl-ready > p{ color:var(--muted); font-size:.85rem; margin:14px 0 0; }
.dl-ready > p a{ color:var(--accent-dark); font-weight:600; }

/* stats strip */
.dl-stats{ display:flex; justify-content:center; gap:0; margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.dl-stats div{ flex:1; text-align:center; padding:0 8px; }
.dl-stats div + div{ border-left:1px solid var(--line); }
.dl-stats .lbl{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.dl-stats .val{ font-size:.95rem; font-weight:700; color:var(--ink); margin-top:2px; }

/* ===== ORIGINAL page: centered app header ===== */
.dl-orighead{ text-align:center; }
.dl-orighead img{ width:92px; height:92px; border-radius:22px; object-fit:cover; box-shadow:0 8px 20px rgba(16,24,40,.16); margin:0 auto 14px; display:block; background:#fff; }
.dl-orighead h1{ font-size:1.25rem; font-weight:800; line-height:1.3; margin:0 0 12px; color:var(--ink); }
@media (min-width:768px){ .dl-orighead h1{ font-size:1.55rem; } }
.dl-orighead .meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.dl-orighead .chip{ display:inline-flex; align-items:center; gap:5px; background:var(--accent-soft); color:var(--accent-dark); font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:999px; }
.dl-orighead .chip svg{ width:13px; height:13px; fill:currentColor; }
.dl-orighead .chip.mod{ background:#f1e9ff; color:#7c3aed; }
.dl-orighead .chip.muted{ background:#f1f5f9; color:#475569; }

/* ===== ORIGINAL page: app-info card grid ===== */
.dl-meta-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .dl-meta-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.dl-meta-card{ background:#fbfcfd; border:1px solid var(--line); border-radius:12px; padding:13px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.dl-meta-card .lbl{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.dl-meta-card .lbl svg{ width:14px; height:14px; fill:var(--accent); flex:0 0 auto; }
.dl-meta-card .val{ font-size:.9rem; font-weight:700; color:var(--ink); word-break:break-word; line-height:1.3; }
.dl-meta-card .val a{ color:var(--accent-dark); text-decoration:none; }

/* ===== the area vijay.js fills (loading -> button/links) ===== */
#downloader_area{ width:100%; }

/* ===== Telegram CTA + download notes ===== */
.dl-notes{ text-align:center; }
.dl-telegram{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:420px; margin:0 auto;
  background:linear-gradient(135deg,#2AABEE,#229ED9); color:#fff !important;
  font-weight:700; font-size:1.02rem; letter-spacing:.2px; padding:14px 24px;
  border-radius:14px; text-decoration:none; box-shadow:0 8px 20px rgba(34,158,217,.35);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
.dl-telegram:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 10px 26px rgba(34,158,217,.45); color:#fff; }
.dl-telegram svg{ width:22px; height:22px; fill:#fff; flex:0 0 auto; }

.dl-notes__body{ text-align:left; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); color:#475569; font-size:.95rem; line-height:1.7; }
.dl-notes__body > :first-child{ margin-top:0; }
.dl-notes__body p{ margin:0 0 10px; }
.dl-notes__body em{ font-style:italic; color:#475569; }
.dl-notes__body h3{ font-size:1.1rem; font-weight:800; color:var(--ink); margin:20px 0 12px; display:flex; align-items:center; gap:9px; }
.dl-notes__body h3::before{ content:""; width:4px; height:18px; border-radius:4px; background:var(--accent); display:inline-block; flex:0 0 auto; }
.dl-notes__body ol, .dl-notes__body ul{ margin:0 0 12px; padding-left:1.35rem; }
.dl-notes__body ol{ list-style:decimal; }
.dl-notes__body ul{ list-style:disc; }
.dl-notes__body li{ margin:0 0 7px; }
.dl-notes__body li::marker{ color:var(--accent); font-weight:700; }
.dl-notes__body a{ color:var(--accent-dark); font-weight:600; }

/* ===== install steps ===== */
.dl-steps{ counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.dl-step{ display:flex; gap:14px; align-items:flex-start; }
.dl-step__n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.dl-step p{ margin:0; color:#475569; font-size:.9rem; line-height:1.55; }
.dl-step b{ color:var(--ink); }

/* tags + shares reuse app page look */
.dl-page .app-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0; }
.dl-page .app-tags a{ background:#f1f5f9; color:#475569; font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:999px; text-decoration:none; }
.dl-page .list-shares{ list-style:none; display:flex; gap:10px; padding:0; margin:8px 0 0; }
.dl-page .list-shares a{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.dl-page .list-shares svg{ width:17px; height:17px; }
.dl-page .list-shares .facebook{ background:#1877f2; } .dl-page .list-shares .twitter{ background:#111827; }
.dl-page .list-shares .pinterest{ background:#e60023; } .dl-page .list-shares .linkedin{ background:#0a66c2; } .dl-page .list-shares .email{ background:#6b7280; }