/* v2.31.1131: Experiments -> SOCIAL -- the phone preview (js/social.js). These are Instagram's and Facebook's own
   colours, type and spacing (light + dark), so the preview looks like the real apps; they are deliberately NOT the
   Nexus palette and don't follow it. The composer around the phone lives in theme.css on Nexus tokens. */
.sc-avi { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); color: #fff; font: 700 12px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; flex: none; }
.sc-avi img { width: 100%; height: 100%; object-fit: cover; }
.sc-avi.ring { padding: 2px; background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%, #4f5bd5); }
.sc-avi.ring > * { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--ig-bg, #000); display: grid; place-items: center; background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
/* ---------------- the phone */
.sc-phonef { --ig-bg: #000; --ig-fg: #f5f5f5; --ig-dim: #a8a8a8; --ig-link: #e0f1ff; --ig-line: #262626; --ig-btn: #363636; --ig-dot: #4d4d4d;
  width: 400px; height: 846px; border-radius: 52px; border: 11px solid #0c0c0e; box-shadow: 0 0 0 1px #2c2c30, 0 20px 50px rgba(0,0,0,.5); background: var(--ig-bg); color: var(--ig-fg);
  overflow: hidden; display: flex; flex-direction: column; position: relative; font: 14px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; user-select: none; }
.sc-phonef.ig.light { --ig-bg: #fff; --ig-fg: #000; --ig-dim: #737373; --ig-link: #00376b; --ig-line: #dbdbdb; --ig-btn: #efefef; --ig-dot: #c7c7c7; }
.sc-phonef.fb { --fb-page: #f0f2f5; --fb-card: #fff; --fb-fg: #050505; --fb-dim: #65676b; --fb-line: #ced0d4; --fb-link: #0064d1; --fb-hover: #f2f2f2; background: var(--fb-card); color: var(--fb-fg); font: 15px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sc-phonef.fb.dark { --fb-page: #18191a; --fb-card: #242526; --fb-fg: #e4e6eb; --fb-dim: #b0b3b8; --fb-line: #3e4042; --fb-link: #4599ff; }
.sc-phonef .sc-sb { height: 47px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font: 600 16px -apple-system, "Segoe UI", sans-serif; position: relative; z-index: 5; }
.sc-phonef.full .sc-sb { position: absolute; top: 0; left: 0; right: 0; color: #fff; }
.sc-sbi { display: flex; align-items: center; gap: 6px; }
.sc-sbi i { display: block; background: currentColor; }
.sc-sbi .sig { width: 17px; height: 11px; clip-path: polygon(0 75%, 22% 75%, 22% 100%, 0 100%, 0 75%, 26% 55%, 48% 55%, 48% 100%, 26% 100%, 26% 55%, 52% 30%, 74% 30%, 74% 100%, 52% 100%, 52% 30%, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% 0); }
.sc-sbi .wifi { width: 15px; height: 11px; clip-path: polygon(50% 100%, 0 30%, 15% 15%, 50% 0, 85% 15%, 100% 30%); }
.sc-sbi .bat { width: 25px; height: 12px; border-radius: 3.5px; background: none; border: 1.5px solid currentColor; position: relative; opacity: .95; }
.sc-sbi .bat::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1.5px; }
.sc-scr { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; position: relative; }
.sc-scr::-webkit-scrollbar { display: none; }
.sc-hb { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: currentColor; opacity: .9; z-index: 6; }
.sc-phonef.fb .sc-hb { color: var(--fb-fg); }
.sc-ic { display: block; flex: none; }
.sc-ph { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(128,128,128,.12) 0 12px, rgba(128,128,128,.06) 12px 24px); color: rgba(128,128,128,.9); font-size: 13px; }
/* Instagram: feed */
.ig-feed { min-height: 100%; display: flex; flex-direction: column; }
.ig-topbar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; flex: none; }
.ig-tbi { display: flex; gap: 20px; }
.ig-post { flex: 1; }
.ig-ph { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; }
.ig-who { flex: 1; min-width: 0; line-height: 17px; } .ig-who b { font-weight: 600; font-size: 14px; } .ig-who small { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ig-fg); }
.ig-and { font-weight: 400; }
.ig-media { position: relative; width: 100%; overflow: hidden; background: var(--ig-btn); cursor: grab; touch-action: none; }
.ig-media.panning, .panning { cursor: grabbing; }
.ig-media img, .ig-media video, .ig-tile img, .ig-tile video, .rl-media img, .rl-media video, .st-media img, .st-media video, .fb-pics img, .fb-pics video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-count { position: absolute; top: 14px; right: 14px; background: rgba(18,18,18,.7); color: #fff; font: 500 12px/1 -apple-system, "Segoe UI", sans-serif; padding: 6px 9px; border-radius: 14px; }
.ig-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.82); color: #262626; font-size: 20px; line-height: 22px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.ig-arr.l { left: 10px; } .ig-arr.r { right: 10px; } .ig-media:hover .ig-arr { opacity: 1; }
.ig-acts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 12px 4px; height: 46px; }
.ig-al { display: flex; align-items: center; gap: 4px; } .ig-al em { font-style: normal; font-weight: 600; font-size: 14px; margin: 0 12px 0 1px; }
.ig-ar { justify-self: end; }
.ig-dots { display: flex; gap: 4px; align-items: center; } .ig-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ig-dot); } .ig-dots i.on { background: #0095f6; } .ig-dots i.sm { width: 4px; height: 4px; }
.ig-cap { padding: 0 12px; line-height: 18px; word-wrap: break-word; } .ig-cap b, .ig-c1 b { font-weight: 600; }
.ig-link { color: var(--ig-link); } .ig-more { color: var(--ig-dim); cursor: pointer; }
.ig-c1 { padding: 4px 12px 0; line-height: 18px; }
.ig-vac { padding: 4px 12px 0; color: var(--ig-dim); }
.ig-date { padding: 4px 12px 14px; color: var(--ig-dim); font-size: 12px; }
.ig-nav { position: sticky; bottom: 0; display: flex; justify-content: space-around; align-items: center; height: 74px; padding-bottom: 22px; background: var(--ig-bg); border-top: 1px solid var(--ig-line); margin-top: auto; z-index: 3; }
.ig-navav { width: 27px; height: 27px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.ig-navav.on { box-shadow: 0 0 0 2px var(--ig-bg), 0 0 0 3.5px var(--ig-fg); } .ig-navav img { width: 100%; height: 100%; object-fit: cover; }
.rl .ig-nav { position: absolute; left: 0; right: 0; bottom: 0; background: #000; border-top-color: #262626; color: #f5f5f5; }
/* Instagram: profile + grid */
.ig-prof { min-height: 100%; display: flex; flex-direction: column; }
.ig-ph2 { display: flex; align-items: center; gap: 4px; font-size: 20px; } .ig-ph2 b { font-weight: 700; }
.ig-phead { display: flex; align-items: center; gap: 22px; padding: 6px 16px 0; }
.ig-stats { flex: 1; } .ig-nm { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.ig-st3 { display: flex; justify-content: space-between; padding-right: 8px; } .ig-st3 div { line-height: 18px; } .ig-st3 b { display: block; font-weight: 600; font-size: 16px; } .ig-st3 span { font-size: 14px; }
.ig-bio { padding: 10px 16px 0; line-height: 18px; white-space: pre-wrap; } .ig-blink { color: var(--ig-link); font-weight: 600; margin-top: 2px; }
.ig-pbtns { display: flex; gap: 6px; padding: 12px 16px; } .ig-pbtns span { flex: 1; text-align: center; background: var(--ig-btn); border-radius: 8px; padding: 7px 0; font-weight: 600; font-size: 14px; }
.ig-ptabs { display: flex; border-bottom: 1px solid var(--ig-line); } .ig-ptabs span { flex: 1; display: flex; justify-content: center; padding: 10px 0; color: var(--ig-dim); } .ig-ptabs span.on { color: var(--ig-fg); box-shadow: inset 0 -1px 0 var(--ig-fg); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-top: 2px; margin-bottom: auto; }
.ig-tile { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: var(--ig-btn); }
.ig-tile.cur { cursor: grab; outline: 2px solid #0095f6; outline-offset: -2px; z-index: 1; }
.ig-tile.empty { background: color-mix(in srgb, var(--ig-btn) 70%, var(--ig-bg)); }
.ig-tmark { position: absolute; top: 6px; right: 6px; color: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); }
/* Instagram: story */
.st, .rl { position: absolute; inset: 0; background: #000; color: #fff; overflow: hidden; }
.st-media, .rl-media { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.st-media.fit { cursor: default; display: grid; place-items: center; }
.st-media.fit .contain { position: relative; width: 100%; height: auto; max-height: 100%; object-fit: contain; z-index: 1; }
.st-blur { position: absolute; inset: -40px; width: calc(100% + 80px) !important; height: calc(100% + 80px) !important; filter: blur(60px) saturate(1.3) brightness(.7); transform: scale(1.3); }
.st-shade { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.st-shade.top { top: 0; height: 140px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.st-shade.bot { bottom: 0; height: 120px; background: linear-gradient(transparent, rgba(0,0,0,.35)); }
.st-bars { position: absolute; top: 52px; left: 8px; right: 8px; display: flex; gap: 3px; z-index: 3; }
.st-bars i { flex: 1; height: 2px; border-radius: 1px; background: rgba(255,255,255,.35); } .st-bars i.done { background: #fff; } .st-bars i.cur { background: linear-gradient(90deg, #fff 40%, rgba(255,255,255,.35) 40%); }
.st-head { position: absolute; top: 62px; left: 12px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 3; } .st-head b { font-weight: 600; } .st-ago { color: rgba(255,255,255,.7); }
.st-head .sc-ic { filter: drop-shadow(0 0 2px rgba(0,0,0,.3)); }
.st-tap { position: absolute; top: 100px; bottom: 110px; width: 35%; background: none; border: 0; z-index: 3; cursor: pointer; } .st-tap.l { left: 0; } .st-tap.r { right: 0; }
.st-foot { position: absolute; left: 12px; right: 12px; bottom: 34px; display: flex; align-items: center; gap: 16px; z-index: 3; }
.st-msg { flex: 1; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; padding: 11px 16px; font-size: 14px; color: rgba(255,255,255,.9); }
/* safe zones */
.sc-safe { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255,207,61,.28) 0 8px, rgba(255,207,61,.12) 8px 16px); display: flex; justify-content: center; }
.sc-safe span { align-self: flex-end; font: 600 11px -apple-system, "Segoe UI", sans-serif; background: #ffcf3d; color: #111; border-radius: 4px; padding: 1px 6px; margin: 4px; }
.sc-safe.top { top: 0; height: 14%; } .sc-safe.bot { bottom: 0; height: 20%; } .sc-safe.bot span { align-self: flex-start; }
.sc-safe.bot.rlb { height: 32%; } .sc-safe.right { top: 45%; bottom: 32%; right: 0; left: auto; width: 17%; }
/* Instagram: reel */
.rl-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; z-index: 2; }
.rl-top { position: absolute; top: 54px; left: 16px; right: 16px; display: flex; align-items: center; gap: 4px; z-index: 3; font-size: 22px; } .rl-top b { font-weight: 700; }
.rl-rail { position: absolute; right: 10px; bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 3; }
.rl-rail div { display: flex; flex-direction: column; align-items: center; gap: 3px; } .rl-rail small { font-size: 12px; font-weight: 500; }
.rl-aud .sc-avi { border-radius: 7px; border: 2px solid #fff; }
.rl-bot { position: absolute; left: 12px; right: 64px; bottom: 90px; z-index: 3; }
.rl-who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rl-who b { font-weight: 600; } .rl-and { font-weight: 600; }
.rl-follow { border: 1px solid rgba(255,255,255,.7); border-radius: 8px; padding: 3px 10px; font-weight: 600; font-size: 13px; }
.rl-cap { line-height: 18px; max-width: 100%; } .rl-link { color: #fff; font-weight: 600; } .rl-more { color: rgba(255,255,255,.75); cursor: pointer; }
.rl-audio { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; }
/* Facebook: Page post */
.fb { min-height: 100%; background: var(--fb-page); }
.fb-topbar { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 12px; background: var(--fb-card); }
.fb-tbi { display: flex; gap: 10px; } .fb-tbi .sc-ic { box-sizing: content-box; padding: 7px; border-radius: 50%; background: var(--fb-page); }
.fb-card { background: var(--fb-card); margin-top: 8px; }
.fb-card.ghost { height: 220px; }
.fb-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0; }
.fb-who { flex: 1; min-width: 0; line-height: 18px; } .fb-who b { font-weight: 600; font-size: 15px; } .fb-who small { display: flex; align-items: center; gap: 4px; color: var(--fb-dim); font-size: 13px; }
.fb-hi { display: flex; gap: 14px; color: var(--fb-dim); }
.fb-text { padding: 8px 12px 10px; line-height: 20px; word-wrap: break-word; }
.fb-link { color: var(--fb-link); } .fb-more { color: var(--fb-fg); font-weight: 600; cursor: pointer; }
.fb-pics { display: grid; gap: 2px; background: var(--fb-card); }
.fb-pics.one { cursor: grab; touch-action: none; overflow: hidden; }
.fb-cell { position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.fb-pics.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 1; }
.fb-pics.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; aspect-ratio: 1; } .fb-pics.n3 .fb-cell:first-child { grid-column: 1 / -1; }
.fb-pics.n4 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 1fr; aspect-ratio: 1; } .fb-pics.n4 .fb-cell:first-child { grid-column: 1 / -1; }
.fb-pics.n5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; aspect-ratio: 1; } .fb-pics.n5 .fb-cell { grid-column: span 2; } .fb-pics.n5 .fb-cell:nth-child(-n+2) { grid-column: span 3; }
.fb-plus { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 30px; font-weight: 500; }
.fb-sum { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: var(--fb-dim); font-size: 14px; }
.fb-rx { display: flex; } .fb-rx i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 11px; border: 2px solid var(--fb-card); margin-right: -4px; }
.fb-rx i.l { background: linear-gradient(#18afff, #0062df); } .fb-rx i.h { background: linear-gradient(#ff6680, #e61739); }
.fb-btns { display: flex; border-top: 1px solid var(--fb-line); margin: 0 12px; padding: 4px 0; } .fb-btns span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--fb-dim); font-weight: 600; font-size: 14.5px; padding: 6px 0; border-radius: 4px; }