/* /ilova/ — ilovani yuklab olish sahifasi. «Personajlar katalogi» dunyosi ichida: qurilmaga moslashgan bitta
   katta lenta tugma va jonli telefon ichida kabinet namunasi. world.css'dan keyin yuklanadi. */

.dl { display: grid; gap: 64px; padding-bottom: 72px; }
.dl section > h2 { margin: 0 0 18px; font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* ---------- Birinchi ekran ---------- */
.dl-hero { display: grid; gap: 32px; align-items: center; padding: 36px 0 0; }
@media (min-width: 900px) { .dl-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; } }
.dl-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1; margin: 0 0 16px; text-wrap: balance; }
.dl-hero h1 em { font-style: normal; color: var(--ribbon); white-space: nowrap; }
.dl-hero .lead { font-size: 1.15rem; color: var(--text-muted); max-width: 44ch; margin: 0 0 22px; }

.dl-device, .dl-here { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px 6px 10px;
  border-radius: 999px; font: 600 .92rem var(--font-display); background: var(--surface-2); color: var(--text); }
.dl-device b { font-weight: 700; }
.dl-here { background: var(--p-mint); color: var(--tint-green-title); }
.dl-device[hidden], .dl-here[hidden] { display: none; }

.dl-act[hidden] { display: none; }
.dl-cta { min-height: 62px; padding: 14px 32px; font-size: 1.2rem; gap: 10px; }
.dl-cta .ic { width: 1.35em; height: 1.35em; }
.dl-cta.is-disabled { cursor: default; box-shadow: none; }
.dl-meta { margin: 12px 0 0; color: var(--text-muted); font-size: .95rem; max-width: 46ch; }

.dl-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 28px; }
.dl-switch-label { font: 600 .9rem var(--font-display); color: var(--text-muted); }
.dl-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 3px solid var(--keyline); box-shadow: var(--shadow-sm); }
.dl-seg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font: 600 .95rem var(--font-display); color: var(--text-muted); text-decoration: none; transition: background .2s, color .2s; }
.dl-seg a:hover { background: var(--surface-2); color: var(--text); }
.dl-seg a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }

/* Sahna: yalpiz panel, qiya telefon, Pito bulutchasi */
.dl-stage { --tone: var(--p-mint); --tone-ink: var(--r-mint); }
.dl[data-shown="ios"] .dl-stage { --tone: var(--p-sky); --tone-ink: var(--r-sky); }
.dl[data-shown="desktop"] .dl-stage { --tone: var(--p-lilac); --tone-ink: var(--r-lilac); }
.dl[data-shown="desktop"] .dl-closer { display: none; }
.dl-file[hidden], .dl-device-ic[hidden], .dl-pal [hidden], .dl-bubble [hidden], .ph-view[hidden] { display: none; }
.dl-device-ic { display: inline-flex; }
.dl-stage { position: relative; margin: 0; display: grid; transition: background-color .3s; place-items: center; min-height: 520px; padding: 36px 24px 96px;
  background: var(--tone); border: 3px solid var(--keyline); border-radius: var(--radius-panel); box-shadow: var(--shadow-sm); }
.phone { width: 264px; aspect-ratio: 9 / 18.5; padding: 10px; border-radius: 42px; background: #1C1F3D;
  box-shadow: 0 2px 0 rgba(42,47,90,.25), 0 24px 48px rgba(42,47,90,.24); transform: rotate(-4deg); }
.phone-screen { height: 100%; display: flex; flex-direction: column; gap: 9px; overflow: hidden; padding: 10px 12px 0;
  border-radius: 33px; background: var(--cream); color: var(--ink); font-size: 11px; line-height: 1.3; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; font: 600 10px var(--font-display); }
.ph-dots { display: inline-flex; gap: 3px; } .ph-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ph-top { display: flex; justify-content: space-between; align-items: center; }
.ph-brand { font: 700 13px var(--font-display); color: var(--ribbon); }
.ph-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--p-peach); color: var(--r-peach); font: 700 11px var(--font-display); }
.ph-hello { margin: 2px 0 0; font: 700 19px/1.05 var(--font-display); }
.ph-stats { display: flex; gap: 6px; }
.ph-stat { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--paper); font: 600 10px var(--font-display); color: var(--ink-soft); }
.ph-stat b { color: var(--ink); font-size: 11px; }
.ph-stat .ic { width: 12px; height: 12px; color: var(--ribbon); }
.ph-card { display: grid; justify-items: center; gap: 5px; padding: 10px 10px 12px; border-radius: 18px; background: var(--tone); border: 2px solid var(--keyline); }
.ph-art { width: 74px; }
.ph-plate { padding: 1px 10px; border-radius: 999px; background: var(--paper); color: var(--tone-ink); font: 700 10px var(--font-display); }
.ph-course { font: 600 13px var(--font-display); }
.ph-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.ph-bar i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--tone-ink); }
.ph-btn { margin-top: 3px; padding: 6px 16px; border-radius: 999px; background: var(--ribbon); color: var(--on-accent); font: 700 11px var(--font-display); box-shadow: 0 2px 0 var(--ribbon-deep); }
.ph-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 14px; background: var(--tone); }
.ph-row b { display: block; font: 600 12px var(--font-display); } .ph-row small { color: var(--ink-soft); font-size: 10px; }
.ph-mini { width: 30px; flex: none; }
.ph-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 9px 4px 14px; border-top: 2px solid var(--keyline); background: var(--paper); margin-inline: -12px; }
.ph-tabs .ic { width: 17px; height: 17px; color: var(--ink-soft); } .ph-tabs .ic:first-child { color: var(--ribbon); }

