/* dpdownloader — one stylesheet, no framework, no web fonts.
   The audience is mostly on mobile data in Indonesia, Nigeria, Brazil and
   South Asia. Every request removed is real time saved, so the type is a
   system stack and personality comes from weight and spacing instead. */

:root{
  --ink:#1E1B4B;
  --ink-2:#4A4869;
  --muted:#6B6B84;
  --brand:#4F46E5;
  --brand-2:#7C3AED;
  --page:#F5F5FA;
  --surface:#FFFFFF;
  --line:#E4E4ED;
  --ok:#0F766E;
  --err:#B42318;
  --radius:14px;
  --radius-lg:22px;
  --wrap:1080px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,
         "Noto Sans","Noto Sans Arabic",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink-2);
  font:400 17px/1.65 var(--sans);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--brand-2)}
h1,h2,h3{color:var(--ink);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem);font-weight:800;letter-spacing:-.022em}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);font-weight:750;letter-spacing:-.015em}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.008em}
p{margin:0 0 1.05em;max-width:68ch}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.head-row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-txt{font-size:1.12rem;font-weight:600;letter-spacing:-.02em}
.brand-txt b{font-weight:800}
.head-nav{display:flex;gap:6px;align-items:center}

.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;padding:8px 13px;border-radius:9px;
  font-size:.95rem;font-weight:600;color:var(--ink);user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{background:var(--page)}
.menu[open]>summary{background:var(--page)}
.menu-pop{position:absolute;inset-inline-end:0;top:calc(100% + 8px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:7px;min-width:232px;box-shadow:0 12px 30px rgba(30,27,75,.13);
  display:grid;gap:1px;z-index:50}
.menu-pop a{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:9px;text-decoration:none;color:var(--ink);font-size:.94rem;font-weight:500}
.menu-pop a:hover{background:var(--page)}
.menu-pop a[aria-current]{background:var(--page);font-weight:700}
.menu-lang{min-width:150px}

/* ---------- hero: the tool is the hero ---------- */
.hero{padding:44px 0 8px}
.hero h1{max-width:19ch}
.hero .lede{font-size:1.09rem;color:var(--muted);max-width:60ch;margin-bottom:26px}

.tool-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px;box-shadow:0 1px 2px rgba(30,27,75,.05)}
.field-label{display:block;font-size:.9rem;font-weight:650;color:var(--ink);margin-bottom:8px}
.field-row{display:flex;gap:10px;flex-wrap:wrap}
.field-row input{
  flex:1 1 240px;min-width:0;font:inherit;font-size:1.02rem;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--page);color:var(--ink)}
.field-row input:focus{outline:none;border-color:var(--brand);background:#fff}
.btn{
  font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  padding:14px 26px;border:0;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  transition:filter .15s ease}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.62;cursor:progress}
.btn-ghost{background:none;color:var(--brand);border:1.5px solid var(--line);font-weight:650}
.btn-ghost:hover{border-color:var(--brand);filter:none}

/* platform rail — the signature element: switch tools without leaving */
.rail-label{font-size:.88rem;font-weight:650;color:var(--muted);margin:20px 0 9px}
.rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);text-decoration:none;
  font-size:.92rem;font-weight:600}
