/* Sttchr web storefront - shared design system (mirrors the app) */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --grouped-bg: #f2f2f7;
  --surface: #ffffff;
  --fill: #f0f0f3;
  --fill-strong: #e0e1e6;
  --text: #000000;
  --text-2: #3c3c43;
  --muted: #60646c;
  --faint: #8a8e96;
  --line: #e5e5ea;
  --accent: #007aff;     /* primary CTA / active (brand blue, matches the app) */
  --accent-strong: #0a84ff; /* hover / pressed accent */
  --pink: #ff2d55;       /* likes / follows */
  --green: #1a7f37;
  --sew: #30d158;        /* "Sew now" / primary pattern CTA (matches the app) */
  --save: #f0b400;       /* "Save now" yellow, matches the app Brand.save */
  --orange: #d4880a;
  --red: #cf222e;
  --radius-pill: 999px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 6px;
  --maxw: 1040px;
  --tabbar-h: 56px;
  /* Match the iOS app: SwiftUI .font(.system) renders San Francisco (SF Pro).
     This stack resolves to SF on Apple devices and falls back gracefully. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  /* Apple uses SF Pro Display for large headlines (>=20px), SF Pro Text for body. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); }
body {
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

/* Keyboard focus: a visible ring on interactive elements, shown only for
   keyboard navigation (not mouse clicks). Mouse/touch users see nothing; this
   restores the accessibility we'd otherwise lose to `outline: none`. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- top header ---- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line);
}
.topbar .inner { max-width: var(--maxw); margin: 0 auto; height: 54px; display: flex;
  align-items: center; gap: 14px; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; }
.brand .scissors { width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-size: 14px; }
.topbar .spacer { flex: 1; }
.topbar .link { font-size: 14px; font-weight: 600; color: var(--muted); }
.topbar .link.active { color: var(--text); }

/* ---- layout ---- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 40px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.section-head h2 { font-size: 20px; font-weight: 700; margin: 0; }
.section-head .sub { font-size: 13px; color: var(--faint); margin: 2px 0 0; }

/* ---- pattern grid (boutique: fewer, bigger cards; roomy vertical metadata) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 20px; }
.card { display: block; position: relative; }
.card .cover-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--fill-strong); }
.card .cover { width: 100%; height: 100%; object-fit: cover; background: var(--fill-strong); display: block; }
/* Bundle cover = a collage of the included patterns' covers. Fills its square
   wrap; 2px seams show the container background through the gaps. */
.bc-fill { position: absolute; inset: 0; }
.bc-row { display: flex; flex-direction: row; gap: 2px; }
.bc-col { display: flex; flex-direction: column; gap: 2px; }
.bc-cell { flex: 1; min-width: 0; min-height: 0; }
.bc-tile { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--fill-strong); }
.bc-col > .bc-cell { display: flex; }
.bc-host { position: relative; overflow: hidden; }

/* Bundle editor: pattern picker + live savings readout */
.bundle-picker { display: flex; flex-direction: column; gap: 8px; }
.bundle-pick { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md);
  border: 1px solid var(--line); cursor: pointer; background: var(--bg); }
.bundle-pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.bundle-pick input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.bundle-pick .bp-cover { width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  background: var(--fill-strong); flex: 0 0 auto; }
.bundle-pick .bp-meta { flex: 1; min-width: 0; }
.bundle-pick .bp-title { font-size: 15px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle-pick .bp-price { font-size: 13px; color: var(--muted); }
.bundle-savings { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.bundle-savings .save-amt { color: var(--green); font-weight: 700; }

/* Bundle detail: "what's inside" list of the included patterns */
.bundle-list { display: flex; flex-direction: column; gap: 10px; }
.bundle-row { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bundle-row img, .bundle-thumb-empty { width: 46px; height: 46px; border-radius: 9px; object-fit: cover;
  background: var(--fill-strong); flex: 0 0 auto; }
.bundle-row .br-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bundle-row .br-title { font-size: 15px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle-row .br-sub { font-size: 12.5px; color: var(--muted); }
.bundle-row .br-price { font-size: 14px; font-weight: 600; color: var(--muted); flex: 0 0 auto; }
/* Inline reel preview that crossfades in over the cover on hover (desktop). */
.card .cover-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: #111; z-index: 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.card .cover-reel.on { opacity: 1; }
/* Little play badge shown only on listings that have a video. */
.card .card-play { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(0,0,0,.5); display: grid; place-items: center; color: #fff; pointer-events: none; }
.card .card-play svg { width: 15px; height: 15px; margin-left: 1px; }
.card .title { font-size: 15px; font-weight: 600; margin: 11px 0 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--text); }
/* Star rating + review count (shown only when the listing has reviews). */
.card .crate { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.card .crate .star { width: 14px; height: 14px; color: var(--orange); flex: none; }
.card .crate .ravg { font-weight: 600; color: var(--text-2); }
.card .cprice { font-size: 16px; font-weight: 700; margin-top: 5px; }
.card .cprice.free { color: var(--green); }
.card .cprice.soon { font-weight: 600; color: var(--muted); }
/* "Owned" badge on cards for patterns the signed-in user has purchased. */
.card .owned-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--green);
  color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); pointer-events: none; }
/* "Processing" badge on listings awaiting admin approval (not yet purchasable). */
.card .card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(0,0,0,.62);
  color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); pointer-events: none; }
.price { font-size: 13px; font-weight: 600; color: var(--text-2); }
.price.free { color: var(--green); }

/* ---- badges / pills ---- */
.badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); }
.badge.beginner { background: rgba(26,127,55,.14); color: var(--green); }
.badge.easy { background: rgba(10,126,164,.14); color: #0a7ea4; }
.badge.intermediate { background: rgba(212,136,10,.16); color: var(--orange); }
.badge.advanced { background: rgba(207,34,46,.14); color: var(--red); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--fill); color: var(--text);
  border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; border: 0; }
.pill.solid { background: var(--text); color: var(--bg); }

/* ---- creator rail ---- */
.rail { display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.crcard { flex: 0 0 auto; width: 76px; text-align: center; }
.crcard .av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--fill-strong);
  margin: 0 auto; }
.crcard .nm { font-size: 12px; color: var(--text-2); margin-top: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border: 0; border-radius: var(--radius-md); background: var(--accent); color: #fff; font-size: 16px;
  font-weight: 700; padding: 0 20px; width: 100%; }
