/* growth F5: /app Android landing (tmpl/blocks/app_page.php), desktop .vapp_d + m. .vapp_m, light + html.vc-dark. */
.vapp { color: #000; line-height: 1.45; }
.vapp_d { padding: 16px 20px 20px; }
.vapp_m { padding: 12px; font-size: 14px; }
.vapp_head { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #e4e8ed; }
.vapp_m .vapp_head { gap: 12px; }
.vapp_icon { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.vapp_m .vapp_icon { width: 72px; height: 72px; border-radius: 16px; }
.vapp_head_info { flex: 1 1 auto; min-width: 0; }
.vapp_name { margin: 2px 0 4px; padding: 0; font-size: 20px; font-weight: bold; color: #2b587a; }
.vapp_short { color: #333; margin-bottom: 4px; }
.vapp_meta { color: #777; font-size: 11px; margin-bottom: 12px; }
.vapp_m .vapp_meta { font-size: 12px; }
.vapp_dl_wrap { margin: 4px 0 8px; }
.vapp_d .vapp_dl { display: inline-block; }
.vapp_d .vapp_dl button { padding: 8px 22px; font-size: 13px; }
.vapp_m .vapp_dl { display: block; box-sizing: border-box; width: 100%; text-align: center; font-size: 15px; padding: 11px 10px; }
.vapp_m .vapp_head { flex-wrap: wrap; }
.vapp_m .vapp_head_info { flex-basis: calc(100% - 84px); }
.vapp_m .vapp_dl_wrap { margin-left: -84px; }
.vapp_m .vapp_stores, .vapp_m .vapp_ios { margin-left: -84px; }
.vapp_direct { color: #777; font-size: 11px; margin-top: 6px; }
.vapp_na { color: #c03a2b; margin: 6px 0; }
.vapp_stores { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.vapp_store { display: inline-block; border: 1px solid #c5d0db; border-radius: 3px; padding: 4px 10px; font-weight: bold; }
.vapp_ios { color: #777; font-size: 11px; margin-top: 8px; }
.vapp_m .vapp_ios { font-size: 12px; }
.vapp_qr { flex: 0 0 150px; text-align: center; background: #f7f8fa; border: 1px solid #e4e8ed; border-radius: 4px; padding: 9px 6px 8px; }
.vapp_qr img { display: block; margin: 0 auto 6px; background: #fff; border-radius: 2px; }
.vapp_qr_t { color: #555; font-size: 11px; }
.vapp_sec { padding: 14px 0 2px; border-bottom: 1px solid #e4e8ed; }
.vapp_sec:last-child { border-bottom: 0; }
.vapp_h { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: bold; color: #45688e; }
.vapp_m .vapp_h { font-size: 15px; }
.vapp_text { color: #333; margin-bottom: 8px; }
.vapp_muted { color: #888; }
.vapp_shots { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.vapp_shot { flex: 0 0 auto; display: block; width: 135px; height: 300px; border-radius: 6px; overflow: hidden; border: 1px solid #dfe3e8; background: #eef1f4; scroll-snap-align: start; }
.vapp_d .vapp_shots { flex-wrap: wrap; overflow: visible; }
.vapp_m .vapp_shot { width: 117px; height: 260px; }
.vapp_shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vapp_shot:hover { border-color: #a7b8cb; }
.vapp_shot_ph { display: flex; align-items: center; justify-content: center; text-align: center; color: #8a96a3; font-size: 11px; border-style: dashed; padding: 8px; box-sizing: border-box; }
.vapp_feats, .vapp_steps, .vapp_cl_list { margin: 0 0 10px; padding: 0 0 0 20px; color: #333; }
.vapp_feats li, .vapp_steps li, .vapp_cl_list li { margin: 3px 0; }
.vapp_steps li { margin: 6px 0; }
.vapp_note { color: #555; background: #f7f8fa; border-left: 3px solid #b8c7d8; padding: 7px 10px; margin: 4px 0 12px; }
.vapp_hashes { margin: 0 0 8px; }
.vapp_hashes dt { color: #777; margin-top: 6px; }
.vapp_hashes dd { margin: 2px 0 0; }
.vapp code { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: 11px; background: #f2f4f7; border-radius: 2px; padding: 1px 4px; color: #222; }
.vapp_hash { display: inline-block; max-width: 100%; word-break: break-all; user-select: all; -webkit-user-select: all; }
.vapp_cmds { color: #555; font-size: 11px; margin-bottom: 12px; }
.vapp_m .vapp_cmds { font-size: 12px; }
.vapp_cmds div { margin: 4px 0; }
.vapp_cl { margin-bottom: 10px; }
.vapp_cl_v { font-weight: bold; color: #333; margin-bottom: 2px; }
/* viewer (VK-like dark layer) */
html.vapp_vw_on, html.vapp_vw_on body { overflow: hidden; }
.vapp_viewer { position: fixed; z-index: 10050; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .86); display: flex; align-items: center; justify-content: center; }
.vapp_vw_bar { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; color: #ccc; font-size: 12px; }
.vapp_vw_title { flex: 1 1 auto; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vapp_vw_close { color: #ccc; font-size: 28px; line-height: 40px; text-decoration: none !important; padding: 0 6px; }
.vapp_vw_close:hover { color: #fff; }
.vapp_vw_img { max-width: calc(100% - 120px); max-height: calc(100% - 64px); margin-top: 20px; border-radius: 4px; box-shadow: 0 4px 24px rgba(0, 0, 0, .5); cursor: pointer; }
.vapp_vw_nav { position: absolute; top: 40px; bottom: 0; width: 60px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 48px; text-decoration: none !important; }
.vapp_vw_nav:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.vapp_vw_prev { left: 0; }
.vapp_vw_next { right: 0; }
@media (max-width: 600px) {
  .vapp_vw_img { max-width: 100%; max-height: calc(100% - 50px); margin-top: 30px; border-radius: 0; }
  .vapp_vw_nav { width: 44px; font-size: 36px; background: none; }
}
/* dark */
html.vc-dark .vapp { color: #d6d9dd; }
html.vc-dark .vapp_head, html.vc-dark .vapp_sec { border-color: #2e3236; }
html.vc-dark .vapp_name, html.vc-dark .vapp_h { color: #9fbbdc; }
html.vc-dark .vapp_short, html.vc-dark .vapp_text, html.vc-dark .vapp_feats, html.vc-dark .vapp_steps, html.vc-dark .vapp_cl_list, html.vc-dark .vapp_cl_v { color: #c7cbd1; }
html.vc-dark .vapp_meta, html.vc-dark .vapp_direct, html.vc-dark .vapp_ios, html.vc-dark .vapp_hashes dt, html.vc-dark .vapp_cmds, html.vc-dark .vapp_qr_t, html.vc-dark .vapp_muted { color: #8b9198; }
html.vc-dark .vapp_qr, html.vc-dark .vapp_note { background: #1f2124; border-color: #34383d; color: #b5bac0; }
html.vc-dark .vapp_note { border-left-color: #4a6a8f; }
html.vc-dark .vapp code { background: #15171a; color: #e3e6ea; }
html.vc-dark .vapp_shot { background: #1f2124; border-color: #34383d; }
html.vc-dark .vapp_shot_ph { color: #8b9198; }
html.vc-dark .vapp_store { border-color: #3d4249; }
html.vc-dark .vapp_icon { box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
html.vc-dark .vapp_na { color: #f0a597; }