.chip img{width:17px;height:17px}
.chip:hover{border-color:var(--brand);color:var(--ink)}
.chip[aria-current]{border-color:var(--brand);background:#EEF0FE;color:var(--brand)}

/* ---------- result ---------- */
.result{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.result[hidden]{display:none}
.result-in{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.avatar-frame{position:relative;flex:0 0 auto}
.avatar-frame img{width:132px;height:132px;border-radius:50%;
  border:3px solid var(--surface);box-shadow:0 4px 16px rgba(30,27,75,.16);
  background:var(--page);object-fit:cover}
.avatar-badge{position:absolute;inset-block-end:-2px;inset-inline-end:-2px;
  background:var(--surface);border-radius:999px;padding:4px 9px;
  font-size:.74rem;font-weight:700;color:var(--brand);
  box-shadow:0 2px 8px rgba(30,27,75,.18)}
.result-meta{flex:1 1 230px;min-width:0}
.result-name{font-size:1.16rem;font-weight:750;color:var(--ink);margin:0 0 2px;
  overflow-wrap:anywhere}
.result-sub{font-size:.9rem;color:var(--muted);margin:0 0 14px}
.result-acts{display:flex;gap:9px;flex-wrap:wrap}
.result-acts .btn{padding:12px 20px;font-size:.95rem}

.msg{margin-top:14px;padding:12px 15px;border-radius:11px;font-size:.95rem;font-weight:550}
.msg[hidden]{display:none}
.msg-err{background:#FEF3F2;color:var(--err)}
.msg-ok{background:#ECFDF5;color:var(--ok)}

/* ---------- content sections ---------- */
.section{padding:46px 0}
.section-tight{padding:34px 0}
.prose{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px}
.prose h2{margin-top:1.4em}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-inline-start:1.2em;max-width:68ch}
.prose li{margin-bottom:.45em}
.prose table{width:100%;border-collapse:collapse;margin:1.1em 0;font-size:.95rem}
.prose th,.prose td{text-align:start;padding:9px 12px;border-bottom:1px solid var(--line)}
.prose th{color:var(--ink);font-weight:700}

/* numbered steps — numbered because this genuinely is a sequence */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.steps li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px}
.steps b{display:flex;align-items:center;justify-content:center;
  width:29px;height:29px;border-radius:50%;background:#EEF0FE;color:var(--brand);
  font-size:.9rem;font-weight:800;margin-bottom:11px}
.steps h3{margin-bottom:.25em}
.steps p{margin:0;font-size:.95rem;color:var(--muted)}

.figure{margin:0 0 26px}
.figure img{border-radius:var(--radius-lg);border:1px solid var(--line);width:100%}
.figure figcaption{font-size:.87rem;color:var(--muted);margin-top:9px}

.faq details{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 19px;font-weight:650;color:var(--ink);
  list-style:none;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--page)}
.faq .faq-body{padding:0 19px 17px}
.faq .faq-body p{margin:0;font-size:.97rem}

.grid-tools{display:grid;gap:12px;padding:0;margin:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.grid-tools a{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;
  text-decoration:none;color:var(--ink);font-weight:650;font-size:.97rem}
.grid-tools a:hover{border-color:var(--brand)}
.grid-tools img{width:23px;height:23px}

.ad-slot{margin:26px 0;min-height:90px;display:flex;align-items:center;justify-content:center}

/* ---------- footer ---------- */
.site-foot{background:var(--surface);border-top:1px solid var(--line);
  margin-top:54px;padding:38px 0 26px}
.foot-grid{display:grid;gap:30px;grid-template-columns:1fr;margin-bottom:26px}
.foot-note{font-size:.87rem;color:var(--muted);margin:12px 0 0;max-width:46ch}
.foot-col h2{font-size:.92rem;font-weight:700;margin-bottom:11px}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.foot-col a{color:var(--ink-2);text-decoration:none;font-size:.93rem}
.foot-col a:hover{color:var(--brand);text-decoration:underline}
.foot-legal{border-top:1px solid var(--line);padding-top:18px;margin:0;
  font-size:.87rem;color:var(--muted)}

@media (min-width:760px){
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr}
  .hero{padding:60px 0 8px}
  .tool-card{padding:28px}
}

/* RTL: logical properties handle almost everything; only the gradient
   direction needs flipping so the light source stays consistent. */
[dir="rtl"] .btn{background:linear-gradient(225deg,var(--brand),var(--brand-2))}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- pin downloader ---------- */
.pin-stage{margin-bottom:16px;border-radius:var(--radius);overflow:hidden;
  background:var(--page);display:flex;justify-content:center}
.pin-media{max-width:100%;max-height:520px;width:auto;display:block;border-radius:var(--radius)}
.pin-title{font-size:1.02rem;font-weight:650;color:var(--ink);margin:0 0 6px;
  overflow-wrap:anywhere}
.pin-title[hidden]{display:none}
.pin-kind{display:inline-block;background:#EEF0FE;color:var(--brand);
  border-radius:999px;padding:3px 11px;font-size:.8rem;font-weight:700;
  margin-bottom:12px;text-transform:capitalize}