:root{
  --bg:#fff;
  --fg:#000;
  --secondary:#737373;
  --line:#dbdbdb;
  --blue:#0095f6;
  --red:#ff3040;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f5f5f5;color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.viewportShell{min-height:100dvh;display:flex;justify-content:center;background:#f5f5f5}
.phoneApp{position:relative;width:100%;max-width:480px;min-height:100dvh;background:#fff;overflow-x:hidden;box-shadow:0 0 0 1px #ddd}

.avatar{width:var(--avatar-size);height:var(--avatar-size);display:block;object-fit:cover;border-radius:50%;background:#eee}

/* header */
.igHeader,.subHeader{
  position:fixed;z-index:50;top:0;left:50%;transform:translateX(-50%);
  width:min(100%,480px);
  height:calc(54px + var(--safe-top));
  padding:var(--safe-top) 14px 0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #efefef;
}
.brandButton{border:0;background:none;padding:0;display:flex;align-items:center;gap:4px}
.wordmark{font-family:"Segoe Script","Brush Script MT",cursive;font-size:28px;font-weight:700;letter-spacing:-1.8px;line-height:1}
.brandChevronSvg{margin-top:3px}
.headerActions{display:flex;align-items:center;gap:18px}
.topIconBtn{position:relative;border:0;background:none;width:34px;height:34px;padding:0;display:grid;place-items:center}
.notifyDot{position:absolute;right:0;top:1px;width:10px;height:10px;border-radius:50%;background:#ff3040;border:2px solid #fff}
.localeMenu{position:absolute;top:calc(48px + var(--safe-top));left:8px;width:210px;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 8px 30px #0002;padding:6px}
.localeMenu button{width:100%;border:0;background:none;text-align:left;padding:9px 10px;border-radius:7px}
.localeMenu .selected{background:#f3f3f3;font-weight:700}
.subHeader{justify-content:flex-start;gap:6px}
.subHeader .iconButton{border:0;background:none;padding:4px}
.subHeader strong{font-size:16px}
.subHeader span{margin-left:auto;width:30px}

/* main + bottom nav */
.mainContent{padding-top:calc(54px + var(--safe-top));padding-bottom:calc(54px + var(--safe-bottom));min-height:100dvh}
.bottomNav{
  position:fixed;z-index:50;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,480px);
  height:calc(54px + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:#fff;border-top:1px solid #e9e9e9;
}
.bottomNav.darkNav{background:#000;color:#fff;border-top-color:#222}
.navItem{height:53px;border:0;background:none;display:grid;place-items:center;padding:0}
.profileNav .avatar{border:1px solid #ddd}

/* stories */
.storiesStrip{
  height:121px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  overflow-x:auto;
  padding:14px 13px 8px;
  scrollbar-width:none;
  border-bottom:0;
}
.storiesStrip::-webkit-scrollbar{display:none}
.storyCell{
  width:82px;min-width:82px;
  border:0;background:none;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.storyCell small{
  width:82px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12.5px;line-height:15px;color:#111;
}
.storyRing{
  width:78px;height:78px;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg,#ffd600,#ff7a00,#ff0169,#d300c5,#7638fa,#ffd600);
  display:grid;place-items:center;
}
.storyRing .avatar{width:72px!important;height:72px!important;border:2px solid #fff}
.mineStoryWrap{position:relative;width:78px;height:78px;display:grid;place-items:center}
.defaultProfile{
  width:74px;height:74px;border-radius:50%;
  background:#f4f4f4;border:1px solid #d8d8d8;
  position:relative;overflow:hidden;
}
.defaultProfile .head{position:absolute;width:30px;height:30px;border-radius:50%;background:#9498a4;left:22px;top:16px}
.defaultProfile .body{position:absolute;width:58px;height:34px;border-radius:50% 50% 0 0;background:#9498a4;left:8px;bottom:-2px}
.mineStoryWrap i{
  position:absolute;right:1px;bottom:3px;
  width:25px;height:25px;border-radius:50%;background:#000;color:#fff;border:2px solid #fff;
  display:grid;place-items:center;font-style:normal;
}

/* post header */
.postCard{border-bottom:1px solid #efefef;background:#fff}
.postHeader{
  min-height:62px;
  padding:8px 14px 8px 12px;
  display:flex;align-items:center;gap:10px;
}
.collabAvatars{position:relative;width:48px;min-width:48px;height:38px}
.collabAvatar{position:absolute;width:31px;height:31px;border-radius:50%;background:#fff;padding:1px}
.collabAvatar.one{left:0;top:0}
.collabAvatar.two{left:15px;top:8px}
.collabAvatar .avatar{width:29px!important;height:29px!important;border:1px solid #ddd}
.postIdentity{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.postNameLine{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:19px}
.postNameLine b{font-size:15px;font-weight:700}
.postNameLine span{font-size:14px}
.verifiedBadge{display:inline-flex;flex:0 0 auto}
.postLocation{font-size:12.5px;line-height:16px;color:#111}
.postMore{border:0;background:none;padding:4px 0 4px 8px;display:grid;place-items:center}

/* media */
.mediaFrame{width:100%;background:#eee;overflow:hidden}
.mediaFrame img{width:100%;height:100%;display:block;object-fit:cover}

/* action row */
.postActions{
  min-height:56px;
  padding:8px 13px 5px 12px;
  display:flex;align-items:center;justify-content:space-between;
}
.actionCluster{display:flex;align-items:center;gap:2px}
.postActionBtn{border:0;background:none;padding:0;width:31px;height:31px;display:grid;place-items:center}
.actionCount{font-size:17px;font-weight:600;line-height:31px;margin:0 10px 0 1px;white-space:nowrap}
.shareBtn{margin-left:0}
.saveBtn{margin-left:auto}
.isLiked{color:var(--red)}
.isReposted{color:#00a66a}

/* caption */
.postCaption{padding:0 13px 13px}
.postCaption p{margin:0;font-size:16px;line-height:1.35}
.postCaption p b{font-size:16px;margin-right:5px}
.postCaption p span{color:#737373}
.postMetaLine{display:flex;align-items:center;gap:8px;margin-top:5px}
.postMetaLine small{font-size:12px;color:#737373}
.postMetaLine i{font-style:normal;color:#737373}
.postMetaLine button{border:0;background:none;padding:0;font-size:12px;font-weight:700}

/* search / grids */
.searchBox{margin:10px 12px;background:#efefef;border-radius:10px;height:38px;display:flex;align-items:center;gap:8px;padding:0 12px}
.searchBox input{border:0;background:transparent;outline:0;flex:1}
.exploreGrid,.profileGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.exploreGrid img,.profileGrid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}

/* reels */
.reelsMain{padding-top:0;background:#000}
.reelView{height:calc(100dvh - 54px - var(--safe-bottom));position:relative;background:#000;color:#fff}
.reelView>img{width:100%;height:100%;object-fit:cover}
.reelOverlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:18px 12px;background:linear-gradient(transparent 55%,#0007)}
.reelSide{display:grid;gap:14px}

/* list/profile */
.simpleList{padding-top:6px}
.messageRow,.notificationRow{width:100%;min-height:70px;border:0;background:#fff;display:flex;align-items:center;gap:11px;padding:8px 14px;text-align:left}
.messageRow span{display:flex;flex-direction:column}
.messageRow small{color:#737373;margin-top:3px}
.notificationRow p{font-size:13px}
.profileTop{padding:18px 14px}
.profilePrimary{display:flex;align-items:center;gap:22px}
.profileStats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.profileStats div{display:flex;flex-direction:column}
.profileBio{margin-top:12px;display:flex;flex-direction:column;font-size:13px}

/* overlays */
.storyOverlay{position:fixed;z-index:100;inset:0;max-width:480px;margin:auto;background:#000;color:#fff}
.storyMedia{width:100%;height:100%;object-fit:cover}
.storyProgress{position:absolute;top:calc(8px + var(--safe-top));left:8px;right:8px;height:2px;background:#ffffff55}
.storyProgress i{display:block;height:100%;background:#fff;animation:progress 5s linear forwards}
@keyframes progress{from{width:0}to{width:100%}}
.storyBar{position:absolute;top:calc(18px + var(--safe-top));left:10px;right:10px;display:flex;align-items:center;gap:8px}
.storyBar button{margin-left:auto;border:0;background:none;color:#fff}
.storyReply{position:absolute;bottom:calc(14px + var(--safe-bottom));left:12px;right:12px;display:flex;align-items:center;gap:10px}
.storyReply input{flex:1;border:1px solid #fff;border-radius:22px;background:#0003;color:#fff;padding:11px 14px}

.sheetOverlay{position:fixed;z-index:110;inset:0;background:#0008;display:flex;align-items:flex-end;justify-content:center}
.sheetPanel{width:min(100%,480px);background:#fff;border-radius:16px 16px 0 0;min-height:50dvh;padding-bottom:var(--safe-bottom)}
.sheetHeader{height:48px;border-bottom:1px solid #ddd;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px}
.sheetHeader button{border:0;background:none;justify-self:end}
.createDrop{min-height:45dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.blueButton{border:0;background:#0095f6;color:#fff;border-radius:8px;padding:8px 14px;font-weight:700}
.commentList{padding:14px}
.commentList>div{display:flex;gap:10px;margin-bottom:14px}
.commentList p{margin:0}

/* desktop preview */
@media(min-width:481px){
  .viewportShell{padding:0}
}

/* target iPhone-width tuning */
@media(max-width:480px){
  html,body,.viewportShell{background:#fff}
  .phoneApp{max-width:none;box-shadow:none}
}


/* ===== V7 precision fixes ===== */

/* regular feed header avatar */
.singlePostAvatar{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.singlePostAvatar.withRing{
  background:conic-gradient(from 210deg,#ffd600,#ff7a00,#ff0169,#d300c5,#7638fa,#ffd600);
  padding:2px;
}
.singlePostAvatar.withRing .avatar{
  width:30px !important;
  height:30px !important;
  border:1.5px solid #fff;
}

/* comment / repost icons more like the original */
.commentBtn svg{
  width:30px;
  height:30px;
  transform:translateY(0.5px);
}
.repostBtn svg{
  width:28px;
  height:28px;
  transform:translateY(0.5px);
}
.actionCluster{
  gap:1px;
}
.actionCount{
  margin:0 9px 0 1px;
}


/* ===== V8: strict comment/repost icon replica tuning ===== */
.commentBtn,
.repostBtn{
  width:32px !important;
  height:32px !important;
}
.commentBtn svg{
  width:30px;
  height:30px;
  transform:translateY(0.4px);
}
.repostBtn svg{
  width:28px;
  height:28px;
  transform:translateY(0.7px);
}
.actionCluster .commentBtn + .actionCount{
  margin-left:1px;
  margin-right:10px;
}
.actionCluster .repostBtn + .actionCount{
  margin-left:1px;
  margin-right:10px;
}


/* ===== V9 icon replacement: match second reference more closely ===== */
.commentBtn svg{
  width:31px;
  height:31px;
  transform:translateY(0.2px);
}
.repostBtn svg{
  width:29px;
  height:29px;
  transform:translateY(0.5px);
}
.actionCluster .commentBtn + .actionCount{
  margin-left:1px;
  margin-right:10px;
}
.actionCluster .repostBtn + .actionCount{
  margin-left:1px;
  margin-right:10px;
}


/* ===== V10 exact screenshot-derived comment + repost icons ===== */
.commentBtn,
.repostBtn{
  width:32px !important;
  height:32px !important;
  display:grid;
  place-items:center;
}
.exactActionIcon{
  display:block;
  width:31px;
  height:31px;
  object-fit:contain;
  pointer-events:none;
}
.repostBtn .exactActionIcon{
  width:29px;
  height:29px;
}
.actionCluster .commentBtn + .actionCount,
.actionCluster .repostBtn + .actionCount{
  margin-left:1px;
  margin-right:10px;
}


/* ===== V11 replica overhaul: Reels / Messages / Profile ===== */
.appOpenBanner{
  height:86px;
  border-bottom:1px solid #dbdbdb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px 0 14px;
}
.appOpenLeft{display:flex; align-items:center; gap:12px;}
.miniIgLogo{
  width:42px; height:42px; border-radius:12px; position:relative; flex:0 0 auto;
  background:linear-gradient(135deg,#feda75 0%,#fa7e1e 22%,#d62976 52%,#962fbf 77%,#4f5bd5 100%);
  display:block;
}
.miniIgLogoInner{
  position:absolute; inset:9px; border:2.6px solid #fff; border-radius:11px;
}
.miniIgLogoDot{
  position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; right:11px; top:11px;
}
.appOpenText{display:flex; flex-direction:column; line-height:1.05;}
.appOpenText b{font-size:18px; font-weight:700;}
.appOpenText span{font-size:15px; color:#8e8e93; margin-top:3px;}
.openAppBtn{
  border:none; background:#0a84ff; color:#fff; font-weight:700;
  height:50px; padding:0 26px; border-radius:25px; font-size:18px;
}

/* Reels */
.reelsReplica{min-height:100%; background:#fff;}
.reelReplicaStage{
  position:relative;
  height:calc(100vh - 86px - 59px);
  min-height:720px;
  overflow:hidden;
  background:#000;
}
.reelReplicaMedia{width:100%; height:100%; object-fit:cover; display:block;}
.reelRightRail{
  position:absolute; right:14px; bottom:164px;
  display:flex; flex-direction:column; gap:18px; align-items:center; color:#fff;
}
.reelRailBtn{
  border:none; background:transparent; color:inherit; display:flex;
  flex-direction:column; align-items:center; gap:6px; padding:0;
  font-size:15px; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.reelRailBtn span{font-size:18px; line-height:1; white-space:nowrap;}
.reelRepostImg{width:31px; height:31px; filter:brightness(0) invert(1);}
.reelBottomMeta{
  position:absolute; left:16px; right:86px; bottom:68px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.reelAuthorRow{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.reelAuthorRow b{font-size:26px; line-height:1.1;}
.ghostFollowBtn{
  margin-left:4px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.8);
  border-radius:12px; padding:6px 16px; font-size:18px; font-weight:700;
}
.reelBottomMeta p{font-size:18px; line-height:1.35; margin:0;}
.reelBottomMeta p span{opacity:.96;}

/* Messages page */
.messagesReplica{background:#fff; min-height:100%;}
.dmHeader{
  height:64px; display:grid; grid-template-columns:56px 1fr 56px; align-items:center;
  padding:0 10px; border-bottom:1px solid #efefef; background:#fff;
}
.dmBackBtn,.dmComposeBtn,.topPlainIcon{
  border:none; background:transparent; padding:0; display:grid; place-items:center; color:#111;
}
.dmTitle{
  justify-self:center; display:flex; align-items:center; gap:4px;
  font-size:32px; font-weight:800; letter-spacing:-0.3px;
}
.dmSearchBar{
  height:52px; margin:12px 16px 0; border-radius:18px; background:#f2f2f7;
  display:flex; align-items:center; gap:10px; color:#8e8e93; padding:0 18px; font-size:20px;
}
.notesStage{position:relative; padding:18px 16px 10px;}
.noteBubble{
  position:absolute; top:6px; left:20px; background:#fff; border-radius:18px; padding:14px 18px;
  font-size:18px; color:#7c7c80; box-shadow:0 1px 1px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);
}
.noteBubble::after{
  content:""; position:absolute; left:26px; bottom:-8px; width:16px; height:16px;
  background:#fff; border-radius:4px; transform:rotate(45deg);
}
.notesAvatarWrap{padding-top:58px;}
.defaultProfile.large{
  width:118px; height:118px;
}
.defaultProfile.large .head{width:34px; height:34px; top:22px;}
.defaultProfile.large .body{width:70px; height:42px; bottom:14px;}
.notesCaption{font-size:23px; color:#7d7d81; margin-top:6px;}
.dmSectionHead{
  margin:18px 16px 0; display:flex; align-items:center; justify-content:space-between;
}
.dmSectionHead b{font-size:28px;}
.dmSectionHead span{font-size:22px; color:#6f6f74;}
.dmEmptyState{padding:30px 16px 20px;}
.dmEmptyState p{
  font-size:24px; line-height:1.35; color:#72727a; max-width:650px; margin:0;
}

/* Profile page */
.profileReplica{background:#fff; min-height:100%;}
.profileReplicaTopBar{
  height:64px; display:grid; grid-template-columns:56px 1fr 56px; align-items:center;
  padding:0 10px; border-bottom:1px solid #efefef;
}
.profileReplicaTitle{
  justify-self:center; display:flex; align-items:center; gap:4px;
  font-size:32px; font-weight:800; letter-spacing:-0.3px;
}
.profileTabs{
  display:grid; grid-template-columns:1fr 1fr 1fr; height:64px; border-bottom:1px solid #d7d7dc;
}
.profileTab{
  border:none; background:#fff; position:relative; color:#9b9ba1;
  display:grid; place-items:center; padding:0;
}
.profileTab.active{color:#111;}
.profileTab.active::after{
  content:""; position:absolute; left:30px; right:30px; bottom:0; height:4px; background:#111;
}
.profileStartSection{padding:16px 0 20px;}
.profileStartSection h3{font-size:26px; margin:0 16px 14px;}
.starterCards{
  display:flex; gap:18px; overflow-x:auto; padding:0 16px 10px 16px;
  scroll-snap-type:x proximity;
}
.starterCard{
  min-width:558px; max-width:558px; height:560px; flex:0 0 auto;
  border:2px solid #e1e4eb; border-radius:10px; background:#fff;
  padding:50px 32px 28px; display:flex; flex-direction:column; align-items:center;
  scroll-snap-align:start;
}
.starterCameraCircle{
  width:120px; height:120px; border:3px solid #111; border-radius:50%;
  display:grid; place-items:center; margin-bottom:26px;
}
.starterCard h4{
  margin:0; font-size:28px; font-weight:800; line-height:1.1;
}
.starterCard p{
  margin:22px 0 auto; text-align:center; color:#6f6f74; font-size:22px; line-height:1.42;
}
.starterBlueBtn{
  width:100%; height:68px; border:none; border-radius:18px;
  background:#4b5cf3; color:#fff; font-size:24px; font-weight:800;
}

/* tune nav on replica pages */
.bottomNav{
  z-index:3;
}


/* ===== V12 interaction + logic pass ===== */
.dmTitleButton,.titleAsButton{
  border:none; background:transparent; padding:0;
}
.accountDrop,.profileAccountDrop{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  width:220px; background:#fff; border:1px solid #ddd; border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.16); padding:6px; z-index:8;
}
.accountDrop button,.profileAccountDrop button{
  width:100%; border:none; background:#fff; text-align:left; padding:12px; border-radius:8px; font-size:15px;
}
.accountDrop button:hover,.profileAccountDrop button:hover{background:#f3f3f3;}

.dmSearchBar input{
  flex:1; border:none; outline:none; background:transparent; font-size:20px; color:#111;
}
.clearSearch{border:none;background:#c8c8cc;color:#fff;width:20px;height:20px;border-radius:50%;padding:0;line-height:18px;}

.noteStageButton{
  width:100%; border:none; background:#fff; text-align:left; display:block; cursor:pointer;
}
.notesAvatarWrap{
  width:118px; height:118px; position:relative; padding-top:0; margin-top:58px;
}
.defaultProfile.large{
  position:absolute; inset:0; width:118px; height:118px;
}
.defaultProfile.large .head{left:42px; top:26px; width:34px; height:34px;}
.defaultProfile.large .body{left:24px; bottom:10px; width:70px; height:46px;}

.requestsButton{
  border:none; background:transparent; color:#6f6f74; font-size:22px; padding:0;
}
.requestsHeader{grid-template-columns:56px 1fr 56px;}
.compactTitle{font-size:24px;}
.requestsEmpty{
  padding:100px 24px; text-align:center; color:#6f6f74;
}
.requestsEmpty h3{color:#111;font-size:22px;margin:16px 0 6px;}
.requestsEmpty p{font-size:16px;line-height:1.4;margin:0;}

.modalOverlay{
  position:fixed; z-index:200; inset:0; background:rgba(0,0,0,.35);
  display:flex; align-items:flex-end; justify-content:center;
}
.modalCard{
  width:min(100%,480px); background:#fff; border-radius:18px 18px 0 0;
  padding-bottom:calc(18px + var(--safe-bottom)); max-height:82vh; overflow:auto;
}
.modalTitleRow{
  height:54px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  border-bottom:1px solid #e5e5e5; padding:0 14px;
}
.modalTitleRow button{border:none;background:transparent;padding:0;font-size:15px;}
.modalTitleRow button:last-child{justify-self:end;}
.blueTextBtn{color:#0095f6;font-weight:700;}
.recipientRow{display:flex;align-items:center;gap:8px;padding:14px;border-bottom:1px solid #eee;font-size:16px;}
.recipientRow input{flex:1;border:none;outline:none;font-size:16px;}
.composeEmpty{padding:46px 20px;text-align:center;color:#777;}
.noteModal textarea{
  width:calc(100% - 28px); margin:18px 14px 4px; height:130px;
  border:none; outline:none; resize:none; font-size:22px; line-height:1.4;
}
.noteCount{text-align:right;color:#999;padding:0 16px 12px;font-size:12px;}

.profileReplicaTopBar{position:relative;}
.profileAccountDrop{top:58px;}
.profileTabEmpty{
  padding:110px 20px; text-align:center; color:#777;
}
.profileTabEmpty h3{font-size:22px;color:#111;margin:14px 0 6px;}
.profileTabEmpty p{margin:0;font-size:15px;}
.avatarReady{border:none;overflow:hidden;}
.avatarReady .avatar{width:88px!important;height:88px!important;}

.settingsModal>button{
  display:block;width:100%;text-align:left;border:none;background:#fff;padding:15px 18px;font-size:16px;border-bottom:1px solid #f0f0f0;
}


/* ===== V13 mobile layout fix ===== */
html, body, #root {
  max-width: 100%;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

.profileReplica,
.messagesReplica,
.reelsReplica {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.starterCards {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}

.starterCard {
  width: 100% !important;
  max-width: 100% !important;
}

.starterBlueBtn {
  width: calc(100% - 32px) !important;
  max-width: none !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.appOpenBanner {
  display: none !important;
}

.profileTabs,
.profileStartSection {
  width: 100% !important;
  max-width: 100% !important;
}

body {
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
}


/* ===== V14 Reels interaction logic ===== */
.reelRailBtn{
  cursor:pointer;
}
.reelRailBtn:active,
.reelProfileButton:active,
.reelUsernameButton:active,
.ghostFollowBtn:active{
  transform:scale(.94);
}
.activeLiked{
  color:#ff3040 !important;
}
.activeReposted{
  color:#4cd964 !important;
}
.reelExactWhiteIcon{
  display:block;
  filter:brightness(0) invert(1);
  object-fit:contain;
  pointer-events:none;
}
.reelCommentIcon{
  width:36px;
  height:36px;
}
.reelRepostImg{
  width:34px;
  height:34px;
}
.activeReposted .reelRepostImg{
  filter:none;
}
.reelProfileButton,
.reelUsernameButton{
  border:none;
  background:transparent;
  color:#fff;
  padding:0;
}
.reelProfileButton{
  border-radius:50%;
  overflow:hidden;
}
.reelUsernameButton{
  font-size:26px;
  font-weight:800;
  text-align:left;
}
.ghostFollowBtn.following,
.profileFollowBtn.following{
  background:rgba(255,255,255,.18);
}
.reelCaptionText{
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap;
}
.reelMoreText{
  border:none;
  background:transparent;
  color:#ddd;
  padding:0;
  font-size:18px;
  font-weight:500;
}

.reelSheetBackdrop{
  position:absolute;
  z-index:80;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.reelBottomSheet{
  width:100%;
  max-height:78%;
  background:#fff;
  color:#111;
  border-radius:18px 18px 0 0;
  overflow:auto;
  padding-bottom:calc(12px + var(--safe-bottom));
}
.sheetGrabber{
  width:40px;
  height:4px;
  border-radius:99px;
  background:#c7c7c7;
  margin:8px auto 6px;
}
.reelSheetTitle{
  height:48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid #eee;
  padding:0 14px;
}
.reelSheetTitle b{
  grid-column:2;
  font-size:15px;
}
.reelSheetTitle button{
  grid-column:3;
  justify-self:end;
  border:none;
  background:transparent;
  padding:0;
}
.reelCommentsList{
  max-height:410px;
  overflow:auto;
  padding:4px 14px;
}
.reelCommentRow{
  display:grid;
  grid-template-columns:36px 1fr 24px;
  gap:10px;
  align-items:start;
  padding:10px 0;
}
.reelCommentRow b{
  font-size:13px;
}
.reelCommentRow p{
  margin:2px 0 4px;
  font-size:13px;
}
.reelCommentRow small{
  color:#777;
  font-size:11px;
}
.tinyHeartBtn{
  border:none;
  background:transparent;
  padding:4px 0;
}
.reelCommentComposer{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:9px;
  align-items:center;
  border-top:1px solid #eee;
  padding:10px 12px;
}
.reelCommentComposer input{
  border:none;
  outline:none;
  background:#f2f2f2;
  border-radius:18px;
  padding:9px 12px;
  min-width:0;
}
.reelCommentComposer button{
  border:none;
  background:transparent;
  color:#0095f6;
  font-weight:700;
}
.reelCommentComposer button:disabled{
  opacity:.35;
}

.shareQuickRow{
  display:flex;
  gap:18px;
  overflow:auto;
  padding:18px 14px;
  scrollbar-width:none;
}
.shareQuickRow::-webkit-scrollbar{display:none}
.shareQuickRow button{
  border:none;
  background:transparent;
  min-width:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.shareQuickRow span{
  font-size:10px;
  max-width:65px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shareActionRow{
  width:100%;
  border:none;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:11px 14px;
}
.shareActionRow>span:last-child{
  display:flex;
  flex-direction:column;
}
.shareActionRow small{
  color:#777;
  margin-top:2px;
}
.shareRoundIcon{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#eee;
  display:grid;
  place-items:center;
  font-size:20px;
}

.reelProfileSheet{
  padding:14px 14px calc(18px + var(--safe-bottom));
}
.reelProfileTop{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:8px;
}
.reelProfileStats{
  flex:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  text-align:center;
}
.reelProfileStats div{
  display:flex;
  flex-direction:column;
}
.reelProfileStats b{
  font-size:16px;
}
.reelProfileStats span{
  font-size:11px;
}
.reelProfileSheet h3{
  margin:12px 0 4px;
  font-size:14px;
}
.reelProfileSheet p{
  font-size:13px;
  line-height:1.4;
  margin:0 0 12px;
}
.profileFollowBtn{
  width:100%;
  border:none;
  background:#0095f6;
  color:#fff;
  border-radius:8px;
  padding:8px;
  font-weight:700;
  margin-bottom:12px;
}
.miniProfileGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}
.miniProfileGrid img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}

.moreSheet{
  padding:8px 0 calc(8px + var(--safe-bottom));
}
.moreSheet button{
  width:100%;
  border:none;
  background:#fff;
  text-align:center;
  padding:15px 16px;
  border-bottom:1px solid #eee;
  font-size:14px;
}
.moreSheet .dangerAction{
  color:#ed4956;
  font-weight:700;
}


/* ===== V15 feed comment/share functionality ===== */
.feedSheetBackdrop{
  position:fixed;
  z-index:180;
  inset:0;
  background:rgba(0,0,0,.48);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.feedBottomSheet{
  width:min(100%,480px);
  max-height:78vh;
  background:#fff;
  border-radius:16px 16px 0 0;
  overflow:hidden;
  padding-bottom:calc(8px + var(--safe-bottom));
}
.feedSheetGrabber{
  width:42px;
  height:4px;
  border-radius:99px;
  background:#c9c9c9;
  margin:8px auto 5px;
}
.feedSheetHeader{
  height:46px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid #eee;
  padding:0 12px;
}
.feedSheetHeader b{
  grid-column:2;
  font-size:14px;
}
.feedSheetHeader button{
  grid-column:3;
  justify-self:end;
  border:none;
  background:transparent;
  padding:0;
}
.feedCommentsList{
  max-height:48vh;
  overflow-y:auto;
  padding:6px 12px;
}
.feedCommentRow{
  display:grid;
  grid-template-columns:34px 1fr 24px;
  gap:10px;
  align-items:start;
  padding:10px 0;
}
.feedCommentBody p{
  margin:0 0 4px;
  font-size:13px;
  line-height:1.35;
}
.feedCommentBody small{
  color:#777;
  font-size:11px;
}
.feedCommentLike{
  border:none;
  background:transparent;
  padding:4px 0;
}
.feedCommentComposer{
  border-top:1px solid #eee;
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  align-items:center;
  padding:10px 12px;
}
.feedCommentComposer input{
  min-width:0;
  border:none;
  outline:none;
  background:#f2f2f2;
  border-radius:18px;
  padding:9px 12px;
}
.feedCommentComposer button{
  border:none;
  background:transparent;
  color:#0095f6;
  font-weight:700;
}
.feedCommentComposer button:disabled{
  opacity:.35;
}
.feedSharePeople{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:16px 12px;
  scrollbar-width:none;
}
.feedSharePeople::-webkit-scrollbar{display:none}
.feedSharePeople button{
  border:none;
  background:transparent;
  min-width:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.feedSharePeople span{
  max-width:66px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}
.feedShareAction{
  width:100%;
  border:none;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  text-align:left;
}
.feedShareAction>span:last-child{
  display:flex;
  flex-direction:column;
}
.feedShareAction small{
  color:#777;
  margin-top:2px;
}
.feedShareCircle{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#eee;
  display:grid;
  place-items:center;
}


/* ===== V16 profile starter carousel + Reels nav icon ===== */

/* Restore the Instagram-like horizontal onboarding cards.
   Users can swipe horizontally on touch devices, but no scrollbar is shown. */
.profileStartSection{
  overflow:hidden;
}

.starterCards{
  display:flex !important;
  flex-direction:row !important;
  gap:14px !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:0 16px 14px !important;
  scroll-snap-type:x mandatory;
  scroll-padding-left:16px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  scrollbar-width:none !important;
  -ms-overflow-style:none;
}

.starterCards::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.starterCard{
  flex:0 0 min(360px, calc(100vw - 88px)) !important;
  width:min(360px, calc(100vw - 88px)) !important;
  max-width:none !important;
  min-width:0 !important;
  height:520px !important;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:38px 26px 24px !important;
}

.starterCard:last-child{
  margin-right:6px;
}

.starterBlueBtn{
  width:calc(100% - 8px) !important;
  margin:0 4px !important;
}

/* Never expose a page-level horizontal scrollbar. */
html,
body,
.viewportShell,
.phoneApp,
.profileReplica{
  overflow-x:hidden !important;
}

/* Bottom-nav Reels control: match the rounded clapper/play glyph in the reference. */
.bottomNav .navItem:nth-child(3) svg{
  width:27px !important;
  height:27px !important;
  transform:translateY(.25px);
}

/* iPhone-sized tuning */
@media (max-width:430px){
  .starterCard{
    flex-basis:calc(100vw - 72px) !important;
    width:calc(100vw - 72px) !important;
    height:500px !important;
  }
}

@media (min-width:431px) and (max-width:480px){
  .starterCard{
    flex-basis:360px !important;
    width:360px !important;
  }
}

/* Reels navigation glyph copied from the supplied mobile-web reference. */
.reelsNavIcon{
  display:block;
  width:27px;
  height:27px;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.bottomNav.darkNav .reelsNavIcon{filter:invert(1)}

/* ===== V19 original-site interaction replicas ===== */
.igHeader{overflow:visible}.homeBrandMenu,.createPopover{position:absolute;z-index:90;background:#fff;border-radius:8px;box-shadow:0 5px 20px rgba(0,0,0,.16);overflow:hidden}.homeBrandMenu{top:50px;left:8px;width:200px}.createPopover{top:48px;right:66px;width:126px}.homeBrandMenu button,.createPopover button{height:48px;width:100%;border:0;border-bottom:1px solid #eee;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:16px}.homeBrandMenu button:last-child,.createPopover button:last-child{border-bottom:0}
.storySourceBackdrop{position:fixed;z-index:180;inset:0;background:transparent;max-width:480px;margin:auto}.storySourceMenu{position:absolute;top:154px;left:26px;width:300px;background:rgba(248,248,248,.96);backdrop-filter:blur(18px);border-radius:18px;overflow:hidden;box-shadow:0 5px 22px rgba(0,0,0,.18)}.storySourceMenu button{width:100%;height:52px;border:0;border-bottom:1px solid #d2d2d2;background:transparent;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-size:18px;text-align:left}.storySourceMenu button:last-child{border-bottom:0}.folderGlyph{font-size:29px;line-height:1}
.accountSwitchBackdrop{position:fixed;z-index:220;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;justify-content:center}.accountSwitchSheet{width:min(100%,480px);min-height:286px;background:#fff;border-radius:18px 18px 0 0;color:#111;padding-bottom:calc(12px + var(--safe-bottom))}.accountSwitchSheet.loginMode{min-height:360px}.accountSwitchSheet .sheetGrabber{margin-top:17px}.accountSwitchSheet>h3{text-align:center;font-size:20px;margin:13px 0 10px;padding-bottom:14px;border-bottom:1px solid #ddd}.accountChoice{height:88px;display:flex;align-items:center;gap:14px;padding:0 20px}.accountAvatar{width:64px;height:64px;flex:0 0 64px}.accountAvatar .head{left:19px;top:13px;width:26px;height:26px}.accountAvatar .body{left:8px;width:48px;height:30px}.accountChoice b{font-size:17px}.accountCheck{margin-left:auto;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#050505;color:#fff;font-weight:700}.existingLogin,.accountLogout{border:0;background:#fff;font-weight:700;font-size:16px;display:block;width:100%;height:42px;padding:0 20px;cursor:pointer}.existingLogin{color:#315bea}.accountLogout{color:#ed4956;border-top:1px solid #eee;margin-top:2px}.accountLogout:disabled,.accountLoginSubmit:disabled{opacity:.55;cursor:default}.accountSheetError{color:#ed4956;font-size:13px;line-height:1.35;text-align:center;padding:6px 20px 0}.accountLoginHeader{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;border-bottom:1px solid #ddd;margin-top:2px}.accountLoginHeader h3{font-size:20px;text-align:center;margin:0;padding:14px 0}.accountLoginHeader button{border:0;background:transparent;font-size:38px;line-height:1;height:54px;cursor:pointer}.accountLoginForm{display:grid;gap:10px;padding:22px 22px 10px}.accountLoginForm input{height:46px;border:1px solid #dbdbdb;border-radius:8px;background:#fafafa;padding:0 13px;font-size:15px;outline:none}.accountLoginForm input:focus{border-color:#a8a8a8;background:#fff}.accountLoginSubmit{height:44px;border:0;border-radius:9px;background:#0095f6;color:#fff;font-size:16px;font-weight:700;cursor:pointer}.accountLoginCancel{border:0;background:transparent;color:#737373;font-size:15px;display:block;margin:4px auto 0;padding:8px 14px;cursor:pointer}
.reelSheetBackdrop:has(.moreSheet){align-items:center;padding:0 28px;background:rgba(0,0,0,.55)}.reelSheetBackdrop:has(.moreSheet) .moreSheet{width:100%;max-width:360px;padding:0;border-radius:15px;overflow:hidden;max-height:none}.moreSheet button{height:56px;padding:0 16px;font-size:16px;border-bottom:1px solid #ddd}.moreSheet button:last-child{border-bottom:0}.moreSheet .dangerAction{color:#ed4956;font-weight:700}

/* ===== V20 settings & privacy flow ===== */
.settingsPrivacyPage{
  min-height:calc(100dvh - 54px - var(--safe-bottom));
  background:#fff;
  padding-bottom:calc(92px + var(--safe-bottom));
  color:#111;
}
.settingsStickyHeader{
  position:sticky;
  top:0;
  z-index:24;
  height:72px;
  background:rgba(255,255,255,.97);
  display:grid;
  grid-template-columns:62px 1fr 62px;
  align-items:center;
  border-bottom:0;
  backdrop-filter:saturate(180%) blur(12px);
}
.settingsStickyHeader h2{
  margin:0;
  text-align:center;
  font-size:23px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.25px;
}
.settingsBack{
  width:54px;
  height:54px;
  padding:0;
  margin-left:4px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
}
.settingsSearch{
  margin:0 30px 22px;
  height:51px;
  border-radius:26px;
  background:#f2f2f4;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 19px;
  color:#77787c;
}
.settingsSearch input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-size:20px;
  color:#111;
}
.settingsSearch input::placeholder{color:#77787c}
.settingsSearch button{
  border:0;
  background:#b9bac0;
  color:#fff;
  border-radius:50%;
  width:20px;
  height:20px;
  line-height:18px;
  padding:0;
}
.metaAccountsCard{
  margin:0 30px 27px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 3px 20px rgba(0,0,0,.065);
  padding:25px 25px 23px;
}
.metaBrand{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:24px;
  line-height:1;
  margin-bottom:18px;
}
.metaMark{width:39px;height:24px;color:#0b84f3;overflow:visible;flex:0 0 auto}
.metaBrand b{font-size:25px;letter-spacing:-.5px}
.metaAccountsCard>h3{
  margin:0 0 7px;
  font-size:23px;
  font-weight:800;
}
.metaAccountsCard>p{
  margin:0 0 15px;
  color:#77787c;
  font-size:18px;
  line-height:1.38;
}
.metaAccountsCard>button:not(.metaMoreLink){
  width:100%;
  height:42px;
  border:0;
  padding:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:18px;
  color:#77787c;
  text-align:left;
  font-size:18px;
}
.metaMoreLink{
  display:block;
  margin-top:12px;
  border:0;
  padding:0;
  background:transparent;
  color:#405de6;
  text-align:left;
  font-size:18px;
  font-weight:700;
}
.settingsGroupStack{padding:0 30px}
.settingsSection{margin:0 0 27px}
.settingsSection h3{
  margin:0 0 13px;
  color:#73757b;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
}
.settingsRows{display:flex;flex-direction:column}
.settingsRow{
  width:100%;
  min-height:58px;
  border:0;
  background:#fff;
  display:flex;
  align-items:center;
  gap:19px;
  padding:0;
  text-align:left;
  font-size:21px;
  line-height:1.2;
}
.settingsRowIcon{
  width:30px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  color:#111;
}
.settingsDanger{color:#ed4956;margin-top:7px}
.settingsDanger .settingsRowIcon{visibility:hidden}
.settingsNoResults{
  padding:75px 0;
  color:#777;
  text-align:center;
  font-size:16px;
}
.settingsDetailPage{min-height:calc(100dvh - 54px)}
.settingsDetailBody{
  min-height:55dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px 42px;
}
.settingsDetailIcon{
  width:82px;
  height:82px;
  border:2px solid #111;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:18px;
}
.settingsDetailBody h3{font-size:24px;margin:0 0 10px}
.settingsDetailBody p{margin:0;color:#737373;font-size:15px;line-height:1.5}

@media(max-width:430px){
  .settingsStickyHeader{height:66px;grid-template-columns:58px 1fr 58px}
  .settingsStickyHeader h2{font-size:21px}
  .settingsSearch{margin-left:26px;margin-right:26px;height:48px}
  .metaAccountsCard{margin-left:26px;margin-right:26px;padding:22px}
  .settingsGroupStack{padding:0 26px}
  .settingsRow{min-height:56px;font-size:19px;gap:17px}
  .settingsSection h3{font-size:17px}
  .metaAccountsCard>p,.metaAccountsCard>button:not(.metaMoreLink),.metaMoreLink{font-size:17px}
}
.settingsDanger{gap:0}
.settingsDanger .settingsRowIcon{display:none}
.settingsMain{padding-top:0}

/* ===== V22 interaction and state-flow hardening ===== */
.headerMenuDismiss{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  z-index:80;
}
.homeBrandMenu,.createPopover{z-index:91}

.appToast{
  position:fixed;
  z-index:400;
  left:50%;
  bottom:calc(72px + var(--safe-bottom));
  transform:translateX(-50%);
  max-width:min(86vw,380px);
  padding:10px 15px;
  border-radius:20px;
  background:rgba(20,20,20,.92);
  color:#fff;
  font-size:14px;
  line-height:1.2;
  box-shadow:0 5px 18px rgba(0,0,0,.2);
  pointer-events:none;
}

.searchBox{position:relative}
.searchClearBtn{
  width:20px;height:20px;border:0;border-radius:50%;padding:0;
  display:grid;place-items:center;background:#bbb;color:#fff;line-height:1;
}
.exploreTile{border:0;background:#fff;padding:0;display:block;overflow:hidden}
.exploreTile img{transition:transform .12s ease}
.exploreTile:active img{transform:scale(.985)}
.searchEmpty{padding:80px 20px;text-align:center;color:#737373;font-size:15px}

.dmChatList{padding:8px 0 24px}
.dmChatRow{
  width:100%;min-height:68px;border:0;background:#fff;padding:8px 16px;
  display:flex;align-items:center;gap:12px;text-align:left;
}
.dmChatRow:active{background:#f7f7f7}
.dmChatRow>span{display:flex;flex-direction:column;min-width:0;gap:3px}
.dmChatRow b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmChatRow small{font-size:13px;color:#737373}
.blueTextBtn:disabled,.modalTitleRow button:disabled{opacity:.38;cursor:default}

.storyTap{
  position:absolute;
  z-index:1;
  top:52px;
  bottom:72px;
  width:34%;
  border:0;
  background:transparent;
  padding:0;
}
.storyTapLeft{left:0}
.storyTapRight{right:0}
.storyProgress,.storyBar,.storyReply{z-index:3}
.storyQuickAction{
  border:0;background:transparent;color:#fff;padding:0;width:32px;height:32px;
  display:grid;place-items:center;
}
.storyQuickAction:disabled{opacity:.4}

.createComposerPanel{min-height:58dvh;max-height:92dvh;overflow:auto}
.createComposerBody{padding:14px 14px calc(18px + var(--safe-bottom))}
.createPreview{
  width:100%;max-height:54dvh;border-radius:10px;overflow:hidden;background:#111;
  display:grid;place-items:center;
}
.createPreview img,.createPreview video{width:100%;max-height:54dvh;object-fit:contain;display:block}
.createComposerBody textarea{
  width:100%;min-height:92px;margin:12px 0 8px;border:1px solid #e5e5e5;border-radius:10px;
  resize:none;outline:none;padding:11px 12px;font-size:15px;line-height:1.4;
}
.createComposerActions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px}
.secondaryButton{
  border:1px solid #dbdbdb;background:#fff;border-radius:8px;padding:8px 14px;font-weight:700;
}
.profilePickedAvatar{width:88px!important;height:88px!important;object-fit:cover}
.starterBlueBtn:disabled{opacity:.65;cursor:default}

.postMoreSheet{padding-bottom:calc(8px + var(--safe-bottom));overflow:hidden}
.postMoreSheet button{
  width:100%;height:54px;border:0;border-bottom:1px solid #eee;background:#fff;font-size:16px;
}
.postMoreSheet button:last-child{border-bottom:0}
.postMoreSheet .postMoreDanger{color:#ed4956;font-weight:700}

.reelInlineNotice{
  position:absolute;z-index:120;left:50%;bottom:76px;transform:translateX(-50%);
  max-width:80%;padding:9px 13px;border-radius:18px;background:rgba(20,20,20,.9);
  color:#fff;font-size:13px;white-space:nowrap;pointer-events:none;
}

@media(max-width:430px){
  .appToast{bottom:calc(67px + var(--safe-bottom));font-size:13px}
  .createComposerPanel{min-height:52dvh}
}

/* V22 interactive search preview */
.explorePreviewBackdrop{
  position:fixed;z-index:210;inset:0;background:rgba(0,0,0,.6);
  display:grid;place-items:center;padding:24px;
}
.explorePreviewCard{
  position:relative;width:min(100%,420px);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 12px 38px rgba(0,0,0,.28);
}
.explorePreviewCard>img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.explorePreviewCard>strong{display:block;padding:12px 14px;font-size:15px}
.explorePreviewClose{
  position:absolute;z-index:2;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;padding:0;
}

/* V22 functional DM conversation */
.chatThreadView{display:flex;flex-direction:column;min-height:calc(100dvh - 54px - var(--safe-bottom))}
.chatThreadHeader{grid-template-columns:56px 1fr 56px}
.chatThreadIdentity{justify-self:center;display:flex;align-items:center;gap:9px;min-width:0}
.chatThreadIdentity b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatThreadBody{
  flex:1;min-height:360px;padding:18px 14px 86px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
}
.chatThreadEmpty{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:#737373}
.chatThreadEmpty b{color:#111;font-size:17px}
.chatBubble{
  align-self:flex-start;max-width:76%;padding:9px 12px;border-radius:18px;background:#efefef;font-size:14px;line-height:1.35;
  overflow-wrap:anywhere;
}
.chatBubble.own{align-self:flex-end;background:#3797f0;color:#fff}
.chatComposer{
  position:sticky;bottom:0;display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px;
  border-top:1px solid #eee;background:#fff;
}
.chatComposer input{min-width:0;border:1px solid #dbdbdb;border-radius:22px;outline:none;padding:10px 13px}
.chatComposer button{border:0;background:transparent;color:#0095f6;font-weight:700;padding:0 4px}
.chatComposer button:disabled{opacity:.4}

.tinyHeartBtn.active,.feedCommentLike.active{color:#ff3040}

/* V24 persistent account/content layer */
.authViewport{min-height:100vh;display:grid;place-items:center;background:#fafafa;padding:24px;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#0b0b0b}
.authPanel{width:min(100%,380px);background:#fff;border:1px solid #dbdbdb;padding:34px 36px 28px;text-align:center}
.authPanel .wordmark{display:block;font-size:42px;margin:0 0 20px}
.authPanel h1{font-size:18px;margin:0 0 8px}
.authPanel>p{font-size:14px;color:#737373;line-height:1.5;margin:0 0 20px}
.authPanel form{display:grid;gap:8px}
.authPanel input{width:100%;height:42px;border:1px solid #dbdbdb;border-radius:4px;background:#fafafa;padding:0 12px;font-size:14px;outline:none}
.authPanel input:focus{border-color:#a8a8a8;background:#fff}
.authPrimary{height:40px;border:0;border-radius:8px;background:#0095f6;color:#fff;font-weight:700;margin-top:6px;cursor:pointer}
.authPrimary:disabled{opacity:.55;cursor:default}
.authSwitch{border:0;background:none;color:#0095f6;font-weight:700;margin-top:22px;cursor:pointer}
.authError,.createError{font-size:13px;color:#ed4956;line-height:1.4;margin:6px 0}
.createDropWithText textarea{width:min(100%,360px);min-height:110px;resize:vertical;border:1px solid #dbdbdb;border-radius:10px;padding:12px;font:inherit;outline:none}
.createDropWithText textarea:focus{border-color:#a8a8a8}
.textOnlyPublish{margin-top:9px}
.mediaFrame video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.mediaCountBadge{position:absolute;right:12px;top:12px;border-radius:14px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;padding:5px 8px}
.textOnlyPost{min-height:260px;padding:46px 34px;display:grid;place-items:center;background:linear-gradient(145deg,#f6f6f6,#fff);border-top:1px solid #efefef;border-bottom:1px solid #efefef;text-align:center}
.textOnlyPost p{font-size:22px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.realProfileGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0 0 80px}
.realProfileTile{aspect-ratio:1/1;background:#efefef;overflow:hidden;display:grid;place-items:center;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.realProfileTile img,.realProfileTile video{width:100%;height:100%;object-fit:cover;display:block}
.realProfileText{width:100%;height:100%;display:grid;place-items:center;padding:8px;font-size:12px;line-height:1.3;text-align:center;background:#f5f5f5;overflow:hidden}

/* Admin */
.adminGate{min-height:100vh;display:grid;place-items:center;background:#f4f6f8;padding:24px;font-family:Arial,"Microsoft YaHei",sans-serif}
.adminCard{width:min(100%,520px);background:white;border:1px solid #e1e4e8;border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.adminCard h1{margin:0 0 12px}.adminCard p{color:#59636e;line-height:1.6}.adminCard input{width:100%;height:42px;border:1px solid #cfd5db;border-radius:8px;padding:0 12px;margin:8px 0}.adminCard button,.adminCard a{display:inline-block;border:0;border-radius:8px;background:#111;color:#fff;padding:10px 16px;text-decoration:none;cursor:pointer;margin:8px 8px 0 0}.adminError{color:#c62828!important}
.adminShell{min-height:100vh;background:#f4f6f8;padding:28px;font-family:Arial,"Microsoft YaHei",sans-serif;color:#111}
.adminTop{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.adminTop h1{margin:0}.adminTop p{margin:5px 0 0;color:#65707b}.adminTopActions{display:flex;gap:8px}.adminTopActions a,.adminTopActions button{border:1px solid #d7dce1;background:#fff;color:#111;border-radius:8px;padding:9px 13px;text-decoration:none;cursor:pointer}
.adminStats{max-width:1200px;margin:24px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.adminStats>div{background:#fff;border:1px solid #e1e4e8;border-radius:14px;padding:22px}.adminStats b{display:block;font-size:28px}.adminStats span{color:#68727d}
.adminPanel{max-width:1200px;margin:18px auto;background:#fff;border:1px solid #e1e4e8;border-radius:14px;padding:20px}.adminPanel h2{margin:0 0 16px;font-size:19px}.adminTableWrap{overflow:auto}.adminPanel table{border-collapse:collapse;width:100%;min-width:820px}.adminPanel th,.adminPanel td{padding:12px 10px;border-top:1px solid #eceff2;text-align:left;font-size:14px;vertical-align:top}.adminPanel th{color:#66717c;font-weight:600}.adminPanel td small{display:block;color:#7b858f;margin-top:3px}.adminCaption{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adminRowActions{display:flex;gap:6px}.adminPanel button{border:1px solid #d5dae0;background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;white-space:nowrap}.adminPanel button.danger{color:#d93025;border-color:#f1c1bd}
@media(max-width:700px){.adminShell{padding:16px}.adminTop{align-items:flex-start;flex-direction:column}.adminStats{grid-template-columns:repeat(2,1fr)}.adminPanel{padding:14px}.authPanel{padding:30px 22px}}

.authUnified .authAutoHint{margin-top:16px;padding-top:14px;border-top:1px solid #efefef;display:grid;gap:4px;text-align:left;font-size:12px;line-height:1.45;color:#737373}.authUnified .authAutoHint b{color:#262626;font-size:13px}.authNotice{padding:9px 10px;border-radius:6px;background:#edf8ef;color:#267a35;font-size:13px;text-align:left}.adminSecurityNote{margin:-6px 0 16px;color:#66717c;font-size:13px;line-height:1.55}.passwordSafeBadge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#eef7ef;color:#2f6b37;font-size:12px;white-space:nowrap}
.adminCurrentTag{display:inline-flex;align-items:center;padding:6px 8px;border-radius:7px;background:#f1f3f5;color:#5f6770;font-size:12px;white-space:nowrap}


/* Guest browsing: public profiles and post details */
.openablePost{cursor:pointer}
.publicProfileView,.postDetailView{min-height:100%;background:#fff;padding-bottom:76px}
.publicProfileHeader,.postDetailHeader{height:56px;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;border-bottom:1px solid #efefef;padding:0 8px;background:#fff;position:sticky;top:0;z-index:4}
.publicProfileHeader strong,.postDetailHeader strong{text-align:center;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.publicProfileHeader .iconButton,.postDetailHeader .iconButton{border:0;background:transparent;padding:6px;display:grid;place-items:center}
.publicProfileSummary{display:flex;align-items:center;gap:26px;padding:22px 18px 14px}
.publicProfileSummary>.avatar{flex:0 0 auto;border:1px solid #efefef}
.publicProfileStats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:8px}
.publicProfileStats div{display:flex;flex-direction:column;gap:2px;min-width:0}.publicProfileStats b{font-size:17px}.publicProfileStats span{font-size:12px;color:#737373}
.publicProfileBio{display:flex;flex-direction:column;gap:3px;padding:0 18px 14px;font-size:14px}.publicProfileBio span{color:#737373}
.publicProfileActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px 18px}
.publicProfileActions button{height:34px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer}
.publicPrimaryBtn{border:0;background:#0095f6;color:#fff}.publicSecondaryBtn{border:0;background:#efefef;color:#111}
.publicProfileGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-top:1px solid #efefef;padding-top:2px}
.publicProfileTile{border:0;padding:0;background:#efefef;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;cursor:pointer}
.publicProfileTile img,.publicProfileTile video{width:100%;height:100%;display:block;object-fit:cover}.publicProfileTile span{padding:8px;font-size:12px;line-height:1.3}
.publicProfileEmpty,.postDetailMissing{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:#737373;padding:28px}.publicProfileEmpty b,.postDetailMissing b{font-size:18px;color:#111}.publicProfileEmpty p,.postDetailMissing p{margin:0;font-size:14px}
.postDetailView .postCard{border-bottom:0}.postDetailView .mediaFrame,.postDetailView .textOnlyPost{cursor:default}


/* ===== Guest browsing UI follow-up: profile links + compact auth sheet ===== */
.postAvatarButton,.postProfileButton{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.postAvatarButton{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  position:relative;
  z-index:1;
}
.postProfileButton{display:inline-flex;align-items:center;min-width:0;position:relative;z-index:1}
.postAvatarButton:focus-visible,.postProfileButton:focus-visible{outline:2px solid #0095f6;outline-offset:2px}

.authRequiredSheet{
  position:relative;
  max-height:min(88vh,720px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-top:8px;
}
.authRequiredClose{
  position:sticky;
  top:0;
  z-index:6;
  width:44px;
  height:40px;
  margin:0 0 -40px 4px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.authViewportCompact{
  min-height:0;
  display:block;
  background:transparent;
  padding:0;
}
.authPanelCompact{
  width:100%;
  border:0;
  padding:16px 30px 28px;
  text-align:center;
}
.authPanelCompact .wordmark{font-size:38px;margin:0 0 12px}
.authPanelCompact h1{font-size:20px;margin:0 0 8px}
.authPanelCompact>p{margin:0 0 18px;font-size:14px;line-height:1.45}
.authPanelCompact form{gap:10px}
.authPanelCompact input{height:44px}
.authPanelCompact .authAutoHint{margin-top:14px;padding-top:12px}
@media(max-height:700px){
  .authRequiredSheet{max-height:92vh}
  .authPanelCompact{padding-top:10px;padding-bottom:20px}
  .authPanelCompact .wordmark{font-size:34px;margin-bottom:8px}
  .authPanelCompact>p{margin-bottom:14px}
}


/* ===== Admin content metrics and transparent synthetic demo content ===== */
.adminStats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.adminContentTable{min-width:1420px!important}
.adminMetricGrid,.adminGeneratorGrid{display:grid;grid-template-columns:repeat(3,minmax(88px,1fr));gap:7px;margin-bottom:8px}
.adminMetricGrid label,.adminGeneratorGrid label{display:grid;gap:4px;font-size:11px;color:#66717c}
.adminMetricGrid input,.adminGeneratorGrid input,.adminGeneratorGrid select{width:100%;height:34px;border:1px solid #d7dce1;border-radius:7px;background:#fff;padding:0 8px;color:#111;font:inherit}
.adminGeneratorGrid{grid-template-columns:96px 116px minmax(120px,1fr)}
.adminDemoToggle{display:flex!important;align-items:center;gap:7px;margin:7px 0 9px;font-size:12px!important;color:#4f5963!important}
.adminDemoToggle input{width:15px!important;height:15px!important;margin:0!important}
.adminInlineMessage{margin-top:8px;padding:7px 9px;border-radius:7px;background:#f3f7fb;color:#3e586f;font-size:12px;line-height:1.35}
.syntheticMetricsNotice{padding:0 14px 5px;font-size:10px;line-height:1.2;color:#8a6d1f;letter-spacing:.01em}
.syntheticCommentBadge{display:inline-flex;align-items:center;margin:0 5px;padding:2px 5px;border-radius:999px;background:#fff3cd;color:#7a5a00;font-size:9px;line-height:1;font-weight:700;vertical-align:1px}
.commentStateMessage{padding:34px 18px;text-align:center;color:#737373;font-size:14px}.commentStateError{color:#c62828}
@media(max-width:700px){.adminMetricGrid,.adminGeneratorGrid{grid-template-columns:1fr}.adminContentTable{min-width:1180px!important}}

/* Admin content management card layout v2 */
.adminContentPanel{max-width:1200px}
.adminContentHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.adminContentHeading h2{margin-bottom:8px}
.adminContentHeading .adminSecurityNote{margin:0;max-width:820px}
.adminContentCount{flex:0 0 auto;border:1px solid #dfe4e8;border-radius:999px;background:#f7f8fa;padding:7px 11px;color:#59636e;font-size:12px;white-space:nowrap}
.adminPostCards{display:grid;gap:16px}
.adminPostCard{border:1px solid #dfe4e8;border-radius:16px;background:#fff;padding:18px;box-shadow:0 2px 8px rgba(15,23,42,.035)}
.adminPostCardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid #edf0f2}
.adminPostIdentity{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px;color:#111}
.adminPostIdentity strong{font-size:16px}
.adminPostIdentity span{font-weight:600}
.adminPostDate{margin-top:5px;font-size:12px;color:#7b858f}
.adminPostMediaBadge{border:1px solid #dfe4e8;border-radius:999px;background:#f7f8fa;padding:6px 9px;font-size:12px;color:#59636e;white-space:nowrap}
.adminPostSummary{padding:14px 0 4px}
.adminPostSummaryLabel{display:block;margin-bottom:5px;color:#7b858f;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.adminPostSummary p{margin:0;color:#222;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.adminPostControlGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.adminPostControlBlock{min-width:0;border:1px solid #e4e8ec;border-radius:13px;background:#fafbfc;padding:14px}
.adminPostControlBlock h3{margin:0 0 12px;font-size:15px}
.adminCardFieldGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adminCardFieldGrid label{display:grid;gap:5px;color:#66717c;font-size:11px;font-weight:600}
.adminCardFieldGrid input,.adminCardFieldGrid select{box-sizing:border-box;width:100%;min-width:0;height:38px;border:1px solid #d5dae0;border-radius:8px;background:#fff;padding:0 9px;color:#111;font:inherit;font-size:13px}
.adminCardToggle{margin:12px 0 0}
.adminCardHint{margin:8px 0 10px;color:#7b858f;font-size:11px;line-height:1.45}
.adminCardButtonRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.adminPanel button.adminPrimaryAction{background:#111;color:#fff;border-color:#111}
.adminCardMessage{margin-top:14px;border-radius:9px;background:#f2f7f3;padding:10px 12px;color:#2e6b3f;font-size:12px}
.adminPostCardFooter{display:flex;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid #edf0f2}
.adminPostCardFooter .danger{margin:0}
@media(max-width:900px){.adminPostControlGrid{grid-template-columns:1fr}}
@media(max-width:700px){
  .adminContentHeading{display:block}.adminContentCount{display:inline-block;margin-top:10px}
  .adminPostCard{padding:14px;border-radius:14px}
  .adminPostCardHeader{align-items:flex-start}
  .adminCardFieldGrid{grid-template-columns:1fr}
  .adminCardButtonRow{display:grid;grid-template-columns:1fr}
  .adminCardButtonRow button,.adminPostControlBlock .adminPrimaryAction{width:100%}
  .adminPostCardFooter{justify-content:stretch}.adminPostCardFooter button{width:100%}
}


/* ===== Admin user-centric content management v3 ===== */
.adminUserManagementPanel{max-width:1200px}
.adminUserManagementHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.adminUserManagementHeader h2{margin-bottom:8px}
.adminUserManagementHeader .adminSecurityNote{margin:0;max-width:820px}
.adminUserSearch{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:12px;border:1px solid #e4e8ec;border-radius:12px;background:#fafbfc}
.adminUserSearch input{box-sizing:border-box;flex:1;min-width:160px;height:40px;border:1px solid #d5dae0;border-radius:8px;background:#fff;padding:0 12px;color:#111;font:inherit}
.adminUserSearch button{height:40px}
.adminUserSecurityNote{margin:0 0 14px}
.adminUserTable{min-width:1120px!important}
.adminSelectedUserRow td{background:#f7fafc}
.adminPostCountButton{padding:5px 8px!important;border-radius:999px!important;background:#f4f6f8!important;color:#334155!important;font-size:12px}
.adminUserRowActions{flex-wrap:wrap;min-width:360px}
.adminPagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #eceff2}
.adminPagination span{color:#66717c;font-size:12px}
.adminPagination button:disabled{cursor:not-allowed;opacity:.45}
.adminUserEmpty,.adminUserContentState{padding:28px 18px;text-align:center;color:#737373;font-size:14px}
.adminUserContentSection{margin-top:20px;padding:18px;border:1px solid #d8e0e7;border-radius:16px;background:#f8fafc}
.adminUserContentHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #e3e8ed}
.adminUserContentHeader h2{margin:2px 0 4px;font-size:22px}
.adminUserContentHeader p{margin:0;color:#66717c;font-size:13px}
.adminUserContentEyebrow{display:block;color:#7b858f;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.adminUserContentError{color:#b42318}.adminUserContentError button{margin-left:10px}
.adminUserContentSection .adminPostCard{background:#fff}
.adminPostPagination{border-top:0;margin-top:16px;padding-top:0}
@media(max-width:700px){
  .adminUserManagementHeader{display:block}.adminUserManagementHeader .adminContentCount{display:inline-block;margin-top:10px}
  .adminUserSearch{display:grid;grid-template-columns:1fr 1fr}.adminUserSearch input{grid-column:1/-1}.adminUserSearch button{width:100%}
  .adminUserContentSection{margin-left:-6px;margin-right:-6px;padding:12px;border-radius:13px}
  .adminUserContentHeader{align-items:flex-start}.adminUserRowActions{min-width:300px}
  .adminPagination{justify-content:space-between;flex-wrap:wrap}
}

/* Admin user profile counter controls */

.adminProfileCounterPanel{margin:0 0 18px;padding:15px;border:1px solid #dde4ea;border-radius:13px;background:#fff}
.adminProfileCounterHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.adminProfileCounterHeading h3{margin:2px 0 5px;font-size:16px}
.adminProfileCounterHeading p{margin:0;max-width:760px;color:#66717c;font-size:12px;line-height:1.45}
.adminProfileCounterGrid{margin-bottom:10px}
.adminProfileCounterActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.adminProfileCounterActions .adminCardHint{margin:0}
@media(max-width:700px){
  .adminProfileCounterPanel{padding:12px}
  .adminProfileCounterActions .adminPrimaryAction{width:100%}
}

/* Persistent follow + direct-message states */
.publicPrimaryBtn.isFollowing{background:#efefef;color:#111}
.publicPrimaryBtn:disabled,.publicSecondaryBtn:disabled{opacity:.62;cursor:default}
.chatThreadStatus{margin:auto;padding:18px 24px;color:#737373;text-align:center;font-size:14px;line-height:1.4}
.chatThreadStatus.chatThreadError{color:#ed4956}

/* Multi-photo post publishing + feed carousel */
.mediaFrame{position:relative;touch-action:pan-y}
.mediaCarouselArrow,.createPreviewArrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.48);color:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.22)
}
.mediaCarouselPrev,.createPreviewPrev{left:10px}
.mediaCarouselNext,.createPreviewNext{right:10px;transform:translateY(-50%) rotate(180deg)}
.mediaCarouselDots{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:12px;background:rgba(0,0,0,.20)
}
.mediaCarouselDots button{width:6px;height:6px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.55);cursor:pointer}
.mediaCarouselDots button.active{background:#fff;transform:scale(1.2)}
.createMultiHint{margin:-2px 0 2px;color:#737373;font-size:13px;text-align:center}
.createMultiPreview{position:relative}
.createPreviewCount{position:absolute;right:10px;top:10px;padding:5px 8px;border-radius:14px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;z-index:3}
.createMediaStrip{display:flex;gap:8px;overflow-x:auto;padding:10px 1px 3px;scrollbar-width:thin}
.createMediaThumb,.createMediaAdd{
  position:relative;flex:0 0 72px;width:72px;height:72px;border:2px solid transparent;border-radius:9px;overflow:hidden;
  background:#f2f2f2;padding:0;cursor:pointer
}
.createMediaThumb.active{border-color:#0095f6}
.createMediaThumb img,.createMediaThumb video{width:100%;height:100%;display:block;object-fit:cover}
.createMediaNumber{position:absolute;left:4px;bottom:4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;line-height:18px;text-align:center}
.createMediaRemove{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.68);color:#fff;font-size:17px;line-height:18px;text-align:center;font-weight:500}
.createMediaAdd{border:1px dashed #bdbdbd;background:#fafafa;color:#444;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px}
.createMediaAdd:disabled{opacity:.5;cursor:default}
@media (max-width:520px){
  .mediaCarouselArrow{width:30px;height:30px}
  .createMediaThumb,.createMediaAdd{flex-basis:64px;width:64px;height:64px}
}