:root {
  --blue: #005CB9;
  --red: #FC1618;
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --text: #0f1420;
  --muted: #64748b;
  --border: #e8edf5;
  --shadow: 0 8px 28px rgba(15, 20, 32, 0.08);
  --radius: 16px;
  --nav-h: 60px;
  --bottom-h: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45; }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

.topnav {
  position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border);
  height: var(--nav-h); display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
.topnav .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); }
.topnav .logo img { width: 28px; height: 28px; border-radius: 8px; }
.topnav .links { display: none; gap: 6px; margin-left: 12px; flex: 1; }
.topnav .links a { padding: 8px 10px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; }
.topnav .links a.active, .topnav .links a:hover { background: var(--bg-soft); color: var(--blue); }
.topnav .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
}

.main { max-width: 980px; margin: 0 auto; padding: 16px 16px calc(var(--bottom-h) + 24px); min-height: calc(100vh - var(--nav-h)); }
@media (min-width: 900px) {
  .topnav .links { display: flex; }
  .bottomnav { display: none !important; }
  .main { padding-bottom: 40px; }
}

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: var(--bottom-h); background: #fff; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600;
}
.bottomnav a.active { color: var(--blue); }
.bottomnav .create-fab {
  width: 44px; height: 44px; border-radius: 14px; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
}

.btn {
  appearance: none; border: none; cursor: pointer; border-radius: 12px;
  padding: 10px 14px; font-weight: 700; background: var(--bg-soft); color: var(--text);
}
.btn:hover { filter: brightness(0.98); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-outline { background: #fff; border: 1px solid var(--border); }
.btn-sm { padding: 7px 10px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }
.icon-btn { background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: 10px; }
.icon-btn:hover { background: var(--bg-soft); }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px;
}
.card-body { padding: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--bg-soft); color: var(--muted);
}
.pill-blue { background: rgba(0,92,185,.12); color: var(--blue); }
.pill-red { background: rgba(255,59,74,.12); color: var(--red); }
.pill-green { background: rgba(16,185,129,.14); color: #059669; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 800; flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 72px; height: 72px; font-size: 28px; }

.feed-card .media { position: relative; background: var(--bg-soft); aspect-ratio: 4/3; }
.feed-card .media img { width: 100%; height: 100%; object-fit: cover; }
.feed-card .video-badge {
  position: absolute; top: 10px; left: 10px; background: rgba(15,20,32,.75); color: #fff;
  font-size: 11px; font-weight: 800; padding: 5px 8px; border-radius: 8px; letter-spacing: .02em;
}
.feed-card .play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,20,32,.25); cursor: pointer;
}
.feed-card .play-overlay span {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--blue);
}
.feed-meta { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.feed-actions { display: flex; gap: 8px; padding: 0 14px 14px; flex-wrap: wrap; }

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 720px) {
  .grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .grid-3-md { grid-template-columns: repeat(3, 1fr); }
}

.listing-tile { cursor: pointer; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.listing-tile img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--bg-soft); }
.listing-tile .info { padding: 10px; }
.listing-tile .info h4 { margin: 0 0 4px; font-size: 14px; }
.listing-tile .price { font-weight: 800; color: var(--blue); font-size: 14px; }

.form { display: grid; gap: 10px; }
.form label { font-size: 13px; font-weight: 700; color: var(--muted); }
.form input, .form select, .form textarea {
  width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: #fff;
}
.form textarea { min-height: 90px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  cursor: pointer; font-weight: 600; font-size: 13px;
}
.chip.on { background: rgba(0,92,185,.12); border-color: var(--blue); color: var(--blue); }

.help-card {
  border: 2px solid var(--blue); border-radius: var(--radius); padding: 14px; background: linear-gradient(180deg, #f7f9ff, #fff);
}
.help-card h3 { margin: 0 0 8px; }
.help-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0; }
@media (min-width: 640px) { .help-row { grid-template-columns: repeat(3, 1fr); } }
.help-box { background: var(--bg-soft); border-radius: 12px; padding: 10px; }
.help-box strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }

.timeline { border-left: 2px solid var(--border); margin-left: 10px; padding-left: 16px; }
.timeline .ev { position: relative; margin-bottom: 14px; }
.timeline .ev::before {
  content: ''; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--blue);
}
.timeline .ev small { color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  background: #0f1420; color: #fff; padding: 12px 16px; border-radius: 12px;
  z-index: 100; max-width: 90vw; box-shadow: var(--shadow); font-weight: 600;
}
@media (min-width: 900px) { .toast { bottom: 24px; } }

.modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(15,20,32,.45);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
}
@media (min-width: 720px) { .modal { align-items: center; } }
.modal-sheet {
  background: #fff; border-radius: 18px; width: min(520px, 100%); max-height: 90vh; overflow: auto;
  padding: 18px; box-shadow: var(--shadow);
}
.modal-sheet h2 { margin: 0 0 12px; font-size: 20px; }

.switcher {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.switcher select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); max-width: 160px; }

.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 10px; }
.h1 { font-size: 26px; margin: 0 0 8px; }
.h2 { font-size: 20px; margin: 0 0 8px; }
.section-title { font-size: 15px; font-weight: 800; margin: 18px 0 10px; }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg-soft); border-radius: 14px; padding: 14px; }
.stat .n { font-size: 24px; font-weight: 800; color: var(--blue); }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.tabs button { white-space: nowrap; }

.msg-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; padding: 8px; background: var(--bg-soft); border-radius: 12px; }
.bubble { max-width: 80%; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.bubble.mine { margin-left: auto; background: #005CB9; color: #fff; border-color: transparent; }
.bubble.mine .bubble-meta { color: rgba(255,255,255,.75); }
.bubble.theirs { margin-right: auto; background: #f1f3f7; border-color: transparent; color: var(--text); }
.bubble-body { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.bubble-meta { font-size: 11px; margin-top: 4px; opacity: .75; }

/* Direct messages */
.dm-inbox { display: grid; gap: 12px; }
.dm-inbox-head { align-items: center; margin-bottom: 4px; }
.dm-conv { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
.dm-conv:hover { border-color: #005CB9; }
.dm-conv.has-unread { border-color: rgba(0,92,185,.45); background: rgba(0,92,185,.04); }
.dm-conv-row { display: flex; align-items: center; gap: 12px; }
.dm-conv-main { flex: 1; min-width: 0; }
.dm-conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dm-conv-preview {
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.dm-conv-time { font-size: 12px; flex-shrink: 0; }
.dm-empty { padding: 48px 20px; }

.dm-thread {
  display: flex; flex-direction: column;
  height: min(72vh, 640px);
  min-height: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.dm-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky; top: 0; z-index: 2;
}
.dm-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 18px;
  background: var(--bg-soft);
}
.dm-peer {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; flex: 1; min-width: 0;
}
.dm-thread-msgs {
  flex: 1; overflow: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 12px;
  background: var(--bg-soft);
}
.dm-empty-thread { background: transparent; padding: 24px; }
.dm-composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: #fff;
  position: sticky; bottom: 0;
}
.dm-composer textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 120px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); font: inherit; line-height: 1.35;
}
.dm-composer .btn { flex-shrink: 0; }

.dm-compose-search {
  width: 100%; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--border); margin-bottom: 10px; font: inherit;
}
.dm-compose-list {
  display: grid; gap: 6px; max-height: 320px; overflow: auto;
}
.dm-compose-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff;
  cursor: pointer; font: inherit; color: var(--text);
}
.dm-compose-row:hover { border-color: #005CB9; background: rgba(0,92,185,.04); }

.msg-seller-btn { white-space: nowrap; }

@media (max-width: 640px) {
  .dm-thread { height: calc(100vh - 140px); min-height: 360px; border-radius: 12px; }
  .bubble { max-width: 88%; }
}

.search-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.search-bar input { flex: 1; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); }

.inventory-pick { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.inventory-pick label {
  display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--text);
}
.inventory-pick img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }

.banner-return {
  background: linear-gradient(90deg, rgba(0,92,185,.12), rgba(255,59,74,.1));
  border: 1px solid var(--blue); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
}


/* Product photo helpers */
.item-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 10px;
  background: var(--bg-soft); flex-shrink: 0; border: 1px solid var(--border);
}
.item-thumb-lg {
  width: 64px; height: 64px; object-fit: cover; border-radius: 12px;
  background: var(--bg-soft); flex-shrink: 0; border: 1px solid var(--border);
}
.item-thumb-xl {
  width: 96px; height: 96px; object-fit: cover; border-radius: 14px;
  background: var(--bg-soft); flex-shrink: 0; border: 1px solid var(--border);
}
.help-item-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-weight: 600; font-size: 13px; color: var(--text);
}
.help-item-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--border); flex-shrink: 0; }
.want-thumb-row {
  display: flex; align-items: center; gap: 10px;
}
.guest-banner {
  background: linear-gradient(90deg, rgba(0,92,185,.1), rgba(255,59,74,.08));
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.img-picker-preview {
  width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--border); margin-top: 6px;
}
.offer-row-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; align-items: center; }


/* ——— Market Floor (Home) ——— */
.floor-header {
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.floor-header .h1 { letter-spacing: -0.02em; }
.presence-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 6px 12px; border-radius: 999px;
  background: rgba(0,92,185,.1); color: var(--blue);
  font-size: 13px; font-weight: 700;
}
.presence-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(255,59,74,.18);
  animation: presence-pulse 1.6s ease-in-out infinite;
}
@keyframes presence-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

.live-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin-bottom: 4px;
}
.live-strip::-webkit-scrollbar { height: 4px; }
.live-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.live-stall {
  flex: 0 0 auto; width: 76px; text-align: center; color: var(--text);
  scroll-snap-align: start; position: relative; text-decoration: none;
}
.live-stall:hover .live-name { color: var(--blue); }
.live-ring {
  display: inline-flex; padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #ff7a85 40%, var(--blue));
}
.live-ring .avatar { width: 56px; height: 56px; font-size: 20px; border: 3px solid #fff; }
.live-badge {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 48px; background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 6px; border: 2px solid #fff;
}
.live-name {
  display: block; margin-top: 10px; font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-meta {
  display: block; font-size: 10px; color: var(--muted); font-weight: 600;
}

.happening-rail {
  display: grid; gap: 10px; margin-bottom: 8px;
}
.happening-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 12px;
  background: var(--bg-soft); box-shadow: none;
}
.happening-card.help {
  background: linear-gradient(180deg, #fff5f6, #fff);
  border: 2px solid rgba(255,59,74,.35);
}
.floor-feed .feed-card { margin-bottom: 12px; }
.floor-feed .feed-card .media { aspect-ratio: 16/10; }
@media (min-width: 720px) {
  .happening-rail {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ——— Live video rail & watch ——— */
.live-video-rail {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin-bottom: 6px;
}
.live-video-rail::-webkit-scrollbar { height: 4px; }
.live-video-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.live-video-card {
  flex: 0 0 auto; width: 160px; color: inherit; text-decoration: none;
  scroll-snap-align: start; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: #fff;
}
.live-video-card:hover { border-color: var(--blue); }
.live-video-frame {
  position: relative; aspect-ratio: 4/5; background: #0f1420; overflow: hidden;
}
.live-video-frame video,
.media-video video,
.watch-player video,
.video-preview {
  width: 100%; height: 100%; object-fit: cover; display: block; background: #0f1420;
}
.media-video { aspect-ratio: 4/5; }
.media-video video { width: 100%; height: 100%; object-fit: cover; }
.live-pill {
  position: absolute; top: 8px; left: 8px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; padding: 3px 7px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(255,59,74,.35);
}
.live-viewers {
  position: absolute; top: 8px; right: 8px;
  background: rgba(15,20,32,.7); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 7px; border-radius: 6px;
}
.live-video-meta { padding: 8px 10px 10px; }
.live-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px; border: 1px dashed var(--border); border-radius: 14px;
  background: var(--bg-soft); width: 100%;
}

.watch-live { max-width: 640px; margin: 0 auto; }
.watch-player {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0f1420; aspect-ratio: 4/5; max-height: 70vh;
}
.watch-player video { width: 100%; height: 100%; object-fit: cover; }

.go-live-form .video-preview,
.video-preview {
  width: 100%; max-height: 280px; object-fit: cover; border-radius: 12px;
  background: #0f1420; border: 1px solid var(--border); margin-top: 6px;
  aspect-ratio: 4/5; max-width: 280px;
}
.camera-preview-box {
  padding: 12px; border-radius: 12px; background: var(--bg-soft);
  border: 1px solid var(--border);
}

.listing-media { position: relative; }
.listing-media img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--bg-soft); }
.tile-play {
  position: absolute; right: 8px; bottom: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15,20,32,.75); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}

@media (min-width: 720px) {
  .live-video-card { width: 180px; }
  .watch-player { aspect-ratio: 16/10; max-height: none; }
}