.dl-bubble { position: absolute; left: 18px; right: 18px; bottom: 18px; max-width: 300px; margin-inline: auto; }
@media (min-width: 900px) {
  .dl-bubble { right: auto; left: -28px; bottom: 34px; max-width: 250px; margin: 0; }
  .phone { margin-left: 96px; }
}

/* Ekran holatlari */
.ph-view { flex: 1; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.ph-install { align-items: center; justify-content: center; text-align: center; gap: 8px; padding-bottom: 30px; }
.ph-install img { border-radius: 20px; box-shadow: 0 6px 16px rgba(42,47,90,.15); }
.ph-install b { font: 700 16px var(--font-display); }
.ph-install small { color: var(--ink-soft); font-size: 11px; }
.ph-install .ph-bar { width: 70%; background: var(--surface-2); }
.ph-install .ph-bar i { width: 100%; background: var(--r-mint); }
.ph-share { justify-content: space-between; margin-inline: -12px; padding-bottom: 72px; }
.ph-page { margin: 4px 12px 0; padding: 12px; border-radius: 16px; background: var(--paper); display: grid; gap: 6px; }
.ph-page i { height: 8px; border-radius: 999px; background: var(--surface-2); } .ph-page i:last-child { width: 60%; }
.ph-sheet { display: grid; gap: 2px; padding: 10px 10px 18px; border-radius: 20px 20px 0 0; background: var(--paper); box-shadow: 0 -8px 20px rgba(42,47,90,.1); }
.ph-sheet span { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 10px; font: 500 11px var(--font-display); color: var(--ink-soft); }
.ph-sheet .ph-sheet-app { justify-content: flex-start; gap: 8px; padding-bottom: 10px; color: var(--ink); }
.ph-sheet-app img { border-radius: 9px; } .ph-sheet-app b { font: 700 12px var(--font-display); }
.ph-sheet .is-hot { background: var(--p-sky); color: var(--ink); font-weight: 700; }
.ph-sheet .ic { width: 14px; height: 14px; color: var(--r-sky); }

/* Qurilmaning personaji — telefon yonida katta, o'z rangida */
.dl-pal { position: absolute; top: -22px; right: -18px; width: 132px; }
.dl-pal > span { display: block; }

/* Qorong'ida telefon ramkasi ekrandan ajralib tursin */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { background: #3B4080; } }
:root[data-theme="dark"] .phone { background: #3B4080; }

/* Bitta mualliflik lahzasi: platforma almashganda telefon chayqaladi */
@keyframes dl-nudge { 0% { transform: rotate(-4deg); } 35% { transform: rotate(3deg) translateY(-6px); } 70% { transform: rotate(-6deg); } 100% { transform: rotate(-4deg); } }
.phone.is-nudge { animation: dl-nudge .6s var(--ease-pop); }

/* ---------- Qadamlar ---------- */
#qadamlar { scroll-margin-top: 90px; }
.dl-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: dl-step; }
.dl-ol[hidden] { display: none; }
@media (min-width: 820px) { .dl-ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dl-ol li { counter-increment: dl-step; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px;
  background: var(--paper); border: 3px solid var(--keyline); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.dl-ol li::before { content: counter(dl-step); position: absolute; top: -12px; left: 18px; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 1rem var(--font-display); border: 3px solid var(--keyline); }
.dl-ol h3 { margin: 6px 0 0; font-size: 1.15rem; }
.dl-ol p { margin: 0; color: var(--text-muted); }
.dl-ol .btn { align-self: flex-start; margin-top: 6px; }

.shot { display: grid; place-items: center; min-height: 132px; padding: 16px; border-radius: 16px; background: var(--tone); }
.shot > div { width: min(100%, 250px); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--paper);
  box-shadow: 0 6px 16px rgba(42,47,90,.08); font: 600 .9rem var(--font-display); }
.shot .ic { color: var(--tone-ink); }
.shot b { display: block; } .shot small { color: var(--text-muted); font: 400 .8rem var(--font-body); }
.shot-toggle { justify-content: space-between; }
.tg-on { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--tone-ink); }
.tg-on::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); }
.shot-app { flex-direction: column; text-align: center; gap: 6px !important; }
.shot-app img { border-radius: 14px; }
.shot-app em { font-style: normal; padding: 3px 14px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .8rem; }
.shot-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .82rem var(--font-body); }
.shot-bar { justify-content: space-around; }
.shot-bar i { width: 18px; height: 4px; border-radius: 999px; background: var(--border-strong); }
.shot-bar .is-hot, .shot-sync span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tone); }
.shot-bar .is-hot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--tone-ink); }
.shot-menu { flex-direction: column; align-items: stretch !important; gap: 2px !important; padding: 6px !important; }
.shot-menu span { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 10px; color: var(--text-muted); font-weight: 500; }
.shot-menu .is-hot { background: var(--tone); color: var(--text); font-weight: 700; }
.shot-copy code { font: .78rem var(--font-mono, "DM Mono", Consolas, monospace); word-break: break-all; color: var(--text); }
.shot-sync { justify-content: center; }
.shot-sync i { flex: 1; max-width: 70px; border-top: 3px dashed var(--tone-ink); }

