/* León Verde · библиотека движка · devices — iPhone, экраны Instagram/WhatsApp, стекло, нажатие.
   Всё в пикселях «точек» iPhone (экран 402×874, как у iPhone 16 Pro / 17 Pro), телефон масштабируется целиком.
   Без backdrop-filter (check на сервере зависает): стекло — полупрозрачная заливка + обводка 1px + мягкая тень. */
@font-face { font-family: "HfdUI"; src: url("assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; }

.hfd-abs { position: absolute; }

/* ---------- iPhone ---------- */
.hfd-phone-wrap { position: absolute; width: 434px; height: 906px; transform-origin: 50% 50%; }
.hfd-phone-shadow { position: absolute; left: 40px; right: 40px; bottom: -70px; height: 90px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30,26,22,.45), rgba(30,26,22,0)); filter: blur(18px); }
.hfd-phone { position: absolute; inset: 0; transform-origin: 50% 50%; }
/* корпус: рамка титана 5 px (как 1 мм), внутри — чёрная окантовка, затем экран; всего 16 px до экрана (2,65 мм) */
.hfd-body { position: absolute; inset: 0; border-radius: 78px;
  background: linear-gradient(115deg, var(--hfd-frame-hi) 0%, var(--hfd-frame) 18%, var(--hfd-frame-lo) 48%, var(--hfd-frame) 70%, var(--hfd-frame-hi) 86%, var(--hfd-frame-lo) 100%);
  box-shadow: 0 50px 90px rgba(25,22,18,.30), 0 18px 34px rgba(25,22,18,.22), inset 0 0 0 1px rgba(255,255,255,.35); }
.hfd-body::after { content: ""; position: absolute; inset: 1.5px; border-radius: 76.5px; border: 1px solid rgba(0,0,0,.18); }
.hfd-bezel { position: absolute; inset: 6px; border-radius: 72px; background: #08080a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.hfd-screen { position: absolute; left: 16px; top: 16px; width: 402px; height: 874px; border-radius: 62px; overflow: hidden;
  background: #fff; color: #000; font-family: "HfdUI", -apple-system, "Helvetica Neue", sans-serif; font-size: 15px; line-height: 1.3;
  -webkit-font-smoothing: antialiased; }
.hfd-glare { position: absolute; left: 16px; top: 16px; width: 402px; height: 874px; border-radius: 62px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 100%); }
.hfd-rim { position: absolute; inset: 0; border-radius: 78px; pointer-events: none;
  background: linear-gradient(200deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.35) 100%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; }