.btn:disabled { opacity: .5; }
.btn.secondary { background: var(--fill); color: var(--accent); }
.btn.secondary.on { background: var(--accent); color: #fff; }   /* active toggle (e.g. Stats view open) */
.btn.sew { background: var(--sew); border-color: var(--sew); color: #fff; }  /* "Sew now" — matches the app */
.btn.small { height: 38px; font-size: 14px; width: auto; padding: 0 16px; }
/* "Have a code? Redeem" affordance under the pattern CTA — quiet text link. */
.linklike { background: none; border: 0; color: var(--accent); font-size: 14px; font-weight: 600;
  padding: 10px 4px; width: 100%; cursor: pointer; }

/* ---- creator header ---- */
.banner { height: 150px; border-radius: var(--radius-lg); background: var(--fill-strong); object-fit: cover;
  width: 100%; }
/* TikTok-style desktop profile: avatar on the left, identity block beside it. */
.cr-head { display: flex; align-items: flex-start; gap: 28px; margin-top: -44px; text-align: left; }
.cr-meta { flex: 1; min-width: 0; padding-top: 50px; }

/* Profile preview overlay (seller "Preview profile") */
.pp-scrim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(17,17,22,.34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.pp-scrim.open { opacity: 1; pointer-events: auto; }
.pp-card { position: relative; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--radius-lg); transform: translateY(10px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.pp-scrim.open .pp-card { transform: none; }
.pp-card .banner { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0; }
.pp-card .cr-head, .pp-card .section-head, .pp-card .grid { padding-left: 16px; padding-right: 16px; }
.pp-card .grid { padding-bottom: 18px; }
.pp-x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; }
.pp-flag { position: absolute; top: 13px; left: 13px; z-index: 2; background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 9px; border-radius: var(--radius-pill); }
@media (prefers-reduced-motion: reduce) { .pp-scrim, .pp-card { transition: none; } }
.cr-head .av { width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--bg); object-fit: cover;
  background: var(--fill-strong); flex: none; }
.cr-head .nm { font-size: 24px; font-weight: 700; margin: 0; }
.cr-head .handle { font-size: 15px; color: var(--muted); margin-top: 2px; }
.cr-head .bio { font-size: 14px; color: var(--text-2); max-width: 560px; margin: 14px 0 0; line-height: 1.45; }
.stats { display: flex; justify-content: flex-start; gap: 26px; margin-top: 12px; }
.stats > div { display: flex; align-items: baseline; gap: 6px; }
.stats .v { font-size: 17px; font-weight: 700; } .stats .l { font-size: 14px; color: var(--muted); }
/* Creator profile: follow button, Reels/Shop tabs, reels grid */
.cr-actions { display: flex; gap: 10px; margin-top: 16px; }
.cr-follow { min-width: 150px; padding: 10px 24px; border: 0;
  border-radius: var(--radius-md); background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.cr-follow.on { background: var(--fill); color: var(--text); }
.cr-share { width: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: var(--radius-md);
  cursor: pointer; display: grid; place-items: center; }
.cr-share svg { width: 18px; height: 18px; }
/* Tab row holds the Shop/Reels tabs and a Latest/Popular sort toggle on the right. */
.cr-tabrow { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin: 22px 0 0; }
.cr-tabs { display: flex; gap: 28px; }
.cr-tabs button { border: 0; background: none; padding: 12px 2px; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; }
.cr-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.cr-tabs button svg { width: 18px; height: 18px; }
.cr-sort { display: flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: var(--radius-md); }
.cr-sort button { border: 0; background: none; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted);
  border-radius: calc(var(--radius-md) - 3px); cursor: pointer; }
.cr-sort button.on { background: var(--accent); color: #fff; }
.cr-reelgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3px; }
.cr-reelgrid .empty { grid-column: 1 / -1; }
.cr-reel { position: relative; aspect-ratio: 9 / 16; background: #000; overflow: hidden; display: block;
  border-radius: 4px; }
.cr-reel img, .cr-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-reel video { opacity: 0; transition: opacity .35s ease; }
.cr-reel video.on { opacity: 1; }
.cr-reel-play { position: absolute; bottom: 6px; left: 7px; color: #fff; display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.cr-reel-play svg { width: 14px; height: 14px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.cr-pin { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
  font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: var(--radius-pill); }
@media (min-width: 720px) {
  .cr-reelgrid { grid-template-columns: repeat(4, 1fr); }
}
/* Narrow screens + the 420px "Preview profile" popup: stack avatar over identity. */
@media (max-width: 560px) {
  .cr-head { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .cr-meta { padding-top: 8px; width: 100%; }
  .cr-head .av { width: 88px; height: 88px; }
  .stats { justify-content: center; }
  .cr-actions { justify-content: center; }
  .cr-head .bio { margin-left: auto; margin-right: auto; }
}
.pp-card .cr-head { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.pp-card .cr-meta { padding-top: 8px; width: 100%; }
.pp-card .cr-head .av { width: 88px; height: 88px; }
.pp-card .stats, .pp-card .cr-actions { justify-content: center; }
.pp-card .cr-head .bio { margin-left: auto; margin-right: auto; }

/* ---- pattern detail ---- */
.detail-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1.05;
  background: var(--fill-strong); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero .scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.detail-hero .sub { position: absolute; left: 16px; bottom: 14px; color: #fff; font-size: 15px; font-weight: 600; }
.byline { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.byline .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fill-strong); }
.byline .nm { font-weight: 700; font-size: 15px; } .byline .vs { font-size: 12px; color: var(--muted); }
.about h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.about p { font-size: 15px; color: var(--text-2); line-height: 1.5; margin: 0; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag { background: var(--fill); color: var(--text-2); border-radius: var(--radius-pill); padding: 6px 12px;
  font-size: 13px; }
.metarow { display: flex; gap: 18px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  background: var(--bg); border-top: 1px solid var(--line); padding: 12px 16px;
  padding-bottom: calc(12px); }
.sticky-cta .inner { max-width: 560px; margin: 0 auto; }

/* ---- responsive nav: floating logo + icons on web, bottom tabs on phones ---- */
.topbar { display: none; }   /* legacy banner, no longer rendered */
.floatnav { display: none; } /* mobile: bottom tab bar only */
.floatlogo { display: none; }
@media (min-width: 760px) {
  .floatlogo { display: block; position: fixed; top: 12px; left: 20px; z-index: 51;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700;
    font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: #0b0b0f; }
  .floatlogo img { height: 30px; width: auto; display: block; }
}
@media (min-width: 760px) {
  .floatnav { display: flex; position: fixed; top: 14px; right: 16px; z-index: 51; gap: 8px; }
  .floatnav a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.14); color: var(--muted); transition: color .15s ease, background .15s ease; }
  .floatnav a:hover { color: var(--text); }
  .floatnav a.active { background: var(--accent); color: #fff; }
  .floatnav svg { width: 22px; height: 22px; }
  .tabbar { display: none !important; }
  body { padding-bottom: 0; }
  /* Content sits to the right of the fixed left sidebar (220px). */
  body:not(.feed) { padding-left: 220px; }
  .page { padding-top: 24px; }
  /* Clear the fixed top-right "Get app" pill / top-left logo so they don't
     overlap a full-width profile banner (creator page + Sell dashboard preview).
     The .pp-card popup keeps its own margin:0 override, so it's unaffected. */
  .page > .banner:first-child, #dashProfileHeader .banner { margin-top: 44px; }
  body.feed .feed-wrap { top: 0; bottom: 0; }
  body.feed .feed-top { display: none; }
  .wall { left: 220px; }
  .sticky-cta { bottom: 0; left: 220px; }
  .search-modal { left: 220px; }
}

/* ---- bottom tab bar ---- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom: env(safe-area-inset-bottom,0px); background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
.tabbar a.active { color: var(--accent); }
.tabbar svg { width: 24px; height: 24px; }

/* ---- states ---- */
.status { font-size: 13px; color: var(--muted); min-height: 18px; }
.status.err { color: var(--red); } .status.ok { color: var(--green); }
.skeleton { background: linear-gradient(90deg,var(--fill) 25%,var(--fill-strong) 37%,var(--fill) 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--radius-md); }
@keyframes sk { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
.empty { text-align: center; color: var(--faint); padding: 40px 0; }

/* ---- combined home: reels + shop on one page ---- */
body.home { background: #000; }
.home-grid { display: flex; flex-direction: column; }
.reelpane { position: relative; background: #000; height: 64vh; overflow-y: scroll;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.reelpane::-webkit-scrollbar { display: none; }
.reelpane .reel { height: 64vh; }
.shoppane { background: var(--bg); color: var(--text); min-height: 40vh; }
@media (min-width: 900px) {
  .home-grid { flex-direction: row; height: 100vh; }
  .reelpane { flex: 0 0 clamp(360px, 32vw, 460px); height: 100vh; }
  .reelpane .reel { height: 100vh; }
  .shoppane { flex: 1; height: 100vh; overflow-y: auto; }
  .shoppane .page { padding-top: 64px; }
}

/* ---- shop controls (search / filters / sort) ---- */
.search { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 14px;
  font-size: 15px; font-family: inherit; margin: 0 0 12px; background: var(--surface); }
.search:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.sortrow { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sortsel { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px;
  font-family: inherit; background: var(--surface); }
/* collapsed filter: one button + dropdown panel holding the chips */
.filterbar { position: relative; display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filter-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text); padding: 8px 12px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.filter-btn svg { width: 16px; height: 16px; }
.filter-btn.on { border-color: var(--accent); color: var(--accent); }
.filter-count { background: var(--accent); color: #fff; border-radius: var(--radius-pill); min-width: 18px;
  padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center; }
.filter-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45;
  width: min(340px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 14px; }
.filter-panel .chips { margin-bottom: 0; }
.filter-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; color: var(--muted); }
.filter-clear { background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; }
.filter-done { width: 100%; margin-top: 14px; border: 0; border-radius: var(--radius-md);
  background: var(--accent); color: #fff; padding: 11px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; }

/* card social proof + creator follower count */
.csocial { display: flex; gap: 12px; margin-top: 3px; }
.cstat { font-size: 12px; color: var(--muted); font-weight: 600; }
.crcard .cf { font-size: 11px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* reel controls + active engagement states */
.mutebtn { position: absolute; top: 14px; right: 14px; z-index: 6; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 16px; cursor: pointer; }
.reelpane .rprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); z-index: 4; }
.reelpane .rprog i { display: block; height: 100%; width: 0; background: #fff; }
.reel .rail2 .ract.on { color: var(--pink); }
/* .act sets an explicit color (#fff mobile / #161823 desktop), which blocks the
   .on pink from inheriting into the svg's currentColor — re-assert it on .act. */
.reel .rail2 .ract.on .act { color: var(--pink); }
/* like/save carry outline + filled Ionicons variants; .on swaps which shows
   (mirrors the RN heart/heart-outline · bookmark/bookmark-outline conditional).
   display:contents keeps the svg a direct grid child of .act for sizing/centering. */
.reel .rail2 .act .ic-off, .reel .rail2 .act .ic-on { display: contents; }
.reel .rail2 .act .ic-on { display: none; }
.reel .rail2 .ract.on .act .ic-off { display: none; }
.reel .rail2 .ract.on .act .ic-on { display: contents; }
.swipehint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: rgba(255,255,255,.9);
  font-size: 13px; font-weight: 600; z-index: 5; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  animation: bob 1.6s ease-in-out infinite; }
.swipehint.hide { display: none; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (min-width: 900px) { .swipehint { display: none; } }

/* accessibility */
a:focus-visible, button:focus-visible, .chip:focus-visible, .card:focus-visible, .floatnav a:focus-visible,
.tabbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .swipehint { animation: none; }
  .floatnav a, .sales-chart .bar { transition: none; } }

/* ---- explore feed (dark, full-screen) ---- */
body.feed { background: #000; color: #fff; padding-bottom: 0; }
.feed-wrap { position: fixed; inset: 0; bottom: var(--tabbar-h); overflow-y: scroll; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; }
.reel { position: relative; height: 100%; scroll-snap-align: start; display: grid; place-items: center;
  background: #000; }
/* The "stage" bounds the video + its overlays. Full-bleed on phones; a centered
   9:16 column on desktop so the caption + actions sit on the video (TikTok web). */
.rstage { position: absolute; inset: 0; overflow: hidden; }
.reel video, .reel img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,.85)); }
.reel .byline2 { position: absolute; left: 16px; right: 88px; bottom: 18px; color: #fff; }
.reel .byline2 .nm { font-size: 16px; font-weight: 700; }
.reel .byline2 .cap { font-size: 14px; margin-top: 4px; opacity: .95; }
.reel .byline2 .music { font-size: 13px; opacity: .85; margin-top: 6px; }
.reel .buyrow { margin-top: 10px; display: block; }
/* Feed CTA colors mirror the RN reel CTA: blue "Make now", yellow "Save now". */
.reel .cta-make { background: var(--accent); border-color: var(--accent); color: #fff; }
.reel .cta-save { background: var(--save); border-color: var(--save); color: #1c1c1e; }
/* Full-width CTA like the app: the button spans the reel, and the rail floats
   above it (byline goes full width, rail lifts to clear the button). */
.reel .buyrow .btn { width: 100%; }
.reel.has-cta .byline2 { right: 16px; }
.reel.has-cta .rail2 { bottom: 84px; }
/* Single feed-level mute toggle, top-left, matching the RN feed. */
.feed-mute { position: fixed; top: 14px; left: 12px; z-index: 6; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; cursor: pointer; }
.feed-mute svg { width: 22px; height: 22px; }
.reel .rail2 { position: absolute; right: 12px; bottom: 24px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; }
.reel .rail2 .avwrap { position: relative; width: 48px; height: 48px; margin-bottom: 8px; display: block; }
.reel .rail2 .av { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover;
  background: #333; }
.reel .rail2 .follow { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--pink); color: #fff; display: grid;
  place-items: center; }
.reel .rail2 .follow svg { width: 14px; height: 14px; }
.reel .rail2 .follow.on { display: none; }   /* match the app: hide once following */
.reel .rail2 .ract { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff;
  cursor: pointer; }
/* Plain icons (no filled circle), matching the app. A drop-shadow keeps the
   white icons legible over light video frames. */
.reel .rail2 .act { width: 50px; height: 50px; display: grid; place-items: center; color: #fff; }
.reel .rail2 .act svg { width: 34px; height: 34px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.5)); }
/* Icon-only rail (matches the RN app): hide the text labels so the icons stack
   tighter. The like-count .lbl stays in the DOM (JS updates it) but isn't shown. */
.reel .rail2 .lbl { display: none; }

/* TikTok-web left sidebar menu (desktop), site-wide. Light on content pages,
   dark on the Explore feed. Centered 9:16 video stage on Explore. */
.feedside { display: none; }
.feednav { display: none; }   /* shown only on desktop feed (below) */
@media (min-width: 760px) {
  .feedside { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; top: 0; bottom: 0;
    width: 220px; z-index: 52; padding: 16px 12px; background: #fff; border-right: 1px solid var(--line); }
  .feedside .fs-logo { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 28px;
    color: #0b0b0f; padding: 6px 12px 14px; line-height: 1; }
  .feedside .fs-logo img { height: 26px; width: auto; display: block; }
  .fs-link { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px;
    color: var(--text-2); font-size: 17px; font-weight: 600; background: none; border: 0; width: 100%;
    text-align: left; cursor: pointer; }
  .fs-link svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--muted); }
  .fs-link:hover { background: var(--fill); color: var(--text); }
  .fs-link.active { color: var(--text); }
  .fs-link.active svg { color: var(--pink); }
  /* Explore feed on desktop = TikTok web: LIGHT page + light sidebar, with a
     centered dark video card and a gray action rail on the page beside it.
     (Mobile keeps the full-bleed dark stage below this breakpoint.) */
  body.feed { background: #fff; color: var(--text); }
  body.feed .reel { background: transparent; }
  body.feed .feed-wrap { left: 0; background: #fff; }
  .rstage { position: relative; inset: auto; height: calc(100% - 24px); aspect-ratio: 9 / 16; width: auto;
    max-width: 100%; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 6px 24px rgba(0,0,0,.16); }
  .reel .byline2 { right: 16px; }
  /* Action rail: gray circular buttons + counts, hugging the card's right edge.
     Card height = (100% - 24px) of the 100vh reel; half its width = height*9/16/2. */
  .reel .rail2 { left: 50%; right: auto; top: auto; bottom: 20px; gap: 18px;
    transform: translateX(calc((100vh - 24px) * 0.281 + 22px)); }
  .reel .rail2 .ract { color: var(--text); gap: 5px; }
  .reel .rail2 .act { width: 48px; height: 48px; border-radius: 50%; background: var(--fill); color: #161823; }
  .reel .rail2 .act svg { width: 24px; height: 24px; filter: none; }
  .reel .rail2 .ract:hover .act { background: var(--fill-strong); }
  .reel .rail2 .ract.on .act { color: var(--pink); }
  .reel .rail2 .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
  .reel .rail2 .avwrap { margin-bottom: 6px; }
  .reel .rail2 .av { border-color: var(--fill-strong); }
  /* Up/down feed navigation chevrons pinned to the right edge of the viewport (TikTok web). */
  .feednav { display: flex; flex-direction: column; gap: 12px; position: fixed; z-index: 6; top: 50%;
    right: 20px; transform: translateY(-50%); }
  .fn-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--fill); color: #161823;
    display: grid; place-items: center; cursor: pointer; }
  .fn-btn:hover { background: var(--fill-strong); }
  .fn-btn svg { width: 22px; height: 22px; }
  .fn-up svg { transform: rotate(180deg); }
}

/* ---- comments push-to-side panel (TikTok web) ---- */
.comments-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 384px; max-width: 100%; z-index: 60;
  background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: -8px 0 30px rgba(0,0,0,.08); }
body.comments-open .comments-panel { transform: none; }
.cm-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.cm-title { font-size: 17px; font-weight: 700; }
.cm-x { width: 34px; height: 34px; border: 0; background: var(--fill); border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text); }
.cm-x svg { width: 18px; height: 18px; }
.cm-list { flex: 1; overflow-y: auto; padding: 10px 16px; }
.cm-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 0; }
.cm-row { display: flex; gap: 10px; padding: 10px 0; align-items: flex-start; }
.cm-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--fill-strong); flex: 0 0 auto; }
.cm-body { flex: 1; min-width: 0; }
.cm-name { font-size: 13px; font-weight: 600; color: var(--muted); }
.cm-text { font-size: 15px; color: var(--text); margin: 2px 0 4px; line-height: 1.35; overflow-wrap: anywhere; }
.cm-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); }
.cm-reply, .cm-del { border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; }
.cm-del { color: var(--red); }
.cm-like { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); cursor: pointer; flex: 0 0 auto; padding: 2px 0; }
.cm-like svg { width: 18px; height: 18px; }
.cm-like.on { color: var(--pink); }
/* outline vs filled Ionicons heart, swapped by .on (matches the RN comments sheet) */
.cm-like .ic-off, .cm-like .ic-on { display: contents; }
.cm-like .ic-on { display: none; }
.cm-like.on .ic-off { display: none; }
.cm-like.on .ic-on { display: contents; }
.cm-likes { font-size: 11px; }
.cm-compose { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cm-inputwrap { flex: 1; display: flex; align-items: center; background: var(--fill); border-radius: var(--radius-pill); padding: 0 14px; }
.cm-input { flex: 1; border: 0; background: none; outline: none; font-size: 14px; padding: 11px 0; color: var(--text); }
.cm-inicons { display: flex; gap: 10px; color: var(--muted); font-size: 16px; }
.cm-send { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.cm-send svg { width: 18px; height: 18px; }
.feed-wrap { transition: right .28s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 760px) {
  body.comments-open .feed-wrap { right: 384px; }
  body.comments-open .feednav { display: none; }
}
@media (max-width: 760px) { .comments-panel { width: 100%; } }
/* Pattern-listing "Comments" opener. */
.pt-comments { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 18px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; cursor: pointer; }
.pt-comments:hover { background: var(--fill); }
.pt-comments svg { width: 18px; height: 18px; }

/* Image crop popup (avatar / banner / cover) */
.crop-ov { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.crop-box { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.crop-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; text-align: center; }
.crop-stage { position: relative; overflow: hidden; background: #111; margin: 0 auto; touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 0 0 2px var(--accent); } /* clear crop-edge outline */
.crop-stage.round { border-radius: 50%; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; cursor: grab; user-select: none; -webkit-user-drag: none; }
/* faint rule-of-thirds guide to help align the subject */
.crop-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), #fff calc(33.33% - 0.5px), #fff calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(to right, transparent calc(66.66% - 0.5px), #fff calc(66.66% - 0.5px), #fff calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), #fff calc(33.33% - 0.5px), #fff calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.66% - 0.5px), #fff calc(66.66% - 0.5px), #fff calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.crop-guides { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.crop-caption { font-size: 12px; color: var(--text-2); line-height: 1.4; margin: 10px 2px 0; text-align: center; }
.crop-zoomrow { display: flex; align-items: center; gap: 10px; margin: 14px 2px 4px; color: var(--muted); }
.crop-zoom { flex: 1; accent-color: var(--accent); }
.crop-actions { display: flex; gap: 10px; margin-top: 12px; }
.crop-actions .btn { flex: 1; width: auto; }
.feed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center;
  gap: 22px; padding: 14px; }
.feed-top a { color: rgba(255,255,255,.6); font-weight: 600; font-size: 16px; }
.feed-top a.active { color: #fff; font-weight: 700; }
.feed-top .fsearch { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; color: #fff; }
.feed-top .fsearch svg { width: 22px; height: 22px; }

/* Search popup: dark, subtly fades in over the reel/page (TikTok-style) */
.search-modal { position: fixed; inset: 0; z-index: 56; overflow-y: auto;
  background: rgba(8, 8, 12, 0.94); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; transition: opacity .28s ease; }
.search-modal.open { opacity: 1; }
.search-modal .page { padding-top: 14px; transform: translateY(10px);
  transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.search-modal.open .page { transform: none; }
@media (prefers-reduced-motion: reduce) { .search-modal, .search-modal .page { transition: none; } }

/* Floating top-right search magnifier (all sizes) — replaces the side-menu item. */
.search-fab { display: grid; place-items: center; position: fixed; top: 12px; right: 14px; z-index: 53;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.search-fab:hover { color: var(--text); background: #fff; }
.search-fab svg { width: 22px; height: 22px; }

/* Floating top-right "Get app" pill (App Store), TikTok-style. White in both
   light pages and over the dark feed stage so it stays legible everywhere. */
.getapp { position: fixed; top: 14px; right: 16px; z-index: 53; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; color: #1c1c1e; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.14); border: 0.5px solid rgba(0,0,0,.06); }
.getapp:hover { background: #fff; }
.getapp svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px; }

/* Review queue: back link, reject-reason field, creator decline note */
.backlink { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px;
  font-weight: 600; margin-bottom: 10px; }
.backlink:hover { color: var(--text); }
.backlink svg { width: 18px; height: 18px; }
.rej-note { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13px; resize: vertical; font-family: inherit; background: var(--bg); }
.rej-note:focus { outline: none; border-color: var(--accent); }
.lc-reject { font-size: 13px; color: var(--red); margin-top: 4px; }
/* Dark theme inside the popup */
.search-modal .sr-header { background: transparent; }
.search-modal .sr-back, .search-modal .sr-field-ic { color: #fff; }
.search-modal .sr-field { background: rgba(255,255,255,.14); }
.search-modal .sr-field input { color: #fff; }
.search-modal .sr-field input::placeholder { color: rgba(255,255,255,.55); }
.search-modal .sr-clear { background: rgba(255,255,255,.25); color: #fff; }
.search-modal .sr-tabs { border-bottom-color: rgba(255,255,255,.16); }
.search-modal .sr-tabs button { color: rgba(255,255,255,.6); }
.search-modal .sr-tabs button.on { color: #fff; border-bottom-color: var(--accent); }
.search-modal .sr-count { background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.search-modal .sr-tabs button.on .sr-count { color: var(--accent); }
.search-modal .sr-section h3 { color: #fff; }
.search-modal .sr-recent { color: #fff; }
.search-modal .sr-recent svg { color: rgba(255,255,255,.6); }
.search-modal .sr-recent-x { color: rgba(255,255,255,.5); }
.search-modal .sr-pat-title, .search-modal .sr-pat-price { color: #fff; }
.search-modal .sr-creator { color: #fff; }
.search-modal .sr-creator-handle { color: rgba(255,255,255,.6); }
.search-modal .sr-creator-av, .search-modal .sr-pat-cover { background: rgba(255,255,255,.12); }
.search-modal .sr-empty { color: rgba(255,255,255,.6); }
.search-modal .sr-empty-t { color: #fff; }

/* ── Search page (mirrors the app's reels/patterns/creators search) ──────── */
.sr-header { display: flex; align-items: center; gap: 8px; padding: 4px 0 14px; position: sticky;
  top: 0; z-index: 5; background: var(--bg); }
.sr-back { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 0;
  background: none; color: var(--text); cursor: pointer; border-radius: 50%; }
.sr-back svg { width: 24px; height: 24px; }
.sr-field { flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  background: var(--fill); border-radius: var(--radius-pill); }
.sr-field-ic { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.sr-field input { flex: 1; border: 0; background: none; font-size: 16px; color: var(--text); outline: none; }
.sr-field input::placeholder { color: var(--faint); opacity: 1; }
.sr-clear { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--fill-strong);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }

.sr-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.sr-tabs button { flex: 1; border: 0; background: none; padding: 11px 0; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sr-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.sr-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--fill); border-radius: var(--radius-pill); padding: 1px 7px; }
.sr-tabs button.on .sr-count { color: var(--accent); }

.sr-section { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.sr-section h3 { font-size: 15px; font-weight: 700; margin: 0; }
.sr-clearall { border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 500; cursor: pointer; }
.sr-recent { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; border: 0;
  background: none; color: var(--text); font-size: 16px; cursor: pointer; text-align: left; }
.sr-recent svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.sr-recent > span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-recent-x { color: var(--faint); font-size: 18px; padding: 0 4px; }

.sr-reelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sr-reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-md); overflow: hidden;
  background: var(--fill-strong); display: block; }
.sr-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Inline reel preview that crossfades in over the poster on hover (desktop). */
.sr-reel-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease; }
.sr-reel-vid.on { opacity: 1; }
.sr-reel[data-rv] { cursor: pointer; }
.sr-reel-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.7)); }
.sr-reel-play { position: absolute; top: 7px; right: 7px; color: #fff; }
.sr-reel-play svg { width: 16px; height: 16px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sr-reel-by { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 8px; }
.sr-reel-av { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.3) center/cover no-repeat; flex: 0 0 auto; }
.sr-reel-nm { flex: 1; color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-reel-heart svg { width: 12px; height: 12px; color: rgba(255,255,255,.85); display: block; }

.sr-patgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.sr-pat { display: block; }
.sr-pat-cover { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); object-fit: cover; background: var(--fill-strong); }
.sr-pat-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--orange); margin-top: 6px; }
.sr-pat-rating span { color: var(--muted); font-weight: 400; }
.sr-pat-title { font-size: 14px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pat-price { font-size: 15px; font-weight: 700; margin-top: 2px; }
.sr-pat-price.free { color: var(--green); }
.sr-pat-price.soon { font-weight: 600; color: var(--muted); }

.sr-creatorlist { display: flex; flex-direction: column; }
.sr-creator { display: flex; align-items: center; gap: 12px; padding: 8px 2px; color: var(--text); }
.sr-creator-av { width: 44px; height: 44px; border-radius: 50%; background: var(--fill-strong) center/cover no-repeat; flex: 0 0 auto; }
.sr-creator-info { display: flex; flex-direction: column; min-width: 0; }
.sr-creator-nm { font-size: 16px; font-weight: 600; }
.sr-creator-handle { font-size: 13px; color: var(--muted); }

.sr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 56px 24px; color: var(--muted); }
.sr-empty svg { width: 34px; height: 34px; color: var(--faint); }
.sr-empty-t { font-size: 17px; font-weight: 600; color: var(--text); }
.sr-empty-s { font-size: 14px; }
.tabbar.dark { background: rgba(0,0,0,.92); border-top-color: rgba(255,255,255,.08); }
.tabbar.dark a { color: rgba(255,255,255,.6); }
.tabbar.dark a.active { color: #fff; }

/* ---- sign-in wall (full-screen, mirrors the app) ---- */
.wall { position: fixed; inset: 0; z-index: 40; background: #000; color: #fff; display: flex;
  flex-direction: column; padding: 28px; overflow-y: auto; }
.wall .tabs { display: flex; justify-content: center; gap: 28px; padding-top: 4px; }
.wall .tab { background: none; border: 0; color: rgba(255,255,255,.55); font-size: 17px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.wall .tab.on { color: #fff; font-weight: 700; }
.wall .tab .ul { width: 28px; height: 3px; border-radius: 2px; background: transparent; }
.wall .tab.on .ul { background: var(--accent); }
.wall .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 26px; max-width: 420px; margin: 0 auto; width: 100%; }
.wall .brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wall .brand .circle { width: 76px; height: 76px; border-radius: 50%; background: #fff;
  position: relative; overflow: hidden; }
.wall .brand .circle img { position: absolute; top: 50%; left: 50%; width: 116%; height: 116%;
  transform: translate(-50%, -50%); object-fit: contain; }
.wall .brand .name { font-size: 30px; font-weight: 800; }
.wall .headline { text-align: center; }
.wall .headline h2 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
.wall .headline p { color: rgba(255,255,255,.55); margin: 0; font-size: 15px; }
.wall .divider { display: flex; align-items: center; gap: 12px; width: 100%; color: rgba(255,255,255,.5);
  font-size: 13px; }
.wall .divider .ln { flex: 1; height: 1px; background: rgba(255,255,255,.22); }
.wall .social { display: flex; justify-content: center; gap: 40px; }
.wall .soc { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.55);
  font-size: 13px; background: none; border: 0; cursor: pointer; }
.wall .soc .c { width: 60px; height: 60px; border-radius: 50%; background: #1f1f1f; display: grid;
  place-items: center; font-size: 26px; color: #fff; }
.wall .dev { color: rgba(255,255,255,.45); text-decoration: underline; background: none; border: 0;
  font-size: 13px; cursor: pointer; padding: 6px; }
.wall .legal { color: rgba(255,255,255,.38); font-size: 12px; text-align: center; line-height: 1.5; padding-top: 8px; }
.wall .legal a { color: rgba(255,255,255,.55); text-decoration: underline; }
.wall .wstatus { color: #f87171; text-align: center; min-height: 18px; font-size: 13px; }

/* Light-mode auth wall (Sell + Account) */
.wall.light { background: #fff; color: var(--text); }
.wall.light .headline p { color: var(--muted); }
.wall.light .divider { color: var(--muted); }
.wall.light .divider .ln { background: var(--line); }
.wall.light .soc { color: var(--muted); }
.wall.light .soc .c { background: var(--fill); color: var(--text); }
.wall.light .legal { color: var(--faint); }
.wall.light .legal a { color: var(--muted); }
.wall.light .dev { color: var(--muted); }

/* Apply / Log in toggle + email-password login */
.wtoggle { display: flex; gap: 4px; width: 100%; max-width: 320px; padding: 4px;
  background: var(--fill); border-radius: var(--radius-pill); }
.wtoggle button { flex: 1; border: 0; background: none; padding: 9px 0; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.wtoggle button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.wpanel { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 320px; }
.wpanel .social { margin-top: 4px; }
.wp-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.winput { width: 100%; padding: 13px 14px; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--fill); font-size: 15px; color: var(--text); }
/* Light-grey suggestion text that disappears as soon as you type. */
.winput::placeholder { color: var(--faint); opacity: 1; }
.winput:focus { outline: none; border-color: var(--accent); background: #fff; }
.wbtn { width: 100%; padding: 13px; border-radius: var(--radius-md); border: 0; background: var(--accent);
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.wbtn:disabled { opacity: .6; }
.wlink { align-self: center; background: none; border: 0; color: var(--muted); font-size: 13px;
  text-decoration: underline; cursor: pointer; padding: 2px; }

/* ---- forms (seller application + pattern listing) ---- */
.form { max-width: 620px; margin: 0 auto; }
.field { margin: 0 0 16px; }
.field > label:not(.dropzone), .field-label { display: block; font-size: 13px; font-weight: 700;
  color: var(--text-2); margin: 0 0 6px; }
.field .hint { font-size: 12px; color: var(--faint); margin: 4px 0 0; font-weight: 400; }
.field .optional { color: var(--faint); font-weight: 500; }
.input, .form input[type="text"], .form input[type="email"], .form input[type="url"],
.form input[type="number"], .form select, .form textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; font-family: inherit; }
.form textarea { resize: vertical; min-height: 80px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2);
  margin: 4px 0 16px; line-height: 1.4; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }

/* upload dropzone */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 1.5px dashed var(--fill-strong); border-radius: var(--radius-md); background: var(--fill);
  min-height: 120px; padding: 16px; text-align: center; cursor: pointer; overflow: hidden; }
.dropzone:hover { border-color: var(--accent); }
.dropzone.has-file { border-style: solid; border-color: var(--green); }
.dropzone .dz-icon { font-size: 24px; color: var(--muted); }
.dropzone .dz-title { font-size: 14px; font-weight: 600; }
.dropzone .dz-sub { font-size: 12px; color: var(--faint); }
.dropzone img.dz-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dropzone.dz-square { aspect-ratio: 1; max-width: 260px; min-height: 0; margin: 0 auto; }
.dropzone.dz-portrait { aspect-ratio: 9 / 16; max-width: 150px; min-height: 0; margin: 0 auto; }
.dropzone.banner-zone { min-height: 96px; }
.dropzone.avatar-zone { min-height: 120px; border-radius: 50%; width: 120px; height: 120px; margin: 0 auto; }

/* size system segmented control */
.segmented { display: flex; gap: 6px; background: var(--fill); border-radius: var(--radius-md); padding: 4px; }
.segmented button { flex: 1; height: 38px; border: 0; background: transparent; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--muted); }
.segmented button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* listing cards in the dashboard */
.listing { display: flex; gap: 12px; align-items: center; background: var(--fill); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 10px; }
.listing .lc-cover { width: 52px; height: 64px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--fill-strong); flex: 0 0 auto; }
.listing .lc-body { flex: 1; min-width: 0; }
.listing .lc-title { font-weight: 700; font-size: 15px; }
.listing .lc-meta { font-size: 12px; color: var(--muted); }
.statebadge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--fill-strong); color: var(--text-2); text-transform: capitalize; }
.statebadge.published { background: rgba(26,127,55,.14); color: var(--green); }
.statebadge.pending_review, .statebadge.pending { background: rgba(212,136,10,.16); color: var(--orange); }
.statebadge.rejected { background: rgba(207,34,46,.14); color: var(--red); }
.statebadge.draft { background: var(--fill-strong); color: var(--muted); }

/* ---- seller listings: card-grid + list views ---- */
.lc-toolbar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.lc-viewseg { width: auto; padding: 3px; gap: 2px; }
.lc-viewseg button { width: 36px; flex: 0 0 auto; height: 32px; display: grid; place-items: center; color: var(--muted); }
.lc-viewseg button.on { color: var(--text); }
.lc-viewseg button svg { width: 18px; height: 18px; }

.lc-cover { object-fit: cover; background: var(--fill-strong); display: block; }
.lc-title { font-weight: 700; font-size: 15px; line-height: 1.25; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lc-head .lc-title { flex: 0 1 auto; }
.lc-head .statebadge { flex: 0 0 auto; }
.lc-coverwrap { position: relative; flex: 0 0 auto; }

/* Action group — clear tiers: Edit (emphasis), toggle (ghost), delete (icon). */
.lc-actions { display: flex; align-items: center; gap: 6px; }
.lc-act { height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lc-act.edit { background: var(--fill-strong); color: var(--text); }
.lc-act.edit:hover { background: #d4d5db; }
.lc-act.toggle { background: transparent; color: var(--muted); }
.lc-act.toggle:hover { background: var(--fill); color: var(--text); }
.lc-act.del { background: transparent; color: var(--faint); width: 34px; padding: 0; }
.lc-act.del:hover { background: rgba(207,34,46,.10); color: var(--red); }
.lc-act.del svg { width: 17px; height: 17px; }
.lc-act:disabled { opacity: .5; }

/* Status badge: overlaid on the cover (cards) vs inline by the title (list). */
.lc-badge-over, .lc-badge-inline { display: none; }

/* List view (compact rows) */
.lc-list { display: flex; flex-direction: column; gap: 10px; }
.lc-list .lc { display: flex; gap: 14px; align-items: center; background: var(--fill);
  border-radius: var(--radius-md); padding: 12px 14px; }
.lc-list .lc-cover { width: 54px; height: 66px; border-radius: var(--radius-sm); }
.lc-list .lc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lc-list .lc-actions { flex: 0 0 auto; margin-left: 8px; }
.lc-list .lc-badge-inline { display: inline-flex; }

/* Card / grid view */
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.lc-grid .lc { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease; }
.lc-grid .lc:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: #d9d9de; }
.lc-grid .lc-coverwrap { width: 100%; }
.lc-grid .lc-cover { width: 100%; aspect-ratio: 1; }
.lc-grid .lc-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lc-grid .lc-actions { padding: 0 14px 14px; margin-top: auto; }
.lc-grid .lc-act.edit { flex: 1; }
.lc-grid .lc-badge-over { display: inline-flex; position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 5px rgba(0,0,0,.18); backdrop-filter: blur(4px); }
.lc-grid .empty { grid-column: 1 / -1; }

/* seller stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-bottom: 6px; }
.stat-card { background: var(--fill); border-radius: var(--radius-md); padding: 16px 14px; }
.stat-card.live { background: rgba(0,122,255,.08); }
.stat-card .stat-num { font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat-card .stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat-card .stat-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--accent); margin-top: 6px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.stat-row .sr-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.stat-row .sr-nums { color: var(--muted); display: flex; gap: 16px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.stat-row .sr-nums b { color: var(--text); font-weight: 700; }
.sales-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 4px 0 2px; }
.sales-chart .bar { flex: 1 1 0; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 3px;
  transition: height .2s ease; }
.sales-chart .bar.empty { background: var(--fill-strong); }
.chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint);
  margin-bottom: 4px; }

/* modal (post-purchase / get) — subtle dim + gentle fade/rise */
.modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,22,.34);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex;
  align-items: flex-end; justify-content: center; padding: 0;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.modal-scrim.open { opacity: 1; pointer-events: auto; }
@media (min-width: 480px) { .modal-scrim { align-items: center; padding: 20px; } }
.modal { background: var(--bg); width: 100%; max-width: 440px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 28px 22px calc(22px + env(safe-area-inset-bottom,0px)); text-align: center; display: flex;
  flex-direction: column; gap: 10px; transform: translateY(16px);
  transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.modal-scrim.open .modal { transform: none; }
@media (min-width: 480px) { .modal { border-radius: var(--radius-lg); transform: translateY(0) scale(.97); }
  .modal-scrim.open .modal { transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-scrim, .modal { transition: none; } }
.modal-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #fff;
  display: grid; place-items: center; font-size: 26px; margin: 0 auto 4px; overflow: hidden; }
.modal-icon img { width: 120%; height: 120%; object-fit: contain; }
.modal h3 { margin: 0; font-size: 20px; font-weight: 700; }
.modal p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.modal .btn { width: 100%; }
.modal-close { background: none; border: 0; color: var(--muted); font-size: 14px; padding: 8px; margin-top: 2px; }
.modal .qrbox { display: none; }
.modal .qrbox > div { display: flex; justify-content: center; }
.modal .qrbox canvas, .modal .qrbox img { display: block; margin: 0 auto; border-radius: 8px; }
.modal .qrcap { font-size: 12px; color: var(--muted); margin-top: 6px; }
/* pattern listing overlay — matches the mobile pattern screen */
.modal.pm-sheet { text-align: left; max-height: 88vh; overflow-y: auto; padding: 0; gap: 0; position: relative; }

/* Side mode (feed "Make"): dock the pattern overlay as a right slide-in panel
   like the comments — no dim, feed video shifts left. Shop links stay centered. */
.modal-scrim.pm-side { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none; align-items: stretch; padding: 0; }
.modal-scrim.pm-side .modal.pm-sheet {
  pointer-events: auto; position: fixed; right: 0; top: 0; bottom: 0; height: 100vh; max-height: 100vh;
  width: 420px; max-width: 100%; margin: 0; border-radius: 0; transform: translateX(100%);
  box-shadow: -8px 0 30px rgba(0,0,0,.10); }
.modal-scrim.pm-side.open .modal.pm-sheet { transform: none; }
@media (min-width: 760px) {
  body.make-open .feed-wrap { right: 420px; }
  body.make-open .feednav { display: none; }
}
@media (max-width: 760px) { .modal-scrim.pm-side .modal.pm-sheet { width: 100%; } }
.pm-x { position: absolute; top: 10px; right: 12px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  padding: 0; display: flex; align-items: center; justify-content: center; }
.pm-x svg { width: 15px; height: 15px; display: block; }
/* aspect-ratio gives the initial square; once the carousel renders, JS sets an
   explicit height per slide (square for photos, tall for the vertical reel) and
   this transition animates the change so the listing details slide down/up. */
.pm-hero { position: relative; width: 100%; aspect-ratio: 1; flex: 0 0 auto; background: var(--fill-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden;
  transition: height .3s ease; }
/* Swipeable carousel: full square cover (no crop) + reel-video page(s). */
.pm-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pm-track::-webkit-scrollbar { display: none; }
/* Mouse drag-to-swipe: grab cursor when there is more than one slide; while
   dragging, drop snap so the hero follows the pointer smoothly. */
.pm-track.pm-swipeable { cursor: grab; }
.pm-track.pm-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.pm-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center;
  display: grid; place-items: center; background: var(--fill-strong); }
.pm-slide-video { background: #111; position: relative; }
/* Poster covers the video until the first frame is actually playing, then fades
   out, bridging the HLS buffer gap so the reel starts without a flash/pop. */
.pm-slide-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  z-index: 1; pointer-events: none; -webkit-user-drag: none;
  transition: opacity .25s ease; }
.pm-slide-video.is-playing .pm-slide-poster { opacity: 0; }
.pm-slide-media { width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-user-drag: none; user-select: none; }
/* Prev/next arrows: desktop affordance for the gallery. Hidden on touch, where
   native swipe is primary. JS toggles display at the first/last slide. */
.pm-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #1a1a1a; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 1px 5px rgba(0,0,0,.28);
  transition: background .12s, transform .12s; }
.pm-nav svg { width: 18px; height: 18px; }
.pm-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.pm-nav.pm-prev { left: 10px; }
.pm-nav.pm-next { right: 10px; }
@media (hover: none) { .pm-nav { display: none !important; } }
.pm-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3;
  display: flex; justify-content: center; gap: 6px; }
.pm-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55);
  box-shadow: 0 0 3px rgba(0,0,0,.4); cursor: pointer; transition: width .2s, background .2s; }
.pm-dots span.on { width: 18px; border-radius: 3px; background: #fff; }
.pm-hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.55)); }
.pm-hero-overlay { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; pointer-events: none; transition: opacity .2s; }
.pm-subtitle { color: #fff; font-size: 15px; font-weight: 600; }
.pm-arpill { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.45); color: #fff;
  padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.pm-sheet > *:not(.pm-hero):not(.pm-x):not(.pm-foot) { margin-left: 20px; margin-right: 20px; }
/* Pre-save action pinned to the bottom of the sheet so it's always visible and
   never clipped below the fold. Content scrolls above it. */
.pm-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 24px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); box-shadow: 0 -10px 18px -10px rgba(0,0,0,.14); }
.pm-sheet .pm-foot .pm-cta { margin-top: 0; }
.pm-title { font-size: 22px; font-weight: 800; margin: 16px 0 0; }
.pm-creator { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--text); }
.pm-cav { width: 40px; height: 40px; border-radius: 50%; background: var(--fill-strong) center/cover no-repeat; flex: 0 0 auto; }
.pm-cinfo { flex: 1; display: flex; flex-direction: column; }
.pm-cname { font-size: 15px; font-weight: 700; }
.pm-cshop { font-size: 13px; color: var(--muted); }
.pm-chev { color: var(--faint); font-size: 22px; }
/* Scoped under .pm-sheet so they outrank `.modal h3` / `.modal p` (which would
   otherwise zero out every section margin and collapse the layout). */
.pm-sheet .pm-sec { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.pm-sheet .pm-desc { font-size: 15px; color: var(--text-2); line-height: 1.4; margin: 0; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-tag { background: var(--fill); color: var(--text-2); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 13px; }
.pm-metarow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.pm-mi { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pm-mi svg { width: 16px; height: 16px; }
.pm-maker { display: flex; gap: 12px; }
.pm-mcard { flex: 1; background: var(--fill); border-radius: var(--radius-md); padding: 14px; }
.pm-mlabel { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.pm-mvalue { font-size: 15px; font-weight: 600; text-transform: capitalize; }
.pm-mvalue.badge { display: inline-block; }
.pm-review { background: var(--fill); border-radius: var(--radius-md); padding: 14px; margin-bottom: 8px; }
.pm-rtop { display: flex; justify-content: space-between; align-items: center; }
.pm-rauthor { font-weight: 700; font-size: 14px; }
.pm-rtext { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.pm-rtop .stars { color: #ffd60a; }
.pm-none { font-size: 14px; color: var(--faint); }
.pm-rwrite { background: var(--fill); border-radius: var(--radius-md); padding: 14px; margin-bottom: 14px; }
.pm-rwlabel { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.pm-rstars { display: flex; gap: 2px; margin-bottom: 10px; }
.pm-star { background: none; border: 0; padding: 0 2px; font-size: 26px; line-height: 1; cursor: pointer; color: var(--line); transition: color .1s; }
.pm-star.on { color: #d4880a; }
.pm-rinput { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.pm-rsubmit { margin-top: 10px; }
.pm-sheet .pm-cta { margin-top: 28px; }
.pm-cta, .pm-sheet .pm-cta { background: var(--green); border-color: var(--green); color: #fff; }
.pm-cta.on { background: var(--green); }
/* Pattern CTA states mirror the RN pattern screen: blue "Make now", green "Buy now",
   yellow "Save now" (neutral when saved), subtle "Owned". */
.pm-cta.cta-make { background: var(--accent); border-color: var(--accent); color: #fff; }
.pm-cta.cta-buy { background: var(--green); border-color: var(--green); color: #fff; }
.pm-cta.cta-save { background: var(--save); border-color: var(--save); color: #1c1c1e; }
.pm-cta.cta-save.on { background: #2c2c2e; border-color: #2c2c2e; color: #fff; }
.pm-cta.cta-owned { background: var(--fill-strong); border-color: var(--fill-strong); color: var(--text); }
/* Hero Save bookmark, bottom-right of the cover (mirrors the RN pattern screen). */
.pm-save { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; cursor: pointer; }
.pm-save svg { width: 22px; height: 22px; }
.pm-save.on { color: var(--save); }
.pm-save.on svg path { fill: var(--save); stroke: var(--save); }
/* Community Makes: horizontal thumbnail row + tap-to-play lightbox. */
.pm-makesub { font-size: 13px; color: var(--faint); margin: -4px 0 12px; }
.pm-makes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pm-make { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px; border: 0; padding: 0;
  cursor: pointer; background-color: var(--fill); background-size: cover; background-position: center; }
.pm-makeview { position: fixed; inset: 0; z-index: 80; display: none; align-items: center;
  justify-content: center; background: rgba(0,0,0,0.92); }
.pm-makeview.open { display: flex; }
.pm-mv-media { max-width: min(100%, 480px); max-height: 88vh; border-radius: 12px; }
.pm-mv-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex;
  align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; }
.pm-mv-x svg { width: 20px; height: 20px; }
.pm-sheet .pm-hint { font-size: 12px; color: var(--faint); text-align: center; margin: 10px 0 0; }
.pm-sheet .pm-none { font-size: 14px; color: var(--faint); margin: 0; }
#modalOpen { display: block; }
@media (min-width: 760px) {
  .modal .qrbox { display: block; margin: 2px 0 4px; }
  #modalOpen { display: none; }   /* desktop scans the QR; mobile opens directly */
}
.rev-rating { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.rev-rating .stars, .rev .stars { color: #f5a623; letter-spacing: 1px; }
.rev { padding: 8px 0; border-top: 1px solid var(--line); }
.rev .stars { font-size: 13px; }
.rev-text { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.about-empty { font-size: 14px; color: var(--faint); }

/* notice / status banners */
.notice { border-radius: var(--radius-md); padding: 16px; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.notice.info { background: rgba(0,122,255,.08); color: var(--text-2); }
.notice.warn { background: rgba(212,136,10,.12); color: #8a5a00; }
.notice.ok { background: rgba(26,127,55,.1); color: var(--green); }
.notice.err { background: rgba(207,34,46,.1); color: var(--red); }
.spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   The web app is intentionally light mode everywhere, regardless of the device
   color scheme (`color-scheme: light` above pins form controls/scrollbars too).
   We no longer follow `prefers-color-scheme: dark` — the previous dark token
   overrides were removed so the storefront reads consistently light. Surfaces
   that are dark by design in BOTH modes (the reel feed stage, the sign-in wall,
   search overlay, media scrims) are styled on their own selectors and stay dark.
   =========================================================================== */