/* Install card. Uses the host page's tokens (app or landing) with safe fallbacks. */
[data-install-card] { display: block; margin: 0 auto; max-width: 760px; text-align: start; }
[data-install-card][hidden] { display: none !important; }
.inst {
    --i-primary: var(--fun-primary, var(--primary, #5B4CF0));
    --i-primary-deep: var(--fun-primary-deep, var(--primary-deep, #3F32C4));
    --i-bg: var(--bg-card, var(--surface, #fff));
    --i-text: var(--text-primary, var(--text, #1E1A4D));
    --i-text2: var(--text-secondary, var(--text-2, #4D4880));
    --i-muted: var(--text-muted, var(--muted, #5F5A93));
    --i-border: var(--border-subtle, var(--border, #E3DEFA));
    position: relative; overflow: hidden; padding: 22px 20px 18px; border-radius: 26px; color: var(--i-text);
    background: linear-gradient(160deg, color-mix(in srgb, var(--i-primary) 9%, var(--i-bg)), var(--i-bg) 55%);
    border: 2px solid color-mix(in srgb, var(--i-primary) 30%, transparent);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--i-primary) 22%, transparent);
    text-align: start; line-height: 1.7;
}
.inst::before { content: ""; position: absolute; inset: -70px auto auto -60px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 197, 49, .22); pointer-events: none; }
.inst > * { position: relative; }
.inst-head { display: flex; gap: 14px; align-items: flex-start; }
.inst-logo { flex: none; width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 4px 0 var(--i-primary-deep); }
.inst-txt { min-width: 0; }
.inst-badge { display: inline-block; margin-bottom: 4px; padding: 2px 12px; border-radius: 999px; background: rgba(255, 197, 49, .22); color: #8A5300; font-size: 12px; font-weight: 800; }
html[data-theme="dark"] .inst-badge { color: #FFC531; }
.inst-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.5; color: var(--i-text); }
.inst-intro { margin: 4px 0 0; font-size: 13.5px; color: var(--i-text2); }

.inst-benefits { list-style: none; margin: 16px 0 4px; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .inst-benefits { grid-template-columns: 1fr 1fr; } }
.inst-benefits li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--i-primary) 6%, var(--i-bg)); border: 1px solid var(--i-border); }
.inst-bi { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: color-mix(in srgb, var(--i-primary) 14%, transparent); }
.inst-benefits b { display: block; font-size: 14px; color: var(--i-text); }
.inst-benefits li div span { display: block; font-size: 12.5px; color: var(--i-text2); line-height: 1.6; }

.inst-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inst-go { padding: 13px 28px; border: 0; border-radius: 16px; background: var(--i-primary); color: #fff; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 5px 0 var(--i-primary-deep); }
.inst-go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--i-primary-deep); }
.inst-later { padding: 10px 14px; border: 0; background: none; color: var(--i-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.inst-how { flex-basis: 100%; margin: 0; font-size: 13.5px; font-weight: 800; color: var(--i-text); }
.inst-steps { flex-basis: 100%; margin: 0; padding-inline-start: 22px; font-size: 13px; color: var(--i-text2); }
.inst-steps li { margin: 2px 0; }
.inst-note { display: block; margin-top: 10px; font-size: 11.5px; color: var(--i-muted); }