/* Instagram (2026 app, matched to the reference recordings) */
.phone[data-platform='instagram'] {
  --bg: #ffffff; --fg: #000000; --fg2: #737373; --sep: #dbdbdb; --elev: #efefef; --accent: #0095f6; --link: #00376b; --hl-ring: #dbdbdb;
  --like: #ff3040; --dot-on: #0095f6; --dot-off: #c7c7c7;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.phone[data-platform='instagram'][data-theme='dark'] {
  --bg: #0c1014; --fg: #f5f5f5; --fg2: #a8a8a8; --sep: #262a2f; --elev: #25292e; --link: #e0f1ff; --dot-off: #4a4d52; --hl-ring: #2b3036;
}
.phone[data-platform='instagram'][data-device='android'] { --font: Roboto, 'Segoe UI', Arial, sans-serif; }

/* Home header: + · For you ⌄ · ♡ */
.ig-topbar .bar { height: 52px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 0 8px; }
.ig-topbar .bar > button { display: grid; place-items: center; height: 44px; position: relative; }
.ig-topbar .bar .ico { width: 28px; height: 28px; }
.ig-title { justify-self: center; display: flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.ig-title .ico { width: 18px !important; height: 18px !important; stroke-width: 2.6; }
.ig-badge-btn .red-dot { top: 8px; right: 7px; }
.ig-top-space { height: calc(var(--st) + 52px); }

/* Stories tray */
.ig-tray { display: flex; gap: 12px; padding: 6px 10px 12px; }
.ig-tray-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 80px; flex: none; position: relative; }
.ig-tray-item .av-ring { --ring: 2.5px; --gap: 2.5px; }
.ig-tray-item .name { font-size: 13px; width: 84px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.ig-tray-item .plus {
  position: absolute; right: 0; top: 55px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #000;
  display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg);
}
.ig-tray-item .plus .ico { width: 15px; height: 15px; stroke-width: 3; }
.ig-tray-item .av-ring, .ig-tray-item > .av { transition: transform .15s; }
.ig-tray-item:active .av-ring, .ig-tray-item:active > .av { transform: scale(.94); }

/* Feed post */
.ig-post { padding-bottom: 14px; }
.ig-post-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; min-height: 56px; }
.ig-post-head .av-ring { --ring: 2px; --gap: 2px; }
.ig-who { flex: 1; min-width: 0; line-height: 1.25; }
.ig-who b { font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 4px; }
.ig-who .badge { width: 14px; height: 14px; }
.ig-who small { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fg); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-who small .ico { width: 13px; height: 13px; flex: none; }
.ig-follow-pill { background: var(--elev) !important; border-radius: 9px; padding: 7px 16px !important; font-size: 14.5px; font-weight: 600; flex: none; transition: background .15s; }
.ig-follow-pill.on { background: transparent !important; box-shadow: inset 0 0 0 1px var(--sep); }
.ig-more { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.ig-more .ico { width: 24px; height: 24px; }
.ig-media { position: relative; width: 100%; overflow: hidden; background: var(--elev); }
.ig-media > .m { position: absolute; inset: 0; }
.ig-media .car { position: absolute; inset: 0; }
.ig-mute {
  position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(20,20,20,.75) !important;
  color: #fff !important; display: grid; place-items: center; z-index: 3;
}
.ig-mute .ico { width: 14px !important; height: 14px !important; }
.ig-dots-row { height: 18px; display: flex; align-items: flex-end; justify-content: center; }
.ig-actions { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 10px 0 12px; }
.ig-act { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14.5px; }
.ig-act .ico { width: 26px; height: 26px; stroke-width: 1.9; }
.ig-act span:empty { display: none; }
.ig-like.on { color: var(--like); }
.ig-like.on span, .ig-save.on span { color: var(--fg); }
.ig-actions .sp { flex: 1; }
.ig-liked { display: flex; align-items: center; padding: 0 12px 4px; font-size: 14px; gap: 0; }
.ig-liked .av { box-shadow: 0 0 0 2px var(--bg); }
.ig-liked .av + .av { margin-left: -6px; }
.ig-liked span { margin-left: 8px; }
.ig-liked b { font-weight: 600; }
.ig-caption { padding: 0 12px; font-size: 14.5px; line-height: 1.38; position: relative; }
.ig-caption b { font-weight: 600; }
.ig-caption.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-caption .more-btn { position: absolute; right: 12px; bottom: 0; padding-left: 26px; color: var(--fg2); background: linear-gradient(90deg, transparent, var(--bg) 22px); }
.ig-time { padding: 5px 12px 0; color: var(--fg2); font-size: 13px; }
.ig-caught { padding: 30px 20px 50px; text-align: center; color: var(--fg2); }
.ig-caught .ring { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.ig-caught .ring i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--bg); color: var(--fg); font-style: normal; font-size: 26px; }
.ig-caught b { display: block; color: var(--fg); font-size: 16px; font-weight: 600; }

/* Tab bar: home · reels · messages · search · profile */
.phone[data-platform='instagram'] .tabbar { border-top: 0; }
.phone[data-platform='instagram'] .tabbar .ico { width: 27px; height: 27px; stroke-width: 1.9; }
.phone[data-platform='instagram'] .tabbar .tab-av { width: 28px; height: 28px; }

/* Sub-page header: ← Posts */
.ig-subbar { position: absolute; inset: 0 0 auto 0; z-index: 20; background: var(--bg); padding-top: var(--st); }
.ig-subbar .bar { height: 56px; display: flex; align-items: center; gap: 22px; padding: 0 16px; }
.ig-subbar .bar b { font-size: 22px; font-weight: 700; }
.ig-subbar .bar .ico { width: 28px; height: 28px; }
.ig-sub-space { height: calc(var(--st) + 56px); }

/* Profile (how visitors see it) */
.ig-prof-bar { position: absolute; inset: 0 0 auto 0; z-index: 20; background: var(--bg); padding-top: var(--st); }
.ig-prof-bar .bar { height: 56px; display: flex; align-items: center; gap: 22px; padding: 0 16px; }
.ig-prof-bar .bar b { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 4px; letter-spacing: -.2px; margin-left: 8px; }
.ig-prof-bar .bar .ico { width: 26px; height: 26px; }
.ig-prof-bar .bar .badge { width: 16px !important; height: 16px !important; }
.ig-prof-space { height: calc(var(--st) + 56px); }
.ig-prof-head { padding: 4px 16px 0; }
.ig-prof-row { display: flex; align-items: center; gap: 22px; }
.ig-prof-row .av-ring { --ring: 2.5px; --gap: 3px; }
.ig-prof-row .av { background: #000; }
.ig-prof-right { flex: 1; min-width: 0; }
.ig-prof-name { font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.ig-stats { display: flex; gap: 26px; }
.ig-stats div { display: flex; flex-direction: column; line-height: 1.2; }
.ig-stats b { font-size: 18px; font-weight: 600; }
.ig-stats span { font-size: 15px; }
.ig-bio { margin-top: 12px; font-size: 15px; line-height: 1.4; }
.ig-bio .cat { color: var(--fg2); display: block; }
.ig-bio .lnk { color: #a9b8ff; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.phone[data-platform='instagram'][data-theme='light'] .ig-bio .lnk { color: var(--link); }
.ig-bio .lnk .ico { width: 15px; height: 15px; }
.ig-followed { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; line-height: 1.3; }
.ig-followed .stack { display: flex; flex: none; }
.ig-followed .stack .av { box-shadow: 0 0 0 2px var(--bg); }
.ig-followed .stack .av + .av { margin-left: -8px; }
.ig-followed b { font-weight: 600; }
.ig-prof-btns { display: flex; gap: 6px; margin-top: 12px; }
.ig-prof-btns button { flex: 1; height: 36px; border-radius: 9px; background: var(--elev) !important; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ig-prof-btns button .ico { width: 16px; height: 16px; }
.ig-prof-btns button.sq { flex: 0 0 38px; }
.ig-prof-btns button.sq .ico { width: 19px; height: 19px; }
.ig-hl { display: flex; gap: 16px; padding: 16px 0 4px; }
.ig-hl .ig-hl-item { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; width: 72px; }
/* Grey ring, a gap, then the cover (as in the app). */
.ig-hl-item .circ { position: relative; width: 70px; height: 70px; border-radius: 50%; padding: 2.5px; border: 2.5px solid var(--hl-ring); transition: transform .15s ease-out; }
.ig-hl-item:active .circ { transform: scale(.92); }
/* Tapped: the ring turns into the story gradient and spins while the highlight "loads". */
.ig-hl-item.loading .circ { animation: hlPress .5s ease-out; }
.ig-hl-item.loading .circ::before {
  content: ''; position: absolute; inset: -2.5px; border-radius: 50%;
  background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: hlSpin .7s linear infinite;
}
@keyframes hlSpin { to { transform: rotate(1turn); } }
@keyframes hlPress { 0% { transform: scale(1); } 30% { transform: scale(.9); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.ig-hl-item .circ > * { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.ig-ptabs { position: sticky; top: calc(var(--st) + 56px); z-index: 10; background: var(--bg); display: flex; height: 48px; margin-top: 10px; }
.ig-ptabs button { flex: 1; display: grid; place-items: center; color: var(--fg2); transition: color .2s; }
.ig-ptabs button.on { color: var(--fg); }
.ig-ptabs .line { position: absolute; bottom: 0; left: 0; width: 25%; height: 2px; display: flex; justify-content: center; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.ig-ptabs .line::before { content: ''; width: 60%; height: 2px; background: var(--fg); }
.ig-ptabs .ico { width: 25px; height: 25px; }
.ig-panes { height: auto; transition: height .25s; }
.ig-panes .car-track { align-items: flex-start; height: auto; }
.ig-panes .car-slide { height: auto; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--elev) !important; display: block; }
.ig-grid.r11 .ig-tile { aspect-ratio: 1; }
.ig-grid.reels .ig-tile { aspect-ratio: 9 / 16; }
.ig-tile > .m { position: absolute; inset: 0; }
.ig-tile .t-ico, .ig-tile .t-pin { position: absolute; top: 7px; right: 7px; color: #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.ig-tile .t-ico .ico, .ig-tile .t-pin .ico { width: 21px; height: 21px; }
.ig-tile .t-views { position: absolute; left: 7px; bottom: 6px; color: #fff; display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; filter: drop-shadow(0 0 3px rgba(0,0,0,.5)); }
.ig-tile .t-views .ico { width: 14px; height: 14px; }
.ig-tile::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .15s; }
.ig-tile:active::after { opacity: .15; }
.ig-empty-tab { padding: 60px 30px; text-align: center; color: var(--fg2); }
.ig-empty-tab b { display: block; color: var(--fg); font-size: 20px; margin-bottom: 6px; }

/* Reels */
.ig-reels { background: #000; color: #fff; }
.ig-reels .scroller { bottom: var(--tabbar); padding-bottom: 0; }
.ig-reel { position: relative; height: 100%; overflow: hidden; background: #000; }
.ig-reel-media { position: absolute; inset: var(--st) 0 0 0; border-radius: 0; overflow: hidden; }
.ig-reel-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45) 0, transparent 16%, transparent 60%, rgba(0,0,0,.6) 100%); }
.ig-reels-bar { position: absolute; inset: 0 0 auto 0; padding-top: var(--st); z-index: 5; }
.ig-reels-bar .bar { height: 52px; display: flex; align-items: center; padding: 0 14px; gap: 8px; color: #fff; }
.ig-reels-bar .bar .ico { width: 26px; height: 26px; }
.ig-reels-bar b { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.ig-reels-bar b .ico { width: 17px !important; height: 17px !important; stroke-width: 2.6; }
.ig-reels-bar .dim { font-size: 22px; font-weight: 700; opacity: .55; margin-left: 10px; }
.ig-friends { display: flex; }
.ig-friends .av { box-shadow: 0 0 0 1.5px #000; }
.ig-friends .av + .av { margin-left: -7px; }
.ig-reel-side { position: absolute; right: 6px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 3; }
.ig-reel-side button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; color: #fff; width: 50px; }
.ig-reel-side .ico { width: 29px; height: 29px; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.ig-reel-side .on { color: var(--like); }
.ig-reel-side [data-save].on { color: #fff; }
.ig-reel-side .on span { color: #fff; }
.ig-reel-audio { width: 30px; height: 30px; border-radius: 7px; overflow: hidden; border: 2px solid #fff; margin-top: 4px; }
.ig-reel-info { position: absolute; left: 14px; right: 70px; bottom: 16px; z-index: 3; }
.ig-reel-user { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ig-reel-user .av-ring { --ring: 2px; --gap: 2px; }
.ig-reel-user .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ig-reel-user b { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.ig-reel-user .badge { width: 14px; height: 14px; }
.ig-reel-user .aud { display: flex; align-items: center; gap: 4px; font-size: 13px; opacity: .92; }
.ig-reel-user .aud .ico { width: 13px; height: 13px; flex: none; }
.ig-follow { border: 1.5px solid rgba(255,255,255,.75) !important; border-radius: 9px; padding: 5px 13px !important; font-size: 14px; font-weight: 600; flex: none; }
.ig-follow.on { background: rgba(255,255,255,.2) !important; }
.ig-reel-cap { margin-top: 10px; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ig-reel-cap.open { -webkit-line-clamp: 12; }
.ig-reel-cap .tag { color: #fff; font-weight: 600; }
.marquee { overflow: hidden; white-space: nowrap; max-width: 190px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.marquee i { display: inline-flex; font-style: normal; animation: marquee 10s linear infinite; }
.marquee i span { padding-right: 36px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ig-reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.25); z-index: 4; }
.ig-reel-progress i { display: block; height: 100%; width: 0; background: #fff; }
.ig-reel .ig-reel-side, .ig-reel .ig-reel-info { transition: opacity .2s; }
.ig-reel.holding .ig-reel-side, .ig-reel.holding .ig-reel-info, .ig-reel.holding .ig-reel-grad { opacity: 0; }

/* Stories viewer */
.st-viewer { background: #000; color: #fff; transform-origin: 50% 50%; }
.st-viewer.opening { animation: stOpen .32s cubic-bezier(.2,.8,.2,1); }
.st-viewer.closing { animation: stClose .26s cubic-bezier(.4,0,.8,.4) forwards; }
@keyframes stOpen { from { transform: var(--from, scale(.2)); opacity: .3; border-radius: 50%; } }
@keyframes stClose { to { transform: var(--from, scale(.2)); opacity: 0; border-radius: 50%; } }
.st-stage { position: absolute; inset: 0; perspective: 1100px; overflow: hidden; }
.st-face { position: absolute; inset: 0; background: #000; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.st-face .shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9; }
.st-media { position: absolute; left: 0; right: 0; top: calc(var(--st) + 4px); height: calc(var(--sw) * 16 / 9); border-radius: 10px; overflow: hidden; background: #3a3a3c; }
.st-media > .m { position: absolute; inset: 0; }
.st-media::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 110px; background: linear-gradient(180deg, rgba(0,0,0,.4), transparent); pointer-events: none; }
.st-top { position: absolute; left: 0; right: 0; top: calc(var(--st) + 10px); padding: 0 8px; z-index: 3; transition: opacity .2s; }
.st-bars { display: flex; gap: 3px; }
.st-bars i { flex: 1; height: 2.2px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.st-bars b { display: block; height: 100%; width: 0; background: #fff; }
.st-user { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding-left: 4px; font-size: 14.5px; }
.st-user b { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.st-user .badge { width: 14px; height: 14px; }
.st-user .when { opacity: .7; }
.st-user .ico { width: 24px; height: 24px; }
.st-bottom { position: absolute; left: 0; right: 0; top: calc(var(--st) + 4px + var(--sw) * 16 / 9 + 10px); display: flex; align-items: center; gap: 16px; padding: 0 12px; z-index: 3; transition: opacity .2s; }
.st-input { flex: 1; height: 48px; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; display: flex; align-items: center; padding: 0 18px; font-size: 15px; color: rgba(255,255,255,.92); }
.st-bottom .ico { width: 27px; height: 27px; }
.st-bottom .on { color: var(--like); }
.st-face.holding .st-top, .st-face.holding .st-bottom { opacity: 0; }