@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow: hidden; overscroll-behavior: none; }
body {
  font-family: 'Manrope', sans-serif;
  background: #ffffff;
  height: 100%; overflow: hidden;
  overscroll-behavior: none;
}
.page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.phone-wrap { }
@keyframes floatIn {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── iPhone frame ──────────────────────────────────── */
.phone {
  animation: floatIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
  position: relative; width: 413px; height: 872px;
  background: linear-gradient(145deg,#2a2a2a 0%,#1a1a1a 40%,#0f0f0f 100%);
  border-radius: 54px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12), 0 0 0 2px #0a0a0a,
    0 40px 80px rgba(0,0,0,0.32), 0 16px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn { position:absolute; background:linear-gradient(180deg,#2e2e2e,#1c1c1c); border-radius:3px; }
.btn.mute     { left:-3px; top:137px; width:4px; height:36px; border-radius:2px 0 0 2px; }
.btn.vol-up   { left:-3px; top:192px; width:4px; height:62px; border-radius:2px 0 0 2px; }
.btn.vol-down { left:-3px; top:268px; width:4px; height:62px; border-radius:2px 0 0 2px; }
.btn.power    { right:-3px; top:216px; width:4px; height:81px; border-radius:0 2px 2px 0; }

/* ── Screen ─────────────────────────────────────────── */
.screen-bezel {
  position:absolute; inset:10px;
  background:#ffffff; border-radius:44px; overflow:hidden;
}
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px;
  background: #000; border-radius: 100px;
  opacity: 1; z-index: 400;
  pointer-events: none;
}
.dynamic-island {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:134px; height:37px; background:#0a0a0a; border-radius:20px; z-index:100;
}

/* ── Splash screen ──────────────────────────────────── */
.splash-screen {
  position: absolute; inset: 0; z-index: 300;
  background: #fff; border-radius: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.splash-screen.fade-out { opacity: 0; pointer-events: none; }
.splash-icon {
  width: 108px; height: 108px;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  animation: splashPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes splashPop {
  from { opacity: 0; transform: scale(0.78); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Views ──────────────────────────────────────────── */
.view {
  position:absolute; inset:0; background:#ffffff;
  display:flex; flex-direction:column; overflow:hidden; border-radius:44px;
}
.view.active  { opacity:1; pointer-events:auto; }
.view.hidden  { opacity:0; pointer-events:none; }
.slide-view {
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  z-index: 15;
  /* Transparent so the topbar in homeView shows through the top 106px */
  background: transparent;
  overflow: visible;
}

/* White content area — sits below the topbar, sticky header + scrollable body */
.slide-inner {
  position: absolute;
  top: 106px; left: 0; right: 0; bottom: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.care-overlay {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index:50;
  transition:opacity 0.2s ease;
}
.care-overlay.hidden { pointer-events:none; display:flex !important; }

/* ── Top Bar ────────────────────────────────────────── */
.topbar {
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:68px 20px 8px 16px; background:#ffffff; z-index:30;
  transition: background 0.2s;
}
.topbar.notif-open { background: transparent;
}

/* Combined currency pill */
.currency-pill {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:156px; height:44px; box-sizing:border-box;
  padding:0 14px;
  background:#F2F2F7; border-radius:100px;
  border:none; cursor:pointer;
  font-family:'Manrope',sans-serif;
  transition:opacity 0.2s;
}
.pill-item {
  display:flex; align-items:center; gap:5px;
  font-size:14px; font-weight:500; color:#1A1A1A;
}
.pill-icon { object-fit:contain; }
.pill-icon-coin   { width:24.68px; height:23px; }
.pill-icon-carrot { width:14.26px; height:25.35px; }

.topbar-icons { display:flex; align-items:center; gap:8px; }
.icon-btn {
  position:relative; background:none; border:none; cursor:pointer;
  padding:0; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.notif-icon-img { width:44px; height:44px; object-fit:contain; }
.notif-badge {
  position:absolute; top:2px; right:2px;
  background:#FF3B30; color:#fff; font-size:8px; font-weight:700;
  width:14px; height:14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.notif-badge.hidden { display:none; }
.avatar-icon-btn {
  background:none; border:none; cursor:pointer; padding:0;
  width:44px; height:44px; border-radius:50%; overflow:hidden;
}
.topbar-avatar { width:100%; height:100%; object-fit:cover; }

/* ── Notification panel ─────────────────────────────── */
.notif-backdrop {
  position:absolute; inset:0; z-index:20;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,0.05); border-radius:44px;
}
.notif-backdrop.hidden { opacity:0; pointer-events:none; }
.notif-panel {
  position:absolute; top:128px; right:12px; width:255px; z-index:21;
  background:#F5F5F5; border-radius:20px; padding:12px 14px;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
  transition:opacity 0.2s, transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.notif-panel.hidden { opacity:0; pointer-events:none; transform:translateY(-6px) scale(0.97); }
.notif-panel-title { font-size:14px; font-weight:500; color:#000; margin-bottom:9px; }
.notif-row {
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:16px;
  padding:9px 12px; margin-bottom:7px; height:58px;
}
.notif-row:last-child { margin-bottom:0; }
.notif-avatar-wrap { position:relative; width:40px; height:40px; flex-shrink:0; }
.notif-avatar {
  width:36px; height:36px; border-radius:50%; background:#D9D9D9; overflow:hidden;
  border:1.5px solid #F5F5F5; display:flex; align-items:center; justify-content:center;
}
.notif-avatar img { width:100%; height:100%; object-fit:cover; }
.notif-avatar-placeholder { align-items:center; justify-content:center; }
.notif-icon-badge { position:absolute; bottom:-2px; right:-4px; width:20px; height:20px; }
.notif-icon-badge img { width:100%; height:100%; object-fit:contain; }
.notif-text { flex:1; min-width:0; }
.notif-sender { font-size:14px; font-weight:600; color:#4A4A4A; }
.notif-msg    { font-size:12px; font-weight:500; color:#8A8A8A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-time   { font-size:12px; font-weight:500; color:#8A8A8A; flex-shrink:0; }

/* ── Content area ───────────────────────────────────── */
.content-area { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.section-header { padding:27px 16px 10px; position:relative; display:flex; align-items:center; }
.section-title  { font-size:24px; font-weight:500; color:#131313; letter-spacing:-0.3px; line-height:20px; }
.back-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; position:absolute; left:20px; top:28px; z-index:5; }
.back-btn.hidden, .section-title.hidden { display:none; }

/* ── Card Grid ──────────────────────────────────────── */
.card-grid {
  display:grid; grid-template-columns:repeat(2, 170px); column-gap:25px; row-gap:18px;
  padding:0 14px; flex-shrink:0;
}
.card-grid.hidden { display:none; }
.member-card {
  position:relative; border-radius:20px; overflow:hidden;
  cursor:pointer; border:none; text-align:left;
  border:2px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  transition:transform 0.12s ease;
  aspect-ratio:1/1;
}
.member-card:active { transform:scale(0.97); }
.member-card.healthy { background:#FFE8FD; }
.member-card.wilting { background:#c3c3c3; }
.card-bg {
  position:absolute; inset:0;
  background-size: 140px 140px; background-repeat: repeat; background-position: center;
  border-radius:inherit;
}
.carousel-card .card-bg { background-size: 220px 220px; }
.card-name-pill {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:14px; font-weight:500; color:#131313; letter-spacing:-0.3px;
  background:rgba(255,255,255,0.85); padding:5px 10px; border-radius:100px;
}
.card-sticker {
  position:absolute; top:52%; left:50%; transform:translate(-50%, -50%);
  z-index:2; width:100px; height:110px; object-fit:contain;
}
.card-avatar {
  position:absolute; bottom:12px; right:12px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(128,128,128,0.5); overflow:hidden;
  border:2px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
}
.card-avatar img { width:100%; height:100%; object-fit:cover; }
.card-avatar-placeholder { align-items:center; justify-content:center; }

/* ── Carousel ───────────────────────────────────────── */
.carousel { flex:1; overflow:hidden; }
.carousel.hidden { display:none; }
.carousel-track {
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 37px 12px; height:100%; scrollbar-width:none;
  align-items:center;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}
.carousel-card img,
.carousel-sticker,
.carousel-avatar img { pointer-events: none; -webkit-user-drag: none; }
.carousel-card {
  flex-shrink:0; width:320px; height:451px; border-radius:24px; overflow:hidden;
  scroll-snap-align:center; position:relative;
  border:3px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,0.08);
  transition: height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.carousel-card.active { height:504px; }
.carousel-card.healthy { background:#FFE8FD; }
.carousel-card.wilting { background:#c3c3c3; }
.carousel-card .card-name-pill { font-size:17px; padding:4px 12px; top:23px; left:24px; }
.card-status {
  position:absolute; top:62px; left:28px; z-index:2;
  font-size:24px; font-weight:600; color:#131313; letter-spacing:-0.3px; line-height:30px;
}
.carousel-sticker {
  position:absolute; top:57%; left:50%; transform:translate(-50%,-50%);
  z-index:2; width:auto; height:240px; object-fit:contain;
}
.carousel-avatar {
  position:absolute; bottom:16px; right:16px; z-index:2;
  width:51px; height:51px; border-radius:50%;
  background:rgba(128,128,128,0.5); overflow:hidden;
  border:2px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
}
.carousel-avatar img { width:100%; height:100%; object-fit:cover; }
.hashtag {
  position:absolute; z-index:3; font-size:14px; font-weight:700; color:#373737;
  background:#fff; padding:4px 10px; border-radius:100px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1); white-space:nowrap;
}
.htag-l { left:50px; top:217px; transform:rotate(-12.01deg); }
.htag-r { left:168px; top:320px; transform:rotate(14.1deg); }

/* ── Bottom area ────────────────────────────────────── */
.bottom-area { flex-shrink:0; height:120px; position:relative; }
.grass-zone  { position:absolute; inset:0; overflow:hidden; }
.grass-img   { width:100%; height:100%; object-fit:fill; }
.send-bar {
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  background:#fff; padding-bottom:50px;
}
.send-bar.hidden { display:none; }
.send-btn {
  font-family:'Manrope',sans-serif; font-size:20px; font-weight:600; color:#fff;
  background:#4CBC6E; border:none; cursor:pointer;
  width:198px; height:56px; border-radius:100px;
  padding:10px; line-height:20px; letter-spacing:-0.3px; transition:background 0.15s;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 3px #ffffff, 3px 2px 10px rgba(0,0,0,0.10);
}
.send-btn:active { background:#3aaa5c; }

/* ── Care overlay ───────────────────────────────────── */
.care-overlay { display:flex; flex-direction:column; padding-bottom:50px; }
.care-inner {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 16px 0; width:100%;
}
.care-send-wrap { display:flex; justify-content:center; flex-shrink:0; }
.care-title-wrap {
  text-align:center; margin-bottom:24px; line-height:1.35;
}
.care-title-line1 { font-size:24px; font-weight:600; color:#131313; letter-spacing:-0.39px; }
.care-title-line2 { font-size:24px; font-weight:600; color:#131313; letter-spacing:-0.39px; }

/* 2×2 Sticker grid */
.sticker-grid {
  display:flex; flex-direction:column; gap:0;
  width:100%; margin-bottom:24px;
}
.sticker-row {
  display:flex; justify-content:center;
}
.sticker-btn {
  flex:1; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  height:180px; border-radius:16px;
  position:relative;
  opacity: 0.42;
  transition: opacity 0.22s ease;
}
.sticker-btn.selected { opacity: 1; }
/* Dim unselected further once a choice is made */
.sticker-grid.has-selection .sticker-btn:not(.selected) { opacity: 0.28; }
.sticker-wrap {
  position:relative; width:140px; height:140px;
  transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg));
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.sticker-btn.selected .sticker-wrap {
  transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg)) scale(1.1);
}
.sticker-img {
  width:157px; height:157px; object-fit:contain; display:block;
}
.sticker-label {
  position:absolute;
  left:calc(50% + var(--lx,0px));
  top:calc(50% + var(--ly,0px));
  transform:translate(-50%,-50%) rotate(var(--lrot,0deg));
  white-space:nowrap;
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:500; color:#131313;
  background:#fff; padding:5px 10px; border-radius:100px;
  box-shadow:0 2px 6px rgba(0,0,0,0.10);
  pointer-events:none;
}

.care-send-btn {
  font-family:'Manrope',sans-serif; font-size:20px; font-weight:600; color:#fff;
  width:198px; height:56px; border-radius:100px; border:none; cursor:pointer;
  background:#4CBC6E; transition:background 0.15s;
  padding:10px; line-height:20px; letter-spacing:-0.3px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 3px #ffffff, 3px 2px 10px rgba(0,0,0,0.10);
}
.care-send-btn:active { background:#3aaa5c; }
.care-send-btn.disabled { background:#C7C7CC; cursor:not-allowed; box-shadow: none; }

/* ── Slide views (Profile / Market) ─────────────────── */
.slide-header {
  display:flex; align-items:center; gap:8px;
  padding:38px 16px 14px; background:#fff; flex-shrink:0;
}
.back-slide-btn {
  background:none; border:none; cursor:pointer; padding:4px; display:flex;
}
.slide-title { font-size:24px; font-weight:500; color:#131313; letter-spacing:-0.3px; line-height:20px; }

/* ── Profile view ───────────────────────────────────── */
.profile-scroll {
  flex:1; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling: touch;
}
.profile-scroll::-webkit-scrollbar { display:none; }

/* Hero: photo + name + state label */
.profile-hero {
  display:flex; flex-direction:column; align-items:center;
  padding-bottom:23px;
}
.profile-avatar-lg {
  width:80px; height:80px; border-radius:50%; overflow:hidden;
  background:rgba(128,128,128,0.5);
  border:2px solid rgba(255,255,255,0.5);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  margin-bottom:8px;
}
.profile-photo    { width:100%; height:100%; object-fit:cover; }
.profile-name     { font-size:22px; font-weight:700; color:#131313; letter-spacing:-0.3px; margin-bottom:3px; }
.profile-state-lbl{ font-size:13px; font-weight:400; color:#8E8E93; }

/* Balance cards */
.profile-balance-row {
  display:flex; gap:12px; padding:0 16px 20px;
}
.balance-card {
  flex:1; display:flex; align-items:center; gap:12px;
  background:#F2F2F7; border-radius:16px;
  padding:14px 16px;
}
.balance-icon   { width:30px; height:30px; object-fit:contain; flex-shrink:0; }
.balance-info   { display:flex; flex-direction:column; }
.balance-amount { font-size:20px; font-weight:700; color:#131313; letter-spacing:-0.3px; line-height:1; }
.balance-lbl    { font-size:11px; font-weight:400; color:#8E8E93; margin-top:2px; }

/* My Carrot card */
.my-carrot-card {
  margin:0 16px 20px; background:#F2F2F7; border-radius:20px; overflow:hidden;
}
.my-carrot-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 14px;
}
.profile-section-title {
  font-size:16px; font-weight:500; color:#131313; letter-spacing:-0.3px;
}
.my-carrot-state-lbl {
  font-size:12px; font-weight:400; color:#8E8E93;
}
.my-carrot-bunny {
  display:flex; justify-content:center; padding-bottom:24px;
}
.profile-bunny-img { width:110px; height:110px; object-fit:contain; }

/* Care Received section */
.care-received-section { padding:0 16px; }
.care-received-section .profile-section-title { margin-bottom:12px; display:block; }

.care-row {
  display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:14px;
  padding:12px 14px; margin-bottom:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.care-row:last-child { margin-bottom:0; }
.care-row-avatar-wrap { position:relative; width:46px; height:44px; flex-shrink:0; }
.care-row-avatar {
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  background:rgba(128,128,128,0.5); display:flex; align-items:center; justify-content:center;
}
.care-row-avatar img { width:100%; height:100%; object-fit:cover; }
.care-row-avatar-placeholder { background:rgba(128,128,128,0.5); }
.care-row-badge {
  position:absolute; bottom:-2px; right:-2px;
  width:20px; height:20px;
}
.care-row-badge img { width:100%; height:100%; object-fit:contain; }
.care-row-text    { flex:1; min-width:0; }
.care-row-sender  { font-size:13px; font-weight:500; color:#131313; letter-spacing:-0.2px; }
.care-row-msg     { font-size:12px; font-weight:400; color:#8E8E93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.care-row-time    { font-size:11px; font-weight:400; color:#8E8E93; flex-shrink:0; }

/* Market */
.market-scroll { flex:1; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.market-scroll::-webkit-scrollbar { display:none; }
.market-banner-wrap { padding:6px 20px 0; }
.market-banner-track {
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:20px;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.market-banner-track::-webkit-scrollbar { display:none; }
.market-banner-track.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.market-banner-track img { pointer-events:none; -webkit-user-drag:none; }
.banner-slide { flex-shrink:0; width:100%; scroll-snap-align:center; height:168px; border-radius:20px; overflow:hidden; }
.banner-slide img { width:100%; height:100%; object-fit:cover; }
.banner-dots { display:flex; justify-content:center; gap:8px; margin-top:13px; }
.banner-dot { width:6px; height:6px; border-radius:50%; background:#D1D1D6; transition:background 0.2s; }
.banner-dot.active { background:#131313; }
.market-section-title {
  font-size:18px; font-weight:500; color:#131313;
  padding:8px 20px 10px; letter-spacing:-0.3px; line-height:20px;
}
/* Popular horizontal carousel */
.popular-carousel {
  display:flex; gap:14px; padding:4px 20px 14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:20px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.popular-carousel::-webkit-scrollbar { display:none; }
.popular-carousel.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.popular-carousel .market-card { flex-shrink:0; width:199px; scroll-snap-align:start; }
.popular-carousel .market-card-img { height:154px; }
.popular-carousel .market-card img { pointer-events:none; -webkit-user-drag:none; }

/* Gift card horizontal carousel */
.market-carousel {
  display:flex; gap:10px; padding:0 20px 14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:20px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.market-carousel::-webkit-scrollbar { display:none; }
.market-carousel.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.market-carousel .market-card { flex-shrink:0; width:152px; scroll-snap-align:start; }
.market-carousel .market-card-img { height:146px; padding:20px; }
.market-carousel .market-card img { pointer-events:none; -webkit-user-drag:none; }
.market-carousel .market-card-img img { object-fit:contain; }

/* Gift cards section extra top spacing to position at y:661 */
.gift-cards-title { padding-top:16px; }
/* Help sticker larger */
.help-sticker-img { width:155px; height:155px; }

.market-card { cursor:pointer; }
.market-card-img { position:relative; width:100%; height:154px; border-radius:20px; overflow:hidden; background:#f5f5f6; margin-bottom:6px; }
.market-card-img img { width:100%; height:100%; object-fit:cover; }
.market-card-name  { font-size:14px; font-weight:500; color:#484848; line-height:20px; letter-spacing:-0.3px; display:flex; align-items:center; gap:8px; }
.market-card-arrow { width:6px; height:12px; flex-shrink:0; object-fit:contain; }
.market-card-price {
  position:absolute; top:7px; left:7px; z-index:2;
  font-size:14px; font-weight:500; color:#131313; letter-spacing:-0.3px; line-height:20px;
  background:rgba(255,255,255,0.88); border-radius:100px;
  box-shadow:0 1px 4px rgba(0,0,0,0.10);
  width:66px; height:25px;
  display:flex; align-items:center; justify-content:center;
}

/* hidden utility */
.hidden { display:none !important; }

/* ── Custom cursor (desktop only) ───────────────────── */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  display: none;
  opacity: 0;
  font-size: 22px;
  line-height: 1;
  left: -100px;
  top: -100px;
  transform: translate(-50%, -50%) rotate(-20deg);
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
  will-change: left, top, transform;
  user-select: none;
}
.custom-cursor.clicking {
  transform: translate(-50%, -50%) rotate(-20deg) scale(0.85);
}

/* Show custom cursor only on true pointer devices */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none !important; }
  a, button, [role="button"],
  .member-card, .currency-pill, .icon-btn,
  .avatar-icon-btn, .send-btn, .sticker-btn,
  .back-btn, .back-slide-btn, .care-send-btn,
  .market-card { cursor: none !important; }
  .custom-cursor { display: block; }
}

/* ── Touch ripple (mobile) ──────────────────────────── */
.touch-ripple {
  position: fixed;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(76, 188, 110, 0.38);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 99998;
  animation: touchRipple 0.55s ease-out forwards;
}
@keyframes touchRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  60%  { opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ── Heart burst animation ───────────────────────────── */
.heart-burst {
  position: absolute;
  font-size: 52px;
  line-height: 1;
  pointer-events: none;
  z-index: 200;
  transform: translate(-50%, -50%) scale(0);
  animation: heartFloat 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heartFloat {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  20%  { transform: translate(-50%, -70%) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%, -300%) scale(1.1); opacity: 0; }
}

/* ── New notification slide-in ──────────────────────── */
.notif-row.notif-new {
  animation: notifSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Phone scaling: JS sets transform + negative margins */
.phone-wrap { transform-origin: center center; flex-shrink: 0; }