/* App download card - icon + identity, features, neutral store buttons, optional QR. */
.ad { display: grid; gap: 13px; }
.ad-top { display: flex; align-items: center; gap: 14px; }
.ad-icon { flex: none; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); box-shadow: 0 2px 8px rgba(16, 22, 43, .14); }
html.e-custom-accent .ad-icon { background: var(--e-accent); }
.ad-icon img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--e-bg); }
.ad-mono { font-size: 1.6em; font-weight: 800; letter-spacing: -.03em; color: var(--e-accent-ink); }
.ad-id { display: grid; gap: 2px; min-width: 0; }
.ad-name { margin: 0; font-size: 1.3em; line-height: 1.2; font-weight: 750; letter-spacing: -.015em; overflow-wrap: anywhere; }
.ad-tag { margin: 0; font-size: .92em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.ad-rating { margin: 2px 0 0; font-size: .82em; font-weight: 650; color: var(--e-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ad-rating sup { color: var(--e-ink-3); }
.ad-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ad-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .92em; line-height: 1.4; overflow-wrap: anywhere; min-width: 0; }
.ad-ok { margin-top: 2px; color: var(--e-ok); stroke-width: 2.6; }

.ad-stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ad-store {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; text-decoration: none;
    color: var(--e-bg); background: var(--e-ink); border: 1px solid var(--e-ink); border-radius: 12px;
    transition: transform .15s var(--e-ease), box-shadow .15s var(--e-ease);
}
.ad-store:hover { box-shadow: 0 4px 14px rgba(16, 22, 43, .22); }
.ad-store:active { transform: translateY(1px); }
.ad-dev { width: 22px; height: 22px; stroke-width: 1.7; }
.ad-st { display: grid; line-height: 1.15; min-width: 0; }
.ad-st small { font-size: .7em; opacity: .82; font-weight: 600; }
.ad-st strong { font-size: 1.02em; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }

.ad-qr { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px dashed var(--e-line-strong); border-radius: var(--e-radius-sm); }
.ad-qr-code { flex: none; width: 104px; height: 104px; border-radius: 8px; overflow: hidden; background: #fff; }
.ad-qr-code svg, .ad-qr-code canvas { display: block; width: 100%; height: 100%; }
.ad-qr p { margin: 0; display: grid; gap: 2px; font-size: .86em; min-width: 0; }
.ad-qr p span { color: var(--e-ink-3); font-size: .92em; }
.ad-foot { margin: -4px 0 0; font-size: .72em; color: var(--e-ink-3); }
.ad-issues { padding-left: 28px; }

@media (max-width: 360px) {
    .ad-top { gap: 11px; }
    .ad-icon { width: 60px; height: 60px; border-radius: 15px; }
    .ad-name { font-size: 1.15em; }
    .ad-qr { flex-direction: column; align-items: flex-start; }
}
html[data-compact="1"] .ad { gap: 10px; }
html[data-compact="1"] .ad-store { min-height: 46px; }