/* ——— Commerce & reactions ——— */
.btn-group {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.btn-group.compact { gap: 6px; }
.commerce-row { margin: 4px 0 2px; }
.reaction-row { margin: 2px 0 8px; }
.section-label {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}
.react-btn { position: relative; }
.react-btn .react-count {
  display: inline-block; min-width: 1.1em; font-variant-numeric: tabular-nums;
  opacity: .85; margin-left: 2px;
}
.react-btn.react-like.active,
.react-btn.react-love.active {
  background: rgba(255,59,74,.12); border-color: var(--red); color: var(--red);
}
.react-btn.react-interested.active {
  background: rgba(0,92,185,.12); border-color: var(--blue); color: var(--blue);
}
.react-btn.react-not_interested.active {
  background: #eef1f6; border-color: #c5cedd; color: var(--muted);
}
.listing-tile-wrap {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px;
}
.listing-tile-wrap .listing-tile { margin-bottom: 0; }
.tile-actions {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 4px;
}
.recommended-grid { margin-bottom: 18px; }
.cart-nav-btn { display: inline-flex; align-items: center; gap: 4px; }
.cart-nav-btn .badge { position: relative; top: -1px; }


/* Post overflow ⋯ menu */
.media-wrap { position: relative; }
.media-wrap > .post-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}
.listing-tile-shell { position: relative; }
.listing-tile-shell > .post-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}
.post-menu { position: relative; }
.post-menu-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 20, 32, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.post-menu-btn:hover { background: rgba(15, 20, 32, 0.75); }
.post-menu-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e8eaef;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,20,32,0.12);
  padding: 6px;
  z-index: 20;
}
.post-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #0f1420;
}
.post-menu-dropdown button:hover { background: #f3f5f9; }
.post-menu-dropdown button.danger { color: #FC1618; }
.react-btn.react-icon {
  min-width: 44px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.product-actions .commerce-row,
.product-actions .reaction-row {
  flex-wrap: wrap;
}
.happening-card .product-actions .react-btn.react-interested,
.happening-card .product-actions .react-btn.react-not_interested,
.feed-card .product-actions .react-btn.react-interested,
.feed-card .product-actions .react-btn.react-not_interested {
  font-size: 12px;
}
.tile-actions {
  padding: 0 2px 8px;
}

.product-actions-clean .action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.product-actions-clean .actions-menu {
  position: relative;
}
.product-actions-clean .actions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.actions-trigger-caret { font-size: 11px; opacity: 0.7; }
.post-menu.actions-menu:not(.icon-only) .post-menu-dropdown {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}
.menu-sep {
  height: 1px;
  background: #e8eaef;
  margin: 4px 6px;
}
.product-actions-clean .react-btn.react-icon {
  border-radius: 999px;
}

.interaction-menu .actions-trigger { white-space: nowrap; }
.more-menu .post-menu-btn {
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 14px;
}
.post-menu-dropdown .menu-item.is-active {
  background: #EDF5FD;
  color: #005CB9;
  font-weight: 600;
}
.action-bar .btn-primary { flex: 0 0 auto; }

/* Like press-and-hold + product ••• corner */
.product-media, .listing-tile-shell.product-media, .media-wrap.product-media {
  position: relative;
}
.product-media > .product-more,
.listing-tile-shell > .product-more {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
}
.like-hold {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.like-hold-btn {
  min-width: 44px;
  border-radius: 999px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.like-hold-popup {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  display: flex;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e8eaef;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15,20,32,0.16);
  z-index: 30;
  white-space: nowrap;
}
.like-hold-popup.hidden { display: none; }
.like-pop-btn {
  border: none;
  background: #f3f5f9;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.like-pop-btn span {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f1420;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.like-pop-btn:hover span,
.like-pop-btn:focus span { display: block; }
.like-pop-btn:hover { transform: scale(1.12); background: #EDF5FD; }

.buy-cart-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.buy-cart-pair .btn { margin: 0; }

/* Ensure ••• sits top-right on every product post */
.card.feed-card.product-post {
  overflow: visible;
  position: relative;
}
.card.feed-card.product-post .media-wrap.product-media {
  overflow: hidden;
  border-radius: 0;
  position: relative;
}
.card.feed-card.product-post .media {
  overflow: hidden;
}
.media-wrap.product-media.has-more > .product-more,
.listing-tile-shell.product-media.has-more > .product-more,
.product-media.has-more > .product-more {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 20 !important;
  margin: 0;
}
.feed-meta > .product-more {
  position: relative;
  flex-shrink: 0;
}
.feed-meta > .product-more .post-menu-btn {
  background: rgba(15, 20, 32, 0.08);
  color: #0f1420;
}
.listing-tile-wrap {
  position: relative;
  overflow: visible;
}
.listing-tile-shell.product-media {
  overflow: visible;
}
.listing-tile-shell .listing-tile {
  overflow: hidden;
}
.product-more .post-menu-dropdown {
  z-index: 40;
}


/* ===== SITE-WIDE product ... menu (top-right) v41 ===== */
.listing-media-wrap,
.media-wrap.product-media.has-more {
  position: relative !important;
  display: block;
}
.listing-media-wrap > .product-more,
.media-wrap.product-media.has-more > .product-more {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}
.product-more .post-menu-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(15, 20, 32, 0.72) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 36px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}
.product-more .post-menu-dropdown {
  position: absolute !important;
  top: 42px !important;
  right: 0 !important;
  z-index: 60 !important;
  min-width: 170px;
}
.card.feed-card.product-post,
.listing-tile-shell,
.listing-tile-wrap,
.happening-card {
  overflow: visible !important;
}
.listing-tile-shell .listing-tile {
  overflow: hidden;
  display: block;
}
.listing-media-wrap .listing-media {
  position: relative;
  overflow: hidden;
}
.feed-meta > .product-more .post-menu-btn {
  background: rgba(15, 20, 32, 0.72) !important;
  color: #fff !important;
}


/* STALL happening cards — ... on card top-right */
.happening-card.stall-card {
  position: relative !important;
  overflow: visible !important;
  padding-top: 12px;
}
.happening-card.stall-card > .product-more {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 50 !important;
}
.happening-card.stall-card .stall-card-head {
  padding-right: 44px; /* room for ... button */
}
.stall-card-media {
  display: block;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f8fb;
  color: inherit;
  text-decoration: none;
}
.stall-card-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.stall-card-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.pill-action {
  cursor: pointer;
  border: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
}
.pill-action:hover {
  filter: brightness(0.95);
  box-shadow: 0 0 0 2px rgba(0,92,185, 0.25);
}


/* ——— Trade history ——— */
.trade-history-list { gap: 10px; }
.trade-history-card { overflow: hidden; }
.trade-history-card .card-body { display: flex; flex-direction: column; gap: 8px; }
.trade-hist-meta { font-size: 14px; }
.trade-hist-meta a { font-weight: 700; color: var(--accent, #005CB9); text-decoration: none; }
.trade-hist-meta a:hover { text-decoration: underline; }
.trade-hist-cash {
  display: inline-block;
  margin-left: 6px;
  font-weight: 800;
  color: #059669;
  font-size: 13px;
}
.trade-hist-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.trade-hist-thumbs .item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(15, 20, 32, 0.08);
}
.trade-hist-swap {
  font-weight: 800;
  color: #64748b;
  font-size: 16px;
}
.tx-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tx-type-cash { background: #d1fae5; color: #065f46; }
.tx-type-trade { background: #dbeafe; color: #1e40af; }
.tx-type-both { background: #fce7f3; color: #9d174d; }

/* Deals hub */
.deals-hub-tabs .chip.btn { border-radius: 999px; }
.deals-hub-tabs .chip.on,
.deals-hub-tabs .chip.btn-primary {
  background: rgba(0,92,185,.12);
  border-color: var(--blue);
  color: var(--blue);
}


/* Simplified header */
.topnav .links { gap: 4px; }
.topnav .links a { padding: 8px 12px; }
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  position: relative;
  color: inherit;
}
.nav-icon:hover, .nav-icon.active { background: var(--bg-soft); }
.nav-icon .badge {
  position: absolute;
  top: 0;
  right: -2px;
  font-size: 10px;
}
.nav-menu { position: relative; }
.nav-menu-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  display: flex;
}
.nav-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid #e8eaef;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,20,32,0.14);
  padding: 8px;
  z-index: 80;
}
.nav-menu-dropdown.hidden { display: none; }
.nav-menu-head {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  margin-bottom: 4px;
  border-bottom: 1px solid #eef0f4;
  border-radius: 8px;
}
.nav-menu-btn.nav-icon {
  font-size: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-menu-dropdown a,
.nav-menu-dropdown button.nav-menu-danger {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #0f1420;
  text-decoration: none;
  cursor: pointer;
}
.nav-menu-dropdown a:hover { background: #f3f5f9; }
.nav-menu-danger { color: #FC1618 !important; }
.nav-switch-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 12px 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-switch {
  width: calc(100% - 16px);
  margin: 4px 8px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e8eaef;
  font-size: 13px;
}
@media (max-width: 720px) {
  .topnav .links { display: none !important; }
}


/* —— Profile cover —— */
.profile-header-card {
  overflow: hidden;
  margin-bottom: 14px;
}
.profile-cover {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #dbe7ff 0%, #f7f9ff 45%, #ffffff 100%);
  overflow: hidden;
}
.profile-cover.has-cover {
  background: #0f1420;
}
.profile-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c9daff 0%, #EDF5FD 40%, #ffffff 100%);
  color: #6b7a99;
  font-weight: 700;
  font-size: 14px;
}
.profile-cover-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}
.profile-cover-actions .btn {
  box-shadow: 0 4px 14px rgba(15, 20, 32, 0.18);
}
.profile-header-body {
  position: relative;
  padding-top: 8px;
}
.profile-avatar-overlap.avatar-lg,
.avatar-lg.profile-avatar-overlap {
  margin-top: -40px;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(15, 20, 32, 0.12);
  position: relative;
  z-index: 1;
}
.cover-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 520px) {
  .cover-preset-grid { grid-template-columns: repeat(4, 1fr); }
}
.cover-preset {
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.cover-preset img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--bg-soft);
}
.cover-preset span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  color: var(--muted);
}
.cover-preset.on {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0,92,185, 0.25);
}
.cover-preset.on span { color: var(--blue); }
.cover-preset:hover { border-color: var(--blue); }


/* ——— Social feed: likes faces + inline comments ——— */
.avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
}
.avatar-stack-item {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 20, 32, 0.12);
}
.avatar-stack-item:first-child { margin-left: 0; }
.feed-social {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-liked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.feed-liked-text {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.3;
}
.feed-comments { display: flex; flex-direction: column; gap: 8px; }
.feed-view-all {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.feed-view-all:hover { color: var(--blue); }
.feed-comment-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.feed-comment-body {
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
  flex: 1;
}
.feed-comment-body b { margin-right: 6px; color: var(--text); }
.feed-comment-body a { color: inherit; }
.inline-composer {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 10px;
}
.inline-composer textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 56px;
  background: #fff;
}
.engagement-strip {
  background: linear-gradient(135deg, #f0f5ff, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.engagement-summary {
  font-size: 14px;
  color: var(--text);
}
.engagement-activity {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.engagement-activity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.engagement-activity-row b { color: var(--text); }


.feed-comments-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.feed-comments-panel.hidden { display: none !important; }
.feed-comments-panel .inline-composer { margin-top: 10px; }


/* Follow / Unfollow — visible on feed, stalls, listings */
.btn-follow {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
  z-index: 2;
}
.btn-follow.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-follow.btn-primary { background: var(--blue); color: #fff; }
.btn-follow.following,
.btn-follow.btn-outline.following { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
.feed-meta { align-items: flex-start; }
.feed-meta-main { flex: 1; min-width: 0; }
.feed-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-meta-name { color: inherit; text-decoration: none; }
.feed-meta .btn-follow { margin-left: 0; }
.live-stall {
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.live-stall-link {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  position: relative;
}
.live-stall .btn-follow {
  margin-top: 6px;
  width: 100%;
  padding: 5px 6px;
  font-size: 11px;
}
.live-stall .btn-follow-compact { font-size: 11px; }
.live-video-card .live-video-link { color: inherit; text-decoration: none; display: block; }
.live-video-meta .btn-follow { margin-left: auto; }
.dm-thread-head .btn-follow { margin-left: 4px; }


/* Connect / Disconnect — mutual friend-style, distinct from Follow */
.btn-connect {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
  z-index: 2;
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-connect.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-connect.connected,
.btn-connect.btn-outline.connected {
  background: #fff5f5;
  color: #b42318;
  border: 1.5px solid #f3b4ae;
}
.btn-connect-compact { font-size: 11px; }
.feed-meta .btn-connect { margin-left: 0; }
.live-stall .btn-connect {
  margin-top: 4px;
  width: 100%;
  padding: 5px 6px;
  font-size: 11px;
}
.live-stall .btn-connect-compact { font-size: 11px; }
.live-video-meta .btn-connect { margin-left: 0; }
.dm-thread-head .btn-connect { margin-left: 4px; }
.social-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===== Shoonu MVP: accounts, verification, real-data states ===== */
.devbox{background:#fff8c5;border:2px solid #f5d000;color:#5c4a00;border-radius:12px;padding:12px;margin:12px 0;font-size:14px}
.devbox b{font-size:22px;letter-spacing:4px;font-family:ui-monospace,Menlo,monospace;color:#111}
.notice{background:#EDF5FD;border:1px solid rgba(0,92,185,.25);color:#1e3a8a;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;margin:8px 0}
.notice.ok{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#065f46}
.notice.danger{background:rgba(255,59,74,.08);border-color:rgba(255,59,74,.3);color:#9f1239}
.id-banner{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:12px;padding:10px 12px;font-size:14px;margin:10px 0}
.id-banner a{font-weight:700;color:var(--blue)}
.verified-tick{color:var(--blue);font-weight:800;font-size:12px}
.photo-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.photo-strip img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--border);cursor:pointer;flex:0 0 auto}
.stall-ring{display:inline-flex;padding:3px;border-radius:50%;background:var(--border)}
.stall-ring .avatar{width:56px;height:56px;font-size:20px;border:3px solid #fff}
.online-badge,.open-badge{position:absolute;left:50%;transform:translateX(-50%);top:48px;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;border:2px solid #fff;white-space:nowrap}
.online-badge{background:#10b981;color:#fff}
.open-badge{background:#fff;color:var(--muted);border-color:var(--border)}
.empty-invite{text-align:left;padding:18px}
.empty-invite b{display:block;margin-bottom:4px;color:var(--text)}
.composer-card{margin-bottom:12px}
.composer-card textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px;font:inherit;resize:vertical;min-height:70px}
.post-text{white-space:pre-wrap;word-break:break-word}
.link-btn{background:none;border:0;cursor:pointer;padding:0 4px;font-size:12px}
.auth-card .form input{width:100%}
.steps li{margin:4px 0}
.admin-tabs{flex-wrap:wrap}
.watch-player.has-more{position:relative}
.watch-player .post-menu{position:absolute;top:8px;right:8px;z-index:5}
.form input[type=radio],.form input[type=checkbox]{width:auto;margin-right:6px}

/* ——— Dedup pass (mvp3) ——— */
.floor-top{align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.floor-top .presence-pill{margin-top:0}
.how-link{font-size:13px;font-weight:700;color:var(--blue);padding:0}
.stall-ring{display:inline-flex;padding:3px;border-radius:50%;background:var(--border)}
.stall-ring .avatar{width:56px;height:56px;font-size:20px;border:3px solid #fff}
.stall-ring.is-live{background:linear-gradient(135deg,var(--red),#ff7a85 50%,var(--red))}
.online-badge{width:14px;height:14px;padding:0;font-size:0;border-radius:50%;left:auto;right:10px;transform:none;top:44px}
.composer-live{color:var(--red);border-color:rgba(255,59,74,.45)}
.feed-tabs{margin-top:6px}
.profile-more{display:inline-flex}
.profile-more .product-more{position:relative;top:auto;right:auto}
.profile-more .post-menu-btn{width:32px;height:32px;background:#fff;color:var(--text);border:1px solid var(--border);backdrop-filter:none}
.btn{max-width:100%}
@media (max-width:480px){
  .btn-sm{padding-left:10px;padding-right:10px}
  .action-bar,.buy-cart-pair{flex-wrap:wrap}
}

/* ——— How to use guide ——— */
.howto{max-width:900px;margin:0 auto}
.howto-sub{margin-top:-6px}
.howto-toc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.howto-toc .chip{font-size:12.5px;white-space:normal;text-align:left}
.howto-actions{font-size:13px;margin:4px 0 12px;color:var(--muted)}
.howto-actions .link-btn{font-size:13px;color:var(--blue);font-weight:700}
.howto-sec{margin-bottom:10px;overflow:hidden;scroll-margin-top:calc(var(--nav-h) + 10px)}
.howto-sec summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:800;font-size:16px}
.howto-sec summary::-webkit-details-marker{display:none}
.howto-num{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
.howto-title{flex:1;min-width:0}
.howto-caret{transition:transform .2s;color:var(--muted);font-size:18px}
.howto-sec[open] .howto-caret{transform:rotate(180deg)}
.howto-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;padding:0 16px 16px;align-items:start}
.howto-anims{display:grid;gap:10px}
.howto-steps{margin:0;padding-left:20px;line-height:1.55;font-size:15px}
.howto-steps li{margin-bottom:7px}
@media (max-width:680px){.howto-body{grid-template-columns:minmax(0,1fr);gap:12px;padding:0 12px 14px}}

/* mockups — base styles are the END state (shown as-is with prefers-reduced-motion) */
.hx-stage{width:100%;max-width:300px;margin:0 auto}
.hx{position:relative;height:200px;background:#fff;border:1px solid #e6e9f0;border-radius:18px;box-shadow:0 6px 18px rgba(15,20,32,.07);overflow:hidden;font-size:11.5px;color:#0f1420;line-height:1.3;text-align:left;user-select:none}
.hx *{box-sizing:border-box}
.hx i{font-style:normal}
.hx-stage:not(.playing) .hx *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){.hx *,.hx *::before,.hx *::after{animation:none!important;transition:none!important}}
.hx-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid #eef0f4;font-size:11px}
.hx-dot{width:8px;height:8px;border-radius:50%;background:#005CB9;flex:0 0 auto}
.hx-body{position:relative;padding:9px 10px;display:flex;flex-direction:column;gap:7px}
.hx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:11px;white-space:nowrap;align-self:flex-start}
.hx-sm{padding:4px 9px;font-size:10.5px}
.hx-xs{padding:3px 7px;font-size:9.5px}
.hx-primary{background:#005CB9;color:#fff}
.hx-outline{background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6}
.hx-danger{background:#FC1618;color:#fff}
.hx-swap{display:inline-grid}
.hx-swap>i{grid-area:1/1;text-align:center}
.hx-tap{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(0,92,185,.28);border:2px solid rgba(0,92,185,.9);opacity:0;pointer-events:none;z-index:3}
.hx-okbadge{display:inline-flex;align-self:flex-start;gap:4px;background:#e7f8ee;color:#12a150;font-weight:800;border-radius:999px;padding:4px 9px;font-size:11px;white-space:nowrap}
.hx-pill{display:inline-flex;background:#EDF5FD;color:#005CB9;font-weight:700;border-radius:999px;padding:3px 8px;font-size:10.5px;white-space:nowrap}
.hx-muted{color:#5A6475;font-size:10.5px}
.hx-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
.hx-av{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.hx-av-s{width:20px;height:20px;font-size:10px}
.hx-card{position:relative;border:1px solid #eef0f4;border-radius:12px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.hx-card-h{display:flex;align-items:center;gap:6px}
.hx-thumb{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,#EDF5FD,#ffe9eb);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.hx-thumb-big{width:100%;height:92px;font-size:40px;border-radius:0}
.hx-price{color:#005CB9;font-weight:800}
.hx-type{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.hx-input,.hx-field{flex:1;min-width:0;border:1px solid #d9dde6;border-radius:10px;padding:5px 8px;background:#fafbfd;overflow:hidden;min-height:26px;white-space:nowrap}
.hx-field-s{flex:0 0 auto;width:80px}
.hx-tabs{display:flex;gap:12px;border-bottom:1px solid #eef0f4;position:relative;padding-bottom:5px;font-weight:700;color:#5A6475}
.hx-tabs .on{color:#005CB9}
.hx-status{position:relative;min-height:22px}
.hx-status>*{position:absolute;left:0;top:0}
/* code */
.hx-dev{background:#fff7e6;border:1px dashed #f0b400;border-radius:8px;padding:5px 7px;font-size:10.5px}
.hx-label{font-weight:700;font-size:10.5px;color:#4a5263}
.hx-digits{display:flex;gap:5px}
.hx-dg{width:28px;height:32px;border:1.5px solid #d9dde6;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:#fff}
/* id */
.hx-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hx-slot{position:relative;border:1.5px dashed #c9d3ea;border-radius:10px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;text-align:center}
.hx-slot-ic{font-size:20px}
.hx-prog{width:80%;height:4px;background:#eef0f4;border-radius:4px;overflow:hidden}
.hx-prog i{display:block;height:100%;background:#005CB9;width:100%}
.hx-check{position:absolute;top:4px;right:6px;color:#12a150;font-weight:900}
/* profile */
.hx-cover{height:78px;position:relative;background:#eef0f4}
.hx-cover-img{position:absolute;inset:0;background:linear-gradient(120deg,#005CB9,#4D8FD6 45%,#FC1618)}
.hx-cover-btn{position:absolute;right:8px;bottom:8px}
.hx-prof-body{flex-direction:row;align-items:flex-start;gap:8px;margin-top:-18px}
.hx-prof-body .hx-av{width:42px;height:42px;border:3px solid #fff;font-size:16px;position:relative}
.hx-prof-lines{display:flex;flex-direction:column;gap:4px;padding-top:21px;min-width:0}
/* post */
.hx-composer{display:flex;align-items:center;gap:6px}
.hx-feed{display:flex;flex-direction:column;gap:6px}
/* like */
.hx-like .hx-card{overflow:visible}
.hx-like-btn{min-width:38px;font-size:13px}
.hx-ring{position:absolute;inset:-4px;border-radius:999px;border:2px solid #005CB9;opacity:0;pointer-events:none}
.hx-pop{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:4px;background:#fff;border:1px solid #e6e9f0;border-radius:999px;padding:4px 8px;box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:4;opacity:0}
.hx-pop-i{display:flex;flex-direction:column;align-items:center;font-size:15px;padding:0 3px}
.hx-pop-i small{font-size:8px;color:#5A6475;white-space:nowrap}
.hx-hint{margin-top:2px}
/* follow */
.hx-prof-row{display:flex;align-items:center;gap:8px}
/* listing */
.hx-photos{display:flex;gap:6px}
.hx-ph{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,#EDF5FD,#ffe9eb);display:flex;align-items:center;justify-content:center;font-size:18px}
.hx-ph-add{background:#fff;border:1.5px dashed #c9d3ea;color:#5A6475}
.hx-form{display:flex;flex-direction:column;gap:6px}
.hx-stall{position:absolute;left:10px;right:10px;top:9px;bottom:0;background:#fff}
.hx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:5px}
.hx-tile{border:1px solid #eef0f4;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.hx-tile .hx-thumb{width:100%;height:58px}
.hx-tile-ghost{background:#f5f6f9;border-style:dashed;min-height:100px}
/* live */
.hx-cam{position:relative;height:150px;background:radial-gradient(circle at 50% 40%,#3a4256,#141824);color:#fff}
.hx-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:900;opacity:0}
.hx-rec{position:absolute;left:10px;top:10px;color:#FC1618;font-weight:800;opacity:0}
.hx-livepill{position:absolute;left:10px;top:10px;background:#FC1618;color:#fff;font-weight:900;padding:3px 8px;border-radius:6px;letter-spacing:.06em}
.hx-eye{position:absolute;left:58px;top:11px;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:6px}
.hx-recbtn{position:absolute;left:50%;bottom:10px;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid #fff;background:#FC1618}
.hx-live-foot{padding-top:10px;align-items:center}
.hx-live-foot .hx-btn{align-self:center}
/* buy */
.hx-modal{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border-radius:14px;box-shadow:0 -6px 24px rgba(15,20,32,.18);border:1px solid #e6e9f0;padding:10px;display:flex;flex-direction:column;gap:5px;z-index:5;transform:translateY(115%)}
.hx-note{font-size:10px;color:#7a5b00;background:#fff7e6;border-radius:8px;padding:5px 7px}
.hx-sold{position:absolute;right:16px;top:18px;border:3px solid #FC1618;color:#FC1618;font-weight:900;font-size:20px;padding:2px 10px;border-radius:8px;letter-spacing:.1em;background:rgba(255,255,255,.85)}
/* offer */
.hx-counter{background:#EDF5FD;border-radius:8px;padding:4px 7px;color:#005CB9;overflow:hidden}
/* help */
.hx-abc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hx-role{border:1px solid #eef0f4;border-radius:10px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;position:relative;text-align:center}
.hx-role b{width:22px;height:22px;border-radius:50%;background:#005CB9;color:#fff;display:flex;align-items:center;justify-content:center}
.hx-role small{color:#5A6475;font-weight:700}
.hx-role .hx-btn{align-self:center}
.hx-help-c{box-shadow:0 0 0 2px #FC1618}
.hx-help-c b{background:#FC1618}
.hx-flow{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.hx-arrow{background:#EDF5FD;color:#005CB9;border-radius:999px;padding:3px 7px;font-weight:800;font-size:10px;white-space:nowrap}
.hx-help .hx-okbadge{align-self:center}
/* deals */
.hx-dtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;gap:0}
.hx-uline{position:absolute;bottom:-1px;left:0;width:33.333%;height:2px;background:#005CB9}
.hx-panes{position:relative;height:28px}
.hx-pane{position:absolute;inset:0;border:1px solid #eef0f4;border-radius:9px;padding:6px 8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-dp1,.hx-dp2{opacity:0}
.hx-rate{display:flex;flex-direction:column;gap:3px;align-items:flex-start;border-top:1px dashed #e6e9f0;padding-top:6px;font-weight:700}
.hx-stars{display:flex;gap:3px;font-size:20px}
.hx-st{color:#FFB400}
/* message */
.hx-thread{height:calc(100% - 27px);gap:6px}
.hx-bub{max-width:80%;padding:6px 9px;border-radius:14px;font-size:11px}
.hx-in{background:#f1f3f7;align-self:flex-start;border-bottom-left-radius:4px}
.hx-out{background:#005CB9;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.hx-compose{display:flex;gap:6px;align-items:center;margin-top:auto}
/* menu */
.hx-menu-card{padding:0}
.hx-more{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(15,20,32,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;z-index:2}
.hx-drop{position:absolute;top:40px;right:8px;background:#fff;border:1px solid #e6e9f0;border-radius:10px;box-shadow:0 10px 24px rgba(15,20,32,.14);padding:4px;display:flex;flex-direction:column;min-width:130px;z-index:3}
.hx-drop span{padding:6px 8px;border-radius:6px;position:relative;white-space:nowrap}
.hx-danger-t{color:#FC1618}
.hx-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);background:#0f1420;color:#fff;border-radius:999px;padding:5px 12px;font-weight:700;opacity:0;white-space:nowrap}
/* admin */
.hx-q{position:relative;display:inline-grid;margin-left:3px;vertical-align:1px}
.hx-q i{grid-area:1/1;background:#FC1618;color:#fff;border-radius:999px;padding:0 5px;font-size:9px;line-height:14px}
.hx-q .hx-q0{background:#c3c8d4}
.hx-doc{width:34px;height:34px;border-radius:8px;background:#f1f3f7;display:flex;align-items:center;justify-content:center;font-size:18px}
.hx-adm-row{background:#f3fcf6;border-color:#bfe8cf}

/* generated keyframes */
@keyframes hxk1 {
  0% {opacity:0;transform:scale(.6)}
  5.5% {opacity:0;transform:scale(.6)}
  8% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-dg1 i {opacity:1;transform:scale(1);animation:hxk1 7s linear infinite}
@keyframes hxk2 {
  0% {opacity:0;transform:scale(.6)}
  11.5% {opacity:0;transform:scale(.6)}
  14% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-dg2 i {opacity:1;transform:scale(1);animation:hxk2 7s linear infinite}
@keyframes hxk3 {
  0% {opacity:0;transform:scale(.6)}
  17.5% {opacity:0;transform:scale(.6)}
  20% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-dg3 i {opacity:1;transform:scale(1);animation:hxk3 7s linear infinite}
@keyframes hxk4 {
  0% {opacity:0;transform:scale(.6)}
  23.5% {opacity:0;transform:scale(.6)}
  26% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-dg4 i {opacity:1;transform:scale(1);animation:hxk4 7s linear infinite}
@keyframes hxk5 {
  0% {opacity:0;transform:scale(.6)}
  29.5% {opacity:0;transform:scale(.6)}
  32% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-dg5 i {opacity:1;transform:scale(1);animation:hxk5 7s linear infinite}
@keyframes hxk6 {
  0% {opacity:0;transform:scale(.6)}
  35.5% {opacity:0;transform:scale(.6)}
  38% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-dg6 i {opacity:1;transform:scale(1);animation:hxk6 7s linear infinite}
@keyframes hxk7 {
  0% {opacity:0;transform:scale(.4)}
  46% {opacity:0;transform:scale(.4)}
  48% {opacity:1;transform:scale(1)}
  55% {opacity:1;transform:scale(1)}
  57% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-code .hx-code-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk7 7s linear infinite}
@keyframes hxk8 {
  0% {background:#005CB9}
  46.5% {background:#005CB9}
  49% {background:#004E9E}
  57% {background:#004E9E}
  59.5% {background:#005CB9}
  100% {background:#005CB9}
}
.hx-code .hx-code-btn {background:#005CB9;animation:hxk8 7s linear infinite}
@keyframes hxk9 {
  0% {opacity:0;transform:scale(.6)}
  57.5% {opacity:0;transform:scale(.6)}
  60% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-code .hx-code-ok {opacity:1;transform:scale(1);animation:hxk9 7s linear infinite}
@keyframes hxk10 {
  0% {width:0}
  6% {width:0}
  24% {width:100%}
  94% {width:100%}
  95.5% {width:0}
  100% {width:0}
}
.hx-id .hx-id-p1 {width:100%;animation:hxk10 8s linear infinite}
@keyframes hxk11 {
  0% {opacity:0;transform:scale(.6)}
  22.5% {opacity:0;transform:scale(.6)}
  25% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-id .hx-id-c1 {opacity:1;transform:scale(1);animation:hxk11 8s linear infinite}
@keyframes hxk12 {
  0% {width:0}
  27% {width:0}
  45% {width:100%}
  94% {width:100%}
  95.5% {width:0}
  100% {width:0}
}
.hx-id .hx-id-p2 {width:100%;animation:hxk12 8s linear infinite}
@keyframes hxk13 {
  0% {opacity:0;transform:scale(.6)}
  43.5% {opacity:0;transform:scale(.6)}
  46% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-id .hx-id-c2 {opacity:1;transform:scale(1);animation:hxk13 8s linear infinite}
@keyframes hxk14 {
  0% {opacity:0;transform:scale(.4)}
  49% {opacity:0;transform:scale(.4)}
  51% {opacity:1;transform:scale(1)}
  57% {opacity:1;transform:scale(1)}
  59% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-id .hx-id-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk14 8s linear infinite}
@keyframes hxk15 {
  0% {opacity:0;transform:translateY(4px)}
  56.5% {opacity:0;transform:translateY(4px)}
  59% {opacity:1;transform:none}
  71% {opacity:1;transform:none}
  73.5% {opacity:0;transform:translateY(4px)}
  100% {opacity:0;transform:translateY(4px)}
}
.hx-id .hx-id-rev {opacity:0;transform:translateY(4px);animation:hxk15 8s linear infinite}
@keyframes hxk16 {
  0% {opacity:0;transform:scale(.6)}
  71.5% {opacity:0;transform:scale(.6)}
  74% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-id .hx-id-ok {opacity:1;transform:scale(1);animation:hxk16 8s linear infinite}
@keyframes hxk17 {
  0% {opacity:0;transform:scale(.4)}
  5% {opacity:0;transform:scale(.4)}
  7% {opacity:1;transform:scale(1)}
  13% {opacity:1;transform:scale(1)}
  15% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-profile .hx-cover-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk17 7s linear infinite}
@keyframes hxk18 {
  0% {opacity:0}
  13.5% {opacity:0}
  16% {opacity:1}
  94% {opacity:1}
  96.5% {opacity:0}
  100% {opacity:0}
}
.hx-profile .hx-cover-img {opacity:1;animation:hxk18 7s linear infinite}
@keyframes hxk19 {
  0% {clip-path:inset(0 100% 0 0)}
  26% {clip-path:inset(0 100% 0 0);animation-timing-function:steps(18,end)}
  50% {clip-path:inset(0 0 0 0)}
  94% {clip-path:inset(0 0 0 0)}
  95.5% {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
.hx-profile .hx-prof-bio {clip-path:inset(0 0 0 0);animation:hxk19 7s linear infinite}
@keyframes hxk20 {
  0% {clip-path:inset(0 100% 0 0)}
  54% {clip-path:inset(0 100% 0 0);animation-timing-function:steps(8,end)}
  64% {clip-path:inset(0 0 0 0)}
  94% {clip-path:inset(0 0 0 0)}
  95.5% {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
.hx-profile .hx-prof-city {clip-path:inset(0 0 0 0);animation:hxk20 7s linear infinite}
@keyframes hxk21 {
  0% {clip-path:inset(0 100% 0 0)}
  4% {clip-path:inset(0 100% 0 0);animation-timing-function:steps(22,end)}
  32% {clip-path:inset(0 0 0 0)}
  43% {clip-path:inset(0 0 0 0)}
  44.5% {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
.hx-post .hx-post-type {clip-path:inset(0 100% 0 0);animation:hxk21 7s linear infinite}
@keyframes hxk22 {
  0% {opacity:0;transform:scale(.4)}
  35% {opacity:0;transform:scale(.4)}
  37% {opacity:1;transform:scale(1)}
  43% {opacity:1;transform:scale(1)}
  45% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-post .hx-post-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk22 7s linear infinite}
@keyframes hxk23 {
  0% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
  43.5% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
  46% {opacity:1;max-height:90px}
  94% {opacity:1;max-height:90px}
  96.5% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
  100% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
}
.hx-post .hx-post-new {opacity:1;max-height:90px;animation:hxk23 7s linear infinite}
@keyframes hxk24 {
  0% {opacity:0;transform:scale(.4)}
  8% {opacity:0;transform:scale(.4)}
  10% {opacity:1;transform:scale(1)}
  33% {opacity:1;transform:scale(1)}
  35% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-like .hx-like-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk24 6s linear infinite}
@keyframes hxk25 {
  0% {opacity:0;transform:scale(.9)}
  10.5% {opacity:0;transform:scale(.9)}
  13% {opacity:1;transform:scale(1.15)}
  31% {opacity:1;transform:scale(1.15)}
  33.5% {opacity:0;transform:scale(.9)}
  100% {opacity:0;transform:scale(.9)}
}
.hx-like .hx-ring {opacity:0;transform:scale(.9);animation:hxk25 6s linear infinite}
@keyframes hxk26 {
  0% {opacity:0;transform:translateY(6px) scale(.9)}
  28.5% {opacity:0;transform:translateY(6px) scale(.9)}
  31% {opacity:1;transform:none}
  64% {opacity:1;transform:none}
  66.5% {opacity:0;transform:translateY(6px) scale(.9)}
  100% {opacity:0;transform:translateY(6px) scale(.9)}
}
.hx-like .hx-like-pop {opacity:0;transform:translateY(6px) scale(.9);animation:hxk26 6s linear infinite}
@keyframes hxk27 {
  0% {transform:scale(1)}
  47.5% {transform:scale(1)}
  50% {transform:scale(1.35)}
  62% {transform:scale(1.35)}
  64.5% {transform:scale(1)}
  100% {transform:scale(1)}
}
.hx-like .hx-like-love {transform:scale(1);animation:hxk27 6s linear infinite}
@keyframes hxk28 {
  0% {opacity:1}
  62% {opacity:1}
  63% {opacity:0}
  100% {opacity:0}
}
.hx-like .hx-like-a {opacity:0;animation:hxk28 6s linear infinite}
@keyframes hxk29 {
  0% {opacity:0;transform:scale(.6)}
  60.5% {opacity:0;transform:scale(.6)}
  63% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-like .hx-like-b {opacity:1;transform:scale(1);animation:hxk29 6s linear infinite}
@keyframes hxk30 {
  0% {opacity:0;transform:scale(.4)}
  10% {opacity:0;transform:scale(.4)}
  12% {opacity:1;transform:scale(1)}
  18% {opacity:1;transform:scale(1)}
  20% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-follow .hx-fol-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk30 7s linear infinite}
@keyframes hxk31 {
  0% {opacity:1}
  18% {opacity:1}
  19% {opacity:0}
  100% {opacity:0}
}
.hx-follow .hx-fol-a {opacity:0;animation:hxk31 7s linear infinite}
@keyframes hxk32 {
  0% {opacity:0}
  18.5% {opacity:0}
  19.5% {opacity:1}
  95% {opacity:1}
  96% {opacity:0}
  100% {opacity:0}
}
.hx-follow .hx-fol-b {opacity:1;animation:hxk32 7s linear infinite}
@keyframes hxk33 {
  0% {background:#005CB9;color:#fff;box-shadow:none}
  18% {background:#005CB9;color:#fff;box-shadow:none}
  19% {background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6}
  95% {background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6}
  96% {background:#005CB9;color:#fff;box-shadow:none}
  100% {background:#005CB9;color:#fff;box-shadow:none}
}
.hx-follow .hx-fol-btn {background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6;animation:hxk33 7s linear infinite}
@keyframes hxk34 {
  0% {opacity:0;transform:scale(.4)}
  31% {opacity:0;transform:scale(.4)}
  33% {opacity:1;transform:scale(1)}
  39% {opacity:1;transform:scale(1)}
  41% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-follow .hx-con-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk34 7s linear infinite}
@keyframes hxk35 {
  0% {opacity:1}
  39% {opacity:1}
  40% {opacity:0}
  100% {opacity:0}
}
.hx-follow .hx-con-a {opacity:0;animation:hxk35 7s linear infinite}
@keyframes hxk36 {
  0% {opacity:0}
  39.5% {opacity:0}
  40.5% {opacity:1}
  60% {opacity:1}
  61% {opacity:0}
  100% {opacity:0}
}
.hx-follow .hx-con-b {opacity:0;animation:hxk36 7s linear infinite}
@keyframes hxk37 {
  0% {opacity:0}
  61% {opacity:0}
  62% {opacity:1}
  95% {opacity:1}
  96% {opacity:0}
  100% {opacity:0}
}
.hx-follow .hx-con-c {opacity:1;animation:hxk37 7s linear infinite}
@keyframes hxk38 {
  0% {background:#005CB9;color:#fff;box-shadow:none}
  39% {background:#005CB9;color:#fff;box-shadow:none}
  40% {background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6}
  95% {background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6}
  96% {background:#005CB9;color:#fff;box-shadow:none}
  100% {background:#005CB9;color:#fff;box-shadow:none}
}
.hx-follow .hx-con-btn {background:#fff;color:#0f1420;box-shadow:inset 0 0 0 1px #d9dde6;animation:hxk38 7s linear infinite}
@keyframes hxk39 {
  0% {opacity:0;transform:scale(.6)}
  60.5% {opacity:0;transform:scale(.6)}
  63% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-follow .hx-con-ok {opacity:1;transform:scale(1);animation:hxk39 7s linear infinite}
@keyframes hxk40 {
  0% {opacity:0;transform:scale(.6)}
  2.5% {opacity:0;transform:scale(.6)}
  5% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-listing .hx-lst-ph1 {opacity:1;transform:scale(1);animation:hxk40 8s linear infinite}
@keyframes hxk41 {
  0% {opacity:0;transform:scale(.6)}
  8.5% {opacity:0;transform:scale(.6)}
  11% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-listing .hx-lst-ph2 {opacity:1;transform:scale(1);animation:hxk41 8s linear infinite}
@keyframes hxk42 {
  0% {clip-path:inset(0 100% 0 0)}
  17% {clip-path:inset(0 100% 0 0);animation-timing-function:steps(14,end)}
  31% {clip-path:inset(0 0 0 0)}
  94% {clip-path:inset(0 0 0 0)}
  95.5% {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
.hx-listing .hx-lst-title {clip-path:inset(0 0 0 0);animation:hxk42 8s linear infinite}
@keyframes hxk43 {
  0% {clip-path:inset(0 100% 0 0)}
  34% {clip-path:inset(0 100% 0 0);animation-timing-function:steps(4,end)}
  40% {clip-path:inset(0 0 0 0)}
  94% {clip-path:inset(0 0 0 0)}
  95.5% {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
.hx-listing .hx-lst-price {clip-path:inset(0 0 0 0);animation:hxk43 8s linear infinite}
@keyframes hxk44 {
  0% {opacity:0;transform:scale(.4)}
  43% {opacity:0;transform:scale(.4)}
  45% {opacity:1;transform:scale(1)}
  51% {opacity:1;transform:scale(1)}
  53% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-listing .hx-lst-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk44 8s linear infinite}
@keyframes hxk45 {
  0% {opacity:0;transform:translateY(12px)}
  52.5% {opacity:0;transform:translateY(12px)}
  55% {opacity:1;transform:none}
  94% {opacity:1;transform:none}
  96.5% {opacity:0;transform:translateY(12px)}
  100% {opacity:0;transform:translateY(12px)}
}
.hx-listing .hx-lst-stall {opacity:1;transform:none;animation:hxk45 8s linear infinite}
@keyframes hxk46 {
  0% {opacity:0;transform:scale(.6)}
  57.5% {opacity:0;transform:scale(.6)}
  60% {opacity:1;transform:scale(1)}
  94% {opacity:1;transform:scale(1)}
  96.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-listing .hx-lst-tile {opacity:1;transform:scale(1);animation:hxk46 8s linear infinite}
@keyframes hxk47 {
  0% {opacity:0;transform:scale(.4)}
  4% {opacity:0;transform:scale(.4)}
  6% {opacity:1;transform:scale(1)}
  12% {opacity:1;transform:scale(1)}
  14% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-live .hx-recbtn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk47 7s linear infinite}
@keyframes hxk48 {
  0% {opacity:0;transform:scale(1.5)}
  12.5% {opacity:0;transform:scale(1.5)}
  14% {opacity:1;transform:scale(1)}
  20% {opacity:1;transform:scale(1)}
  21.5% {opacity:0;transform:scale(1.5)}
  100% {opacity:0;transform:scale(1.5)}
}
.hx-live .hx-cd3 {opacity:0;transform:scale(1.5);animation:hxk48 7s linear infinite}
@keyframes hxk49 {
  0% {opacity:0;transform:scale(1.5)}
  21.5% {opacity:0;transform:scale(1.5)}
  23% {opacity:1;transform:scale(1)}
  29% {opacity:1;transform:scale(1)}
  30.5% {opacity:0;transform:scale(1.5)}
  100% {opacity:0;transform:scale(1.5)}
}
.hx-live .hx-cd2 {opacity:0;transform:scale(1.5);animation:hxk49 7s linear infinite}
@keyframes hxk50 {
  0% {opacity:0;transform:scale(1.5)}
  30.5% {opacity:0;transform:scale(1.5)}
  32% {opacity:1;transform:scale(1)}
  38% {opacity:1;transform:scale(1)}
  39.5% {opacity:0;transform:scale(1.5)}
  100% {opacity:0;transform:scale(1.5)}
}
.hx-live .hx-cd1 {opacity:0;transform:scale(1.5);animation:hxk50 7s linear infinite}
@keyframes hxk51 {
  0% {opacity:0}
  39% {opacity:0}
  40% {opacity:1}
  46% {opacity:1}
  47% {opacity:0}
  49% {opacity:0}
  50% {opacity:1}
  56% {opacity:1}
  57% {opacity:0}
  100% {opacity:0}
}
.hx-live .hx-live-rec {opacity:0;animation:hxk51 7s linear infinite}
@keyframes hxk52 {
  0% {border-radius:50%}
  39% {border-radius:50%}
  40% {border-radius:9px}
  58% {border-radius:9px}
  59% {border-radius:50%}
  100% {border-radius:50%}
}
.hx-live .hx-recbtn {border-radius:50%;animation:hxk52 7s linear infinite}
@keyframes hxk53 {
  0% {opacity:0;transform:scale(.4)}
  59% {opacity:0;transform:scale(.4)}
  61% {opacity:1;transform:scale(1)}
  67% {opacity:1;transform:scale(1)}
  69% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-live .hx-live-go > .hx-tap {opacity:0;transform:scale(.4);animation:hxk53 7s linear infinite}
@keyframes hxk54 {
  0% {opacity:0;transform:scale(.6)}
  67.5% {opacity:0;transform:scale(.6)}
  70% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-live .hx-live-on {opacity:1;transform:scale(1);animation:hxk54 7s linear infinite}
@keyframes hxk55 {
  0% {opacity:0;transform:scale(.4)}
  3% {opacity:0;transform:scale(.4)}
  5% {opacity:1;transform:scale(1)}
  11% {opacity:1;transform:scale(1)}
  13% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-buy .hx-buy-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk55 8s linear infinite}
@keyframes hxk56 {
  0% {transform:translateY(115%)}
  10% {transform:translateY(115%)}
  13% {transform:none}
  40% {transform:none}
  43% {transform:translateY(115%)}
  100% {transform:translateY(115%)}
}
.hx-buy .hx-buy-modal {transform:translateY(115%);animation:hxk56 8s linear infinite}
@keyframes hxk57 {
  0% {opacity:0;transform:scale(.4)}
  30% {opacity:0;transform:scale(.4)}
  32% {opacity:1;transform:scale(1)}
  38% {opacity:1;transform:scale(1)}
  40% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-buy .hx-buy-send > .hx-tap {opacity:0;transform:scale(.4);animation:hxk57 8s linear infinite}
@keyframes hxk58 {
  0% {opacity:0;transform:translateY(4px)}
  40.5% {opacity:0;transform:translateY(4px)}
  43% {opacity:1;transform:none}
  56% {opacity:1;transform:none}
  58.5% {opacity:0;transform:translateY(4px)}
  100% {opacity:0;transform:translateY(4px)}
}
.hx-buy .hx-buy-sent {opacity:0;transform:translateY(4px);animation:hxk58 8s linear infinite}
@keyframes hxk59 {
  0% {opacity:0;transform:scale(.6)}
  56.5% {opacity:0;transform:scale(.6)}
  59% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-buy .hx-buy-acc {opacity:1;transform:scale(1);animation:hxk59 8s linear infinite}
@keyframes hxk60 {
  0% {opacity:0;transform:rotate(-10deg) scale(1.7)}
  67.5% {opacity:0;transform:rotate(-10deg) scale(1.7)}
  70% {opacity:1;transform:rotate(-10deg) scale(1)}
  95% {opacity:1;transform:rotate(-10deg) scale(1)}
  97.5% {opacity:0;transform:rotate(-10deg) scale(1.7)}
  100% {opacity:0;transform:rotate(-10deg) scale(1.7)}
}
.hx-buy .hx-buy-sold {opacity:1;transform:rotate(-10deg) scale(1);animation:hxk60 8s linear infinite}
@keyframes hxk61 {
  0% {opacity:0;transform:scale(.4)}
  8% {opacity:0;transform:scale(.4)}
  10% {opacity:1;transform:scale(1)}
  16% {opacity:1;transform:scale(1)}
  18% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-offer .hx-off-cbtn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk61 7s linear infinite}
@keyframes hxk62 {
  0% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
  15.5% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
  18% {opacity:1;max-height:90px}
  95% {opacity:1;max-height:90px}
  97.5% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
  100% {opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
}
.hx-offer .hx-off-ctr {opacity:1;max-height:90px;animation:hxk62 7s linear infinite}
@keyframes hxk63 {
  0% {opacity:0;transform:scale(.4)}
  45% {opacity:0;transform:scale(.4)}
  47% {opacity:1;transform:scale(1)}
  53% {opacity:1;transform:scale(1)}
  55% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-offer .hx-off-abtn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk63 7s linear infinite}
@keyframes hxk64 {
  0% {opacity:1}
  55% {opacity:1}
  57.5% {opacity:0}
  100% {opacity:0}
}
.hx-offer .hx-off-btns {opacity:0;animation:hxk64 7s linear infinite}
@keyframes hxk65 {
  0% {opacity:0;transform:scale(.6)}
  55.5% {opacity:0;transform:scale(.6)}
  58% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-offer .hx-off-done {opacity:1;transform:scale(1);animation:hxk65 7s linear infinite}
@keyframes hxk66 {
  0% {opacity:0;transform:translateY(10px)}
  0.5% {opacity:0;transform:translateY(10px)}
  3% {opacity:1;transform:none}
  95% {opacity:1;transform:none}
  97.5% {opacity:0;transform:translateY(10px)}
  100% {opacity:0;transform:translateY(10px)}
}
.hx-help .hx-help-a {opacity:1;transform:none;animation:hxk66 8s linear infinite}
@keyframes hxk67 {
  0% {opacity:0;transform:translateY(10px)}
  6.5% {opacity:0;transform:translateY(10px)}
  9% {opacity:1;transform:none}
  95% {opacity:1;transform:none}
  97.5% {opacity:0;transform:translateY(10px)}
  100% {opacity:0;transform:translateY(10px)}
}
.hx-help .hx-help-b {opacity:1;transform:none;animation:hxk67 8s linear infinite}
@keyframes hxk68 {
  0% {opacity:0;transform:translateY(10px)}
  12.5% {opacity:0;transform:translateY(10px)}
  15% {opacity:1;transform:none}
  95% {opacity:1;transform:none}
  97.5% {opacity:0;transform:translateY(10px)}
  100% {opacity:0;transform:translateY(10px)}
}
.hx-help .hx-help-c {opacity:1;transform:none;animation:hxk68 8s linear infinite}
@keyframes hxk69 {
  0% {opacity:0;transform:scale(.4)}
  25% {opacity:0;transform:scale(.4)}
  27% {opacity:1;transform:scale(1)}
  33% {opacity:1;transform:scale(1)}
  35% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-help .hx-help-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk69 8s linear infinite}
@keyframes hxk70 {
  0% {opacity:0;transform:scale(.6)}
  34.5% {opacity:0;transform:scale(.6)}
  37% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-help .hx-help-f1 {opacity:1;transform:scale(1);animation:hxk70 8s linear infinite}
@keyframes hxk71 {
  0% {opacity:0;transform:scale(.6)}
  46.5% {opacity:0;transform:scale(.6)}
  49% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-help .hx-help-f2 {opacity:1;transform:scale(1);animation:hxk71 8s linear infinite}
@keyframes hxk72 {
  0% {opacity:0;transform:scale(.6)}
  57.5% {opacity:0;transform:scale(.6)}
  60% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-help .hx-help-f3 {opacity:1;transform:scale(1);animation:hxk72 8s linear infinite}
@keyframes hxk73 {
  0% {opacity:0;transform:scale(.6)}
  69.5% {opacity:0;transform:scale(.6)}
  72% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-help .hx-help-ok {opacity:1;transform:scale(1);animation:hxk73 8s linear infinite}
@keyframes hxk74 {
  0% {transform:translateX(0)}
  18% {transform:translateX(0)}
  21% {transform:translateX(100%)}
  38% {transform:translateX(100%)}
  41% {transform:translateX(200%)}
  96% {transform:translateX(200%)}
  100% {transform:translateX(0)}
}
.hx-deals .hx-uline {transform:translateX(200%);animation:hxk74 8s linear infinite}
@keyframes hxk75 {
  0% {color:#005CB9}
  19% {color:#005CB9}
  20% {color:#5A6475}
  100% {color:#5A6475}
}
.hx-deals .hx-dt1 {color:#5A6475;animation:hxk75 8s linear infinite}
@keyframes hxk76 {
  0% {color:#5A6475}
  19% {color:#5A6475}
  20% {color:#005CB9}
  39% {color:#005CB9}
  40% {color:#5A6475}
  100% {color:#5A6475}
}
.hx-deals .hx-dt2 {color:#5A6475;animation:hxk76 8s linear infinite}
@keyframes hxk77 {
  0% {color:#5A6475}
  39% {color:#5A6475}
  40% {color:#005CB9}
  96% {color:#005CB9}
  97% {color:#5A6475}
  100% {color:#5A6475}
}
.hx-deals .hx-dt3 {color:#005CB9;animation:hxk77 8s linear infinite}
@keyframes hxk78 {
  0% {opacity:1}
  19% {opacity:1}
  20.5% {opacity:0}
  100% {opacity:0}
}
.hx-deals .hx-dp1 {opacity:0;animation:hxk78 8s linear infinite}
@keyframes hxk79 {
  0% {opacity:0}
  19.5% {opacity:0}
  21% {opacity:1}
  39% {opacity:1}
  40.5% {opacity:0}
  100% {opacity:0}
}
.hx-deals .hx-dp2 {opacity:0;animation:hxk79 8s linear infinite}
@keyframes hxk80 {
  0% {opacity:0}
  38.5% {opacity:0}
  41% {opacity:1}
  95% {opacity:1}
  97.5% {opacity:0}
  100% {opacity:0}
}
.hx-deals .hx-dp3 {opacity:1;animation:hxk80 8s linear infinite}
@keyframes hxk81 {
  0% {opacity:0;transform:translateY(8px)}
  44.5% {opacity:0;transform:translateY(8px)}
  47% {opacity:1;transform:none}
  95% {opacity:1;transform:none}
  97.5% {opacity:0;transform:translateY(8px)}
  100% {opacity:0;transform:translateY(8px)}
}
.hx-deals .hx-rate {opacity:1;transform:none;animation:hxk81 8s linear infinite}
@keyframes hxk82 {
  0% {color:#d9dde6;transform:scale(1)}
  52% {color:#d9dde6;transform:scale(1)}
  54% {color:#FFB400;transform:scale(1.15)}
  95% {color:#FFB400;transform:scale(1.15)}
  97% {color:#d9dde6;transform:scale(1)}
  100% {color:#d9dde6;transform:scale(1)}
}
.hx-deals .hx-st1 {color:#FFB400;transform:scale(1.15);animation:hxk82 8s linear infinite}
@keyframes hxk83 {
  0% {color:#d9dde6;transform:scale(1)}
  57% {color:#d9dde6;transform:scale(1)}
  59% {color:#FFB400;transform:scale(1.15)}
  95% {color:#FFB400;transform:scale(1.15)}
  97% {color:#d9dde6;transform:scale(1)}
  100% {color:#d9dde6;transform:scale(1)}
}
.hx-deals .hx-st2 {color:#FFB400;transform:scale(1.15);animation:hxk83 8s linear infinite}
@keyframes hxk84 {
  0% {color:#d9dde6;transform:scale(1)}
  62% {color:#d9dde6;transform:scale(1)}
  64% {color:#FFB400;transform:scale(1.15)}
  95% {color:#FFB400;transform:scale(1.15)}
  97% {color:#d9dde6;transform:scale(1)}
  100% {color:#d9dde6;transform:scale(1)}
}
.hx-deals .hx-st3 {color:#FFB400;transform:scale(1.15);animation:hxk84 8s linear infinite}
@keyframes hxk85 {
  0% {color:#d9dde6;transform:scale(1)}
  67% {color:#d9dde6;transform:scale(1)}
  69% {color:#FFB400;transform:scale(1.15)}
  95% {color:#FFB400;transform:scale(1.15)}
  97% {color:#d9dde6;transform:scale(1)}
  100% {color:#d9dde6;transform:scale(1)}
}
.hx-deals .hx-st4 {color:#FFB400;transform:scale(1.15);animation:hxk85 8s linear infinite}
@keyframes hxk86 {
  0% {color:#d9dde6;transform:scale(1)}
  72% {color:#d9dde6;transform:scale(1)}
  74% {color:#FFB400;transform:scale(1.15)}
  95% {color:#FFB400;transform:scale(1.15)}
  97% {color:#d9dde6;transform:scale(1)}
  100% {color:#d9dde6;transform:scale(1)}
}
.hx-deals .hx-st5 {color:#FFB400;transform:scale(1.15);animation:hxk86 8s linear infinite}
@keyframes hxk87 {
  0% {clip-path:inset(0 100% 0 0)}
  6% {clip-path:inset(0 100% 0 0);animation-timing-function:steps(24,end)}
  34% {clip-path:inset(0 0 0 0)}
  43% {clip-path:inset(0 0 0 0)}
  44.5% {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
.hx-msg .hx-msg-type {clip-path:inset(0 100% 0 0);animation:hxk87 6s linear infinite}
@keyframes hxk88 {
  0% {opacity:0;transform:scale(.4)}
  36% {opacity:0;transform:scale(.4)}
  38% {opacity:1;transform:scale(1)}
  44% {opacity:1;transform:scale(1)}
  46% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-msg .hx-msg-btn > .hx-tap {opacity:0;transform:scale(.4);animation:hxk88 6s linear infinite}
@keyframes hxk89 {
  0% {opacity:0;transform:translateY(10px) scale(.9)}
  43.5% {opacity:0;transform:translateY(10px) scale(.9)}
  46% {opacity:1;transform:none}
  95% {opacity:1;transform:none}
  97.5% {opacity:0;transform:translateY(10px) scale(.9)}
  100% {opacity:0;transform:translateY(10px) scale(.9)}
}
.hx-msg .hx-msg-out {opacity:1;transform:none;animation:hxk89 6s linear infinite}
@keyframes hxk90 {
  0% {opacity:0;transform:scale(.4)}
  6% {opacity:0;transform:scale(.4)}
  8% {opacity:1;transform:scale(1)}
  14% {opacity:1;transform:scale(1)}
  16% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-menu .hx-menu-more > .hx-tap {opacity:0;transform:scale(.4);animation:hxk90 6s linear infinite}
@keyframes hxk91 {
  0% {opacity:0;transform:translateY(-6px) scale(.95)}
  13.5% {opacity:0;transform:translateY(-6px) scale(.95)}
  16% {opacity:1;transform:none}
  56% {opacity:1;transform:none}
  58.5% {opacity:0;transform:translateY(-6px) scale(.95)}
  100% {opacity:0;transform:translateY(-6px) scale(.95)}
}
.hx-menu .hx-menu-drop {opacity:1;transform:none;animation:hxk91 6s linear infinite}
@keyframes hxk92 {
  0% {opacity:0;transform:scale(.4)}
  40% {opacity:0;transform:scale(.4)}
  42% {opacity:1;transform:scale(1)}
  50% {opacity:1;transform:scale(1)}
  52% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-menu .hx-share > .hx-tap {opacity:0;transform:scale(.4);animation:hxk92 6s linear infinite}
@keyframes hxk93 {
  0% {background:transparent}
  42% {background:transparent}
  43% {background:#EDF5FD}
  53% {background:#EDF5FD}
  54% {background:transparent}
  100% {background:transparent}
}
.hx-menu .hx-share {background:transparent;animation:hxk93 6s linear infinite}
@keyframes hxk94 {
  0% {opacity:0;transform:translate(-50%,8px)}
  55.5% {opacity:0;transform:translate(-50%,8px)}
  58% {opacity:1;transform:translate(-50%,0)}
  84% {opacity:1;transform:translate(-50%,0)}
  86.5% {opacity:0;transform:translate(-50%,8px)}
  100% {opacity:0;transform:translate(-50%,8px)}
}
.hx-menu .hx-menu-toast {opacity:0;transform:translate(-50%,8px);animation:hxk94 6s linear infinite}
@keyframes hxk95 {
  0% {opacity:0;transform:scale(.4)}
  28% {opacity:0;transform:scale(.4)}
  30% {opacity:1;transform:scale(1)}
  36% {opacity:1;transform:scale(1)}
  38% {opacity:0;transform:scale(.4)}
  100% {opacity:0;transform:scale(.4)}
}
.hx-admin .hx-adm-ok > .hx-tap {opacity:0;transform:scale(.4);animation:hxk95 7s linear infinite}
@keyframes hxk96 {
  0% {opacity:1}
  38% {opacity:1}
  40.5% {opacity:0}
  100% {opacity:0}
}
.hx-admin .hx-adm-btns {opacity:0;animation:hxk96 7s linear infinite}
@keyframes hxk97 {
  0% {opacity:0;transform:scale(.6)}
  37.5% {opacity:0;transform:scale(.6)}
  40% {opacity:1;transform:scale(1)}
  95% {opacity:1;transform:scale(1)}
  97.5% {opacity:0;transform:scale(.6)}
  100% {opacity:0;transform:scale(.6)}
}
.hx-admin .hx-adm-done {opacity:1;transform:scale(1);animation:hxk97 7s linear infinite}
@keyframes hxk98 {
  0% {background:#fff;border-color:#eef0f4}
  37.5% {background:#fff;border-color:#eef0f4}
  40% {background:#f3fcf6;border-color:#bfe8cf}
  95% {background:#f3fcf6;border-color:#bfe8cf}
  97.5% {background:#fff;border-color:#eef0f4}
  100% {background:#fff;border-color:#eef0f4}
}
.hx-admin .hx-adm-row {background:#f3fcf6;border-color:#bfe8cf;animation:hxk98 7s linear infinite}
@keyframes hxk99 {
  0% {opacity:1}
  40% {opacity:1}
  41% {opacity:0}
  100% {opacity:0}
}
.hx-admin .hx-q1 {opacity:0;animation:hxk99 7s linear infinite}
@keyframes hxk100 {
  0% {opacity:0}
  40.5% {opacity:0}
  41.5% {opacity:1}
  95% {opacity:1}
  96% {opacity:0}
  100% {opacity:0}
}
.hx-admin .hx-q0 {opacity:1;animation:hxk100 7s linear infinite}

/* ——— Language toggle ——— */
.lang-toggle{display:flex;align-items:center;gap:4px}
.lang-toggle button{border:0;background:none;cursor:pointer;font:inherit;padding:4px 6px;border-radius:8px;color:var(--muted);font-weight:600}
.lang-toggle button.on{color:var(--blue);font-weight:800;background:#EDF5FD}
.lang-menu{padding:6px 12px;font-size:14px;color:var(--muted)}
.auth-lang{display:flex;justify-content:flex-end;margin:-6px -4px -8px 0}
.lang-mini{border:1px solid var(--border);border-radius:999px;padding:2px}
.lang-mini button{font-size:12px;padding:3px 9px;border-radius:999px}
/* like mock: reactions pop out beside the 👍 so the item stays visible */
.hx-like .hx-pop{left:46px;bottom:auto;top:-6px}

/* ===== v5 usability: hero, trust badge, cards, shop filters, plain deal pages ===== */
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-danger-text { color: var(--red); }
/* Connect: quieter secondary control next to the primary Follow button */
.btn-quiet { background: transparent; color: var(--muted); border: 1px dashed #cfd8e6; font-weight: 600; }
.btn-quiet:hover { color: var(--blue); border-color: var(--blue); }
.btn-quiet.connected { border-style: solid; color: var(--text); }
.btn-quiet.incoming { border-style: solid; border-color: var(--blue); color: var(--blue); }
.connect-hint { font-size: 12px; margin-top: 6px; }

/* Signed-out hero */
.hero { position: relative; background: linear-gradient(160deg, rgba(0,92,185,.10), rgba(255,59,74,.07)); border: 1px solid var(--border);
  border-radius: 20px; padding: 22px 16px 18px; margin: 4px 0 18px; text-align: center; overflow: hidden; }
.hero-lang { position: absolute; top: 10px; right: 10px; }
.hero-title { font-size: 26px; line-height: 1.15; margin: 14px auto 8px; max-width: 560px; font-weight: 900; letter-spacing: -.01em; }
.hero-sub { color: var(--muted); margin: 0 auto 14px; max-width: 460px; font-size: 15px; }
.hero-cta { display: inline-block; font-size: 16px; padding: 12px 22px; border-radius: 14px; }
.hero-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-step { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.hero-step b { font-size: 14px; }
.hero-step span:last-child { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.hero-step-icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(0,92,185,.10); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 4px; }
.hero-step:nth-child(2) .hero-step-icon { background: rgba(255,59,74,.10); }
.hero-step:nth-child(3) .hero-step-icon { background: rgba(16,185,129,.12); }
@media (min-width: 720px) {
  .hero { padding: 34px 28px 26px; }
  .hero-title { font-size: 36px; }
  .hero-step { padding: 16px 10px; }
  .hero-step span:last-child { font-size: 13px; }
}

/* ✓ ID verified */
.id-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--blue);
  background: rgba(0,92,185,.10); padding: 2px 8px 2px 3px; border-radius: 999px; white-space: nowrap; vertical-align: middle; line-height: 1.5; }
.id-badge-check { width: 15px; height: 15px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.id-badge-sm { font-size: 10.5px; padding: 1px 6px 1px 2px; }
.id-badge-sm .id-badge-check { width: 12px; height: 12px; font-size: 8px; }

/* Listing cards: photo → price → size & condition → seller */
.listing-tile .info { padding: 10px 10px 12px; }
.tile-price-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.listing-tile .tile-price-row .price { font-size: 18px; font-weight: 900; color: var(--text); }
.tile-price-row .pill { font-size: 10px; padding: 2px 7px; }
.listing-tile .info h4 { margin: 4px 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-specs { font-size: 13px; font-weight: 700; color: var(--text); }
.tile-seller { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.spec-pill { background: rgba(0,92,185,.08); color: var(--text); }

/* Shop filters (size first) */
.shop-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.shop-filter { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; min-width: 0; }
.shop-filter select { width: 100%; min-width: 0; padding: 9px 8px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 600; }
.shop-filter:first-child select { border-color: var(--blue); }
.req { color: var(--muted); font-weight: 500; font-size: 12px; }

/* Stall video ("New video") */
.new-video-badge { display: inline-block; background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .02em; }
.live-stall .new-video-badge { position: absolute; left: 50%; transform: translateX(-50%); top: 48px; border: 2px solid #fff; font-size: 9px; white-space: nowrap; }
.new-video-badge.on-video { position: absolute; top: 10px; left: 10px; }
.stall-ring.has-video { background: linear-gradient(135deg, var(--blue), #7aa0ff 50%, var(--blue)); }
.new-video-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; font-size: 13px; }

/* Help This Deal */
.help-explain { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.help-invite { border-color: rgba(255,59,74,.35); background: rgba(255,59,74,.04); }
.help-invite p { margin: 0 0 10px; font-weight: 600; }

/* Deal page in plain language */
.deal-head { margin-bottom: 10px; }
.deal-title { margin: 0 0 6px; overflow-wrap: anywhere; }
.deal-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal-code { font-size: 11px; color: var(--muted); opacity: .8; }
.deal-status-card { border-color: rgba(0,92,185,.35); }
.deal-sentence { font-size: 18px; font-weight: 700; margin: 0 0 12px; line-height: 1.35; }
.deal-next { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.deal-sentence-sm { font-size: 14px; color: var(--text); margin: 2px 0; }
.deal-parties { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.deal-parties a { color: inherit; gap: 8px; }
.deal-item .price { font-weight: 800; color: var(--blue); }
.deal-timeline { margin: 14px 0; }
.deal-timeline summary { cursor: pointer; font-weight: 800; color: var(--muted); padding: 6px 0; }
.deal-cancel { text-align: center; margin: 18px 0 8px; font-size: 13px; }
.status-pill { text-transform: none; }
.pill-your-turn { background: var(--blue); color: #fff; }
.deal-list-card.your-turn { border-color: rgba(0,92,185,.45); }
.offer-list-card { display: block; color: inherit; }

/* ID gate (shown when a buy / sell / trade action is tapped) */
.id-gate { text-align: center; }
.id-gate-icon { width: 52px; height: 52px; margin: 4px auto 8px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.id-gate .btn-group { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.safety-note b { display: block; margin-bottom: 2px; }

/* Guests: 3-item bottom nav */
.bottomnav.guest { grid-template-columns: repeat(3, 1fr); }
/* guide mockups (v5) */
.hx-newvid{background:#005CB9;letter-spacing:.02em}
.hx-quiet{color:#64748b;box-shadow:inset 0 0 0 1px #cfd8e6}
.hx-chips{display:flex;gap:6px;margin:4px 0}
.hx-chip{font-size:10px;font-weight:700;background:rgba(0,92,185,.10);color:#0f1420;border-radius:999px;padding:2px 8px}
.hx-idv{color:#005CB9;font-weight:700}
.hx-tile small,.hx-buy small{display:block;font-size:10px;color:#64748b}
/* v5: equal-width card columns; long titles/specs never push the grid past the screen */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grid-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3-md { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid > * { min-width: 0; }
.listing-tile .info h4, .listing-tile .card-specs { overflow: hidden; text-overflow: ellipsis; }
/* v5: on phones the Shop aisle/intent chips scroll sideways in one row so cards show sooner */
@media (max-width: 640px) {
  #aisleChips, #intentChips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  #aisleChips::-webkit-scrollbar, #intentChips::-webkit-scrollbar { display: none; }
  #aisleChips .chip, #intentChips .chip { flex: 0 0 auto; }
}
/* v6: restored card action row pieces */
.react-count-btn { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted, #667085); padding: 4px 6px; cursor: pointer; border-radius: 8px; }
.react-count-btn:hover { background: rgba(0,0,0,.05); color: inherit; }
.like-hold { display: inline-flex; align-items: center; gap: 2px; }
.save-wrap { display: inline-flex; }
.save-btn.active { border-color: var(--blue); color: var(--blue); }
.who-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.who-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; color: inherit; text-decoration: none; }
.who-row:hover { background: rgba(0,0,0,.04); }
/* v7: product cards — actions inside the card, equal heights, actions pinned to the bottom */
.grid > .listing-tile-wrap.tile-card { height: 100%; }
.listing-tile-wrap.tile-card {
  display: flex; flex-direction: column; gap: 0; margin-bottom: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: visible;
}
.listing-tile-wrap.tile-card .listing-tile-shell { flex: 0 0 auto; }
.listing-tile-wrap.tile-card .listing-tile { border: 0; border-radius: 14px 14px 0 0; background: transparent; }
.listing-tile-wrap.tile-card .listing-tile .info { padding: 10px 10px 8px; }
.listing-tile-wrap.tile-card > .tile-actions { margin-top: auto; padding: 0 10px 10px; display: block; }
.tile-actions-inner { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tile-primary { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.tile-primary > .tile-buy { display: flex; }
.tile-primary .btn, .tile-primary > .tile-buy .btn { width: 100%; margin: 0; padding: 7px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; text-align: center; }
.tile-primary > .pill { justify-self: start; }
.tile-secondary { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.tile-secondary > span[data-commerce], .tile-secondary .save-wrap { display: inline-flex; }
.tile-icon-btn { min-width: 34px; height: 32px; padding: 0 8px; margin: 0; font-size: 15px; line-height: 1; justify-content: center; }
.tile-secondary .like-hold-btn { height: 32px; padding: 0 8px; margin: 0; }
.tile-secondary .like-hold { margin-left: auto; }
.tile-owner-actions { display: flex !important; flex-wrap: wrap; gap: 6px; }
@media (max-width: 420px) {
  .tile-primary .btn, .tile-primary > .tile-buy .btn { font-size: 12px; padding: 7px 4px; }
  .tile-icon-btn, .tile-secondary .like-hold-btn { height: 30px; min-width: 30px; padding: 0 6px; font-size: 14px; }
  .listing-tile-wrap.tile-card > .tile-actions { padding: 0 8px 8px; }
}
/* v7: photo picking — the file input stays in the layout (iOS opens the picker reliably) and chosen photos show as thumbnails */
.file-btn { position: relative; overflow: hidden; }
.file-input-hidden { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.photo-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-previews:empty { display: none; }
.photo-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(15,20,32,.75); color: #fff; font-size: 14px; line-height: 22px; padding: 0; cursor: pointer; }
.composer-card .form-error { background: #fff1f2; color: #b42318; border: 1px solid #fecdd3; border-radius: 10px; padding: 8px 10px; font-size: 13px; }

/* ===== v8: listing media rules, gallery, word counter ===== */
.media-picker { border: 1px dashed var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); }
.media-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.media-counter { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff3e0; color: #9a4b00; white-space: nowrap; }
.media-counter.ok { background: #e6f6ea; color: #17692e; }
.media-rule { margin: 0; font-size: 13px; }
.media-picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.photo-thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb-tag { position: absolute; left: 3px; bottom: 3px; font-size: 10px; font-weight: 700; background: rgba(15,20,32,.75); color: #fff; padding: 1px 5px; border-radius: 6px; }
.thumb-warn { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffb020; color: #3a2500; font-size: 12px; line-height: 20px; text-align: center; }
.media-notes:empty { display: none; }
.media-note { font-size: 13px; padding: 6px 10px; border-radius: 8px; margin-top: 4px; }
.media-note.warn { background: #fff7e0; color: #7a5200; }
.media-note.error { background: #fdecec; color: #a01919; }
.upload-progress { display: flex; flex-direction: column; gap: 4px; }
.upload-bar { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; border: 1px solid var(--border); }
.upload-bar span { display: block; height: 100%; width: 0; background: var(--primary, #005CB9); transition: width .2s; }
.save-reason { font-size: 13px; color: #9a4b00; min-height: 1em; }
.save-reason:empty { display: none; }
.word-counter { font-size: 12px; color: var(--muted, #6b7280); text-align: right; margin-top: -4px; }
.word-counter.over { color: #b91c1c; font-weight: 700; }
.listing-desc { white-space: pre-wrap; max-height: 9.5em; overflow: hidden; position: relative; margin: 0; }
.listing-desc.open { max-height: none; }
.btn-link { background: none; border: 0; padding: 4px 0; color: var(--primary, #005CB9); font-weight: 600; cursor: pointer; }
.gallery { position: relative; background: #0f1420; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 1/1; max-height: 70vh; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; background: #0f1420; }
.gal-slide img, .gal-slide video { width: 100%; height: 100%; object-fit: contain; display: block; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); font-size: 22px; line-height: 34px; cursor: pointer; z-index: 5; padding: 0; }
.gal-nav.prev { left: 8px; } .gal-nav.next { right: 8px; }
.gal-count { position: absolute; left: 10px; top: 10px; background: rgba(15,20,32,.7); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; z-index: 5; }
.gal-vbadge { position: absolute; left: 10px; bottom: 10px; background: rgba(15,20,32,.7); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; z-index: 5; }
.gal-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; z-index: 4; }
.gal-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.gal-dots span.vid { border-radius: 1px; }
.gal-dots span.on { background: #fff; }
.tile-vcount { width: auto !important; padding: 0 7px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700; }
@media (max-width: 520px) { .gal-nav { display: none; } }
/* ===== v8: profile photos, payment note, terms ===== */
.avatar { position: relative; overflow: hidden; }
.avatar.has-photo, .avatar-stack-item.has-photo { color: transparent; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-stack-item { position: relative; overflow: hidden; }
.avatar-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; margin-top: -40px; z-index: 1; border-radius: 50%; flex-shrink: 0; }
.avatar-btn .profile-avatar-overlap.avatar-lg { margin-top: 0; }
.avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15,20,32,.2); font-size: 13px; line-height: 26px; text-align: center; z-index: 2; }
.avatar-edit .avatar-lg { width: 72px; height: 72px; }
.crop-box { position: relative; width: min(280px, 72vw); aspect-ratio: 1/1; margin: 10px auto; border-radius: 50%; overflow: hidden; background: #0f1420; touch-action: none; cursor: grab; }
.crop-box img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; max-width: none; }
.crop-zoom { width: 100%; }
.ack-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--bg-soft); }
.ack-row input { margin-top: 3px; }
.ack-row.ack-need { outline: 2px solid #f59e0b; }
.safety-note.compact { font-size: 13px; }
.cart-group { margin-bottom: 14px; }
.cart-group-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.cart-sum { font-weight: 700; }
.cart-footer { position: sticky; bottom: 70px; z-index: 5; }
.terms-page h2 { margin-top: 22px; }
.terms-page .placeholder { border: 1px dashed var(--border); border-radius: 12px; padding: 12px; background: var(--bg-soft); }
.looking-card .want-thumb-row { display: flex; gap: 12px; align-items: flex-start; }

/* ===================================================================
   v9 BRAND — Shoonu blue #005CB9 + red #FC1618, Nunito headings,
   softer cards, pill buttons, playful (reduced-motion aware) touches
   =================================================================== */
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url('/fonts/nunito-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url('/fonts/nunito-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --blue: #005CB9;          /* brand blue: primary buttons, links, active tabs, + button (white text 6.5:1) */
  --blue-600: #004E9E;      /* hover */
  --blue-700: #003F80;      /* pressed */
  --blue-50: #EDF5FD;       /* tint backgrounds (blue text on it 5.9:1) */
  --blue-100: #D6E7F8;      /* hover tint / borders */
  --red: #FC1618;           /* brand red: hearts, dots, "New", small accents (non-text) */
  --red-strong: #D8000F;    /* red with white text (badges) — 5.3:1 so small numbers stay readable */
  --red-50: #FFF0F0;
  --bg: #ffffff;
  --bg-soft: #F5F8FC;
  --text: #121A2B;
  --muted: #5A6475;         /* 5.9:1 on white */
  --border: #E4E9F1;
  --shadow: 0 4px 18px rgba(0, 45, 100, 0.08);
  --shadow-hover: 0 8px 26px rgba(0, 45, 100, 0.12);
  --radius: 18px;
  --font-head: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html, body { font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text); }
h1, h2, h3, .h1, .h2, .section-title, .brand-word { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; }
a { color: var(--blue); }
.ic { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.25em; flex-shrink: 0; }
.ic-sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.ic-lg { width: 24px; height: 24px; }

/* header logo */
.topnav .logo { gap: 8px; color: var(--text); }
.topnav .logo img, .topnav .logo .brand-mark { width: auto !important; height: 30px !important; border-radius: 0 !important; }
.brand-word { font-size: 22px; color: var(--blue); line-height: 1; }
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-lockup.lg .brand-mark { height: 56px; } .brand-lockup.lg .brand-word { font-size: 34px; }

/* cards: softer radius + gentle shadow */
.card, .feed-card, .listing-tile-wrap, .tile-card { border-radius: var(--radius) !important; }
.card { box-shadow: var(--shadow); border-color: var(--border); }

/* pill buttons with a friendly press */
.btn { border-radius: 999px !important; font-weight: 700; transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn-primary { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.btn-primary:hover:not(:disabled) { background: var(--blue-600) !important; border-color: var(--blue-600) !important; }
.btn-primary:active:not(:disabled) { background: var(--blue-700) !important; }
.btn-primary:disabled { background: #A9C3E0 !important; border-color: #A9C3E0 !important; }
.btn-outline { border-color: var(--blue-100) !important; color: var(--blue) !important; background: #fff; }
.btn-outline:hover:not(:disabled) { background: var(--blue-50) !important; border-color: var(--blue-100) !important; }
.btn-danger { background: #fff !important; color: #B3000C !important; border: 1px solid #F3C2C5 !important; }
.chip { border-radius: 999px; }
.chip.on, .chip[aria-pressed="true"] { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.tabs .btn-primary, .feed-tabs .btn-primary { box-shadow: 0 3px 10px rgba(0, 92, 185, .25); }

/* badges: brand red, readable */
.badge { background: var(--red-strong) !important; color: #fff !important; box-shadow: 0 0 0 2px #fff; }

/* intent + status chips: neutral / blue tint (red is not a status color) */
.pill { border-radius: 999px; font-weight: 700; }
.pill-blue { background: var(--blue-50) !important; color: var(--blue) !important; }
.pill-red { background: #EEF1F5 !important; color: #3A4456 !important; }
.pill-green { background: #EEF1F5 !important; color: #3A4456 !important; }
.status-pill.pill-red { background: #EEF1F5 !important; color: #3A4456 !important; }
.new-video-badge, .badge-new { background: var(--red) !important; color: #fff !important; }

/* ID verified: small blue check next to names (full label only on the profile header) */
.id-badge { background: none !important; border: 0 !important; padding: 0 !important; color: var(--blue) !important; gap: 4px; font-weight: 700; font-size: 13px; }
.id-badge .id-badge-check { display: none; }
.id-badge .ic { width: 16px; height: 16px; }
.id-badge-label { display: none; }
.id-badge.id-badge-full .id-badge-label { display: inline; }
.id-badge.id-badge-full { background: var(--blue-50) !important; padding: 2px 10px 2px 6px !important; border-radius: 999px; }

/* bottom nav + bouncy "+" */
.bottomnav a.active, .bottomnav a:hover { color: var(--blue) !important; }
.bottomnav .ic { width: 22px; height: 22px; }
.bottomnav .create-fab { background: var(--blue) !important; color: #fff !important; border-radius: 18px !important; box-shadow: 0 6px 16px rgba(0, 92, 185, .35); transition: transform .18s cubic-bezier(.34,1.56,.64,1); display: inline-flex; align-items: center; justify-content: center; }
.bottomnav .create-fab .ic { width: 24px; height: 24px; }
.bottomnav a:hover .create-fab { transform: translateY(-2px) scale(1.06); }
.bottomnav a:active .create-fab { transform: scale(.92); }
.nav-icon { color: var(--text); }
.nav-icon .ic { width: 22px; height: 22px; }
.nav-icon:hover { color: var(--blue); }

/* likes: heart pop + red burst */
.is-liked, .liked, [data-liked="1"], .react-btn.on { color: var(--red) !important; }
.pop { animation: shoonu-pop .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes shoonu-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.burst-dot { position: fixed; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 9999; animation: shoonu-burst .6s ease-out forwards; }
@keyframes shoonu-burst { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

/* friendly empty states with the logo arch + dots */
.empty { border-radius: var(--radius); background: var(--bg-soft); padding: 28px 18px; text-align: center; color: var(--muted); }
.empty::before { content: ''; display: block; width: 96px; height: 72px; margin: 0 auto 10px; background: url('/brand/empty-mark.svg') center / contain no-repeat; }
.empty.no-art::before { display: none; }
.dot-motif { position: relative; overflow: hidden; }
.dot-motif::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 12% 22%, rgba(252,22,24,.28) 0 4px, transparent 5px), radial-gradient(circle at 88% 30%, rgba(0,92,185,.22) 0 6px, transparent 7px), radial-gradient(circle at 80% 84%, rgba(252,22,24,.22) 0 3px, transparent 4px), radial-gradient(circle at 20% 80%, rgba(0,92,185,.2) 0 3px, transparent 4px); }

/* profile tabs: scroll with a fade edge instead of cutting off */
.profile-tabs-wrap { position: relative; }
.profile-tabs-wrap .tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 28px; }
.profile-tabs-wrap .tabs::-webkit-scrollbar { display: none; }
.profile-tabs-wrap .tabs .btn { flex: 0 0 auto; }
.profile-tabs-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%); }

/* composer chips */
.composer-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.composer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-weight: 700; font-size: 13px; border: 0; position: relative; cursor: pointer; text-decoration: none; }
.composer-chip:hover { background: var(--blue-100); }
.composer-chip .ic { width: 16px; height: 16px; }
.composer-chips .composer-send { margin-left: auto; }

/* home empty state */
.home-empty { text-align: center; padding: 26px 18px; }
.home-empty h2 { margin: 6px 0 4px; }
.home-empty .row { justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.home-empty-art { width: 120px; height: 120px; margin: 0 auto; }
.home-empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.home-empty-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ic-love { color: var(--red); fill: var(--red); }
.ic-filled { fill: currentColor; }
.confetti-dot { width: 8px; height: 12px; border-radius: 2px; animation: shoonu-confetti 1.4s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes shoonu-confetti { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }
.btn .ic { width: 1.1em; height: 1.1em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* loading screen */
.boot { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.boot img { width: 64px; height: auto; }
.boot-dots { display: flex; gap: 8px; }
.boot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: shoonu-bounce 1s ease-in-out infinite; }
.boot-dots i:nth-child(2) { background: var(--blue); animation-delay: .15s; }
.boot-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes shoonu-bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
/* sellers row: follow stays; feed post headers don't show follow */
.feed-card .post-head .follow-btn, .feed-card .post-head [data-follow-user] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .burst-dot { display: none; }
}
.auth-brand { display: flex; justify-content: center; margin: 4px 0 2px; }
.auth-brand .brand-mark { height: 48px; width: auto; }
.auth-brand .brand-word { font-size: 30px; }
/* card ⋯ buttons (z 50) must scroll under the sticky top bar and bottom nav */
.topnav, .bottomnav { z-index: 70 !important; }
/* profile photo pickers are labels wrapping a real file input (iPhone Safari needs a tap on a real input) */
label.avatar-btn { display: inline-block; overflow: visible; }
label.avatar-btn .file-input-hidden { border-radius: 50%; z-index: 2; }
label#stAvatarChange { cursor: pointer; }
.crop-box { height: min(280px, 72vw); }
.id-gate { position: relative; padding-top: 6px; }
.id-gate .modal-x { position: absolute; top: -6px; right: -6px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.id-gate .id-gate-icon .ic { width: 40px; height: 40px; color: var(--blue); }
.id-gate-msg { font-size: 17px; font-weight: 700; margin: 8px 0 14px; line-height: 1.4; }
.id-gate-card .id-gate-msg { margin-top: 0; }
.looking-empty p { margin: 0 0 12px; }
/* v10: "What brings you to Shoonu?" (onboarding) + "I'm here to" (Settings) */
.onb { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.onb-title { margin: 6px 0 0; }
.onb-sub { margin: -6px 0 2px; }
.intent-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.onb-pills { justify-content: center; margin: 4px 0 8px; }
.chip.intent-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; font-size: 16px; font-weight: 700; color: var(--text); }
.chip.intent-pill .ic { width: 20px; height: 20px; }
.chip.intent-pill.chip-sm { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.chip.intent-pill.chip-sm .ic { width: 16px; height: 16px; }
.onb-skip { align-self: center; background: none; border: 0; color: var(--muted); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px 12px; }
.onb-badge { width: 60px; height: 60px; border-radius: 50%; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; margin: 4px auto 0; }
.onb-badge .ic { width: 30px; height: 30px; }
.onb-line { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0 0 4px; }
.intent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.intent-row-label { font-weight: 700; }
/* v10: feedback card */
.nav-menu-dropdown button.nav-menu-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: #0f1420; cursor: pointer; font: inherit; font-size: 14px; }
.nav-menu-dropdown button.nav-menu-item:hover { background: #f3f5f9; }
.fb-sheet { position: fixed; z-index: 85; left: 12px; right: 12px; bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; max-width: 460px; max-height: calc(100vh - var(--bottom-h) - 90px); overflow: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 34px rgba(0, 45, 100, .18); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) { .fb-sheet { bottom: 24px; right: 24px; left: auto; width: 420px; } }
.fb-anim { animation: fbUp .28s ease-out; }
@keyframes fbUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fb-anim { animation: none !important; } }
.fb-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fb-title { font-family: var(--font-head); font-size: 19px; margin: 2px 40px 2px 0; }
.fb-types { gap: 6px; }
.fb-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.fb-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 1.5px solid transparent; border-radius: 14px; background: none; color: var(--muted); cursor: pointer; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.fb-face .fb-face-ic { width: 38px; height: 38px; }
.fb-face:hover { color: var(--blue); background: var(--blue-50); }
.fb-face.on { color: var(--blue); background: var(--blue-50); border-color: var(--blue); }
.fb-face:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fb-label { font-weight: 700; font-size: 14px; }
.fb-sheet textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; min-height: 72px; }
.fb-avg { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--blue); min-width: 64px; text-align: center; }
.fb-bars { display: flex; flex-direction: column; gap: 6px; }
.fb-bar-row { display: grid; grid-template-columns: 20px 92px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fb-bar-row b { color: var(--text); text-align: right; }
.fb-bar { height: 8px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; }
.fb-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.fb-item-face { color: var(--blue); display: inline-flex; }
.fb-item-face .ic { width: 26px; height: 26px; }
/* v10: deal reviews */
.avatar-xs { width: 22px; height: 22px; font-size: 10px; vertical-align: middle; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.ic.star-on { color: #F5A524; fill: #F5A524; }
.ic.star-off { color: #CBD3DF; fill: none; }
.rate-card { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--blue-50); }
.rate-card-title { font-weight: 800; font-family: var(--font-head); color: var(--text); }
.rate-stars { display: flex; gap: 4px; }
.rate-star { width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; color: #B8C2D1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rate-star .ic { width: 30px; height: 30px; }
.rate-star:hover, .rate-star.on { color: #F5A524; }
.rate-star:hover .ic, .rate-star.on .ic { fill: #F5A524; }
.rate-star:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.rate-stars-lg { justify-content: center; margin: 4px 0 6px; }
.rate-card .rate-star:hover ~ .rate-star .ic { fill: none; }
.prof-ratings { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 14px; color: var(--text); text-decoration: none; }
.prof-ratings .ic { width: 16px; height: 16px; }
.prof-ratings .dot-sep { color: var(--muted); }
.prof-rating { font-weight: 600; }
.seller-stars { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; vertical-align: middle; }
.seller-stars .ic { width: 13px; height: 13px; }
.review-filter { margin-bottom: 10px; }
.review-card .card-body { gap: 8px; }
.review-role { font-size: 11px; }
.review-meta { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.review-meta a { color: inherit; font-weight: 600; }
.review-reply { border-left: 3px solid var(--blue-100); padding: 4px 0 4px 10px; }
.review-reply-head { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.review-reply-form textarea { min-height: 70px; }

/* ---------- v11: deal safety, shipping, policy, appeals ---------- */
details.safety-note { padding: 0; }
details.safety-note > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 12px; flex-wrap: wrap; }
details.safety-note > summary::-webkit-details-marker { display: none; }
details.safety-note > summary .ic { width: 18px; height: 18px; flex: none; color: #005CB9; }
details.safety-note > summary b { display: inline; margin: 0; }
details.safety-note .safety-line { flex: 1; min-width: 0; }
details.safety-note .safety-more { color: #005CB9; font-weight: 600; text-decoration: underline; }
details.safety-note .safety-chev { margin-left: auto; transition: transform .15s; }
details.safety-note[open] .safety-chev { transform: rotate(180deg); }
details.safety-note .safety-body { padding: 0 12px 10px 36px; }
details.safety-note .safety-body b { display: block; margin: 6px 0 2px; }
details.safety-note .safety-body ul { margin: 0; padding-left: 18px; }
details.safety-note .safety-body li { margin: 2px 0; }
details.safety-note.compact > summary { padding: 8px 10px; }
.handover { border-top: 1px solid rgba(0,0,0,.08); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.handover .ho-q { font-weight: 600; }
.handover .ho-title { display: flex; align-items: center; gap: 6px; }
.handover .ho-title .ic { width: 18px; height: 18px; color: #005CB9; }
.handover .ho-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.handover .ho-row.ok { color: #065f46; }
.handover .ho-row .ic { width: 16px; height: 16px; flex: none; }
.handover .ho-pick, .handover .ho-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.handover .ho-pick .btn, .handover .ho-actions .btn { flex: 1; min-width: 130px; justify-content: center; }
.handover .tracking-form { gap: 6px; }
.track-link { font-weight: 700; color: #005CB9; word-break: break-all; display: inline-flex; align-items: center; gap: 4px; }
.track-num { word-break: break-all; }
.deal-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 8px; }
.deal-foot .deal-cancel { margin: 0; }
.deal-foot .btn-danger-text, .deal-reported { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.reason-list { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.reason-list legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.reason-opt { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-weight: 500; }
.reason-opt:has(input:checked) { border-color: #005CB9; background: #EDF5FD; }
.reason-opt input { margin: 0; accent-color: #005CB9; }
.policy-summary { border: 1px solid rgba(0,92,185,.25); background: #EDF5FD; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.policy-summary-head { display: flex; align-items: center; gap: 6px; }
.policy-summary-head .ic, .policy-card .h2 .ic { width: 18px; height: 18px; color: #005CB9; }
.policy-card .h2 { display: flex; align-items: center; gap: 8px; }
.policy-points { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.policy-points li { margin: 3px 0; }
.policy-agree { font-weight: 600; }
.ack-row.ack-need { outline: 2px solid #FC1618; outline-offset: 2px; border-radius: 8px; }
.form-reminder { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1e3a8a; margin: 4px 0; }
.form-reminder .ic { color: #005CB9; flex: none; }
.terms-tagline { margin: 4px 0 8px; }
.policy-sections { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.policy-sec { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; background: #fff; scroll-margin-top: 70px; }
.policy-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.policy-sec > summary::-webkit-details-marker { display: none; }
.policy-sec .ps-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.policy-sec .ps-title { font-weight: 700; }
.policy-sec .ps-sum { font-size: 13px; color: #555; }
.policy-sec .ps-chev { flex: none; transition: transform .15s; color: #005CB9; }
.policy-sec[open] .ps-chev { transform: rotate(180deg); }
.policy-sec .ps-body { padding: 0 12px 12px; font-size: 14px; line-height: 1.5; }
.policy-sec .ps-body h3 { font-size: 15px; margin: 12px 0 4px; }
.policy-sec .ps-body ul { padding-left: 20px; margin: 4px 0; }
.soon-badge { display: inline-block; background: #D8000F; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 2px 8px; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.appeal-box { display: flex; flex-direction: column; gap: 8px; }
.appeal-box > .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.appeal-status .post-text { margin-top: 4px; }
.adm-msg { border-bottom: 1px solid rgba(0,0,0,.06); padding: 6px 0; font-size: 14px; }
.notice-page .stack > p, .notice-page p { margin: 0; }

/* v13c: home greeting */
.home-greet { margin: 4px 0 12px; }
.home-greet-title { font-family: var(--font-head); font-size: 24px; line-height: 1.2; margin: 0 0 8px; color: var(--text); }
.home-greet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.home-greet-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* ---------- v14: video posts, Activity, Go Live coming soon ---------- */
.composer-soon { background: var(--bg-soft); color: var(--muted); cursor: default; }
.composer-soon:hover { background: var(--bg-soft); }
.composer-soon .soon-badge { margin-left: 2px; }
.nav-menu-soon { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; color: var(--muted); cursor: default; }
.pc-video { margin-top: 2px; }
.pc-video-ready { display: flex; align-items: center; gap: 10px; }
.pc-video-thumb { position: relative; width: 96px; height: 96px; background: #0f1420; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 12px; overflow: hidden; }
.pc-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pc-video-dur { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; }
.pc-video-dur .ic { width: 10px; height: 10px; }
.pc-video-progress .thumb-x { position: static; }
.upload-bar.is-busy span { width: 40% !important; animation: pv-busy 1.2s ease-in-out infinite; }
@keyframes pv-busy { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .upload-bar.is-busy span { animation: none; width: 100% !important; opacity: .6; } }
.feed-video { position: relative; width: 100%; max-height: 72vh; background: #0b0f18; overflow: hidden; }
.feed-video video { width: 100%; height: 100%; max-height: 72vh; object-fit: contain; display: block; cursor: pointer; background: #0b0f18; }
.fv-btn { position: absolute; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fv-btn .ic { width: 18px; height: 18px; }
.fv-sound { right: 10px; bottom: 10px; }
.fv-full { right: 54px; bottom: 10px; }
.fv-play { left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); }
.fv-play .ic { width: 26px; height: 26px; }
.fv-dur { position: absolute; left: 10px; bottom: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 720px) { .video-grid { grid-template-columns: repeat(4, 1fr); } }
.video-tile { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #0b0f18; border: 0; padding: 0; cursor: pointer; color: #fff; text-decoration: none; }
.video-tile img, .video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tile-kind { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.6); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.video-tile-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.video-tile-play .ic { width: 18px; height: 18px; }
.video-tile-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.video-tile-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 12px; font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.video-tile .new-video-badge.on-video { position: absolute; right: 6px; top: 6px; }
.video-modal-player { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; display: block; margin-top: 30px; }
.btn-activity { display: inline-flex; align-items: center; gap: 6px; }
.act-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.act-back { display: inline-flex; color: var(--text); }
.act-private { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.act-range { display: flex; gap: 6px; flex-wrap: wrap; }
.act-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.act-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--text); font: inherit; min-width: 0; }
.act-tile b { font-size: 20px; line-height: 1.1; }
.act-tile span:last-child { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.act-tile-ic .ic { width: 16px; height: 16px; color: var(--muted); }
.act-tile.on { border-color: var(--blue); background: var(--blue-50); }
.act-tile.on .act-tile-ic .ic, .act-tile.on b { color: var(--blue); }
.act-chart-wrap { position: relative; padding-top: 16px; }
.act-chart { width: 100%; height: 160px; display: block; }
.act-bar { fill: var(--blue); }
.act-axis { stroke: var(--border); stroke-width: 2; }
.act-chart-max { position: absolute; top: 0; left: 0; font-size: 11px; }
.act-chart-x { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; }
.act-note, .act-split { font-size: 12px; }
.act-empty-range { padding: 28px 10px; }
.act-filters { margin: 0 0 10px; }
.act-count { opacity: .7; font-weight: 400; margin-left: 2px; }
.act-list { display: flex; flex-direction: column; }
.act-list .empty { margin: 0; }
.act-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.act-row:last-child { border-bottom: 0; }
.act-row:hover { background: var(--bg-soft); }
.act-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--blue-50); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.act-ic .ic { width: 16px; height: 16px; }
.act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-text { font-size: 14px; overflow-wrap: anywhere; }
.act-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-meta { font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.act-cat { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); }
.act-cat-buying { background: #EDF5FD; color: #004E9E; }
.act-cat-selling { background: #EAF7EF; color: #11683A; }
.act-cat-trading { background: #FFF4E5; color: #8A4B00; }
.act-cat-social { background: #F3EEFD; color: #5B34A8; }
.act-row .item-thumb { flex: 0 0 auto; }
@media (max-width: 420px) { .act-tile b { font-size: 17px; } .act-tile { padding: 8px 2px; } }
.coming-soon-page h1 { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }