/* Weave: Instagram-style look. Loaded after the app's own styles, so these rules win. */
@import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');

:root{
  --bg:#ffffff; --card:#ffffff; --ink:#000000; --ink-soft:#737373; --line:#dbdbdb;
  --coral:#ff3040; --coral-bg:#efefef; --gold:#000000; --gold-bg:#efefef; --blue:#0095f6; --plum:#000000; --plum-bg:#efefef;
  --radius:8px;
  --ig-blue:#0095f6; --ig-blue-dark:#1877f2; --ig-red:#ff3040; --ig-gray:#efefef; --ig-gray-dark:#dbdbdb;
  --ig-sep:#dbdbdb; --ig-soft:#737373;
  --ig-ring:linear-gradient(45deg,#ffd600 0%,#ff7a00 30%,#ff0069 60%,#d300c5 85%,#7638fa 100%);
  --ig-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Base ---------- */
html, body{ background:#fff; }
body{ font-family:var(--ig-font); color:#000; -webkit-font-smoothing:antialiased; }
body *:not(.ig-logo):not(.ig-auth-logo):not(.ig-splash-logo):not(.deal-code){ font-family:var(--ig-font) !important; }
#app{ max-width:470px; padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
main{ padding:0; }
.view{ padding:0 16px 20px; }
#view-feed, #view-explore, #view-profile, #view-watch{ padding:0 0 12px; }
body:not(.ig-on-feed) main{ padding-top:env(safe-area-inset-top); }
button{ -webkit-tap-highlight-color:transparent; }

/* ---------- Top bar (home only) ---------- */
header.topbar.ig-topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:calc(6px + env(safe-area-inset-top)) 16px 6px; min-height:56px; background:#fff; border-bottom:none; }
body:not(.ig-on-feed) header.topbar{ display:none; }
.ig-logo{ font-family:'Grand Hotel', cursive; font-size:32px; line-height:1; cursor:pointer; color:#000; padding-top:4px; user-select:none; }
.ig-top-actions{ display:flex; align-items:center; gap:22px; }
.ig-icon{ position:relative; background:none; border:none; padding:0; margin:0; cursor:pointer; color:#000; display:inline-flex; align-items:center; justify-content:center; }
.ig-icon svg{ width:24px; height:24px; display:block; }
.ig-topbar .notif-dot{ top:-2px; right:-2px; width:9px; height:9px; background:var(--ig-red); border:1.5px solid #fff; }
.ig-badge{ position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ig-red); color:#fff;
  font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.ig-badge.show{ display:inline-flex; }

/* ---------- Bottom tab bar ---------- */
.floating-nav.ig-tabbar{ position:fixed; left:50%; right:auto; bottom:0; transform:translateX(-50%); width:100%; max-width:470px;
  height:calc(50px + env(safe-area-inset-bottom)); padding:0 0 env(safe-area-inset-bottom); display:flex; align-items:stretch; justify-content:space-around;
  gap:0; background:#fff; border-top:1px solid var(--ig-sep); border-radius:0; box-shadow:none; z-index:50; opacity:1; pointer-events:auto; transition:none; }
.floating-nav.ig-tabbar.collapsed{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
.ig-tabbar .navitem{ flex:1; display:flex; align-items:center; justify-content:center; background:none; border:none; color:#000; padding:0; cursor:pointer; position:relative; font-size:0; }
.ig-tabbar .navitem.active::after{ display:none; }
.ig-tabbar .navitem svg{ width:26px; height:26px; display:block; }
.ig-tabbar .ig-fill{ display:none; }
.ig-tabbar .navitem.active .ig-out{ display:none; }
.ig-tabbar .navitem.active .ig-fill{ display:block; }
.ig-nav-avatar{ width:26px; height:26px; border-radius:50%; display:block; position:relative; }
.ig-nav-avatar .avatar{ width:26px !important; height:26px !important; font-size:9px; }
.ig-tabbar .navitem.active .ig-nav-avatar{ box-shadow:0 0 0 1.5px #fff, 0 0 0 3px #000; }
@media (min-width:520px){
  .floating-nav.ig-tabbar{ border-left:1px solid var(--ig-sep); border-right:1px solid var(--ig-sep); }
  #app{ border-left:1px solid #efefef; border-right:1px solid #efefef; min-height:100vh; }
  .side-menu{ left:calc(50vw - 235px); }
  .full-page, .compose-page{ max-width:470px; }
}

/* ---------- Dark mode on Reels ---------- */
body.ig-dark, body.ig-dark #app{ background:#000; }
body.ig-dark #app{ border-color:#000; }
body.ig-dark .ig-tabbar{ background:#000; border-top-color:#262626; }
body.ig-dark .ig-tabbar .navitem{ color:#fff; }
body.ig-dark .ig-tabbar .navitem.active .ig-nav-avatar{ box-shadow:0 0 0 1.5px #000, 0 0 0 3px #fff; }
#view-watch{ color:#fff; }
#view-watch .pill-tabs{ position:sticky; top:0; z-index:5; margin:0; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:#000; gap:4px; }
#view-watch .pill{ background:none; border:none; color:rgba(255,255,255,.55); font-size:17px; font-weight:700; padding:4px 8px; border-radius:0; }
#view-watch .pill.active{ color:#fff; background:none; }
#view-watch .reels-wrap{ gap:2px; }
#view-watch .reel{ border-radius:0; height:calc(100dvh - 50px - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:420px; }
#view-watch .reels-loading{ color:#a8a8a8; }
#view-watch #watch-videos, #view-watch #watch-music{ padding:4px 12px 16px; }
#view-watch .watch-card{ background:#121212; border-color:#262626; color:#fff; border-radius:8px; }
#view-watch .watch-sub, #view-watch .track-artist, #view-watch .track-dur{ color:#a8a8a8; }
#view-watch .track-title{ color:#fff; }
#view-watch .track-row.playing{ background:#1a1a1a; }
#view-watch .section-sub{ color:#a8a8a8; }
.now-playing{ bottom:calc(84px + env(safe-area-inset-bottom)); max-width:470px; }
body.music-on #app{ padding-bottom:calc(150px + env(safe-area-inset-bottom)); }

/* ---------- Buttons, chips, labels ---------- */
.btn-solid{ background:var(--ig-blue); color:#fff; border:none; border-radius:8px; padding:7px 16px; font-size:14px; font-weight:600; }
.btn-solid:hover{ background:var(--ig-blue-dark); }
.btn-solid:disabled{ opacity:.5; }
.btn-outline{ background:var(--ig-gray); color:#000; border:none; border-radius:8px; padding:7px 16px; font-size:14px; font-weight:600; }
.btn-outline:hover{ background:var(--ig-gray-dark); }
.btn-outline.connected{ color:#000; }
.ig-btn{ flex:1; min-height:32px; border:none; border-radius:8px; background:var(--ig-gray); color:#000; font-size:14px; font-weight:600; cursor:pointer;
  padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.ig-btn:hover{ background:var(--ig-gray-dark); }
.ig-btn.blue{ background:var(--ig-blue); color:#fff; }
.ig-btn.blue:hover{ background:var(--ig-blue-dark); }
.ig-btn.icon{ flex:0 0 34px; padding:0; }
.ig-btn.icon svg{ width:18px; height:18px; }
.ig-btn.on{ background:var(--ig-gray-dark); }
.ig-link-btn, .ig-inline-btn{ background:none; border:none; padding:0; color:var(--ig-blue); font-weight:600; font-size:14px; cursor:pointer; }
.ig-inline-btn{ color:#000; }
.pill{ border:1px solid var(--ig-sep); background:#fff; color:#000; font-size:14px; font-weight:600; padding:6px 14px; border-radius:8px; }
.pill.active{ background:#000; color:#fff; border-color:#000; }
.pill-tabs{ gap:8px; margin:4px 0 14px; overflow-x:auto; scrollbar-width:none; }
.pill-tabs::-webkit-scrollbar{ display:none; }
.pill-tabs .pill{ flex-shrink:0; }
.section-label{ font-size:20px; font-weight:700; margin:6px 0 10px; }
.section-sub{ font-size:14px; color:var(--ig-soft); margin:0 0 12px; }
.ig-loading{ text-align:center; color:var(--ig-soft); font-size:14px; padding:28px 0; }
.ig-empty{ text-align:center; padding:48px 24px; }
.ig-empty-icon{ width:62px; height:62px; border-radius:50%; border:2px solid #000; display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ig-empty-icon svg{ width:30px; height:30px; }
.ig-empty-title{ font-size:20px; font-weight:800; margin-bottom:6px; }
.ig-empty-text{ font-size:14px; color:var(--ig-soft); line-height:18px; margin-bottom:14px; }
.weave-empty{ background:none; border:none; padding:40px 20px; }
.weave-empty-title{ font-size:20px; font-weight:800; }
.weave-empty-text{ font-size:14px; line-height:18px; }
.weave-error{ color:#ed4956; font-size:14px; }
.weave-toast{ top:auto; bottom:calc(96px + env(safe-area-inset-bottom)); background:#262626; color:#fff; border-radius:8px; font-size:14px; padding:12px 16px; }
.weave-chip{ background:var(--ig-gray); border:none; color:#000; border-radius:6px; font-size:12px; font-weight:600; }
.weave-icon-btn{ color:#000; }
.weave-more{ background:none; color:var(--ig-blue); width:auto; margin:6px auto 18px; display:block; }

/* ---------- Avatars with a story ring ---------- */
.avatar{ background-color:#c7c7c7; }
.ig-ring{ display:inline-flex; padding:2px; border-radius:50%; background:var(--ig-ring); flex-shrink:0; cursor:pointer; }
.ig-ring.seen{ background:#dbdbdb; padding:1.5px; }
.ig-ring > .avatar{ border:2px solid #fff; box-sizing:content-box; }
.ig-av{ display:inline-flex; flex-shrink:0; cursor:pointer; }

/* ---------- Stories row ---------- */
.ig-stories{ display:flex; gap:14px; overflow-x:auto; padding:8px 12px 12px; border-bottom:1px solid #efefef; scrollbar-width:none; margin:0; cursor:default; }
.ig-stories::-webkit-scrollbar{ display:none; }
.ig-story{ flex:0 0 auto; width:70px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; background:none; border:none; padding:0; }
.ig-story-ring{ position:relative; width:70px; height:70px; border-radius:50%; padding:3px; background:var(--ig-ring); display:block; }
.ig-story-ring.seen{ background:#dbdbdb; padding:2px; }
.ig-story-ring.none{ background:none; padding:3px; }
.ig-story-inner{ display:block; width:100%; height:100%; border-radius:50%; background:#fff; padding:3px; }
.ig-story-ring.seen .ig-story-inner{ padding:4px; }
.ig-story-inner .avatar{ width:100% !important; height:100% !important; font-size:17px; }
.ig-story-add{ position:absolute; right:-1px; bottom:-1px; width:22px; height:22px; border-radius:50%; background:var(--ig-blue); color:#fff; border:2.5px solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; line-height:1; cursor:pointer; }
.ig-story-name{ font-size:12px; color:#000; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ig-story-name.mine{ color:var(--ig-soft); }

/* ---------- Story viewer ---------- */
.ig-sv{ position:fixed; inset:0; z-index:225; background:#000; display:none; justify-content:center; }
.ig-sv.active{ display:flex; }
.ig-sv-frame{ position:relative; width:100%; max-width:470px; height:100%; background:#111; overflow:hidden; color:#fff; user-select:none; -webkit-user-select:none; }
.ig-sv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.ig-sv-top{ position:absolute; left:0; right:0; top:0; z-index:3; padding:calc(8px + env(safe-area-inset-top)) 10px 18px; background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0)); }
.ig-sv-bars{ display:flex; gap:3px; }
.ig-sv-bars span{ flex:1; height:2px; background:rgba(255,255,255,.35); border-radius:2px; overflow:hidden; }
.ig-sv-bars i{ display:block; height:100%; width:0; background:#fff; }
.ig-sv-head{ display:flex; align-items:center; gap:8px; padding:10px 2px 0; }
.ig-sv-who{ display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; }
.ig-sv-who .avatar{ width:32px !important; height:32px !important; font-size:11px; }
.ig-sv-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-sv-time{ font-size:14px; color:rgba(255,255,255,.7); white-space:nowrap; }
.ig-sv-sp{ flex:1; }
.ig-sv-btn{ background:none; border:none; color:#fff; padding:4px; cursor:pointer; display:flex; }
.ig-sv-btn svg{ width:24px; height:24px; }
.ig-sv-text{ position:absolute; left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:3; text-align:center; font-size:20px; font-weight:700;
  line-height:1.3; text-shadow:0 1px 6px rgba(0,0,0,.7); white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; }
.ig-sv-tap{ position:absolute; top:0; bottom:0; z-index:2; cursor:pointer; }
.ig-sv-tap.prev{ left:0; width:33%; }
.ig-sv-tap.next{ right:0; width:67%; }
.ig-sv-reply{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:12px; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); }
.ig-sv-reply input{ flex:1; min-width:0; border:1px solid rgba(255,255,255,.65); background:transparent; color:#fff; border-radius:22px; padding:11px 18px; font-size:15px; outline:none; }
.ig-sv-reply input::placeholder{ color:rgba(255,255,255,.85); }
.ig-sv-reply button{ background:none; border:none; color:#fff; padding:2px; cursor:pointer; display:flex; }
.ig-sv-compose{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; flex-direction:column; gap:12px; padding:14px 14px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); }
.ig-sv-compose input{ border:1px solid rgba(255,255,255,.65); background:rgba(0,0,0,.25); color:#fff; border-radius:22px; padding:11px 18px; font-size:15px; outline:none; }
.ig-sv-compose input::placeholder{ color:rgba(255,255,255,.85); }
.ig-sv-share{ align-self:flex-end; background:#fff; color:#000; border:none; border-radius:22px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.ig-sv-share:disabled{ opacity:.6; }

/* ---------- Feed posts ---------- */
.post.ig-post{ border:none; border-radius:0; margin:0 0 14px; background:#fff; overflow:visible; }
.ig-post-head, .ig-single .ig-post-head{ display:flex; align-items:center; gap:10px; padding:10px 6px 10px 14px; }
.ig-head-text{ flex:1; min-width:0; }
.ig-head-line{ display:flex; align-items:center; gap:4px; font-size:14px; line-height:18px; min-width:0; }
.ig-head-line .post-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; flex-shrink:1; min-width:0; }
.ig-dot{ color:var(--ig-soft); }
.ig-time{ color:var(--ig-soft); white-space:nowrap; }
.ig-sub{ font-size:12px; line-height:16px; color:#000; }
.ig-follow-link{ background:none; border:none; padding:0; color:var(--ig-blue); font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; }
.ig-more{ background:none; border:none; padding:6px 8px; cursor:pointer; color:#000; display:flex; }
.ig-more svg{ width:22px; height:22px; }
.ig-media{ position:relative; width:100%; background:#efefef; overflow:hidden; user-select:none; -webkit-user-select:none; cursor:pointer; }
.ig-media img{ display:block; width:100%; height:auto; max-height:min(587px, 125vw); object-fit:cover; -webkit-user-drag:none; }
.ig-text-post{ position:relative; padding:0 16px 6px; font-size:15px; line-height:21px; white-space:pre-wrap; overflow-wrap:anywhere; cursor:default; user-select:text; }
.ig-heart-pop{ position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; color:#fff; opacity:0; transform:scale(0); pointer-events:none;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.35)); z-index:2; }
.ig-text-post .ig-heart-pop{ color:var(--ig-red); width:64px; height:64px; margin:-32px 0 0 -32px; }
.ig-heart-pop svg{ width:100%; height:100%; }
.ig-heart-pop.go{ animation:igHeart .9s ease forwards; }
@keyframes igHeart{ 0%{opacity:0;transform:scale(0)} 15%{opacity:.96;transform:scale(1.2)} 30%{transform:scale(.95)} 45%,78%{opacity:.96;transform:scale(1)} 100%{opacity:0;transform:scale(1.05)} }
.ig-actions{ display:flex; align-items:center; padding:4px 6px 2px; }
.ig-actions .spacer{ flex:1; }
.ig-act{ background:none; border:none; padding:8px; cursor:pointer; color:#000; display:flex; }
.ig-act svg{ width:24px; height:24px; }
.ig-act:active{ opacity:.5; }
.ig-act.liked{ color:var(--ig-red); }
.ig-act.pop svg{ animation:igPop .4s ease; }
@keyframes igPop{ 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }
.ig-likes{ padding:0 14px; font-size:14px; font-weight:600; line-height:18px; cursor:pointer; }
.ig-likes.zero{ font-weight:400; cursor:default; }
.ig-likes.zero .ig-inline-btn{ font-weight:600; }
.ig-caption{ padding:5px 14px 0; font-size:14px; line-height:18px; white-space:pre-wrap; overflow-wrap:anywhere; }
.ig-caption b{ font-weight:600; cursor:pointer; margin-right:5px; }
.ig-more-link{ background:none; border:none; padding:0; color:var(--ig-soft); font-size:14px; cursor:pointer; }
.ig-view-comments{ padding:5px 14px 0; font-size:14px; color:var(--ig-soft); cursor:pointer; }
.post-caption{ white-space:pre-wrap; }
#feed-list > .weave-empty{ margin:20px 16px; }

/* ---------- Bottom sheets (pop-ups) ---------- */
.modal-overlay{ background:rgba(0,0,0,.45); }
.modal-box{ max-width:470px; border-radius:14px 14px 0 0; padding:26px 16px calc(18px + env(safe-area-inset-bottom)); }
.modal-box::before{ content:''; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:#dbdbdb; }
.modal-close{ top:12px; right:12px; background:none; width:28px; height:28px; font-size:15px; color:#000; }
.modal-h{ font-size:16px; font-weight:700; text-align:center; margin:0 34px 14px; }
.modal-desc{ font-size:14px; color:var(--ig-soft); line-height:19px; }
.modal-search{ background:var(--ig-gray); border:none; border-radius:10px; font-size:15px; padding:9px 14px; }
@media (min-width:520px){
  .modal-overlay{ align-items:center; }
  .modal-box{ border-radius:14px; max-height:82vh; }
  .modal-box::before{ display:none; }
}
.weave-menu-item{ border-bottom:1px solid #efefef; font-size:15px; padding:14px 4px; }
.weave-menu-item.danger{ color:#ed4956; }
.follower-row{ border-bottom:none; padding:8px 0; gap:12px; }
.follower-row .conn-name, .conn-name{ font-size:14px; font-weight:600; }
.follower-row .conn-role, .conn-role{ font-size:14px; color:var(--ig-soft); }
.follower-row .btn-solid, .follower-row .btn-outline{ padding:6px 14px; }

/* ---------- Single post viewer ---------- */
.modal-box .ig-single{ margin:-8px -16px 0; }
.modal-box .ig-single .ig-media img{ max-height:62vh; }

/* ---------- Comments ---------- */
.ig-comments{ max-height:52vh; overflow-y:auto; margin:0 -16px; padding:0 16px; border-top:1px solid #efefef; }
.ig-comment{ display:flex; gap:12px; padding:12px 0 4px; }
.ig-comment-body{ flex:1; min-width:0; font-size:14px; line-height:18px; }
.ig-comment-body b{ font-weight:600; cursor:pointer; }
.ig-comment-time{ color:var(--ig-soft); font-size:12px; margin-left:8px; }
.ig-comment-text{ white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px; }
.ig-no-comments{ text-align:center; padding:34px 0 26px; }
.ig-comment-bar{ display:flex; align-items:center; gap:12px; border-top:1px solid #efefef; margin:8px -16px 0; padding:10px 16px 0; }
.ig-comment-bar input{ flex:1; min-width:0; border:none; outline:none; font-size:15px; padding:8px 0; background:transparent; }
.ig-post-btn{ background:none; border:none; color:var(--ig-blue); font-weight:600; font-size:15px; cursor:pointer; padding:4px 2px; }
.ig-post-btn:disabled{ opacity:.35; cursor:default; }

/* ---------- Share sheet ---------- */
.ig-search-box{ display:flex; align-items:center; gap:8px; height:38px; border-radius:10px; background:var(--ig-gray); padding:0 12px; color:var(--ig-soft); font-size:16px; cursor:text; }
.ig-search-box svg{ width:18px; height:18px; flex-shrink:0; }
.ig-search-box input{ flex:1; min-width:0; border:none; background:transparent; outline:none; font-size:16px; color:#000; }
.ig-in-sheet{ margin-bottom:14px; }
.ig-share-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; max-height:46vh; overflow-y:auto; padding:2px 0 8px; }
.ig-share-person{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; padding:0; cursor:pointer; min-width:0; }
.ig-share-person .avatar{ width:62px !important; height:62px !important; font-size:18px; }
.ig-share-name{ font-size:12px; color:#000; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ig-share-sent{ font-size:12px; font-weight:600; color:var(--ig-blue); }
.ig-share-person.sent{ cursor:default; }
.ig-share-person.sent .avatar{ opacity:.55; }

/* ---------- Profile ---------- */
.profile-hero{ background:none; border:none; border-radius:0; padding:0; margin:0; text-align:left; }
.ig-prof-top{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:22px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; margin-top:calc(-1 * env(safe-area-inset-top)); background:#fff; }
.ig-prof-title{ flex:1; min-width:0; font-size:20px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-prof-head{ display:flex; align-items:center; gap:20px; padding:6px 16px 0; }
.ig-prof-avatar{ flex:0 0 auto; position:relative; cursor:pointer; }
.ig-prof-avatar .avatar{ font-size:26px; }
.ig-stats{ flex:1; display:flex; justify-content:space-around; text-align:center; }
.ig-stat{ cursor:pointer; min-width:56px; }
.ig-stat b{ display:block; font-size:17px; font-weight:700; line-height:20px; }
.ig-stat span{ font-size:14px; line-height:18px; }
.ig-prof-info{ padding:10px 16px 0; font-size:14px; line-height:18px; }
.ig-prof-name{ font-weight:600; }
.ig-prof-role{ color:var(--ig-soft); }
.ig-prof-role.ig-link{ color:var(--ig-blue); cursor:pointer; }
.ig-prof-bio{ white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px; }
.ig-follows-you{ display:inline-block; margin-top:6px; font-size:12px; font-weight:600; background:var(--ig-gray); border-radius:6px; padding:2px 8px; }
.ig-prof-btns{ display:flex; gap:6px; padding:14px 16px 0; }
.ig-discover{ padding:18px 0 0; }
.ig-discover-h{ display:flex; justify-content:space-between; align-items:center; padding:0 16px 10px; font-size:14px; font-weight:600; }
.ig-discover-row{ display:flex; gap:6px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none; }
.ig-discover-row::-webkit-scrollbar{ display:none; }
.ig-dcard{ position:relative; flex:0 0 150px; border:1px solid var(--ig-sep); border-radius:8px; padding:14px 10px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.ig-dcard-body{ cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; min-width:0; }
.ig-dcard .avatar{ width:72px !important; height:72px !important; font-size:20px; margin-bottom:4px; }
.ig-dcard-name{ font-size:14px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ig-dcard-sub{ font-size:12px; color:var(--ig-soft); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:8px; }
.ig-dcard .ig-btn{ width:100%; flex:0 0 auto; }
.ig-dcard-x{ position:absolute; top:6px; right:6px; background:none; border:none; padding:2px; cursor:pointer; color:var(--ig-soft); display:flex; }
.ig-dcard-x svg{ width:14px; height:14px; }
.ig-discover-none{ padding:0 16px 6px; font-size:14px; color:var(--ig-soft); }
.ig-tabs{ display:flex; border-top:1px solid var(--ig-sep); margin-top:16px; }
.ig-tab{ flex:1; height:46px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--ig-soft); border-top:1px solid transparent; margin-top:-1px; cursor:pointer; }
.ig-tab.active{ color:#000; border-top-color:#000; }
.ig-tab svg{ width:22px; height:22px; }
#profile-highlights, #profile-tabs{ display:none !important; }
.profile-grid, .ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.grid-tile{ aspect-ratio:1; border-radius:0; background:#efefef; position:relative; overflow:hidden; cursor:pointer; }
.grid-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.weave-text-tile{ background:#f4f4f4; border:none; padding:10px; font-size:12px; line-height:16px; color:#262626; }
.ig-grid-msg{ grid-column:1/-1; text-align:center; color:var(--ig-soft); padding:30px 0; font-size:14px; }
.ig-grid-empty{ grid-column:1/-1; text-align:center; padding:40px 24px; }

/* ---------- Someone else's profile (full page) ---------- */
.ig-person-page{ z-index:217; }
.ig-page-top, .full-page .compose-top, .compose-page .compose-top{ padding:calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom:1px solid var(--ig-sep); min-height:54px; gap:12px; }
.full-page .compose-top .title, .compose-page .compose-top .title{ flex:1; text-align:center; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.full-page .compose-top > button, .compose-page .compose-top > button{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; color:#000; }
.full-page .compose-top > button svg, .compose-page .compose-top > button svg{ width:24px; height:24px; }
.ig-person-body{ padding:0 0 30px; }
.ig-person-page .ig-prof-head{ padding-top:14px; }

/* ---------- Secondary pages (people, deals, causes, read, games) ---------- */
.ig-sub-top{ position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px; margin:0 -16px 8px; padding:10px 12px; background:#fff; }
.ig-sub-title{ flex:1; text-align:center; font-size:16px; font-weight:700; }
#view-market > .section-label, #view-activism > .section-label, #view-read > .section-label, #view-games > .section-label{ display:none; }
.job-card, .conn-card, .deal-card, .post, .achievement-card{ border-color:var(--ig-sep); border-radius:8px; }
.job-logo{ border-radius:8px; }
.weave-deal-banner{ font-weight:800; }
.read-card{ border-bottom-color:#efefef; }
.game-card{ border-color:var(--ig-sep); border-radius:8px; }

/* ---------- Explore ---------- */
.ig-explore-top{ position:sticky; top:0; z-index:5; background:#fff; padding:10px 16px 10px; }
.ig-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 16px 12px; scrollbar-width:none; }
.ig-chips::-webkit-scrollbar{ display:none; }
.ig-chip{ flex:0 0 auto; border:1px solid var(--ig-sep); background:#fff; color:#000; border-radius:8px; padding:7px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.ig-chip:active{ background:var(--ig-gray); }
.ig-explore-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:calc((min(100vw, 470px) - 4px) / 3); grid-auto-flow:dense; gap:2px; }
.ig-explore-grid .grid-tile{ aspect-ratio:auto; height:100%; }
.ig-explore-grid .grid-tile.tall{ grid-row:span 2; }
.ig-explore-people{ padding:4px 16px 0; }
.ig-explore-people .ig-section-h{ font-size:16px; font-weight:700; margin:8px 0 6px; }

/* ---------- Messages ---------- */
#view-chat{ padding:0 16px; }
.chat-toolbar{ margin:0 0 8px; padding-top:10px; }
.chat-toolbar > div:first-child{ gap:14px !important; margin-bottom:12px !important; }
#view-chat .section-label{ font-size:20px; font-weight:700; margin:0; }
.chat-search{ background:var(--ig-gray); border:none; border-radius:10px; height:38px; padding:0 14px; font-size:16px; margin-bottom:12px; }
.chat-filter-pills .pill{ padding:6px 14px; font-size:14px; border-radius:8px; }
.ig-chat-row, .chat-row{ border-bottom:none; padding:8px 0; min-height:72px; gap:12px; }
.ig-chat-row .avatar, .chat-row > .avatar{ width:56px !important; height:56px !important; font-size:16px; }
.chat-name{ font-size:14px; font-weight:400; line-height:18px; }
.ig-chat-sub{ display:flex; font-size:14px; line-height:18px; color:var(--ig-soft); min-width:0; }
.ig-chat-prev{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ig-chat-time{ white-space:nowrap; flex-shrink:0; }
.chat-row.unread .chat-name{ font-weight:600; }
.chat-row.unread .ig-chat-sub{ color:#000; font-weight:600; }
.ig-unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--ig-blue); flex-shrink:0; }
.ig-fav-mark{ color:var(--ig-soft); font-size:13px; }
.chat-side-req{ display:flex; gap:6px; }
.chat-side-req button{ padding:6px 12px; font-size:13px; }
.thread-view{ height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.thread-header.ig-th{ padding:8px 0; border-bottom:1px solid var(--ig-sep); gap:12px; margin:0 -16px; padding-left:12px; padding-right:12px; }
.thread-header .back-btn{ display:flex; padding:0; color:#000; }
.thread-header .back-btn svg{ width:24px; height:24px; }
.ig-th-who{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; cursor:pointer; }
.ig-th-who > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.ig-th-name{ font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-th-sub{ font-size:12px; color:var(--ig-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-msgs{ padding:12px 0; gap:3px; }
.bubble{ max-width:72%; padding:8px 13px; border-radius:20px; font-size:15px; line-height:20px; white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble.them{ background:var(--ig-gray); border:none; color:#000; border-bottom-left-radius:20px; }
.bubble.me{ background:#3797f0; color:#fff; border-bottom-right-radius:20px; }
.bubble.me.grp{ border-bottom-right-radius:6px; }
.bubble.them.grp{ border-bottom-left-radius:6px; }
.bubble + .bubble.me, .bubble + .bubble.them{ margin-top:0; }
.bubble.me + .bubble.them, .bubble.them + .bubble.me{ margin-top:8px; }
.ig-time-sep{ align-self:center; font-size:12px; color:var(--ig-soft); margin:12px 0 6px; font-weight:600; }
.ig-th-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 0; text-align:center; }
.ig-th-empty .avatar{ width:96px !important; height:96px !important; font-size:28px; }
.ig-th-empty-name{ font-size:20px; font-weight:700; }
.ig-th-empty-hint{ font-size:14px; color:var(--ig-soft); }
.ig-th-empty .ig-btn{ flex:0 0 auto; }
.thread-input{ padding:8px 0 calc(10px + env(safe-area-inset-bottom)); }
.ig-msg-bar{ flex:1; display:flex; align-items:center; gap:8px; border:1px solid var(--ig-sep); border-radius:24px; padding:3px 6px 3px 18px; background:#fff; }
.ig-msg-bar input{ flex:1; min-width:0; border:none !important; outline:none; font-size:15px; padding:9px 0 !important; background:transparent; }
.ig-send{ background:none !important; border:none; color:var(--ig-blue) !important; font-weight:600; font-size:15px; padding:6px 10px !important; cursor:pointer; width:auto !important; height:auto !important; border-radius:0 !important; }
.ig-send:disabled{ opacity:.35; cursor:default; }
.ig-req-bar{ border-top:1px solid var(--ig-sep); padding:12px 0 4px; text-align:center; font-size:14px; color:var(--ig-soft); }
.ig-req-btns{ display:flex; gap:8px; margin-top:10px; }

/* ---------- Notifications ---------- */
#notif-page .compose-body{ padding:4px 16px 24px; }
.ig-notif-h{ font-size:16px; font-weight:700; margin:16px 0 6px; }
.ig-notif{ display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer; }
.ig-notif .avatar{ width:44px !important; height:44px !important; }
.ig-notif-text{ flex:1; min-width:0; font-size:14px; line-height:18px; overflow-wrap:anywhere; }
.ig-notif-text b{ font-weight:600; }
.ig-notif-time{ color:var(--ig-soft); white-space:nowrap; }
.ig-notif-thumb{ width:44px; height:44px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.ig-notif-btn{ flex:0 0 auto; }

/* ---------- Search page, settings, side menu ---------- */
.search-bar{ background:var(--ig-gray); border:none; border-radius:10px; height:38px; font-size:16px; padding:0 14px; }
#search-page .compose-body, #settings-page .compose-body{ padding:8px 16px 24px; }
#settings-page .notif-row{ border-bottom:none; padding:12px 0; }
#settings-page .notif-icon{ background:none !important; color:#000; width:28px; height:28px; font-size:20px; }
#settings-page .notif-text{ font-size:15px; font-weight:400 !important; }
.notif-time{ color:var(--ig-soft); }
.side-menu{ padding:calc(18px + env(safe-area-inset-top)) 16px 24px; }
.side-menu-item{ border-bottom:none; font-size:15px; padding:13px 2px; }
.side-menu-subitem{ border-bottom:none; font-size:14px; padding:9px 2px 9px 42px; color:var(--ig-soft); }
.side-menu-profile{ border-bottom:1px solid #efefef; }
.side-menu-profile .nm{ font-weight:600; }

/* ---------- Composer ---------- */
.compose-post-btn{ background:none !important; color:var(--ig-blue) !important; padding:0 !important; font-size:16px !important; font-weight:600; border-radius:0 !important; }
.compose-post-btn:disabled{ opacity:.35; }
.compose-textarea{ font-size:16px; }
.compose-tools{ border-top:1px solid var(--ig-sep); }
.ig-add-photo{ display:inline-flex; align-items:center; gap:8px; color:var(--ig-blue); font-size:15px; font-weight:600; cursor:pointer; }
.ig-add-photo svg{ width:24px; height:24px; }
.compose-tags .pill{ padding:6px 14px; }
.compose-preview{ border-radius:4px; }

/* ---------- Log in / sign up ---------- */
.auth-page{ background:#fff; }
.auth-inner{ max-width:350px; padding:10px 40px 24px; }
@media (min-width:520px){ .auth-inner{ border:1px solid var(--ig-sep); padding:36px 40px 24px; } }
.auth-logo{ display:block; margin:6px 0 22px; }
.ig-auth-logo{ font-family:'Grand Hotel', cursive; font-size:56px; line-height:1.1; text-align:center; color:#000; }
.auth-tagline{ font-size:17px; font-weight:600; color:var(--ig-soft); line-height:20px; margin:-6px 0 18px; text-align:center; }
.auth-tabs{ display:none !important; }
.auth-input{ background:#fafafa; border:1px solid var(--ig-sep); border-radius:3px; padding:10px 9px; font-size:14px; margin-bottom:7px; height:auto; color:#000; }
.auth-input:focus{ border-color:#a8a8a8; }
.auth-submit{ background:var(--ig-blue); border-radius:8px; padding:8px; font-size:14px; font-weight:600; margin-top:10px; }
.auth-switch{ font-size:14px; color:#000; margin-top:22px; padding-top:20px; border-top:1px solid var(--ig-sep); }
.auth-switch a{ color:var(--ig-blue); text-decoration:none; font-weight:600; }
.weave-hint{ font-size:13px; }

/* ---------- Polish ---------- */
.reel-mute{ display:flex; align-items:center; justify-content:center; background:rgba(38,38,38,.75); }
.reel-mute svg{ width:16px; height:16px; }
.reel-side button svg{ width:26px; height:26px; }
.reel-side span{ font-size:12px; font-weight:600; }
.side-menu-item .ic{ display:inline-flex; align-items:center; justify-content:center; width:26px; color:#000; }
.side-menu-item .ic svg{ width:24px; height:24px; }
.side-menu-close{ color:#000; }
#network-connections .conn-card{ border:none; border-radius:0; padding:8px 0; margin:0; background:none; }
#network-connections .conn-card .avatar{ width:44px !important; height:44px !important; }

/* ---------- Motion ---------- */
@keyframes igFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes igFadeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes igViewIn{ from{ opacity:.35; } to{ opacity:1; } }
@keyframes igSheetUp{ from{ translate:0 100%; } to{ translate:0 0; } }
@keyframes igSheetDown{ from{ translate:0 0; } to{ translate:0 100%; } }
@keyframes igDialogIn{ from{ opacity:0; scale:.94; } to{ opacity:1; scale:1; } }
@keyframes igDialogOut{ from{ opacity:1; scale:1; } to{ opacity:0; scale:.96; } }
@keyframes igPageIn{ from{ translate:100% 0; } to{ translate:0 0; } }
@keyframes igPageOut{ from{ translate:0 0; } to{ translate:100% 0; } }
@keyframes igMenuIn{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
@keyframes igZoomIn{ from{ opacity:0; scale:.9; } to{ opacity:1; scale:1; } }
@keyframes igBubbleIn{ from{ opacity:0; translate:0 10px; scale:.96; } to{ opacity:1; translate:0 0; scale:1; } }
@keyframes igTabPop{ 0%{ scale:1; } 40%{ scale:.8; } 100%{ scale:1; } }
@keyframes igShimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@keyframes igSplashLogo{ 0%{ opacity:0; scale:.85; } 60%{ opacity:1; scale:1.04; } 100%{ opacity:1; scale:1; } }

.view.active{ animation:igViewIn .22s ease; }
.modal-overlay.active{ animation:igFadeIn .2s ease; }
.modal-overlay.active .modal-box{ animation:igSheetUp .3s cubic-bezier(.2,.9,.25,1); }
.modal-overlay.ig-leaving{ display:flex; pointer-events:none; animation:igFadeOut .2s ease forwards; }
.modal-overlay.ig-leaving .modal-box{ animation:igSheetDown .2s ease-in forwards; }
@media (min-width:520px){
  .modal-overlay.active .modal-box{ animation:igDialogIn .2s ease; }
  .modal-overlay.ig-leaving .modal-box{ animation:igDialogOut .16s ease forwards; }
}
.full-page.active{ animation:igPageIn .3s cubic-bezier(.2,.9,.25,1); }
.full-page.ig-leaving{ display:flex; pointer-events:none; animation:igPageOut .24s ease-in forwards; }
.compose-page.active{ animation:igSheetUp .32s cubic-bezier(.2,.9,.25,1); }
.compose-page.ig-leaving{ display:flex; pointer-events:none; animation:igSheetDown .24s ease-in forwards; }
.side-menu-overlay.active{ animation:igFadeIn .2s ease; }
.side-menu-overlay.active .side-menu{ animation:igMenuIn .26s cubic-bezier(.2,.9,.25,1); }
.side-menu-overlay.ig-leaving{ display:block; pointer-events:none; animation:igFadeOut .22s ease forwards; }
.side-menu-overlay.ig-leaving .side-menu{ transform:translateX(-100%); }
.ig-sv.active{ animation:igFadeIn .2s ease; }
.ig-sv.active .ig-sv-frame{ animation:igZoomIn .26s cubic-bezier(.2,.9,.25,1); }
.ig-sv.ig-leaving{ display:flex; pointer-events:none; animation:igFadeOut .2s ease forwards; }
.ig-sv-img{ animation:igFadeIn .25s ease; }
.thread-view.active{ animation:igPageIn .28s cubic-bezier(.2,.9,.25,1); }
.bubble.ig-new{ animation:igBubbleIn .26s cubic-bezier(.2,.9,.25,1); }
.ig-tabbar .navitem.active .ig-fill, .ig-tabbar .navitem.active .ig-nav-avatar{ animation:igTabPop .3s ease; }
header.topbar.ig-topbar{ transition:transform .25s ease; }
body.ig-top-hidden header.topbar.ig-topbar{ transform:translateY(-100%); }

/* Buttons give a little when pressed; colours change smoothly. */
.ig-btn, .btn-solid, .btn-outline, .pill, .ig-chip, .ig-share-person, .ig-story{ transition:background-color .18s ease, color .18s ease, scale .12s ease, opacity .12s ease; }
.ig-btn:active, .btn-solid:active, .btn-outline:active, .pill:active, .ig-chip:active{ scale:.97; }
.ig-story:active, .ig-share-person:active{ scale:.95; }
.ig-tabbar .navitem:active svg{ scale:.88; transition:scale .1s ease; }

/* Photos fade in when loaded. */
.ig-media img, .grid-tile img{ transition:opacity .35s ease; }
.ig-media img:not(.ig-loaded), .grid-tile img:not(.ig-loaded){ opacity:0; }

/* Messages at the bottom slide up. */
.weave-toast{ opacity:0; transform:translate(-50%, 14px); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.25,1); }
.weave-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* Loading placeholders. */
.ig-skel{ display:block; background:linear-gradient(90deg, #efefef 30%, #f8f8f8 50%, #efefef 70%); background-size:300% 100%; animation:igShimmer 1.2s ease-in-out infinite; border-radius:6px; }
.ig-skel-post{ margin-bottom:14px; }
.ig-skel-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
.ig-skel-circle{ width:32px; height:32px; border-radius:50%; flex-shrink:0; }
.ig-skel-line{ height:12px; }
.ig-skel-media{ width:100%; aspect-ratio:1; border-radius:0; }
.ig-skel-row{ display:flex; align-items:center; gap:12px; padding:8px 0; }
.ig-skel-lines{ flex:1; display:flex; flex-direction:column; gap:8px; }
.ig-skel-tile{ aspect-ratio:1; border-radius:0; }
.ig-explore-grid .ig-skel-tile{ aspect-ratio:auto; height:100%; }

/* Launch screen. */
#ig-splash{ position:fixed; inset:0; z-index:10000; background:#fff; display:flex; align-items:center; justify-content:center; transition:opacity .4s ease; }
#ig-splash.out{ opacity:0; pointer-events:none; }
.ig-splash-logo{ font-family:'Grand Hotel', cursive; font-size:64px; color:#000; animation:igSplashLogo .7s cubic-bezier(.2,.9,.25,1) both; }
/* Loading: three black dots that bounce in turn (white in Dark mode). */
.ig-splash-dots{ position:absolute; bottom:calc(56px + env(safe-area-inset-bottom)); display:flex; gap:8px; }
.ig-splash-dots i{ width:9px; height:9px; border-radius:50%; background:#000; animation:igSplashDot 1s ease-in-out infinite; }
.ig-splash-dots i:nth-child(2){ animation-delay:.16s; } .ig-splash-dots i:nth-child(3){ animation-delay:.32s; }
html.theme-dark .ig-splash-dots i{ background:#fff; }
@keyframes igSplashDot{ 0%, 80%, 100%{ opacity:.25; transform:translateY(0) scale(.85); } 40%{ opacity:1; transform:translateY(-7px) scale(1); } }

/* People who prefer less motion get none. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
}

/* ---------- Bottom bar: wide floating pill with seven icons ---------- */
.floating-nav.weave-pill-nav{ width:calc(100% - 24px); max-width:446px; justify-content:space-around; gap:0; padding:8px 6px; border-radius:40px;
  background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.04); }
.weave-pill-nav .pill-item{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; height:42px; background:none; border:none;
  padding:0; margin:0; cursor:pointer; color:#000; font-size:0; }
.weave-pill-nav .pill-item.navitem.active::after{ display:none; }
.weave-pill-nav .pill-ic{ position:relative; display:inline-flex; }
.weave-pill-nav .pill-ic svg{ width:26px; height:26px; display:block; }
.weave-pill-nav .ig-fill{ display:none; }
.weave-pill-nav .navitem.active .ig-out{ display:none; }
.weave-pill-nav .navitem.active .ig-fill{ display:inline-flex; }
.weave-pill-nav .navitem.active .ig-fill svg{ animation:igTabPop .3s ease; }
.weave-pill-nav .pill-item:active .pill-ic, .weave-pill-nav .pill-item:active .ig-nav-avatar{ scale:.88; }
.weave-pill-nav .ig-badge{ top:-7px; right:-10px; min-width:18px; height:18px; padding:0 5px; font-size:11px; box-shadow:0 0 0 2px #fff; }
.weave-pill-nav .notif-dot{ top:-1px; right:-2px; width:9px; height:9px; background:var(--ig-red); border:1.5px solid #fff; }
.weave-pill-nav .ig-nav-avatar{ width:28px; height:28px; border-radius:50%; display:block; position:relative; }
.weave-pill-nav .ig-nav-avatar .avatar{ width:28px !important; height:28px !important; font-size:10px; }
.weave-pill-nav .navitem.active .ig-nav-avatar{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #000; animation:igTabPop .3s ease; }
.fab-plus{ background:#000; }
@media (min-width:520px){ .fab-plus{ right:calc(50vw - 235px + 20px); } }

/* ---------- Verified ticks ---------- */
.ig-tick{ display:inline-block; vertical-align:-2px; margin-left:4px; flex-shrink:0; }
.ig-head-line .ig-tick{ margin-left:2px; }
.ig-prof-title .ig-tick, .wa-you-name .ig-tick, .ig-th-empty-name .ig-tick{ width:18px; height:18px; vertical-align:-3px; }
#ig-person-title .ig-tick{ width:16px; height:16px; vertical-align:-2px; }

/* ---------- Main bar: chats badge in WhatsApp green ---------- */
.weave-pill-nav .ig-badge{ background:#1daa61; }

/* ---------- Messages area: WhatsApp-style bottom bar ---------- */
body.wa-mode #floating-nav, body.wa-mode .fab-plus{ display:none !important; }
.wa-nav{ display:none; position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:calc(100% - 24px); max-width:446px;
  z-index:50; padding:5px; border-radius:36px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); justify-content:space-between; gap:2px; }
body.wa-mode .wa-nav{ display:flex; animation:igFadeIn .25s ease; }
body.wa-mode.thread-open .wa-nav{ display:none; }
.wa-tab{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 0 6px; border:none; background:none;
  border-radius:30px; cursor:pointer; color:#000; transition:background-color .2s ease; }
.wa-tab.active{ background:rgba(0,0,0,.08); }
.wa-tab:active{ background:rgba(0,0,0,.12); }
.wa-ic{ position:relative; display:inline-flex; }
.wa-ic svg{ width:24px; height:24px; display:block; }
.wa-tab.active .wa-ic svg{ stroke-width:2.3; }
.wa-lb{ font-size:10.5px; font-weight:500; line-height:13px; letter-spacing:-.2px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-tab.active .wa-lb{ font-weight:700; }
.wa-badge{ position:absolute; top:-7px; left:13px; min-width:20px; height:18px; padding:0 5px; border-radius:9px; background:#1daa61; color:#fff; font-size:11px; font-weight:700;
  display:none; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.wa-badge.show{ display:inline-flex; }
.wa-you-av{ width:26px; height:26px; border-radius:50%; display:block; }
.wa-you-av .avatar{ width:26px !important; height:26px !important; font-size:9px; }
.wa-tab.active .wa-you-av{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #000; }

/* ---------- Messages area: screens ---------- */
#view-updates, #view-calls, #view-communities, #view-you{ padding:0 16px 24px; }
.wa-top{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 0; min-height:40px; }
.wa-title{ font-size:30px; font-weight:800; letter-spacing:-.02em; margin:2px 0 14px; }
.chat-toolbar .section-label{ font-size:24px !important; font-weight:800 !important; }
.wa-sec-h{ display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:700; margin:20px 0 6px; }
.wa-sub-h{ font-size:14px; font-weight:600; color:#667781; margin:16px 0 4px; }
.wa-intro{ font-size:14px; color:#667781; margin:-6px 0 12px; line-height:19px; }
.wa-row{ display:flex; align-items:center; gap:12px; padding:9px 0; cursor:pointer; }
.wa-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wa-row-main b{ font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-row-main span{ font-size:13.5px; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.wa-out svg{ width:13px; height:13px; color:#1daa61; stroke-width:2.6; }
.wa-av{ width:48px; height:48px; border-radius:50%; background:#dfe5e7; color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0; }
.wa-av-cal{ background:#e7f8ee; color:#1daa61; }
.wa-av-cal svg{ width:24px; height:24px; }
.wa-round{ width:40px; height:40px; border-radius:50%; border:none; background:none; color:#000; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.wa-round svg{ width:22px; height:22px; }
.wa-round.green{ color:#1daa61; }
.wa-chev{ color:#a0a5a8; display:inline-flex; margin-left:auto; }
.wa-chev svg{ width:18px; height:18px; }
.wa-empty{ text-align:center; padding:26px 12px 10px; }
.wa-empty-icon{ width:64px; height:64px; border-radius:50%; background:#f2f2f0; display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; color:#3b3b3b; }
.wa-empty-icon svg{ width:28px; height:28px; }
.wa-acts{ display:flex; gap:14px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.wa-acts::-webkit-scrollbar{ display:none; }
.wa-act{ flex:0 0 auto; width:68px; display:flex; flex-direction:column; align-items:center; gap:7px; border:none; background:none; padding:0; cursor:pointer; color:#000; }
.wa-act-circle{ width:62px; height:62px; border-radius:50%; background:#f2f2f0; display:flex; align-items:center; justify-content:center; color:#000; transition:background-color .15s ease, scale .12s ease; }
.wa-act:active .wa-act-circle{ background:#e2e2df; scale:.95; }
.wa-act-circle svg{ width:24px; height:24px; }
.wa-act-person{ color:#fff; font-size:20px; font-weight:700; }
.wa-act-label{ font-size:12.5px; max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-st-me{ position:relative; display:inline-flex; flex-shrink:0; }
.wa-st-me .ig-story-add{ right:-2px; bottom:-2px; width:21px; height:21px; font-size:16px; background:#1daa61; }
.wa-tip{ display:flex; align-items:center; gap:10px; background:#f2f2f0; border-radius:14px; padding:12px 14px; font-size:14px; cursor:pointer; margin-bottom:8px; }
.wa-tip svg{ width:24px; height:24px; flex-shrink:0; color:#1daa61; }
.wa-comm-tile{ width:52px; height:52px; border-radius:14px; background:#e7f8ee; color:#1daa61; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-comm-tile svg{ width:26px; height:26px; }
.wa-comm-sub{ text-align:center; font-size:13px; color:#667781; margin:-8px 0 10px; }
.wa-you-tag{ font-size:13px; font-weight:600; color:#667781; }
.wa-you{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 0 18px; text-align:center; }
.wa-you-photo{ cursor:pointer; }
.wa-you .avatar{ width:96px !important; height:96px !important; font-size:30px; }
.wa-you-name{ font-size:22px; font-weight:700; }
.wa-you-about{ font-size:14px; color:#667781; white-space:pre-wrap; overflow-wrap:anywhere; max-width:320px; }
.wa-list{ background:#f7f7f5; border-radius:14px; overflow:hidden; margin-bottom:14px; }
.wa-li{ display:flex; align-items:center; gap:14px; padding:13px 14px; cursor:pointer; border-bottom:1px solid #ececea; font-size:16px; }
.wa-li:last-child{ border-bottom:none; }
.wa-li:active{ background:#efefec; }
.wa-li > svg{ width:22px; height:22px; flex-shrink:0; }
.wa-new-keypad{ display:flex; align-items:center; gap:12px; width:100%; border:none; background:#f2f2f0; border-radius:14px; padding:12px 14px; font-size:15px; font-weight:600; cursor:pointer; color:#000; }
.wa-new-keypad svg{ width:24px; height:24px; }
.wa-form label{ font-family:var(--ig-font) !important; font-size:13px; color:#667781; }
.wa-form .job-actions .btn-solid{ background:#1daa61; width:100%; padding:10px; font-size:15px; }

/* ---------- Keypad ---------- */
.wa-dial-num{ text-align:center; font-size:34px; font-weight:300; letter-spacing:1px; min-height:46px; margin:2px 0 0; overflow-wrap:anywhere; }
.wa-dial-name{ text-align:center; font-size:14px; color:#667781; min-height:18px; margin-bottom:12px; }
.wa-keys{ display:grid; grid-template-columns:repeat(3, 74px); justify-content:center; gap:14px 26px; }
.wa-key{ width:74px; height:74px; border-radius:50%; border:none; background:#f2f2f0; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
  user-select:none; -webkit-user-select:none; touch-action:manipulation; color:#000; transition:background-color .12s ease; }
.wa-key b{ font-size:30px; font-weight:400; line-height:32px; }
.wa-key span{ font-size:10px; font-weight:700; letter-spacing:1.5px; color:#3b3b3b; min-height:12px; }
.wa-key:active{ background:#dcdcd9; }
.wa-dial-actions{ display:grid; grid-template-columns:repeat(3, 74px); justify-content:center; justify-items:center; align-items:center; gap:0 26px; margin-top:16px; }
.wa-dial-call{ width:74px; height:74px; border-radius:50%; border:none; background:#1daa61; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wa-dial-call svg{ width:32px; height:32px; }
.wa-dial-call:active{ scale:.94; }
.wa-dial-side{ width:56px; height:56px; border:none; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#3b3b3b; border-radius:50%; }
.wa-dial-side svg{ width:26px; height:26px; }

/* ---------- Internet calls ---------- */
.ig-th-calls{ display:inline-flex; align-items:center; gap:18px; margin-right:14px; }
.wa-act-photo{ width:62px; height:62px; border-radius:50%; overflow:hidden; display:inline-flex; }
.wa-act-photo .avatar{ width:62px !important; height:62px !important; font-size:20px; }
.wa-fav-star{ color:#c4c4c4; display:inline-flex; }
.wa-fav-star svg{ width:24px; height:24px; }
.wa-fav-star.on{ color:#f5b301; }
.wa-fav-star.on svg{ fill:#f5b301; }
.wa-missed{ color:#ea0038; }
.wa-call-line svg{ width:14px; height:14px; color:#1daa61; stroke-width:2.6; flex-shrink:0; }
.wa-call-line.missed svg{ color:#ea0038; }
.wa-check{ display:flex !important; align-items:center; gap:8px; font-size:14px !important; color:#000 !important; margin:14px 0 2px !important; cursor:pointer; }
.wa-check input{ width:18px !important; height:18px; margin:0; accent-color:#1daa61; }
.call-screen{ position:fixed; inset:0; z-index:9000; background:#0b141a; color:#fff; display:none; flex-direction:column; align-items:center; justify-content:space-between; overflow:hidden; }
.call-screen.active{ display:flex; animation:igFadeIn .25s ease; }
.call-remote{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0b141a; display:none; }
.call-screen.is-video.has-remote .call-remote{ display:block; }
.call-local{ position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; width:30vw; max-width:150px; aspect-ratio:3/4; object-fit:cover; border-radius:14px;
  background:#1f2c34; display:none; transform:scaleX(-1); box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:3; }
.call-screen.is-video .call-local{ display:block; }
.call-info{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:calc(64px + env(safe-area-inset-top)); padding:0 24px; text-align:center; }
.call-enc{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,.65); margin-bottom:18px; }
.call-enc svg{ width:13px; height:13px; }
.call-photo .avatar{ width:112px !important; height:112px !important; font-size:36px; }
.call-screen.ringing .call-photo{ animation:callPulse 1.6s ease-in-out infinite; border-radius:50%; }
@keyframes callPulse{ 0%{ box-shadow:0 0 0 0 rgba(29,170,97,.55); } 70%{ box-shadow:0 0 0 22px rgba(29,170,97,0); } 100%{ box-shadow:0 0 0 0 rgba(29,170,97,0); } }
.call-name{ font-size:26px; font-weight:600; }
.call-status{ font-size:15px; color:rgba(255,255,255,.8); min-height:20px; font-variant-numeric:tabular-nums; }
.call-screen.is-video.has-remote .call-info{ margin-top:calc(20px + env(safe-area-inset-top)); align-self:flex-start; align-items:flex-start; text-align:left; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.call-screen.is-video.has-remote .call-photo, .call-screen.is-video.has-remote .call-enc{ display:none; }
.call-screen.is-video.has-remote .call-name{ font-size:18px; }
.call-controls{ position:relative; z-index:2; display:flex; gap:20px; justify-content:center; padding:20px 16px calc(34px + env(safe-area-inset-bottom)); }
.call-btn{ display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; color:#fff; cursor:pointer; padding:0; font-size:12px; }
.call-btn svg{ width:62px; height:62px; padding:17px; border-radius:50%; background:rgba(255,255,255,.16); box-sizing:border-box; transition:background-color .15s ease, scale .12s ease; }
.call-btn:active svg{ scale:.93; }
.call-btn.on svg{ background:#fff; color:#0b141a; }
.call-btn.end svg, .call-btn.decline svg{ background:#ea0038; }
.call-btn.accept svg{ background:#1daa61; animation:callPulse 1.6s ease-in-out infinite; }

/* ---------- Swiping between sections ---------- */
main{ touch-action:pan-y; overflow-x:clip; }
body{ overflow-x:clip; }
@keyframes igSwipeFromRight{ from{ translate:100% 0; } to{ translate:0 0; } }
@keyframes igSwipeFromLeft{ from{ translate:-100% 0; } to{ translate:0 0; } }
.view.ig-swipe-from-right{ animation:igSwipeFromRight .3s cubic-bezier(.2,.9,.25,1) !important; }
.view.ig-swipe-from-left{ animation:igSwipeFromLeft .3s cubic-bezier(.2,.9,.25,1) !important; }

/* ---------- Chats like WhatsApp ---------- */
.thread-view.active{ background:#fff; }
.thread-header.ig-th{ background:#fff; }
.thread-msgs{ padding:12px 4px; gap:2px; }
.bubble{ max-width:78%; padding:6px 8px 6px 9px; border-radius:8px; font-size:15px; line-height:20px; display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:8px;
  box-shadow:none; }
.bubble.them{ background:#f0f2f5; color:#111b21; }
.bubble.me{ background:#d9fdd3; color:#111b21; }
.bubble.me.grp, .bubble.them.grp{ border-radius:8px; }
.thread-msgs > .bubble.me:first-child, .ig-time-sep + .bubble.me, .bubble.them + .bubble.me{ border-top-right-radius:0; }
.thread-msgs > .bubble.them:first-child, .ig-time-sep + .bubble.them, .bubble.me + .bubble.them{ border-top-left-radius:0; }
.bubble.me + .bubble.them, .bubble.them + .bubble.me{ margin-top:8px; }
.ig-btext{ white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.ig-bmeta{ margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-size:11px; line-height:15px; color:#667781; white-space:nowrap; position:relative; top:3px; }
.ig-time-sep{ background:#f0f2f5; color:#54656f; font-size:12px; font-weight:500; padding:5px 12px; border-radius:8px; margin:10px 0 8px; }
.ig-tk{ display:inline-flex; align-items:center; color:#8696a0; margin-right:2px; vertical-align:-1px; }
.ig-tk.read{ color:#53bdeb; }
.ig-tk.failed{ color:#ea0038; font-weight:800; font-size:12px; }
.ig-bmeta .ig-tk{ margin-right:0; }
.bubble.has-media{ padding:3px 3px 4px; flex-direction:column; align-items:stretch; }
.bubble.has-media .ig-btext{ padding:5px 6px 0; }
.bubble.has-media .ig-bmeta{ padding:2px 5px 0; top:0; }
.ig-bphoto{ display:block; width:260px; max-width:100%; max-height:340px; object-fit:cover; border-radius:6px; cursor:zoom-in; background:#e9edef; }
.ig-voice{ display:flex; align-items:center; gap:10px; width:230px; max-width:100%; padding:4px 6px 0 2px; }
.ig-vplay{ width:34px; height:34px; border:none; background:none; color:#54656f; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0; }
.ig-vbar{ flex:1; height:4px; border-radius:2px; background:#cfd8dc; overflow:hidden; }
.ig-vbar i{ display:block; height:100%; width:0; background:#1daa61; border-radius:2px; transition:width .2s linear; }
.ig-voice.playing .ig-vbar i{ background:#53bdeb; }
.ig-vtime{ font-size:11.5px; color:#667781; min-width:30px; text-align:right; font-variant-numeric:tabular-nums; }
.thread-input{ display:flex; align-items:center; gap:8px; padding:8px 0 calc(10px + env(safe-area-inset-bottom)); }
.ig-msg-bar{ gap:10px; padding:3px 14px 3px 12px; border:none; background:#f0f2f5; box-shadow:none; }
.ig-attach, .thread-input .ig-attach{ width:28px; height:28px; border-radius:0; background:none; border:none; padding:0; color:#54656f; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:0; }
.ig-attach svg{ width:24px; height:24px; }
.ig-round-send, .thread-input .ig-round-send{ width:46px; height:46px; border-radius:50%; border:none; background:#1daa61; color:#fff; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; flex-shrink:0; padding:0; font-size:0; transition:scale .12s ease, background-color .15s ease; }
.ig-round-send:active{ scale:.92; }
.ig-round-send svg{ width:22px; height:22px; }
#ig-composer .ig-sendbtn{ display:none; }
#ig-composer.has-text .ig-sendbtn, .ig-sendbtn.show{ display:inline-flex !important; }
#ig-composer.has-text .ig-mic{ display:none; }
.ig-rec-del, .thread-input .ig-rec-del{ background:#f0f2f5; color:#54656f; }
.ig-rec-bar{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:46px; padding:0 16px; border-radius:24px; background:#f0f2f5; font-size:15px;
  font-variant-numeric:tabular-nums; }
.ig-rec-dot{ width:10px; height:10px; border-radius:50%; background:#ea0038; flex-shrink:0; animation:igRecBlink 1s ease-in-out infinite; }
@keyframes igRecBlink{ 50%{ opacity:.25; } }
.ig-rec-hint{ margin-left:auto; color:#667781; font-size:13px; }
.ig-th-sub.typing{ color:#1daa61; font-weight:600; }
.ig-send-photo{ display:block; width:100%; max-height:58vh; object-fit:contain; border-radius:10px; background:#f0f2f5; margin-bottom:6px; }
.ig-photo-view{ position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; cursor:zoom-out; }
.ig-photo-view.active{ display:flex; animation:igFadeIn .2s ease; }
.ig-photo-view img{ max-width:96vw; max-height:90vh; object-fit:contain; }
.ig-pv-close{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.14);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ig-pv-close svg{ width:20px; height:20px; }
.wa-unread{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#1daa61; color:#fff; font-size:12px; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.chat-row.unread .ig-chat-time{ color:#1daa61; }

/* ---------- Phone notifications ---------- */
.ig-notif-card{ display:flex; align-items:center; gap:12px; margin:6px 12px 12px; padding:12px 10px 12px 14px; border-radius:14px; background:#f3f6fb; animation:igFadeIn .3s ease; }
.ig-nc-ic{ display:inline-flex; color:#ff3040; flex-shrink:0; }
.ig-nc-ic svg{ width:26px; height:26px; }
.ig-nc-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:17px; color:#555; }
.ig-nc-main b{ font-size:14px; color:#000; }
.ig-notif-card .btn-solid{ white-space:nowrap; padding:7px 12px; font-size:13px; flex-shrink:0; }
.ig-nc-x{ background:none; border:none; padding:4px; color:#737373; cursor:pointer; display:inline-flex; flex-shrink:0; }
.ig-nc-x svg{ width:16px; height:16px; }
.ig-ios-steps{ font-size:14px; line-height:20px; padding:0 4px 6px; }
.ig-ios-steps ol{ padding-left:20px; margin:10px 0; }
.ig-ios-steps li{ margin:6px 0; }

/* ---------- Owner panel ---------- */
.ig-admin-page .compose-body{ padding:12px 16px 32px; overflow-y:auto; }
.ig-adm-tabs{ display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid #efefef; flex-shrink:0; }
.ig-adm-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ig-adm-tile{ background:#f7f7f5; border-radius:14px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.ig-adm-tile b{ font-size:24px; font-weight:800; line-height:28px; }
.ig-adm-tile span{ font-size:12px; color:#667781; }
.ig-adm-tile.alert{ background:#fff0f1; }
.ig-adm-tile.alert b{ color:#ea0038; }
.ig-adm-card{ border:1px solid #efefef; border-radius:14px; padding:12px; margin-bottom:10px; }
.ig-adm-who{ display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; }
.ig-adm-who > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ig-adm-who b{ font-size:15px; font-weight:600; }
.ig-adm-who > div > span{ font-size:12.5px; color:#737373; overflow-wrap:anywhere; }
.ig-adm-media{ display:block; width:100%; max-height:320px; object-fit:cover; border-radius:10px; margin-top:10px; }
.ig-adm-text{ font-size:14px; line-height:19px; margin-top:8px; white-space:pre-wrap; overflow-wrap:anywhere; }
.ig-adm-why{ font-size:13px; color:#ea0038; font-weight:600; margin-top:8px; }
.ig-adm-actions{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ig-btn.danger{ background:#ffe9ec; color:#ea0038; }
.ig-btn.danger:hover{ background:#ffd6dc; }
.ig-adm-label{ font-size:13px; color:#737373; }
.ig-tickbtn{ border:1px solid #dbdbdb; background:#fff; color:#000; border-radius:16px; padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.ig-tickbtn.on.blue{ background:#0095f6; border-color:#0095f6; color:#fff; }
.ig-tickbtn.on.gold{ background:#f5b301; border-color:#f5b301; color:#000; }
.ig-tickbtn.on.none{ background:#000; border-color:#000; color:#fff; }
.ig-adm-actions .ig-adm-del{ flex:0 0 auto; margin-left:auto; }
.ig-adm-owner{ font-size:11px; font-weight:700; color:#1daa61; background:#e7f8ee; padding:2px 6px; border-radius:6px; margin-left:4px; vertical-align:1px; }
.ig-adm-flag{ color:#ea0038; }
#ig-adm-body .ig-search-box{ margin-bottom:12px; }

/* =========================================================
   Computer screens (1024 px and wider). Phones keep everything above unchanged.
   ========================================================= */
.dk-side, .dk-right, .dk-chat-empty, .wa-home, .dk-st-btn{ display:none; }

@media (min-width:1024px){
  :root{ --dk-side:72px; }
  body.wa-mode{ --dk-side:80px; }
  body{ display:block; }
  #app{ width:auto; max-width:none; margin-left:var(--dk-side); min-height:100vh; padding-bottom:0 !important; border:none !important; }
  header.topbar.ig-topbar, #floating-nav, .fab-plus{ display:none !important; }
  main, body:not(.ig-on-feed) main{ padding:0 !important; }

  /* Left sidebar */
  .dk-side{ display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; width:var(--dk-side); padding:8px 12px 20px; background:#fff;
    border-right:1px solid #dbdbdb; z-index:60; }
  body.wa-mode .dk-side{ display:none; }
  .dk-logo{ display:flex; align-items:center; justify-content:center; height:76px; padding:0 0 6px; cursor:pointer; color:#000; flex-shrink:0; }
  .dk-logo .dk-logo-word{ display:none; font-size:30px; padding-top:6px; }
  .dk-logo .dk-logo-mark{ display:block; width:28px; height:28px; border-radius:7px; }
  .dk-item:focus, .wa-tab:focus, .wa-home:focus{ outline:none; }
  .dk-item:focus-visible, .wa-tab:focus-visible, .wa-home:focus-visible{ outline:2px solid #0095f6; outline-offset:-2px; }
  .dk-items{ display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; }
  .dk-item{ display:flex; align-items:center; justify-content:center; gap:16px; width:100%; padding:12px; border:none; border-radius:8px; background:none; color:#000;
    font-size:16px; line-height:20px; text-align:left; cursor:pointer; transition:background-color .15s ease; }
  .dk-item:hover{ background:rgba(0,0,0,.05); }
  .dk-item:active{ background:rgba(0,0,0,.09); }
  .dk-ic{ position:relative; display:inline-flex; flex-shrink:0; transition:scale .15s ease; }
  .dk-item:hover .dk-ic{ scale:1.06; }
  .dk-ic svg{ width:24px; height:24px; display:block; }
  .dk-item .ig-fill{ display:none; }
  .dk-item.active .ig-out{ display:none; }
  .dk-item.active .ig-fill{ display:inline-flex; }
  .dk-item.active .dk-lb{ font-weight:700; }
  .dk-lb{ display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-ic .ig-badge{ top:-7px; right:-10px; background:#1daa61; }
  .dk-ic .notif-dot{ position:absolute; top:-2px; right:-3px; width:9px; height:9px; border-radius:50%; background:#ff3040; border:1.5px solid #fff; }
  .dk-ic .ig-nav-avatar{ width:24px; height:24px; border-radius:50%; display:block; }
  .dk-ic .ig-nav-avatar .avatar{ width:24px !important; height:24px !important; font-size:9px; }
  .dk-item.active .ig-nav-avatar{ box-shadow:0 0 0 1.5px #fff, 0 0 0 3px #000; }
  body.ig-dark .dk-side{ background:#000; border-right-color:#262626; }
  body.ig-dark .dk-logo, body.ig-dark .dk-item, body.ig-dark .dk-logo .ig-logo{ color:#fff; }
  body.ig-dark .dk-logo-mark{ filter:invert(1); }
  body.ig-dark .dk-item .ig-fill svg [stroke="#fff"]{ stroke:#000; }
  body.ig-dark .dk-item:hover{ background:rgba(255,255,255,.1); }
  body.ig-dark .dk-ic .notif-dot{ border-color:#000; }
  body.ig-dark .dk-item.active .ig-nav-avatar{ box-shadow:0 0 0 1.5px #000, 0 0 0 3px #fff; }

  /* Page column */
  .view{ max-width:678px; margin:0 auto; padding:24px 24px 48px; }
  .ig-sub-top{ margin:0 0 12px; padding:6px 0 10px; }

  /* Home */
  #view-feed{ position:relative; max-width:678px; padding:24px 24px 48px; }
  .dk-stories{ position:relative; }
  #view-feed .ig-stories{ border-bottom:none; padding:8px 4px 18px; }
  .dk-st-btn{ display:flex; position:absolute; top:31px; z-index:3; width:28px; height:28px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.96);
    color:#000; box-shadow:0 1px 6px rgba(0,0,0,.28); align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .15s ease; }
  .dk-st-btn svg{ width:16px; height:16px; }
  .dk-st-btn.prev{ left:-4px; }
  .dk-st-btn.next{ right:-4px; }
  .dk-st-btn.next svg{ transform:scaleX(-1); }
  .dk-stories.can-prev .dk-st-btn.prev, .dk-stories.can-next .dk-st-btn.next{ opacity:1; pointer-events:auto; }
  #feed-list{ max-width:470px; margin:0 auto; }
  #feed-list .post.ig-post{ margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid #dbdbdb; }
  #feed-list .ig-post-head{ padding:4px 0 12px 2px; }
  #feed-list .ig-media{ border-radius:4px; box-shadow:0 0 0 1px #efefef; }
  #feed-list .ig-actions{ padding:6px 0 2px; margin:0 -8px; }
  #feed-list .ig-likes, #feed-list .ig-caption, #feed-list .ig-view-comments{ padding-left:0; padding-right:0; }
  #feed-list .ig-text-post{ padding:0 0 6px; }
  #view-feed .ig-notif-card{ max-width:470px; margin:0 auto 18px; }
  #view-feed > .dk-right{ display:none; }
  .dk-me, .dk-sugg{ display:flex; align-items:center; gap:12px; padding:0 4px; }
  .dk-sugg{ padding:8px 4px; }
  .dk-me-av, .dk-sugg-av{ display:inline-flex; cursor:pointer; flex-shrink:0; }
  .dk-me-av .avatar, .dk-sugg-av .avatar{ width:44px !important; height:44px !important; font-size:15px; }
  .dk-me-main, .dk-sugg-main{ flex:1; min-width:0; display:flex; flex-direction:column; cursor:pointer; }
  .dk-me-main b, .dk-sugg-main b{ font-size:14px; font-weight:600; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-me-main > span, .dk-sugg-main > span{ font-size:14px; line-height:18px; color:#737373; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-sugg-main > span{ font-size:12px; line-height:16px; }
  .dk-right .ig-link-btn{ font-size:12px; flex-shrink:0; }
  .dk-sugg-h{ display:flex; align-items:center; justify-content:space-between; margin:24px 4px 8px; font-size:14px; font-weight:600; color:#737373; }
  .dk-sugg-h .ig-inline-btn{ font-size:12px; }
  .dk-foot{ margin:30px 4px 0; font-size:12px; color:#c7c7c7; text-transform:uppercase; letter-spacing:.3px; }

  /* Explore */
  #view-explore{ max-width:983px; padding:24px 24px 48px; }
  .ig-explore-top{ position:static; padding:0 0 12px; max-width:470px; }
  .ig-chips{ padding:0 0 16px; flex-wrap:wrap; overflow:visible; }
  #explore-body{ container-type:inline-size; }
  .ig-explore-grid{ grid-auto-rows:calc((100cqw - 8px) / 3); gap:4px; }
  .ig-explore-people{ padding:20px 0 0; max-width:470px; }

  /* Profiles: big photo on the left, details on the right */
  #view-profile{ max-width:983px; padding:30px 24px 48px; }
  #profile-hero, #ig-person-body{ display:grid; grid-template-columns:minmax(120px, 290px) minmax(0, 1fr); column-gap:24px; align-items:start; align-content:start; }
  #profile-hero .ig-prof-head, #ig-person-body .ig-prof-head{ display:contents; }
  #profile-hero .ig-prof-avatar, #ig-person-body .ig-prof-avatar{ grid-column:1; grid-row:1 / span 3; justify-self:center; }
  .ig-prof-avatar .avatar{ width:150px !important; height:150px !important; font-size:46px; }
  #profile-hero > .ig-prof-top{ grid-column:2; position:static; margin:0; padding:2px 0 16px; gap:16px; background:none; }
  #profile-hero .ig-prof-title{ flex:0 1 auto; font-size:20px; font-weight:400; }
  #profile-hero .ig-stats, #ig-person-body .ig-stats{ grid-column:2; justify-content:flex-start; gap:40px; text-align:left; }
  .ig-stat{ display:flex; align-items:baseline; gap:5px; min-width:0; }
  .ig-stat b{ display:inline; font-size:16px; font-weight:600; }
  .ig-stat span{ font-size:16px; }
  #profile-hero .ig-prof-info, #ig-person-body .ig-prof-info{ grid-column:2; padding:16px 0 0; }
  #profile-hero > .ig-prof-btns, #ig-person-body > .ig-prof-btns{ grid-column:2; padding:16px 0 0; }
  .ig-prof-btns .ig-btn{ flex:0 0 auto; padding:0 20px; }
  .ig-prof-btns .ig-btn.icon{ flex:0 0 34px; padding:0; }
  #ig-person-body > div:has(> .ig-follows-you){ grid-column:2; padding:10px 0 0 !important; }
  #profile-hero > .ig-discover, #profile-hero > .ig-tabs, #ig-person-body > .ig-tabs, #ig-person-body > .ig-grid, #ig-person-body > .ig-empty{ grid-column:1 / -1; }
  .ig-discover-h, .ig-discover-row{ padding-left:0; padding-right:0; }
  .ig-tabs{ justify-content:center; margin-top:40px; }
  .ig-tab{ flex:0 0 auto; padding:0 32px; }
  .profile-grid, .ig-grid{ gap:4px; }

  /* Reels */
  #view-watch{ max-width:none; padding:0 24px 40px; }
  #view-watch .pill-tabs{ justify-content:center; padding:16px 12px 12px; }
  #view-watch .reels-wrap{ align-items:center; gap:24px; }
  #view-watch .reel{ width:min(100%, calc((100vh - var(--reel-top, 56px) - 24px) * 9 / 16)); height:calc(100vh - var(--reel-top, 56px) - 24px); min-height:0; border-radius:8px; }
  #view-watch #watch-videos, #view-watch #watch-music{ max-width:680px; margin:0 auto; }
  .now-playing{ left:calc(50% + var(--dk-side) / 2); bottom:24px; }

  /* Messages: chat list and the open chat side by side */
  #view-chat.active{ display:grid; grid-template-columns:minmax(320px, 400px) minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); height:100vh; max-width:none; margin:0; padding:0; }
  #view-chat .chat-toolbar{ display:block !important; grid-column:1; grid-row:1; margin:0; padding:16px 16px 4px; border-right:1px solid #e9edef; }
  #view-chat #chat-list{ display:block !important; grid-column:1; grid-row:2; min-height:0; overflow-y:auto; padding:0 8px 16px; border-right:1px solid #e9edef; }
  #view-chat #thread-container{ grid-column:2; grid-row:1 / span 2; min-height:0; min-width:0; display:flex; flex-direction:column; }
  #view-chat:not(.thread-open) #thread-container{ display:none; }
  #view-chat .dk-chat-empty{ grid-column:2; grid-row:1 / span 2; }
  #view-chat:not(.thread-open) .dk-chat-empty{ display:flex; }
  .dk-chat-empty{ flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px; background:#fff; }
  .dk-ce-icon{ width:96px; height:96px; border-radius:50%; border:2px solid #000; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
  .dk-ce-icon svg{ width:46px; height:46px; }
  .dk-ce-title{ font-size:20px; }
  .dk-ce-text{ font-size:14px; color:#737373; max-width:340px; line-height:19px; }
  .dk-ce-btn{ margin-top:8px; }
  #thread-container .thread-view{ flex:1; height:auto !important; min-height:0; padding:0 24px; animation:none; }
  #thread-container .thread-header.ig-th{ margin:0 -24px; padding:10px 20px; min-height:64px; }
  .thread-header .back-btn, .ig-chat-back{ display:none !important; }
  #view-chat .chat-filter-pills{ flex-wrap:wrap !important; overflow:visible !important; row-gap:6px; }
  #view-chat .chat-row{ border-radius:10px; padding:8px 10px; cursor:pointer; transition:background-color .12s ease; }
  #view-chat .chat-row:hover{ background:#f5f6f6; }
  #view-chat .chat-row.dk-on{ background:#f0f2f5; }
  .bubble{ max-width:min(65%, 560px); }
  .thread-input{ padding:10px 0 16px; }

  /* Messages area: WhatsApp-web rail on the left */
  body.wa-mode .wa-nav, body.wa-mode.thread-open .wa-nav{ display:flex; position:fixed; top:0; left:0; bottom:0; transform:none; width:var(--dk-side); max-width:none;
    flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding:10px 6px 16px; border-radius:0; background:#f0f2f5;
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-right:1px solid #e1e5e8; animation:none; z-index:60; }
  .wa-home{ display:flex; order:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:70px; margin:2px 0 10px; padding:8px 0 6px;
    border:none; background:none; border-radius:14px; cursor:pointer; color:#000; }
  .wa-home img{ width:30px; height:30px; border-radius:8px; display:block; }
  .wa-home:hover{ background:rgba(0,0,0,.06); }
  .wa-tab{ flex:0 0 auto; width:70px; padding:9px 0 7px; border-radius:14px; gap:3px; }
  .wa-tab:hover{ background:rgba(0,0,0,.06); }
  .wa-tab.active{ background:rgba(0,0,0,.1); }
  .wa-tab[data-view="chat"]{ order:1; }
  .wa-tab[data-view="updates"]{ order:2; }
  .wa-tab[data-view="calls"]{ order:3; }
  .wa-tab[data-view="communities"]{ order:4; }
  .wa-tab[data-view="you"]{ order:5; margin-top:auto; }
  .wa-lb{ font-size:10px; letter-spacing:0; }
  .wa-badge{ left:14px; }
  .wa-top .ig-icon:first-child{ visibility:hidden; }
  #view-updates, #view-calls, #view-communities, #view-you{ max-width:678px; padding:24px 24px 48px; }

  /* Pages open in the content area, beside the sidebar */
  .full-page{ left:var(--dk-side); right:0; width:auto; max-width:none; transform:none; box-shadow:none; }
  .full-page.active{ animation:igFadeIn .18s ease; }
  .full-page.ig-leaving{ animation:igFadeOut .15s ease forwards; }
  .full-page > .compose-top, .ig-admin-page > .ig-adm-tabs{ padding-left:max(16px, calc((100% - 760px) / 2)); padding-right:max(16px, calc((100% - 760px) / 2)); }
  .full-page > .compose-body{ padding-left:max(16px, calc((100% - 760px) / 2)) !important; padding-right:max(16px, calc((100% - 760px) / 2)) !important; }
  #ig-person-body{ padding:30px max(24px, calc((100% - 935px) / 2)) 48px !important; }
  .ig-adm-tiles{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }

  /* Notifications and Search: panels beside the sidebar */
  #notif-page, #search-page{ right:auto; width:400px; border-right:1px solid #dbdbdb; border-radius:0 16px 16px 0; box-shadow:4px 0 24px rgba(0,0,0,.1); }
  #notif-page > .compose-top, #search-page > .compose-top{ padding:22px 16px 14px; border-bottom:none; }
  #notif-page > .compose-top > button:first-child, #search-page > .compose-top > button:first-child{ display:none; }
  #notif-page .compose-top .title{ text-align:left; font-size:24px; font-weight:700; }
  #notif-page > .compose-body, #search-page > .compose-body{ padding-left:16px !important; padding-right:16px !important; }
  #search-page .search-bar{ margin:0 !important; }
  #notif-page.active, #search-page.active{ animation:dkPanelIn .24s cubic-bezier(.2,.9,.25,1); }
  #notif-page.ig-leaving, #search-page.ig-leaving{ animation:dkPanelOut .16s ease forwards; }

  /* New post: a centred window over a dark backdrop */
  .compose-page{ top:50%; left:50%; right:auto; bottom:auto; width:min(580px, calc(100vw - 48px)); max-width:none; height:min(720px, calc(100vh - 48px));
    transform:translate(-50%, -50%); border-radius:12px; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.3); }
  .compose-page.active{ animation:igDialogIn .2s ease; }
  .compose-page.ig-leaving{ animation:igDialogOut .16s ease forwards; }
  body:has(.compose-page.active)::after, body:has(.compose-page.ig-leaving)::after{ content:''; position:fixed; inset:0; z-index:219; background:rgba(0,0,0,.65); }

  /* "More" menu: a pop-up above the More button */
  .side-menu-overlay{ background:transparent; }
  .side-menu-overlay .side-menu{ top:auto; bottom:72px; left:12px !important; width:300px; max-height:calc(100vh - 96px); border-radius:16px; padding:12px 12px 14px;
    box-shadow:0 4px 28px rgba(0,0,0,.18); transform:none; }
  .side-menu-overlay.active .side-menu{ animation:igDialogIn .18s ease; transform-origin:bottom left; }
  .side-menu-overlay.ig-leaving .side-menu{ transform:none; animation:igDialogOut .14s ease forwards; }
  .side-menu-close{ display:none; }

  .weave-toast{ left:calc(50% + var(--dk-side) / 2); }
}
@keyframes dkPanelIn{ from{ opacity:0; translate:-16px 0; } to{ opacity:1; translate:0 0; } }
@keyframes dkPanelOut{ from{ opacity:1; translate:0 0; } to{ opacity:0; translate:-16px 0; } }

/* Wide computer screens: sidebar with words, and suggestions beside Home. */
@media (min-width:1280px){
  :root{ --dk-side:244px; }
  body.wa-mode{ --dk-side:80px; }
  .dk-logo{ justify-content:flex-start; padding:0 12px 6px; }
  .dk-logo .dk-logo-word{ display:block; }
  .dk-logo .dk-logo-mark{ display:none; }
  .dk-item{ justify-content:flex-start; }
  .dk-lb{ display:block; }
  #view-feed{ max-width:1061px; padding-right:407px; }
  #view-feed > .dk-right{ display:block; position:absolute; top:24px; right:24px; width:319px; padding-top:12px; }
}

/* ---------- Reels: the video fills the whole card; each scroll stops on one complete reel ---------- */
.reel-frame-wrap{ overflow:hidden; }
.reel-frame-wrap iframe{ top:50%; left:50%; width:auto; height:100%; aspect-ratio:16 / 9; min-width:100%; transform:translate(-50%, -50%); }
html:has(body.ig-dark){ scroll-snap-type:y mandatory; scroll-padding-top:var(--reel-top, 50px); }
#view-watch .reel{ scroll-snap-align:start; scroll-snap-stop:always; }

/* Phones: each reel fills the space under the Reels / Videos / Music bar; its caption sits above the bottom bar. */
@media (max-width:1023px){
  #view-watch .reels-wrap{ gap:0; }
  #view-watch .reel{ height:calc(100dvh - var(--reel-top, 50px)); min-height:300px; }
  #view-watch .reel-info{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  #view-watch .reel-side{ bottom:calc(86px + env(safe-area-inset-bottom)); }
}
#settings-page .notif-icon{ display:flex; align-items:center; justify-content:center; }
#settings-page .notif-icon svg{ width:24px; height:24px; display:block; }
@media (min-width:1024px){ .dk-item[data-dk="owner"]{ margin-bottom:2px; } }

/* ---------- Chats: replies, reactions, deleted messages ---------- */
.bubble{ position:relative; }
.bubble.has-react{ margin-bottom:16px; }
.ig-bquote{ flex-basis:100%; display:flex; flex-direction:column; gap:1px; min-width:0; margin:1px 0 5px; padding:5px 9px; border-left:3px solid #1daa61; border-radius:6px;
  background:rgba(0,0,0,.05); font-size:13px; line-height:17px; cursor:pointer; }
.bubble.them .ig-bquote{ border-left-color:#7a5af5; }
.ig-bquote b{ font-size:12.5px; color:#1d8a52; }
.bubble.them .ig-bquote b{ color:#6a4ae0; }
.ig-bquote span{ color:#54656f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-breact{ position:absolute; bottom:-16px; display:inline-flex; align-items:center; gap:1px; height:22px; padding:0 6px; border-radius:11px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2); font-size:13px; line-height:1; cursor:pointer; z-index:1; }
.bubble.me .ig-breact{ right:10px; }
.bubble.them .ig-breact{ left:10px; }
.ig-breact small{ font-size:11px; color:#667781; margin-left:3px; }
.ig-deleted{ display:inline-flex; align-items:center; gap:5px; font-style:italic; color:#667781; }
.ig-deleted svg{ width:14px; height:14px; flex-shrink:0; }
.ig-bmore{ display:none; position:absolute; top:3px; right:3px; width:22px; height:22px; padding:0; border:none; border-radius:50%; align-items:center; justify-content:center;
  background:inherit; color:#667781; cursor:pointer; z-index:2; }
.ig-bmore svg{ width:16px; height:16px; }
@media (hover:hover){ .bubble:hover .ig-bmore{ display:inline-flex; } }
.bubble.ig-flash{ animation:igFlash 1.2s ease; }
@keyframes igFlash{ 0%, 100%{ filter:none; } 25%{ filter:brightness(.82); } }
.ig-reply-bar{ display:flex; align-items:center; gap:10px; margin:6px 0 0; padding:7px 8px 7px 12px; border-left:3px solid #1daa61; border-radius:10px; background:#f0f2f5; }
.ig-rb-main{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px; line-height:17px; }
.ig-rb-main b{ color:#1d8a52; font-size:12.5px; }
.ig-rb-main span{ color:#54656f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-rb-x{ background:none; border:none; padding:4px; color:#54656f; cursor:pointer; display:inline-flex; }
.ig-rb-x svg{ width:16px; height:16px; }
.ig-react-row{ display:flex; justify-content:space-between; gap:4px; padding:2px 2px 12px; }
.ig-react{ width:46px; height:46px; border-radius:50%; border:none; background:#f0f2f5; font-size:24px; line-height:1; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; transition:scale .12s ease, background-color .12s ease; }
.ig-react:hover{ background:#e4e6e9; }
.ig-react:active{ scale:.9; }
.ig-react.on{ background:#d9fdd3; box-shadow:0 0 0 2px #1daa61; }
.ig-th-sub.online{ color:#1daa61; }
@media (hover:none){ .thread-msgs .bubble{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } }

/* ---------- Chat theme picker ---------- */
.ig-theme-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ig-theme-opt{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; border:2px solid #efefef; border-radius:14px; background:none; cursor:pointer; color:#000; font-size:14px; }
.ig-theme-opt.on{ border-color:#1daa61; }
.ig-theme-sw{ width:100%; aspect-ratio:4/3; border-radius:10px; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:12px; }
.ig-theme-sw i{ display:block; height:14px; width:62%; border-radius:7px; }
.ig-theme-sw i:last-child{ align-self:flex-end; }
.sw-white{ background:#fff; box-shadow:inset 0 0 0 1px #e5e5e5; }
.sw-white i:first-child{ background:#f0f2f5; }
.sw-white i:last-child{ background:#d9fdd3; }
.sw-black{ background:#0b141a; }
.sw-black i:first-child{ background:#202c33; }
.sw-black i:last-child{ background:#005c4b; }

/* ---------- Black chat theme (the whole Messages area) ---------- */
body.chat-dark.wa-mode, body.chat-dark.wa-mode #app, body.chat-dark.wa-mode main{ background:#000; }
body.chat-dark.wa-mode main{ color:#e9edef; }
body.chat-dark.wa-mode main .ig-icon, body.chat-dark.wa-mode main .wa-round, body.chat-dark.wa-mode main .wa-act, body.chat-dark.wa-mode main .thread-header .back-btn{ color:#e9edef; }
body.chat-dark.wa-mode main .section-label, body.chat-dark.wa-mode main .wa-title, body.chat-dark.wa-mode main .wa-sec-h, body.chat-dark.wa-mode main .chat-name, body.chat-dark.wa-mode main .wa-row-main b,
body.chat-dark.wa-mode main .wa-you-name, body.chat-dark.wa-mode main .ig-th-name, body.chat-dark.wa-mode main .conn-name, body.chat-dark.wa-mode main .ig-th-empty-name,
body.chat-dark.wa-mode main .ig-empty-title, body.chat-dark.wa-mode main .weave-empty-title, body.chat-dark.wa-mode main .wa-li{ color:#e9edef; }
body.chat-dark.wa-mode main .ig-chat-sub, body.chat-dark.wa-mode main .ig-chat-time, body.chat-dark.wa-mode main .wa-row-main span, body.chat-dark.wa-mode main .wa-intro, body.chat-dark.wa-mode main .wa-sub-h,
body.chat-dark.wa-mode main .wa-you-about, body.chat-dark.wa-mode main .ig-th-sub, body.chat-dark.wa-mode main .conn-role, body.chat-dark.wa-mode main .section-sub, body.chat-dark.wa-mode main .wa-comm-sub,
body.chat-dark.wa-mode main .wa-act-label, body.chat-dark.wa-mode main .ig-empty-text, body.chat-dark.wa-mode main .ig-th-empty-hint, body.chat-dark.wa-mode main .wa-you-tag{ color:#8696a0; }
body.chat-dark.wa-mode main .chat-row.unread .ig-chat-sub, body.chat-dark.wa-mode main .chat-row.unread .chat-name{ color:#e9edef; }
body.chat-dark.wa-mode main .chat-row.unread .ig-chat-time, body.chat-dark.wa-mode main .ig-th-sub.online, body.chat-dark.wa-mode main .ig-th-sub.typing{ color:#21c063; }
body.chat-dark.wa-mode main .chat-search{ background:#1f2c34; color:#e9edef; }
body.chat-dark.wa-mode main .chat-search::placeholder{ color:#8696a0; }
body.chat-dark.wa-mode main .pill{ background:#000; color:#e9edef; border-color:#2a3942; }
body.chat-dark.wa-mode main .pill.active{ background:#e9edef; color:#000; border-color:#e9edef; }
body.chat-dark.wa-mode main .thread-view.active{ background:#0b141a; }
body.chat-dark.wa-mode main .thread-header.ig-th{ background:#000; border-bottom-color:#222d34; }
body.chat-dark.wa-mode main .bubble.them{ background:#202c33; color:#e9edef; }
body.chat-dark.wa-mode main .bubble.me{ background:#005c4b; color:#e9edef; }
body.chat-dark.wa-mode main .ig-bmeta, body.chat-dark.wa-mode main .ig-vtime, body.chat-dark.wa-mode main .ig-tk, body.chat-dark.wa-mode main .ig-deleted{ color:#8696a0; }
body.chat-dark.wa-mode main .bubble.me .ig-bmeta, body.chat-dark.wa-mode main .bubble.me .ig-vtime, body.chat-dark.wa-mode main .bubble.me .ig-tk, body.chat-dark.wa-mode main .bubble.me .ig-deleted{ color:rgba(233,237,239,.65); }
body.chat-dark.wa-mode main .ig-tk.read, body.chat-dark.wa-mode main .bubble.me .ig-tk.read{ color:#53bdeb; }
body.chat-dark.wa-mode main .ig-time-sep{ background:#182229; color:#8696a0; }
body.chat-dark.wa-mode main .ig-msg-bar, body.chat-dark.wa-mode main .ig-rec-bar, body.chat-dark.wa-mode main .thread-input .ig-rec-del, body.chat-dark.wa-mode main .ig-reply-bar{ background:#1f2c34; color:#e9edef; }
body.chat-dark.wa-mode main .ig-msg-bar input{ color:#e9edef; }
body.chat-dark.wa-mode main .ig-msg-bar input::placeholder{ color:#8696a0; }
body.chat-dark.wa-mode main .thread-input .ig-attach, body.chat-dark.wa-mode main .ig-rb-x, body.chat-dark.wa-mode main .ig-vplay{ color:#aebac1; }
body.chat-dark.wa-mode main .ig-vbar{ background:#3b4a54; }
body.chat-dark.wa-mode main .ig-bquote{ background:rgba(0,0,0,.25); }
body.chat-dark.wa-mode main .ig-bquote span, body.chat-dark.wa-mode main .ig-rb-main span{ color:#aebac1; }
body.chat-dark.wa-mode main .ig-bquote b, body.chat-dark.wa-mode main .ig-rb-main b{ color:#21c063; }
body.chat-dark.wa-mode main .bubble.them .ig-bquote b{ color:#a993ff; }
body.chat-dark.wa-mode main .ig-breact{ background:#202c33; box-shadow:0 1px 3px rgba(0,0,0,.6); }
body.chat-dark.wa-mode main .ig-bmore{ color:#aebac1; }
body.chat-dark.wa-mode main .ig-req-bar{ border-top-color:#222d34; color:#8696a0; }
body.chat-dark.wa-mode main .wa-list{ background:#111b21; }
body.chat-dark.wa-mode main .wa-li{ border-bottom-color:#222d34; }
body.chat-dark.wa-mode main .wa-li:active{ background:#182229; }
body.chat-dark.wa-mode main .wa-act-circle, body.chat-dark.wa-mode main .wa-tip, body.chat-dark.wa-mode main .wa-empty-icon, body.chat-dark.wa-mode main .wa-new-keypad{ background:#1f2c34; color:#e9edef; }
body.chat-dark.wa-mode main .wa-comm-tile, body.chat-dark.wa-mode main .wa-av-cal{ background:#0a332a; }
body.chat-dark.wa-mode main .ig-btn, body.chat-dark.wa-mode main .btn-outline{ background:#1f2c34; color:#e9edef; }
body.chat-dark.wa-mode main .ig-btn.blue{ background:#0095f6; color:#fff; }
body.chat-dark.wa-mode main .ig-skel{ background:linear-gradient(90deg, #1f2c34 30%, #2a3942 50%, #1f2c34 70%); background-size:300% 100%; }
body.chat-dark.wa-mode .wa-nav{ background:rgba(17,27,33,.9); box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); }
body.chat-dark.wa-mode .wa-tab{ color:#e9edef; }
body.chat-dark.wa-mode .wa-tab.active{ background:rgba(255,255,255,.13); }
body.chat-dark.wa-mode .wa-badge{ box-shadow:0 0 0 2px #111b21; }
body.chat-dark.wa-mode .wa-tab.active .wa-you-av{ box-shadow:0 0 0 2px #111b21, 0 0 0 3.5px #e9edef; }
@media (min-width:1024px){
  body.chat-dark.wa-mode .wa-nav, body.chat-dark.wa-mode.thread-open .wa-nav{ background:#202c33; border-right-color:#222d34; box-shadow:none; }
  body.chat-dark.wa-mode .wa-home{ color:#e9edef; }
  body.chat-dark.wa-mode .wa-home img{ filter:invert(1); }
  body.chat-dark.wa-mode .wa-home:hover, body.chat-dark.wa-mode .wa-tab:hover{ background:rgba(255,255,255,.08); }
  body.chat-dark.wa-mode #view-chat .chat-toolbar, body.chat-dark.wa-mode #view-chat #chat-list{ border-right-color:#222d34; }
  body.chat-dark.wa-mode #view-chat .chat-row:hover{ background:#182229; }
  body.chat-dark.wa-mode #view-chat .chat-row.dk-on{ background:#2a3942; }
  body.chat-dark.wa-mode main .dk-chat-empty{ background:#0b141a; color:#e9edef; }
  body.chat-dark.wa-mode main .dk-ce-icon{ border-color:#e9edef; }
  body.chat-dark.wa-mode main .dk-ce-text{ color:#8696a0; }
}

/* ---------- Home: suggested people ---------- */
.ig-feed-sugg{ border-top:1px solid #efefef; border-bottom:1px solid #efefef; padding:14px 0 16px; margin:0 0 14px; }
.ig-fs-h{ display:flex; align-items:center; justify-content:space-between; padding:0 16px 10px; font-size:14px; font-weight:600; }
.ig-new-tag{ color:#1d8a52; font-weight:600; }
@media (min-width:1024px){
  #feed-list .ig-feed-sugg{ border:1px solid #efefef; border-radius:8px; }
  #feed-list .ig-feed-sugg .ig-fs-h, #feed-list .ig-feed-sugg .ig-discover-row{ padding-left:12px; padding-right:12px; }
}
@media (min-width:1280px){ #feed-list .ig-feed-sugg{ display:none; } }

/* ---------- Reels: add a reel, Instagram reels ---------- */
#view-watch .pill-tabs{ align-items:center; }
.ig-reel-add{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; border:none; border-radius:16px; padding:6px 12px 6px 9px;
  background:rgba(255,255,255,.16); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.ig-reel-add svg{ width:16px; height:16px; }
@media (min-width:1024px){ .ig-reel-add{ position:absolute; right:24px; } }
.reel.is-ig .reel-frame-wrap iframe{ top:0; left:0; width:100%; height:100%; aspect-ratio:auto; min-width:0; transform:none; pointer-events:auto; background:#fff; }
.reel.is-ig .reel-scrim{ display:none; }
.reel-ig-poster{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff;
  background:linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.reel-ig-poster svg{ width:54px; height:54px; }
.reel-ig-poster b{ font-size:17px; }
.reel-ig-poster small{ font-size:13px; opacity:.85; }
.reel-yt b{ font-weight:700; }

/* ---------- Owner panel: details behind the overview boxes ---------- */
button.ig-adm-tile{ position:relative; width:100%; border:none; font:inherit; color:inherit; cursor:pointer; transition:background-color .15s ease, scale .12s ease; }
button.ig-adm-tile:hover{ background:#efefec; }
button.ig-adm-tile.alert:hover{ background:#ffe3e6; }
button.ig-adm-tile:active{ scale:.97; }
.ig-adm-go{ position:absolute; top:9px; right:9px; display:inline-flex; color:#a0a5a8; }
.ig-adm-go svg{ width:13px; height:13px; }
.ig-adm-hint{ text-align:center; font-size:12.5px; color:#8a8a8a; margin-top:12px; }
.ig-adm-sub{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.ig-adm-sub > b{ font-size:17px; }
.ig-adm-back{ display:inline-flex; align-items:center; gap:2px; border:none; border-radius:16px; padding:5px 12px 5px 6px; background:#f2f2f0; color:#000; font-size:13px; font-weight:600; cursor:pointer; }
.ig-adm-back svg{ width:16px; height:16px; }
.ig-adm-filter{ display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; padding:5px 6px 5px 12px; border-radius:16px; background:#e7f8ee; color:#0a7a3e; font-size:13px; font-weight:600; }
.ig-adm-filter button{ background:none; border:none; padding:2px; display:inline-flex; color:inherit; cursor:pointer; }
.ig-adm-filter svg{ width:14px; height:14px; }
.ig-adm-stories{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.ig-adm-story{ display:flex; flex-direction:column; border:1px solid #efefef; border-radius:12px; overflow:hidden; }
.ig-adm-story img{ display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#111; cursor:zoom-in; }
.ig-adm-story-info{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:8px 10px 2px; font-size:12.5px; color:#737373; }
.ig-adm-story-info b{ color:#000; font-size:13.5px; }
.ig-adm-story-info .ig-adm-story-text{ color:#000; overflow-wrap:anywhere; }
.ig-adm-story .ig-btn{ flex:0 0 auto; margin:6px 10px 10px; }
.ig-adm-devices{ font-size:12.5px; color:#737373; white-space:nowrap; }
.ig-adm-total{ font-size:15px; margin:0 0 10px; }
.ig-adm-total b{ font-size:22px; font-weight:800; }
.ig-adm-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.ig-adm-chips span{ background:#f2f2f0; border-radius:14px; padding:5px 10px; font-size:13px; }
.ig-adm-bars{ display:flex; flex-direction:column; gap:4px; }
.ig-adm-bar{ display:grid; grid-template-columns:76px 1fr 34px; align-items:center; gap:8px; font-size:12.5px; color:#555; }
.ig-adm-bar i{ display:block; height:10px; min-width:2px; border-radius:5px; background:#0095f6; }
.ig-adm-bar b{ text-align:right; color:#000; font-weight:600; }
.ig-adm-private{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:#737373; }
.ig-adm-private svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- New post: several photos, crop and filters ---------- */
.compose-preview.ig-cmp{ display:block; border-radius:0; overflow:visible; margin-top:12px; }
.ig-cmp-main{ position:relative; width:100%; border-radius:10px; overflow:hidden; background:#f2f2f2; }
.ig-cmp-main img{ display:block; width:100%; height:auto; max-height:52vh; object-fit:contain; background:#f2f2f2; }
.compose-user-row > div{ min-width:0; }
.compose-preview.ig-cmp{ max-width:100%; min-width:0; }
.ig-cmp-main.ar-square{ aspect-ratio:1; width:min(100%, 52vh); margin:0 auto; }
.ig-cmp-main.ar-portrait{ aspect-ratio:4/5; width:min(100%, calc(52vh * 0.8)); margin:0 auto; }
.ig-cmp-main.ar-square img, .ig-cmp-main.ar-portrait img{ height:100%; max-height:none; object-fit:cover; }
.ig-cmp-count{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:600; padding:3px 9px; border-radius:12px; }
.ig-cmp-row{ display:flex; align-items:center; gap:8px; margin:12px 0 4px; flex-wrap:wrap; }
.ig-cmp-label{ font-size:13px; font-weight:600; color:#737373; margin-right:2px; }
.ig-cmp-row .ig-chip{ padding:5px 12px; font-size:13px; }
.ig-chip.on{ background:#000; color:#fff; border-color:#000; }
.ig-cmp-filters{ display:flex; gap:10px; overflow-x:auto; padding:8px 0 6px; scrollbar-width:none; }
.ig-cmp-filters::-webkit-scrollbar{ display:none; }
.ig-cmp-filter{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; border:none; background:none; padding:0; cursor:pointer; color:#737373; font-size:12px; }
.ig-cmp-filter img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid transparent; }
.ig-cmp-filter.on{ color:#000; font-weight:700; }
.ig-cmp-filter.on img{ border-color:#0095f6; }
.ig-cmp-strip{ display:flex; gap:8px; overflow-x:auto; padding:6px 0 2px; scrollbar-width:none; }
.ig-cmp-strip::-webkit-scrollbar{ display:none; }
.ig-cmp-thumb{ position:relative; flex:0 0 auto; width:58px; height:58px; border-radius:8px; overflow:hidden; cursor:pointer; outline:2px solid transparent; outline-offset:-2px; }
.ig-cmp-thumb.on{ outline-color:#000; }
.ig-cmp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ig-cmp-thumb button{ position:absolute; top:3px; right:3px; width:18px; height:18px; padding:0; border:none; border-radius:50%; background:rgba(0,0,0,.65); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ig-cmp-thumb button svg{ width:10px; height:10px; }
.ig-cmp-add{ flex:0 0 auto; width:58px; height:58px; border-radius:8px; border:1.5px dashed #c7c7c7; display:flex; align-items:center; justify-content:center; color:#737373; cursor:pointer; }
.ig-cmp-add svg{ width:22px; height:22px; }

/* ---------- Posts with several photos ---------- */
.ig-car{ position:relative; }
.ig-car-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:1; overscroll-behavior-x:contain; }
.ig-car-track::-webkit-scrollbar{ display:none; }
.ig-media .ig-car-track img{ flex:0 0 100%; width:100%; height:100%; max-height:none; object-fit:cover; scroll-snap-align:start; scroll-snap-stop:always; }
.ig-car-count{ position:absolute; top:12px; right:12px; z-index:2; background:rgba(18,18,18,.7); color:#fff; font-size:12px; font-weight:600; padding:3px 9px; border-radius:12px; pointer-events:none; }
.ig-car-dots{ position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; justify-content:center; gap:4px; pointer-events:none; }
.ig-car-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 2px rgba(0,0,0,.35); transition:background-color .15s ease, scale .15s ease; }
.ig-car-dots i.on{ background:#fff; scale:1.15; }
.ig-car-btn{ display:none; position:absolute; top:50%; z-index:2; width:30px; height:30px; margin-top:-15px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.9);
  color:#000; box-shadow:0 1px 5px rgba(0,0,0,.3); align-items:center; justify-content:center; cursor:pointer; }
.ig-car-btn svg{ width:16px; height:16px; }
.ig-car-btn.prev{ left:10px; }
.ig-car-btn.next{ right:10px; }
.ig-car-btn.next svg{ transform:scaleX(-1); }
@media (hover:hover){ .ig-car:hover .ig-car-btn{ display:flex; } .ig-car.at-start .ig-car-btn.prev, .ig-car.at-end .ig-car-btn.next{ display:none; } }
.ig-tile-multi{ position:absolute; top:6px; right:6px; z-index:1; color:#fff; display:inline-flex; filter:drop-shadow(0 0 2px rgba(0,0,0,.5)); pointer-events:none; }
.ig-tile-multi svg{ width:18px; height:18px; }

/* ---------- Private accounts ---------- */
.ig-lock{ display:inline-flex; vertical-align:-2px; margin-right:4px; }
.ig-lock svg{ width:15px; height:15px; }
.ig-prof-title .ig-lock svg{ width:17px; height:17px; }
.ig-private-note{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:28px 24px 36px; margin-top:16px; border-top:1px solid #efefef; }
.ig-private-note b{ font-size:16px; }
.ig-private-note > span:last-child{ font-size:14px; color:#737373; }
.ig-pn-icon{ width:62px; height:62px; border-radius:50%; border:2px solid #000; display:inline-flex; align-items:center; justify-content:center; margin-bottom:4px; }
.ig-pn-icon svg{ width:28px; height:28px; }
.ig-switch{ position:relative; flex-shrink:0; width:44px; height:26px; border-radius:13px; background:#dbdbdb; transition:background-color .2s ease; }
.ig-switch i{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s ease; }
.ig-switch.on{ background:#0095f6; }
.ig-switch.on i{ left:21px; }
.ig-req-actions{ display:inline-flex; gap:6px; flex-shrink:0; }
.ig-req-actions .ig-btn{ flex:0 0 auto; padding:0 12px; }
.ig-fl-remove{ flex:0 0 auto !important; padding:0 12px; }

/* ---------- Stories: reactions and "Seen by" ---------- */
.ig-sv-reacts{ position:absolute; left:0; right:0; bottom:calc(66px + env(safe-area-inset-bottom)); z-index:3; display:flex; justify-content:center; gap:8px; padding:0 12px; }
.ig-sv-reacts button{ width:42px; height:42px; border:none; border-radius:50%; background:rgba(255,255,255,.14); font-size:22px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:scale .12s ease, background-color .12s ease; }
.ig-sv-reacts button:hover{ background:rgba(255,255,255,.25); }
.ig-sv-reacts button:active{ scale:.85; }
.ig-sv-frame:has(.ig-sv-reacts) .ig-sv-text{ bottom:calc(132px + env(safe-area-inset-bottom)); }
.ig-sv-fly{ position:absolute; bottom:calc(110px + env(safe-area-inset-bottom)); left:50%; z-index:4; font-size:40px; translate:-50% 0; pointer-events:none; animation:igSvFly 1.1s ease-out forwards; }
@keyframes igSvFly{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 15%{ opacity:1; transform:translateY(-10px) scale(1.15); } 100%{ opacity:0; transform:translateY(-220px) scale(1.4); } }
.ig-sv-views{ position:absolute; left:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:3; display:inline-flex; align-items:center; gap:7px; border:none;
  background:rgba(0,0,0,.35); color:#fff; font-size:14px; font-weight:600; padding:8px 14px 8px 11px; border-radius:20px; cursor:pointer; }
.ig-sv-views svg{ width:20px; height:20px; }
.ig-sv-viewer-meta{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:#737373; flex-shrink:0; }
.ig-sv-viewer-meta b{ font-size:20px; font-weight:400; }

/* =========================================================
   Dark mode for the whole app (Appearance: System / Light / Dark). html.theme-dark is set by the page
   before it is drawn, then kept in sync by ig-layer.js. The Messages area uses the chat-dark rules above.
   ========================================================= */
html.theme-dark{ color-scheme:dark; --bg:#000; --card:#000; --ink:#f5f5f5; --ink-soft:#a8a8a8; --line:#262626; --coral-bg:#262626; --gold-bg:#262626; --plum-bg:#262626; --blue-bg:#262626; --gold:#f5f5f5; --plum:#f5f5f5; --maroon:#ff6b81; --ig-gray:#363636; --ig-gray-dark:#4a4a4a; --ig-sep:#363636; --ig-soft:#a8a8a8; }
html.theme-dark, html.theme-dark body{ background:#000; color:#f5f5f5; }
html.theme-dark #app, html.theme-dark main, html.theme-dark header.topbar.ig-topbar, html.theme-dark .ig-prof-top, html.theme-dark .ig-sub-top, html.theme-dark .ig-explore-top, html.theme-dark .auth-page, html.theme-dark #ig-splash, html.theme-dark .post.ig-post, html.theme-dark .full-page, html.theme-dark .compose-page, html.theme-dark .dk-side, html.theme-dark .ig-tabbar{ background:#000; }
html.theme-dark #app{ border-color:#262626; }
html.theme-dark .modal-box, html.theme-dark .side-menu{ background:#262626; color:#f5f5f5; }
html.theme-dark .modal-overlay{ background:rgba(0,0,0,.65); }
html.theme-dark .modal-box::before{ background:#555; }
html.theme-dark .ig-logo, html.theme-dark .ig-auth-logo, html.theme-dark .ig-splash-logo, html.theme-dark .ig-icon, html.theme-dark .ig-more, html.theme-dark .ig-act, html.theme-dark .ig-inline-btn, html.theme-dark .modal-close, html.theme-dark .ig-story-name, html.theme-dark .ig-sub, html.theme-dark .ig-share-name, html.theme-dark .weave-icon-btn, html.theme-dark .side-menu-item .ic, html.theme-dark .side-menu-close, html.theme-dark .thread-header .back-btn, html.theme-dark .full-page .compose-top > button, html.theme-dark .compose-page .compose-top > button, html.theme-dark .ig-search-box input, html.theme-dark .ig-nc-main b, html.theme-dark .auth-switch, html.theme-dark .ig-tab.active, html.theme-dark .ig-cmp-filter.on, html.theme-dark #settings-page .notif-icon, html.theme-dark .weave-chip, html.theme-dark .btn-outline, html.theme-dark .btn-outline.connected, html.theme-dark .ig-btn, html.theme-dark .ig-adm-story-info b, html.theme-dark .ig-adm-story-info .ig-adm-story-text, html.theme-dark .ig-adm-bar b, html.theme-dark .dk-logo, html.theme-dark .dk-item, html.theme-dark .weave-pill-nav .pill-item, html.theme-dark .wa-round, html.theme-dark .wa-tab, html.theme-dark .ig-theme-opt, html.theme-dark .ig-adm-back, html.theme-dark .chat-row.unread .ig-chat-sub, html.theme-dark .wa-check{ color:#f5f5f5; }
html.theme-dark .ig-act.liked{ color:var(--ig-red); }
html.theme-dark .ig-btn:hover, html.theme-dark .btn-outline:hover, html.theme-dark .ig-btn.on{ background:#4a4a4a; }
html.theme-dark .ig-btn.blue{ background:var(--ig-blue); color:#fff; }
html.theme-dark .pill, html.theme-dark .ig-chip, html.theme-dark .ig-tickbtn{ background:#000; color:#f5f5f5; border-color:#363636; }
html.theme-dark .pill.active, html.theme-dark .ig-chip.on, html.theme-dark .ig-tickbtn.on.none{ background:#f5f5f5; color:#000; border-color:#f5f5f5; }
html.theme-dark .ig-btn.danger{ background:#3a1d22; color:#ff6b81; }
html.theme-dark .ig-btn.danger:hover{ background:#4a2329; }
html.theme-dark .fab-plus{ background:#f5f5f5; color:#000; }
html.theme-dark .weave-toast{ background:#363636; color:#fff; }
html.theme-dark .ig-stories, html.theme-dark .weave-menu-item, html.theme-dark .ig-comments, html.theme-dark .ig-comment-bar, html.theme-dark .side-menu-profile, html.theme-dark .read-card, html.theme-dark .ig-adm-tabs, html.theme-dark .ig-adm-card, html.theme-dark .ig-adm-story, html.theme-dark .ig-private-note, html.theme-dark .ig-feed-sugg, html.theme-dark #feed-list .post.ig-post, html.theme-dark #feed-list .ig-feed-sugg, html.theme-dark .ig-theme-opt, html.theme-dark .full-page .compose-top, html.theme-dark .compose-page .compose-top, html.theme-dark .ig-page-top, html.theme-dark .dk-side, html.theme-dark #notif-page, html.theme-dark #search-page{ border-color:#262626; }
html.theme-dark .ig-theme-opt.on{ border-color:#1daa61; }
html.theme-dark .ig-media, html.theme-dark .grid-tile, html.theme-dark .ig-cmp-main, html.theme-dark .ig-cmp-main img, html.theme-dark .ig-send-photo, html.theme-dark .weave-text-tile, html.theme-dark .ig-skel-media{ background:#1c1c1c; }
html.theme-dark .weave-text-tile{ color:#e0e0e0; }
html.theme-dark .avatar{ background-color:#4a4a4a; }
html.theme-dark .ig-ring > .avatar{ border-color:#000; }
html.theme-dark .ig-story-inner{ background:#000; }
html.theme-dark .ig-story-add{ border-color:#000; }
html.theme-dark .ig-empty-icon, html.theme-dark .ig-pn-icon, html.theme-dark .dk-ce-icon{ border-color:#f5f5f5; }
html.theme-dark .ig-tab.active{ border-top-color:#f5f5f5; }
html.theme-dark .ig-cmp-thumb.on{ outline-color:#f5f5f5; }
html.theme-dark .ig-cmp-add{ border-color:#555; color:#a8a8a8; }
html.theme-dark .ig-badge{ box-shadow:0 0 0 2px #000; }
html.theme-dark .ig-topbar .notif-dot, html.theme-dark .dk-ic .notif-dot{ border-color:#000; }
html.theme-dark .weave-pill-nav .ig-badge{ box-shadow:0 0 0 2px #262626; }
html.theme-dark .weave-pill-nav .notif-dot{ border-color:#262626; }
html.theme-dark .weave-pill-nav .navitem.active .ig-nav-avatar{ box-shadow:0 0 0 2px #262626, 0 0 0 3.5px #f5f5f5; }
html.theme-dark .dk-item.active .ig-nav-avatar{ box-shadow:0 0 0 1.5px #000, 0 0 0 3px #f5f5f5; }
html.theme-dark .floating-nav.weave-pill-nav{ background:#262626; box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
html.theme-dark .dk-item:hover{ background:rgba(255,255,255,.08); }
html.theme-dark .dk-item:active{ background:rgba(255,255,255,.14); }
html.theme-dark .dk-st-btn, html.theme-dark .ig-car-btn{ background:rgba(38,38,38,.95); color:#f5f5f5; }
html.theme-dark .side-menu-overlay .side-menu{ box-shadow:0 4px 28px rgba(0,0,0,.6); }
html.theme-dark #notif-page, html.theme-dark #search-page{ box-shadow:4px 0 24px rgba(0,0,0,.6); }
html.theme-dark .ig-notif-card{ background:#1c1c1c; }
html.theme-dark .ig-adm-tile, html.theme-dark .ig-adm-back, html.theme-dark .ig-adm-chips span, html.theme-dark .ig-react{ background:#262626; }
html.theme-dark button.ig-adm-tile:hover{ background:#333; }
html.theme-dark .ig-adm-tile.alert{ background:#3a1d22; }
html.theme-dark button.ig-adm-tile.alert:hover{ background:#4a2329; }
html.theme-dark .ig-react.on{ background:#0b3d2e; }
html.theme-dark .ig-adm-filter{ background:#0a332a; color:#4ade80; }
html.theme-dark .ig-new-tag{ color:#34c759; }
html.theme-dark .ig-switch{ background:#555; }
html.theme-dark .auth-input{ background:#121212; border-color:#363636; color:#f5f5f5; }
html.theme-dark .ig-skel{ background:linear-gradient(90deg, #1c1c1c 30%, #2a2a2a 50%, #1c1c1c 70%); background-size:300% 100%; }
html.theme-dark .dk-chat-empty{ background:#000; }
html.theme-dark .sw-system{ background:linear-gradient(135deg, #fff 50%, #0b141a 50%); box-shadow:inset 0 0 0 1px #555; }
.sw-system i:first-child{ background:#f0f2f5; }
.sw-system i:last-child{ background:#005c4b; }
.ig-theme-opts.three{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ig-theme-opt small{ font-size:11.5px; color:var(--ig-soft); text-align:center; }
html.theme-dark .side-menu-close{ background:#363636; color:#f5f5f5; }
.ig-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none; }


/* =========================================================
   Gestures (phones) and motion polish
   ========================================================= */

/* Our own pull-to-refresh replaces the browser's page reload; photos never pop the system menu on long press. */
@media (max-width:1023px){
  html, body{ overscroll-behavior-y:none; }
}
.grid-tile img, .ig-media img, .reel, .ig-story{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

/* Pages that follow the finger when swiped back. */
.ig-dim{ position:fixed; inset:0; z-index:214; background:#000; opacity:0; display:none; pointer-events:none; }
.full-page.ig-dragging, .thread-view.ig-dragging{ box-shadow:-14px 0 34px rgba(0,0,0,.2); }
.full-page.ig-swiped.ig-leaving{ display:none !important; animation:none !important; }
.modal-overlay.ig-leaving .modal-box.ig-gone{ animation:none; }
#view-chat.ig-th-peek{ position:relative; }
#view-chat.ig-th-peek #thread-container{ position:absolute; top:0; left:0; right:0; z-index:5; }
#view-chat.ig-th-peek .thread-view{ background:#fff; }
html.theme-dark #view-chat.ig-th-peek .thread-view{ background:#000; }

/* Panels that peek in while swiping between Home, Chats and the story camera. */
.ig-peek-panel{ position:fixed; top:0; bottom:0; left:0; width:100%; z-index:205; display:none; background:#fff; color:#000; overflow:hidden; pointer-events:none;
  box-shadow:0 0 34px rgba(0,0,0,.16); }
.ig-peek-panel.cam{ background:radial-gradient(circle at 50% 40%, #2a2a2a, #000 70%); color:#fff; }
.ig-pp-cam{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.ig-pp-cam-ic{ width:78px; height:78px; border-radius:50%; border:3px solid #fff; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.ig-pp-cam-ic svg{ width:34px; height:34px; }
.ig-pp-cam b{ font-size:16px; font-weight:600; }
.ig-pp-cam small{ font-size:13px; opacity:.7; }
.ig-pp-top{ height:calc(52px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0; display:flex; align-items:center; border-bottom:1px solid #efefef; font-size:20px; }
.ig-pp-logo{ font-family:'Grand Hotel', cursive; font-size:30px; }
.ig-pp-body{ padding:8px 16px; }
html.theme-dark .ig-peek-panel:not(.cam){ background:#000; color:#f5f5f5; }
html.theme-dark .ig-pp-top{ border-color:#262626; }

/* Swipe a message to reply: the arrow that appears behind it. */
.ig-reply-hint{ position:fixed; z-index:60; width:32px; height:32px; border-radius:50%; display:none; align-items:center; justify-content:center; pointer-events:none;
  background:rgba(0,0,0,.06); color:#737373; transition:background-color .15s ease, color .15s ease; }
.ig-reply-hint svg{ width:18px; height:18px; }
.ig-reply-hint.on{ background:rgba(0,0,0,.12); color:#000; }
html.theme-dark .ig-reply-hint{ background:rgba(255,255,255,.1); color:#a8a8a8; }
html.theme-dark .ig-reply-hint.on{ background:rgba(255,255,255,.2); color:#fff; }

/* Pull to refresh. */
.ig-ptr{ position:fixed; top:0; left:50%; z-index:190; width:36px; height:36px; margin-left:-18px; border-radius:50%; background:#fff; color:#8e8e8e;
  box-shadow:0 2px 10px rgba(0,0,0,.16); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; translate:0 -60px; }
.ig-ptr.ready, .ig-ptr.spin{ color:#262626; }
.ig-ptr.spin svg{ animation:igSpin .7s linear infinite; }
html.theme-dark .ig-ptr{ background:#262626; color:#8e8e8e; }
html.theme-dark .ig-ptr.ready, html.theme-dark .ig-ptr.spin{ color:#f5f5f5; }
@keyframes igSpin{ to{ transform:rotate(360deg); } }

/* Pinch to zoom. */
.ig-zoom{ position:fixed; inset:0; z-index:400; background:rgba(0,0,0,0); pointer-events:none; }
.ig-zoom img{ position:fixed; display:block; margin:0; max-width:none; will-change:transform; }

/* Press and hold a grid photo to peek. */
.ig-peek{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:igFadeIn .18s ease; }
.ig-peek.out{ animation:igFadeOut .18s ease forwards; }
.ig-peek-card{ width:100%; max-width:400px; background:#fff; color:#000; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); animation:igPeekIn .3s cubic-bezier(.2,1.25,.3,1); }
.ig-peek.out .ig-peek-card{ animation:igDialogOut .18s ease forwards; }
.ig-peek-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:14px; }
.ig-peek-card > img{ display:block; width:100%; max-height:62vh; object-fit:cover; }
.ig-peek-text{ padding:44px 22px; font-size:18px; text-align:center; overflow-wrap:anywhere; }
.ig-peek-acts{ display:flex; align-items:center; gap:16px; padding:10px 14px 12px; }
.ig-peek-acts > span{ display:flex; }
.ig-peek-acts svg{ width:24px; height:24px; }
.ig-peek-acts .liked{ color:#ff3040; }
.ig-peek-acts small{ margin-left:auto; font-weight:600; font-size:13px; }
html.theme-dark .ig-peek-card{ background:#262626; color:#f5f5f5; }
@keyframes igPeekIn{ from{ opacity:0; scale:.85; } to{ opacity:1; scale:1; } }

/* Reels: hold to pause (everything on top fades), tap for sound. */
.reel .reel-info, .reel .reel-side, .reel .reel-mute, .reel .reel-scrim{ transition:opacity .2s ease; }
.reel.ig-reel-held .reel-info, .reel.ig-reel-held .reel-side, .reel.ig-reel-held .reel-mute, .reel.ig-reel-held .reel-scrim{ opacity:0; }
.ig-reel-flash{ position:absolute; top:50%; left:50%; z-index:3; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; pointer-events:none; animation:igFlashIcon .8s ease forwards; }
.ig-reel-flash svg{ width:30px; height:30px; }
@keyframes igFlashIcon{ 0%{ opacity:0; scale:.6; } 15%{ opacity:1; scale:1.06; } 30%{ scale:1; } 70%{ opacity:1; } 100%{ opacity:0; } }

/* Stories: hold hides everything on top of the photo; the next person turns in like a cube. */
.ig-sv .ig-sv-top, .ig-sv .ig-sv-reply, .ig-sv .ig-sv-reacts, .ig-sv .ig-sv-text, .ig-sv .ig-sv-views{ transition:opacity .2s ease; }
.ig-sv.ig-sv-holding .ig-sv-top, .ig-sv.ig-sv-holding .ig-sv-reply, .ig-sv.ig-sv-holding .ig-sv-reacts, .ig-sv.ig-sv-holding .ig-sv-text, .ig-sv.ig-sv-holding .ig-sv-views{ opacity:0; }
.ig-sv-frame.ig-sv-in-r{ animation:igSvInR .34s cubic-bezier(.2,.9,.25,1); }
.ig-sv-frame.ig-sv-in-l{ animation:igSvInL .34s cubic-bezier(.2,.9,.25,1); }
@keyframes igSvInR{ from{ transform-origin:left center; transform:perspective(1200px) translateX(100%) rotateY(-40deg); } to{ transform-origin:left center; transform:none; } }
@keyframes igSvInL{ from{ transform-origin:right center; transform:perspective(1200px) translateX(-100%) rotateY(40deg); } to{ transform-origin:right center; transform:none; } }
.ig-story-ring.ig-ring-load{ background:none; }
.ig-story-ring.ig-ring-load::before{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(#ffd600, #ff7a00, #ff0069, #d300c5, #7638fa, rgba(118,56,250,0) 75%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:igSpin .75s linear infinite; }

/* A soft circle slides under the selected tab. */
.weave-pill-nav .ig-nav-ind{ position:absolute; top:50%; left:0; width:42px; height:42px; margin-top:-21px; border-radius:50%; background:rgba(0,0,0,.06);
  pointer-events:none; opacity:0; transition:translate .42s cubic-bezier(.3,1.35,.5,1), opacity .2s ease; }
html.theme-dark .weave-pill-nav .ig-nav-ind{ background:rgba(255,255,255,.12); }

/* Rows and tiles rise in one after another when a screen opens; feed posts rise as they scroll in. */
@keyframes igRise{ from{ opacity:0; translate:0 12px; } to{ opacity:1; translate:0 0; } }
@keyframes igPostRise{ from{ opacity:0; translate:0 24px; } to{ opacity:1; translate:0 0; } }
.ig-enter .chat-row, .ig-enter .notif-row, .ig-enter .grid-tile, .ig-enter .ig-call-row, .ig-enter .ig-adm-card{ animation:igRise .38s cubic-bezier(.2,.8,.2,1) both; }
.ig-enter .chat-row:nth-child(2), .ig-enter .notif-row:nth-child(2), .ig-enter .grid-tile:nth-child(2), .ig-enter .ig-call-row:nth-child(2), .ig-enter .ig-adm-card:nth-child(2){ animation-delay:35ms; }
.ig-enter .chat-row:nth-child(3), .ig-enter .notif-row:nth-child(3), .ig-enter .grid-tile:nth-child(3), .ig-enter .ig-call-row:nth-child(3), .ig-enter .ig-adm-card:nth-child(3){ animation-delay:70ms; }
.ig-enter .chat-row:nth-child(4), .ig-enter .notif-row:nth-child(4), .ig-enter .grid-tile:nth-child(4), .ig-enter .ig-call-row:nth-child(4), .ig-enter .ig-adm-card:nth-child(4){ animation-delay:105ms; }
.ig-enter .chat-row:nth-child(5), .ig-enter .notif-row:nth-child(5), .ig-enter .grid-tile:nth-child(5), .ig-enter .ig-call-row:nth-child(5), .ig-enter .ig-adm-card:nth-child(5){ animation-delay:140ms; }
.ig-enter .chat-row:nth-child(6), .ig-enter .notif-row:nth-child(6), .ig-enter .grid-tile:nth-child(6), .ig-enter .ig-call-row:nth-child(6), .ig-enter .ig-adm-card:nth-child(6){ animation-delay:175ms; }
.ig-enter .chat-row:nth-child(7), .ig-enter .notif-row:nth-child(7), .ig-enter .grid-tile:nth-child(7), .ig-enter .ig-call-row:nth-child(7), .ig-enter .ig-adm-card:nth-child(7){ animation-delay:210ms; }
.ig-enter .chat-row:nth-child(8), .ig-enter .notif-row:nth-child(8), .ig-enter .grid-tile:nth-child(8), .ig-enter .ig-call-row:nth-child(8), .ig-enter .ig-adm-card:nth-child(8){ animation-delay:245ms; }
.ig-enter .chat-row:nth-child(9), .ig-enter .notif-row:nth-child(9), .ig-enter .grid-tile:nth-child(9), .ig-enter .ig-call-row:nth-child(9), .ig-enter .ig-adm-card:nth-child(9){ animation-delay:280ms; }
.ig-enter .chat-row:nth-child(10), .ig-enter .notif-row:nth-child(10), .ig-enter .grid-tile:nth-child(10), .ig-enter .ig-call-row:nth-child(10), .ig-enter .ig-adm-card:nth-child(10){ animation-delay:315ms; }
.ig-enter .chat-row:nth-child(11), .ig-enter .notif-row:nth-child(11), .ig-enter .grid-tile:nth-child(11), .ig-enter .ig-call-row:nth-child(11), .ig-enter .ig-adm-card:nth-child(11){ animation-delay:350ms; }
.ig-enter .chat-row:nth-child(12), .ig-enter .notif-row:nth-child(12), .ig-enter .grid-tile:nth-child(12), .ig-enter .ig-call-row:nth-child(12), .ig-enter .ig-adm-card:nth-child(12){ animation-delay:385ms; }
.ig-post.ig-rv{ opacity:0; translate:0 24px; }
.ig-post.ig-rv-in{ animation:igPostRise .5s cubic-bezier(.2,.8,.2,1) both; }

/* A thin bar runs along the top while something you asked for loads. */
.ig-progress{ position:fixed; top:0; left:0; right:0; height:2.5px; z-index:10001; pointer-events:none; transform-origin:0 50%; scale:0 1; opacity:0;
  background:linear-gradient(90deg, #ffd600, #ff7a00, #ff0069, #d300c5, #7638fa); }
.ig-progress.go{ opacity:1; animation:igProg 9s cubic-bezier(.1,.7,.2,1) forwards; }
.ig-progress.go.end{ animation:igProgEnd .4s ease forwards; }
@keyframes igProg{ from{ scale:0 1; } to{ scale:.92 1; } }
@keyframes igProgEnd{ 0%{ scale:.92 1; opacity:1; } 60%{ scale:1 1; opacity:1; } 100%{ scale:1 1; opacity:0; } }

/* Likes: a ring bursts out of the heart and the count slides up. */
.ig-act{ position:relative; }
.ig-act.liked.pop::after{ content:''; position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:2px solid #ff3040;
  pointer-events:none; animation:igRing .5s ease-out forwards; }
@keyframes igRing{ from{ opacity:.9; scale:.4; } to{ opacity:0; scale:1.6; } }
.ig-likes.bump{ animation:igBump .32s cubic-bezier(.2,.9,.25,1); }
@keyframes igBump{ from{ opacity:.3; translate:0 6px; } to{ opacity:1; translate:0 0; } }

/* Unread badges pop in. */
.ig-badge.show, .wa-badge.show, #notif-dot{ animation:igBadgeIn .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes igBadgeIn{ from{ scale:0; } to{ scale:1; } }

/* Typing: bouncing dots in the chat header and a typing bubble. */
.ig-dots{ display:inline-flex; align-items:flex-end; gap:2px; margin-left:3px; height:8px; }
.ig-dots i{ width:3.5px; height:3.5px; border-radius:50%; background:currentColor; animation:igDot 1.2s infinite ease-in-out; }
.ig-dots i:nth-child(2), .ig-typing-b i:nth-child(2){ animation-delay:.15s; }
.ig-dots i:nth-child(3), .ig-typing-b i:nth-child(3){ animation-delay:.3s; }
.bubble.ig-typing-b{ display:inline-flex; align-items:center; gap:4px; width:auto; min-width:0; padding:12px 14px; animation:igBubbleIn .26s cubic-bezier(.2,.9,.25,1); }
.ig-typing-b i{ width:7px; height:7px; border-radius:50%; background:#8e8e8e; animation:igDot 1.2s infinite ease-in-out; }
@keyframes igDot{ 0%, 60%, 100%{ opacity:.35; translate:0 0; } 30%{ opacity:1; translate:0 -3px; } }

/* The microphone and send buttons swap with a little turn. */
#ig-composer .ig-sendbtn, #ig-composer .ig-mic{ animation:igSwapIn .24s cubic-bezier(.3,1.4,.5,1); }
@keyframes igSwapIn{ from{ opacity:0; scale:.4; rotate:-35deg; } to{ opacity:1; scale:1; rotate:0deg; } }

/* Buttons and rows answer the finger. */
.ig-act svg, .ig-icon svg, .wa-tab .wa-ic{ transition:scale .12s ease; }
.ig-act:active svg, .ig-icon:active svg, .wa-tab:active .wa-ic{ scale:.86; }
.chat-row, .notif-row{ transition:background-color .15s ease; }
.chat-row:active, .notif-row:active{ background-color:rgba(0,0,0,.04); }
html.theme-dark .chat-row:active, html.theme-dark .notif-row:active{ background-color:rgba(255,255,255,.06); }

/* Computer: hovering a grid photo shows its likes and comments. */
.ig-tile-hover{ display:none; }
@media (hover:hover) and (min-width:1024px){
  .grid-tile{ position:relative; }
  .grid-tile .ig-tile-hover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:24px; background:rgba(0,0,0,.32); color:#fff;
    font-weight:700; font-size:16px; opacity:0; transition:opacity .18s ease; }
  .grid-tile:hover .ig-tile-hover{ opacity:1; }
  .ig-tile-hover > span{ display:inline-flex; align-items:center; gap:6px; }
  .ig-tile-hover svg{ width:20px; height:20px; fill:#fff; stroke:#fff; }
  .grid-tile img{ transition:opacity .35s ease, scale .35s ease; }
}

/* Light and dark: the new look spreads out in a circle. */
::view-transition-old(root), ::view-transition-new(root){ animation:none; mix-blend-mode:normal; }

@media (prefers-reduced-motion: reduce){
  .ig-post.ig-rv{ opacity:1; translate:none; }
  .ig-dots i, .ig-typing-b i, .ig-story-ring.ig-ring-load::before, .ig-ptr.spin svg{ animation:none !important; }
}

/* =========================================================
   @mentions, #hashtags, threaded comments
   ========================================================= */
.ig-at, .ig-tagl{ color:#00376b; cursor:pointer; text-decoration:none; font-weight:inherit; }
.ig-at:active, .ig-tagl:active{ opacity:.6; }
html.theme-dark .ig-at, html.theme-dark .ig-tagl{ color:#e0f1ff; }
.ig-prof-user{ font-size:13px; color:var(--ig-soft, #737373); margin-top:1px; }

/* Username field in Edit profile. */
.ig-un-field{ display:flex; align-items:center; border:1px solid var(--line, #dbdbdb); border-radius:10px; padding:0 10px; background:var(--card, #fff); }
.ig-un-field span{ color:#737373; font-size:15px; }
.weave-form .ig-un-field input{ border:none; outline:none; margin:0; padding:10px 4px; flex:1; min-width:0; background:transparent; box-shadow:none; }
.ig-un-hint{ font-size:12px; color:#737373; margin:4px 0 10px; }
html.theme-dark .ig-un-field{ border-color:#363636; background:#121212; }

/* Suggestions while typing @ or #. */
.ig-mention-box{ position:fixed; z-index:260; display:none; max-height:260px; overflow-y:auto; background:#fff; color:#000; border-radius:12px; padding:6px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); animation:igDialogIn .15s ease; }
.ig-ms-row{ display:flex; align-items:center; gap:10px; padding:7px 12px; cursor:pointer; }
.ig-ms-row:hover, .ig-ms-row:active{ background:rgba(0,0,0,.05); }
.ig-ms-user{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:3px; }
.ig-ms-name{ font-size:13px; color:#737373; }
.ig-ms-hash{ width:34px; height:34px; border-radius:50%; border:1px solid #dbdbdb; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.ig-sr-hash{ width:40px; height:40px; font-size:19px; }
html.theme-dark .ig-mention-box{ background:#262626; color:#f5f5f5; box-shadow:0 8px 30px rgba(0,0,0,.5); }
html.theme-dark .ig-ms-row:hover, html.theme-dark .ig-ms-row:active{ background:rgba(255,255,255,.06); }
html.theme-dark .ig-ms-name{ color:#a8a8a8; }
html.theme-dark .ig-ms-hash{ border-color:#363636; }

/* Hashtag page. */
.ig-tag-head{ display:flex; align-items:center; gap:18px; padding:8px 4px 18px; }
.ig-tag-ic{ width:78px; height:78px; border-radius:50%; border:1px solid #dbdbdb; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:300; flex-shrink:0; }
.ig-tag-name{ font-size:20px; font-weight:600; overflow-wrap:anywhere; }
.ig-tag-count{ font-size:14px; color:#737373; margin-top:2px; }
.ig-tag-empty{ font-size:34px; font-weight:300; }
.ig-tag-page .ig-grid{ margin:0 -16px; }
html.theme-dark .ig-tag-ic{ border-color:#363636; }
html.theme-dark .ig-tag-count{ color:#a8a8a8; }

/* Comments: likes, replies, delete. */
.ig-comment{ align-items:flex-start; }
.ig-comment.ig-reply{ gap:10px; padding-top:10px; }
.ig-cm-acts{ display:flex; gap:14px; margin-top:4px; font-size:12px; font-weight:600; color:#737373; }
.ig-cm-acts button{ background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; }
.ig-cm-like{ background:none; border:none; padding:6px 0 6px 6px; margin-top:6px; cursor:pointer; color:#737373; display:flex; flex-shrink:0; }
.ig-cm-like svg{ width:14px; height:14px; }
.ig-cm-like.on{ color:#ff3040; }
.ig-cm-like.pop svg{ animation:igPop .4s ease; }
.ig-replies{ padding-left:44px; }
.ig-view-replies{ display:flex; align-items:center; gap:12px; background:none; border:none; padding:8px 0 4px; font-size:12px; font-weight:600; color:#737373; cursor:pointer; }
.ig-view-replies i{ display:block; width:24px; height:1px; background:#c7c7c7; }
.ig-cm-replying{ display:flex; align-items:center; justify-content:space-between; margin:8px -16px 0; padding:8px 16px; background:#efefef; font-size:13px; color:#737373; }
.ig-cm-replying b{ color:#262626; }
.ig-cm-replying button{ background:none; border:none; padding:0; display:flex; color:#737373; cursor:pointer; }
.ig-cm-replying svg{ width:16px; height:16px; }
.ig-cm-replying + .ig-comment-bar{ margin-top:0; }
.ig-comment.ig-cm-new{ animation:igRise .35s cubic-bezier(.2,.8,.2,1); }
html.theme-dark .ig-cm-acts, html.theme-dark .ig-cm-like:not(.on), html.theme-dark .ig-view-replies{ color:#a8a8a8; }
html.theme-dark .ig-view-replies i{ background:#555; }
html.theme-dark .ig-cm-replying{ background:#262626; color:#a8a8a8; }
html.theme-dark .ig-cm-replying b{ color:#f5f5f5; }
.ig-enter .ig-notif{ animation:igRise .38s cubic-bezier(.2,.8,.2,1) both; }

/* Side menu pulled out with the finger on Home: no second slide-in once it is open. */
.side-menu-overlay.ig-menu-drag.active, .side-menu-overlay.ig-menu-drag.active .side-menu{ animation:none !important; }

/* Music: Haryanvi hits in groups. */
.ig-music-top{ padding:4px 2px 10px; }
.ig-music-title{ font-size:22px; font-weight:700; }
.ig-music-sub{ font-size:12.5px; color:#737373; margin-top:2px; }
.ig-music-chips{ margin:0 -2px 6px; padding-bottom:6px; }
.ig-music-h{ display:flex; align-items:center; gap:10px; margin:16px 2px 4px; }
.ig-music-h b{ font-size:16px; font-weight:700; flex:1; }
.ig-music-h button{ background:none; border:none; padding:4px 0; font-size:13px; font-weight:600; color:#0095f6; cursor:pointer; }
.ig-music-h1 b{ flex:none; }
.ig-music-h1 span{ flex:1; font-size:13px; color:#737373; }
.ig-music-h .ig-music-play{ width:44px; height:44px; border-radius:50%; background:#1db954; color:#fff; display:flex; align-items:center; justify-content:center; padding:0; }
.ig-music-play svg{ width:20px; height:20px; }
.ig-music-play:active{ scale:.92; }
.ig-track{ gap:12px; }
.ig-tr-n{ width:20px; text-align:center; font-size:13px; color:#737373; flex-shrink:0; font-variant-numeric:tabular-nums; }
.ig-tr-main{ flex:1; min-width:0; }
.ig-tr-main .track-title, .ig-tr-main .track-artist{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-track .track-art{ width:52px; height:52px; border-radius:6px; background:#efefef; }
.ig-tr-views{ font-size:12px; font-weight:600; color:#737373; text-align:right; flex-shrink:0; line-height:1.15; }
.ig-tr-views small{ display:block; font-size:10.5px; font-weight:400; }
.ig-track.playing .track-title{ color:#1db954; }
html.theme-dark .ig-music-sub, html.theme-dark .ig-music-h1 span, html.theme-dark .ig-tr-n, html.theme-dark .ig-tr-views{ color:#a8a8a8; }
html.theme-dark .ig-track .track-art{ background:#262626; }
html.theme-dark .ig-music-h button:not(.ig-music-play){ color:#4cb5f9; }
.ig-music-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
.ig-music-chips::-webkit-scrollbar{ display:none; }
.ig-music-chips .pill{ white-space:nowrap; flex-shrink:0; padding:7px 14px; border-radius:18px; border:none; font-size:13px; font-weight:600; background:#efefef; color:#000; }
.ig-music-chips .pill.active{ background:#000; color:#fff; }
body.ig-dark .ig-music-chips .pill, html.theme-dark .ig-music-chips .pill{ background:#262626; color:#f5f5f5; }
body.ig-dark .ig-music-chips .pill.active, html.theme-dark .ig-music-chips .pill.active{ background:#f5f5f5; color:#000; }
body.ig-dark .ig-music-sub, body.ig-dark .ig-tr-n, body.ig-dark .ig-tr-views{ color:#a8a8a8; }
body.ig-dark .ig-track .track-art{ background:#262626; }

/* =========================================================
   Music home (streaming-app style)
   ========================================================= */
#watch-music .ig-music-top{ display:none; }
.sp{ --sp-green:#1ed760; --sp-soft:#b3b3b3; color:#fff; padding-bottom:110px; }
.sp-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:2px -16px 14px; padding:0 16px; }
.sp-chips::-webkit-scrollbar, .sp-shelf::-webkit-scrollbar{ display:none; }
.sp-chip{ flex-shrink:0; white-space:nowrap; border:none; border-radius:999px; padding:8px 16px; font-size:14px; font-weight:500; background:#2a2a2a; color:#fff; cursor:pointer; transition:background-color .15s ease, scale .1s ease; }
.sp-chip.on{ background:var(--sp-green); color:#000; font-weight:600; }
.sp-chip:active{ scale:.95; }

/* Featured song. */
.sp-feat{ background:#1f1f1f; border-radius:10px; padding:14px; margin-bottom:26px; cursor:pointer; }
.sp-feat-img{ position:relative; aspect-ratio:16 / 9; border-radius:6px; overflow:hidden; background:#2a2a2a; }
.sp-feat-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-feat-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,0) 65%); }
.sp-feat-tag{ position:absolute; top:10px; left:10px; z-index:1; background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:700; padding:4px 8px; border-radius:4px; }
.sp-feat-name{ position:absolute; left:14px; bottom:14px; z-index:1; display:flex; flex-direction:column; max-width:60%; }
.sp-feat-name b{ font-size:30px; line-height:1; font-weight:800; letter-spacing:-.5px; }
.sp-feat-name span{ font-size:12px; margin-top:6px; opacity:.85; text-transform:uppercase; letter-spacing:1px; }
.sp-feat-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.sp-feat-bar span{ font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-listen{ flex-shrink:0; border:none; border-radius:999px; background:#fff; color:#000; font-weight:700; font-size:14px; padding:10px 22px; cursor:pointer; }
.sp-listen:active{ scale:.96; }

/* Sections and shelves. */
.sp-sec{ margin-bottom:28px; }
.sp-sec-sub{ font-size:13px; color:var(--sp-soft); margin-bottom:2px; }
.sp-h{ font-size:22px; font-weight:700; letter-spacing:-.3px; margin:0 0 12px; color:#fff; }
.sp-shelf{ display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; scroll-snap-type:x mandatory; scroll-padding:0 16px; }
.sp-shelf > *{ scroll-snap-align:start; flex-shrink:0; cursor:pointer; }

/* Rows (Start listening, playlists). */
.sp-cols > .sp-col{ width:calc(100% - 44px); display:flex; flex-direction:column; gap:10px; }
.sp-row{ display:flex; align-items:center; gap:12px; min-width:0; cursor:pointer; border-radius:6px; }
.sp-row:active{ background:rgba(255,255,255,.06); }
.sp-row img{ width:52px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#2a2a2a; }
.sp-row-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sp-row-txt b{ font-size:15px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-row-txt span{ font-size:13px; color:var(--sp-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sp-row.playing .sp-row-txt b{ color:var(--sp-green); }
.sp-more{ background:none; border:none; color:var(--sp-soft); padding:8px; display:flex; cursor:pointer; flex-shrink:0; }
.sp-more svg{ width:20px; height:20px; }

/* Genre cards. */
.sp-genre{ position:relative; width:150px; aspect-ratio:2 / 3; border-radius:8px; overflow:hidden; background:#2a2a2a; }
.sp-genre img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-genre::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 45%); }
.sp-genre b{ position:absolute; left:12px; right:10px; bottom:12px; z-index:1; font-size:15px; font-weight:700; }

/* Playlist covers. */
.sp-pl{ width:150px; }
.sp-pl > span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; color:var(--sp-soft); margin-top:8px; line-height:1.35; }
.sp-cover{ position:relative; width:150px; aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--c); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.sp-cover img{ position:absolute; left:0; right:0; top:0; height:78%; width:100%; object-fit:cover; }
.sp-cover::after{ content:''; position:absolute; left:0; right:0; top:0; height:78%; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 45%); }
.sp-cover-txt{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:space-between; padding:8px 10px 6px; }
.sp-cover-txt b{ font-size:21px; line-height:1; font-weight:900; letter-spacing:-.5px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.sp-cover-txt span{ align-self:flex-start; background:var(--c); font-size:11px; font-weight:800; letter-spacing:1px; padding:2px 0; }
.sp-cover.big{ width:min(230px, 62vw); margin:0 auto 18px; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.sp-cover.big .sp-cover-txt b{ font-size:32px; }
.sp-cover.big .sp-cover-txt span{ font-size:14px; }

/* Artists. */
.sp-artist{ width:130px; text-align:center; }
.sp-artist-img{ width:130px; height:130px; border-radius:50%; overflow:hidden; background:#2a2a2a; }
.sp-artist-img img{ width:100%; height:100%; object-fit:cover; }
.sp-artist b{ display:block; font-size:14px; font-weight:600; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Song cards. */
.sp-card{ width:150px; }
.sp-card-img{ position:relative; width:150px; aspect-ratio:1; border-radius:6px; overflow:hidden; background:#2a2a2a; }
.sp-card-img img{ width:100%; height:100%; object-fit:cover; }
.sp-card-play{ position:absolute; right:8px; bottom:8px; width:40px; height:40px; border-radius:50%; background:var(--sp-green); color:#000; display:flex; align-items:center; justify-content:center;
  opacity:0; translate:0 8px; transition:opacity .2s ease, translate .2s ease; box-shadow:0 6px 14px rgba(0,0,0,.4); }
.sp-card-play svg{ width:18px; height:18px; }
.sp-card.playing .sp-card-play, .sp-card:hover .sp-card-play{ opacity:1; translate:0 0; }
.sp-card b{ display:block; font-size:14px; font-weight:600; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-card.playing b{ color:var(--sp-green); }
.sp-card > span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; color:var(--sp-soft); margin-top:2px; line-height:1.35; }
.sp-note{ font-size:12px; color:#6a6a6a; text-align:center; margin-top:8px; }

/* Playlist page (and a group chosen from the pills). */
.ig-sp-page{ background:#121212; color:#fff; }
.sp-page-top{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; gap:14px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; transition:background-color .2s ease; }
.sp-page-top button{ width:34px; height:34px; border-radius:50%; border:none; background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sp-page-top span{ font-weight:700; font-size:16px; opacity:0; transition:opacity .2s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-sp-page.sp-scrolled .sp-page-top{ background:#1f1f1f; }
.ig-sp-page.sp-scrolled .sp-page-top span{ opacity:1; }
.sp-page-body{ flex:1; overflow-y:auto; padding:0 16px 120px; }
.sp-pl-head{ margin:0 -16px; padding:calc(64px + env(safe-area-inset-top)) 16px 4px; background:linear-gradient(180deg, var(--c) 0%, #121212 75%); }
.sp-inline .sp-pl-head{ margin:0 -16px; padding-top:20px; border-radius:10px 10px 0 0; }
.sp-pl-title{ font-size:26px; font-weight:800; letter-spacing:-.5px; margin:0 0 6px; color:#fff; }
.sp-pl-desc{ font-size:14px; color:#d6d6d6; }
.sp-pl-meta{ font-size:13px; color:var(--sp-soft); margin-top:6px; }
.sp-pl-stats{ font-size:13px; color:var(--sp-soft); margin-top:6px; }
.sp-pl-actions{ display:flex; align-items:center; justify-content:flex-end; gap:18px; margin:6px 0 10px; }
.sp-shuffle{ background:none; border:none; color:var(--sp-soft); padding:6px; display:flex; cursor:pointer; }
.sp-shuffle svg{ width:24px; height:24px; }
.sp-bigplay{ width:56px; height:56px; border-radius:50%; border:none; background:var(--sp-green); color:#000; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.4); transition:scale .1s ease; }
.sp-bigplay svg{ width:24px; height:24px; }
.sp-bigplay:active{ scale:.93; }
.sp-pl-list{ display:flex; flex-direction:column; gap:12px; padding-top:4px; }
.sp-art-big{ width:min(200px, 55vw); aspect-ratio:1; border-radius:50%; overflow:hidden; margin:0 auto 18px; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.sp-art-big img{ width:100%; height:100%; object-fit:cover; }
.sp-menu-head{ display:flex; align-items:center; gap:12px; margin:4px 0 12px; }
.sp-menu-head img{ width:56px; height:56px; border-radius:4px; object-fit:cover; }
.sp-menu-head b{ display:block; font-size:16px; }
.sp-menu-head span{ font-size:13px; color:#737373; }
a.weave-menu-item{ color:inherit; text-decoration:none; }
@media (min-width:1024px){
  .sp-cols > .sp-col{ width:360px; }
  .sp-genre, .sp-pl, .sp-cover:not(.big), .sp-card, .sp-card-img{ width:170px; }
  .sp-artist, .sp-artist-img{ width:150px; } .sp-artist-img{ height:150px; }
}
.ig-sp-page{ --sp-green:#1ed760; --sp-soft:#b3b3b3; }

/* Reels area bottom bar (phones). */
@media (max-width:1023px){
  body.rl-mode #floating-nav{ display:none !important; }
  body.rl-mode .rl-nav{ display:flex; animation:igFadeIn .25s ease; background:rgba(22,22,22,.82); box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); }
  .rl-nav .wa-tab, .rl-nav .wa-home{ color:#fff; }
  .rl-nav .wa-tab.active{ background:rgba(255,255,255,.16); }
  .rl-nav .wa-tab:active{ background:rgba(255,255,255,.22); }
  /* The top strip shows only the open section and the Add button. */
  body.rl-mode #view-watch .pill-tabs .pill:not(.active){ display:none; }
  body.rl-mode #view-watch .pill-tabs .pill.active{ background:none; color:#fff; font-size:22px; font-weight:700; padding-left:0; pointer-events:none; }
  body.rl-mode .now-playing{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}
.rl-nav{ display:none; }
body:not(.rl-mode) .rl-nav{ display:none !important; }

/* =========================================================
   Rang Patte (online card game)
   ========================================================= */
.rp-gamecard{ position:relative; background:linear-gradient(135deg, #fff5f5, #f0f7ff); }
.rp-live{ position:absolute; top:8px; right:8px; background:#ff3040; color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.6px; padding:2px 6px; border-radius:4px; }
html.theme-dark .rp-gamecard{ background:linear-gradient(135deg, #2a1515, #14202e); }
.ig-rp-page{ background:#fff; color:#000; }
html.theme-dark .ig-rp-page{ background:#000; color:#f5f5f5; }
.ig-rp-page.rp-table-on{ background:#0d3b2e; color:#fff; }
.rp-top{ display:flex; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; }
.rp-top button{ background:none; border:none; color:inherit; padding:4px; display:flex; cursor:pointer; }
.rp-top b{ flex:1; font-size:17px; }
#rp-timer{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.15); }
#rp-timer:empty{ display:none; }
#rp-timer.low{ background:#ff3040; color:#fff; animation:igPop .5s ease infinite alternate; }
.rp-body{ flex:1; overflow-y:auto; padding:0 16px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; }
.rp-h{ font-size:22px; font-weight:700; margin:6px 0 6px; text-align:center; }
.rp-p{ font-size:14px; line-height:1.45; color:#555; text-align:center; margin:0 0 12px; }
html.theme-dark .rp-p{ color:#bbb; }
.rp-muted{ color:#8e8e8e !important; font-size:13px; }
.rp-sec{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#8e8e8e; margin:14px 0 6px; }
.rp-person{ display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer; }
.rp-av{ position:relative; display:flex; }
.rp-dot{ position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%; background:#31d158; border:2px solid #fff; }
html.theme-dark .rp-dot{ border-color:#000; }
.rp-pn{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rp-pn b{ font-size:15px; }
.rp-pn span{ font-size:12.5px; color:#31a24c; }
.rp-check{ width:26px; height:26px; border-radius:50%; border:2px solid #c7c7c7; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; transition:all .15s ease; }
.rp-check.on{ background:#0095f6; border-color:#0095f6; color:#fff; }
.rp-tag{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:#efefef; color:#555; }
.rp-tag.ok{ background:#e7f8ec; color:#1b8f3c; }
.rp-tag.no{ background:#fdecec; color:#c62828; }
html.theme-dark .rp-tag{ background:#262626; color:#bbb; }
.rp-actions{ display:flex; flex-direction:column; gap:10px; margin:18px 0 10px; }
.rp-btn{ border:none; border-radius:12px; padding:13px 16px; font-size:15px; font-weight:700; background:#efefef; color:#000; cursor:pointer; transition:scale .1s ease, opacity .15s ease; }
.rp-btn:active{ scale:.97; }
.rp-btn:disabled{ opacity:.45; }
.rp-btn.primary{ background:#0095f6; color:#fff; }
.rp-btn.small{ padding:7px 14px; font-size:13px; border-radius:9px; }
html.theme-dark .rp-btn:not(.primary){ background:#262626; color:#f5f5f5; }
.rp-link{ background:none; border:none; color:#0095f6; font-weight:600; font-size:14px; padding:10px; cursor:pointer; }
.rp-hero{ display:flex; justify-content:center; padding:16px 0 8px; height:130px; }
.rp-hero .rp-card{ width:70px; height:105px; margin:0 -10px; }
.rp-hero .tilt1{ rotate:-14deg; translate:0 10px; } .rp-hero .tilt3{ rotate:14deg; translate:0 10px; }
.rp-hero.small{ height:110px; } .rp-hero.small .rp-card{ width:56px; height:84px; }
.rp-wait{ margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 0; }
.rp-spin{ animation:rpFlip 1s ease-in-out infinite; }
@keyframes rpFlip{ 50%{ rotate:y 180deg; } }

/* Cards. */
.rp-card{ --cc:#111; position:relative; flex-shrink:0; width:64px; height:96px; border-radius:9px; background:var(--cc); border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.3);
  color:#fff; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; overflow:hidden; }
.rp-card.c-r{ --cc:#e53935; } .rp-card.c-g{ --cc:#2e9e44; } .rp-card.c-b{ --cc:#1e78e0; } .rp-card.c-y{ --cc:#f2b705; } .rp-card.c-w{ --cc:#141414; }
.rp-oval{ position:absolute; inset:14% 8%; border-radius:50%; background:#fff; rotate:-28deg; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rp-oval b{ rotate:28deg; color:var(--cc); font-size:30px; font-weight:900; line-height:1; display:flex; text-shadow:1px 1px 0 rgba(0,0,0,.15); }
.rp-oval b svg{ width:30px; height:30px; }
.rp-card.wild .rp-oval{ background:none; }
.rp-wheel{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(#e53935 0 25%, #1e78e0 0 50%, #f2b705 0 75%, #2e9e44 0); }
.rp-card.wild .rp-oval b{ position:relative; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.rp-cn{ position:absolute; top:3px; left:5px; font-size:12px; font-weight:900; line-height:1; }
.rp-cn.br{ top:auto; left:auto; bottom:3px; right:5px; rotate:180deg; }
.rp-card.back{ --cc:#141414; background:radial-gradient(circle at 50% 50%, #3a0d0d, #141414 70%); }
.rp-card.back .rp-oval{ background:#e53935; }
.rp-card.back .rp-oval b{ color:#ffd60a; font-size:19px; font-style:italic; letter-spacing:-1px; }

/* The table. */
.rp-table{ position:relative; flex:1; display:flex; flex-direction:column; gap:12px; min-height:100%; }
.rp-opps{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding-top:4px; }
.rp-opp{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:84px; padding:8px 6px; border-radius:14px; background:rgba(255,255,255,.07); transition:background-color .2s ease, box-shadow .2s ease; }
.rp-opp b{ font-size:13px; }
.rp-opp.turn{ background:rgba(255,255,255,.18); box-shadow:0 0 0 2px #ffd60a; }
.rp-opp .ig-avatar, .rp-opp img{ border-radius:50%; }
.rp-fan{ position:relative; height:22px; width:56px; }
.rp-fan i{ position:absolute; left:calc(50% - 7px + (var(--k) - 3) * 5px); top:2px; width:14px; height:20px; border-radius:3px; background:#141414; border:1.5px solid #fff; rotate:calc((var(--k) - 3) * 7deg); }
.rp-count{ font-size:11.5px; opacity:.85; }
.rp-count.last{ color:#ffd60a; font-weight:800; opacity:1; animation:igPop .6s ease infinite alternate; }
.rp-center{ display:flex; align-items:center; justify-content:center; gap:26px; padding:18px 0 6px; }
.rp-pile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.rp-pile .rp-card{ width:76px; height:114px; }
.rp-pile .stack{ position:absolute; top:-4px; left:4px; z-index:-1; opacity:.7; }
.rp-pile span{ font-size:12px; font-weight:600; opacity:.85; }
.rp-pile.can .rp-card:first-child{ box-shadow:0 0 0 3px #ffd60a, 0 6px 18px rgba(0,0,0,.4); animation:rpBob 1.2s ease-in-out infinite; }
.rp-pile.can span{ color:#ffd60a; opacity:1; }
@keyframes rpBob{ 50%{ translate:0 -5px; } }
.rp-discard{ position:relative; }
.rp-discard .rp-card{ width:86px; height:129px; }
.rp-discard .rp-oval b{ font-size:38px; } .rp-discard .rp-oval b svg{ width:38px; height:38px; }
.rp-discard .rp-card.land{ animation:rpLand .35s cubic-bezier(.2,1.2,.3,1); }
@keyframes rpLand{ from{ translate:0 60px; scale:.7; rotate:-20deg; opacity:.4; } to{ translate:0 0; scale:1; rotate:0deg; opacity:1; } }
.rp-dir{ position:absolute; top:-12px; right:-14px; width:26px; height:26px; border-radius:50%; background:#fff; color:#0d3b2e; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; animation:rpSpin 3s linear infinite; }
.rp-dir.ccw{ animation-direction:reverse; scale:-1 1; }
@keyframes rpSpin{ to{ rotate:360deg; } }
.rp-colour{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.rp-colour i{ width:28px; height:28px; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.rp-colour i.c-r{ background:#e53935; } .rp-colour i.c-g{ background:#2e9e44; } .rp-colour i.c-b{ background:#1e78e0; } .rp-colour i.c-y{ background:#f2b705; }
.rp-status{ text-align:center; font-size:15px; font-weight:700; padding:4px 10px; }
.rp-status.mine{ color:#ffd60a; }
.rp-log{ text-align:center; font-size:13px; opacity:.8; min-height:18px; }
.rp-me{ margin-top:auto; background:rgba(0,0,0,.25); border-radius:18px 18px 0 0; margin-left:-16px; margin-right:-16px; padding:10px 0 calc(10px + env(safe-area-inset-bottom)); transition:background-color .2s ease; }
.rp-me.turn{ background:rgba(255,214,10,.14); }
.rp-me-bar{ display:flex; align-items:center; justify-content:space-between; padding:0 16px 6px; font-size:13px; font-weight:600; opacity:.9; min-height:32px; }
.rp-hand{ display:flex; overflow-x:auto; scrollbar-width:none; padding:18px 16px 6px; }
.rp-hand::-webkit-scrollbar{ display:none; }
.rp-hand .rp-card{ width:70px; height:105px; margin-right:-14px; cursor:pointer; transition:translate .15s ease, filter .15s ease; animation:rpDeal .35s cubic-bezier(.2,.9,.25,1) both; animation-delay:calc(var(--i) * 25ms); }
.rp-hand .rp-card:last-child{ margin-right:16px; }
.rp-hand .rp-card.ok{ translate:0 -14px; box-shadow:0 0 0 2px #ffd60a, 0 8px 18px rgba(0,0,0,.4); }
.rp-hand .rp-card.ok:active{ translate:0 -20px; }
.rp-hand .rp-card.dim{ filter:brightness(.55); }
.rp-hand .rp-card.fresh{ animation:rpLand .4s cubic-bezier(.2,1.2,.3,1); }
@keyframes rpDeal{ from{ translate:0 40px; opacity:0; } to{ opacity:1; } }
.rp-end{ display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-bottom:10px; }
.rp-pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rp-pick button{ border:none; border-radius:14px; height:72px; font-size:16px; font-weight:800; color:#fff; cursor:pointer; }
.rp-pick .c-r{ background:#e53935; } .rp-pick .c-g{ background:#2e9e44; } .rp-pick .c-b{ background:#1e78e0; } .rp-pick .c-y{ background:#f2b705; }
.rp-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.rp-confetti i{ position:absolute; top:-12px; width:8px; height:14px; background:var(--c); border-radius:2px; animation:rpFall 2.4s ease-in var(--d) forwards; }
@keyframes rpFall{ to{ translate:0 110vh; rotate:720deg; } }

/* Invite pop-up. */
.rp-invite{ position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; translate:-50% 0; z-index:9000; width:calc(100% - 20px); max-width:440px; display:flex; align-items:center; gap:10px;
  background:#fff; color:#000; border-radius:16px; padding:10px 10px 10px 12px; box-shadow:0 12px 40px rgba(0,0,0,.25); animation:rpDrop .4s cubic-bezier(.2,1.2,.3,1); }
@keyframes rpDrop{ from{ translate:-50% -120%; } to{ translate:-50% 0; } }
.rp-inv-av{ position:relative; display:flex; }
.rp-inv-av i{ position:absolute; right:-4px; bottom:-4px; font-style:normal; font-size:16px; }
.rp-inv-txt{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:14px; }
.rp-inv-txt span{ font-size:13px; color:#737373; }
.rp-inv-x{ background:none; border:none; padding:6px; color:#737373; display:flex; cursor:pointer; }
.rp-inv-x svg{ width:18px; height:18px; }
html.theme-dark .rp-invite{ background:#262626; color:#f5f5f5; }
@media (min-width:1024px){ .rp-body{ max-width:640px; width:100%; margin:0 auto; } }

/* ---------- Rang Patte table, card-game style ---------- */
.ig-rp-page.rp-table-on{ background:#0a1a3d; }
.ig-rp-page.rp-table-on .rp-top{ position:absolute; top:0; left:0; right:0; z-index:20; color:#fff; }
.ig-rp-page.rp-table-on .rp-body{ padding:0; }
.rp-table2{ --tc:#1565c0; position:relative; flex:1; min-height:100%; overflow:hidden; color:#fff;
  background-color:var(--tc); background-image:radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.16), rgba(0,0,0,.25) 45%, rgba(0,0,0,.72) 100%);
  transition:background-color .6s ease; }
.rp-table2[data-c="r"]{ --tc:#c62828; } .rp-table2[data-c="g"]{ --tc:#2e7d32; } .rp-table2[data-c="b"]{ --tc:#1565c0; } .rp-table2[data-c="y"]{ --tc:#b8860b; }
.rp-card::after{ content:''; position:absolute; inset:0; border-radius:6px; pointer-events:none; background:linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%); }

/* Seats. */
.rp-seat{ position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; gap:4px; width:110px; transition:scale .25s ease; }
.rp-seat.s-top{ top:calc(56px + env(safe-area-inset-top)); left:50%; margin-left:-55px; }
.rp-seat.s-tl{ top:calc(60px + env(safe-area-inset-top)); left:6%; }
.rp-seat.s-tr{ top:calc(60px + env(safe-area-inset-top)); right:6%; }
.rp-seat.s-left{ top:26%; left:2%; }
.rp-seat.s-right{ top:26%; right:2%; }
.rp-seat.turn{ scale:1.08; }
.rp-seat b{ font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.rp-ava{ --p:0; position:relative; border-radius:50%; padding:4px; display:flex;
  background:conic-gradient(#ffd60a calc(var(--p) * 360deg), rgba(255,255,255,.18) 0); transition:background .3s linear; }
.rp-ava > *{ border-radius:50%; box-shadow:0 0 0 3px rgba(0,0,0,.35); }
.rp-seat.turn .rp-ava{ box-shadow:0 0 22px rgba(255,214,10,.65); }
.rp-seat.won .rp-ava{ background:#ffd60a; }
.rp-fan2{ position:relative; width:90px; height:34px; }
.rp-fan2 i{ position:absolute; left:calc(50% - 11px + (var(--k) - (var(--n) - 1) / 2) * 8px); top:2px; width:22px; height:32px; border-radius:4px; border:2px solid #fff;
  background:radial-gradient(circle, #e53935 38%, #141414 40%); rotate:calc((var(--k) - (var(--n) - 1) / 2) * 9deg); transform-origin:50% 120%; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.rp-n{ min-width:26px; text-align:center; font-size:12px; font-weight:800; background:rgba(0,0,0,.45); border-radius:999px; padding:2px 8px; }
.rp-n.last{ background:#ffd60a; color:#000; animation:igPop .6s ease infinite alternate; }

/* Middle: deck, pile and the direction ring. */
.rp-mid{ position:absolute; left:50%; top:46%; translate:-50% -50%; z-index:2; display:flex; align-items:center; gap:30px; padding:40px 46px; }
.rp-ring{ position:absolute; inset:0; border-radius:50%; border:3px dashed rgba(255,255,255,.22); animation:rpSpin 14s linear infinite; }
.rp-ring.ccw{ animation-direction:reverse; }
.rp-ring i{ position:absolute; width:0; height:0; border:9px solid transparent; border-left:14px solid rgba(255,255,255,.55); }
.rp-ring i:first-child{ top:-10px; left:50%; } .rp-ring i:last-child{ bottom:-10px; right:50%; rotate:180deg; }
.rp-ring.ccw i{ scale:-1 1; }
.rp-deck{ position:relative; width:84px; height:126px; cursor:pointer; }
.rp-deck .rp-card{ position:absolute; inset:0; width:84px; height:126px; }
.rp-deck .d2{ translate:3px -3px; } .rp-deck .d3{ translate:6px -6px; }
.rp-deck.can .d1{ box-shadow:0 0 0 3px #ffd60a, 0 0 28px rgba(255,214,10,.6); animation:rpBob 1.1s ease-in-out infinite; }
.rp-draw-tag{ position:absolute; left:50%; bottom:-30px; translate:-50% 0; font-size:12px; font-weight:900; letter-spacing:1px; background:#ffd60a; color:#000; padding:3px 10px; border-radius:999px; }
.rp-pile2 .rp-card{ width:100px; height:150px; rotate:-6deg; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.rp-pile2 .rp-oval b{ font-size:46px; } .rp-pile2 .rp-oval b svg{ width:46px; height:46px; } .rp-pile2 .rp-cn{ font-size:15px; }
.rp-say{ position:absolute; left:0; right:0; top:calc(46% + 110px); z-index:2; text-align:center; font-size:16px; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.rp-say.mine{ color:#ffd60a; font-size:20px; animation:igPop .5s ease; }
.rp-banner{ position:absolute; left:50%; top:46%; translate:-50% -50%; z-index:15; pointer-events:none; opacity:0; font-size:54px; font-weight:900; font-style:italic; letter-spacing:-1px; color:#fff;
  -webkit-text-stroke:3px rgba(0,0,0,.55); paint-order:stroke fill; text-shadow:0 6px 24px rgba(0,0,0,.5); white-space:nowrap; }
.rp-banner.show{ animation:rpBanner 1.2s cubic-bezier(.2,1.2,.3,1) forwards; }
.rp-banner.c-r{ color:#ff5252; } .rp-banner.c-g{ color:#4cd964; } .rp-banner.c-b{ color:#4aa3ff; } .rp-banner.c-y{ color:#ffd60a; }
@keyframes rpBanner{ 0%{ opacity:0; scale:.3; rotate:-12deg; } 25%{ opacity:1; scale:1.12; rotate:-4deg; } 40%{ scale:1; } 80%{ opacity:1; } 100%{ opacity:0; scale:1.2; } }

/* My hand: a fan along the bottom. */
.rp-mine2{ position:absolute; left:0; right:0; bottom:0; z-index:4; height:calc(212px + env(safe-area-inset-bottom)); }
.rp-mine2.turn::before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(255,214,10,.25), rgba(255,214,10,0)); pointer-events:none; }
.rp-hand2{ position:absolute; left:8px; right:8px; bottom:calc(58px + env(safe-area-inset-bottom)); height:140px; }
.rp-hand2 .rp-card{ position:absolute; left:var(--x); bottom:0; width:80px; height:120px; translate:0 var(--y); rotate:var(--r); transform-origin:50% 115%; cursor:pointer;
  transition:translate .18s ease, filter .18s ease, left .25s ease, rotate .25s ease; }
.rp-hand2 .rp-card.ok{ translate:0 calc(var(--y) - 24px); box-shadow:0 0 0 3px #ffd60a, 0 10px 22px rgba(0,0,0,.45); }
.rp-hand2 .rp-card.ok:hover{ translate:0 calc(var(--y) - 34px); }
.rp-hand2 .rp-card.dim{ filter:brightness(.6) saturate(.8); }
.rp-mebar{ position:absolute; left:0; right:0; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; gap:12px; }
.rp-ava.me{ padding:3px; }
.rp-mecount{ font-size:13px; font-weight:700; background:rgba(0,0,0,.4); padding:4px 12px; border-radius:999px; }
.rp-pass{ background:#fff !important; color:#000 !important; }

/* Game over. */
.rp-over{ position:absolute; inset:0; z-index:12; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); animation:igFadeIn .3s ease; }
.rp-over-card{ display:flex; flex-direction:column; align-items:center; gap:12px; width:min(300px, 84%); padding:26px 20px; border-radius:22px; background:rgba(20,20,20,.88); animation:rpLand .5s cubic-bezier(.2,1.2,.3,1); }
.rp-over-card h2{ margin:4px 0 8px; font-size:28px; font-weight:900; }
.rp-over-card .rp-btn{ width:100%; }

@media (min-width:1024px){
  .rp-pile2 .rp-card{ width:120px; height:180px; }
  .rp-deck, .rp-deck .rp-card{ width:100px; height:150px; }
  .rp-hand2 .rp-card{ width:96px; height:144px; }
  .rp-hand2{ height:170px; left:20%; right:20%; }
  .rp-mine2{ height:250px; }
  .rp-seat{ width:140px; }
  .rp-say{ top:calc(46% + 130px); }
}
@media (max-height:640px){ .rp-mid{ top:43%; scale:.85; } .rp-say{ top:calc(43% + 92px); } }
/* Phones: side players sit above the middle, and the middle shrinks a little so nothing overlaps. */
@media (max-width:1023px){
  .rp-mid{ top:52%; scale:.82; }
  .rp-say{ top:calc(52% + 96px); }
  .rp-banner{ top:52%; }
  .rp-seat{ width:92px; }
  .rp-seat.s-left, .rp-seat.s-right{ top:calc(118px + env(safe-area-inset-top)); }
  .rp-seat.s-left{ left:1%; } .rp-seat.s-right{ right:1%; }
  .rp-seat.s-tl{ left:8%; } .rp-seat.s-tr{ right:8%; }
  .rp-fan2{ width:80px; }
}
@media (max-width:1023px) and (max-height:700px){ .rp-mid{ top:50%; scale:.72; } .rp-say{ top:calc(50% + 84px); } }
.rp-n.last{ font-size:10px; padding:2px 6px; white-space:nowrap; } .rp-seat.s-left{ left:6px; } .rp-seat.s-right{ right:6px; }
.rp-hand2.rp-measure .rp-card{ transition:none !important; }
@media (min-width:1024px){ .ig-rp-page.rp-table-on .rp-body{ max-width:none; } }

/* Reels follow the chosen look: in Light mode the page, sidebar, tabs and bottom bar are light;
   the videos themselves stay on black. */
html:not(.theme-dark) body.ig-dark, html:not(.theme-dark) body.ig-dark #app{ background:#fff; }
html:not(.theme-dark) body.ig-dark #app{ border-color:#dbdbdb; }
html:not(.theme-dark) #view-watch{ color:#000; }
html:not(.theme-dark) #view-watch .pill-tabs{ background:#fff; }
html:not(.theme-dark) #view-watch .pill{ color:rgba(0,0,0,.4); }
html:not(.theme-dark) #view-watch .pill.active, html:not(.theme-dark) body.rl-mode #view-watch .pill-tabs .pill.active{ color:#000; }
html:not(.theme-dark) .ig-reel-add{ background:#efefef; color:#000; }
html:not(.theme-dark) body.ig-dark .ig-tabbar{ background:#fff; border-top-color:#dbdbdb; }
html:not(.theme-dark) body.ig-dark .ig-tabbar .navitem{ color:#000; }
html:not(.theme-dark) #view-watch .reel{ color:#fff; }
@media (max-width:1023px){
  html:not(.theme-dark) body.rl-mode .rl-nav{ background:rgba(255,255,255,.86); box-shadow:0 10px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); }
  html:not(.theme-dark) .rl-nav .wa-tab{ color:#000; }
  html:not(.theme-dark) .rl-nav .wa-tab.active{ background:rgba(0,0,0,.08); }
}
@media (min-width:1024px){
  html:not(.theme-dark) body.ig-dark .dk-side{ background:#fff; border-right-color:#dbdbdb; }
  html:not(.theme-dark) body.ig-dark .dk-logo, html:not(.theme-dark) body.ig-dark .dk-item, html:not(.theme-dark) body.ig-dark .dk-logo .ig-logo{ color:#000; }
  html:not(.theme-dark) body.ig-dark .dk-logo-mark{ filter:none; }
  html:not(.theme-dark) body.ig-dark .dk-item .ig-fill svg [stroke="#fff"]{ stroke:#fff; }
  html:not(.theme-dark) body.ig-dark .dk-item:hover{ background:rgba(0,0,0,.05); }
  html:not(.theme-dark) body.ig-dark .dk-ic .notif-dot{ border-color:#fff; }
  html:not(.theme-dark) body.ig-dark .dk-item.active .ig-nav-avatar{ box-shadow:0 0 0 1.5px #fff, 0 0 0 3px #000; }
}

/* Music, Videos and playlist pages follow Light / Dark too. */
html:not(.theme-dark) .sp, html:not(.theme-dark) .ig-sp-page{ --sp-soft:#6a6a6a; color:#000; }
html:not(.theme-dark) .sp-h, html:not(.theme-dark) .sp-pl-title{ color:#000; }
html:not(.theme-dark) .sp-chip{ background:#efefef; color:#000; }
html:not(.theme-dark) .sp-chip.on{ background:#1ed760; color:#000; }
html:not(.theme-dark) .sp-feat{ background:#f3f3f3; }
html:not(.theme-dark) .sp-listen{ background:#000; color:#fff; }
html:not(.theme-dark) .sp-row-txt b{ color:#000; }
html:not(.theme-dark) .sp-row.playing .sp-row-txt b, html:not(.theme-dark) .sp-card.playing b{ color:#14a64a; }
html:not(.theme-dark) .sp-row:active{ background:rgba(0,0,0,.05); }
html:not(.theme-dark) .sp-row img, html:not(.theme-dark) .sp-card-img, html:not(.theme-dark) .sp-artist-img, html:not(.theme-dark) .sp-genre{ background:#eee; }
html:not(.theme-dark) .sp-note{ color:#8e8e8e; }
html:not(.theme-dark) .ig-sp-page{ background:#fff; }
html:not(.theme-dark) .sp-page-top button{ background:rgba(255,255,255,.75); color:#000; }
html:not(.theme-dark) .ig-sp-page.sp-scrolled .sp-page-top{ background:#f3f3f3; color:#000; }
html:not(.theme-dark) .sp-pl-head{ background:linear-gradient(180deg, var(--c) 0%, #fff 78%); }
html:not(.theme-dark) .sp-pl-desc{ color:#333; }
html:not(.theme-dark) #view-watch .watch-card{ background:#fff; border-color:#dbdbdb; color:#000; }
html:not(.theme-dark) #view-watch .watch-sub{ color:#737373; }
html:not(.theme-dark) #view-watch .track-artist, html:not(.theme-dark) #view-watch .track-dur{ color:#737373; }

/* Save to My playlist. */
.sp-save{ background:none; border:none; padding:6px; display:flex; cursor:pointer; color:var(--sp-soft, #b3b3b3); flex-shrink:0; transition:scale .12s ease; }
.sp-save svg{ width:22px; height:22px; }
.sp-save:active{ scale:.85; }
.sp-save.on svg{ animation:igPop .35s ease; }
.sp-mine-cover{ background:linear-gradient(135deg, #5038a0, #b06ab3); display:flex; align-items:center; justify-content:center; }
.sp-mine-ic{ color:#fff; display:flex; } .sp-mine-ic svg{ width:84px; height:84px; stroke-width:1.6; }
.sp-empty{ text-align:center; color:var(--sp-soft, #8e8e8e); font-size:14px; line-height:1.5; padding:30px 10px; display:flex; flex-direction:column; align-items:center; gap:14px; }

/* Search box in the Videos and Music top bar (Add reel stays on Reels). */
.rl-search{ display:none; align-items:center; gap:6px; margin-left:auto; flex:1; max-width:340px; min-width:0; height:36px; padding:0 10px; border-radius:10px; background:rgba(255,255,255,.14); color:inherit; }
.rl-search svg{ width:17px; height:17px; flex-shrink:0; opacity:.7; }
.rl-search input{ flex:1; min-width:0; border:none; outline:none; background:none; color:inherit; font-size:15px; padding:0; -webkit-appearance:none; appearance:none; }
.rl-search input::-webkit-search-cancel-button{ display:none; }
.rl-search-x{ display:none; background:none; border:none; padding:2px; color:inherit; opacity:.6; cursor:pointer; }
.rl-search-x svg{ width:15px; height:15px; }
.rl-search.has .rl-search-x{ display:flex; }
html:not(.theme-dark) .rl-search{ background:#efefef; }
body[data-wsub="videos"] .rl-search, body[data-wsub="music"] .rl-search{ display:flex; }
body[data-wsub="videos"] .ig-reel-add, body[data-wsub="music"] .ig-reel-add{ display:none !important; }
@media (max-width:1023px){ .rl-search{ margin-left:12px; } }
@media (min-width:1024px){ .rl-search{ position:absolute; right:24px; width:300px; flex:none; } }
.sp-feat-name, .sp-genre b, .sp-cover-txt, .sp-mine-ic{ color:#fff; }

/* Sign-in screen (Log in / Sign up switch, Google and Apple, then email). */
#auth-page .auth-tagline{ display:block !important; text-align:center; color:#555; font-size:15px; line-height:1.4; margin:0 0 4px; }
#auth-page .auth-tabs{ display:flex !important; gap:6px; margin:18px 0 16px; padding:0; border:none; background:none; }
#auth-page .auth-tab{ flex:1; border:none; border-radius:999px; padding:10px; font-size:15px; font-weight:600; background:none; color:#555; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
#auth-page .auth-tab.active{ background:#000; color:#fff; }
.auth-social{ display:flex; flex-direction:column; gap:10px; }
.auth-soc{ width:100%; height:46px; display:flex; align-items:center; justify-content:center; gap:10px; border:1.5px solid #000; border-radius:999px; background:#fff; color:#000;
  font-size:15px; font-weight:600; cursor:pointer; transition:background-color .15s ease, scale .1s ease; }
.auth-soc:hover{ background:#f5f5f5; } .auth-soc:active{ scale:.98; }
.auth-google-real{ display:none; justify-content:center; min-height:44px; }
.auth-google-real.on{ display:flex; }
/* Google's button sits in a frame with a light page; a dark page around it made Chrome paint a white box. */
.auth-google-real, .auth-google-real iframe{ color-scheme:light; background:transparent !important; }
.auth-or{ display:flex; align-items:center; gap:12px; color:#737373; font-size:13px; margin:16px 0 14px; }
.auth-or::before, .auth-or::after{ content:''; flex:1; height:1px; background:#dbdbdb; }
#auth-page .auth-input{ background:#fff; border:1px solid #dbdbdb; border-radius:14px; padding:14px 16px; font-size:15px; margin-bottom:10px; }
#auth-page .auth-input:focus{ border-color:#000; outline:none; }
#auth-page .auth-submit{ background:#000; color:#fff; border-radius:999px; padding:14px; font-size:16px; font-weight:700; margin-top:6px; }
#auth-page .auth-switch{ display:none; }
html.theme-dark #auth-page .auth-tagline, html.theme-dark #auth-page .auth-tab{ color:#a8a8a8; }
html.theme-dark #auth-page .auth-tab.active{ background:#fff; color:#000; }
html.theme-dark .auth-soc{ background:#000; color:#fff; border-color:#f5f5f5; }
html.theme-dark .auth-soc:hover{ background:#121212; }
html.theme-dark .auth-or::before, html.theme-dark .auth-or::after{ background:#363636; }
html.theme-dark #auth-page .auth-input{ background:#121212; border-color:#363636; }
html.theme-dark #auth-page .auth-input:focus{ border-color:#f5f5f5; }
html.theme-dark #auth-page .auth-submit{ background:#fff; color:#000; }
.auth-pw-wrap{ position:relative; }
.auth-pw-wrap .auth-input{ width:100%; padding-right:48px !important; }
.auth-pw-eye{ position:absolute; right:6px; top:calc(50% - 5px); translate:0 -50%; width:38px; height:38px; border:none; background:none; color:#737373;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; }
.auth-pw-eye:hover{ background:rgba(0,0,0,.05); }
.auth-pw-eye svg{ width:21px; height:21px; }
html.theme-dark .auth-pw-eye{ color:#a8a8a8; }
html.theme-dark .auth-pw-eye:hover{ background:rgba(255,255,255,.08); }

/* ---------- Highlights ---------- */
.ig-hl-row{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; padding:10px 2px 14px; margin:0 -2px; }
.ig-hl-row::-webkit-scrollbar{ display:none; }
.ig-hl{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:5px; width:68px; background:none; border:none; padding:0; cursor:pointer; color:inherit; }
.ig-hl-ring{ width:64px; height:64px; border-radius:50%; padding:3px; border:1px solid #dbdbdb; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:scale .12s ease; }
.ig-hl:active .ig-hl-ring{ scale:.94; }
.ig-hl-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.ig-hl-new .ig-hl-ring svg{ width:26px; height:26px; }
.ig-hl-t{ font-size:12px; max-width:68px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.theme-dark .ig-hl-ring{ border-color:#363636; }
.ig-sv.hl-mode .ig-sv-reacts, .ig-sv.hl-mode .ig-sv-views{ display:none !important; }
.hl-sub{ font-size:13px; color:#737373; margin:10px 0 8px; }
.hl-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; max-height:46vh; overflow-y:auto; }
.hl-pick{ position:relative; aspect-ratio:9 / 16; border:none; padding:0; border-radius:6px; overflow:hidden; background:#efefef; cursor:pointer; }
.hl-pick img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .15s ease; }
.hl-pick.on img{ opacity:.7; }
.hl-pick-n{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; background:rgba(0,0,0,.25); }
.hl-pick.on .hl-pick-n{ background:#0095f6; }
.hl-pick-d{ position:absolute; left:6px; bottom:5px; font-size:11px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* ---------- Group chats ---------- */
.gc-list{ margin-bottom:6px; }
.gc-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px 6px; }
.gc-head b{ font-size:16px; }
.gc-head button{ display:inline-flex; align-items:center; gap:4px; border:none; background:none; color:#0095f6; font-weight:600; font-size:14px; cursor:pointer; padding:4px; }
.gc-head button svg{ width:18px; height:18px; }
.gc-empty{ font-size:13px; color:#8e8e8e; padding:2px 2px 12px; }
.gc-av{ flex-shrink:0; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.gc-av img{ width:100%; height:100%; object-fit:cover; }
.gc-row .chat-main{ flex:1; min-width:0; }
.gc-unread{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#1daa61; color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ig-gc-page{ background:#fff; color:#000; }
.gc-top{ display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top)) 10px 8px; border-bottom:1px solid #efefef; }
.gc-top > button{ background:none; border:none; padding:6px; display:flex; color:inherit; cursor:pointer; }
.gc-tt{ flex:1; min-width:0; display:flex; flex-direction:column; cursor:pointer; }
.gc-tt b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-tt span{ font-size:12px; color:#737373; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-msgs{ flex:1; overflow-y:auto; padding:10px 10px 6px; display:flex; flex-direction:column; gap:3px; background:#fff; }
.gc-day, .gc-sys{ text-align:center; margin:8px 0; }
.gc-day span, .gc-sys span{ display:inline-block; font-size:12px; color:#555; background:#f0f2f5; padding:4px 10px; border-radius:8px; max-width:86%; }
.gc-row{ display:flex; align-items:flex-end; gap:6px; }
.gc-row.me{ justify-content:flex-end; }
.gc-mav{ width:28px; flex-shrink:0; }
.gc-b{ position:relative; max-width:78%; padding:6px 9px 18px; border-radius:12px; background:#f0f2f5; font-size:15px; line-height:1.35; overflow-wrap:anywhere; animation:igBubbleIn .22s ease; }
.gc-b.me{ background:#d9fdd3; }
.gc-name{ font-size:12.5px; font-weight:700; margin-bottom:2px; }
.gc-text{ white-space:pre-wrap; }
.gc-time{ position:absolute; right:8px; bottom:3px; font-size:10.5px; color:#667781; }
.gc-photo{ display:block; max-width:100%; width:240px; max-height:320px; object-fit:cover; border-radius:8px; margin:2px 0 4px; cursor:pointer; }
.gc-audio{ display:block; width:230px; max-width:100%; height:38px; margin:2px 0; }
.gc-quote{ border-left:3px solid #1daa61; background:rgba(0,0,0,.05); border-radius:6px; padding:4px 8px; margin-bottom:4px; font-size:13px; display:flex; flex-direction:column; }
.gc-quote b{ color:#1daa61; font-size:12.5px; }
.gc-quote span{ color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-del{ color:#8696a0; }
.gc-more{ position:absolute; top:2px; right:2px; border:none; background:inherit; border-radius:50%; padding:1px; color:#8696a0; display:none; cursor:pointer; }
.gc-b:hover .gc-more{ display:flex; }
.gc-replying{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid #efefef; background:#f7f7f7; }
.gc-replying div{ flex:1; min-width:0; display:flex; flex-direction:column; border-left:3px solid #1daa61; padding-left:8px; font-size:13px; }
.gc-replying b{ color:#1daa61; }
.gc-replying span{ color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-replying button{ background:none; border:none; display:flex; color:#737373; cursor:pointer; }
.gc-input{ display:flex; align-items:center; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #efefef; }
.gc-input input{ flex:1; min-width:0; border:1px solid #dbdbdb; border-radius:22px; padding:10px 14px; font-size:15px; outline:none; background:#fff; color:inherit; }
.gc-ib{ background:none; border:none; display:flex; padding:6px; color:inherit; cursor:pointer; }
.gc-send{ width:44px; height:44px; flex-shrink:0; border-radius:50%; border:none; background:#1daa61; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; animation:igSwapIn .22s ease; }
.gc-send svg{ width:20px; height:20px; }
.gc-cancel{ background:#ff3b30; }
.gc-input.recording .ig-rec-bar{ flex:1; }
.gc-info-head{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0 12px; text-align:center; }
.gc-info-head h3{ margin:4px 0 0; font-size:20px; }
.gc-info-head span{ font-size:13px; color:#737373; }
.gc-info-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.gc-sec{ font-size:13px; font-weight:700; color:#737373; margin:10px 0 2px; }
.gc-mini{ background:none; border:none; padding:6px; display:flex; color:#737373; cursor:pointer; }
.gc-pick{ max-height:44vh; overflow-y:auto; margin-top:6px; }
html.theme-dark .ig-gc-page, html.theme-dark .gc-msgs{ background:#000; color:#f5f5f5; }
html.theme-dark .gc-top, html.theme-dark .gc-input, html.theme-dark .gc-replying{ border-color:#262626; }
html.theme-dark .gc-b{ background:#202c33; color:#e9edef; }
html.theme-dark .gc-b.me{ background:#005c4b; }
html.theme-dark .gc-day span, html.theme-dark .gc-sys span{ background:#202c33; color:#aebac1; }
html.theme-dark .gc-time{ color:#8696a0; }
html.theme-dark .gc-quote{ background:rgba(255,255,255,.07); }
html.theme-dark .gc-quote span, html.theme-dark .gc-replying span{ color:#aebac1; }
html.theme-dark .gc-replying{ background:#111b21; }
html.theme-dark .gc-input input{ background:#121212; border-color:#363636; }
html.theme-dark .hl-pick{ background:#262626; }

/* Suggestion box (profile) and Suggestions (Owner panel). */
.ig-fb{ display:block; width:100%; margin:6px 0 12px; border:1px solid #dbdbdb; border-radius:14px; padding:12px 14px; background:#fafafa; color:inherit; text-align:left; font:inherit; }
.ig-fb.closed{ display:flex; align-items:center; gap:12px; cursor:pointer; transition:background-color .15s ease, scale .1s ease; }
.ig-fb.closed:active{ scale:.99; } .ig-fb.closed:hover{ background:#f3f3f3; }
.ig-fb-ic{ font-size:24px; }
.ig-fb-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ig-fb-tx b{ font-size:14px; } .ig-fb-tx span{ font-size:12.5px; color:#737373; }
.ig-fb-go{ display:flex; color:#8e8e8e; } .ig-fb-go svg{ width:18px; height:18px; }
.ig-fb-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ig-fb-h b{ font-size:15px; }
.ig-fb-h button{ background:none; border:none; display:flex; color:#737373; cursor:pointer; padding:2px; } .ig-fb-h svg{ width:18px; height:18px; }
.ig-fb-kinds{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.ig-fb textarea{ width:100%; box-sizing:border-box; border:1px solid #dbdbdb; border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; resize:vertical; background:#fff; color:inherit; outline:none; }
.ig-fb textarea:focus{ border-color:#000; }
.ig-fb-foot{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.ig-fb-foot span:first-child{ font-size:12px; color:#8e8e8e; }
.ig-fb-foot .weave-error{ flex:1; margin:0; font-size:12.5px; }
.ig-fb-foot .ig-btn{ margin-left:auto; }
.ig-fb-note{ font-size:11.5px; color:#8e8e8e; margin-top:6px; }
.ig-fb.sent{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.ig-fb.sent span{ font-size:13px; color:#737373; }
html.theme-dark .ig-fb{ background:#121212; border-color:#262626; }
html.theme-dark .ig-fb.closed:hover{ background:#1a1a1a; }
html.theme-dark .ig-fb textarea{ background:#000; border-color:#363636; }
html.theme-dark .ig-fb textarea:focus{ border-color:#f5f5f5; }
.ig-adm-fb{ border:1px solid #efefef; border-radius:12px; padding:12px; margin-bottom:10px; }
.ig-adm-fb.done{ opacity:.6; }
.ig-adm-fb-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ig-adm-fb-h > span:first-child, .ig-adm-fb-h b{ cursor:pointer; }
.ig-adm-fb-k{ font-size:12px; background:#efefef; padding:2px 8px; border-radius:999px; }
.ig-adm-fb-t{ margin-left:auto; font-size:12px; color:#8e8e8e; }
.ig-adm-fb-x{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; margin:8px 0; line-height:1.4; }
.ig-adm-fb-a{ display:flex; gap:8px; flex-wrap:wrap; }
html.theme-dark .ig-adm-fb{ border-color:#262626; }
html.theme-dark .ig-adm-fb-k{ background:#262626; }

/* ---------- Jobs (professional jobs-site layout) ---------- */
#network-jobs > .section-sub{ display:none; }
.jb, .ig-job-page{ --jb-blue:#0a66c2; --jb-line:#e0dfdc; --jb-soft:#666; }
.jb-search{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.jb-search label{ flex:1 1 160px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:6px; background:#eef3f8; color:#555; }
.jb-search svg{ width:18px; height:18px; flex-shrink:0; }
.jb-search input{ flex:1; min-width:0; border:none; outline:none; background:none; font-size:14.5px; color:inherit; }
.jb-pills{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--jb-line); }
.jb-pills::-webkit-scrollbar{ display:none; }
.jb-pill{ flex-shrink:0; border:1px solid #8c8c89; background:#fff; color:#404040; border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; cursor:pointer; transition:background-color .15s ease; }
.jb-pill:hover{ background:#f3f2ef; }
.jb-pill.on{ background:#01754f; border-color:#01754f; color:#fff; }
.jb-listhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 2px 8px; }
.jb-listhead b{ display:block; font-size:18px; }
.jb-listhead span{ font-size:13px; color:var(--jb-soft); }
.jb-btn{ border:none; border-radius:999px; background:var(--jb-blue); color:#fff; font-weight:700; font-size:15px; padding:9px 18px; cursor:pointer; transition:background-color .15s ease, scale .1s ease; }
.jb-btn:hover{ background:#004182; } .jb-btn:active{ scale:.97; }
.jb-btn.ghost{ background:none; color:var(--jb-blue); box-shadow:inset 0 0 0 1.5px var(--jb-blue); }
.jb-btn.ghost:hover{ background:rgba(10,102,194,.08); }
.jb-btn.small{ font-size:13.5px; padding:6px 14px; flex-shrink:0; }
.jb-card{ position:relative; display:flex; gap:12px; padding:14px 8px 14px 2px; border-bottom:1px solid var(--jb-line); cursor:pointer; transition:background-color .15s ease; animation:igRise .3s ease both; }
.jb-card:hover{ background:#f8f8f8; }
.jb-card.on{ background:#edf3f8; box-shadow:inset 3px 0 0 var(--jb-blue); }
.jb-logo{ flex-shrink:0; border-radius:8px; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.jb-main{ flex:1; min-width:0; }
.jb-title{ color:var(--jb-blue); font-weight:700; font-size:16px; line-height:1.3; }
.jb-card:hover .jb-title{ text-decoration:underline; }
.jb-co{ font-size:14px; margin-top:2px; }
.jb-loc{ font-size:14px; color:var(--jb-soft); }
.jb-pay{ display:inline-block; margin-top:6px; font-size:12.5px; font-weight:600; background:#e6f4ea; color:#01754f; padding:2px 8px; border-radius:4px; }
.jb-foot{ font-size:12.5px; color:var(--jb-soft); margin-top:6px; }
.jb-hot{ color:#01754f; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.jb-hot i{ width:8px; height:8px; border-radius:50%; background:#01754f; display:inline-block; }
.jb-bm{ align-self:flex-start; background:none; border:none; color:#666; padding:6px; border-radius:50%; display:flex; cursor:pointer; }
.jb-bm.on{ color:var(--jb-blue); }
.jb-bm:hover{ background:rgba(0,0,0,.06); }
.jb-bm svg{ width:22px; height:22px; }
.jb-empty{ text-align:center; color:var(--jb-soft); font-size:14px; padding:40px 16px; line-height:1.5; }
.jb-detail{ padding:4px 2px 24px; }
.jb-d-co{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:14px; }
.jb-d-title{ font-size:24px; line-height:1.25; margin:6px 0 6px; }
.jb-d-meta{ font-size:14px; color:var(--jb-soft); }
.jb-d-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.jb-d-chips span{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; background:#f3f2ef; color:#404040; padding:5px 10px; border-radius:6px; }
.jb-d-chips span.pay{ background:#e6f4ea; color:#01754f; }
.jb-d-chips svg{ width:16px; height:16px; }
.jb-d-acts{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px; }
.jb-sec{ border:1px solid var(--jb-line); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.jb-sec h3{ margin:0 0 10px; font-size:18px; }
.jb-team{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.jb-team .jb-tm{ flex:1; min-width:0; display:flex; flex-direction:column; }
.jb-team b{ font-size:15px; } .jb-team span{ font-size:13.5px; color:#404040; } .jb-team small{ font-size:12.5px; color:var(--jb-soft); }
.jb-about{ white-space:pre-wrap; font-size:14.5px; line-height:1.55; }
.jb-about.muted{ color:var(--jb-soft); }
@media (min-width:1024px){
  #view-network{ max-width:1128px; }
  .jb-split{ display:grid; grid-template-columns:minmax(320px, 40%) 1fr; border:1px solid var(--jb-line); border-radius:10px; overflow:hidden; height:calc(100vh - 210px); min-height:440px; }
  .jb-list{ overflow-y:auto; border-right:1px solid var(--jb-line); padding:0 10px; }
  .jb-pane{ overflow-y:auto; padding:18px 24px; }
}
html.theme-dark .jb, html.theme-dark .ig-job-page{ --jb-blue:#71b7fb; --jb-line:#2f2f2f; --jb-soft:#a8a8a8; }
html.theme-dark .jb-search label{ background:#1d2226; color:#bbb; }
html.theme-dark .jb-pill{ background:#000; border-color:#666; color:#ddd; }
html.theme-dark .jb-pill:hover{ background:#1d2226; }
html.theme-dark .jb-pill.on{ background:#2f8f5f; border-color:#2f8f5f; color:#fff; }
html.theme-dark .jb-card:hover{ background:#111; }
html.theme-dark .jb-card.on{ background:#14202b; }
html.theme-dark .jb-btn{ color:#000; }
html.theme-dark .jb-btn.ghost{ color:var(--jb-blue); }
html.theme-dark .jb-d-chips span, html.theme-dark .jb-team span{ background:#1d2226; color:#ddd; }
html.theme-dark .jb-team span{ background:none; }
html.theme-dark .jb-pay, html.theme-dark .jb-d-chips span.pay{ background:#12301f; color:#6fd39b; }
html.theme-dark .jb-hot{ color:#6fd39b; } html.theme-dark .jb-hot i{ background:#6fd39b; }

/* Owner panel card at the top of More (owners only). */
.ig-owner-card{ position:relative; display:flex; align-items:center; gap:12px; width:100%; margin:4px 0 14px; padding:12px 12px; border:none; border-radius:14px; cursor:pointer; text-align:left; color:#fff; font:inherit;
  background:linear-gradient(135deg, #feda75 -20%, #fa7e1e 20%, #d62976 55%, #962fbf 85%, #4f5bd5 120%); box-shadow:0 6px 18px rgba(214,41,118,.28); transition:scale .1s ease, box-shadow .2s ease; overflow:hidden; }
.ig-owner-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); background-size:250% 100%; animation:igShimmer 3.2s ease-in-out infinite; pointer-events:none; }
.ig-owner-card:active{ scale:.98; }
.ig-owner-card:hover{ box-shadow:0 8px 24px rgba(214,41,118,.4); }
.ig-oc-ic{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ig-oc-ic svg{ width:22px; height:22px; }
.ig-oc-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ig-oc-tx b{ font-size:15px; } .ig-oc-tx span{ font-size:12.5px; opacity:.92; }
.ig-oc-badge{ display:none; min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:#fff; color:#d62976; font-size:12px; font-weight:800; align-items:center; justify-content:center; }
.ig-oc-badge.show{ display:flex; animation:igBadgeIn .38s cubic-bezier(.3,1.6,.5,1); }
.ig-oc-go{ display:flex; opacity:.9; } .ig-oc-go svg{ width:18px; height:18px; }
@media (prefers-reduced-motion: reduce){ .ig-owner-card::after{ animation:none; } }
.ig-fb-card .ig-oc-ic{ font-size:22px; }
.ig-fb-card{ background:linear-gradient(135deg, #ffd600 -10%, #ff9f0a 30%, #ff5e3a 70%, #ff2d55 115%); box-shadow:0 6px 18px rgba(255,94,58,.3); }
.ig-fb.ig-fb-in-sheet{ border:none; background:none; padding:0; margin:0; }
.ig-fb-sheet-done{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:10px 0 4px; }
.ig-fb-big{ font-size:44px; } .ig-fb-sheet-done b{ font-size:18px; } .ig-fb-sheet-done span{ color:#737373; font-size:14px; }
html.theme-dark .ig-fb.ig-fb-in-sheet{ background:none; }

/* ----- Profile tabs: Grid, List, Reels, Music ----- */
.pt-tabs .ig-tab{ position:relative; transition:color .2s ease; }
.pt-tabs .ig-tab svg{ transition:transform .18s ease; }
.pt-tabs .ig-tab:active svg{ transform:scale(.88); }
.pt-pane{ display:block; min-height:160px; }
.pt-list{ display:flex; flex-direction:column; gap:6px; padding-top:4px; }
.pt-list .pt-post{ margin:0; border-bottom:1px solid var(--ig-sep); padding-bottom:10px; }
.pt-reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.pt-reels .grid-tile{ aspect-ratio:9/16; }
.pt-reel{ position:relative; aspect-ratio:9/16; border:none; padding:0; margin:0; background:#111; overflow:hidden; cursor:pointer; display:block; width:100%; color:#fff; }
.pt-reel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.pt-reel:hover img{ transform:scale(1.04); }
.pt-reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.65)); pointer-events:none; }
.pt-reel-ig{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.pt-reel-ig svg{ width:34px; height:34px; color:#fff; }
.pt-reel-play{ position:absolute; top:6px; right:6px; z-index:1; display:flex; }
.pt-reel-play svg{ width:18px; height:18px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pt-reel-cap{ position:absolute; left:6px; right:6px; bottom:6px; z-index:1; font-size:11.5px; line-height:1.3; text-align:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.pt-music{ --sp-green:#1ed760; --sp-soft:#b3b3b3; padding:12px 16px 24px; }
html:not(.theme-dark) .pt-music{ --sp-soft:#6a6a6a; }
.pt-music-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pt-music-head > div{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pt-music-head b{ font-size:17px; font-weight:700; color:var(--ink); }
.pt-music-head span{ font-size:13px; color:var(--ig-soft); margin-top:2px; }
.pt-music .pt-play{ width:46px; height:46px; }
.pt-music .pt-play svg{ width:20px; height:20px; }
.pt-music .sp-row:active{ background:var(--ig-gray); }
.pt-empty{ padding:40px 24px; }
@media (min-width:1024px){
  #ig-person-body > .pt-pane{ grid-column:1 / -1; }
  .pt-reels{ gap:4px; }
  .pt-list{ max-width:470px; margin:0 auto; }
  .pt-music{ max-width:640px; margin:0 auto; }
}

/* ----- Feed: quick menu on a person's photo ----- */
.ig-avpop{ position:fixed; z-index:9400; min-width:220px; max-width:calc(100vw - 16px); background:var(--card); color:var(--ink); border-radius:14px; padding:6px;
  box-shadow:0 10px 34px rgba(0,0,0,.18), 0 0 0 1px var(--ig-sep); animation:avpIn .18s cubic-bezier(.2,.9,.25,1); }
.ig-avpop.out{ animation:avpOut .15s ease forwards; pointer-events:none; }
@keyframes avpIn{ from{ opacity:0; transform:scale(.88); } to{ opacity:1; transform:none; } }
@keyframes avpOut{ to{ opacity:0; transform:scale(.92); } }
.avp-head{ display:flex; align-items:center; gap:10px; padding:8px 10px 10px; border-bottom:1px solid var(--ig-sep); margin-bottom:4px; cursor:pointer; }
.avp-head .avatar{ width:40px !important; height:40px !important; flex-shrink:0; }
.avp-head > div{ display:flex; flex-direction:column; min-width:0; }
.avp-head b{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
.avp-head span{ font-size:12.5px; color:var(--ig-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avp-item{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 10px; border:none; background:none; border-radius:9px; font:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; text-align:left; }
.avp-item svg{ width:20px; height:20px; flex-shrink:0; }
.avp-item:hover, .avp-item:active{ background:var(--ig-gray); }
.avp-item.blue{ color:var(--ig-blue); font-weight:600; }
.avp-item.danger{ color:var(--ig-red); }
html.theme-dark .ig-avpop{ background:#262626; box-shadow:0 10px 34px rgba(0,0,0,.6); }
html.theme-dark .avp-item:hover, html.theme-dark .avp-item:active{ background:#363636; }

/* ----- Calls: minimized call bubble ----- */
.call-min{ position:absolute; z-index:3; top:calc(14px + env(safe-area-inset-top)); left:14px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.14);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .15s ease, scale .12s ease; }
.call-min:active{ scale:.92; }
.call-min:hover{ background:rgba(255,255,255,.24); }
.call-min svg{ width:24px; height:24px; }
.call-screen.ringing .call-min{ display:none; }
.call-screen.active.mini{ visibility:hidden; opacity:0; pointer-events:none; animation:none; }
.call-mini{ position:fixed; z-index:9300; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; animation:cmIn .28s cubic-bezier(.2,.9,.25,1); }
.call-mini.snap{ transition:left .28s cubic-bezier(.2,.9,.25,1), top .28s cubic-bezier(.2,.9,.25,1); }
.call-mini.dragging{ cursor:grabbing; }
@keyframes cmIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.call-mini.is-audio{ width:76px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.call-mini.is-audio .cm-av{ width:68px; height:68px; border-radius:50%; padding:3px; background:#1daa61; box-shadow:0 6px 20px rgba(0,0,0,.28); animation:cmPulse 2s ease-in-out infinite; display:flex; }
.call-mini.is-audio .cm-av .avatar{ width:62px !important; height:62px !important; border:2px solid #fff; box-sizing:border-box; }
@keyframes cmPulse{ 0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(29,170,97,.5); } 50%{ box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 0 9px rgba(29,170,97,0); } }
.cm-time{ font-size:12px; font-weight:600; color:#fff; background:#1daa61; border-radius:10px; padding:2px 8px; font-variant-numeric:tabular-nums; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.call-mini.is-audio .cm-end{ display:none; }
.call-mini.is-video{ width:112px; height:160px; border-radius:16px; overflow:hidden; background:#0b141a; box-shadow:0 8px 26px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.9); }
.call-mini.is-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.call-mini.is-video.has-remote video{ display:block; }
.call-mini.is-video .cm-av{ position:absolute; top:34px; left:50%; translate:-50% 0; display:flex; }
.call-mini.is-video.has-remote .cm-av{ display:none; }
.call-mini.is-video .cm-time{ position:absolute; left:6px; bottom:7px; padding:2px 7px; font-size:11px; }
.cm-end{ position:absolute; right:6px; bottom:5px; width:30px; height:30px; border-radius:50%; border:none; background:#ea0038; color:#fff; padding:6px; display:flex; cursor:pointer; }
.cm-end svg{ width:100%; height:100%; }
.call-mini.ended .cm-av, .call-mini.ended .cm-time{ background:#ea0038; animation:none; }

/* ----- Hold a post: actions stay after letting go ----- */
.ig-peek-more{ display:none; gap:8px; padding:0 12px 12px; }
.ig-peek.pinned .ig-peek-more{ display:flex; animation:igFadeIn .2s ease; }
.ig-peek-btn{ flex:1; height:38px; border:none; border-radius:10px; background:var(--ig-gray); color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; padding:0 8px; }
.ig-peek-btn.primary{ background:#000; color:#fff; }
.ig-peek-btn:active{ scale:.97; }
html.theme-dark .ig-peek-btn{ background:#363636; color:#f5f5f5; }
html.theme-dark .ig-peek-btn.primary{ background:#f5f5f5; color:#000; }

/* ----- Someone else's profile, Threads-style ----- */
.th-head{ padding:14px 16px 4px; }
.th-top{ display:flex; align-items:center; gap:16px; }
.th-names{ flex:1; min-width:0; }
.th-names h1{ margin:0; font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.3px; overflow-wrap:anywhere; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.th-user{ margin-top:4px; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.th-fy{ font-size:12px; font-weight:600; background:var(--ig-gray); color:var(--ig-soft); border-radius:6px; padding:2px 8px; }
.th-av{ flex-shrink:0; }
.th-av .ig-prof-avatar{ cursor:pointer; }
.th-av .avatar{ width:76px !important; height:76px !important; font-size:26px; }
.th-bio{ margin-top:12px; font-size:15px; line-height:1.4; white-space:pre-line; }
.th-place{ margin-top:6px; font-size:14px; color:var(--ig-soft); }
.th-meta{ margin-top:14px; font-size:15px; color:var(--ig-soft); display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.th-meta span[role="button"]{ cursor:pointer; }
.th-meta span[role="button"]:hover{ text-decoration:underline; }
.th-meta b{ font-weight:400; color:inherit; }
.th-meta i{ font-style:normal; }
.th-head > .th-btns{ padding:18px 0 4px; gap:10px; }
.th-btns .ig-btn{ flex:1; height:40px; border-radius:12px; font-size:15px; font-weight:600; background:var(--ig-gray); color:var(--ink); }
.th-btns .ig-btn.blue{ background:#000; color:#fff; }
.th-btns .ig-btn.icon{ flex:0 0 46px; }
html.theme-dark .th-btns .ig-btn{ background:#262626; color:#f5f5f5; }
html.theme-dark .th-btns .ig-btn.blue{ background:#f5f5f5; color:#000; }
.th-sugg{ padding:18px 0 6px; }
.th-sugg-h{ padding:0 16px 12px; font-size:16px; font-weight:600; color:var(--ig-soft); }
.th-sugg-row{ display:flex; gap:10px; overflow-x:auto; padding:0 16px 6px; scroll-padding:0 16px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.th-sugg-row::-webkit-scrollbar{ display:none; }
.th-card{ position:relative; flex:0 0 150px; scroll-snap-align:start; background:#f3f3f3; border-radius:20px; padding:16px 12px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:opacity .2s ease, transform .2s ease; }
.th-card.out{ opacity:0; transform:scale(.9); }
.th-card-x{ position:absolute; top:8px; right:8px; width:26px; height:26px; border:none; background:none; color:var(--ig-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.th-card-x svg{ width:16px; height:16px; }
.th-card-body{ display:flex; flex-direction:column; align-items:center; min-width:0; width:100%; cursor:pointer; }
.th-card-body .avatar{ width:76px !important; height:76px !important; font-size:24px; }
.th-card-body b{ margin-top:10px; font-size:14.5px; font-weight:600; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th-card-body span{ font-size:13px; color:var(--ig-soft); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.th-card-btn{ margin-top:12px; width:100%; height:34px; border:none; border-radius:10px; font:inherit; font-size:14px; font-weight:600; background:var(--ig-gray-dark); color:var(--ink); cursor:pointer; }
.th-card-btn.primary{ background:#000; color:#fff; }
html.theme-dark .th-card{ background:#1c1c1c; }
html.theme-dark .th-card-btn{ background:#363636; color:#f5f5f5; }
html.theme-dark .th-card-btn.primary{ background:#f5f5f5; color:#000; }
.th-tabs{ margin-top:10px; }
.th-tabs .ig-tab{ font:inherit; font-size:15px; font-weight:600; color:var(--ig-soft); border-top:none; margin-top:0; border-bottom:1.5px solid transparent; }
.th-tabs .ig-tab.active{ color:var(--ink); border-bottom-color:var(--ink); }
html.theme-dark .th-tabs .ig-tab.active{ border-bottom-color:#f5f5f5; }
@media (min-width:1024px){
  #ig-person-body > .th-head, #ig-person-body > .th-sugg{ grid-column:1 / -1; width:100%; max-width:640px; justify-self:center; }
  .th-tabs .ig-tab{ padding:0 28px; }
}

/* ----- Call screen, new layout ----- */
.call-screen{ background:#0b0b0b; justify-content:flex-start; }
.call-bg{ position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 38c0 0-12-7-12-15 0-4 3-7 6-7 3 0 5 2 6 4 1-2 3-4 6-4 3 0 6 3 6 7 0 8-12 15-12 15z'/%3E%3Ccircle cx='118' cy='30' r='11'/%3E%3Cpath d='M112 30h12M118 24v12'/%3E%3Cpath d='M70 70l5 10 11 2-8 8 2 11-10-5-10 5 2-11-8-8 11-2z'/%3E%3Cpath d='M128 96v26M128 96l14-4v22'/%3E%3Ccircle cx='124' cy='122' r='4'/%3E%3Ccircle cx='138' cy='118' r='4'/%3E%3Crect x='16' y='104' width='30' height='22' rx='6'/%3E%3Cpath d='M24 126l-4 8 10-8'/%3E%3Cpath d='M86 136c6-8 14-8 20 0'/%3E%3Ccircle cx='92' cy='128' r='1.5'/%3E%3Ccircle cx='100' cy='128' r='1.5'/%3E%3C/svg%3E");
  background-size:160px 160px; }
.call-screen.has-remote .call-bg{ display:none; }
.call-top{ position:absolute; z-index:3; top:calc(14px + env(safe-area-inset-top)); left:14px; right:14px; display:flex; align-items:flex-start; gap:10px; }
.call-top .call-min{ position:static; flex-shrink:0; width:52px; height:52px; background:#000; }
.call-top .call-min svg{ width:22px; height:22px; }
.call-head{ flex:1; min-width:0; text-align:center; padding-top:4px; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.call-head .call-name{ font-size:22px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; justify-content:center; align-items:center; gap:4px; }
.call-head .call-status{ font-size:14px; color:rgba(255,255,255,.7); margin-top:2px; }
.call-side{ flex-shrink:0; width:52px; display:flex; flex-direction:column; gap:12px; }
.call-round{ width:52px; height:52px; border-radius:50%; border:none; background:#000; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:scale .12s ease, background-color .15s ease; }
.call-round:active{ scale:.92; }
.call-round:hover{ background:#1f1f1f; }
.call-round svg{ width:22px; height:22px; }
.call-screen.ringing .call-side, .call-screen.ringing .call-min{ visibility:hidden; }
.call-screen .call-info{ flex:1; margin:0; justify-content:center; padding:110px 24px 20px; }
.call-screen .call-photo .avatar{ width:190px !important; height:190px !important; font-size:56px; }
.call-screen .call-enc{ margin:22px 0 0; }
.call-screen.is-video.has-remote .call-info{ visibility:hidden; }
.call-screen .call-local{ display:none; top:calc(82px + env(safe-area-inset-top)); right:80px; width:26vw; max-width:140px; }
.call-screen.has-local .call-local{ display:block; }
.call-screen.remote-screen .call-remote{ object-fit:contain; background:#000; }
.call-screen .call-controls{ width:100%; box-sizing:border-box; padding:0 14px calc(18px + env(safe-area-inset-bottom)); display:flex; justify-content:center; gap:40px; }
.call-panel{ width:100%; max-width:420px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 8px; background:rgba(38,38,38,.94); border-radius:30px; padding:22px 12px 18px;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); animation:igFadeIn .25s ease; }
.call-panel .call-btn{ font-size:14px; gap:9px; }
.call-panel .call-btn svg{ width:68px; height:68px; padding:21px; background:#0d0d0d; }
.call-panel .call-btn.on svg{ background:#fff; color:#0b0b0b; }
.call-panel .call-btn.end svg{ background:#e0123e; }
.call-sheet{ position:absolute; inset:0; z-index:5; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; padding:0 12px calc(14px + env(safe-area-inset-bottom)); animation:igFadeIn .15s ease; }
.call-sheet-box{ width:100%; max-width:420px; background:#262626; border-radius:22px; padding:10px; animation:cmIn .22s cubic-bezier(.2,.9,.25,1); }
.call-sheet-h{ padding:8px 12px 10px; font-size:13px; color:rgba(255,255,255,.6); font-weight:600; }
.call-sheet-item{ display:flex; align-items:center; gap:14px; width:100%; padding:14px 12px; border:none; background:none; color:#fff; font:inherit; font-size:16px; border-radius:12px; cursor:pointer; text-align:left; }
.call-sheet-item:hover, .call-sheet-item:active{ background:rgba(255,255,255,.08); }
.call-sheet-item svg{ width:22px; height:22px; flex-shrink:0; }
.call-sheet-item span{ flex:1; }
.call-sheet-item i{ font-style:normal; color:#1daa61; font-weight:700; }
@media (min-width:1024px){ .call-screen .call-local{ max-width:220px; } }
.call-mini.is-audio video{ display:none; }
.call-panel .call-btn.end{ grid-column:3; }

/* =========================================================
   Music player: tinted by the song's colour, seek bar, Up next queue
   ========================================================= */
.player-sheet{ padding:0 !important; background:#121212; overflow:hidden; --mp-c:#535353; z-index:212; }
.mp-bg{ position:absolute; inset:-40px; background:#121212 center/cover no-repeat; filter:blur(48px) saturate(1.4); opacity:.45; transform:scale(1.1); pointer-events:none; }
.player-sheet::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mp-c) 62%, #000) 0%, color-mix(in srgb, var(--mp-c) 22%, #121212) 45%, #121212 82%); opacity:.92; transition:background .5s; }
.mp-scroll{ position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mp-scroll::-webkit-scrollbar{ display:none; }
.mp-main{ min-height:100%; display:flex; flex-direction:column; padding:calc(10px + env(safe-area-inset-top)) 22px calc(12px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto; box-sizing:border-box; }
.mp-top{ display:flex; align-items:center; gap:8px; }
.mp-from{ flex:1; min-width:0; text-align:center; display:flex; flex-direction:column; line-height:1.25; }
.mp-from small{ font-size:10.5px; letter-spacing:1.2px; color:rgba(255,255,255,.7); font-weight:600; }
.mp-from b{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-ib{ width:40px; height:40px; border:none; background:none; color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; text-decoration:none; }
.mp-ib:active{ background:rgba(255,255,255,.12); }
.mp-ib svg{ width:24px; height:24px; }
.player-sheet .player-art{ width:100%; max-width:min(400px, 46vh); margin:clamp(14px, 4vh, 34px) auto clamp(16px, 4vh, 30px); border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.55); background:#282828; }
.player-sheet .player-art img{ transition:opacity .3s; }
.mp-meta{ display:flex; align-items:center; gap:12px; }
.mp-txt{ flex:1; min-width:0; }
.player-sheet .player-title{ font-family:inherit; font-size:22px; font-weight:800; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px; }
.player-sheet .player-artist{ text-align:left; color:rgba(255,255,255,.72); font-size:15px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-save{ background:none; border:none; color:#fff; padding:6px; cursor:pointer; display:inline-flex; flex-shrink:0; }
.mp-save svg{ width:28px; height:28px; }
.mp-seek{ padding:14px 0 6px; margin-top:8px; cursor:pointer; touch-action:none; outline:none; }
.player-sheet .player-progress{ margin:0; height:4px; background:rgba(255,255,255,.25); overflow:visible; border-radius:2px; }
.player-sheet .player-progress .fill{ position:relative; background:#fff; border-radius:2px; transition:width .45s linear; }
.mp-seek.drag .player-progress .fill{ transition:none; }
.player-sheet .player-progress .fill::after{ content:''; position:absolute; right:-6px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); transform:scale(.0); transition:transform .15s; }
.mp-seek:hover .fill::after, .mp-seek.drag .fill::after, .mp-seek:focus-visible .fill::after{ transform:scale(1); }
.player-sheet .player-times{ margin-top:4px; color:rgba(255,255,255,.65); font-family:inherit; font-variant-numeric:tabular-nums; }
.player-sheet .player-controls{ justify-content:space-between; gap:0; margin-top:12px; }
.player-sheet .player-controls button{ display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.mp-skip svg{ width:36px; height:36px; }
.mp-skip:active{ transform:scale(.9); }
.player-sheet .player-controls .playbtn{ width:68px; height:68px; background:#fff; color:#000; box-shadow:0 6px 18px rgba(0,0,0,.3); transition:transform .12s; }
.player-sheet .player-controls .playbtn:active{ transform:scale(.94); }
.player-sheet .playbtn svg{ width:30px; height:30px; }
.mp-sm{ position:relative; width:44px; height:44px; color:rgba(255,255,255,.75) !important; }
.mp-sm svg{ width:22px; height:22px; }
.mp-sm.on{ color:#1ed760 !important; }
.mp-sm.on::after{ content:''; position:absolute; bottom:3px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#1ed760; }
.mp-sm i{ display:none; position:absolute; top:6px; right:5px; font-style:normal; font-size:9px; font-weight:800; background:#1ed760; color:#000; border-radius:50%; width:13px; height:13px; line-height:13px; text-align:center; }
.mp-sm.one i{ display:block; }
.mp-sm.one i::before{ content:'1'; }
.mp-actions{ display:flex; justify-content:space-between; margin-top:14px; }
.mp-actions .mp-ib svg{ width:22px; height:22px; color:rgba(255,255,255,.85); }
.player-sheet .player-status{ color:rgba(255,255,255,.6); margin-top:4px; }
.mp-peek{ margin-top:auto; display:flex; align-items:center; gap:8px; width:100%; padding:12px 14px; border:none; border-radius:12px; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; text-align:left; font:inherit; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.mp-peek span{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.65); flex-shrink:0; }
.mp-peek b{ flex:1; min-width:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-peek svg{ width:18px; height:18px; flex-shrink:0; }
.mp-queue{ position:relative; max-width:520px; margin:0 auto; padding:6px 14px calc(30px + env(safe-area-inset-bottom)); box-sizing:border-box; background:rgba(18,18,18,.86); border-radius:18px 18px 0 0; min-height:60vh; }
.mp-q-head{ display:flex; align-items:center; gap:10px; padding:14px 8px 4px; }
.mp-q-head h3{ margin:0; font-size:20px; font-weight:800; }
.mp-tag{ font-size:11px; font-weight:700; color:#000; background:#1ed760; border-radius:10px; padding:2px 8px; }
.mp-q-label{ display:flex; align-items:center; justify-content:space-between; padding:16px 8px 6px; font-size:14px; font-weight:700; color:rgba(255,255,255,.9); }
.mp-q-label button{ background:none; border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:14px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.mp-q-row{ display:flex; align-items:center; gap:12px; padding:7px 8px; border-radius:8px; cursor:pointer; }
.mp-q-row:hover{ background:rgba(255,255,255,.07); }
.mp-q-row:active{ background:rgba(255,255,255,.12); }
.mp-q-row.now{ cursor:default; background:rgba(255,255,255,.06); }
.mp-q-row img{ width:48px; height:48px; border-radius:4px; object-fit:cover; flex-shrink:0; background:#282828; }
.mp-q-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mp-q-txt b{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-q-row.now .mp-q-txt b{ color:#1ed760; }
.mp-q-txt span{ font-size:13px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-q-x{ width:36px; height:36px; border:none; background:none; color:rgba(255,255,255,.7); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.mp-q-x svg{ width:20px; height:20px; }
.mp-q-x:active{ background:rgba(255,255,255,.12); }
.mp-q-empty{ padding:10px 8px; font-size:13.5px; color:rgba(255,255,255,.6); }
.mp-eq{ display:inline-flex; align-items:flex-end; gap:2px; width:36px; height:16px; justify-content:center; flex-shrink:0; }
.mp-eq i{ width:3px; background:#1ed760; border-radius:1px; animation:mpEq .9s ease-in-out infinite; }
.mp-eq i:nth-child(2){ animation-delay:-.3s; } .mp-eq i:nth-child(3){ animation-delay:-.6s; }
.mp-eq.paused i{ animation:none; height:4px; }
@keyframes mpEq{ 0%,100%{ height:4px; } 50%{ height:16px; } }
/* Mini player: tinted bar with SVG controls */
.now-playing{ background:color-mix(in srgb, var(--mp-c, #333) 45%, #181818) !important; border-radius:8px; border-top:none !important; padding:8px 8px 8px 8px !important; gap:10px !important; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.25); transition:background .4s; }
.now-playing .np-bar{ left:8px; right:8px; width:0; bottom:1px; height:2px; border-radius:1px; background:#fff; max-width:calc(100% - 16px); }
.now-playing .track-art{ width:40px; height:40px; border-radius:4px; overflow:hidden; flex-shrink:0; }
.now-playing .track-art img{ width:100%; height:100%; object-fit:cover; }
.now-playing .np-title{ font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-playing .np-mood{ font-size:12.5px; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:inherit; }
.now-playing .np-info{ flex:1; min-width:0; }
.now-playing .ctrl{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:#fff; padding:0; cursor:pointer; flex-shrink:0; }
.now-playing .ctrl svg{ width:24px; height:24px; }
.now-playing .np-save svg{ width:24px; height:24px; }
@media (min-width:1024px){
  .mp-scroll{ display:grid; grid-template-columns:minmax(380px, 520px) minmax(340px, 440px); justify-content:center; gap:40px; overflow:hidden; padding:0 32px; }
  .mp-main{ height:100%; min-height:0; overflow-y:auto; max-width:none; }
  .mp-peek{ display:none; }
  .mp-queue{ height:calc(100% - 48px); margin:24px 0; overflow-y:auto; border-radius:14px; min-height:0; max-width:none; width:100%; }
}

/* =========================================================
   Messages: black & white theme (white in the black chat theme)
   ========================================================= */
body.wa-mode{ --wb-ink:#000; --wb-on:#fff; --wb-soft:#efefef; --wb-them:#efefef; }
body.chat-dark.wa-mode{ --wb-ink:#fff; --wb-on:#000; --wb-soft:#1c1c1c; --wb-them:#1f1f1f; }
body.wa-mode main .bubble.me, body.chat-dark.wa-mode main .bubble.me, body.wa-mode main .gc-b.me, html.theme-dark body.wa-mode main .gc-b.me{ background:var(--wb-ink); color:var(--wb-on); }
body.wa-mode main .bubble.them, body.chat-dark.wa-mode main .bubble.them{ background:var(--wb-them); }
body.wa-mode main .bubble.me .ig-bmeta, body.wa-mode main .bubble.me .ig-vtime, body.wa-mode main .bubble.me .ig-tk, body.wa-mode main .bubble.me .ig-deleted,
body.chat-dark.wa-mode main .bubble.me .ig-bmeta, body.chat-dark.wa-mode main .bubble.me .ig-vtime, body.chat-dark.wa-mode main .bubble.me .ig-tk, body.chat-dark.wa-mode main .bubble.me .ig-deleted{ color:var(--wb-on); opacity:.62; }
body.wa-mode main .bubble.me .ig-tk.read, body.chat-dark.wa-mode main .bubble.me .ig-tk.read{ color:var(--wb-on); opacity:1; }
body.wa-mode main .ig-tk.read, body.chat-dark.wa-mode main .ig-tk.read{ color:var(--wb-ink); }
body.wa-mode main .bubble.me .ig-vbar, body.chat-dark.wa-mode main .bubble.me .ig-vbar{ background:color-mix(in srgb, var(--wb-on) 30%, transparent); }
body.wa-mode main .ig-vbar i, body.wa-mode main .ig-voice.playing .ig-vbar i{ background:var(--wb-ink); }
body.wa-mode main .bubble.me .ig-vbar i, body.wa-mode main .bubble.me .ig-vplay, body.chat-dark.wa-mode main .bubble.me .ig-vplay{ background:var(--wb-on); color:var(--wb-on); }
body.wa-mode main .bubble.me .ig-vplay{ background:none; }
body.wa-mode main .ig-th-sub.online, body.wa-mode main .ig-th-sub.typing, body.wa-mode main .chat-row.unread .ig-chat-time,
body.chat-dark.wa-mode main .chat-row.unread .ig-chat-time, body.chat-dark.wa-mode main .ig-th-sub.online, body.chat-dark.wa-mode main .ig-th-sub.typing{ color:var(--wb-ink); font-weight:600; }
body.wa-mode .ig-round-send, body.wa-mode .thread-input .ig-round-send, body.wa-mode .gc-send, body.wa-mode .wa-dial-call{ background:var(--wb-ink); color:var(--wb-on); }
body.wa-mode .wa-unread, body.wa-mode .gc-unread, body.wa-mode .wa-badge, body.wa-mode .weave-pill-nav .ig-badge, body.wa-mode .dk-ic .ig-badge, body.wa-mode .wa-st-me .ig-story-add{ background:var(--wb-ink); color:var(--wb-on); }
body.wa-mode main .ig-btn.blue, body.chat-dark.wa-mode main .ig-btn.blue, body.wa-mode main .btn-solid, body.chat-dark.wa-mode main .btn-solid{ background:var(--wb-ink); color:var(--wb-on); }
body.wa-mode main .gc-head button, body.wa-mode main .ig-link-btn{ color:var(--wb-ink); }
body.wa-mode main .ig-bquote, body.wa-mode main .ig-reply-bar, body.wa-mode main .gc-quote, body.wa-mode main .gc-replying div{ border-left-color:var(--wb-ink); }
body.wa-mode main .bubble.me .ig-bquote{ border-left-color:var(--wb-on); background:color-mix(in srgb, var(--wb-on) 14%, transparent); }
body.wa-mode main .ig-bquote b, body.wa-mode main .ig-rb-main b, body.wa-mode main .gc-quote b, body.wa-mode main .gc-replying b,
body.chat-dark.wa-mode main .ig-bquote b, body.chat-dark.wa-mode main .ig-rb-main b, body.chat-dark.wa-mode main .bubble.them .ig-bquote b{ color:var(--wb-ink); }
body.wa-mode main .bubble.me .ig-bquote b, body.wa-mode main .bubble.me .ig-bquote span, body.chat-dark.wa-mode main .bubble.me .ig-bquote b, body.chat-dark.wa-mode main .bubble.me .ig-bquote span{ color:var(--wb-on); }
body.wa-mode main .ig-react.on{ background:var(--wb-soft); box-shadow:0 0 0 2px var(--wb-ink); }
body.wa-mode main .wa-out svg, body.wa-mode main .wa-round.green, body.wa-mode main .wa-tip svg, body.wa-mode main .wa-call-line svg{ color:var(--wb-ink); }
body.wa-mode main .wa-comm-tile, body.wa-mode main .wa-av-cal, body.chat-dark.wa-mode main .wa-comm-tile, body.chat-dark.wa-mode main .wa-av-cal{ background:var(--wb-soft); color:var(--wb-ink); }
body.wa-mode main .wa-check input{ accent-color:var(--wb-ink); }
body.wa-mode main .wa-form .job-actions .btn-solid{ background:var(--wb-ink); }
.ig-theme-opt.on, html.theme-dark .ig-theme-opt.on{ border-color:currentColor; }
.sw-white i:last-child{ background:#000; }
.sw-black i:last-child{ background:#fff; }

/* Phone keyboard open in a chat: pin the chat to the free part of the screen */
.kb-pin{ position:fixed !important; top:var(--kb-top) !important; left:var(--kb-left) !important; width:var(--kb-width) !important; height:var(--kb-height) !important;
  bottom:auto !important; right:auto !important; z-index:220; animation:none !important; box-sizing:border-box; }
.thread-view.kb-pin{ background:#fff; }
html.theme-dark .thread-view.kb-pin{ background:#000; }
body.chat-dark.wa-mode main .thread-view.kb-pin{ background:#0b141a; }
.kb-pin .thread-input, .kb-pin .gc-input{ padding-bottom:8px !important; }
body.kb-open .wa-nav, body.kb-open .now-playing{ visibility:hidden; }
.player-sheet .player-mood-badge{ display:none !important; }
/* Close buttons on the music player */
.mp-right{ display:flex; flex-shrink:0; }
.mp-from{ padding-left:40px; } /* balances the two buttons on the right */
.now-playing .np-close{ width:32px; color:rgba(255,255,255,.75); }
.now-playing .np-close svg{ width:20px; height:20px; }

/* Suggestion box: attached photos */
.ig-fb-files{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ig-fb-attach{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border:1px dashed #b5b5b5; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; color:inherit; }
.ig-fb-attach:hover{ background:rgba(0,0,0,.04); }
.ig-fb-attach svg{ width:18px; height:18px; }
.ig-fb-thumb{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; background:#efefef; flex-shrink:0; display:block; }
.ig-fb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ig-fb-thumb button{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; }
.ig-fb-thumb button svg{ width:12px; height:12px; }
.ig-fb-thumb.loading{ display:flex; align-items:center; justify-content:center; }
.ig-fb-spin{ width:20px; height:20px; border-radius:50%; border:2px solid #c7c7c7; border-top-color:#000; animation:igFbSpin .8s linear infinite; }
@keyframes igFbSpin{ to{ transform:rotate(360deg); } }
.ig-fb-fcount{ font-size:12px; color:#8e8e8e; }
.ig-adm-fb-files{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px; }
.ig-adm-fb-files .ig-fb-thumb{ width:84px; height:84px; }
html.theme-dark .ig-fb-attach{ border-color:#555; }
html.theme-dark .ig-fb-attach:hover{ background:rgba(255,255,255,.06); }
html.theme-dark .ig-fb-thumb{ background:#262626; }
html.theme-dark .ig-fb-spin{ border-color:#555; border-top-color:#fff; }

/* =========================================================
   Group calls
   ========================================================= */
#gcall-screen{ display:none; }
#gcall-screen.call-screen.active{ display:flex; z-index:9001; justify-content:flex-start; }
#gcall-screen.mini{ visibility:hidden; opacity:0; pointer-events:none; animation:none; }
.gcall-grid{ position:relative; z-index:1; flex:1; width:100%; box-sizing:border-box; display:grid; gap:8px; padding:calc(96px + env(safe-area-inset-top)) 10px 12px; min-height:0; }
.gcall-grid.n1{ grid-template-columns:1fr; }
.gcall-grid.n2{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
.gcall-grid.n3, .gcall-grid.n4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.gcall-grid.n3 .gc-tile:first-child{ grid-column:1 / -1; }
.gc-tile{ position:relative; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; min-height:0; }
.gc-tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; background:#000; }
.gc-tile.me video{ transform:scaleX(-1); }
.gc-tile.has-video video{ display:block; }
.gc-tile.has-video .gc-tile-av{ display:none; }
.gc-tile audio{ display:none; }
.gc-tile-av .avatar{ width:84px !important; height:84px !important; font-size:28px; }
.gc-tile.waiting .gc-tile-av{ animation:callPulse 1.6s ease-in-out infinite; border-radius:50%; opacity:.75; }
.gc-tile-name{ position:absolute; left:10px; bottom:10px; right:10px; display:flex; align-items:baseline; gap:6px; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.gc-tile-name b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-tile-name span{ font-size:12px; color:rgba(255,255,255,.75); white-space:nowrap; }
#gcall-screen.ringing .gcall-grid{ visibility:hidden; }
#gcall-screen.ringing .call-head{ margin-top:30vh; }
#gcall-screen.ringing .call-head .call-name{ font-size:26px; }
#gcall-screen .call-controls{ position:relative; z-index:2; }
.gcall-pill{ position:fixed; z-index:9002; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px);
  padding:9px 16px; border:none; border-radius:22px; background:#1daa61; color:#fff; font:inherit; font-size:13px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25); animation:igFadeIn .2s ease; }
.gcall-pill svg{ width:18px; height:18px; flex-shrink:0; }
.gcall-pill span{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.gcall-pill b{ font-weight:600; white-space:nowrap; }
@media (min-width:1024px){
  .gcall-grid{ max-width:1100px; margin:0 auto; padding-top:100px; }
  .gcall-grid.n2{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
}
/* Choosing people */
.gcp-list{ max-height:min(52vh, 420px); overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.gcp-row{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 6px; border:none; background:none; color:inherit; font:inherit; border-radius:12px; cursor:pointer; text-align:left; }
.gcp-row:hover{ background:rgba(0,0,0,.04); }
.gcp-row:disabled{ opacity:.45; cursor:default; }
.gcp-name{ flex:1; min-width:0; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gcp-check{ width:24px; height:24px; border-radius:50%; border:2px solid #c7c7c7; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0; box-sizing:border-box; }
.gcp-row.on .gcp-check{ background:#000; border-color:#000; color:#fff; }
.gcp-foot{ display:flex; align-items:center; gap:8px; padding:12px 2px 2px; }
.gcp-foot span{ flex:1; font-size:13px; color:#8e8e8e; }
.gcp-foot .ig-btn{ display:inline-flex; align-items:center; gap:6px; }
.gcp-foot .ig-btn svg{ width:18px; height:18px; }
.gcp-note{ font-size:12px; color:#8e8e8e; text-align:center; margin-top:8px; }
.gcp-new{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 6px; margin-bottom:8px; border:none; background:none; color:inherit; font:inherit; cursor:pointer; border-radius:12px; text-align:left; }
.gcp-new:hover{ background:rgba(0,0,0,.04); }
.gcp-new span{ width:44px; height:44px; border-radius:50%; background:#000; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gcp-new span svg{ width:22px; height:22px; }
.gcp-new b{ font-size:15px; }
.gcp-new small{ margin-left:auto; color:#8e8e8e; font-size:12px; }
html.theme-dark .gcp-row.on .gcp-check, body.chat-dark .gcp-row.on .gcp-check{ background:#fff; border-color:#fff; color:#000; }
html.theme-dark .gcp-new span{ background:#fff; color:#000; }
.gcp-dark .gcp-row{ color:#fff; }
.gcp-dark .gcp-row:hover{ background:rgba(255,255,255,.07); }
.gcp-dark .gcp-row.on .gcp-check{ background:#fff; border-color:#fff; color:#000; }
.gcp-dark .gcp-foot .ig-btn.blue{ background:#fff; color:#000; }

/* =========================================================
   Owner panel → Dashboard
   ========================================================= */
.dash{ --dash-bar:#3b5bdb; --dash-ink:#000; --dash-muted:#737373; --dash-line:#e6e6e6; --dash-card:#f7f7f5; --dash-up:#1a7f37; --dash-down:#c62828;
  display:flex; flex-direction:column; gap:22px; padding-bottom:12px; }
html.theme-dark .dash{ --dash-bar:#6f88f5; --dash-ink:#f5f5f5; --dash-muted:#a8a8a8; --dash-line:#2f2f2f; --dash-card:#141414; --dash-up:#4cc26a; --dash-down:#ff6b6b; }
/* Sections rise in one after another. */
.dash-sec{ animation:dashRise .6s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; }
.dash-sec:nth-child(2){ animation-delay:60ms; } .dash-sec:nth-child(3){ animation-delay:120ms; } .dash-sec:nth-child(4){ animation-delay:180ms; } .dash-sec:nth-child(5){ animation-delay:240ms; }
.dash-foot{ animation:dashRise .6s var(--ease-out, cubic-bezier(.22,1,.36,1)) .3s both; font-size:12px; color:var(--dash-muted); text-align:center; }
@keyframes dashRise{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
.dash-sec h3{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--dash-muted); }
.dash-group + .dash-group{ margin-top:12px; }
.dash-group h4{ margin:0 0 8px; font-size:14px; font-weight:600; color:var(--dash-ink); }
.dash-hello{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-hello h2{ margin:0; font-size:22px; font-weight:800; color:var(--dash-ink); letter-spacing:-.3px; }
.dash-hello span{ font-size:13px; color:var(--dash-muted); }
.dash-refresh{ width:42px; height:42px; border-radius:50%; border:none; background:var(--dash-card); color:var(--dash-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:scale .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), background-color .2s ease; }
.dash-refresh:active{ scale:.9; }
.dash-refresh svg{ width:20px; height:20px; }
.dash-refresh.spin svg{ animation:dashSpin .7s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
@keyframes dashSpin{ from{ rotate:0deg; } to{ rotate:360deg; } }
/* Needs you */
.dash-needs{ display:flex; flex-direction:column; gap:8px; }
.dash-need{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:none; border-radius:16px; background:var(--dash-card); color:var(--dash-ink); font:inherit; text-align:left; cursor:pointer;
  transition:scale .18s var(--ease-out, ease), background-color .2s ease; }
.dash-need:active{ scale:.98; }
.dash-need > i{ width:38px; height:38px; border-radius:12px; background:#fff4d6; color:#9a6700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dash-need.alert > i{ background:#ffe9ec; color:#b00020; }
html.theme-dark .dash-need > i{ background:#3a2f12; color:#ffcf5c; } html.theme-dark .dash-need.alert > i{ background:#3a1218; color:#ff8a9a; }
.dash-need > i svg{ width:20px; height:20px; }
.dash-need span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.dash-need b{ font-size:15px; } .dash-need small{ font-size:12.5px; color:var(--dash-muted); }
.dash-need > svg{ width:18px; height:18px; color:var(--dash-muted); flex-shrink:0; transition:translate .2s ease; }
.dash-need:hover > svg{ translate:3px 0; }
.dash-clear{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:var(--dash-card); font-size:14px; color:var(--dash-ink); }
.dash-clear i{ display:flex; color:var(--dash-up); } .dash-clear svg{ width:22px; height:22px; }
/* Today */
.dash-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.dash-kpi{ background:var(--dash-card); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-width:0;
  transition:translate .25s var(--ease-out, ease), box-shadow .25s ease; }
.dash-kpi > span{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--dash-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-kpi b{ font-size:28px; font-weight:800; color:var(--dash-ink); font-variant-numeric:tabular-nums; line-height:1.15; letter-spacing:-.5px; }
.dash-kpi small, .dash-d{ font-size:11.5px; color:var(--dash-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:normal; }
.dash-d.up{ color:var(--dash-up); } .dash-d.down{ color:var(--dash-down); }
.dash-live{ width:8px; height:8px; border-radius:50%; background:#1ed760; box-shadow:0 0 0 0 rgba(30,215,96,.6); animation:dashLive 1.8s ease-out infinite; flex-shrink:0; }
@keyframes dashLive{ 0%{ box-shadow:0 0 0 0 rgba(30,215,96,.55); } 80%,100%{ box-shadow:0 0 0 7px rgba(30,215,96,0); } }
/* Last 30 days */
.dash-card{ background:var(--dash-card); border-radius:18px; padding:14px; min-width:0; }
.dash-card-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.dash-card-h b{ font-size:15px; color:var(--dash-ink); }
.dash-seg{ position:relative; display:flex; gap:2px; padding:3px; margin:-2px -2px 12px; border-radius:14px; background:rgba(0,0,0,.05); overflow-x:auto; scrollbar-width:none; }
html.theme-dark .dash-seg{ background:rgba(255,255,255,.07); }
.dash-seg::-webkit-scrollbar{ display:none; }
.dash-seg button{ position:relative; z-index:1; flex:1 0 auto; border:none; background:none; color:var(--dash-muted); font:inherit; font-size:13px; font-weight:600; padding:8px 12px; border-radius:11px; cursor:pointer; white-space:nowrap; transition:color .25s ease; }
.dash-seg button.on{ color:var(--dash-ink); }
.dash-seg-ind{ position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:11px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12); }
html.theme-dark .dash-seg-ind{ background:#2a2a2a; }
.dash-seg.ready .dash-seg-ind{ transition:translate .42s var(--ease-out, cubic-bezier(.22,1,.36,1)), width .42s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.dash-sum{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:8px; }
.dash-sum div{ display:flex; flex-direction:column; min-width:0; }
.dash-sum span{ font-size:12px; color:var(--dash-muted); }
.dash-sum b{ font-size:20px; font-weight:800; color:var(--dash-ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-sum small{ font-size:12px; font-weight:500; color:var(--dash-muted); }
.dash-note{ font-size:12px; color:var(--dash-muted); margin:0 0 6px; }
.dash-chart.swap .dash-sum, .dash-chart.swap .dash-note{ animation:dashFade .4s ease both; }
@keyframes dashFade{ from{ opacity:0; } to{ opacity:1; } }
.dash-svg{ width:100%; height:200px; display:block; overflow:visible; }
.dash-fill{ fill:var(--dash-bar); transform-box:fill-box; transform-origin:50% 100%; transition:opacity .15s ease; }
.dash-chart.swap .dash-fill{ animation:dashGrow .7s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; }
@keyframes dashGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.dash-bar.on .dash-fill{ opacity:.7; }
.dash-hit{ fill:transparent; cursor:pointer; }
.dash-grid{ stroke:var(--dash-line); stroke-width:1; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; }
.dash-base{ stroke:var(--dash-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.dash-ax{ fill:var(--dash-muted); font-size:11px; }
.dash-tip{ position:fixed; z-index:10050; pointer-events:none; background:#000; color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:9px; opacity:0; translate:0 4px; white-space:nowrap;
  transition:opacity .15s ease, translate .2s var(--ease-out, ease), left .12s ease, top .12s ease; }
.dash-tip.show{ opacity:1; translate:0 0; }
html.theme-dark .dash-tip{ background:#fff; color:#000; }
.dash-table summary{ font-size:12px; color:var(--dash-muted); cursor:pointer; padding:6px 0 0; }
.dash-table table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px; }
.dash-table th, .dash-table td{ text-align:left; padding:4px 2px; border-bottom:1px solid var(--dash-line); color:var(--dash-ink); }
.dash-table td:last-child, .dash-table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
/* Top */
.dash-lists{ display:grid; grid-template-columns:1fr; gap:10px; }
.dash-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dash-list li{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--dash-line); border-radius:10px; transition:background-color .15s ease, scale .15s ease; }
.dash-list li:last-child{ border-bottom:none; }
.dash-list li.tap{ cursor:pointer; } .dash-list li.tap:active{ scale:.985; background:rgba(0,0,0,.04); }
.dash-rank{ width:18px; font-size:13px; font-weight:700; color:var(--dash-muted); text-align:center; flex-shrink:0; }
.dash-list img{ width:44px; height:33px; border-radius:5px; object-fit:cover; flex-shrink:0; }
.dash-list .dash-li-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dash-list .dash-li-t b{ font-size:13.5px; color:var(--dash-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-list .dash-li-t span{ font-size:12px; color:var(--dash-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-list li > .avatar{ flex-shrink:0; }
.dash-list em{ font-style:normal; font-size:12px; color:var(--dash-muted); white-space:nowrap; }
@media (hover:hover){
  .dash-kpi:hover{ translate:0 -2px; box-shadow:0 8px 20px rgba(0,0,0,.06); }
  .dash-need:hover{ background:color-mix(in srgb, var(--dash-card) 85%, #000); }
  .dash-list li.tap:hover{ background:rgba(0,0,0,.035); }
}
@media (min-width:640px){ .dash-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width:1024px){
  .dash-lists{ grid-template-columns:1fr 1fr; }
  .dash-needs{ flex-direction:row; } .dash-need{ flex:1; }
  .dash-svg{ height:240px; }
}
@media (prefers-reduced-motion: reduce){
  .dash-sec, .dash-foot, .dash-chart.swap .dash-fill, .dash-live{ animation:none !important; }
}


/* =========================================================
   Smoother motion everywhere (10 Nov 2026)
   One set of easing curves; sheets and pages glide in and settle softly;
   lists ripple in; rows and cards give a little under the finger.
   Everything here is switched off for people who ask their phone for less motion.
   ========================================================= */
:root{ --ease-out:cubic-bezier(.22,1,.36,1); --ease-sheet:cubic-bezier(.32,.72,0,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-in:cubic-bezier(.4,0,.8,.2); }
.view.active{ animation:igViewIn .32s var(--ease-out); }
.modal-overlay.active{ animation:igFadeIn .26s ease; }
.modal-overlay.active .modal-box{ animation:igSheetUp .46s var(--ease-sheet); }
.modal-overlay.ig-leaving{ animation:igFadeOut .26s ease forwards; }
.modal-overlay.ig-leaving .modal-box{ animation:igSheetDown .26s var(--ease-in) forwards; }
@media (min-width:520px){
  .modal-overlay.active .modal-box{ animation:igDialogIn .3s var(--ease-out); }
  .modal-overlay.ig-leaving .modal-box{ animation:igDialogOut .2s ease forwards; }
}
.full-page.active{ animation:igPageIn .44s var(--ease-sheet); }
.full-page.ig-leaving{ animation:igPageOut .28s var(--ease-in) forwards; }
.compose-page.active{ animation:igSheetUp .46s var(--ease-sheet); }
.compose-page.ig-leaving{ animation:igSheetDown .28s var(--ease-in) forwards; }
.side-menu-overlay.active .side-menu{ animation:igMenuIn .4s var(--ease-sheet); }
.side-menu-overlay .side-menu{ transition:transform .3s var(--ease-in); }
.thread-view.active{ animation:igPageIn .42s var(--ease-sheet); }
.ig-sv.active .ig-sv-frame{ animation:igZoomIn .34s var(--ease-out); }
.bubble.ig-new{ animation:igBubbleIn .34s var(--ease-out); }
.weave-toast{ transition:opacity .24s ease, transform .4s var(--ease-out); }
.ig-tabbar .navitem.active .ig-fill, .ig-tabbar .navitem.active .ig-nav-avatar{ animation:igTabPop .38s var(--ease-spring); }
header.topbar.ig-topbar{ transition:transform .32s var(--ease-out); }
/* Music player: slides up from the bottom and back down; the mini bar rises in. */
.player-sheet.active{ animation:igSheetUp .5s var(--ease-sheet); }
.player-sheet.ig-leaving{ display:flex; pointer-events:none; animation:igSheetDown .3s var(--ease-in) forwards; }
.now-playing.active{ animation:npIn .45s var(--ease-out); }
@keyframes npIn{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } }
.player-sheet .player-art img{ transition:opacity .4s ease, scale .6s var(--ease-out); }
.player-sheet .playbtn{ transition:scale .2s var(--ease-spring), transform .2s var(--ease-spring); }
/* Calls open softly. */
.call-screen.active, #gcall-screen.call-screen.active{ animation:callIn .38s var(--ease-out); }
@keyframes callIn{ from{ opacity:0; scale:1.03; } to{ opacity:1; scale:1; } }
.gc-tile{ animation:igZoomIn .4s var(--ease-out) both; }
/* Lists ripple in when a screen opens. */
.ig-enter .sp-row, .ig-enter .wa-row, .ig-enter .follower-row, .ig-enter .track-row, .ig-enter .pt-post, .ig-enter .pt-reel, .ig-enter .ig-adm-fb, .ig-enter .gc-row, .ig-enter .conn-card, .ig-enter .watch-card, .ig-enter .game-card, .ig-enter .ig-sp-card, .ig-enter .job-card, .ig-enter .ig-set-row{ animation:igRise .5s var(--ease-out) both; }
.ig-enter .sp-row:nth-child(2), .ig-enter .wa-row:nth-child(2), .ig-enter .follower-row:nth-child(2), .ig-enter .track-row:nth-child(2), .ig-enter .pt-post:nth-child(2), .ig-enter .pt-reel:nth-child(2), .ig-enter .ig-adm-fb:nth-child(2), .ig-enter .gc-row:nth-child(2), .ig-enter .conn-card:nth-child(2), .ig-enter .watch-card:nth-child(2), .ig-enter .game-card:nth-child(2), .ig-enter .ig-sp-card:nth-child(2), .ig-enter .job-card:nth-child(2), .ig-enter .ig-set-row:nth-child(2){ animation-delay:32ms; }
.ig-enter .sp-row:nth-child(3), .ig-enter .wa-row:nth-child(3), .ig-enter .follower-row:nth-child(3), .ig-enter .track-row:nth-child(3), .ig-enter .pt-post:nth-child(3), .ig-enter .pt-reel:nth-child(3), .ig-enter .ig-adm-fb:nth-child(3), .ig-enter .gc-row:nth-child(3), .ig-enter .conn-card:nth-child(3), .ig-enter .watch-card:nth-child(3), .ig-enter .game-card:nth-child(3), .ig-enter .ig-sp-card:nth-child(3), .ig-enter .job-card:nth-child(3), .ig-enter .ig-set-row:nth-child(3){ animation-delay:64ms; }
.ig-enter .sp-row:nth-child(4), .ig-enter .wa-row:nth-child(4), .ig-enter .follower-row:nth-child(4), .ig-enter .track-row:nth-child(4), .ig-enter .pt-post:nth-child(4), .ig-enter .pt-reel:nth-child(4), .ig-enter .ig-adm-fb:nth-child(4), .ig-enter .gc-row:nth-child(4), .ig-enter .conn-card:nth-child(4), .ig-enter .watch-card:nth-child(4), .ig-enter .game-card:nth-child(4), .ig-enter .ig-sp-card:nth-child(4), .ig-enter .job-card:nth-child(4), .ig-enter .ig-set-row:nth-child(4){ animation-delay:96ms; }
.ig-enter .sp-row:nth-child(5), .ig-enter .wa-row:nth-child(5), .ig-enter .follower-row:nth-child(5), .ig-enter .track-row:nth-child(5), .ig-enter .pt-post:nth-child(5), .ig-enter .pt-reel:nth-child(5), .ig-enter .ig-adm-fb:nth-child(5), .ig-enter .gc-row:nth-child(5), .ig-enter .conn-card:nth-child(5), .ig-enter .watch-card:nth-child(5), .ig-enter .game-card:nth-child(5), .ig-enter .ig-sp-card:nth-child(5), .ig-enter .job-card:nth-child(5), .ig-enter .ig-set-row:nth-child(5){ animation-delay:128ms; }
.ig-enter .sp-row:nth-child(6), .ig-enter .wa-row:nth-child(6), .ig-enter .follower-row:nth-child(6), .ig-enter .track-row:nth-child(6), .ig-enter .pt-post:nth-child(6), .ig-enter .pt-reel:nth-child(6), .ig-enter .ig-adm-fb:nth-child(6), .ig-enter .gc-row:nth-child(6), .ig-enter .conn-card:nth-child(6), .ig-enter .watch-card:nth-child(6), .ig-enter .game-card:nth-child(6), .ig-enter .ig-sp-card:nth-child(6), .ig-enter .job-card:nth-child(6), .ig-enter .ig-set-row:nth-child(6){ animation-delay:160ms; }
.ig-enter .sp-row:nth-child(7), .ig-enter .wa-row:nth-child(7), .ig-enter .follower-row:nth-child(7), .ig-enter .track-row:nth-child(7), .ig-enter .pt-post:nth-child(7), .ig-enter .pt-reel:nth-child(7), .ig-enter .ig-adm-fb:nth-child(7), .ig-enter .gc-row:nth-child(7), .ig-enter .conn-card:nth-child(7), .ig-enter .watch-card:nth-child(7), .ig-enter .game-card:nth-child(7), .ig-enter .ig-sp-card:nth-child(7), .ig-enter .job-card:nth-child(7), .ig-enter .ig-set-row:nth-child(7){ animation-delay:192ms; }
.ig-enter .sp-row:nth-child(8), .ig-enter .wa-row:nth-child(8), .ig-enter .follower-row:nth-child(8), .ig-enter .track-row:nth-child(8), .ig-enter .pt-post:nth-child(8), .ig-enter .pt-reel:nth-child(8), .ig-enter .ig-adm-fb:nth-child(8), .ig-enter .gc-row:nth-child(8), .ig-enter .conn-card:nth-child(8), .ig-enter .watch-card:nth-child(8), .ig-enter .game-card:nth-child(8), .ig-enter .ig-sp-card:nth-child(8), .ig-enter .job-card:nth-child(8), .ig-enter .ig-set-row:nth-child(8){ animation-delay:224ms; }
.ig-enter .sp-row:nth-child(9), .ig-enter .wa-row:nth-child(9), .ig-enter .follower-row:nth-child(9), .ig-enter .track-row:nth-child(9), .ig-enter .pt-post:nth-child(9), .ig-enter .pt-reel:nth-child(9), .ig-enter .ig-adm-fb:nth-child(9), .ig-enter .gc-row:nth-child(9), .ig-enter .conn-card:nth-child(9), .ig-enter .watch-card:nth-child(9), .ig-enter .game-card:nth-child(9), .ig-enter .ig-sp-card:nth-child(9), .ig-enter .job-card:nth-child(9), .ig-enter .ig-set-row:nth-child(9){ animation-delay:256ms; }
.ig-enter .sp-row:nth-child(10), .ig-enter .wa-row:nth-child(10), .ig-enter .follower-row:nth-child(10), .ig-enter .track-row:nth-child(10), .ig-enter .pt-post:nth-child(10), .ig-enter .pt-reel:nth-child(10), .ig-enter .ig-adm-fb:nth-child(10), .ig-enter .gc-row:nth-child(10), .ig-enter .conn-card:nth-child(10), .ig-enter .watch-card:nth-child(10), .ig-enter .game-card:nth-child(10), .ig-enter .ig-sp-card:nth-child(10), .ig-enter .job-card:nth-child(10), .ig-enter .ig-set-row:nth-child(10){ animation-delay:288ms; }
.ig-enter .sp-row:nth-child(11), .ig-enter .wa-row:nth-child(11), .ig-enter .follower-row:nth-child(11), .ig-enter .track-row:nth-child(11), .ig-enter .pt-post:nth-child(11), .ig-enter .pt-reel:nth-child(11), .ig-enter .ig-adm-fb:nth-child(11), .ig-enter .gc-row:nth-child(11), .ig-enter .conn-card:nth-child(11), .ig-enter .watch-card:nth-child(11), .ig-enter .game-card:nth-child(11), .ig-enter .ig-sp-card:nth-child(11), .ig-enter .job-card:nth-child(11), .ig-enter .ig-set-row:nth-child(11){ animation-delay:320ms; }
.ig-enter .sp-row:nth-child(12), .ig-enter .wa-row:nth-child(12), .ig-enter .follower-row:nth-child(12), .ig-enter .track-row:nth-child(12), .ig-enter .pt-post:nth-child(12), .ig-enter .pt-reel:nth-child(12), .ig-enter .ig-adm-fb:nth-child(12), .ig-enter .gc-row:nth-child(12), .ig-enter .conn-card:nth-child(12), .ig-enter .watch-card:nth-child(12), .ig-enter .game-card:nth-child(12), .ig-enter .ig-sp-card:nth-child(12), .ig-enter .job-card:nth-child(12), .ig-enter .ig-set-row:nth-child(12){ animation-delay:352ms; }
.modal-overlay.active .modal-box > .weave-menu-item{ animation:igRise .42s var(--ease-out) both; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(2){ animation-delay:28ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(3){ animation-delay:56ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(4){ animation-delay:84ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(5){ animation-delay:112ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(6){ animation-delay:140ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(7){ animation-delay:168ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(8){ animation-delay:196ms; }
.modal-overlay.active .modal-box > .weave-menu-item:nth-child(9){ animation-delay:224ms; }
/* Switching profile tabs: the new view fades up. */
.pt-swap{ animation:igRise .42s var(--ease-out) both; }
/* Rows and cards give a little when pressed; colours change smoothly. */
.sp-row, .wa-row, .follower-row, .track-row, .weave-menu-item, .gcp-row, .mp-q-row, .ig-adm-tile, .game-card, .watch-card, .conn-card, .job-card, .dash-kpi{
  transition:scale .2s var(--ease-out), background-color .2s ease, box-shadow .25s ease, translate .25s var(--ease-out); }
.sp-row:active, .wa-row:active, .follower-row:active, .track-row:active, .weave-menu-item:active, .gcp-row:active, .mp-q-row:active{ scale:.985; }
.ig-adm-tile:active, .game-card:active, .watch-card:active, .conn-card:active, .job-card:active, .dash-kpi:active{ scale:.975; }
.ig-btn:active, .btn-solid:active, .btn-outline:active, .pill:active, .ig-chip:active{ scale:.96; }
.ig-btn, .btn-solid, .btn-outline, .pill, .ig-chip{ transition:background-color .2s ease, color .2s ease, scale .2s var(--ease-spring), opacity .15s ease; }
@media (hover:hover){
  .ig-adm-tile:hover, .game-card:hover, .watch-card:hover, .job-card:hover{ translate:0 -2px; box-shadow:0 10px 24px rgba(0,0,0,.08); }
}
@media (prefers-reduced-motion: reduce){
  .player-sheet.active, .player-sheet.ig-leaving, .now-playing.active, .call-screen.active, .gc-tile, .pt-swap{ animation:none !important; }
}


/* =========================================================
   Black & white everywhere (10 Nov 2026): every chat (not only the Messages area) and the story ring
   ========================================================= */
body:not(.wa-mode){ --wb-ink:#000; --wb-on:#fff; --wb-soft:#efefef; --wb-them:#efefef; }
html.theme-dark body:not(.wa-mode){ --wb-ink:#fff; --wb-on:#000; --wb-soft:#1c1c1c; --wb-them:#262626; }
body:not(.wa-mode) main .bubble.me, html.theme-dark body:not(.wa-mode) main .bubble.me, body:not(.wa-mode) main .gc-b.me, html.theme-dark body:not(.wa-mode) main .gc-b.me{ background:var(--wb-ink); color:var(--wb-on); }
body:not(.wa-mode) main .bubble.them, html.theme-dark body:not(.wa-mode) main .bubble.them{ background:var(--wb-them); }
body:not(.wa-mode) main .bubble.me .ig-bmeta, body:not(.wa-mode) main .bubble.me .ig-vtime, body:not(.wa-mode) main .bubble.me .ig-tk, body:not(.wa-mode) main .bubble.me .ig-deleted, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-bmeta, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-vtime, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-tk, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-deleted{ color:var(--wb-on); opacity:.62; }
body:not(.wa-mode) main .bubble.me .ig-tk.read, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-tk.read{ color:var(--wb-on); opacity:1; }
body:not(.wa-mode) main .ig-tk.read, html.theme-dark body:not(.wa-mode) main .ig-tk.read{ color:var(--wb-ink); }
body:not(.wa-mode) main .bubble.me .ig-vbar, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-vbar{ background:color-mix(in srgb, var(--wb-on) 30%, transparent); }
body:not(.wa-mode) main .ig-vbar i, body:not(.wa-mode) main .ig-voice.playing .ig-vbar i{ background:var(--wb-ink); }
body:not(.wa-mode) main .bubble.me .ig-vbar i, body:not(.wa-mode) main .bubble.me .ig-vplay, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-vplay{ background:var(--wb-on); color:var(--wb-on); }
body:not(.wa-mode) main .bubble.me .ig-vplay{ background:none; }
body:not(.wa-mode) main .ig-th-sub.online, body:not(.wa-mode) main .ig-th-sub.typing, body:not(.wa-mode) main .chat-row.unread .ig-chat-time, html.theme-dark body:not(.wa-mode) main .chat-row.unread .ig-chat-time, html.theme-dark body:not(.wa-mode) main .ig-th-sub.online, html.theme-dark body:not(.wa-mode) main .ig-th-sub.typing{ color:var(--wb-ink); font-weight:600; }
body:not(.wa-mode) .ig-round-send, body:not(.wa-mode) .thread-input .ig-round-send, body:not(.wa-mode) .gc-send, body:not(.wa-mode) .wa-dial-call{ background:var(--wb-ink); color:var(--wb-on); }
body:not(.wa-mode) main .ig-bquote, body:not(.wa-mode) main .ig-reply-bar, body:not(.wa-mode) main .gc-quote, body:not(.wa-mode) main .gc-replying div{ border-left-color:var(--wb-ink); }
body:not(.wa-mode) main .bubble.me .ig-bquote{ border-left-color:var(--wb-on); background:color-mix(in srgb, var(--wb-on) 14%, transparent); }
body:not(.wa-mode) main .ig-bquote b, body:not(.wa-mode) main .ig-rb-main b, body:not(.wa-mode) main .gc-quote b, body:not(.wa-mode) main .gc-replying b, html.theme-dark body:not(.wa-mode) main .ig-bquote b, html.theme-dark body:not(.wa-mode) main .ig-rb-main b, html.theme-dark body:not(.wa-mode) main .bubble.them .ig-bquote b{ color:var(--wb-ink); }
body:not(.wa-mode) main .bubble.me .ig-bquote b, body:not(.wa-mode) main .bubble.me .ig-bquote span, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-bquote b, html.theme-dark body:not(.wa-mode) main .bubble.me .ig-bquote span{ color:var(--wb-on); }
body:not(.wa-mode) main .ig-react.on{ background:var(--wb-soft); box-shadow:0 0 0 2px var(--wb-ink); }
:root{ --ig-ring:linear-gradient(#000, #000); --ring-solid:#000; }
html.theme-dark{ --ig-ring:linear-gradient(#fff, #fff); --ring-solid:#fff; }
body.chat-dark.wa-mode{ --ig-ring:linear-gradient(#fff, #fff); --ring-solid:#fff; }
.ig-story-ring.ig-ring-load::before{ background:conic-gradient(var(--ring-solid), color-mix(in srgb, var(--ring-solid) 0%, transparent) 75%); }
.wa-st-me .ig-story-add, .ig-story-add{ background:var(--ring-solid); }
html:not(.theme-dark) .ig-story-add{ color:#fff; } html.theme-dark .ig-story-add{ color:#000; }

/* Calls → Recent: group calls */
.wa-gav{ position:relative; width:48px; height:48px; flex-shrink:0; display:block; }
.wa-gav > .avatar, .wa-gav > .wa-av{ position:absolute; box-sizing:content-box; border:2px solid var(--bg, #fff); }
.wa-gav > :first-child{ left:0; top:0; }
.wa-gav > :nth-child(2){ right:0; bottom:0; }
html.theme-dark .wa-gav > .avatar{ border-color:#000; }
.wa-gtag{ display:inline-block; font-size:11px; font-weight:700; line-height:16px; padding:0 6px; border-radius:999px; background:#efefef; color:#555; vertical-align:2px; }
html.theme-dark .wa-gtag, body.chat-dark .wa-gtag{ background:#262626; color:#bbb; }

/* What's new (announcements) */
.ig-wn-card{ background:linear-gradient(135deg, #111 0%, #3a3a3a 100%); box-shadow:0 6px 18px rgba(0,0,0,.25); position:relative; }
html.theme-dark .ig-wn-card{ background:linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%); }
.ig-wn-dot{ position:absolute; top:10px; right:10px; width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 2px rgba(255,255,255,.9); animation:igPop .4s var(--ease-spring, ease) both; }
.ig-wn-list{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow-y:auto; margin:6px 0 14px; }
.ig-wn-item{ padding:14px; border-radius:14px; background:#f5f5f5; animation:igRise .35s var(--ease-out, ease) both; }
.ig-wn-item:nth-child(2){ animation-delay:.05s } .ig-wn-item:nth-child(3){ animation-delay:.1s } .ig-wn-item:nth-child(4){ animation-delay:.15s }
html.theme-dark .ig-wn-item{ background:#1c1c1c; }
.ig-wn-item.fresh{ box-shadow:inset 0 0 0 1.5px currentColor; }
.ig-wn-top{ display:flex; align-items:center; gap:8px; }
.ig-wn-top b{ font-size:15px; }
.ig-wn-new{ font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:#000; color:#fff; }
html.theme-dark .ig-wn-new{ background:#fff; color:#000; }
.ig-wn-date{ font-size:12px; color:#8e8e8e; margin-top:2px; }
.ig-wn-body{ font-size:14px; line-height:1.45; margin-top:8px; white-space:pre-wrap; word-wrap:break-word; }
.ig-ann-form{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.ig-ann-form input, .ig-ann-form textarea{ width:100%; box-sizing:border-box; border:1px solid #dbdbdb; border-radius:12px; padding:12px; font:inherit; font-size:14px; background:transparent; color:inherit; resize:vertical; }
html.theme-dark .ig-ann-form input, html.theme-dark .ig-ann-form textarea{ border-color:#363636; }
.ig-ann-push{ display:flex; align-items:center; gap:8px; font-size:14px; }
.ig-ann-row{ margin-bottom:10px; }
.ig-ann-meta{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#8e8e8e; padding:6px 4px 0; }
.ig-adm-h{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8e8e8e; margin:6px 0 10px; }
.ig-btn.small{ padding:6px 12px; font-size:12px; }

/* Forgot password */
.auth-forgot{ display:block; margin:10px auto 0; background:none; border:none; font:inherit; font-size:14px; font-weight:600; color:#737373; cursor:pointer; padding:6px; }
.auth-forgot:hover{ color:inherit; }
.ig-reset{ position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,0); pointer-events:none;
  transition:background .25s var(--ease-out, ease); }
.ig-reset.on{ background:rgba(0,0,0,.55); pointer-events:auto; }
.ig-reset-card{ position:relative; width:100%; max-width:380px; background:#fff; color:#111; border-radius:20px; padding:28px 22px 22px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3); opacity:0; transform:translateY(16px) scale(.97); transition:opacity .25s var(--ease-out, ease), transform .3s var(--ease-out, ease); }
.ig-reset.on .ig-reset-card{ opacity:1; transform:none; }
html.theme-dark .ig-reset-card{ background:#1c1c1c; color:#f5f5f5; }
.ig-reset-x{ position:absolute; top:10px; right:10px; width:34px; height:34px; border:none; background:none; color:inherit; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ig-reset-x svg{ width:20px; height:20px; }
.ig-reset-logo{ border-radius:14px; display:block; margin:0 auto 12px; }
.ig-reset-card h2{ font-size:20px; font-weight:700; margin:0 0 8px; }
.ig-reset-card p{ font-size:14px; line-height:1.5; color:#737373; margin:0 0 16px; }
.ig-reset-card .auth-input{ width:100%; box-sizing:border-box; margin-bottom:10px; }
.ig-reset-card .auth-submit{ width:100%; margin-top:6px; }
.ig-reset-card .weave-error{ min-height:18px; font-size:13px; color:#ed4956; margin-bottom:4px; }
.ig-reset-small{ font-size:13px !important; }
.ig-reset-big{ font-size:44px; line-height:1; margin-bottom:10px; }
.ig-reset-pw{ position:relative; }
.ig-reset-eye{ position:absolute; right:10px; top:50%; transform:translateY(calc(-50% - 5px)); background:none; border:none; font:inherit; font-size:13px; font-weight:600; color:#737373; cursor:pointer; padding:6px; }
.ig-reset-card .auth-input{ border-radius:14px; padding:14px 16px; font-size:15px; background:transparent; color:inherit; border:1px solid #dbdbdb; outline:none; }
.ig-reset-card .auth-input:focus{ border-color:#8e8e8e; }
html.theme-dark .ig-reset-card .auth-input{ border-color:#363636; }
.ig-reset-card .btn-solid{ background:#000; color:#fff; border-radius:14px; padding:14px; font-weight:700; border:none; }
html.theme-dark .ig-reset-card .btn-solid{ background:#fff; color:#000; }
.ig-reset-card .btn-solid:disabled{ opacity:.6; }
.ig-reset-eye{ transform:translateY(calc(-50% - 5px)); }

/* Side menu on phones and tablets: it scrolls inside its own box only.
   The clear top and bottom borders keep items out from under the clock bar and the home bar,
   and the page behind stays still while the menu is open. */
@media (max-width:1023px){
  .side-menu{ padding:18px 16px 20px; border-top:env(safe-area-inset-top) solid transparent; border-bottom:env(safe-area-inset-bottom) solid transparent;
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .side-menu::-webkit-scrollbar{ display:none; }
  .side-menu-close{ display:none; }
  .side-menu-overlay{ overscroll-behavior:contain; }
  html:has(.side-menu-overlay.active), html:has(.side-menu-overlay.active) body{ overflow:hidden; }
}

/* ---------- Rang Patte: computer players, house rules, LAST CARD!, quick chat ---------- */
.rp-bots{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.rp-bots .rp-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; }
.rp-bot-faces{ display:flex; }
.rp-bot-faces img{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; margin-left:-7px; }
.rp-bot-faces img:first-child{ margin-left:0; }
.rp-rules{ display:flex; flex-direction:column; gap:8px; }
.rp-rule{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid #e6e6e6; background:none; color:inherit; font:inherit; border-radius:14px; padding:11px 12px; cursor:pointer; }
.rp-rule-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rp-rule-tx b{ font-size:14.5px; } .rp-rule-tx span{ font-size:12.5px; color:#737373; line-height:1.35; }
.rp-sw{ flex-shrink:0; width:42px; height:25px; border-radius:13px; background:#d6d6d6; position:relative; transition:background-color .2s ease; }
.rp-sw::after{ content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:translate .2s ease; }
.rp-rule.on .rp-sw{ background:#34c759; } .rp-rule.on .rp-sw::after{ translate:17px 0; }
html.theme-dark .rp-rule{ border-color:#333; } html.theme-dark .rp-rule-tx span{ color:#a1a1a1; } html.theme-dark .rp-sw{ background:#3a3a3a; }
.rp-swap{ display:flex; flex-direction:column; gap:4px; }
.rp-swap .rp-person{ width:100%; border:none; background:none; color:inherit; font:inherit; text-align:left; border-radius:12px; padding:8px; }
.rp-swap .rp-person:active{ background:rgba(127,127,127,.15); }
.rp-pn span{ font-size:12.5px; color:#8e8e8e; }

.rp-ruletags{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:8px; pointer-events:none; text-shadow:none; }
.rp-ruletags span{ font-size:11px; font-weight:700; background:rgba(0,0,0,.35); color:#fff; padding:3px 9px; border-radius:999px; }
.rp-calls{ position:absolute; left:8px; right:8px; bottom:calc(214px + env(safe-area-inset-bottom)); z-index:12; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; pointer-events:none; }
.rp-calls > *{ pointer-events:auto; }
.rp-callbtn, .rp-catchbtn{ border:none; cursor:pointer; font:inherit; font-weight:900; letter-spacing:.3px; border-radius:999px; padding:10px 16px; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.rp-callbtn{ font-size:17px; background:radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a); border:3px solid #ffd60a; animation:rpCallPulse 1s ease-in-out infinite; }
.rp-catchbtn{ font-size:15px; background:#111; border:2px solid #fff; animation:rpCallPulse 1.2s ease-in-out infinite; }
@keyframes rpCallPulse{ 0%, 100%{ scale:1; } 50%{ scale:1.08; } }
.rp-callbtn:active, .rp-catchbtn:active{ scale:.94; animation:none; }
.rp-card.jump{ box-shadow:0 0 0 3px #ffd60a, 0 8px 20px rgba(255,214,10,.5); }
.rp-chatbtn{ width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.18); font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.rp-tray{ position:absolute; left:12px; right:12px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:30; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
  background:rgba(20,20,20,.92); border-radius:18px; padding:10px; box-shadow:0 10px 30px rgba(0,0,0,.4); animation:igDialogIn .16s ease; }
.rp-tray button{ border:none; border-radius:12px; padding:10px 4px; background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.rp-tray button.emo{ font-size:24px; padding:6px 4px; }
.rp-tray button:active{ background:rgba(255,255,255,.25); }
.rp-ava{ overflow:visible; }
.rp-bubble{ position:absolute; bottom:calc(100% + 6px); left:50%; translate:-50% 0; z-index:25; white-space:nowrap; background:#fff; color:#111; font-size:13px; font-weight:800;
  padding:6px 11px; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.3); animation:rpBubble 4s ease forwards; pointer-events:none; }
.rp-bubble::after{ content:''; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:#fff; }
.rp-bubble.emo{ font-size:26px; padding:3px 8px; }
.rp-mebar .rp-bubble{ bottom:calc(100% + 4px); }
@keyframes rpBubble{ 0%{ opacity:0; scale:.6; } 8%{ opacity:1; scale:1.05; } 14%{ scale:1; } 85%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .rp-callbtn, .rp-catchbtn, .rp-bubble{ animation:none; } }

/* ---------- Live content: Read, Jobs, Nearby stores ---------- */
.lv-wrap{ margin-top:6px; }
.lv-head{ display:flex; flex-direction:column; gap:2px; margin:14px 0 10px; }
.lv-head b{ font-size:17px; font-weight:700; } .lv-head span{ font-size:12.5px; color:var(--ig-soft, #737373); line-height:1.4; }
.lv-card{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--ig-sep, #efefef); color:inherit; text-decoration:none; }
.lv-card:active{ opacity:.7; }
.lv-img{ flex-shrink:0; width:96px; height:72px; border-radius:10px; object-fit:cover; background:#f0f0f0; display:block; }
.lv-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lv-tx b{ font-size:15px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.lv-tx p{ margin:0; font-size:13px; line-height:1.4; color:var(--ig-soft, #737373); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lv-meta{ font-size:12px; color:var(--ig-soft, #8e8e8e); }
.lv-skel .lv-img{ animation:lvPulse 1.2s ease-in-out infinite; } .lv-skel b, .lv-skel p{ display:block; height:12px; border-radius:6px; background:#eee; animation:lvPulse 1.2s ease-in-out infinite; } .lv-skel p{ width:70%; }
@keyframes lvPulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.45; } }
.lv-err{ font-size:13.5px; color:var(--ig-soft, #737373); padding:14px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lv-shelf{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; margin:0 -16px 6px; padding:0 16px 6px; scroll-snap-type:x mandatory; scroll-padding:0 16px; }
.lv-shelf::-webkit-scrollbar{ display:none; }
.lv-book{ flex:0 0 112px; scroll-snap-align:start; display:flex; flex-direction:column; gap:3px; color:inherit; text-decoration:none; }
.lv-cover{ position:relative; width:112px; height:166px; border-radius:8px; overflow:hidden; background:linear-gradient(160deg, #3a3a3a, #111); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.lv-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.lv-cover i{ position:absolute; inset:10px; color:#fff; font-style:normal; font-weight:700; font-size:13px; line-height:1.25; display:flex; align-items:flex-end; }
.lv-book b{ font-size:13px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lv-book span{ font-size:11.5px; color:var(--ig-soft, #8e8e8e); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-book em{ font-style:normal; font-size:11px; font-weight:700; color:#1a7f37; }
.lv-tools{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.lv-search{ flex:1; min-width:0; border:1px solid var(--ig-sep, #e6e6e6); background:transparent; color:inherit; border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; }
.lv-chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 6px; padding-bottom:4px; }
.lv-chips::-webkit-scrollbar{ display:none; }
.lv-chip{ flex-shrink:0; border:1px solid var(--ig-sep, #dbdbdb); background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:600; border-radius:999px; padding:7px 13px; cursor:pointer; }
.lv-chip.on{ background:#000; color:#fff; border-color:#000; }
html.theme-dark .lv-chip.on{ background:#fff; color:#000; border-color:#fff; }
.lv-count{ font-size:12px; color:var(--ig-soft, #8e8e8e); margin:6px 0 2px; }
.lv-job{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--ig-sep, #efefef); color:inherit; text-decoration:none; }
.lv-logo{ position:relative; flex-shrink:0; width:44px; height:44px; border-radius:10px; overflow:hidden; background:#f0f0f0; display:flex; align-items:center; justify-content:center; }
.lv-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; z-index:1; }
.lv-logo i{ font-style:normal; font-weight:800; color:#8e8e8e; }
.lv-co{ font-size:13px; color:var(--ig-soft, #737373); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.lv-tags em{ font-style:normal; font-size:11px; font-weight:600; background:rgba(127,127,127,.13); border-radius:6px; padding:2px 7px; }
.lv-tags em.pay{ background:rgba(26,127,55,.12); color:#1a7f37; }
.lv-apply{ flex-shrink:0; align-self:center; font-size:13px; font-weight:700; border:1px solid var(--ig-sep, #dbdbdb); border-radius:10px; padding:7px 12px; }
.lv-locate{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:16px; border:1px solid var(--ig-sep, #e6e6e6); border-radius:16px; }
.lv-locate b{ font-size:15px; } .lv-locate span{ font-size:13px; color:var(--ig-soft, #737373); line-height:1.4; }
.lv-shop{ display:flex; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ig-sep, #efefef); }
.lv-shop-acts{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.lv-shop-acts a{ text-decoration:none; text-align:center; font-size:13px; padding:7px 12px; }
.lv-src{ font-size:11px; color:var(--ig-soft, #8e8e8e); text-align:center; padding:12px 0; }
html.theme-dark .lv-img, html.theme-dark .lv-logo{ background:#1c1c1c; }
html.theme-dark .lv-skel b, html.theme-dark .lv-skel p{ background:#262626; }
html.theme-dark .lv-card, html.theme-dark .lv-job, html.theme-dark .lv-shop{ border-color:#262626; }
html.theme-dark .lv-search, html.theme-dark .lv-chip, html.theme-dark .lv-apply, html.theme-dark .lv-locate{ border-color:#363636; }

/* ---------- "Get the Weave app" guide ---------- */
.su{ display:flex; flex-direction:column; gap:14px; }
.su-hero{ display:flex; gap:14px; align-items:center; }
.su-hero img{ border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.18); flex-shrink:0; }
.su-hero b{ display:block; font-size:19px; } .su-hero span{ font-size:13.5px; color:var(--ig-soft, #737373); }
.su-step{ display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--ig-sep, #e6e6e6); border-radius:16px; }
.su-step.done{ opacity:.75; }
.su-n{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#000; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.su-step.done .su-n{ background:#1a7f37; }
html.theme-dark .su-n{ background:#fff; color:#000; } html.theme-dark .su-step.done .su-n{ background:#30d158; color:#000; }
.su-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.su-body > b{ font-size:15.5px; }
.su-p{ font-size:13.5px; line-height:1.45; color:var(--ig-soft, #737373); margin:0; }
.su-ol{ margin:2px 0 0; padding-left:18px; font-size:14px; line-height:1.55; }
.su-ol li{ margin:3px 0; } .su-ol svg{ vertical-align:-3px; }
.su-key{ display:inline-flex; min-width:20px; justify-content:center; font-weight:800; }
.su-btn{ align-self:flex-start; border:none; border-radius:12px; padding:11px 18px; font:inherit; font-size:14.5px; font-weight:700; background:#000; color:#fff; cursor:pointer; margin-top:4px; }
html.theme-dark .su-btn{ background:#fff; color:#000; }
.su-btn:active{ scale:.97; }
.su-later{ border:none; background:none; color:var(--ig-soft, #737373); font:inherit; font-size:14px; font-weight:600; padding:8px; cursor:pointer; }
html.theme-dark .su-step{ border-color:#363636; }

/* ---------- Invite friends ---------- */
.inv{ display:flex; flex-direction:column; gap:12px; }
.inv-link{ display:flex; align-items:center; gap:8px; border:1px solid var(--ig-sep, #e6e6e6); border-radius:14px; padding:6px 6px 6px 12px; }
.inv-link span{ flex:1; min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-link .su-btn{ margin:0; padding:9px 16px; }
.inv-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.inv-act{ flex:1; min-width:96px; text-align:center; text-decoration:none; border:1px solid var(--ig-sep, #dbdbdb); background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:700; border-radius:12px; padding:11px 8px; cursor:pointer; }
.inv-act.wa{ background:#25d366; border-color:#25d366; color:#fff; }
.inv-count{ font-size:14px; color:var(--ig-soft, #737373); } .inv-count b{ color:inherit; font-size:16px; }
.inv-people{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.inv-p{ flex-shrink:0; width:64px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.inv-p span{ font-size:11.5px; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.theme-dark .inv-link, html.theme-dark .inv-act:not(.wa){ border-color:#363636; }

/* ---------- Snap camera ---------- */
.sn-page{ display:none; position:fixed; inset:0; z-index:400; background:#000; color:#fff; overscroll-behavior:contain; touch-action:manipulation; }
.sn-page.on{ display:block; animation:igFadeIn .18s ease; }
.sn-stage{ position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; background:#000; }
@media (min-width:600px){ .sn-stage, .sn-view img{ left:50% !important; right:auto !important; width:min(56.25vh, 100vw); translate:-50% 0; } }
.sn-stage video, .sn-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sn-stage video.mirror{ transform:scaleX(-1); }
#sn-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sn-msg{ position:absolute; left:24px; right:24px; top:42%; text-align:center; font-size:15px; line-height:1.45; color:#ddd; }
.sn-top{ position:absolute; left:0; right:0; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:linear-gradient(rgba(0,0,0,.45), transparent); }
.sn-top b{ font-size:17px; letter-spacing:.3px; }
.sn-tools{ display:flex; flex-direction:column; gap:10px; }
.sn-ib{ width:42px; height:42px; border-radius:50%; border:none; background:rgba(0,0,0,.35); color:#fff; font:inherit; font-size:20px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.sn-ib svg{ width:22px; height:22px; } .sn-ib.ghost{ background:none; } .sn-ib.dark{ background:transparent; color:inherit; }
.sn-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:10px 0 calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.55)); }
.sn-bottom.edit{ display:flex; justify-content:flex-end; padding-right:14px; }
.sn-lenses{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:4px calc(50% - 30px) 12px; scroll-snap-type:x mandatory; }
.sn-lenses::-webkit-scrollbar{ display:none; }
.sn-lens{ flex-shrink:0; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; border:none; background:none; color:#fff; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
.sn-lens i{ width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--c); border:3px solid rgba(255,255,255,.35); transition:transform .15s ease, border-color .15s ease; }
.sn-lens.on i{ border-color:#fff; transform:scale(1.12); }
.sn-row{ display:flex; align-items:center; justify-content:space-around; }
.sn-gal{ cursor:pointer; }
.sn-shutter{ width:78px; height:78px; border-radius:50%; border:5px solid #fff; background:transparent; padding:5px; cursor:pointer; }
.sn-shutter i{ display:block; width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,.25); transition:transform .1s ease; }
.sn-shutter:active i{ transform:scale(.85); background:#fff; }
.sn-cap{ position:absolute; left:0; right:0; translate:0 -50%; z-index:3; background:rgba(0,0,0,.55); padding:8px 12px; touch-action:none; }
.sn-cap input{ width:100%; border:none; background:transparent; color:#fff; font:inherit; font-size:18px; font-weight:600; text-align:center; outline:none; }
.sn-cap input::placeholder{ color:#ccc; }
.sn-stk{ position:absolute; z-index:4; translate:-50% -50%; line-height:1; cursor:grab; touch-action:none; user-select:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.sn-tray{ position:absolute; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:6; display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; background:rgba(20,20,20,.9); border-radius:18px; padding:10px; }
.sn-tray[hidden]{ display:none; }
.sn-tray button{ border:none; background:none; font-size:28px; padding:4px 0; cursor:pointer; }
.sn-send{ border:none; border-radius:999px; background:#ffd60a; color:#000; font:inherit; font-size:16px; font-weight:800; padding:13px 22px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.sn-send:disabled{ opacity:.45; cursor:default; }
.sn-send-page{ position:absolute; inset:0; background:var(--bg, #fff); color:var(--ink, #000); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
html.theme-dark .sn-send-page{ background:#000; color:#f5f5f5; }
.sn-send-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; } .sn-send-top b{ font-size:17px; } .sn-send-top span{ width:42px; }
.sn-search{ margin:0 14px 8px; border:1px solid var(--ig-sep, #e3e3e3); border-radius:12px; padding:10px 12px; background:transparent; color:inherit; font:inherit; font-size:15px; }
.sn-list{ flex:1; overflow-y:auto; padding:0 14px 90px; overscroll-behavior:contain; }
.sn-row-p{ width:100%; display:flex; align-items:center; gap:12px; border:none; background:none; color:inherit; font:inherit; text-align:left; padding:8px 0; cursor:pointer; }
.sn-pn{ flex:1; min-width:0; display:flex; flex-direction:column; } .sn-pn b{ font-size:15px; font-weight:600; } .sn-pn small{ font-size:12.5px; color:var(--ig-soft, #8e8e8e); }
.sn-ck{ width:24px; height:24px; border-radius:50%; border:2px solid #c7c7c7; flex-shrink:0; }
.sn-row-p.on .sn-ck{ background:#0a84ff; border-color:#0a84ff; box-shadow:inset 0 0 0 3px var(--bg, #fff); }
html.theme-dark .sn-row-p.on .sn-ck{ box-shadow:inset 0 0 0 3px #000; }
.sn-row-p.sn-mystory{ border-bottom:1px solid var(--ig-sep, #efefef); padding-bottom:12px; margin-bottom:6px; }
.sn-story-ic .avatar{ box-shadow:0 0 0 2px var(--bg, #fff), 0 0 0 4px #000; }
.sn-empty{ font-size:14px; color:var(--ig-soft, #8e8e8e); padding:20px 0; text-align:center; }
.sn-send-bar{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:#0a84ff; color:#fff; font-weight:700; }
.sn-send-bar .sn-send{ background:#fff; color:#0a84ff; padding:10px 18px; box-shadow:none; }
.sn-view{ position:absolute; inset:0; background:#000; cursor:pointer; }
.sn-view img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.sn-timer{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.sn-timer svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.sn-timer circle{ fill:rgba(0,0,0,.4); stroke:#fff; stroke-width:3; stroke-dasharray:94.2; stroke-dashoffset:0; animation:snTick 10s linear forwards; }
@keyframes snTick{ to{ stroke-dashoffset:94.2; } }
.sn-hint{ position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom)); text-align:center; font-size:12.5px; color:rgba(255,255,255,.75); }
/* Snap bubbles in chats */
.sn-bub{ display:flex; align-items:center; gap:10px; border:none; background:none; color:inherit; font:inherit; text-align:left; padding:4px 2px; }
.sn-bub i{ font-style:normal; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; background:#ff3b5c; color:#fff; flex-shrink:0; }
.sn-bub.done i{ background:transparent; border:2px solid currentColor; opacity:.6; }
.sn-bub span{ display:flex; flex-direction:column; } .sn-bub b{ font-size:14.5px; } .sn-bub small{ font-size:12px; opacity:.7; }
button.sn-bub.new{ cursor:pointer; } button.sn-bub.new i{ animation:rpCallPulse 1.4s ease-in-out infinite; }

/* ----- Daily streaks ----- */
.sk-badge{ display:inline-flex; align-items:center; gap:1px; margin-left:6px; font-size:13px; font-weight:600; line-height:1; color:var(--ink); vertical-align:1px; cursor:pointer; white-space:nowrap; }
.sk-badge b{ font-weight:700; margin-left:1px; }
.sk-badge i{ font-style:normal; font-size:12px; margin-left:2px; }
.sk-badge.mini{ font-size:12px; cursor:inherit; margin-left:5px; }
.sk-badge.risk i{ animation:skTick 1.6s ease-in-out infinite; display:inline-block; }
.sk-badge.pop{ animation:skPop .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes skTick{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(180deg); } }
@keyframes skPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.6); } 100%{ transform:scale(1); } }
.ig-th-name #ig-th-streak .sk-badge{ font-size:13px; }
.sk-info{ text-align:center; padding:6px 4px 4px; }
.sk-big{ font-size:46px; line-height:1; display:flex; align-items:center; justify-content:center; gap:4px; }
.sk-big b{ font-size:40px; font-weight:800; }
.sk-h{ font-size:18px; font-weight:700; margin-top:10px; }
.sk-p{ color:var(--ig-soft); font-size:14px; margin:6px 0 14px; }
.sk-status{ background:var(--ig-gray); border-radius:12px; padding:10px 12px; font-size:14px; font-weight:600; }
.sk-status.done{ background:rgba(0,149,246,.1); }
.sk-how{ text-align:left; margin:14px 4px 4px; padding-left:18px; color:var(--ig-soft); font-size:13px; line-height:1.5; }
.sk-btns{ display:flex; gap:8px; margin-top:16px; }
.sk-btns .ig-btn{ flex:1; }
@media (prefers-reduced-motion: reduce){ .sk-badge.risk i, .sk-badge.pop{ animation:none; } }

/* ----- Professional dashboard ----- */
.pd-teaser{ display:flex; align-items:center; width:calc(100% - 32px); margin:12px 16px 0; padding:10px 14px; border:0; border-radius:10px; background:var(--ig-gray); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.pd-teaser-t{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pd-teaser-t b{ font-size:14px; font-weight:600; }
.pd-teaser-t small{ font-size:12px; color:var(--ig-soft); }
.pd-chev{ font-size:22px; color:var(--ig-soft); line-height:1; }
.pd-page{ z-index:230; }
.pd-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.pd-wrap{ max-width:640px; margin:0 auto; padding:14px 16px calc(28px + env(safe-area-inset-bottom)); }
.pd-seg{ display:flex; background:var(--ig-gray); border-radius:10px; padding:3px; gap:3px; }
.pd-seg button{ flex:1; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; font-weight:600; padding:8px 0; border-radius:8px; cursor:pointer; }
.pd-seg button.on{ background:var(--bg); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.pd-range{ font-size:12px; color:var(--ig-soft); margin:10px 2px 0; }
.pd-sec-h{ font-size:16px; font-weight:700; margin:20px 2px 10px; }
.pd-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pd-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px; border:1px solid var(--ig-sep); border-radius:12px; background:var(--bg); color:var(--ink); font:inherit; text-align:left; cursor:pointer; min-width:0; }
.pd-tile.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.pd-tl{ font-size:12px; color:var(--ig-soft); }
.pd-tv{ font-size:24px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.pd-chg{ font-size:11px; color:var(--ig-soft); }
.pd-chg.up{ color:#0a8f3c; } .pd-chg.down{ color:#d93025; }
html.theme-dark .pd-chg.up{ color:#4cd982; } html.theme-dark .pd-chg.down{ color:#ff6b6b; }
.pd-card{ border:1px solid var(--ig-sep); border-radius:12px; padding:14px; margin-top:10px; background:var(--bg); }
.pd-card-h{ font-size:13px; font-weight:600; margin-bottom:10px; }
.pd-chart{ position:relative; height:150px; padding-top:16px; }
.pd-ymax{ position:absolute; top:0; left:0; font-size:11px; color:var(--ig-soft); font-variant-numeric:tabular-nums; }
.pd-plot{ position:absolute; left:0; right:0; top:16px; bottom:0; display:flex; align-items:flex-end; gap:2px; border-top:1px dashed var(--ig-sep); border-bottom:1px solid var(--ig-sep); }
.pd-col{ flex:1; height:100%; display:flex; align-items:flex-end; cursor:default; touch-action:pan-y; }
.pd-col i{ display:block; width:100%; max-width:28px; margin:0 auto; background:var(--ig-blue); border-radius:4px 4px 0 0; }
.pd-col.on i{ background:var(--ig-blue-dark); }
.pd-col.on{ background:rgba(0,149,246,.08); border-radius:4px 4px 0 0; }
.pd-tip{ position:absolute; top:-6px; z-index:2; background:var(--ink); color:var(--bg); font-size:12px; font-weight:600; padding:5px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; }
.pd-x{ display:flex; justify-content:space-between; font-size:11px; color:var(--ig-soft); margin-top:6px; }
.pd-empty-note{ font-size:12px; color:var(--ig-soft); margin:-4px 0 6px; }
.pd-posts{ padding:4px 0; }
.pd-post{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.pd-post + .pd-post{ border-top:1px solid var(--ig-sep); }
.pd-thumb{ width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--ig-gray); display:flex; align-items:center; justify-content:center; }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-txt{ font-size:9px; line-height:1.2; padding:4px; color:var(--ig-soft); overflow:hidden; max-height:100%; }
.pd-post-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pd-post-text{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-post-meta{ font-size:12px; color:var(--ig-soft); }
.pd-post-stats{ display:flex; gap:12px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.pd-post-stats span{ display:inline-flex; align-items:center; gap:4px; }
.pd-post-stats svg{ width:14px; height:14px; }
.pd-aud-top{ display:flex; gap:8px; margin-bottom:16px; }
.pd-aud-top div{ flex:1; display:flex; flex-direction:column; align-items:center; padding:8px 4px; background:var(--ig-gray); border-radius:10px; }
.pd-aud-top b{ font-size:18px; font-variant-numeric:tabular-nums; }
.pd-aud-top span{ font-size:11px; color:var(--ig-soft); text-align:center; }
.pd-city{ display:flex; align-items:center; gap:10px; font-size:13px; margin:8px 0; }
.pd-city-n{ width:96px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-city-bar{ flex:1; height:6px; background:var(--ig-gray); border-radius:3px; overflow:hidden; }
.pd-city-bar i{ display:block; height:100%; background:var(--ig-blue); border-radius:3px; }
.pd-city b{ width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.pd-best{ font-size:13px; margin-bottom:10px; }
.pd-hours{ display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; }
.pd-hours i{ display:block; height:22px; background:var(--ig-blue); border-radius:3px; }
.pd-hours-x{ display:flex; justify-content:space-between; font-size:10px; color:var(--ig-soft); margin-top:4px; }
.pd-muted{ font-size:13px; color:var(--ig-soft); }
.pd-foot{ font-size:11px; color:var(--ig-soft); margin:18px 2px 0; line-height:1.5; }
.pd-loading{ display:flex; justify-content:center; padding:60px 0; }
.pd-loading .ig-splash-dots{ position:static; }

/* ----- Music search ----- */
.sp-search{ position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 12px; background:var(--card); border-radius:10px; border:1px solid var(--ig-sep); }
.sp-search-ic{ display:flex; color:var(--ig-soft); flex-shrink:0; }
.sp-search-ic svg{ width:18px; height:18px; }
.sp-search input{ flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; outline:none; padding:2px 0; }
.sp-search input::placeholder{ color:var(--ig-soft); }
.sp-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.sp-search-x{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; border-radius:50%; background:var(--ig-gray); color:var(--ink); cursor:pointer; flex-shrink:0; }
.sp-search-x svg{ width:14px; height:14px; }
.sp-search-head{ display:flex; align-items:center; justify-content:space-between; margin:4px 2px 10px; font-size:13px; color:var(--ig-soft); }
.sp-search-play{ display:inline-flex; align-items:center; gap:6px; border:0; background:var(--ig-blue); color:#fff; font:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:20px; cursor:pointer; }
.sp-search-play svg{ width:13px; height:13px; fill:#fff; }
.sp-search-results{ animation:spFade .18s ease; }
@keyframes spFade{ from{ opacity:0; } to{ opacity:1; } }
.sp-search-empty{ text-align:center; padding:48px 24px; color:var(--ig-soft); }
.sp-se-ic{ display:flex; justify-content:center; margin-bottom:12px; opacity:.5; }
.sp-se-ic svg{ width:40px; height:40px; }
.sp-search-empty b{ display:block; color:var(--ink); font-size:16px; margin-bottom:6px; }
.sp-search-empty span{ font-size:13px; line-height:1.5; }