/* ---------- Fayl haqida ---------- */
.dl-file { display: grid; gap: 24px; align-items: center; padding: 28px; background: var(--paper); border: 3px solid var(--keyline); border-radius: var(--radius-panel); box-shadow: var(--shadow-sm); }
@media (min-width: 720px) { .dl-file { grid-template-columns: 150px minmax(0, 1fr); padding: 30px 34px; } }
.dl-file-art { width: 150px; padding: 14px; border-radius: var(--radius-card); background: var(--tone); justify-self: center; }
.dl-file h2 { margin-bottom: 14px !important; }
.dl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 18px; }
.dl-facts div { padding: 10px 14px; border-radius: 18px; background: var(--surface-2); }
.dl-facts dt { font: 600 .8rem var(--font-display); color: var(--text-muted); }
.dl-facts dd { margin: 0; font: 700 1.3rem var(--font-display); font-variant-numeric: tabular-nums; }
.dl-sha-label { margin: 0 0 8px; color: var(--text-muted); font-size: .95rem; max-width: 70ch; }
.dl-sha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dl-sha code { flex: 1 1 280px; min-width: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font: .85rem var(--font-mono, "DM Mono", Consolas, monospace); word-break: break-all; }

/* ---------- Savollar ---------- */
.dl-qs { display: grid; gap: 10px; max-width: 820px; }
.dl-qs details { background: var(--paper); border: 3px solid var(--keyline); border-radius: 18px; box-shadow: var(--shadow-sm); }
.dl-qs summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 20px;
  font: 600 1.05rem var(--font-display); cursor: pointer; list-style: none; border-radius: 15px; }
.dl-qs summary::-webkit-details-marker { display: none; }
.dl-qs summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--ink-soft); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease-pop); }
.dl-qs details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dl-qs details p { margin: 0; padding: 0 20px 18px; color: var(--text-muted); max-width: 68ch; }

/* ---------- Telefon ---------- */
@media (max-width: 720px) {
  .dl { gap: 48px; }
  .dl-hero { padding-top: 20px; gap: 24px; }
  .dl-cta { width: 100%; }
  .dl-switch { flex-direction: column; align-items: flex-start; }
  .dl-seg { width: 100%; } .dl-seg a { flex: 1; justify-content: center; padding: 0 8px; }
  .dl-stage { min-height: 0; padding: 26px 16px 18px; gap: 18px; }
  .phone { width: 210px; }
  .dl-pal { top: -16px; right: -6px; width: 92px; }
  .dl-bubble { position: static; }
  .dl-file { padding: 22px 18px; }
  .dl-file-art { width: 104px; padding: 10px; justify-self: start; }
}

/* ---------- Harakatsiz va «Sodda» ---------- */
@media (prefers-reduced-motion: reduce) { .phone.is-nudge { animation: none; } }
html[data-motion="reduce"] .phone.is-nudge { animation: none; }
html[data-ui="sodda"] .dl-stage, html[data-ui="sodda"] .dl-file-art, html[data-ui="sodda"] .dl .closer .row { display: none; }
html[data-ui="sodda"] .dl-hero { grid-template-columns: 1fr; }
html[data-ui="sodda"] .shot { min-height: 0; padding: 10px; }