.hfd-island { position: absolute; left: 138.5px; top: 11px; width: 125px; height: 37px; border-radius: 19px; background: #000; z-index: 50; }
.hfd-island::after { content: ""; position: absolute; right: 13px; top: 12px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c3550 0%, #0b0d14 60%); }
.hfd-btn { position: absolute; width: 5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--hfd-frame-lo), var(--hfd-frame-hi) 45%, var(--hfd-frame)); }
.hfd-btn.l { left: -4px; } .hfd-btn.r { right: -4px; }
.hfd-btn.cam { width: 4px; right: -2px; background: linear-gradient(90deg, #6f6a62, #b9b3a9 50%, #6f6a62); border-radius: 2px; }
.hfd-slot { position: absolute; inset: 0; }
.hfd-slot > .hfd-scr { position: absolute; inset: 0; background: #fff; overflow: hidden; }

/* статус-строка iOS */
.hfd-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 40; color: #000; }
.hfd-status .tm { position: absolute; left: 38px; width: 70px; top: 17px; text-align: center; font-weight: 600; font-size: 17px; letter-spacing: -.2px; }
.hfd-status .ic { position: absolute; right: 30px; top: 20px; display: flex; gap: 6px; align-items: center; }
.hfd-dark .hfd-status { color: #fff; }
.hfd-homebar { position: absolute; left: 134px; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: #000; z-index: 40; }

/* ---------- Instagram (светлая тема) ---------- */
.hfd-ig { position: absolute; inset: 0; background: #fff; color: #000; }
.hfd-ig svg { display: block; }
.hfd-ig-nav { position: absolute; left: 0; right: 0; top: 54px; height: 44px; display: flex; align-items: center; padding: 0 14px; }
.hfd-ig-nav .ttl { font-weight: 700; font-size: 21px; letter-spacing: -.3px; display: flex; align-items: center; gap: 4px; flex: 1; white-space: nowrap; overflow: hidden; }
.hfd-ig-nav .icons { display: flex; gap: 20px; }
.hfd-ig-head { position: absolute; left: 16px; right: 16px; top: 108px; height: 90px; }
.hfd-ig-ava { position: absolute; left: 0; top: 0; width: 86px; height: 86px; border-radius: 50%; overflow: hidden; background: #dbdbdb; }
.hfd-ig-ava img { width: 100%; height: 100%; object-fit: cover; }
.hfd-ig-ava.empty::after { content: ""; position: absolute; left: 27px; top: 17px; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 44px 0 14px #fff; }
.hfd-ig-hright { position: absolute; left: 104px; right: 0; top: 4px; }
.hfd-ig-hname { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfd-ig-stats { display: flex; gap: 16px; margin-top: 6px; }
.hfd-ig-stats > div { flex: 0 0 auto; }
.hfd-ig-stats b { display: block; font-size: 17px; font-weight: 700; line-height: 22px; }
.hfd-ig-stats span { display: block; font-size: 13px; line-height: 17px; letter-spacing: -.1px; }
.hfd-ig-bio { position: absolute; left: 16px; right: 16px; top: 206px; font-size: 14px; line-height: 18px; white-space: pre-line; max-height: 54px; overflow: hidden; }
.hfd-ig-btns { position: absolute; left: 16px; right: 16px; top: 270px; height: 32px; display: flex; gap: 6px; }
.hfd-ig-btn { flex: 1; height: 32px; border-radius: 8px; background: #efefef; font-weight: 600; font-size: 14px; line-height: 32px; text-align: center; white-space: nowrap; overflow: hidden; position: relative; }
.hfd-ig-btn.sq { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; }
.hfd-ig-btn.blue { background: #0095f6; color: #fff; }
.hfd-ig-hl { position: absolute; left: 16px; top: 316px; width: 66px; text-align: center; font-size: 12px; }
.hfd-ig-hl .c { width: 64px; height: 64px; border-radius: 50%; border: 1px solid #dbdbdb; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
.hfd-ig-tabs { position: absolute; left: 0; right: 0; top: 406px; height: 44px; display: flex; border-bottom: 1px solid #efefef; }
.hfd-ig-tabs > div { flex: 1; display: flex; align-items: center; justify-content: center; color: #8e8e8e; position: relative; }
.hfd-ig-tabs > div.on { color: #000; }
.hfd-ig-tabs > div.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #000; }
.hfd-ig-grid { position: absolute; left: 0; right: 0; top: 451px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.hfd-ig-grid > div { aspect-ratio: 3 / 4; background: #efefef; overflow: hidden; position: relative; }
.hfd-ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfd-ig-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; background: #fff; border-top: 1px solid #efefef; z-index: 30; }
.hfd-ig-tab .row { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: space-around; align-items: center; }
.hfd-ig-tab .me { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #dbdbdb; border: 1.5px solid #000; }
.hfd-ig-tab .me img { width: 100%; height: 100%; object-fit: cover; }

/* пост */
.hfd-ig-post { position: absolute; left: 0; right: 0; }
.hfd-ig-ph { height: 54px; display: flex; align-items: center; padding: 0 12px; gap: 10px; }
.hfd-ig-ph .a { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #dbdbdb; flex: 0 0 32px; }
.hfd-ig-ph .a img { width: 100%; height: 100%; object-fit: cover; }
.hfd-ig-ph .n { flex: 1; min-width: 0; }
.hfd-ig-ph .n b { display: block; font-size: 14px; font-weight: 600; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfd-ig-ph .n span { display: block; font-size: 12px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfd-ig-img { width: 402px; position: relative; overflow: hidden; background: #efefef; }
.hfd-ig-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfd-ig-bigheart { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; opacity: 0; color: #fff; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.hfd-ig-act { height: 46px; display: flex; align-items: center; padding: 0 12px; gap: 16px; }
.hfd-ig-act .cnt { font-size: 14px; font-weight: 600; margin-left: -10px; }
.hfd-ig-act .sp { flex: 1; }
.hfd-ig-likeh { position: relative; width: 26px; height: 26px; }
.hfd-ig-likeh svg { position: absolute; inset: 0; }
.hfd-ig-likeh .fill { opacity: 0; color: #ff3040; }
.hfd-ig-txt { padding: 0 12px; font-size: 14px; line-height: 18px; }
.hfd-ig-txt b { font-weight: 600; }
.hfd-ig-txt .g { color: #737373; margin-top: 4px; }
.hfd-ig-cap { max-height: 54px; overflow: hidden; }
.hfd-ig-stories { position: absolute; left: 0; right: 0; top: 98px; height: 104px; display: flex; gap: 14px; padding: 0 10px; overflow: hidden; }
.hfd-ig-story { flex: 0 0 72px; text-align: center; font-size: 12px; }
.hfd-ig-story .r { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, var(--hfd-ring1), var(--hfd-ring2)); }
.hfd-ig-story .r.seen { background: #dbdbdb; }
.hfd-ig-story .i { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; overflow: hidden; background: #dbdbdb; }
.hfd-ig-story .i img { width: 100%; height: 100%; object-fit: cover; }
.hfd-ig-story .t { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* новая публикация */
.hfd-ig-np-nav { position: absolute; left: 0; right: 0; top: 54px; height: 48px; display: flex; align-items: center; padding: 0 12px; }
.hfd-ig-np-nav .ttl { flex: 1; text-align: center; font-weight: 700; font-size: 17px; margin-right: 26px; }
.hfd-ig-np-top { position: absolute; left: 16px; right: 16px; top: 114px; height: 230px; }
.hfd-ig-np-thumb { position: absolute; left: 50%; top: 0; width: 184px; height: 230px; margin-left: -92px; border-radius: 6px; overflow: hidden; background: #efefef; }
.hfd-ig-np-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfd-ig-np-field { position: absolute; left: 16px; right: 16px; top: 360px; height: 118px; font-size: 16px; line-height: 22px; overflow: hidden; }
.hfd-ig-np-field .ph { color: #8e8e8e; position: absolute; left: 0; top: 0; right: 0; }
.hfd-ig-np-field .tx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow-wrap: anywhere; }
.hfd-caret { display: inline-block; width: 2px; height: 21px; margin-left: 1px; vertical-align: -4px; background: #0a84ff; }
.hfd-ig-np-rows { position: absolute; left: 0; right: 0; top: 494px; border-top: 1px solid #efefef; }
.hfd-ig-np-row { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px; font-size: 16px; border-bottom: 1px solid #efefef; }
.hfd-ig-np-row .sp { flex: 1; }
.hfd-ig-np-share { position: absolute; left: 16px; right: 16px; bottom: 44px; height: 46px; border-radius: 10px; background: #0095f6; color: #fff;
  font-weight: 600; font-size: 16px; line-height: 46px; text-align: center; }

/* ---------- WhatsApp (светлая тема iOS) ---------- */
.hfd-wa { position: absolute; inset: 0; background: #efeae2; color: #111b21; }
.hfd-wa-bgdots { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(140,120,90,.16) 1.4px, transparent 1.6px); background-size: 22px 22px; }
.hfd-wa-head { position: absolute; left: 0; right: 0; top: 0; height: 108px; background: #f6f5f3; border-bottom: 1px solid #dedad5; z-index: 20; }
.hfd-wa-head .row { position: absolute; left: 0; right: 0; top: 56px; height: 48px; display: flex; align-items: center; padding: 0 12px 0 6px; gap: 8px; }
.hfd-wa-back { display: flex; align-items: center; color: #007aff; font-size: 17px; }
.hfd-wa-ava { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #cfd6db; flex: 0 0 38px; }
.hfd-wa-ava img { width: 100%; height: 100%; object-fit: cover; }
.hfd-wa-who { flex: 1; min-width: 0; position: relative; height: 40px; }
.hfd-wa-who b { display: block; font-size: 16.5px; font-weight: 600; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfd-wa-who span { position: absolute; left: 0; top: 21px; font-size: 13px; line-height: 17px; color: #667781; white-space: nowrap; }
.hfd-wa-head .icons { display: flex; gap: 22px; color: #007aff; }
.hfd-wa-list { position: absolute; left: 0; right: 0; top: 108px; bottom: 92px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px 12px; overflow: hidden; }
.hfd-wa-day { align-self: center; background: #fff; color: #54656f; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; margin-bottom: 6px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.hfd-wa-msg { display: flex; flex: 0 0 auto; }
.hfd-wa-msg.out { justify-content: flex-end; }
.hfd-wa-b { position: relative; max-width: 300px; padding: 6px 9px 7px 10px; border-radius: 15px; font-size: 16px; line-height: 21px;
  background: #fff; box-shadow: 0 1px .5px rgba(11,20,26,.13); overflow-wrap: anywhere; overflow: hidden; }
.hfd-wa-msg.out .hfd-wa-b { background: #d9fdd3; }
.hfd-wa-msg.in .hfd-wa-b { border-bottom-left-radius: 5px; }
.hfd-wa-msg.out .hfd-wa-b { border-bottom-right-radius: 5px; }
.hfd-wa-b .sp { display: inline-block; width: 44px; height: 10px; }
.hfd-wa-msg.out .hfd-wa-b .sp { width: 64px; }
.hfd-wa-meta { position: absolute; right: 8px; bottom: 4px; font-size: 11px; line-height: 14px; color: #667781; display: flex; align-items: center; gap: 3px; }
.hfd-wa-ticks { position: relative; width: 17px; height: 11px; }
.hfd-wa-ticks svg { position: absolute; inset: 0; }
.hfd-wa-ticks .rd { opacity: 0; color: #53bdeb; }
.hfd-wa-ticks .gr { color: #8696a0; }
.hfd-wa-typing { display: flex; gap: 4px; align-items: center; height: 21px; padding: 0 4px; }
.hfd-wa-typing i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #8696a0; }
.hfd-wa-input { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: #f6f5f3; border-top: 1px solid #dedad5; z-index: 20; }
.hfd-wa-input .row { position: absolute; left: 0; right: 0; top: 8px; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; color: #007aff; }
.hfd-wa-field { flex: 1; height: 34px; border-radius: 17px; background: #fff; border: 1px solid #dedad5; }

/* ---------- стекло ---------- */
.hfd-glass { position: absolute; border-radius: 30px; padding: 22px 24px; color: var(--hfd-glass-ink, #1b1b22);
  background: linear-gradient(145deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.70) 100%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 30px 60px rgba(30,28,40,.16), 0 8px 18px rgba(30,28,40,.10), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25);
  font-family: "HfdUI", sans-serif; font-size: 26px; line-height: 1.25; }
.hfd-glass .row { display: flex; align-items: center; gap: 16px; }
.hfd-glass .ico { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--hfd-accent); }
.hfd-glass .ava { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.6); }
.hfd-glass .ava img { width: 100%; height: 100%; object-fit: cover; }
.hfd-glass .tx { flex: 1; min-width: 0; }
.hfd-glass .t1 { font-weight: 700; font-size: 26px; line-height: 32px; }
.hfd-glass .t2 { font-size: 22px; line-height: 28px; opacity: .72; }
.hfd-glass .thumb { width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; margin-bottom: 14px; background: rgba(255,255,255,.5); }
.hfd-glass .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfd-glass .big { display: flex; justify-content: center; font-weight: 800; font-size: 120px; margin: -22px 0 -4px; color: var(--hfd-accent); }
.hfd-glass .lbl { text-align: center; font-weight: 600; font-size: 24px; line-height: 30px; opacity: .8; }
.hfd-glass.blurred { filter: blur(7px); opacity: .7; }

/* одометр — счёт на месте: окно 1,3 кегля без маски и без обрезки; числа-слои лежат друг на друге, сменяются прозрачностью */
.hfd-odo { display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
.hfd-odo-cell { position: relative; height: 1.3em; line-height: 1.3em; padding: 0 .12em; white-space: nowrap; }
.hfd-odo-sz { visibility: hidden; font-style: normal; display: block; }
.hfd-odo-v { position: absolute; left: 0; right: 0; top: 0; height: 1.3em; line-height: 1.3em; text-align: center; white-space: nowrap; }

/* нажатие без руки */
.hfd-tap-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 3px solid var(--hfd-tap, rgba(255,255,255,.95)); box-shadow: 0 0 24px var(--hfd-tap-glow, rgba(0,149,246,.55)), inset 0 0 18px var(--hfd-tap-glow, rgba(0,149,246,.45));
  opacity: 0; pointer-events: none; z-index: 60; }
.hfd-tap-dot { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); opacity: 0; pointer-events: none; z-index: 60; }