:root {
  --bg: #05070a;
  --panel: rgba(8, 12, 16, .72);
  --panel-strong: rgba(8, 12, 16, .92);
  --line: rgba(255,255,255,.13);
  --text: #fbfdff;
  --muted: rgba(251,253,255,.70);
  --soft: rgba(255,255,255,.08);
  --cyan: #18f3ee;
  --pink: #ff2f7e;
  --green: #25ee97;
  --blue: #7ac8ff;
  --warm: #ffe099;
  --shadow: 0 24px 80px rgba(0,0,0,.48);
  --safe-bottom: env(safe-area-inset-bottom);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% -15%, #123c45 0, #05070a 46%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { display: grid; place-items: center; overflow: hidden; }
button, input, textarea, select { font: inherit; border: 0; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.05; stroke-linecap: round; stroke-linejoin: round; }
input, textarea { width: 100%; padding: 14px 15px; border-radius: 18px; background: rgba(255,255,255,.09); border: 1px solid var(--line); outline: none; }
textarea { resize: vertical; line-height: 1.35; }
input:focus, textarea:focus { border-color: rgba(24,243,238,.55); box-shadow: 0 0 0 4px rgba(24,243,238,.10); }

.phone { position: relative; width: min(100vw, 460px); height: 100dvh; max-height: 980px; overflow: hidden; background: #030507; box-shadow: var(--shadow); isolation: isolate; }
.phone::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 0, rgba(24,243,238,.28), transparent 32%), radial-gradient(circle at 92% 18%, rgba(255,47,126,.18), transparent 36%), linear-gradient(180deg, #05070a, #020405); }

.topbar { position: absolute; z-index: 70; inset: 0 0 auto; padding: calc(9px + env(safe-area-inset-top)) 12px 0; display: grid; gap: 8px; background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.35) 58%, rgba(0,0,0,0)); pointer-events: none; }
.topbar button { pointer-events: auto; }
.top-row { display: grid; grid-template-columns: auto 1fr 42px 42px; align-items: center; gap: 8px; }
.brand { display: inline-grid; grid-template-columns: 30px auto; align-items: center; gap: 7px; min-width: 116px; padding: 0; background: transparent; font-weight: 950; line-height: .86; letter-spacing: -.05em; text-align: left; }
.brand-stack { display: grid; gap: 0; line-height: .84; }
.brand-vi { display: block; font-size: 17px; letter-spacing: -.06em; background: linear-gradient(135deg, #fff, var(--cyan) 58%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-connects { display: block; font-size: 13px; letter-spacing: -.04em; background: linear-gradient(135deg, var(--cyan), #fff 48%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand img { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 0 22px rgba(24,243,238,.20); }

.feed-tabs { justify-self: center; display: flex; align-items: center; gap: 7px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(16px); max-width: 180px; overflow: hidden; }
.feed-tabs button { min-width: 0; padding: 8px 9px; border-radius: 999px; background: transparent; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 880; white-space: nowrap; }
.feed-tabs button.active { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.icon-btn, .round-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px); color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }
.notif-badge { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--pink); color: #fff; font-size: 9px; font-weight: 950; box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.location-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.area-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 58%; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.area-chip svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cyan); }
.area-chip span { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 920; letter-spacing: -.02em; }
.area-chip small { display: none; }
.area-chip.is-gps::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 12px rgba(37,238,151,.9); }
.tiny-lang { width: 42px; font-size: 13px; font-weight: 950; color: var(--cyan); }
.ghost-dot { margin-left: auto; width: auto; height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; background: rgba(37,238,151,.10); border: 1px solid rgba(37,238,151,.18); color: #eafff5; font-size: 11px; font-weight: 900; backdrop-filter: blur(18px); }
.ghost-dot span { width: 9px; height: 9px; border-radius: 999px; background: var(--green); box-shadow: 0 0 15px rgba(37,238,151,.9); }
.ghost-dot.pulse span { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { transform: scale(.85); opacity: .72; } 50% { transform: scale(1.25); opacity: 1; } }

.story-strip { position: absolute; z-index: 45; top: calc(103px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; gap: 9px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; pointer-events: auto; }
.story-strip::-webkit-scrollbar { display: none; }
.story-pill { flex: 0 0 auto; width: 68px; display: grid; place-items: center; gap: 5px; padding: 0; background: transparent; color: #fff; text-align: center; }
.story-pill .story-ring { width: 56px; height: 56px; padding: 2px; border-radius: 50%; background: conic-gradient(from 20deg, var(--pink), var(--warm), var(--cyan), var(--pink)); box-shadow: 0 8px 22px rgba(0,0,0,.24); }
.story-pill img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: rgba(255,255,255,.08); border: 2px solid #05070a; }
.story-pill span { max-width: 68px; font-size: 10px; font-weight: 820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px #000; }

.feed { position: absolute; z-index: 2; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.reel-card { position: relative; min-height: 100dvh; scroll-snap-align: start; overflow: hidden; background: #05070a; }
.media-wrap { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #111; }
.media-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 22%, rgba(24,243,238,.28), transparent 42%), linear-gradient(160deg, #071115, #010203 58%); }
.media-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.34) 0, rgba(0,0,0,.07) 28%, rgba(0,0,0,.10) 53%, rgba(0,0,0,.78) 82%, rgba(0,0,0,.96) 100%); }
.media-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); transform: translateZ(0); }
.media-wrap.photo { background: #04080b; }
.media-wrap.photo .media-bg { position: absolute; z-index: 0; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; filter: blur(18px) saturate(1.18) brightness(.72); opacity: .68; transform: scale(1.04); }
.media-wrap.photo .media-main { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(1.04) contrast(1.01); background: transparent; }
.media-wrap.photo::before { background: radial-gradient(circle at 20% 12%, rgba(24,243,238,.16), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.20)); }
.media-wrap.photo::after { background: linear-gradient(180deg, rgba(0,0,0,.44) 0, rgba(0,0,0,.04) 24%, rgba(0,0,0,.06) 58%, rgba(0,0,0,.76) 82%, rgba(0,0,0,.96) 100%); }
.media-wrap.demo { background: linear-gradient(145deg, #09181f, #05070a); }
.media-wrap.demo img { width: min(70%, 310px); height: min(48%, 340px); object-fit: contain; filter: drop-shadow(0 24px 55px rgba(0,0,0,.44)); opacity: .94; }
.media-wrap.demo::after { background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.05) 44%, rgba(0,0,0,.82) 84%, rgba(0,0,0,.96)); }
.top-fade { position: absolute; inset: 0 0 auto; height: 180px; background: linear-gradient(180deg, rgba(0,0,0,.78), transparent); pointer-events: none; z-index: 2; }
.card-glow { position: absolute; z-index: 3; inset: auto -28% 0; height: 48%; background: radial-gradient(ellipse at bottom left, rgba(24,243,238,.23), transparent 48%), radial-gradient(ellipse at bottom right, rgba(255,47,126,.18), transparent 42%); pointer-events: none; }
.card-info { position: absolute; z-index: 5; left: 15px; right: 82px; bottom: calc(78px + var(--safe-bottom)); display: grid; gap: 8px; text-shadow: 0 2px 13px rgba(0,0,0,.55); }
.seller-line { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); text-align: left; }
.seller-line .avatar { position: relative; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--cyan), var(--pink)); }
.seller-line img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: #101820; border: 2px solid #05070a; }
.seller-line .online-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #05070a, 0 0 12px rgba(37,238,151,.9); }
.seller-line .seller-text { min-width: 0; display: grid; line-height: 1.05; }
.seller-line .seller-name { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 950; }
.seller-line .seller-area { color: rgba(255,255,255,.72); font-size: 10.5px; font-weight: 780; }
.badge-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-height: 30px; overflow: hidden; }
.badge { width: fit-content; max-width: 178px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); font-size: 10px; font-weight: 950; letter-spacing: .035em; text-transform: uppercase; }
.badge.live { background: rgba(255,47,126,.88); }
.badge.service { background: rgba(24,243,238,.17); color: #eaffff; }
.badge.price { color: #161208; background: linear-gradient(135deg, rgba(255,224,153,.95), rgba(255,255,255,.78)); border: 0; max-width: 148px; text-transform: none; letter-spacing: 0; }
.badge.ok { color: var(--green); }
.card-info h1 { margin: 0; font-size: clamp(25px, 7.2vw, 35px); line-height: 1.02; letter-spacing: -.055em; max-height: 75px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.card-info p { margin: 0; color: rgba(255,255,255,.90); font-size: 13px; line-height: 1.34; max-height: 52px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tag-line { display: flex; flex-wrap: wrap; gap: 6px; max-height: 31px; overflow: hidden; }
.tag { border-radius: 999px; padding: 6px 9px; font-size: 10.5px; color: #eafcff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); }
.action-rail { position: absolute; z-index: 6; right: 10px; bottom: calc(82px + var(--safe-bottom)); display: grid; gap: 10px; justify-items: center; }
.action { width: 52px; min-height: 52px; border-radius: 999px; display: grid; place-items: center; gap: 2px; padding: 6px 3px; background: rgba(8,12,16,.50); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.action span { width: 22px; height: 22px; display: grid; place-items: center; }
.action svg { width: 21px; height: 21px; }
.action b { display: block; max-width: 48px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8.5px; font-weight: 920; line-height: 1; }
.action.get { background: linear-gradient(135deg, var(--cyan), var(--pink)); color: #fff; border: 0; }
.action.chat { background: linear-gradient(135deg, rgba(37,238,151,.95), rgba(24,243,238,.82)); color: #021114; border: 0; }
.action.live { background: linear-gradient(135deg, rgba(255,47,126,.95), rgba(255,214,102,.88)); border: 0; }

.bottom-nav { position: absolute; z-index: 70; left: 10px; right: 10px; bottom: calc(8px + var(--safe-bottom)); height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 7px 10px; background: rgba(3,5,7,.88); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; backdrop-filter: blur(20px); box-shadow: 0 16px 42px rgba(0,0,0,.32); }
.bottom-nav button { background: transparent; color: rgba(255,255,255,.67); display: grid; place-items: center; gap: 3px; }
.bottom-nav svg { width: 21px; height: 21px; }
.bottom-nav button b { font-size: 9.5px; font-weight: 850; }
.bottom-nav button.active { color: #fff; }
.bottom-nav .post { width: 64px; height: 44px; border-radius: 17px; justify-self: center; background: #fff; color: #05070a; position: relative; box-shadow: -5px 0 0 var(--cyan), 5px 0 0 var(--pink); }
.bottom-nav .post svg { width: 26px; height: 26px; stroke-width: 2.5; }

.directory { position: absolute; z-index: 35; inset: 0; padding: calc(114px + env(safe-area-inset-top)) 14px 90px; overflow-y: auto; background: radial-gradient(circle at 50% 0, #123c45, #05070a 48%); }
.hidden { display: none !important; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head small, .sheet-title small { color: var(--cyan); font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.section-head h2, .sheet-title h3 { margin: 2px 0 0; line-height: 1.04; letter-spacing: -.04em; }
.mini-btn, .chip, .soft, .primary { border-radius: 999px; padding: 12px 16px; background: rgba(255,255,255,.10); border: 1px solid var(--line); color: #fff; font-weight: 900; }
.primary { background: linear-gradient(135deg, var(--cyan), var(--pink)); border: 0; color: #fff; box-shadow: 0 14px 30px rgba(24,243,238,.13); }
.soft { background: rgba(24,243,238,.13); }
.wide { width: 100%; }
.chips, .quick-areas, .area-grid { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.area-grid, .quick-areas { flex-wrap: wrap; overflow: visible; margin: 12px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip, .area-grid button, .quick-areas button { flex: 0 0 auto; font-size: 13px; border-radius: 999px; padding: 10px 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); font-weight: 850; }
.chip.active, .language-grid button.active, .language-inline button.active { background: #fff; color: #051015; }
.inline-search { margin: 10px 0; }
.inline-search.with-icon { position: relative; }
.inline-search.with-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(255,255,255,.65); pointer-events: none; }
.inline-search.with-icon input { padding-left: 42px; }
.directory-list { display: grid; gap: 12px; }
.dir-card { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.075); backdrop-filter: blur(18px); text-align: left; }
.avatar-wrap { position: relative; width: 64px; height: 64px; border-radius: 22px; overflow: visible; flex: 0 0 auto; background: linear-gradient(135deg, var(--cyan), var(--pink)); padding: 2px; }
.avatar-wrap img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; background: #101820; border: 2px solid #05070a; }
.avatar-wrap .online-dot { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #05070a, 0 0 12px rgba(37,238,151,.9); }
.dir-card strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.dir-card span, .dir-card em { display: block; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.28; max-width: 220px; }
.dir-card em { max-height: 32px; overflow: hidden; margin-top: 3px; }
.dir-actions { display: flex; gap: 6px; align-items: center; }
.dir-actions button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.dir-actions svg { width: 18px; height: 18px; }
.dir-actions .profile-small { background: linear-gradient(135deg, rgba(24,243,238,.85), rgba(255,47,126,.82)); border: 0; }

.toast-zone { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(92vw, 420px); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 13px 15px; border-radius: 18px; background: rgba(8,14,18,.95); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); animation: toastIn .22s ease-out; font-weight: 760; }
@keyframes toastIn { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sheet { margin: auto; width: min(100vw, 460px); max-width: 460px; height: 100dvh; max-height: none; padding: 0; border: 0; background: transparent; color: var(--text); }
.sheet::backdrop { background: rgba(0,0,0,.64); backdrop-filter: blur(8px); }
.sheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; padding: 12px 16px calc(18px + var(--safe-bottom)); border-radius: 30px 30px 0 0; background: rgba(5, 9, 12, .97); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); }
.sheet-card.tall { max-height: 94dvh; }
.sheet-card.compact { max-height: 64dvh; }
.sheet-bar { width: 44px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.24); margin: 2px auto 14px; }
.sheet-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.xbtn { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.10); font-size: 22px; }
.muted { color: var(--muted); line-height: 1.45; font-size: 14px; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.ask-box { display: grid; gap: 10px; }
.search-results { display: grid; gap: 10px; margin-top: 10px; }
.result-card { width: 100%; display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid var(--line); text-align: left; }
.result-card img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; background: rgba(255,255,255,.08); }
.result-card strong { display: block; }
.result-card span span { color: var(--muted); font-size: 12px; }
.upload-box { min-height: 210px; border-radius: 28px; border: 1px dashed rgba(255,255,255,.24); background: linear-gradient(145deg, rgba(24,243,238,.10), rgba(255,47,126,.08)); display: grid; place-items: center; overflow: hidden; position: relative; margin: 12px 0; }
.upload-box img { display: none; width: 100%; height: 100%; max-height: 330px; object-fit: contain; background: #061115; }
.upload-box.has-image img { display: block; }
.upload-box.has-image span { display: none; }
.upload-box span { color: var(--muted); font-weight: 850; text-align: center; padding: 22px; }
.post-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-card { margin: 12px 0; padding: 14px; border: 1px solid rgba(24,243,238,.20); border-radius: 24px; background: rgba(24,243,238,.08); }
.ai-card span { color: var(--cyan); font-size: 12px; text-transform: uppercase; font-weight: 950; letter-spacing: .09em; }
.ai-card strong { display: block; margin: 5px 0; }
.ai-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.language-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.language-grid button, .language-inline button { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.13); font-weight: 950; }
.language-inline { display: flex; gap: 8px; margin: 10px 0 14px; }

.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; border-radius: 22px; background: rgba(255,255,255,.075); border: 1px solid var(--line); margin: 10px 0; }
.mode-toggle button { border-radius: 18px; padding: 12px 10px; background: transparent; color: var(--muted); font-weight: 950; }
.mode-toggle button.active { background: #fff; color: #061116; box-shadow: 0 12px 26px rgba(0,0,0,.20); }
.publish-status { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 12px; margin: 8px 0 12px; border-radius: 22px; background: rgba(24,243,238,.10); border: 1px solid rgba(24,243,238,.22); }
.publish-status strong { display: block; font-size: 13px; }
.publish-status small { display: block; color: var(--muted); line-height: 1.28; font-size: 12px; margin-top: 2px; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.16); border-top-color: var(--cyan); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button.loading { opacity: .72; pointer-events: none; }
.profile-editor-avatar { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 24px; background: rgba(255,255,255,.075); border: 1px solid var(--line); margin: 10px 0 12px; }
.profile-editor-avatar .avatar-wrap { width: 76px; height: 76px; border-radius: 26px; }
.profile-editor-avatar .avatar-wrap img { border-radius: 24px; }
.profile-editor-avatar b { font-weight: 900; color: #fff; line-height: 1.2; }
.detail-card { background: rgba(5, 9, 12, .985); }
.detail-media { position: relative; height: min(52dvh, 520px); border-radius: 28px; overflow: hidden; background: #020406; border: 1px solid rgba(255,255,255,.12); margin-bottom: 12px; display: grid; place-items: center; }
.detail-media .detail-bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(18px) brightness(.62) saturate(1.2); opacity: .7; }
.detail-media .detail-main { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.detail-meta { display: grid; gap: 7px; }
.detail-meta .seller-line { pointer-events: auto; }
.detail-meta h2 { margin: 4px 0 0; font-size: clamp(24px, 7vw, 34px); line-height: 1.02; letter-spacing: -.05em; }
.detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 14px 0 4px; }
.detail-actions .primary, .detail-actions .soft { width: 100%; text-align: center; }
.story-pill.add-story .story-ring { background: rgba(255,255,255,.14); border: 1px dashed rgba(255,255,255,.28); display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 900; }
.story-pill.add-story .story-ring::before { content: "+"; }

.notification-list { display: grid; gap: 10px; }
.notification-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 11px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.notification-card .notif-icon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(24,243,238,.20), rgba(255,47,126,.20)); }
.notification-card strong { display: block; }
.notification-card small { color: var(--muted); }
.notification-card b { color: var(--cyan); font-size: 18px; }

.profile-hero { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 26px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.profile-hero .avatar-wrap { width: 90px; height: 90px; border-radius: 28px; }
.profile-hero .avatar-wrap img { border-radius: 26px; }
.profile-hero strong { display: block; font-size: 20px; letter-spacing: -.03em; }
.profile-hero span, .profile-hero p { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.profile-actions a, .profile-actions button { flex: 1 0 auto; }
.inside-list { display: grid; gap: 10px; }
.inside-card { width: 100%; display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.inside-card img { width: 58px; height: 58px; object-fit: cover; border-radius: 16px; }
.inside-card strong { display: block; }
.inside-card small { color: var(--muted); }
.inside-card svg { width: 18px; height: 18px; color: var(--cyan); }

.live-card { background: #030507; }
.live-lobby-grid { display: grid; gap: 12px; }
.live-tile { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); text-align: left; }
.live-tile img { width: 64px; height: 64px; object-fit: cover; border-radius: 18px; background: #091a1f; }
.live-tile small { color: var(--muted); }
.live-room { position: relative; border-radius: 26px; overflow: hidden; background: #000; min-height: min(68dvh, 640px); border: 1px solid rgba(255,255,255,.14); }
.live-video { width: 100%; height: min(68dvh, 640px); object-fit: contain; background: #000; }
.live-wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; text-align: center; background: radial-gradient(circle at top, rgba(24,243,238,.14), rgba(0,0,0,.86)); }
.live-top { position: absolute; z-index: 4; inset: 10px 10px auto 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.live-pill { border-radius: 999px; padding: 8px 11px; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.13); font-size: 12px; font-weight: 900; backdrop-filter: blur(12px); }
.live-comments { position: absolute; left: 10px; right: 70px; bottom: 72px; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; max-height: 45%; pointer-events: none; }
.live-comment { width: max-content; max-width: 100%; padding: 8px 11px; border-radius: 16px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); animation: floatUp 5.2s ease forwards; font-size: 13px; }
.live-comment b { color: var(--cyan); }
@keyframes floatUp { 0% { transform: translateY(20px); opacity: 0; } 10% { transform: translateY(0); opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(-26px); opacity: .32; } }
.live-input { position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.live-input input { background: rgba(0,0,0,.58); }
.live-side { position: absolute; z-index: 6; right: 10px; bottom: 74px; display: grid; gap: 8px; }
.live-side button { width: 54px; height: 54px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 900; }
.live-side .get-small { background: linear-gradient(135deg, var(--cyan), var(--pink)); }
.host-controls { display: grid; gap: 10px; margin-top: 12px; }

@media (max-width: 420px) {
  .phone { width: 100vw; }
  .top-row { grid-template-columns: auto minmax(118px, 1fr) 40px 40px; gap: 6px; }
  .brand { min-width: 92px; grid-template-columns: 28px auto; font-size: 13px; }
  .brand img { width: 28px; height: 28px; }
  .feed-tabs { max-width: 150px; gap: 3px; padding: 3px; }
  .feed-tabs button { padding: 7px 7px; font-size: 11px; }
  .area-chip { max-width: 53%; }
  .ghost-dot b { display: none; }
  .ghost-dot { width: 42px; justify-content: center; padding: 0; }
  .card-info { left: 14px; right: 78px; bottom: calc(78px + var(--safe-bottom)); }
  .seller-line .seller-name { max-width: 145px; }
  .card-info h1 { font-size: clamp(24px, 7.8vw, 34px); max-height: 72px; }
  .card-info p { font-size: 13px; max-height: 52px; }
  .action { width: 50px; min-height: 50px; }
  .post-fields { grid-template-columns: 1fr; }
  .dir-card { grid-template-columns: 58px 1fr; }
  .avatar-wrap { width: 58px; height: 58px; border-radius: 20px; }
  .dir-actions { grid-column: 1 / -1; justify-content: end; }
}

/* v10: ViConnects rebrand, polished marketplace chrome, chat, share and showroom */
.topbar { padding: calc(8px + env(safe-area-inset-top)) 11px 0; gap: 7px; background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.42) 62%, rgba(0,0,0,0)); }
.top-row { grid-template-columns: minmax(82px, 100px) minmax(168px, 1fr) 40px 40px; gap: 6px; }
.brand { min-width: 0; font-size: 13px; letter-spacing: -.04em; }
.brand img { width: 29px; height: 29px; }
.feed-tabs { width: min(51vw, 226px); max-width: none; gap: 3px; padding: 3px 6px; background: rgba(4,7,9,.44); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.18); }
.feed-tabs button { flex: 1 1 0; padding: 8px 3px 10px; font-size: 12px; font-weight: 920; letter-spacing: -.02em; overflow: visible; }
.feed-tabs button.active { background: transparent; box-shadow: none; }
.feed-tabs button.active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 3px; border-radius: 999px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.55); }
.location-row { gap: 7px; }
.area-chip { max-width: 45%; height: 42px; background: rgba(255,255,255,.13); }
.ghost-dot { min-width: 42px; }
.story-strip { top: calc(106px + env(safe-area-inset-top)); padding: 7px 12px 8px; gap: 10px; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)); }
.story-pill { width: 62px; }
.story-pill .story-ring { width: 54px; height: 54px; box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.10); }
.story-pill span { max-width: 62px; font-size: 9.5px; }
.media-wrap.loading::before { animation: mediaPulse 1.1s ease-in-out infinite alternate; }
@keyframes mediaPulse { from { filter: brightness(.75); } to { filter: brightness(1.05); } }
.media-wrap.photo .media-main { opacity: 0; transition: opacity .22s ease, transform .22s ease; }
.media-wrap.photo.loaded .media-main { opacity: 1; }
.media-wrap.photo.portrait .media-main { object-fit: cover; object-position: center; }
.media-wrap.photo.landscape .media-main { object-fit: contain; object-position: center; width: 100%; height: 100%; padding: 0; }
.media-wrap.photo.squareish .media-main { object-fit: contain; object-position: center; }
.media-wrap.photo .media-bg { filter: blur(22px) saturate(1.12) brightness(.62); opacity: .92; }
.card-info { gap: 7px; right: 82px; bottom: calc(80px + var(--safe-bottom)); }
.card-info h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.01; max-height: 70px; text-wrap: balance; }
.card-info p { font-size: 13.5px; line-height: 1.32; color: rgba(255,255,255,.92); max-height: 55px; }
.badge-line { max-height: 34px; }
.action-rail { gap: 9px; right: 9px; }
.action { background: rgba(3,5,7,.58); border-color: rgba(255,255,255,.16); }
.action b { font-size: 8px; }
.bottom-nav { background: rgba(2,4,7,.92); border-radius: 26px; }
.upload-box.processing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: shimmer 1s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.chat-card { background: rgba(4,7,10,.985); }
.chat-product { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 10px; margin-bottom: 10px; border-radius: 20px; background: rgba(255,255,255,.075); border: 1px solid var(--line); }
.chat-product:empty { display: none; }
.chat-product img { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; background: #0b151b; }
.chat-product b { display: block; }
.chat-product small { color: var(--muted); }
.chat-messages { min-height: 48dvh; max-height: 58dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 12px; }
.chat-bubble { max-width: 82%; align-self: flex-start; padding: 9px 11px; border-radius: 18px 18px 18px 6px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); }
.chat-bubble.mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, rgba(24,243,238,.88), rgba(255,47,126,.78)); color: #fff; border: 0; }
.chat-bubble b { display: block; font-size: 10px; opacity: .78; margin-bottom: 2px; }
.chat-bubble span { font-size: 14px; line-height: 1.3; }
.chat-input { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 8px; background: linear-gradient(180deg, rgba(4,7,10,0), rgba(4,7,10,.98) 18%); }
.chat-input .primary { padding-left: 18px; padding-right: 18px; }
.showroom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.show-item { position: relative; min-height: 136px; border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.08); text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.show-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #101820; }
.show-item::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); }
.show-item b { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; font-size: 11px; line-height: 1.1; text-shadow: 0 2px 8px #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.show-price { position: absolute; z-index: 2; left: 7px; top: 7px; max-width: calc(100% - 14px); padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,.54); border: 1px solid rgba(255,255,255,.14); font-size: 9.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) {
  .top-row { grid-template-columns: 84px minmax(160px, 1fr) 39px 39px; gap: 5px; }
  .brand { grid-template-columns: 26px auto; font-size: 12px; }
  .brand img { width: 26px; height: 26px; }
  .feed-tabs { width: min(52vw, 198px); max-width: none; gap: 2px; }
  .feed-tabs button { font-size: 11.2px; padding-left: 2px; padding-right: 2px; }
  .area-chip { max-width: 48%; }
  .showroom-grid { grid-template-columns: repeat(2, 1fr); }
  .show-item { min-height: 150px; }
}
.feed-tabs button { position: relative; }

/* v10: internal chat, editable AI post, cleaner TikTok-style media */
.media-wrap.photo .media-main,
.media-wrap.photo.portrait .media-main,
.media-wrap.photo.landscape .media-main,
.media-wrap.photo.squareish .media-main {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
.media-wrap.photo.loaded .media-main { background: transparent; }
.media-wrap.photo .media-bg { transform: scale(1.08); }
.top-row { grid-template-columns: minmax(86px, 104px) minmax(172px, 1fr) 40px 40px; }
.feed-tabs { border-radius: 999px; height: 42px; align-items: center; justify-content: center; }
.feed-tabs button { position: relative; white-space: nowrap; line-height: 1; }
.feed-tabs button.active { color: #fff; font-weight: 980; }
.story-strip { backdrop-filter: blur(1px); }
.hero-upload { min-height: 250px; margin-top: 10px; border-radius: 30px; background: radial-gradient(circle at 18% 12%, rgba(24,243,238,.18), transparent 34%), rgba(255,255,255,.055); }
.hero-upload img { max-height: 410px; object-fit: contain; }
.smart-edit-grid { display: grid; gap: 10px; margin: 12px 0; }
.smart-edit-grid input, .smart-edit-grid textarea, .extra-notes { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.14); }
.smart-edit-grid #postDescription { min-height: 92px; }
.post-fields { margin-top: 10px; }
.ai-card { background: linear-gradient(135deg, rgba(24,243,238,.10), rgba(255,47,126,.065)); }
.time-badge { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.78); background: rgba(0,0,0,.32); }
.chat-bubble time { display: block; margin-top: 4px; font-size: 10px; opacity: .72; text-align: right; }
.chat-product small::after { content: " · inside ViConnects"; opacity: .72; }
.profile-switches { display: grid; gap: 10px; margin: 12px 0 14px; }
.profile-switches label { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 18px; background: rgba(255,255,255,.075); border: 1px solid var(--line); font-size: 13px; font-weight: 850; }
.profile-switches input { width: 18px; height: 18px; accent-color: var(--cyan); padding: 0; border-radius: 6px; }
#meSheet input, #meSheet textarea { margin-top: 10px; }
#meSheet .profile-editor-avatar + input { margin-top: 14px; }
.showroom-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 14px; }
.showroom-head h3 { margin: 0; }
.showroom-head small { color: var(--muted); font-weight: 800; }
.show-item img { object-fit: cover; }
.show-item time { position: absolute; z-index: 2; right: 7px; top: 7px; padding: 4px 6px; border-radius: 999px; background: rgba(0,0,0,.48); font-size: 9px; font-weight: 900; color: rgba(255,255,255,.88); }
.detail-actions .soft { display: grid; place-items: center; min-height: 46px; border-radius: 16px; background: rgba(255,255,255,.09); border: 1px solid var(--line); font-weight: 850; }
.action-rail { bottom: calc(76px + var(--safe-bottom)); gap: 7px; }
.action { width: 49px; min-height: 49px; }
.action b { font-size: 8px; }
@media (max-width: 420px) {
  .top-row { grid-template-columns: 88px minmax(166px, 1fr) 39px 39px; }
  .feed-tabs { width: min(53vw, 206px); }
  .feed-tabs button { font-size: 10.6px; padding-left: 1px; padding-right: 1px; }
  .story-strip { top: calc(104px + env(safe-area-inset-top)); }
  .hero-upload { min-height: 230px; }
  .card-info { right: 74px; bottom: calc(78px + var(--safe-bottom)); }
  .action { width: 47px; min-height: 47px; }
}

/* v11: inbox-first chat, 24h messages, cleaner SmartPost draft */
.mode-toggle.three { grid-template-columns: repeat(3, 1fr); }
.mode-toggle.three button { font-size: 11px; padding-inline: 6px; white-space: nowrap; }
.compact-post { grid-template-columns: 1fr 128px; }
.compact-post input { min-width: 0; }
.draft-editor { display: grid; gap: 7px; margin: 10px 0 12px; border: 1px solid rgba(255,255,255,.12); }
.draft-editor strong,
.draft-editor small,
.draft-editor p { outline: none; border-radius: 12px; padding: 6px 8px; }
.draft-editor strong:focus,
.draft-editor small:focus,
.draft-editor p:focus { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(24,243,238,.40); }
.draft-editor small { width: fit-content; max-width: 100%; color: var(--cyan); background: rgba(24,243,238,.08); border: 1px solid rgba(24,243,238,.18); font-weight: 950; }
.draft-editor p { margin: 0; color: rgba(255,255,255,.86); line-height: 1.35; min-height: 44px; }
.post-errors { margin: 10px 0; padding: 10px 12px; border-radius: 18px; background: rgba(255,47,126,.16); border: 1px solid rgba(255,47,126,.30); color: #fff; }
.post-errors strong { display: block; margin-bottom: 5px; }
.post-errors ul { margin: 0; padding-left: 18px; }
.post-errors li { margin: 2px 0; font-size: 12px; }
.inbox-card { background: rgba(4,7,10,.985); }
.inbox-list { display: grid; gap: 8px; max-height: 70dvh; overflow-y: auto; padding-bottom: 8px; }
.inbox-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.075); border: 1px solid var(--line); color: #fff; }
.inbox-item.unread { background: linear-gradient(135deg, rgba(24,243,238,.16), rgba(255,47,126,.11)); border-color: rgba(24,243,238,.34); }
.inbox-item img { width: 54px; height: 54px; border-radius: 18px; object-fit: cover; background: #0b151b; }
.inbox-item strong { display: block; font-size: 14px; }
.inbox-item small { display: block; color: var(--cyan); font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item em { display: block; color: var(--muted); font-style: normal; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 205px; }
.inbox-item b { min-width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; padding: 0 8px; background: rgba(255,255,255,.10); color: #fff; font-size: 11px; }
.inbox-item.unread b { background: var(--pink); }
.chat-expire { display: block; margin: -4px 0 8px; color: var(--muted); font-weight: 750; }
.chat-input { grid-template-columns: auto 1fr auto; align-items: center; }
.attach-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.09); border: 1px solid var(--line); color: #fff; cursor: pointer; }
.attach-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-image-preview { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.chat-image-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }
.chat-image-preview button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,47,126,.92); color: #fff; font-weight: 950; }
.chat-bubble .chat-img { display: block; width: min(230px, 62vw); max-height: 260px; object-fit: contain; border-radius: 14px; margin: 2px 0 6px; background: rgba(0,0,0,.22); }
.chat-bubble.mine .chat-img { background: rgba(255,255,255,.18); }
.action.chat b { font-size: 7.8px; }
.media-wrap.photo .media-main,
.media-wrap.photo.portrait .media-main,
.media-wrap.photo.landscape .media-main,
.media-wrap.photo.squareish .media-main { object-fit: contain !important; }
.media-wrap.photo::after { background: linear-gradient(180deg, rgba(0,0,0,.48) 0, rgba(0,0,0,.04) 22%, rgba(0,0,0,.02) 58%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.96) 100%); }
@media (max-width: 420px) {
  .compact-post { grid-template-columns: 1fr; }
  .mode-toggle.three button { font-size: 10px; }
  .inbox-item { grid-template-columns: 48px 1fr auto; }
  .inbox-item img { width: 48px; height: 48px; }
}

/* v12: HD Live Sale, true online presence, realtime owner requests and polished notifications */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(7,13,18,.96), rgba(15,25,30,.94));
  border: 1px solid rgba(24,243,238,.20);
  box-shadow: 0 18px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
}
.toast b { font-size: 13px; line-height: 1.25; }
.toast-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: var(--cyan); box-shadow: 0 0 18px rgba(24,243,238,.85); }
.toast.booking .toast-dot { background: var(--pink); box-shadow: 0 0 18px rgba(255,47,126,.85); }
.toast.chat .toast-dot { background: var(--green); box-shadow: 0 0 18px rgba(37,238,151,.85); }
.notification-card.seen { opacity: .84; }
.notif-badge { min-width: 18px; height: 18px; font-size: 10px; right: 2px; top: 2px; }
.seller-line .online-dot:empty,
.avatar-wrap .online-dot:empty { display: block; }
.seller-line i:not(.online-dot),
.avatar-wrap i:not(.online-dot) { display: none; }
.live-card { background: rgba(2,4,7,.99); }
.live-room {
  min-height: min(78dvh, 760px);
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 22px 70px rgba(0,0,0,.35);
}
.live-room:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.live-room:fullscreen .live-video { height: 100vh; }
.live-video { height: min(78dvh, 760px); object-fit: contain; image-rendering: auto; }
.live-top { align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.live-pill.live-red { background: linear-gradient(135deg, rgba(255,47,126,.95), rgba(255,47,126,.45)); border-color: rgba(255,255,255,.24); }
.live-pill.host-online::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(37,238,151,.85); vertical-align: middle; }
.live-side button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.live-comments { right: 82px; bottom: 78px; max-height: 52%; gap: 7px; }
.live-comment { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; width: fit-content; max-width: 100%; padding: 8px 10px; border-radius: 18px; background: rgba(0,0,0,.48); backdrop-filter: blur(12px); }
.live-comment span { color: #fff; }
.live-comment time { color: rgba(255,255,255,.58); font-size: 10px; }
.live-input input { background: rgba(0,0,0,.54); border-color: rgba(255,255,255,.16); }
.live-input .primary { min-height: 44px; padding-inline: 16px; }
.media-wrap.photo .media-main { max-width: 100%; max-height: 100%; }
.media-wrap.photo .media-bg { opacity: .74; }
.ghost-dot:not(.is-active) { opacity: .82; }

/* v13: owner-safe actions, sticky inbox chat, read receipts, live stop, stronger cache-busting UI */
.floating-live {
  position: absolute;
  z-index: 72;
  right: 12px;
  bottom: calc(96px + var(--safe-bottom));
  width: 58px;
  min-height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 5px;
  background: linear-gradient(135deg, rgba(255,47,126,.95), rgba(24,243,238,.72));
  border: 1px solid rgba(255,255,255,.23);
  box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 24px rgba(255,47,126,.24);
  color: #fff;
  font-weight: 950;
}
.floating-live svg { width: 22px; height: 22px; }
.floating-live span { font-size: 10px; line-height: 1; }
.directory:not(.hidden) ~ .floating-live { display: none; }
.chat-card { padding-top: 0 !important; overflow: hidden; }
.chat-sticky-head {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -2px 8px;
  padding: 10px 0 10px;
  background: linear-gradient(180deg, rgba(4,7,10,1), rgba(4,7,10,.94));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.chat-sticky-head em { display: block; margin-top: 2px; color: rgba(255,255,255,.60); font-style: normal; font-size: 11px; font-weight: 750; }
.chat-bubble .ticks { margin-left: 5px; color: rgba(255,255,255,.62); font-style: normal; font-weight: 950; letter-spacing: -2px; }
.chat-bubble .ticks.read { color: #29b7ff; text-shadow: 0 0 12px rgba(41,183,255,.55); }
.notification-card.unread { background: linear-gradient(135deg, rgba(24,243,238,.17), rgba(255,47,126,.10)); border-color: rgba(24,243,238,.40); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.notification-card.unread b { min-width: 36px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--pink); color: #fff; font-size: 9px; }
.notification-card.seen { background: rgba(255,255,255,.055); opacity: .72; }
.stop-live { background: rgba(255,47,126,.92) !important; color: #fff; display: grid !important; place-items: center; line-height: 1; }
.stop-live b { display: block; font-size: 9px; margin-top: 1px; }
.action.owner-inbox span { background: rgba(24,243,238,.18); }
.media-wrap.photo .media-main,
.detail-main,
.hero-upload img,
.show-item img { image-rendering: auto; }
@media (max-width: 420px) {
  .floating-live { right: 10px; bottom: calc(92px + var(--safe-bottom)); width: 54px; min-height: 54px; border-radius: 20px; }
}


/* v14: Live button lives inside the same vertical action rail.
   Only the active reel shows its rail, so the buttons stay in one stable place while scrolling. */
.floating-live { display: none !important; }
.reel-card .action-rail {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(8px,0,0) scale(.985);
  transition: opacity .16s ease, transform .16s ease;
}
.reel-card.is-active .action-rail {
  position: fixed;
  right: max(10px, calc((100vw - min(100vw, 460px)) / 2 + 10px));
  bottom: calc(86px + var(--safe-bottom));
  z-index: 74;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  gap: 8px;
}
.reel-card.is-active .action {
  width: 50px;
  min-height: 50px;
  border-radius: 50%;
}
.reel-card.is-active .action.live {
  background: linear-gradient(145deg, rgba(255,47,126,.96), rgba(24,243,238,.90));
  box-shadow: 0 12px 28px rgba(255,47,126,.20), 0 0 18px rgba(24,243,238,.18);
}
.reel-card.is-active .action.live b { color: #fff; }
.reel-card:not(.is-active) .action-rail button,
.reel-card:not(.is-active) .action-rail a { pointer-events: none; }
@media (max-height: 680px) {
  .reel-card.is-active .action-rail { gap: 6px; bottom: calc(82px + var(--safe-bottom)); }
  .reel-card.is-active .action { width: 46px; min-height: 46px; padding: 5px 2px; }
  .reel-card.is-active .action svg { width: 19px; height: 19px; }
  .reel-card.is-active .action b { font-size: 7.9px; }
}

/* v15 Innovation Suite: ViRadar, Wanted Board, TrustPass, Reserve and Delivery */
.vi-radar-bar {
  display: grid;
  grid-template-columns: 1.15fr 1fr .9fr;
  gap: 8px;
  padding: 0 14px 10px;
  margin-top: -2px;
}
.vi-radar-bar button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  color: #fff;
  border-radius: 19px;
  min-height: 50px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 6px;
  align-items: center;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
}
.vi-radar-bar button span { grid-row: span 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(24,243,238,.14); }
.vi-radar-bar button b { font-size: 12px; line-height: 1; font-weight: 950; letter-spacing: -.03em; }
.vi-radar-bar button small { font-size: 9px; color: rgba(255,255,255,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-radar-bar.has-live #radarOpen span { animation: pulseDot 1.4s infinite; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 rgba(24,243,238,0); } 50% { box-shadow: 0 0 0 8px rgba(24,243,238,.10); } }
.radar-card .sheet-title h3 { background: linear-gradient(120deg, #fff, #18f3ee, #ff2f7e); -webkit-background-clip: text; color: transparent; }
.radar-body { display: grid; gap: 14px; }
.radar-hero, .ai-answer, .price-radar-box, .trust-mini, .profile-trust-card, .profile-qr {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(24,243,238,.10), rgba(255,47,126,.07));
  border-radius: 20px;
  padding: 12px;
}
.radar-hero span, .price-radar-box > span, .trust-mini > span, .profile-trust-card > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.10); }
.price-radar-box svg, .trust-mini svg, .profile-trust-card svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.radar-hero strong, .price-radar-box b, .trust-mini b, .profile-trust-card b { display:block; font-size: 14px; font-weight: 950; }
.radar-hero small, .price-radar-box small, .trust-mini small, .profile-trust-card small, .profile-qr small { display:block; margin-top:2px; color: rgba(255,255,255,.66); font-size: 11px; line-height: 1.25; word-break: break-word; }
.radar-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.radar-stat { border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.07); color: #fff; border-radius: 18px; padding: 8px 4px; display:grid; place-items:center; gap: 2px; }
.radar-stat svg { width: 19px; height: 19px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.radar-stat b { font-size: 16px; font-weight: 1000; }
.radar-stat small { font-size: 8.5px; color: rgba(255,255,255,.64); }
.radar-section { display:grid; gap: 8px; }
.radar-section h4 { margin:0; font-size: 13px; letter-spacing: -.02em; }
.wanted-mini { border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:#fff; border-radius: 16px; padding: 10px; text-align:left; }
.wanted-mini b, .wanted-mini small { display:block; }
.wanted-mini small { color: rgba(255,255,255,.66); margin-top: 3px; }
.request-options { display:grid; gap: 9px; margin: 8px 0 12px; }
.request-options label { display:flex; align-items:center; gap: 8px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius: 15px; padding: 10px; font-weight: 850; }
.request-options input[type="text"], .request-options input:not([type]) { width:100%; }
.price-radar-box.good_deal { border-color: rgba(40,255,166,.36); background: linear-gradient(145deg, rgba(40,255,166,.14), rgba(24,243,238,.08)); }
.price-radar-box.high_price { border-color: rgba(255,190,87,.36); background: linear-gradient(145deg, rgba(255,190,87,.14), rgba(255,47,126,.08)); }
.profile-qr { display:block; }
.profile-qr b { display:block; font-size: 12px; }
.trust-score { display:grid; place-items:center; gap: 5px; padding: 16px; border-radius: 22px; border:1px solid rgba(255,255,255,.14); background: radial-gradient(circle at 50% 0, rgba(24,243,238,.18), rgba(255,255,255,.05)); }
.trust-score svg { width: 36px; height: 36px; fill:none; stroke:currentColor; stroke-width:2.2; }
.trust-score b { font-size: 44px; line-height: .95; }
.trust-score small { text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.68); }
.ai-answer { margin-bottom: 10px; }
.ai-answer svg { width: 22px; height: 22px; fill:none; stroke:currentColor; stroke-width:2.2; }
@media (max-width: 390px) {
  .vi-radar-bar { grid-template-columns: 1fr 1fr; }
  .vi-radar-bar #trustOpen { display:none; }
  .radar-stats { grid-template-columns: repeat(2, 1fr); }
}

/* v17: polish pass for innovation cards, story spacing, bottom nav, compact requests and QR cards */
.topbar {
  gap: 7px;
  padding-left: 10px;
  padding-right: 10px;
}
.vi-radar-bar {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 4px 8px;
  margin-top: 0;
}
.vi-radar-bar button {
  min-height: 46px;
  border-radius: 18px;
  padding: 8px 8px;
  grid-template-columns: 22px 1fr;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.22);
}
.vi-radar-bar button span {
  width: 22px;
  height: 22px;
  font-size: 14px;
}
.vi-radar-bar button b { font-size: 11px; }
.vi-radar-bar button small { font-size: 8px; }
.story-strip {
  top: calc(170px + env(safe-area-inset-top));
  padding: 6px 12px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.02));
  backdrop-filter: blur(3px);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.story-pill { width: 64px; }
.story-pill .story-ring {
  width: 54px;
  height: 54px;
  box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.10);
}
.story-pill span {
  max-width: 64px;
  font-size: 9.5px;
  line-height: 1.1;
  padding: 0 2px;
}
.feed-tabs {
  max-width: 194px;
  gap: 4px;
  background: rgba(0,0,0,.36);
}
.feed-tabs button { font-size: 11.5px; padding-inline: 10px; }
.bottom-nav {
  height: 66px;
  left: 12px;
  right: 12px;
  bottom: calc(8px + var(--safe-bottom));
  border-radius: 28px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(6,8,12,.94), rgba(2,3,5,.92));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);
}
.bottom-nav button {
  border-radius: 18px;
  min-height: 48px;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.bottom-nav button.active:not(.post) {
  color: #fff;
  background: rgba(255,255,255,.10);
}
.bottom-nav button:active { transform: scale(.96); }
.bottom-nav .post {
  width: 68px;
  height: 46px;
  border-radius: 18px;
  box-shadow: -5px 0 0 var(--cyan), 5px 0 0 var(--pink), 0 14px 30px rgba(0,0,0,.25);
}
.wanted-card {
  display: grid;
  gap: 12px;
  padding-left: 18px;
  padding-right: 18px;
}
.wanted-card .sheet-title { margin-bottom: 2px; }
.wanted-card .muted { margin: 0 0 2px; }
.wanted-card textarea,
.wanted-card input {
  margin: 0;
  min-height: 52px;
  border-radius: 20px;
  background: rgba(255,255,255,.085);
}
.wanted-card textarea { min-height: 118px; }
.request-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.request-options label.mini-option {
  min-height: 46px;
  border-radius: 18px;
  justify-content: center;
  font-size: 13px;
  background: rgba(255,255,255,.075);
}
.request-options label.mini-option:has(input:checked) {
  background: linear-gradient(135deg, rgba(24,243,238,.22), rgba(255,47,126,.20));
  border-color: rgba(24,243,238,.32);
}
.request-options input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); }
.request-options .deposit-input,
.request-options #bookingDeliveryArea {
  grid-column: 1 / -1;
  min-height: 48px;
  border-radius: 18px;
}
.profile-qr {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(24,243,238,.065));
}
.qr-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 22px;
  background: #fff;
  padding: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.qr-wrap > img:first-child { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.qr-logo {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  padding: 3px;
  background: #081015;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.24);
}
.profile-qr b { font-size: 13px; }
.profile-qr small { font-size: 11px; color: rgba(255,255,255,.67); }
.profile-qr button { margin-top: 8px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid var(--line); font-weight: 900; }
.live-side .stop-live,
.host-controls #endHostLive {
  background: linear-gradient(135deg, rgba(255,47,126,.95), rgba(255,87,87,.78)) !important;
  color: #fff !important;
}
.live-side button[disabled], .host-controls button[disabled] { opacity: .55; pointer-events: none; }
@media (max-width: 390px) {
  .vi-radar-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vi-radar-bar #trustOpen { display: grid; }
  .vi-radar-bar button { min-height: 44px; padding: 7px 6px; grid-template-columns: 20px 1fr; }
  .vi-radar-bar button span { width: 20px; height: 20px; }
  .vi-radar-bar button b { font-size: 10px; }
  .vi-radar-bar button small { display: none; }
  .story-strip { top: calc(164px + env(safe-area-inset-top)); }
  .feed-tabs { max-width: 166px; }
  .feed-tabs button { font-size: 10.5px; padding-inline: 7px; }
}
@media (max-height: 720px) {
  .story-strip { top: calc(158px + env(safe-area-inset-top)); }
  .vi-radar-bar button { min-height: 42px; }
}

/* v17: Services directory sits below the innovation header, Live owner controls, and Rwanda default polish */
.directory {
  padding-top: calc(208px + env(safe-area-inset-top));
  z-index: 36;
}
.directory .section-head {
  margin-top: 2px;
  padding-top: 4px;
}
.directory .section-head h2 {
  max-width: 320px;
  font-size: clamp(23px, 6.6vw, 31px);
  text-wrap: balance;
}
.live-now-list { display: grid; gap: 10px; }
.live-tile {
  cursor: pointer;
  border-radius: 24px;
  min-height: 78px;
  grid-template-columns: 64px 1fr auto;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(24,243,238,.045));
}
.live-tile.mine-live {
  border-color: rgba(24,243,238,.38);
  background: linear-gradient(145deg, rgba(24,243,238,.16), rgba(255,47,126,.10));
}
.live-tile-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
  align-items: center;
  min-width: 70px;
}
.live-tile-actions b {
  font-size: 10px;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.live-open-mini,
.live-resume-mini,
.live-stop-mini {
  min-width: 62px;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.10);
  color: #fff;
}
.live-resume-mini,
.live-open-mini { background: linear-gradient(135deg, rgba(24,243,238,.75), rgba(255,47,126,.65)); border: 0; }
.live-stop-mini,
.soft.danger { background: rgba(255,47,126,.18); border-color: rgba(255,47,126,.38); color: #fff; }
.live-owner-banner {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(24,243,238,.26);
  background: linear-gradient(145deg, rgba(24,243,238,.14), rgba(255,47,126,.07));
}
.live-owner-banner b { font-size: 14px; }
.live-owner-banner small { color: rgba(255,255,255,.68); }
.live-owner-banner div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.live-side .stop-live {
  background: linear-gradient(135deg, rgba(255,47,126,.98), rgba(255,88,88,.84)) !important;
  color: #fff;
  box-shadow: 0 0 24px rgba(255,47,126,.22);
}
.area-chip span:empty::before { content: "Rwanda"; }
@media (max-width: 390px) {
  .directory { padding-top: calc(196px + env(safe-area-inset-top)); }
  .directory .section-head h2 { font-size: 23px; }
  .live-tile { grid-template-columns: 58px 1fr; }
  .live-tile-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .live-tile-actions b { grid-column: 1 / -1; }
  .live-open-mini, .live-resume-mini, .live-stop-mini { width: 100%; }
}
@media (max-height: 720px) {
  .directory { padding-top: calc(188px + env(safe-area-inset-top)); }
}

/* v18 final polish: tighter Browse header, hidden directory headline, separated TrustPass + QR cards */
.directory {
  padding-top: calc(158px + env(safe-area-inset-top)) !important;
}
.directory .section-head {
  margin: 0 0 10px !important;
  padding: 0 !important;
  align-items: center;
}
.directory .section-head > div {
  min-height: 34px;
  display: grid;
  align-content: center;
}
.directory .section-head small {
  display: inline-flex;
  align-items: center;
  height: 20px;
  line-height: 1;
}
.directory .section-head h2,
.directory-main-title {
  display: none !important;
}
.directory .mini-btn {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.directory .chips {
  margin-top: 0;
  padding-bottom: 10px;
}
.directory .inline-search {
  margin: 6px 0 12px;
}

#profileBody {
  display: grid;
  gap: 13px;
}
#profileBody .profile-actions {
  margin: 0;
}
#profileBody .profile-trust-card,
#profileBody .profile-qr,
#profileBody .profile-hero {
  margin: 0;
}
.profile-trust-card {
  min-height: 74px;
  padding: 14px !important;
  gap: 13px !important;
  align-items: center;
}
.profile-trust-card > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.profile-trust-card b {
  line-height: 1.1;
}
.profile-trust-card small {
  line-height: 1.35 !important;
}
.profile-qr {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 15px !important;
  padding: 14px !important;
  align-items: center !important;
}
.qr-wrap {
  width: 104px !important;
  height: 104px !important;
  border-radius: 24px !important;
}
.profile-qr > span:last-child,
.profile-qr > div:last-child {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: center;
}
.profile-qr b {
  font-size: 14px !important;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.profile-qr small {
  display: block;
  max-width: 100%;
  line-height: 1.25 !important;
  word-break: break-all;
  overflow-wrap: anywhere;
  opacity: .78;
}
.profile-qr button {
  justify-self: start;
  margin-top: 0 !important;
  min-height: 36px;
  padding: 9px 16px !important;
  background: rgba(255,255,255,.13) !important;
}
.showroom-head {
  margin-top: 2px !important;
}

@media (max-width: 390px) {
  .directory { padding-top: calc(148px + env(safe-area-inset-top)) !important; }
  .directory .section-head > div { min-height: 30px; }
  .profile-qr { grid-template-columns: 92px minmax(0, 1fr) !important; gap: 12px !important; padding: 12px !important; }
  .qr-wrap { width: 92px !important; height: 92px !important; }
  .profile-qr b { font-size: 13px !important; }
  .profile-qr small { font-size: 10.5px !important; }
}
@media (max-height: 720px) {
  .directory { padding-top: calc(142px + env(safe-area-inset-top)) !important; }
}

/* v20: product management, sold/available state, multi-photo carousel, owner controls */
.media-wrap.carousel .media-main,
.media-wrap.carousel .media-bg { transition: opacity .28s ease, transform .28s ease; }
.media-dots { position: absolute; z-index: 4; left: 50%; bottom: calc(154px + var(--safe-bottom)); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(14px); }
.media-dots button { width: 7px; height: 7px; border-radius: 999px; padding: 0; background: rgba(255,255,255,.45); }
.media-dots button.active { width: 20px; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 0 0 12px rgba(24,243,238,.55); }
.badge.sold { background: rgba(255,47,126,.92); color: #fff; border-color: rgba(255,255,255,.16); box-shadow: 0 8px 22px rgba(255,47,126,.28); }
.badge.available { background: rgba(37,238,151,.16); color: #dfffee; border-color: rgba(37,238,151,.30); }
.badge.private { background: rgba(255,224,153,.14); color: #ffe7a8; border-color: rgba(255,224,153,.28); }
.owner-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); }
.owner-tools .soft { min-height: 42px; border-radius: 16px; font-weight: 900; }
.owner-tools .danger { color: #fff; background: rgba(255,47,126,.20) !important; border-color: rgba(255,47,126,.35) !important; }
.owner-tools .ok { background: rgba(37,238,151,.14) !important; border-color: rgba(37,238,151,.28) !important; }
.action.owner-edit span { background: rgba(255,224,153,.16); }
.action.owner-status span { background: rgba(37,238,151,.14); }
.multi-preview { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.multi-preview::-webkit-scrollbar { display: none; }
.multi-preview.hidden { display: none; }
.post-thumb { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.post-thumb.active { box-shadow: 0 0 0 2px var(--cyan), 0 0 18px rgba(24,243,238,.28); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-thumb b { position: absolute; right: 4px; bottom: 4px; min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; background: rgba(0,0,0,.68); font-size: 9px; }
.multi-preview small { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 850; }
.detail-media.has-gallery { margin-bottom: 8px; }
.photo-count { position: absolute; z-index: 3; right: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.14); font-size: 11px; font-weight: 900; backdrop-filter: blur(12px); }
.detail-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.detail-thumbs button { height: 70px; border-radius: 18px; overflow: hidden; padding: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.detail-thumbs button.active { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(24,243,238,.28); }
.detail-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.show-item.sold::after { content: "SOLD"; position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 999px; background: rgba(255,47,126,.92); color: #fff; font-size: 9px; font-weight: 950; }
.show-sold { position: absolute; left: 7px; top: 7px; padding: 4px 7px; border-radius: 999px; background: rgba(255,47,126,.92); font-size: 9px; font-weight: 950; }
@media (max-width: 390px) {
  .media-dots { bottom: calc(146px + var(--safe-bottom)); }
  .owner-tools { grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px; }
  .detail-thumbs button { height: 62px; }
}

/* v20: details-only owner tools, cleaner price badges, premium carousel polish */
.card-info {
  gap: 8px;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.32));
}
.card-info h1 {
  letter-spacing: -.06em;
  text-shadow: 0 3px 18px rgba(0,0,0,.58), 0 1px 0 rgba(0,0,0,.35);
}
.card-info p {
  text-shadow: 0 2px 14px rgba(0,0,0,.48);
}
.badge-line {
  gap: 7px;
  max-height: 36px;
}
.badge {
  min-height: 27px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(8,12,16,.54);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.14);
  backdrop-filter: blur(13px);
}
.badge.price {
  background: linear-gradient(135deg, rgba(24,243,238,.20), rgba(255,47,126,.16));
  color: #fff;
  border-color: rgba(255,255,255,.20);
  letter-spacing: -.01em;
}
.badge.available {
  background: rgba(37,238,151,.13);
  color: #f2fff8;
  border-color: rgba(37,238,151,.26);
}
.reel-card.is-active .action.owner-edit,
.reel-card.is-active .action.owner-status,
.action.owner-edit,
.action.owner-status {
  display: none !important;
}
.reel-card.is-active .action {
  box-shadow: 0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
}
.reel-card.is-active .action span {
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
}
.reel-card.is-active .action.get span,
.reel-card.is-active .action.book span,
.reel-card.is-active .action.chat span {
  background: linear-gradient(135deg, rgba(24,243,238,.90), rgba(255,47,126,.82));
  color: #fff;
}
.media-wrap.carousel {
  background: radial-gradient(circle at 50% 8%, rgba(24,243,238,.09), transparent 34%), #020406;
}
.media-wrap.carousel .media-bg {
  transition: opacity .48s ease, transform .76s cubic-bezier(.2,.8,.2,1), filter .48s ease;
  will-change: transform, opacity;
}
.media-wrap.carousel .media-main {
  transition: opacity .42s ease, transform .72s cubic-bezier(.2,.8,.2,1), filter .42s ease;
  will-change: transform, opacity;
}
.media-wrap.carousel.is-changing .media-main {
  opacity: 0 !important;
  transform: scale(.982) translateY(3px);
  filter: saturate(.94) contrast(.98);
}
.media-wrap.carousel.is-changing .media-bg {
  opacity: .46;
  transform: scale(1.15);
  filter: blur(28px) saturate(1.18) brightness(.55);
}
.media-wrap.carousel.loaded:not(.is-changing) .media-main {
  animation: photoFloat 8s ease-in-out infinite alternate;
}
@keyframes photoFloat {
  from { transform: scale(1) translate3d(0,0,0); }
  to { transform: scale(1.012) translate3d(0,-4px,0); }
}
.media-dots {
  bottom: calc(156px + var(--safe-bottom));
  gap: 5px;
  padding: 5px 7px;
  background: rgba(2,4,7,.42);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
}
.media-dots button {
  width: 5px;
  height: 5px;
  opacity: .82;
  transition: width .28s ease, background .28s ease, opacity .28s ease, transform .28s ease;
}
.media-dots button.active {
  width: 28px;
  opacity: 1;
  transform: translateY(-.5px);
  animation: dotGlow 3.9s ease-in-out infinite;
}
@keyframes dotGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(24,243,238,.38); }
  50% { box-shadow: 0 0 18px rgba(255,47,126,.42); }
}
.feed-photo-count {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: calc(152px + env(safe-area-inset-top));
  min-width: 38px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(2,4,7,.44);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 950;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.detail-media {
  box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.detail-media .detail-main,
.detail-media .detail-bg {
  transition: opacity .34s ease, transform .48s cubic-bezier(.2,.8,.2,1), filter .34s ease;
}
.detail-media.is-changing .detail-main {
  opacity: 0;
  transform: scale(.985) translateY(3px);
}
.detail-media.is-changing .detail-bg {
  opacity: .48;
  transform: scale(1.06);
}
.detail-thumbs {
  gap: 10px;
}
.detail-thumbs button {
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.detail-thumbs button.active {
  transform: translateY(-2px);
  border-color: rgba(24,243,238,.75);
  box-shadow: 0 12px 28px rgba(24,243,238,.13), 0 0 0 2px rgba(24,243,238,.24);
}
.owner-tools {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(24,243,238,.075), rgba(255,47,126,.045));
  border-color: rgba(255,255,255,.13);
}
@media (max-width: 390px) {
  .media-dots { bottom: calc(150px + var(--safe-bottom)); }
  .feed-photo-count { right: 12px; top: calc(144px + env(safe-area-inset-top)); }
  .badge { padding: 6px 9px; }
}

/* v21: action rail, photo counter and story strip final visual cleanup */
.story-strip {
  top: calc(166px + env(safe-area-inset-top)) !important;
  padding: 5px 12px 9px !important;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.story-pill { width: 62px !important; gap: 4px !important; }
.story-pill .story-ring {
  width: 52px !important;
  height: 52px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.14) !important;
}
.story-pill.add-story .story-ring {
  background: rgba(255,255,255,.13) !important;
  border: 1px dashed rgba(255,255,255,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 12px 24px rgba(0,0,0,.24) !important;
}
.story-pill span {
  max-width: 62px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.82) !important;
}

/* TikTok-like clean rail: round icon discs, no clipped triangle blocks */
.reel-card.is-active .action-rail {
  right: max(10px, calc((100vw - min(100vw, 460px)) / 2 + 10px)) !important;
  bottom: calc(86px + var(--safe-bottom)) !important;
  gap: 8px !important;
  width: 56px !important;
  align-items: center !important;
  justify-items: center !important;
  background: transparent !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
.reel-card.is-active .action,
.action {
  width: 54px !important;
  min-height: 58px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}
.reel-card.is-active .action span,
.action span {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(5,8,12,.58) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 26px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  color: #fff !important;
  overflow: hidden !important;
}
.reel-card.is-active .action svg,
.action svg {
  width: 21px !important;
  height: 21px !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.26));
}
.reel-card.is-active .action b,
.action b {
  display: block !important;
  max-width: 58px !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.9) !important;
}
.reel-card.is-active .action.get span,
.reel-card.is-active .action.book span,
.reel-card.is-active .action.chat span,
.reel-card.is-active .action.live span,
.action.get span,
.action.book span,
.action.chat span,
.action.live span {
  border: 0 !important;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.55), transparent 24%), linear-gradient(145deg, var(--cyan), var(--pink)) !important;
  box-shadow: 0 12px 28px rgba(255,47,126,.28), 0 0 22px rgba(24,243,238,.20), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.reel-card.is-active .action.chat span,
.action.chat span {
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.55), transparent 24%), linear-gradient(145deg, #25ee97, #18f3ee) !important;
  color: #031314 !important;
}
.reel-card.is-active .action.live span,
.action.live span {
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.50), transparent 24%), linear-gradient(145deg, #ff2f7e, #18f3ee) !important;
}
.reel-card.is-active .action.owner-inbox span,
.action.owner-inbox span {
  background: rgba(24,243,238,.18) !important;
  color: #fff !important;
}

/* Put image count near the carousel controls, away from the top header/stories */
.feed-photo-count {
  top: auto !important;
  right: auto !important;
  left: 50% !important;
  bottom: calc(190px + var(--safe-bottom)) !important;
  transform: translateX(-50%) !important;
  min-width: 42px !important;
  height: 24px !important;
  padding: 0 10px !important;
  background: rgba(2,4,7,.56) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-size: 10.5px !important;
  letter-spacing: .01em !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.media-dots {
  bottom: calc(160px + var(--safe-bottom)) !important;
  background: rgba(2,4,7,.38) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.photo-count {
  top: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  background: rgba(2,4,7,.54) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Narrow-device balancing */
@media (max-width: 390px) {
  .story-strip { top: calc(160px + env(safe-area-inset-top)) !important; padding-inline: 10px !important; }
  .story-pill { width: 58px !important; }
  .story-pill .story-ring { width: 49px !important; height: 49px !important; }
  .story-pill span { max-width: 58px !important; font-size: 8.5px !important; }
  .reel-card.is-active .action-rail { right: max(7px, calc((100vw - min(100vw, 460px)) / 2 + 7px)) !important; gap: 6px !important; bottom: calc(84px + var(--safe-bottom)) !important; }
  .reel-card.is-active .action, .action { width: 48px !important; min-height: 54px !important; }
  .reel-card.is-active .action span, .action span { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
  .reel-card.is-active .action svg, .action svg { width: 19px !important; height: 19px !important; }
  .reel-card.is-active .action b, .action b { font-size: 7.5px !important; max-width: 50px !important; }
  .feed-photo-count { bottom: calc(180px + var(--safe-bottom)) !important; }
  .media-dots { bottom: calc(152px + var(--safe-bottom)) !important; }
}
@media (max-height: 710px) {
  .story-strip { top: calc(154px + env(safe-area-inset-top)) !important; }
  .reel-card.is-active .action-rail { gap: 5px !important; bottom: calc(80px + var(--safe-bottom)) !important; }
  .reel-card.is-active .action, .action { min-height: 50px !important; }
  .reel-card.is-active .action span, .action span { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
  .reel-card.is-active .action b, .action b { font-size: 7.2px !important; }
  .feed-photo-count { bottom: calc(168px + var(--safe-bottom)) !important; }
  .media-dots { bottom: calc(141px + var(--safe-bottom)) !important; }
}

/* v23: cinematic caption polish, twin-dot loading and safer small-screen polish */
.boot-loader {
  position: absolute;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 30% 16%, rgba(24,243,238,.24), transparent 34%),
    radial-gradient(circle at 70% 84%, rgba(255,47,126,.20), transparent 32%),
    #030507;
  transition: opacity .38s ease, transform .38s ease, visibility .38s ease;
}
.boot-loader b { font-size: 19px; font-weight: 980; letter-spacing: -.045em; }
.boot-loader small { max-width: 230px; color: rgba(255,255,255,.66); font-size: 12px; text-align: center; }
.app-ready .boot-loader { opacity: 0; transform: scale(1.025); visibility: hidden; pointer-events: none; }
.twin-dots { position: relative; width: 58px; height: 22px; display: inline-grid; place-items: center; }
.twin-dots i { position: absolute; width: 16px; height: 16px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 20px rgba(24,243,238,.75); animation: twinDotA 1.05s ease-in-out infinite; }
.twin-dots i:nth-child(2) { background: var(--pink); box-shadow: 0 0 20px rgba(255,47,126,.72); animation-name: twinDotB; }
@keyframes twinDotA { 0%,100% { transform: translateX(-15px) scale(.82); opacity: .72; } 50% { transform: translateX(15px) scale(1.18); opacity: 1; } }
@keyframes twinDotB { 0%,100% { transform: translateX(15px) scale(1.18); opacity: 1; } 50% { transform: translateX(-15px) scale(.82); opacity: .72; } }
.media-loader { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; transition: opacity .25s ease; pointer-events: none; }
.media-loader.twin-dots { transform: translate(-50%, -50%); }
.media-wrap.loaded .media-loader { opacity: 0; }
.media-wrap.loading .media-loader { opacity: 1; }

/* Readability on bright photos: keep the photo beautiful, but make commerce data legible. */
.media-wrap.photo .media-main,
.media-wrap.photo.portrait .media-main,
.media-wrap.photo.landscape .media-main,
.media-wrap.photo.squareish .media-main {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}
.media-wrap.photo::after,
.media-wrap::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.12) 54%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.96) 100%),
    radial-gradient(ellipse at bottom left, rgba(0,0,0,.78), transparent 54%),
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 44%, rgba(0,0,0,.20));
}
.card-info {
  padding: 10px 10px 11px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(3,6,9,.32), rgba(3,6,9,.54)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  text-shadow: none !important;
}
.seller-line {
  background: rgba(2,4,7,.58) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.card-info h1 {
  color: #fff !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.82), 0 1px 0 rgba(0,0,0,.55) !important;
}
.card-info p {
  color: rgba(255,255,255,.96) !important;
  background: rgba(1,4,7,.38) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  padding: 8px 10px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.badge-line { gap: 6px !important; max-height: none !important; overflow: visible !important; }
.badge-line .badge {
  min-height: 28px !important;
  padding: 7px 10px !important;
  font-size: 10px !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.badge.price {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(24,243,238,.88), rgba(255,47,126,.86)) !important;
  border: 0 !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.52) !important;
  font-weight: 970 !important;
}
.badge.available {
  color: #04160e !important;
  background: linear-gradient(135deg, rgba(37,238,151,.96), rgba(226,255,243,.90)) !important;
  border: 0 !important;
  text-shadow: none !important;
  font-weight: 980 !important;
}
.tag-line { max-height: 34px !important; }
.tag {
  background: rgba(3,6,9,.50) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}
.toast { backdrop-filter: blur(18px) saturate(1.1); }

@media (max-width: 390px) {
  .card-info { left: 10px !important; right: 70px !important; padding: 9px !important; gap: 6px !important; }
  .card-info h1 { font-size: clamp(24px, 7.1vw, 31px) !important; max-height: 65px !important; }
  .card-info p { font-size: 12.5px !important; line-height: 1.28 !important; max-height: 54px !important; padding: 7px 9px !important; }
  .badge-line .badge { min-height: 25px !important; padding: 6px 8px !important; font-size: 9px !important; }
  .seller-line .seller-name { max-width: 132px !important; }
}

/* v23: beautiful readability without the heavy info card */
.card-info {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  isolation: isolate;
}
.card-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -24px;
  right: -12px;
  bottom: -18px;
  height: calc(100% + 40px);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 44%, rgba(0,0,0,.82), rgba(0,0,0,.42) 44%, transparent 72%),
    linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.30) 56%, transparent 100%);
  filter: blur(15px);
  opacity: .92;
}
.card-info .seller-line {
  margin-bottom: 1px !important;
  background: rgba(0,0,0,.48) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.13) !important;
}
.card-info h1 {
  color: #fff !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.50),
    0 6px 18px rgba(0,0,0,.92),
    0 0 28px rgba(0,0,0,.72) !important;
  -webkit-text-stroke: .22px rgba(0,0,0,.38);
}
.card-info p {
  color: rgba(255,255,255,.96) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.42),
    0 5px 14px rgba(0,0,0,.88),
    0 0 22px rgba(0,0,0,.70) !important;
  -webkit-text-stroke: .14px rgba(0,0,0,.32);
}
.badge-line {
  gap: 7px !important;
  max-height: 34px !important;
  overflow: visible !important;
}
.badge-line .badge {
  min-height: 27px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 9.7px !important;
  line-height: 1 !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
}
.badge.price {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(24,243,238,.96), rgba(255,47,126,.90)) !important;
  border: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
  letter-spacing: 0 !important;
}
.badge.available {
  color: #052014 !important;
  background: linear-gradient(135deg, rgba(37,238,151,1), rgba(221,255,241,.96)) !important;
  border: 0 !important;
  text-shadow: none !important;
}
.badge.sold {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,47,126,.98), rgba(255,120,168,.88)) !important;
  border: 0 !important;
}
.tag-line { max-height: 30px !important; }
.tag {
  background: rgba(0,0,0,.34) !important;
  border-color: rgba(255,255,255,.14) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.60) !important;
  backdrop-filter: blur(10px) !important;
}
.media-wrap.photo::after,
.media-wrap::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.05) 26%, rgba(0,0,0,.10) 54%, rgba(0,0,0,.66) 77%, rgba(0,0,0,.96) 100%),
    radial-gradient(ellipse at 0% 82%, rgba(0,0,0,.78), rgba(0,0,0,.42) 28%, transparent 66%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 47%, rgba(0,0,0,.16)) !important;
}
@media (max-width: 390px) {
  .card-info {
    left: 12px !important;
    right: 70px !important;
    bottom: calc(80px + var(--safe-bottom)) !important;
    gap: 6px !important;
  }
  .card-info::before {
    left: -20px;
    right: -10px;
    bottom: -18px;
    height: calc(100% + 36px);
    filter: blur(13px);
  }
  .card-info h1 {
    font-size: clamp(25px, 7.3vw, 31px) !important;
    max-height: 66px !important;
  }
  .card-info p {
    font-size: 12.7px !important;
    line-height: 1.30 !important;
    max-height: 52px !important;
  }
  .badge-line { gap: 5px !important; max-height: 31px !important; }
  .badge-line .badge { min-height: 24px !important; padding: 6px 8px !important; font-size: 8.8px !important; }
}


/* v23: no-card cinematic caption polish */
.reel-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 78%, rgba(0,0,0,.78), rgba(0,0,0,.36) 32%, transparent 64%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.14) 27%, rgba(0,0,0,.66) 69%, rgba(0,0,0,.94) 100%);
}
.media-wrap.photo::after,
.media-wrap::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.05) 28%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.58) 82%, rgba(0,0,0,.90) 100%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 46%, rgba(0,0,0,.14));
}
.card-glow {
  height: 42% !important;
  opacity: .68 !important;
  background: radial-gradient(ellipse at bottom left, rgba(24,243,238,.20), transparent 48%), radial-gradient(ellipse at bottom right, rgba(255,47,126,.18), transparent 44%) !important;
}
.card-info {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  gap: 8px !important;
}
.card-info .seller-line {
  background: rgba(2,5,8,.56) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
}
.card-info h1 {
  max-width: min(100%, 335px) !important;
  color: #fff !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.95), 0 1px 1px rgba(0,0,0,.72), 0 0 1px rgba(0,0,0,.90) !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}
.card-info p {
  max-width: min(100%, 335px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 3px 13px rgba(0,0,0,.96), 0 1px 1px rgba(0,0,0,.78) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.badge-line {
  gap: 7px !important;
  max-width: min(100%, 340px) !important;
}
.badge-line .badge {
  min-height: 25px !important;
  padding: 6px 9px !important;
  font-size: 9.4px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.badge.price {
  background: linear-gradient(135deg, rgba(24,243,238,.94), rgba(255,47,126,.90)) !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.58) !important;
}
.badge.available {
  background: linear-gradient(135deg, rgba(37,238,151,.96), rgba(230,255,246,.92)) !important;
  color: #03160f !important;
}
.tag-line {
  max-width: min(100%, 342px) !important;
  max-height: 32px !important;
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.tag {
  background: rgba(4,8,12,.46) !important;
  border-color: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) !important;
}
.empty-card .card-info {
  padding: 0 15px !important;
}
@media (max-width: 390px) {
  .card-info { left: 12px !important; right: 72px !important; bottom: calc(82px + var(--safe-bottom)) !important; gap: 6px !important; }
  .card-info h1 { font-size: clamp(25px, 8vw, 32px) !important; max-height: 72px !important; }
  .card-info p { font-size: 13px !important; line-height: 1.29 !important; -webkit-line-clamp: 3 !important; }
  .badge-line .badge { min-height: 24px !important; padding: 5.5px 8px !important; font-size: 8.8px !important; }
}
@media (max-height: 710px) {
  .card-info { gap: 5px !important; bottom: calc(74px + var(--safe-bottom)) !important; }
  .card-info p { -webkit-line-clamp: 2 !important; }
  .tag-line { display: none !important; }
}

/* v28: Pricing, MTN MoMo checkout and package access */
.vi-radar-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.vi-radar-bar button {
  min-height: 45px !important;
  padding: 7px 6px !important;
  grid-template-columns: 20px 1fr !important;
}
.vi-radar-bar button span { width: 20px !important; height: 20px !important; font-size: 13px !important; }
.vi-radar-bar button b { font-size: 10.2px !important; }
.vi-radar-bar button small { font-size: 7.4px !important; }
.vi-radar-bar #pricingOpen.is-pro {
  border-color: rgba(255,47,126,.36);
  background: linear-gradient(145deg, rgba(255,47,126,.20), rgba(24,243,238,.12));
}
.pricing-card { max-width: 520px; }
.pricing-body { display: grid; gap: 12px; }
.current-plan-box,
.account-plan-card,
.momo-note,
.payment-result,
.momo-checkout,
.pricing-plan {
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.22);
}
.current-plan-box,
.account-plan-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
}
.account-plan-card { margin-bottom: 12px; }
.current-plan-box > div,
.account-plan-card > div { min-width: 0; flex: 1; }
.current-plan-box small,
.account-plan-card small,
.plan-head small,
.momo-note small,
.payment-result small { color: rgba(255,255,255,.65); display: block; }
.current-plan-box b,
.account-plan-card b { display: block; font-size: 15px; font-weight: 1000; letter-spacing: -.03em; }
.current-plan-box em,
.account-plan-card em { display:block; font-size: 11px; color: rgba(255,255,255,.65); font-style: normal; line-height: 1.35; }
.account-plan-card button,
.current-plan-box button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  color: #061014;
  font-weight: 1000;
  padding: 10px 13px;
  background: linear-gradient(135deg, var(--cyan), #fff, var(--pink));
  white-space: nowrap;
}
.plan-orb {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.85), rgba(24,243,238,.30) 35%, rgba(255,47,126,.36));
  color: #fff;
  box-shadow: 0 12px 28px rgba(24,243,238,.12), inset 0 1px 0 rgba(255,255,255,.38);
}
.plan-orb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pricing-grid { display: grid; gap: 10px; }
.pricing-plan { padding: 13px; display: grid; gap: 10px; position: relative; overflow: hidden; }
.pricing-plan.current { border-color: rgba(40,255,166,.34); background: linear-gradient(145deg, rgba(40,255,166,.14), rgba(24,243,238,.08)); }
.pricing-plan.business_plus { border-color: rgba(255,47,126,.26); }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-head > span { width: 38px; height: 38px; border-radius: 14px; display:grid; place-items:center; background: rgba(255,255,255,.10); }
.plan-head svg { width: 22px; height: 22px; fill:none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-head h4 { margin: 0; font-size: 18px; letter-spacing: -.04em; }
.plan-price { font-size: 18px; letter-spacing: -.03em; }
.pricing-plan ul { margin: 0; padding-left: 18px; color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.55; }
.plan-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.momo-checkout { padding: 14px; display: grid; gap: 10px; }
.checkout-hero { display: flex; gap: 12px; align-items: center; }
.checkout-hero h4 { margin: 0; font-size: 20px; }
.checkout-hero b { color: #fff; }
.momo-checkout input,
.momo-checkout textarea { width: 100%; }
.momo-note { padding: 12px; display: grid; gap: 3px; }
.payment-result { text-align: center; padding: 24px 14px; display: grid; justify-items: center; gap: 9px; }
.payment-ref {
  display: inline-flex;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  letter-spacing: .08em;
}
.mini-muted { color: rgba(255,255,255,.58); font-size: 12px; }
@media (max-width: 390px) {
  .vi-radar-bar { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; }
  .vi-radar-bar button { min-height: 40px !important; padding: 6px 4px !important; grid-template-columns: 18px 1fr !important; border-radius: 15px !important; }
  .vi-radar-bar button span { width: 18px !important; height: 18px !important; font-size: 11px !important; }
  .vi-radar-bar button b { font-size: 8.8px !important; }
  .vi-radar-bar button small { display: none !important; }
  .account-plan-card { align-items: flex-start; }
  .account-plan-card button { padding-inline: 10px; font-size: 11px; }
}


/* v28: active plan polish, shop-name pricing chip and live Mobile Money checkout */
.vi-radar-bar #pricingOpen {
  grid-template-columns: 22px 1fr !important;
  align-items: center !important;
}
.vi-radar-bar #pricingOpen b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px !important;
}
.vi-radar-bar #pricingOpen small {
  display: block !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.78) !important;
}
.active-plan-box {
  border-color: rgba(40,255,166,.34) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(40,255,166,.18), transparent 34%),
    linear-gradient(145deg, rgba(24,243,238,.12), rgba(255,47,126,.08)) !important;
}
.active-plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #061014;
  font-weight: 1000;
  font-size: 11px;
  background: linear-gradient(135deg, #28ffa6, #fff, var(--cyan));
  box-shadow: 0 12px 24px rgba(24,243,238,.16);
}
.pricing-plan.current::after {
  content: 'ACTIVE';
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 1000;
  color: #061014;
  background: linear-gradient(135deg, #28ffa6, #fff);
}
.momo-note { display: none !important; }
@media (max-width: 390px) {
  .vi-radar-bar #pricingOpen b { font-size: 8.6px !important; }
  .vi-radar-bar #pricingOpen small { display:block !important; font-size: 7.2px !important; }
  .active-plan-pill { min-width: 48px; padding-inline: 9px; }
}

/* v28: Mobile Money checkout polish */
.payment-checkout {
  gap: 12px !important;
}
.pay-method-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(40,255,166,.22);
  background: linear-gradient(135deg, rgba(40,255,166,.13), rgba(24,243,238,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pay-method-card > span {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  color: #fff;
}
.pay-method-card svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pay-method-card b { display:block; font-size: 14px; }
.pay-method-card small { color: rgba(255,255,255,.62); }
.payment-result.success {
  background: radial-gradient(circle at 50% 0%, rgba(40,255,166,.18), transparent 40%);
}
.payment-result.danger {
  background: radial-gradient(circle at 50% 0%, rgba(255,47,126,.18), transparent 42%);
}
.pay-loader {
  margin: 4px auto;
}
.twin-dots.tiny {
  display: inline-flex;
  width: 26px;
  margin-right: 8px;
  vertical-align: middle;
}
.twin-dots.tiny i {
  width: 7px;
  height: 7px;
}

/* v30: resilient payment state */
.payment-inline-error{
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,70,95,.14);
  border: 1px solid rgba(255,120,140,.28);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
}
.payment-provider-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* v30: production payment inline diagnostics */
.payment-inline-status { display:flex; align-items:flex-start; gap:8px; padding:11px 12px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font-size:12px; line-height:1.35; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.payment-inline-status.hidden { display:none; }
.payment-inline-status.danger { border-color:rgba(255,47,126,.34); background:rgba(255,47,126,.12); }
.payment-inline-status.info { border-color:rgba(24,243,238,.30); background:rgba(24,243,238,.10); }
.payment-inline-status b { font-weight:800; }
.payment-result.danger .payment-ref { border-color:rgba(255,47,126,.35); background:rgba(255,47,126,.10); }

/* v30: product picker for Boost 24h, no manual Product ID */
.boost-product-picker label {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(255,255,255,.78);
  letter-spacing: .02em;
}
.boost-selected {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
}
.boost-selected img {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
}
.boost-selected b {
  display: block;
  color: #fff;
  font-size: 13px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boost-selected small {
  display: block;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  margin-top: 2px;
}
.boost-empty-note {
  grid-template-columns: 38px 1fr;
  align-items: center;
}
.boost-empty-note > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(24,243,238,.12);
  color: #18f3ee;
}
.boost-empty-note small {
  font-size: 12px;
  color: rgba(255,255,255,.66);
  line-height: 1.45;
}


/* v30: clean payment checkout + visual Boost picker */
.boost-picker{display:grid;gap:10px;padding:12px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.boost-picker label{font-weight:850;font-size:13px;letter-spacing:.01em;color:#fff}
.boost-picker select{width:100%;min-height:44px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(6,10,20,.72);color:#fff;padding:0 12px;outline:none}
.boost-card-list{display:grid;grid-template-columns:1fr;gap:8px;max-height:230px;overflow:auto;padding-right:2px}
.boost-product-card{display:grid;grid-template-columns:48px 1fr 26px;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:#fff;border-radius:18px;padding:8px;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.boost-product-card:active{transform:scale(.985)}
.boost-product-card.active{border-color:rgba(24,243,238,.46);background:linear-gradient(135deg,rgba(24,243,238,.16),rgba(255,47,126,.10))}
.boost-product-card img{width:48px;height:48px;border-radius:15px;object-fit:cover;background:#111827}
.boost-product-card b{display:block;font-size:13px;line-height:1.15;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boost-product-card small{display:block;margin-top:3px;color:rgba(255,255,255,.65);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boost-product-card i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#071018;background:linear-gradient(135deg,#18f3ee,#ff2f7e);font-style:normal;font-weight:900;opacity:.92}
.boost-product-card:not(.active) i{background:rgba(255,255,255,.10);color:transparent}
.boost-empty{display:flex;gap:10px;align-items:center;padding:13px;border-radius:20px;background:rgba(255,47,126,.11);border:1px solid rgba(255,47,126,.24);color:#fff}
.boost-empty span{width:34px;height:34px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.10)}
.approve-phone{text-align:center;color:rgba(255,255,255,.78)!important}


/* v30.1: Boost picker is card-only, no confusing product ID/select field */
.boost-picker select{display:none!important}
.boost-picker-label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 0}
.boost-picker-label b{font-size:13px;color:#fff;letter-spacing:.01em}
.boost-picker-label small{font-size:10.5px;color:rgba(255,255,255,.60);white-space:nowrap}
.boost-card-list{max-height:252px!important}
.boost-product-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.boost-product-card.active{border-color:rgba(40,255,166,.50)!important;background:linear-gradient(135deg,rgba(40,255,166,.15),rgba(24,243,238,.10))!important}
.boost-product-card.active i{background:linear-gradient(135deg,#28ffa6,#fff)!important;color:#061014!important}
@media(max-width:390px){.boost-picker-label{display:grid}.boost-picker-label small{white-space:normal}.boost-card-list{max-height:220px!important}}

/* v30: visual Boost 24h selector, no product ID input */
.boost-picker select,
.boost-picker input[type="hidden"]{display:none!important}
.boost-picker{gap:11px!important}
.boost-picker label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.boost-card-list{display:grid!important;gap:9px!important;max-height:270px!important;overflow:auto!important;padding:1px 2px 3px!important}
.boost-product-card{appearance:none;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.065)!important;border-radius:20px!important;padding:8px!important;display:grid!important;grid-template-columns:52px 1fr 28px!important;gap:10px!important;align-items:center!important;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important}
.boost-product-card:hover{border-color:rgba(24,243,238,.32)!important;background:rgba(255,255,255,.09)!important}
.boost-product-card.active{border-color:rgba(40,255,166,.55)!important;background:linear-gradient(135deg,rgba(40,255,166,.16),rgba(24,243,238,.10),rgba(255,47,126,.08))!important;box-shadow:0 14px 28px rgba(24,243,238,.10),inset 0 1px 0 rgba(255,255,255,.12)!important}
.boost-product-card img{width:52px!important;height:52px!important;border-radius:16px!important;object-fit:cover!important;background:#111827!important}
.boost-product-card i{font-size:14px!important}
.boost-empty{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.18)}
.approve-phone{font-weight:900;color:rgba(255,255,255,.76)!important}


/* v31: cleaner payment status and compact Boost picker cards */
.payment-ref { display: none !important; }
.payment-result { gap: 11px; }
.payment-result p { margin: 0; font-weight: 850; color: rgba(255,255,255,.90); }
.payment-result .payment-provider-status { margin-top: -2px; }
.boost-picker { gap: 11px; overflow: hidden; }
.boost-picker-label { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.boost-picker-label b { font-size: 13px; line-height: 1.2; }
.boost-picker-label small { max-width: 45%; text-align:right; font-size: 10px; line-height:1.25; color:rgba(255,255,255,.58); }
.boost-card-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: min(288px, 34vh) !important;
  overflow: auto !important;
  padding: 2px 2px 4px !important;
  scrollbar-width: thin;
}
.boost-product-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 20px !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 7px !important;
  border-radius: 17px !important;
  overflow: hidden !important;
}
.boost-card-media { width:44px; height:44px; border-radius:14px; overflow:hidden; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); display:block; }
.boost-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.boost-product-card > img { display:none !important; }
.boost-card-meta { min-width:0; display:grid; gap:3px; }
.boost-card-meta b, .boost-product-card b { font-size: 12px !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.boost-card-meta small, .boost-product-card small { font-size: 10.5px !important; color:rgba(255,255,255,.68) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.boost-product-card i { width:20px !important; height:20px !important; font-size:12px !important; align-self:center; justify-self:end; }
@media (max-width: 365px) {
  .boost-card-list { grid-template-columns: 1fr !important; max-height: 260px !important; }
  .boost-picker-label { display:grid; }
  .boost-picker-label small { max-width:100%; text-align:left; }
}

/* v31 final: clean payment waiting card and fit Boost cards */
.payment-result .payment-ref,
.payment-result [data-ref],
.payment-result .transaction-ref{display:none!important}
.payment-result{padding:24px 18px!important;border-radius:26px!important}
.payment-result .payment-plan-line{
  margin: 0!important;
  width:min(100%, 340px)!important;
  padding: 12px 14px!important;
  border-radius: 20px!important;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#fff!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  line-height:1.28!important;
}
.payment-result .payment-provider-status{
  border-radius:999px!important;
  padding:6px 12px!important;
  letter-spacing:.10em!important;
}

.boost-card-list.boost-card-grid{
  display:grid!important;
  grid-template-columns: repeat(2, minmax(0, 1fr))!important;
  gap: 10px!important;
  max-height: min(340px, 38vh)!important;
  overflow:auto!important;
  padding:2px 2px 5px!important;
}
.boost-product-card.boost-product-tile{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:84px auto!important;
  gap:8px!important;
  min-width:0!important;
  min-height:0!important;
  padding:7px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  align-items:stretch!important;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.boost-product-card.boost-product-tile.active{
  border-color:rgba(40,255,166,.62)!important;
  background:linear-gradient(145deg, rgba(40,255,166,.15), rgba(24,243,238,.08), rgba(255,47,126,.07))!important;
  box-shadow:0 14px 28px rgba(24,243,238,.10), inset 0 1px 0 rgba(255,255,255,.13)!important;
}
.boost-thumb{
  display:block!important;
  width:100%!important;
  height:84px!important;
  border-radius:17px!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.30)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.boost-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:0!important;
}
.boost-copy{
  display:grid!important;
  gap:3px!important;
  min-width:0!important;
  padding:0 2px 1px!important;
}
.boost-copy b{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:12px!important;
  line-height:1.15!important;
  color:#fff!important;
}
.boost-copy small{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:10px!important;
  color:rgba(255,255,255,.62)!important;
}
.boost-product-card.boost-product-tile i{
  position:absolute!important;
  top:9px!important;
  right:9px!important;
  width:24px!important;
  height:24px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.26)!important;
  z-index:3!important;
}
.boost-product-card.boost-product-tile:not(.active) i{background:rgba(0,0,0,.38)!important;color:transparent!important}
@media(max-width:365px){
  .boost-card-list.boost-card-grid{gap:8px!important;max-height:320px!important}
  .boost-product-card.boost-product-tile{grid-template-rows:74px auto!important;border-radius:20px!important;padding:6px!important}
  .boost-thumb{height:74px!important;border-radius:15px!important}
  .boost-copy b{font-size:11.5px!important}
}

/* v32 Escrow balance, product payment and seller wallet polish */
.wallet-mini-wrap { margin: 10px 0; }
.wallet-mini { width: 100%; display: flex; gap: 12px; align-items: center; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(32,221,219,.14), rgba(255,47,135,.12)); color: #fff; border-radius: 22px; padding: 12px 14px; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.wallet-mini span:first-child, .escrow-note span, .order-pay-card + .escrow-note span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, rgba(36,232,231,.35), rgba(255,45,135,.34)); flex: 0 0 auto; }
.wallet-mini svg, .escrow-note svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.wallet-mini small, .wallet-mini em { color: rgba(255,255,255,.68); font-size: 12px; font-style: normal; display: block; }
.wallet-mini b { font-size: 18px; letter-spacing: -.02em; }
.wallet-card .sheet-title { position: sticky; top: 0; z-index: 3; backdrop-filter: blur(18px); }
.wallet-body { display: grid; gap: 14px; }
.wallet-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wallet-hero > div { min-height: 82px; border-radius: 24px; padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; justify-content: center; }
.wallet-hero small { color: rgba(255,255,255,.58); font-size: 11px; }
.wallet-hero b { font-size: 16px; line-height: 1.15; }
.escrow-note { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 24px; background: linear-gradient(135deg, rgba(31,224,222,.12), rgba(255,43,133,.1)); border: 1px solid rgba(255,255,255,.14); }
.escrow-note b { display:block; font-size: 14px; }
.escrow-note small { display:block; margin-top: 3px; color: rgba(255,255,255,.66); line-height: 1.35; }
.wallet-list { display: grid; gap: 10px; }
.wallet-order { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.065); }
.wallet-order img { width: 54px; height: 54px; object-fit: cover; border-radius: 16px; }
.wallet-order b, .wallet-order small, .wallet-order em { display:block; }
.wallet-order small, .wallet-order em { color: rgba(255,255,255,.64); font-size: 12px; font-style: normal; }
.wallet-order .tiny { min-height: 34px; padding: 8px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.wallet-tx { display:grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); }
.wallet-tx span { font-size: 12px; color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .04em; }
.wallet-tx small { grid-column: 1 / -1; color: rgba(255,255,255,.62); }
.wallet-tx b.positive { color: #66f7bd; }
.wallet-tx b.negative { color: #ff86a8; }
.order-checkout { display: grid; gap: 14px; }
.order-pay-card { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.14); }
.order-pay-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 22px; }
.order-pay-card small { color: #30eeee; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 11px; }
.order-pay-card h4 { margin: 2px 0; font-size: 20px; line-height: 1.05; }
.order-pay-card b { font-size: 18px; }
.fee-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px 14px; border-radius: 22px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); }
.fee-grid span { color: rgba(255,255,255,.66); }
.fee-grid b { color: #fff; }
@media (max-width: 420px) { .wallet-hero { grid-template-columns: 1fr; } .wallet-order { grid-template-columns: 48px 1fr; } .wallet-order .tiny { grid-column: 1 / -1; } .order-pay-card { grid-template-columns: 72px 1fr; } .order-pay-card img { width:72px;height:72px;border-radius:18px; } }

/* v32 escrow wallet and buyer-protection polish */
.wallet-mini-holder{margin:10px 0 14px}.wallet-mini{width:100%;display:flex;gap:12px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(32,226,225,.13),rgba(236,50,132,.10));border-radius:24px;padding:12px 14px;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.20)}.wallet-mini span{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));box-shadow:0 10px 25px rgba(32,226,225,.18)}.wallet-mini svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2}.wallet-mini div{display:flex;flex-direction:column;gap:2px}.wallet-mini small,.wallet-mini em{color:rgba(255,255,255,.70);font-style:normal}.wallet-mini b{font-size:1.25rem}.wallet-card{max-width:560px}.wallet-body{display:flex;flex-direction:column;gap:14px}.wallet-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wallet-hero>div{padding:14px 10px;border-radius:22px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:6px}.wallet-hero small{font-size:.72rem;color:rgba(255,255,255,.68)}.wallet-hero b{font-size:1.05rem}.escrow-note{display:flex;gap:12px;align-items:center;padding:13px 14px;border-radius:22px;background:linear-gradient(135deg,rgba(25,222,196,.12),rgba(236,50,132,.09));border:1px solid rgba(255,255,255,.13)}.escrow-note>span{width:44px;height:44px;border-radius:17px;display:grid;place-items:center;background:rgba(255,255,255,.09)}.escrow-note svg{width:22px;height:22px;fill:none;stroke:#56fff3;stroke-width:2}.escrow-note div{display:flex;flex-direction:column;gap:3px}.escrow-note small{color:rgba(255,255,255,.68)}.wallet-list{display:flex;flex-direction:column;gap:10px}.wallet-order{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;padding:10px;border-radius:22px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12)}.wallet-order img{width:58px;height:58px;border-radius:18px;object-fit:cover;background:#111}.wallet-order div{min-width:0;display:flex;flex-direction:column;gap:3px}.wallet-order b{font-size:.97rem}.wallet-order small,.wallet-order em{font-size:.76rem;color:rgba(255,255,255,.68);font-style:normal}.wallet-order-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.wallet-order-actions button{min-height:36px;font-size:.78rem}.wallet-tx{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}.wallet-tx span{font-weight:800}.wallet-tx small{grid-column:1/-1;color:rgba(255,255,255,.62)}.wallet-tx .positive{color:#61ffbc}.wallet-tx .negative{color:#ff7eaa}.order-pay-card{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);padding:10px;border-radius:24px}.order-pay-card img{width:74px;height:74px;border-radius:20px;object-fit:cover;background:#101216}.order-pay-card h4{margin:2px 0 5px;font-size:1.05rem}.order-pay-card small{color:#45fff7;text-transform:uppercase;font-weight:900;letter-spacing:.06em}.order-pay-card b{font-size:1rem}.fee-grid{display:grid;grid-template-columns:1fr auto;gap:9px 12px;padding:13px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}.fee-grid span{color:rgba(255,255,255,.68)}.fee-grid b{text-align:right}.order-checkout .approve-phone{display:block;text-align:center;margin-top:8px;color:rgba(255,255,255,.7)}
@media(max-width:430px){.wallet-hero{grid-template-columns:1fr}.wallet-card{max-height:88dvh}.wallet-order-actions{grid-template-columns:1fr}.order-pay-card{grid-template-columns:62px 1fr}.order-pay-card img{width:62px;height:62px}.fee-grid{font-size:.88rem}}

/* v32.0: escrow wallet, buyer confirmation and seller balance polish */
.account-wallet-card {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  margin:0 0 12px;
  border-radius:22px;
  border:1px solid rgba(40,255,166,.22);
  background:linear-gradient(145deg,rgba(40,255,166,.12),rgba(24,243,238,.07),rgba(255,47,126,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 34px rgba(0,0,0,.20);
}
.account-wallet-card > div { min-width:0; flex:1; }
.account-wallet-card small,.account-wallet-card em { display:block; color:rgba(255,255,255,.66); font-style:normal; font-size:11px; line-height:1.35; }
.account-wallet-card b { display:block; color:#fff; font-weight:1000; letter-spacing:-.03em; font-size:16px; }
.account-wallet-card button { appearance:none; border:0; border-radius:999px; color:#061014; font-weight:1000; padding:10px 13px; background:linear-gradient(135deg,var(--cyan),#fff,var(--pink)); white-space:nowrap; }
.wallet-orb { background:radial-gradient(circle at 22% 18%, rgba(255,255,255,.82), rgba(40,255,166,.30) 35%, rgba(24,243,238,.28), rgba(255,47,126,.22)) !important; }
.wallet-body { display:grid !important; gap:14px !important; }
.wallet-hero {
  display:grid !important;
  grid-template-columns:54px 1fr !important;
  gap:13px !important;
  align-items:center !important;
  padding:15px !important;
  border-radius:26px !important;
  background:radial-gradient(circle at 12% 0%, rgba(40,255,166,.18), transparent 34%), linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 36px rgba(0,0,0,.22) !important;
}
.wallet-hero h3 { margin:0; font-size:28px; letter-spacing:-.06em; }
.wallet-hero p { margin:2px 0 0; color:rgba(255,255,255,.66); font-size:12px; line-height:1.35; }
.wallet-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.wallet-stats span { display:grid; gap:4px; padding:12px 10px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); min-width:0; }
.wallet-stats b { font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wallet-stats small { color:rgba(255,255,255,.62); font-size:10.5px; line-height:1.2; }
.withdraw-box { display:grid; gap:9px; padding:12px; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.11); }
.withdraw-box small { color:rgba(255,255,255,.60); font-size:11.5px; line-height:1.35; }
.wallet-section { display:grid; gap:9px; }
.wallet-section h4 { margin:4px 0 0; font-size:14px; letter-spacing:-.02em; }
.wallet-order,.wallet-order-card { display:grid; grid-template-columns:58px 1fr; gap:11px; align-items:center; padding:10px; border-radius:22px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.12); }
.wallet-order img,.wallet-order-card img { width:58px; height:58px; border-radius:18px; object-fit:cover; background:#111827; }
.wallet-order b,.wallet-order-card b { display:block; color:#fff; font-size:13.5px; line-height:1.15; }
.wallet-order small,.wallet-order-card small,.wallet-order em,.wallet-order-card em { display:block; color:rgba(255,255,255,.64); font-size:11.5px; line-height:1.35; font-style:normal; }
.wallet-row-actions,.wallet-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.wallet-row-actions button,.wallet-actions button { min-height:36px; border-radius:14px; font-size:11.5px; }
.order-pay-checkout { display:grid; gap:12px; }
.pay-product-card { display:grid; grid-template-columns:64px 1fr; gap:11px; align-items:center; padding:10px; border-radius:22px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.pay-product-card img { width:64px; height:64px; border-radius:18px; object-fit:cover; background:#111827; }
.pay-product-card b { display:block; color:#fff; font-weight:1000; }
.pay-product-card small { display:block; color:rgba(255,255,255,.64); font-size:11.5px; line-height:1.35; }
.escrow-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.escrow-breakdown span { padding:10px; border-radius:18px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.10); min-width:0; }
.escrow-breakdown small { display:block; color:rgba(255,255,255,.58); font-size:10px; line-height:1.2; }
.escrow-breakdown b { display:block; color:#fff; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-actions .pay-now { box-shadow:0 15px 34px rgba(40,255,166,.12); }
.payment-result.order-result .payment-plan-line { white-space:normal !important; }
@media(max-width:390px){
  .wallet-stats,.escrow-breakdown{grid-template-columns:1fr!important;}
  .wallet-row-actions,.wallet-actions{grid-template-columns:1fr!important;}
  .pay-product-card{grid-template-columns:54px 1fr;}
  .pay-product-card img{width:54px;height:54px;border-radius:16px;}
  .account-wallet-card{align-items:flex-start;}
  .account-wallet-card button{padding:9px 10px;font-size:11px;}
}

/* v34 wallet and escrow transparency polish */
.buyer-pay-note,.seller-fee-note{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:22px;background:linear-gradient(135deg,rgba(32,226,225,.11),rgba(255,47,126,.08));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.buyer-pay-note span,.seller-fee-note span{width:42px;height:42px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.08);color:#47fff4;flex:0 0 auto}.buyer-pay-note svg,.seller-fee-note svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}.buyer-pay-note b{display:block;color:#fff;font-size:14px}.buyer-pay-note small,.seller-fee-note small,.auto-release-note{display:block;color:rgba(255,255,255,.68);line-height:1.35}.seller-fee-note small{font-size:12px}.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.report-grid span{display:grid;gap:4px;padding:10px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);text-align:center}.report-grid b{font-size:17px;color:#fff}.report-grid small{font-size:10.5px;color:rgba(255,255,255,.62)}.activity-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:18px;background:rgba(255,255,255,.052);border:1px solid rgba(255,255,255,.09);margin-top:8px}.activity-row>span{width:40px;height:40px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(32,226,225,.22),rgba(255,47,126,.17));color:#fff}.activity-row svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}.activity-row b{display:block;font-size:13px}.activity-row small{display:block;font-size:11px;color:rgba(255,255,255,.62)}.activity-row strong{font-size:12px;white-space:nowrap;color:#a6fff4}.wallet-order .auto-release-note,.wallet-order-card .auto-release-note{margin-top:4px;color:rgba(103,255,238,.72)!important}.wallet-order.released,.wallet-order-card.released{border-color:rgba(79,255,173,.18);background:linear-gradient(135deg,rgba(79,255,173,.08),rgba(255,255,255,.04))}.wallet-order.disputed,.wallet-order-card.disputed{border-color:rgba(255,191,78,.20);background:linear-gradient(135deg,rgba(255,191,78,.08),rgba(255,255,255,.04))}
@media(max-width:430px){.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-row{grid-template-columns:36px 1fr}.activity-row strong{grid-column:2/-1}.buyer-pay-note,.seller-fee-note{border-radius:18px;padding:10px}.buyer-pay-note span,.seller-fee-note span{width:36px;height:36px;border-radius:14px}}

/* v36: AI polish, typewriter waiting states and buyer assistant */
.ai-card.thinking {
  border-color: rgba(24,243,238,.34) !important;
  box-shadow: 0 18px 44px rgba(24,243,238,.08), inset 0 1px 0 rgba(255,255,255,.08);
}
.ai-extra-notes { margin-top: 10px; min-height: 0; }
.ai-waiting {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 14px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(24,243,238,.10), rgba(255,47,126,.08));
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
}
.ai-waiting b { font-size: 13px; }
.ai-waiting small { color: rgba(255,255,255,.66); font-size: 11.5px; line-height: 1.35; }
.ai-note-pills, .ai-question-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mini-ai-note {
  border-radius: 999px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mini-ai-note:active { transform: scale(.98); }
button.loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ai-assist-box {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(24,243,238,.22);
  background: radial-gradient(circle at top left, rgba(24,243,238,.15), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.18);
}
.ai-assist-box > span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  box-shadow: 0 12px 25px rgba(24,243,238,.18);
}
.ai-assist-box svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ai-assist-box b { display: block; font-size: 14px; font-weight: 950; letter-spacing: -.01em; }
.ai-assist-box small { display: block; margin-top: 3px; color: rgba(255,255,255,.72); line-height: 1.35; font-size: 12px; }
.ai-alt-strip {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ai-alt-strip button {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 7px;
  border-radius: 18px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  text-align: left;
}
.ai-alt-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: rgba(255,255,255,.06); }
.ai-alt-strip span { display: block; font-size: 10.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-alt-strip b { font-size: 10px; color: var(--cyan); }
.smart-ai-answer { border-color: rgba(24,243,238,.24) !important; }
.smart-ai-answer #smartAiAnswer::after, #detailAiText::after, #aiDescription:not(:empty)::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.75);
  vertical-align: -2px;
  animation: aiCursor .8s steps(2) infinite;
}
@keyframes aiCursor { 50% { opacity: .08; } }
@media (max-width: 390px) {
  .ai-alt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-assist-box { padding: 12px; border-radius: 22px; }
  .ai-assist-box > span { width: 38px; height: 38px; flex-basis: 38px; }
}

/* v36: AI Chat Concierge, sticky chat header and media clarity */
.ai-consult-box{position:relative;margin-top:4px;padding:12px;border-radius:24px;background:linear-gradient(145deg,rgba(24,243,238,.11),rgba(255,47,126,.065));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ai-consult-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;color:#fff}.ai-consult-head b{font-size:13px;font-weight:950}.ai-consult-head small{margin-left:auto;color:rgba(255,255,255,.62);font-size:10px;font-weight:800}.ai-spark{width:31px;height:31px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#031015;font-size:11px;font-weight:1000;box-shadow:0 10px 24px rgba(24,243,238,.18)}
.ai-quick-prompts{display:flex;gap:7px;overflow-x:auto;padding:2px 0 9px;scrollbar-width:none}.ai-quick-prompts::-webkit-scrollbar{display:none}.ai-quick-prompts button{flex:0 0 auto;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;padding:8px 11px;font-size:11px;font-weight:900;white-space:nowrap}
.chat-card{display:flex;flex-direction:column;min-height:min(94dvh,780px);overflow:hidden!important;padding-top:0!important}.chat-sticky-head{position:sticky!important;top:0;z-index:30;margin:0 -4px 8px!important;padding:12px 2px 11px!important;background:linear-gradient(180deg,rgba(3,6,9,.99),rgba(3,6,9,.92));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 12px 24px rgba(0,0,0,.22)}.chat-sticky-head h3{max-width:72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-sticky-head em{display:block;margin-top:2px;color:rgba(255,255,255,.58);font-style:normal;font-size:11px;font-weight:800}.chat-product{flex:0 0 auto}.chat-ai-dock{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:7px 0 8px;background:linear-gradient(180deg,rgba(4,7,10,.96),rgba(4,7,10,.72));position:sticky;top:66px;z-index:24}.chat-ai-dock button{min-width:0;border:1px solid rgba(24,243,238,.20);border-radius:999px;background:rgba(24,243,238,.09);color:#f5ffff;padding:8px 5px;font-size:10px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-ai-dock button.is-busy{font-size:0}.chat-ai-answer{flex:0 0 auto;margin:0 0 8px}.chat-ai-result{padding:12px;border-radius:20px;background:linear-gradient(145deg,rgba(24,243,238,.12),rgba(255,47,126,.075));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.22)}.chat-ai-result p{margin:8px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.9)}.ai-result-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.ai-result-top b{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--cyan)}.chat-ai-suggestions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.chat-ai-suggestion{border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;padding:7px 10px;font-size:11px;font-weight:850}.chat-messages{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto!important;padding-bottom:12px}.chat-input{flex:0 0 auto;position:sticky;bottom:0;z-index:26;background:linear-gradient(180deg,rgba(4,7,10,0),rgba(4,7,10,.98) 20%)}
.detail-ai-top{margin:-2px 0 12px}.detail-ai-top .ai-assist-box{margin-top:0!important;border-radius:22px;background:linear-gradient(145deg,rgba(24,243,238,.12),rgba(255,47,126,.07));box-shadow:0 14px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)}.detail-media{background:radial-gradient(circle at 50% 42%,rgba(24,243,238,.08),rgba(2,4,6,1) 64%)!important}.detail-media .detail-main{object-fit:contain!important;object-position:center!important;background:transparent!important}.detail-media .detail-bg{opacity:.72;transform:scale(1.04)}.detail-media.loading::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.07),rgba(0,0,0,.92));z-index:0}.detail-loader{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .22s ease}.detail-media.loaded .detail-loader{opacity:0;pointer-events:none}.detail-thumbs img{object-fit:cover;background:#071014}.ai-assist-box svg{stroke:#fff;fill:none;stroke-width:2.1}.ai-question-pills,.ai-note-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.mini-ai-note{border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;padding:7px 9px;font-size:10.5px;font-weight:850}.ai-alt-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.ai-alt-strip button{min-width:0;text-align:left;padding:6px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:#fff}.ai-alt-strip img{width:100%;aspect-ratio:1/1;border-radius:11px;object-fit:cover;background:#071014}.ai-alt-strip span{display:block;font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-alt-strip b{font-size:9px;color:var(--cyan)}
@media (max-width:380px){.chat-ai-dock{grid-template-columns:repeat(2,minmax(0,1fr));top:62px}.chat-sticky-head h3{max-width:68vw}.ai-quick-prompts button{font-size:10px}.ai-alt-strip{grid-template-columns:1fr 1fr}.detail-media{height:min(48dvh,440px)!important}}

/* v36 final polish: AI visibility, sticky chat, reliable detail photos */
.top-row{grid-template-columns:auto minmax(0,1fr) 42px 42px 42px!important;}
.ai-top-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:16px;border:1px solid rgba(24,243,238,.24)!important;background:linear-gradient(135deg,rgba(24,243,238,.18),rgba(255,47,126,.13))!important;color:#fff;box-shadow:0 10px 26px rgba(24,243,238,.12),inset 0 1px 0 rgba(255,255,255,.12)}
.ai-top-btn b{font-size:12px;font-weight:1000;letter-spacing:-.02em;background:linear-gradient(135deg,#18f3ee,#ff5aa5);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-help-card textarea,.ai-help-card input{width:100%;}
.ai-help-card .ai-help-results{margin-top:12px;display:grid;gap:10px;max-height:50dvh;overflow:auto;padding-right:2px}
.ai-hero-strip{display:flex;gap:12px;align-items:center;margin:4px 0 12px;padding:13px;border-radius:24px;background:linear-gradient(145deg,rgba(24,243,238,.13),rgba(255,47,126,.08));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ai-hero-strip>span{width:42px;height:42px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#031015;font-weight:1000;box-shadow:0 14px 30px rgba(24,243,238,.18)}
.ai-hero-strip b{display:block;font-size:14px;font-weight:1000}.ai-hero-strip small{display:block;margin-top:3px;color:rgba(255,255,255,.66);font-size:11.5px;line-height:1.35}
.ai-quick-row{display:flex;gap:7px;overflow-x:auto;padding:2px 0 9px;scrollbar-width:none}.ai-quick-row::-webkit-scrollbar{display:none}.ai-quick-row button{flex:0 0 auto;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;padding:8px 11px;font-size:11px;font-weight:900;white-space:nowrap}
.chat-card{display:flex!important;flex-direction:column!important;max-height:min(94dvh,820px)!important;overflow:hidden!important;padding-top:0!important;}
.chat-sticky-head{flex:0 0 auto;position:sticky!important;top:0!important;z-index:40!important;margin:0 -4px 8px!important;padding:12px 3px 11px!important;background:linear-gradient(180deg,rgba(4,7,11,.995),rgba(4,7,11,.93));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 14px 26px rgba(0,0,0,.25)}
.chat-head-actions{display:flex;align-items:center;gap:7px}.chat-ai-btn{border:1px solid rgba(24,243,238,.25);border-radius:999px;background:rgba(24,243,238,.12);color:#eaffff;padding:8px 10px;font-size:11px;font-weight:950;white-space:nowrap}.chat-ai-btn:disabled{opacity:.6}
.chat-product{flex:0 0 auto}.chat-ai-dock{flex:0 0 auto;display:flex!important;gap:7px;overflow-x:auto;position:sticky;top:64px;z-index:31;padding:6px 0 8px;background:linear-gradient(180deg,rgba(5,8,12,.97),rgba(5,8,12,.78));scrollbar-width:none}.chat-ai-dock::-webkit-scrollbar{display:none}.chat-ai-dock button{flex:0 0 auto;border:1px solid rgba(24,243,238,.18);border-radius:999px;background:rgba(24,243,238,.08);color:#fff;padding:8px 11px;font-size:11px;font-weight:900;white-space:nowrap}.chat-ai-dock button:disabled{opacity:.55}
.chat-ai-answer{flex:0 0 auto;margin:0 0 8px}.chat-ai-card{padding:12px;border-radius:21px;background:linear-gradient(145deg,rgba(24,243,238,.13),rgba(255,47,126,.08));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)}.chat-ai-title{display:flex;align-items:center;gap:8px}.chat-ai-title span{width:28px;height:28px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#061114;font-size:10px;font-weight:1000}.chat-ai-card p{margin:9px 0 0;color:rgba(255,255,255,.92);font-size:13px;line-height:1.47}.chat-ai-card small{display:block;margin-top:7px;color:rgba(255,255,255,.65);line-height:1.4}.chat-ai-card .chat-ai-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.chat-ai-card .chat-ai-actions .primary,.chat-ai-card .chat-ai-actions .soft{padding:8px 10px;border-radius:999px;font-size:11px}
.chat-messages{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;padding-bottom:12px}.chat-input{flex:0 0 auto;position:sticky;bottom:0;z-index:35;background:linear-gradient(180deg,rgba(5,8,12,0),rgba(5,8,12,.98) 20%);padding-top:10px}
.detail-media{isolation:isolate;background:radial-gradient(circle at 50% 45%,rgba(24,243,238,.09),rgba(2,4,6,1) 68%)!important;min-height:280px}.detail-media .detail-main{object-fit:contain!important;object-position:center center!important;background:transparent!important;opacity:1;transition:opacity .2s ease,transform .25s ease;z-index:2}.detail-media .detail-bg{object-fit:cover!important;opacity:.66!important;transform:scale(1.06);z-index:0}.detail-media-loader{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border-radius:22px;background:rgba(2,5,8,.72);border:1px solid rgba(255,255,255,.11);box-shadow:0 20px 42px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s ease}.detail-media.is-loading .detail-media-loader,.detail-media.is-preloading .detail-media-loader{opacity:1}.detail-media.is-preloading .detail-main{opacity:.82;transform:scale(.996)}.detail-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 10px;scrollbar-width:none}.detail-thumbs::-webkit-scrollbar{display:none}.detail-thumbs button{flex:0 0 58px;height:58px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);padding:2px}.detail-thumbs button.active{border-color:rgba(24,243,238,.75);box-shadow:0 0 0 3px rgba(24,243,238,.12)}.detail-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:15px;background:#071014}.photo-count{z-index:4;bottom:14px;right:14px;top:auto!important;left:auto!important;background:rgba(0,0,0,.52);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950}.ai-assist-box.priority{margin:10px 0 12px;border-color:rgba(24,243,238,.26);background:linear-gradient(145deg,rgba(24,243,238,.12),rgba(255,47,126,.07));}
@media (max-width:390px){.top-row{grid-template-columns:minmax(82px,94px) minmax(128px,1fr) 38px 38px 38px!important;gap:5px}.ai-top-btn{width:38px;height:38px;border-radius:14px}.feed-tabs button{font-size:10px;padding:7px 5px}.chat-sticky-head h3{max-width:62vw}.chat-ai-dock{top:61px}.detail-media{height:min(47dvh,430px)!important;min-height:255px}.detail-thumbs button{flex-basis:52px;height:52px}}

/* v36 final tiny polish */
.detail-media:not(.loading) .detail-loader{opacity:0;pointer-events:none}.detail-media.loading .detail-main{opacity:.92}.chat-ai-answer.hidden{display:none!important}.ai-help-results .ai-answer,.ai-answer{min-height:44px}.ai-help-card textarea{resize:vertical}.chat-head-actions{display:flex;align-items:center;gap:8px}.chat-ai-btn{border:1px solid rgba(24,243,238,.28);background:linear-gradient(135deg,rgba(24,243,238,.16),rgba(255,47,126,.10));color:#fff;border-radius:999px;padding:8px 10px;font-size:11px;font-weight:1000}

/* v36.1: always-visible AI, stable chat header and no-black detail media */
.ai-coach-fab{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(82px + env(safe-area-inset-bottom));
  z-index:85;
  width:56px;
  height:56px;
  border:1px solid rgba(24,243,238,.34);
  border-radius:22px;
  background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.42),transparent 18%),linear-gradient(135deg,#18f3ee,#ff2f7e 72%);
  color:#051014;
  box-shadow:0 18px 44px rgba(24,243,238,.22),0 12px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.35);
  display:grid;
  place-items:center;
  padding:0;
}
.ai-coach-fab span{font-size:11px;font-weight:1000;line-height:1;letter-spacing:.04em}.ai-coach-fab b{font-size:12px;line-height:1;margin-top:-16px;font-weight:1000}.ai-coach-fab:active{transform:scale(.96)}
.ai-help-empty,.ai-advice-card{display:flex;gap:12px;align-items:flex-start;padding:13px;border-radius:24px;background:linear-gradient(145deg,rgba(24,243,238,.11),rgba(255,47,126,.07));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ai-advice-card{display:block}.ai-advice-card p{margin:9px 0 0;color:rgba(255,255,255,.92);font-size:13px;line-height:1.47}.ai-help-empty b{display:block;font-size:14px}.ai-help-empty small{display:block;margin-top:3px;color:rgba(255,255,255,.66);line-height:1.35;font-size:12px}
.chat-card{height:min(94dvh,820px)!important;min-height:min(94dvh,820px)!important}.chat-sticky-head{position:sticky!important;top:0!important;flex:0 0 auto!important}.chat-product,.chat-ai-dock,.chat-ai-answer,.chat-ai-panel,.chat-image-preview,.chat-input{flex:0 0 auto!important}.chat-messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}.chat-ai-panel{margin:0 0 8px}.chat-ai-panel.hidden{display:none!important}.chat-ai-panel-inner{padding:12px;border-radius:22px;background:linear-gradient(145deg,rgba(24,243,238,.12),rgba(255,47,126,.075));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.22)}.ai-mini-head{display:flex;gap:10px;align-items:center}.ai-mini-head>span{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#041015}.ai-mini-head svg{width:19px;height:19px;stroke:currentColor;fill:none}.ai-mini-head b{display:block}.ai-mini-head small{display:block;color:rgba(255,255,255,.66);font-size:11px;line-height:1.35}.chat-ai-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.chat-ai-actions button{font-size:11px!important;padding:8px 10px!important;border-radius:999px!important}.chat-ai-output{margin-top:10px}.chat-ai-output small{color:rgba(255,255,255,.67)}
.detail-media{min-height:292px!important;background:radial-gradient(circle at 50% 42%,rgba(24,243,238,.10),rgba(2,4,6,1) 72%)!important}.detail-media .detail-main{object-fit:contain!important;object-position:center center!important;background:rgba(2,4,6,.18)!important;opacity:1!important;filter:none!important}.detail-media .detail-bg{filter:blur(24px) brightness(.60) saturate(1.18)!important;opacity:.82!important}.detail-media.loading .detail-main,.detail-media.is-preloading .detail-main{opacity:.88!important}.detail-media.is-changing .detail-main{transform:scale(.998)}.detail-loader{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:21px;background:rgba(1,5,8,.70);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 42px rgba(0,0,0,.34);display:grid!important;place-items:center;opacity:0;pointer-events:none;transition:opacity .16s ease}.detail-media.loading .detail-loader,.detail-media.is-preloading .detail-loader{opacity:1}.detail-media.loaded:not(.is-preloading) .detail-loader{opacity:0}.detail-media.loading::before{opacity:.45!important}.detail-thumbs img{object-fit:contain!important;background:linear-gradient(145deg,#061017,#0b121a)!important}.detail-thumbs button.active img{background:#061017!important}
@media(max-width:390px){.ai-coach-fab{right:10px;bottom:calc(74px + env(safe-area-inset-bottom));width:50px;height:50px;border-radius:19px}.chat-card{height:94dvh!important;min-height:94dvh!important}.detail-media{min-height:260px!important}}

/* v36 final AI/chat/media polish */
.ai-coach-fab{
  position:fixed;left:14px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:70;
  width:58px;height:58px;border:1px solid rgba(24,243,238,.28);border-radius:22px;
  background:linear-gradient(145deg,rgba(24,243,238,.22),rgba(255,47,126,.18) 72%),rgba(6,9,14,.88);
  color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.07) inset;
  backdrop-filter:blur(18px);display:grid;place-items:center;gap:0;
}
.ai-coach-fab span{font-size:12px;font-weight:1000;letter-spacing:.02em;line-height:1;background:linear-gradient(135deg,#18f3ee,#fff,#ff5aa5);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-coach-fab b{font-size:10px;line-height:1;color:rgba(255,255,255,.82);margin-top:-9px}
.ai-coach-fab:active{transform:scale(.97)}
.chat-ai-panel{flex:0 0 auto;margin:0 0 8px}.chat-ai-panel.hidden{display:none!important}.chat-ai-panel-inner{padding:12px;border-radius:20px;background:linear-gradient(145deg,rgba(24,243,238,.12),rgba(255,47,126,.08));border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.26)}.ai-mini-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.ai-mini-head>span{width:34px;height:34px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(24,243,238,.2),rgba(255,47,126,.16));border:1px solid rgba(255,255,255,.13)}.ai-mini-head svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}.ai-mini-head b{display:block;font-size:13px}.ai-mini-head small{display:block;color:rgba(255,255,255,.62);font-size:11px}.chat-ai-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.chat-ai-actions button,.ai-chat-btn{border:1px solid rgba(24,243,238,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:9px 10px;font-size:11px;font-weight:950}.ai-chat-btn{flex:0 0 auto;padding:0 12px;min-height:42px;background:linear-gradient(135deg,rgba(24,243,238,.16),rgba(255,47,126,.12));letter-spacing:.02em}.ai-chat-answer p{font-size:13px;line-height:1.48;color:rgba(255,255,255,.9);margin:8px 0}.chat-ai-result .primary.wide{margin-top:10px}.chat-ai-dock button:active,.chat-ai-suggestion:active{transform:scale(.98)}
.detail-media{overflow:hidden!important;border-radius:26px!important;min-height:286px;background:linear-gradient(180deg,#081014,#030507)!important}.detail-media .detail-main{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;filter:drop-shadow(0 10px 28px rgba(0,0,0,.25));transition:opacity .24s ease,transform .32s ease}.detail-media.is-changing .detail-main{opacity:.45;transform:scale(.985)}.detail-media .detail-bg{width:100%!important;height:100%!important;object-fit:cover!important;filter:blur(22px) saturate(1.15);opacity:.64}.detail-media.loaded .detail-main{opacity:1}.detail-media.loading .detail-main{opacity:.72}.detail-thumbs{scrollbar-width:none}.detail-thumbs::-webkit-scrollbar{display:none}.detail-thumbs button{position:relative;overflow:hidden}.detail-thumbs button::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid transparent;transition:.2s ease}.detail-thumbs button.active::after{border-color:#18f3ee;box-shadow:0 0 0 2px rgba(24,243,238,.16) inset}.detail-thumbs img{display:block;width:100%;height:100%;object-fit:cover;transform:translateZ(0)}
@media (max-width:390px){.ai-coach-fab{left:10px;bottom:calc(72px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:19px}.chat-ai-dock button{font-size:9.8px;padding:8px 4px}.chat-ai-actions{grid-template-columns:1fr}.ai-chat-btn{padding:0 10px;font-size:10px}.chat-input input{min-width:0}.detail-media{min-height:248px!important;border-radius:22px!important}}

/* v36 final polish: AI visibility, sticky chat, product media safety */
.ai-top-btn{
  min-width:42px!important;
  padding:0 10px!important;
  border-radius:16px!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
  background:linear-gradient(135deg, rgba(30,246,244,.18), rgba(255,47,126,.17))!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#fff!important;
  box-shadow:0 12px 30px rgba(20,240,238,.10), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.ai-help-card textarea{min-height:92px;resize:vertical;border-radius:22px!important;line-height:1.45!important;}
.ai-help-results{display:grid;gap:10px;margin-top:10px;max-height:42dvh;overflow:auto;padding-bottom:8px;}
.ai-hero-strip{display:flex;gap:12px;align-items:center;margin:6px 0 12px;padding:12px;border-radius:24px;background:radial-gradient(circle at top left,rgba(30,246,244,.18),transparent 42%),rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12)}
.ai-hero-strip>span{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));font-weight:1000}.ai-hero-strip b,.ai-hero-strip small{display:block}.ai-hero-strip small{color:rgba(255,255,255,.68);line-height:1.35}.ai-quick-row{display:flex;gap:8px;overflow:auto;padding:2px 0 8px}.ai-quick-row button{white-space:nowrap;border-radius:999px;padding:9px 12px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.075);color:#fff;font-weight:850}
.chat-card{display:flex!important;flex-direction:column!important;min-height:min(88dvh,720px)!important;overflow:hidden!important;padding-top:10px!important;}
.chat-sticky-head{position:sticky!important;top:0!important;z-index:30!important;margin:0 -2px 8px!important;padding:10px 4px 12px!important;background:linear-gradient(180deg,rgba(8,10,16,.98),rgba(8,10,16,.86))!important;backdrop-filter:blur(22px)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;}
.chat-sticky-head h3{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-sticky-head em{display:block;font-size:11px;color:rgba(255,255,255,.62);font-style:normal;margin-top:2px}.chat-head-actions{display:flex;gap:8px;align-items:center}.chat-ai-btn{min-width:42px;border-radius:999px;padding:9px 12px;background:linear-gradient(135deg,rgba(30,246,244,.18),rgba(255,47,126,.14));border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:1000}.chat-product{flex:0 0 auto}.chat-ai-dock{position:sticky;top:62px;z-index:22;display:flex;gap:7px;overflow:auto;padding:6px 2px 8px;background:linear-gradient(180deg,rgba(8,10,16,.82),rgba(8,10,16,.55));backdrop-filter:blur(18px)}.chat-ai-dock button{white-space:nowrap;border-radius:999px;padding:8px 11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;font-size:11px;font-weight:900}.chat-ai-answer{flex:0 0 auto;margin:5px 0 8px}.chat-ai-result,.ai-chat-answer{padding:12px;border-radius:22px;background:radial-gradient(circle at 0 0,rgba(30,246,244,.14),transparent 42%),rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}.ai-result-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.chat-ai-result p,.ai-chat-answer p{margin:0;color:rgba(255,255,255,.86);line-height:1.45}.chat-ai-suggestions{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.chat-messages{flex:1 1 auto!important;min-height:180px!important;overflow-y:auto!important;padding-bottom:10px!important;scrollbar-width:thin}.chat-input{position:sticky!important;bottom:0!important;z-index:25!important;background:linear-gradient(0deg,rgba(8,10,16,.98),rgba(8,10,16,.80))!important;backdrop-filter:blur(18px)!important;padding-top:9px!important;}
.detail-media{background:#06080d!important;isolation:isolate!important;}
.detail-media.loading::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.035),rgba(255,255,255,.075),rgba(255,255,255,.03));animation:vcMediaPulse 1.1s ease-in-out infinite;pointer-events:none}.detail-loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:10px 12px;border-radius:999px;background:rgba(3,7,11,.58);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);box-shadow:0 14px 35px rgba(0,0,0,.28)}.detail-media:not(.loading) .detail-loader{display:none!important}.detail-media .detail-main{object-fit:contain!important;background:transparent!important;transition:opacity .24s ease,transform .24s ease!important}.detail-media .detail-bg{opacity:.72!important;transform:scale(1.03);transition:opacity .28s ease!important}.detail-media.is-changing .detail-main{opacity:.26;transform:scale(.985)}.detail-media.is-changing .detail-bg{opacity:.35}.detail-count{right:14px!important;bottom:14px!important;top:auto!important;left:auto!important;background:rgba(0,0,0,.48)!important;border:1px solid rgba(255,255,255,.16)!important;backdrop-filter:blur(12px)!important}.detail-thumbs{display:flex!important;gap:8px!important;overflow-x:auto!important;padding:4px 2px 10px!important}.detail-thumbs button{flex:0 0 58px!important;width:58px!important;height:58px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.065)!important;overflow:hidden!important;padding:3px!important}.detail-thumbs button.active{border-color:rgba(30,246,244,.65)!important;box-shadow:0 0 0 2px rgba(30,246,244,.14)!important}.detail-thumbs img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:14px!important;display:block!important}
@keyframes vcMediaPulse{0%,100%{opacity:.52}50%{opacity:.95}}
@media(max-width:390px){.chat-sticky-head h3{max-width:160px}.chat-ai-dock{top:58px}.ai-help-results{max-height:38dvh}.detail-media{height:min(48dvh,440px)!important}.detail-thumbs button{flex-basis:52px!important;width:52px!important;height:52px!important;border-radius:16px!important}}

/* v38: AI placement, cleaner brand, sticky chat header and smarter detail polish */
.top-row{grid-template-columns:auto 1fr 42px 42px!important;gap:8px!important}
.brand{min-width:58px!important;grid-template-columns:1fr!important;place-items:center!important;gap:2px!important;text-align:center!important;line-height:.88!important}
.brand img{width:36px!important;height:36px!important;border-radius:12px!important;box-shadow:0 0 20px rgba(24,243,238,.28),0 0 0 1px rgba(255,255,255,.12) inset!important}
.brand-stack{display:block!important;line-height:.9!important;margin-top:-2px!important}.brand-vi{display:none!important}.brand-connects{font-size:11px!important;letter-spacing:-.035em!important;font-weight:1000!important;background:linear-gradient(135deg,#fff 8%,var(--cyan) 54%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none!important}
.tiny-ai{width:42px!important;height:42px!important;border-radius:999px!important;border:1px solid rgba(24,243,238,.24)!important;background:linear-gradient(135deg,rgba(24,243,238,.18),rgba(255,47,126,.14))!important;color:#fff!important;font-size:12px!important;font-weight:1000!important;letter-spacing:.02em!important;box-shadow:0 12px 30px rgba(24,243,238,.10),inset 0 1px 0 rgba(255,255,255,.11)!important}.tiny-ai::before{content:'✦';font-size:12px;margin-right:-2px;color:var(--cyan)}
.ai-coach-fab{display:none!important}.ai-top-btn{display:none!important}.location-row{gap:7px!important}.ghost-dot{padding:0 10px!important}.area-chip{max-width:42%!important}
@media(max-width:390px){.top-row{grid-template-columns:58px minmax(126px,1fr) 38px 38px!important;gap:6px!important}.brand img{width:32px!important;height:32px!important}.brand-connects{font-size:10px!important}.tiny-ai,.tiny-lang,.icon-btn,.round-btn{width:38px!important;height:38px!important}.feed-tabs{max-width:172px!important}.feed-tabs button{font-size:11px!important;padding:7px 7px!important}.ghost-dot b{display:none}.ghost-dot{width:38px!important;padding:0!important;justify-content:center}.area-chip{max-width:46%!important}}

/* Keep chat identity visible while typing, including when mobile keyboard is open. */
#chatSheet[open] .chat-card{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;right:auto!important;bottom:0!important;width:min(100vw,460px)!important;height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;border-radius:0!important;padding:calc(82px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom))!important;overflow:hidden!important;background:rgba(4,7,11,.985)!important}
#chatSheet[open] .sheet-bar{display:none!important}
#chatSheet[open] .chat-sticky-head{position:fixed!important;top:0!important;left:50%!important;transform:translateX(-50%)!important;width:min(100vw,460px)!important;z-index:999!important;margin:0!important;padding:calc(12px + env(safe-area-inset-top)) 14px 12px!important;border-radius:0 0 24px 24px!important;background:linear-gradient(180deg,rgba(3,5,9,.98),rgba(9,13,18,.94))!important;box-shadow:0 20px 44px rgba(0,0,0,.46),0 1px 0 rgba(255,255,255,.08) inset!important;backdrop-filter:blur(24px)!important}
#chatSheet[open] .chat-sticky-head small{color:var(--cyan)!important;letter-spacing:.06em!important}#chatSheet[open] .chat-sticky-head h3{max-width:68vw!important;font-size:18px!important;line-height:1.04!important}#chatSheet[open] .chat-sticky-head em{font-size:10.5px!important;color:rgba(255,255,255,.64)!important}
#chatSheet[open] .chat-product{flex:0 0 auto!important}.chat-messages{overscroll-behavior:contain!important}.chat-input{border-top:1px solid rgba(255,255,255,.08)!important}

/* AI cards should feel branded without fusing “Vi AI” into product names. */
.ai-assist-box>span,.ai-result-top::before,.ai-answer>span{box-shadow:0 12px 26px rgba(24,243,238,.14)!important}.ai-result-top b,.chat-ai-result b{letter-spacing:-.02em!important}.ai-answer b,.ai-assist-box b{word-spacing:.02em!important}.ai-brand-mark{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));box-shadow:0 12px 28px rgba(24,243,238,.18);font-size:0}.ai-brand-mark::before{content:'✦';font-size:17px;color:#061015;font-weight:1000}
.ai-alt-strip{margin-top:12px!important}.ai-alt-strip:empty{display:none!important}.ai-alt-strip button{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important}.ai-alt-empty{display:none!important}
.detail-media{height:min(44dvh,420px)!important;min-height:290px!important}.detail-media .detail-main{object-fit:contain!important;object-position:center center!important;max-width:100%!important;max-height:100%!important}.detail-media .detail-bg{object-fit:cover!important;opacity:.55!important}.detail-main[style*="display: none"]{display:block!important}
@media(max-width:390px){#chatSheet[open] .chat-card{padding-top:calc(78px + env(safe-area-inset-top))!important}.detail-media{height:min(42dvh,392px)!important;min-height:250px!important}.ai-alt-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v39: chat send icon, sticky header under keyboard, full-photo viewer and detail media polish */
.chat-input {
  grid-template-columns: auto minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 0 calc(8px + env(safe-area-inset-bottom)) !important;
}
.chat-input .attach-btn {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.chat-input input#chatText {
  min-height: 48px !important;
  border-radius: 18px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(24,243,238,.36) !important;
  box-shadow: 0 0 0 2px rgba(24,243,238,.05), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.chat-send-icon {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg, var(--cyan), var(--pink)) !important;
  box-shadow: 0 14px 30px rgba(255,47,126,.20), 0 0 26px rgba(24,243,238,.16) !important;
  color: #061015 !important;
  padding: 0 !important;
  font-size: 0 !important;
  flex: 0 0 50px !important;
}
.chat-send-icon svg {
  width: 23px !important;
  height: 23px !important;
  stroke: #061015 !important;
  stroke-width: 2.4 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.chat-send-icon.loading { opacity: .72; pointer-events: none; }
.chat-send-icon.loading svg { opacity: .25; }
.chat-send-icon.loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(6,16,21,.25);
  border-top-color: #061015;
  animation: vcSpin .7s linear infinite;
  position: absolute;
}
@keyframes vcSpin { to { transform: rotate(360deg); } }
#chatSheet[open] .chat-card {
  padding-top: calc(92px + env(safe-area-inset-top)) !important;
}
#chatSheet[open] .chat-sticky-head {
  min-height: calc(76px + env(safe-area-inset-top)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#chatSheet[open] .chat-sticky-head h3 {
  font-size: 19px !important;
  max-width: 58vw !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.chat-keyboard-open #chatSheet[open] .chat-sticky-head {
  position: fixed !important;
  top: 0 !important;
  transform: translateX(-50%) translateZ(0) !important;
}
#chatSheet[open] .chat-ai-dock {
  top: calc(78px + env(safe-area-inset-top)) !important;
}
#chatSheet[open] .chat-messages {
  scroll-padding-top: 110px !important;
}

.detail-card { overflow: hidden auto !important; }
.detail-media {
  height: min(60dvh, 610px) !important;
  min-height: 360px !important;
  border-radius: 30px !important;
  cursor: zoom-in !important;
  background: radial-gradient(circle at 50% 43%, rgba(24,243,238,.10), rgba(2,4,6,1) 70%) !important;
}
.detail-media .detail-main {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.28));
}
.detail-media .detail-bg {
  filter: blur(22px) brightness(.46) saturate(1.18) !important;
  opacity: .82 !important;
  transform: scale(1.10) !important;
}
.detail-zoom-btn {
  position: absolute;
  z-index: 7;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,8,12,.48);
  color: #fff;
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.detail-zoom-btn svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.detail-count { bottom: 14px !important; right: 14px !important; }
.detail-thumbs button { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; }
.detail-thumbs img { object-fit: cover !important; }

.image-viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 0;
  background: rgba(1,3,6,.96);
  overflow: hidden;
}
.image-viewer::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.image-viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .22s ease;
  touch-action: manipulation;
}
.image-viewer img.zoomed { transform: scale(1.65); cursor: zoom-out; }
.image-viewer-close,
.image-viewer-zoom {
  position: fixed;
  z-index: 10;
  top: calc(14px + env(safe-area-inset-top));
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  backdrop-filter: blur(14px);
  font-weight: 1000;
  font-size: 24px;
}
.image-viewer-close { right: 14px; }
.image-viewer-zoom { right: 70px; font-size: 18px; }
#imageViewerCount {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(12px);
  font-weight: 900;
}

.ai-assist-box.priority {
  scroll-margin-top: 108px !important;
}
.ai-assist-box.is-thinking {
  animation: vcAiGlow 1.25s ease-in-out infinite alternate;
}
@keyframes vcAiGlow { from { box-shadow: 0 16px 34px rgba(24,243,238,.10); } to { box-shadow: 0 18px 46px rgba(255,47,126,.16); } }

@media(max-width:390px){
  .detail-media { height:min(58dvh,540px)!important; min-height:330px!important; border-radius:24px!important; }
  .detail-zoom-btn { width:40px; height:40px; right:10px; top:10px; }
  .detail-thumbs button { flex-basis:56px!important; width:56px!important; height:56px!important; }
  #chatSheet[open] .chat-sticky-head h3 { max-width:52vw!important; }
  .chat-input { grid-template-columns:46px minmax(0,1fr) 48px!important; }
  .chat-send-icon { width:48px!important;height:48px!important; }
}


/* v40: Account restore, 48h chat, emoji, keyboard-safe chat and bigger brand polish */
:root{--vc-vvh:100dvh;--vc-vvo:0px}
.brand img{width:42px!important;height:42px!important;border-radius:14px!important}.brand-connects{font-size:12px!important;line-height:.86!important}.brand{min-width:64px!important}
.signin-card{display:grid;gap:10px;margin:0 0 12px;padding:13px;border-radius:24px;background:linear-gradient(135deg,rgba(24,243,238,.11),rgba(255,47,126,.07));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.signin-card b{display:block;color:#fff;font-size:14px}.signin-card small{display:block;color:rgba(255,255,255,.65);line-height:1.35;margin-top:3px}.signin-card.compact-ok{background:rgba(37,238,151,.065);border-color:rgba(37,238,151,.18)}
.signin-row{display:grid;grid-template-columns:1fr auto;gap:8px}.signin-row input{min-width:0}.signin-row button{white-space:nowrap;padding-inline:14px}
#chatSheet[open] .chat-card{top:var(--vc-vvo)!important;bottom:auto!important;height:var(--vc-vvh)!important;min-height:var(--vc-vvh)!important;max-height:var(--vc-vvh)!important;padding-top:calc(84px + env(safe-area-inset-top))!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
#chatSheet[open] .chat-sticky-head{top:var(--vc-vvo)!important}
#chatSheet[open] .chat-messages{padding-bottom:12px!important;scroll-padding-bottom:100px!important}.chat-keyboard-open #chatSheet[open] .chat-product{display:none!important}.chat-keyboard-open #chatSheet[open] .chat-ai-dock{position:relative!important;top:auto!important;z-index:1!important;padding:4px 0 6px!important;background:rgba(4,7,11,.70)!important}.chat-keyboard-open #chatSheet[open] .chat-ai-dock button{padding:7px 10px!important;font-size:10px!important}
.chat-input{grid-template-columns:auto auto minmax(0,1fr) 52px!important;align-items:end!important}.emoji-btn{width:48px;height:48px;border-radius:18px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.075);color:#fff;font-size:22px;font-weight:900;display:grid;place-items:center}.emoji-panel{flex:0 0 auto;display:flex;gap:7px;overflow-x:auto;padding:8px 2px;margin-top:4px;scrollbar-width:none}.emoji-panel::-webkit-scrollbar{display:none}.emoji-panel.hidden{display:none!important}.emoji-panel button{flex:0 0 38px;width:38px;height:38px;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.075);display:grid;place-items:center;font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.chat-input input{height:52px!important}.chat-send-icon{height:52px!important;width:52px!important}
.detail-media{height:min(58dvh,560px)!important;min-height:360px!important;background:#05070b!important}.detail-media .detail-main{object-fit:contain!important;object-position:center center!important;width:100%!important;height:100%!important}.detail-card .sheet-title{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(3,6,10,.98),rgba(3,6,10,.82));backdrop-filter:blur(18px);padding-top:4px!important}
.ai-answer,.ai-assist-box,.chat-ai-result{scroll-margin-top:calc(96px + env(safe-area-inset-top))!important}
@media(max-width:390px){.brand img{width:38px!important;height:38px!important}.brand-connects{font-size:11px!important}.brand{min-width:60px!important}.signin-row{grid-template-columns:1fr}.chat-input{grid-template-columns:42px 42px minmax(0,1fr) 46px!important;gap:7px!important}.emoji-btn,.chat-input .attach-btn{width:42px!important;height:42px!important;border-radius:16px!important}.chat-send-icon{width:46px!important;height:46px!important;border-radius:17px!important}.detail-media{height:min(54dvh,500px)!important;min-height:315px!important}#chatSheet[open] .chat-card{padding-top:calc(78px + env(safe-area-inset-top))!important}.signin-card{border-radius:21px;padding:11px}}


/* v41: premium live sale controls, clean sheet headings and larger ViConnects brand */
.brand{min-width:72px!important;}
.brand img{width:50px!important;height:50px!important;border-radius:16px!important;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 16px 34px rgba(24,243,238,.20)!important;}
.brand-connects{font-size:13.2px!important;line-height:.88!important;margin-top:-3px!important;letter-spacing:-.045em!important;}
.top-row{align-items:center!important;}

.sheet-card .sheet-title{align-items:flex-start!important;gap:12px!important;margin-bottom:14px!important;}
.sheet-card .sheet-title small{display:block!important;color:var(--cyan)!important;font-size:12px!important;letter-spacing:.12em!important;line-height:1.2!important;margin:0 0 4px!important;}
.sheet-card .sheet-title h3{line-height:1.05!important;margin:0!important;}
.detail-card{padding-top:18px!important;scroll-padding-top:88px!important;}
.detail-card .sheet-title{position:sticky!important;top:0!important;z-index:60!important;padding:12px 54px 12px 0!important;margin:-2px 0 16px!important;background:linear-gradient(180deg,rgba(3,6,10,.99),rgba(3,6,10,.88) 80%,rgba(3,6,10,0))!important;border-bottom:0!important;backdrop-filter:blur(18px)!important;}
.detail-card .sheet-title .xbtn{position:absolute!important;right:0!important;top:8px!important;}
.detail-card .sheet-title h3{max-width:calc(100% - 4px)!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}

.live-room{min-height:min(82dvh,820px)!important;border-radius:30px!important;background:radial-gradient(circle at 50% 25%,rgba(24,243,238,.10),#000 68%)!important;box-shadow:0 28px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.11) inset!important;}
.live-video{height:min(82dvh,820px)!important;width:100%!important;object-fit:contain!important;background:#000!important;}
.live-room:fullscreen,.live-room:-webkit-full-screen{width:100vw!important;height:100vh!important;border-radius:0!important;border:0!important;}
.live-room:fullscreen .live-video,.live-room:-webkit-full-screen .live-video{height:100vh!important;}
.live-top{top:12px!important;left:12px!important;right:12px!important;gap:7px!important;flex-wrap:wrap!important;}
.live-pill{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:34px!important;background:rgba(3,8,12,.58)!important;border-color:rgba(255,255,255,.16)!important;box-shadow:0 10px 28px rgba(0,0,0,.22)!important;}
.live-viewers svg{width:15px!important;height:15px!important;stroke:#fff!important;fill:none!important;stroke-width:2!important;}
.live-viewers b{font-size:12px!important;color:#fff!important;}
.live-side{right:12px!important;bottom:84px!important;gap:9px!important;}
.live-side button{width:52px!important;height:52px!important;border-radius:19px!important;background:rgba(5,10,15,.55)!important;backdrop-filter:blur(16px)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 14px 32px rgba(0,0,0,.28)!important;color:#fff!important;}
.live-side button:hover,.live-side button:active{transform:translateY(-1px) scale(1.02);}
.live-side .get-small{background:linear-gradient(135deg,var(--cyan),var(--pink))!important;color:#061015!important;}
.live-side .stop-live{background:linear-gradient(135deg,#ff477f,#ff245e)!important;color:#fff!important;border:0!important;}
.live-input{left:12px!important;right:12px!important;bottom:12px!important;grid-template-columns:minmax(0,1fr) auto!important;}
.live-input input{min-height:48px!important;border-radius:18px!important;background:rgba(3,7,12,.66)!important;backdrop-filter:blur(16px)!important;}
.live-input .primary{border-radius:18px!important;min-width:74px!important;}
.live-comments{right:82px!important;bottom:82px!important;max-height:48%!important;}
.host-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:12px!important;}
.host-controls button{border-radius:20px!important;}

.detail-media{height:min(62dvh,620px)!important;min-height:390px!important;border-radius:28px!important;background:#020406!important;}
.detail-media .detail-main{object-fit:contain!important;object-position:center center!important;max-width:100%!important;max-height:100%!important;padding:0!important;}
.detail-media .detail-bg{filter:blur(26px) brightness(.48) saturate(1.2)!important;opacity:.72!important;}
.detail-zoom-btn{background:rgba(3,7,12,.62)!important;backdrop-filter:blur(16px)!important;}

@media(max-width:430px){
  .brand{min-width:66px!important}.brand img{width:46px!important;height:46px!important}.brand-connects{font-size:12px!important}.top-row{grid-template-columns:66px minmax(126px,1fr) 42px 42px!important;gap:7px!important}.location-row{gap:7px!important}.tiny-ai,.tiny-lang{width:44px!important;height:44px!important}.detail-card{padding-top:16px!important}.detail-card .sheet-title{padding:10px 52px 12px 0!important;margin-bottom:12px!important}.detail-media{height:min(60dvh,560px)!important;min-height:345px!important}.live-room,.live-video{height:min(78dvh,720px)!important}.live-side button{width:48px!important;height:48px!important;border-radius:18px!important}.live-comments{right:72px!important}.host-controls{grid-template-columns:1fr!important}
}
@media(max-width:370px){.brand img{width:42px!important;height:42px!important}.brand{min-width:60px!important}.brand-connects{font-size:11px!important}.top-row{grid-template-columns:60px minmax(118px,1fr) 40px 40px!important}.detail-media{height:min(56dvh,520px)!important;min-height:315px!important}.live-room,.live-video{height:min(74dvh,680px)!important}}

/* v42: ViPulse, Seller Studio, offers, collections and retention polish */
.vi-radar-bar{display:flex!important;grid-template-columns:none!important;gap:8px!important;overflow-x:auto!important;padding-bottom:4px!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;}
.vi-radar-bar::-webkit-scrollbar{display:none!important;}
.vi-radar-bar button{flex:0 0 clamp(122px,26vw,150px)!important;scroll-snap-align:start!important;min-width:122px!important;}
.vi-radar-bar #pulseOpen{border-color:rgba(37,238,151,.30)!important;background:linear-gradient(135deg,rgba(37,238,151,.18),rgba(24,243,238,.08))!important;}
.vi-radar-bar #pulseOpen span{background:linear-gradient(135deg,rgba(37,238,151,.34),rgba(24,243,238,.18))!important;box-shadow:0 0 0 4px rgba(37,238,151,.08),0 0 18px rgba(24,243,238,.20)!important;}
.pulse-card,.studio-card{max-height:min(88dvh,860px)!important;}
.pulse-body,.studio-body{display:grid;gap:14px;padding-bottom:16px;}
.pulse-hero,.coach-card,.offer-preview-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:24px;background:linear-gradient(135deg,rgba(24,243,238,.12),rgba(255,47,126,.06));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
.pulse-hero>span,.coach-card>span{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));box-shadow:0 18px 38px rgba(24,243,238,.14);}
.pulse-hero svg,.coach-card svg{width:24px;height:24px;stroke:#071015!important;fill:none!important;stroke-width:2.2!important;}
.pulse-hero b,.coach-card b{display:block;font-size:17px;color:#fff}.pulse-hero small,.coach-card li{color:rgba(255,255,255,.72);line-height:1.35}.coach-card ul{margin:8px 0 0 16px;padding:0;display:grid;gap:6px}
.pulse-stats,.studio-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.pulse-stat,.studio-stat{min-height:84px;padding:11px;border-radius:20px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);display:grid;gap:4px;align-content:center;text-align:center;}
.pulse-stat span,.studio-stat span{margin:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:13px;background:rgba(24,243,238,.12);}
.pulse-stat svg,.studio-stat svg{width:17px;height:17px;stroke:#fff!important;fill:none!important;}
.pulse-stat b,.studio-stat b{font-size:16px;color:#fff}.pulse-stat small,.studio-stat small{font-size:10px;color:rgba(255,255,255,.62)}
.pulse-section{display:grid;gap:10px;}.pulse-section h4{margin:0;color:#fff;font-size:15px;letter-spacing:-.02em}.pulse-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.pulse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.pulse-item{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:21px;padding:8px;text-align:left;display:grid;grid-template-columns:64px minmax(0,1fr);gap:9px;align-items:center;min-width:0;}
.pulse-item img{width:64px;height:64px;border-radius:17px;object-fit:cover;background:#111;}.pulse-item b{display:block;color:#fff;font-size:12px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pulse-item small{display:block;color:rgba(255,255,255,.62);font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.community-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.community-row::-webkit-scrollbar{display:none}.community-pill{flex:0 0 156px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;text-align:left;border-radius:20px;padding:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}.community-pill span{width:34px;height:34px;border-radius:14px;background:rgba(24,243,238,.12);display:grid;place-items:center}.community-pill svg{width:18px;height:18px;stroke:#fff!important;fill:none!important}.community-pill b{font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-pill small{font-size:10px;color:rgba(255,255,255,.62)}
.schedule-mini{display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}.schedule-mini span{width:36px;height:36px;border-radius:14px;background:rgba(255,47,126,.12);display:grid;place-items:center}.schedule-mini svg{width:18px;height:18px;stroke:#fff!important;fill:none!important}.schedule-mini b{display:block;color:#fff;font-size:13px}.schedule-mini small{display:block;color:rgba(255,255,255,.63);font-size:10px}
.studio-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.offer-card input,.offer-card textarea,.schedule-card input{width:100%;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.075);color:#fff;padding:14px 15px;outline:none}.offer-preview-card{margin-bottom:10px}.offer-preview-card img{width:68px;height:68px;border-radius:19px;object-fit:cover}.offer-preview-card b{display:block;color:#fff}.offer-preview-card small{color:rgba(255,255,255,.66)}
.detail-actions #detailOffer,.detail-actions #detailPriceAlert,.detail-actions #detailCollect{border-color:rgba(24,243,238,.20)!important;background:rgba(24,243,238,.075)!important;}
@media(max-width:430px){.vi-radar-bar{gap:7px!important}.vi-radar-bar button{flex-basis:118px!important;min-width:118px!important}.pulse-stats,.studio-stats{grid-template-columns:repeat(3,minmax(0,1fr));}.pulse-grid{grid-template-columns:1fr}.pulse-item{grid-template-columns:58px minmax(0,1fr)}.pulse-item img{width:58px;height:58px}.studio-actions{grid-template-columns:1fr}.pulse-card,.studio-card{padding-left:16px!important;padding-right:16px!important}}

/* v44: account identity, compact top plan chip, ViPulse/Seller Studio clarity and AI result spacing */
.location-row{overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.location-row::-webkit-scrollbar{display:none;}
.account-top-chip{
  flex:0 0 auto;min-width:78px;max-width:118px;height:44px;border-radius:22px;
  display:grid;align-content:center;justify-items:start;gap:1px;padding:6px 12px;
  border:1px solid rgba(24,243,238,.22);
  background:linear-gradient(135deg,rgba(24,243,238,.16),rgba(255,47,126,.10));
  color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 28px rgba(0,0,0,.18);
  text-align:left;overflow:hidden;
}
.account-top-chip b{max-width:100%;font-size:11px;line-height:1.04;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.03em;}
.account-top-chip small{max-width:100%;font-size:8.6px;line-height:1;font-weight:950;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-top-chip.is-pro{border-color:rgba(255,47,126,.35);background:linear-gradient(135deg,rgba(24,243,238,.20),rgba(255,47,126,.24));}
.vi-radar-bar{padding-top:4px!important;margin-top:3px!important;}
.vi-radar-bar button{flex-basis:clamp(112px,25vw,142px)!important;min-width:112px!important;}
.pulse-body .muted,.studio-body .muted{line-height:1.45;color:rgba(255,255,255,.70);}
.pulse-section .pulse-grid:empty::after{content:'No updates yet';color:rgba(255,255,255,.62);font-size:13px;}
.ai-answer{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:12px 13px!important;}
.ai-answer .ai-brand-mark{flex:0 0 34px!important;width:34px!important;height:34px!important;margin-top:2px!important;}
.ai-answer>div{display:grid!important;gap:7px!important;min-width:0!important;}
.ai-answer b{display:block!important;margin:0!important;line-height:1.1!important;}
.ai-answer small{display:block!important;margin-top:0!important;line-height:1.45!important;color:rgba(255,255,255,.80)!important;}
.ai-help-results .search-results,.ai-help-results .compact-results{margin-top:10px!important;}
.ai-note-pills{margin-top:10px!important;}
@media(max-width:430px){
  .location-row{gap:6px!important;}
  .area-chip{min-width:118px!important;max-width:148px!important;}
  .tiny-lang,.tiny-ai{width:42px!important;height:42px!important;flex:0 0 42px!important;}
  .account-top-chip{height:42px;min-width:72px;max-width:96px;padding:6px 10px;border-radius:20px;}
  .account-top-chip b{font-size:10px;}.account-top-chip small{font-size:8px;}
  .ghost-dot{flex:0 0 auto;min-width:42px!important;}
  .ghost-dot b{display:none!important;}
  .vi-radar-bar button{flex-basis:108px!important;min-width:108px!important;}
}
@media(max-width:370px){
  .area-chip{min-width:104px!important;max-width:126px!important;}
  .account-top-chip{min-width:66px;max-width:82px;padding:5px 8px;}
  .tiny-lang,.tiny-ai{width:39px!important;height:39px!important;flex-basis:39px!important;}
}

/* v44: cleaner top shortcuts, Service Profiles and paid Service Connect */
.vi-radar-bar{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  overflow:visible!important;
  padding:0 12px 8px!important;
  margin-top:2px!important;
  scrollbar-width:none!important;
}
.vi-radar-bar button{
  min-width:0!important;
  flex:initial!important;
  min-height:48px!important;
  border-radius:20px!important;
  padding:9px 10px!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 30px rgba(0,0,0,.20)!important;
}
.vi-radar-bar button span{width:28px!important;height:28px!important;font-size:14px!important;}
.vi-radar-bar button b{font-size:11.5px!important;}
.vi-radar-bar button small{font-size:8.5px!important;}
.story-strip{top:calc(174px + env(safe-area-inset-top))!important;padding-top:10px!important;}
.directory{padding-top:calc(158px + env(safe-area-inset-top))!important;}
.service-profile-builder{display:grid;gap:10px;margin:10px 0;padding:12px;border-radius:24px;background:linear-gradient(135deg,rgba(24,243,238,.09),rgba(255,47,126,.055));border:1px solid rgba(255,255,255,.12);}
.service-enable-row{display:flex!important;align-items:center!important;gap:10px!important;font-weight:900!important;line-height:1.2;}
.service-enable-row input{width:18px;height:18px;accent-color:var(--cyan);}
.service-fields{display:grid;gap:9px;}
.service-fields.hidden{display:none!important;}
.service-fields input{padding:12px 13px;border-radius:17px;}
.service-fields small{color:rgba(255,255,255,.66);font-size:11px;line-height:1.35;}
.service-connect-card .service-connect-preview,.service-pay-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);}
.service-connect-card .avatar-wrap img,.service-pay-card img{width:56px;height:56px;border-radius:18px;object-fit:cover;}
.service-fee-card{display:grid;gap:4px;margin:12px 0;padding:14px;border-radius:24px;background:linear-gradient(135deg,rgba(24,243,238,.12),rgba(255,47,126,.09));border:1px solid rgba(24,243,238,.20);}
.service-fee-card b{font-size:22px;color:#fff;}
.service-fee-card span{font-weight:900;color:#fff;}
.service-fee-card small,.service-fee-note{color:rgba(255,255,255,.68);line-height:1.35;}
.connect-fee-pill{display:inline-grid;margin-top:6px;width:max-content;padding:4px 8px;border-radius:999px;background:rgba(37,238,151,.14);border:1px solid rgba(37,238,151,.25);font-size:10px;font-weight:950;color:#eafff5;}
.service-worker-card{border-color:rgba(37,238,151,.18)!important;background:linear-gradient(135deg,rgba(37,238,151,.08),rgba(255,255,255,.055))!important;}
.service-profile-note{display:flex;gap:10px;align-items:center;margin:10px 0;padding:12px;border-radius:22px;background:rgba(24,243,238,.07);border:1px solid rgba(24,243,238,.18);}
.service-profile-note>span{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));}
.service-unlocked{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:999px;background:rgba(37,238,151,.14);border:1px solid rgba(37,238,151,.24);font-size:12px;font-weight:950;color:#eafff5;}
.profile-actions #profileTrustOpen{border-color:rgba(37,238,151,.20);}
@media(max-width:430px){
  .vi-radar-bar{gap:8px!important;padding-inline:10px!important;}
  .vi-radar-bar button{min-height:46px!important;padding:8px 8px!important;grid-template-columns:24px minmax(0,1fr)!important;}
  .vi-radar-bar button span{width:24px!important;height:24px!important;font-size:12px!important;}
  .vi-radar-bar button b{font-size:10.4px!important;}
  .vi-radar-bar button small{display:block!important;font-size:7.4px!important;}
  .story-strip{top:calc(170px + env(safe-area-inset-top))!important;}
}
@media(max-width:370px){
  .vi-radar-bar{gap:6px!important;}
  .vi-radar-bar button{border-radius:18px!important;padding:7px 6px!important;}
  .vi-radar-bar button b{font-size:9.6px!important;}
  .vi-radar-bar button small{display:none!important;}
  .story-strip{top:calc(164px + env(safe-area-inset-top))!important;}
}


/* v44 service connect polish */
.vi-radar-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.story-strip { margin-top: 8px; }
.trust-inline-btn { display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:12px 14px; border-radius:22px; }
.trust-inline-btn span { width:42px; height:42px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(40,224,224,.28), rgba(255,47,133,.20)); border:1px solid rgba(255,255,255,.16); }
.service-profile-editor { margin: 12px 0; padding: 12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); border-radius:22px; }
.service-provider-toggle { display:flex; gap:10px; align-items:center; font-weight:900; }
.service-profile-fields { display:none; margin-top:10px; gap:10px; }
.service-profile-fields.open { display:grid; }
.service-profile-fields select, .service-profile-fields input { width:100%; }
.contact-unlock-card .payment-inline-info { margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); }
.contact-provider-mini { display:flex; align-items:center; gap:12px; padding:12px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.contact-provider-mini img { width:58px; height:58px; border-radius:18px; object-fit:cover; }
.contact-fee-box { margin-top:10px; display:flex; gap:12px; align-items:center; padding:12px; border-radius:20px; background:linear-gradient(135deg, rgba(37,224,224,.14), rgba(255,47,133,.13)); border:1px solid rgba(37,224,224,.20); }
.contact-fee-box svg { width:24px; height:24px; }
@media (max-width: 420px) { .vi-radar-bar { gap:7px; } .vi-radar-bar button { min-width:0; padding:10px 8px; } }

/* v44 final: top quick actions stay as three relaxed cards, TrustPass moved to profile */
.vi-radar-bar{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  overflow:visible!important;
  padding-top:5px!important;
  padding-bottom:3px!important;
  margin-top:4px!important;
}
.vi-radar-bar button{
  min-width:0!important;
  width:100%!important;
  flex:initial!important;
  min-height:50px!important;
  padding:9px 10px!important;
  border-radius:20px!important;
}
.vi-radar-bar button span{width:34px!important;height:34px!important;border-radius:15px!important;}
.vi-radar-bar button b{font-size:12px!important;line-height:1.05!important;}
.vi-radar-bar button small{font-size:8.8px!important;line-height:1!important;}
.vi-radar-bar #trustOpen{display:none!important;}
.story-strip{margin-top:10px!important;}
.service-profile-fields{display:none;gap:9px;margin-top:10px;padding:10px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);}
.service-profile-fields.open{display:grid;}
.service-provider-toggle{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:20px;background:rgba(24,243,238,.06);border:1px solid rgba(24,243,238,.12);font-weight:850;color:#fff;}
.connect-fee-pill{display:inline-flex;margin-top:5px;width:max-content;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:950;color:#071015;background:linear-gradient(135deg,var(--cyan),var(--pink));box-shadow:0 8px 20px rgba(24,243,238,.12);}
.contact-provider-mini{display:flex;align-items:center;gap:11px;padding:11px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.contact-provider-mini img{width:52px;height:52px;border-radius:18px;object-fit:cover;}
.contact-provider-mini b{display:block;color:#fff;font-size:15px;}.contact-provider-mini small{color:rgba(255,255,255,.68);}
.contact-fee-box{display:flex;gap:12px;align-items:center;margin-top:10px;padding:13px;border-radius:22px;background:linear-gradient(135deg,rgba(24,243,238,.13),rgba(255,47,126,.08));border:1px solid rgba(24,243,238,.18);}
.contact-fee-box>span{width:44px;height:44px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--pink));}.contact-fee-box svg{width:22px;height:22px;stroke:#061015!important;fill:none!important;}
.contact-fee-box b{display:block;color:#fff;font-size:18px;}.contact-fee-box small{color:rgba(255,255,255,.72);line-height:1.35;}
@media(max-width:370px){.vi-radar-bar{gap:7px!important}.vi-radar-bar button{padding:8px 7px!important;min-height:48px!important}.vi-radar-bar button span{width:30px!important;height:30px!important}.vi-radar-bar button b{font-size:11px!important}.vi-radar-bar button small{font-size:8px!important}}

/* v44 final services/contact-fee layout polish */
#trustOpen{display:none!important;}
.vi-radar-bar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:8px 10px 6px!important;padding:0!important;overflow:visible!important;}
.vi-radar-bar button{min-width:0!important;width:100%!important;min-height:54px!important;padding:10px 11px!important;border-radius:22px!important;display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;column-gap:9px!important;}
.vi-radar-bar button span{width:32px!important;height:32px!important;}
.vi-radar-bar button b,.vi-radar-bar button small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.story-strip{margin-top:12px!important;border-top:0!important;box-shadow:none!important;}
.trust-inline-btn{margin:10px 0 12px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;gap:12px!important;}
.service-profile-editor{margin:13px 0 4px!important;padding:14px!important;border-radius:24px!important;background:linear-gradient(135deg,rgba(34,238,222,.08),rgba(255,47,133,.055))!important;border:1px solid rgba(255,255,255,.12)!important;}
.service-provider-toggle{display:flex!important;align-items:center!important;gap:11px!important;color:#fff!important;font-weight:950!important;line-height:1.25!important;}
.service-provider-toggle input{width:20px!important;height:20px!important;accent-color:#29e7df!important;}
.service-profile-fields{display:none;margin-top:12px;gap:10px;}
.service-profile-fields.open{display:grid!important;}
.service-profile-fields select,.service-profile-fields input{width:100%!important;border-radius:18px!important;background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;}
.service-profile-fields small{color:rgba(255,255,255,.70)!important;line-height:1.38!important;}
.connect-fee-pill{display:inline-flex!important;align-items:center!important;width:max-content!important;margin-top:8px!important;padding:5px 9px!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(44,234,221,.20),rgba(255,47,133,.12))!important;border:1px solid rgba(44,234,221,.28)!important;color:#eaffff!important;font-size:10.5px!important;font-weight:950!important;letter-spacing:.02em!important;}
.service-worker-card{position:relative;overflow:hidden;border-color:rgba(42,234,222,.28)!important;}
.service-worker-card::after{content:'service';position:absolute;right:13px;top:10px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:rgba(42,234,222,.72);font-weight:1000;}
.contact-unlock-card{max-width:430px!important;}
.contact-provider-mini{display:flex!important;align-items:center!important;gap:12px!important;padding:12px!important;border-radius:22px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;}
.contact-provider-mini img{width:60px!important;height:60px!important;border-radius:20px!important;object-fit:cover!important;}
.contact-fee-box{margin-top:10px!important;display:flex!important;align-items:center!important;gap:12px!important;padding:13px!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(42,234,222,.16),rgba(255,47,133,.13))!important;border:1px solid rgba(42,234,222,.24)!important;}
.payment-inline-info{margin-top:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;color:rgba(255,255,255,.72)!important;}
.profile-actions #profileServiceConnect{background:linear-gradient(135deg,#29e7df,#ff2f85)!important;color:#fff!important;border:0!important;box-shadow:0 14px 32px rgba(255,47,133,.20)!important;}
@media(max-width:430px){
  .vi-radar-bar{gap:8px!important;margin-inline:8px!important;}
  .vi-radar-bar button{min-height:48px!important;padding:8px!important;border-radius:20px!important;grid-template-columns:28px minmax(0,1fr)!important;}
  .vi-radar-bar button span{width:28px!important;height:28px!important;}
  .vi-radar-bar button b{font-size:10px!important;}
  .vi-radar-bar button small{font-size:7.2px!important;}
}
@media(max-width:360px){.vi-radar-bar{gap:6px!important}.vi-radar-bar button{grid-template-columns:1fr!important;place-items:center!important;text-align:center!important}.vi-radar-bar button small{display:none!important}}

/* v45: service marketplace polish, QR share card, directory spacing, owner delete reliability */
:root{
  --vc-premium-1:#18f3ee;
  --vc-premium-2:#25ee97;
  --vc-premium-3:#0a6f67;
}
.primary,
.profile-actions .primary,
#profileFollow,
.dir-actions .profile-small,
.action.get,
.live-open-mini,
.live-resume-mini,
.service-empty .primary,
.share-actions .primary{
  background:linear-gradient(135deg,var(--vc-premium-1),var(--vc-premium-2))!important;
  color:#031414!important;
  border:0!important;
  box-shadow:0 14px 32px rgba(24,243,238,.16), inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.profile-actions .primary,
#profileFollow{font-weight:950!important;text-shadow:none!important;}
.directory{
  padding-top:calc(224px + env(safe-area-inset-top))!important;
  background:radial-gradient(circle at 50% 0,#123b44 0,#05070a 43%,#05070a 100%)!important;
}
.directory .section-head{
  position:relative!important;
  z-index:2!important;
  margin-bottom:10px!important;
}
.directory .mini-btn{
  position:relative!important;
  z-index:4!important;
  min-width:78px!important;
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.14)!important;
}
.directory .chips{position:relative!important;z-index:2!important;}
@media(max-width:390px){.directory{padding-top:calc(214px + env(safe-area-inset-top))!important}.directory .mini-btn{min-height:38px!important;padding:8px 14px!important}.directory .chips{gap:7px!important}.chip{padding:9px 11px!important}}
.profile-qr{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  align-items:stretch!important;
  padding:14px!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,rgba(24,243,238,.10),rgba(37,238,151,.06))!important;
}
.vc-qr-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;width:100%;}
.qr-wrap.premium-qr{position:relative!important;width:112px!important;height:112px!important;display:grid;place-items:center;border-radius:26px!important;background:#fff!important;padding:8px!important;box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06)!important;overflow:hidden!important;}
.qr-wrap.premium-qr .qr-main{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:18px!important;display:block!important;}
.qr-wrap.premium-qr .qr-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:30px!important;height:30px!important;border-radius:10px!important;background:#071014!important;padding:3px!important;box-shadow:0 0 0 4px #fff!important;object-fit:contain!important;}
.qr-wrap .qr-fallback{display:none;position:absolute;inset:8px;border-radius:18px;background:radial-gradient(circle at 25% 20%,rgba(24,243,238,.42),transparent 34%),linear-gradient(135deg,#071014,#0e2c31);place-items:center;color:#fff;font-size:28px;font-weight:1000;letter-spacing:-.08em;}
.qr-wrap.qr-failed .qr-main{display:none!important}.qr-wrap.qr-failed .qr-fallback{display:grid!important}.qr-wrap.qr-failed .qr-logo{display:none!important;}
.qr-copy{min-width:0;display:grid;gap:6px}.qr-copy b{font-size:15px;font-weight:1000}.qr-copy small{overflow-wrap:anywhere;word-break:break-word;line-height:1.35;color:rgba(255,255,255,.66)}
.profile-qr-actions{display:flex;justify-content:flex-start}.profile-qr-actions button,.profile-qr button{border-radius:999px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;padding:10px 18px!important;font-weight:950!important;}
.share-card .sheet-title{margin-bottom:12px}.share-body{display:grid;gap:14px}.share-card .vc-qr-card{grid-template-columns:1fr;justify-items:center;text-align:center}.share-card .qr-wrap.premium-qr{width:min(62vw,260px)!important;height:min(62vw,260px)!important;border-radius:32px!important}.share-card .qr-wrap.premium-qr .qr-logo{width:46px!important;height:46px!important;border-radius:15px!important;box-shadow:0 0 0 7px #fff!important}.share-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.share-actions a,.share-actions button{display:grid;place-items:center;text-align:center;min-height:46px;border-radius:18px;text-decoration:none;font-weight:950;color:#fff}.share-actions .soft{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.14)!important;}
.service-worker-card{
  grid-template-columns:66px minmax(0,1fr) auto!important;
  background:linear-gradient(145deg,rgba(24,243,238,.085),rgba(255,255,255,.055))!important;
  border-color:rgba(24,243,238,.17)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.18)!important;
}
.service-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.service-rank-pill,.service-ai-pill,.connect-fee-pill{display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:4px 8px;font-size:9.5px;font-weight:1000;line-height:1;border:1px solid rgba(255,255,255,.12)}.service-rank-pill{background:rgba(255,214,102,.13);color:#ffe9a6;border-color:rgba(255,214,102,.24)}.service-ai-pill{background:rgba(24,243,238,.12);color:#dffeff;border-color:rgba(24,243,238,.22)}
.service-empty{display:grid;gap:10px;place-items:start;padding:18px;border:1px solid rgba(24,243,238,.18);border-radius:26px;background:linear-gradient(145deg,rgba(24,243,238,.08),rgba(37,238,151,.045));}.service-empty>span{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.10)}.service-empty svg{width:24px;height:24px}.service-empty b{font-size:17px}.service-empty small{color:rgba(255,255,255,.68);line-height:1.4}.service-empty button{width:100%;}
.detail-card{max-height:96dvh!important;padding-top:6px!important;}.detail-card .sheet-title{position:sticky!important;top:0!important;z-index:80!important;margin:0 0 10px!important;padding:10px 54px 12px 0!important;background:linear-gradient(180deg,rgba(3,6,10,.995),rgba(3,6,10,.92) 78%,rgba(3,6,10,0))!important;}.detail-card .sheet-title small{line-height:1!important}.detail-card .sheet-title h3{line-height:1.05!important;}
.showroom-head h3::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vc-premium-1);margin-left:8px;vertical-align:middle;opacity:.75}.showroom-grid{gap:10px!important}.inside-card{border-radius:19px!important;box-shadow:0 12px 28px rgba(0,0,0,.24)!important;}
@media(max-width:390px){.vc-qr-card{grid-template-columns:96px minmax(0,1fr);gap:11px}.qr-wrap.premium-qr{width:96px!important;height:96px!important;border-radius:23px!important}.qr-wrap.premium-qr .qr-logo{width:27px!important;height:27px!important}.share-actions{grid-template-columns:1fr}.service-worker-card{grid-template-columns:58px minmax(0,1fr)!important}.service-worker-card .dir-actions{grid-column:1/-1;justify-content:flex-end}.detail-card{max-height:97dvh!important}.detail-card .sheet-title{padding-right:52px!important}}


/* v46: payment-service UX, native-alert removal, premium green buttons, fixed detail headers */
:root{--vc-good-1:#15f5da;--vc-good-2:#20f09a;--vc-good-3:#0e4f4d;}
.primary:not(.danger-confirm),
.profile-actions .primary:not(.danger-confirm),
#profileFollow,
#startContactUnlock,
#sendBooking,
#sendChat,
#runAiHelp,
#publishBtn,
#saveProfile,
.share-actions .primary,
.service-empty .primary,
.action.get,
.live-open-mini,
.live-resume-mini{
  background:linear-gradient(135deg,var(--vc-good-1),var(--vc-good-2))!important;
  color:#021412!important;
  border:0!important;
  box-shadow:0 14px 32px rgba(21,245,218,.16),inset 0 1px 0 rgba(255,255,255,.28)!important;
  text-shadow:none!important;
}
.danger-confirm,.soft.danger,.owner-tools .danger{background:linear-gradient(135deg,#ff6868,#ff2f55)!important;color:#fff!important;border:0!important;}
.profile-actions #profileServiceConnect{background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;}
.profile-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.profile-actions .soft,.profile-actions .primary,.profile-actions a{display:grid!important;place-items:center!important;min-height:48px!important;border-radius:20px!important;text-decoration:none!important;}
.service-access-note{display:flex!important;gap:10px!important;align-items:center!important;margin:9px 0 12px!important;padding:10px 12px!important;border-radius:18px!important;border:1px solid rgba(21,245,218,.17)!important;background:rgba(21,245,218,.06)!important;color:rgba(255,255,255,.78)!important;line-height:1.35!important;}
.service-access-note span{width:28px;height:28px;border-radius:11px;display:grid;place-items:center;background:rgba(21,245,218,.12);flex:0 0 auto;}
.service-access-note svg{width:16px;height:16px;stroke:#ccfff6!important;fill:none!important;}
.detail-service-note{margin:8px 0 10px!important;}
.connect-fee-pill{display:none!important;}
.contact-unlock-card .payment-inline-info{display:none!important;}
.contact-soft-note{display:flex;align-items:center;gap:12px;margin-top:11px;padding:12px;border-radius:20px;border:1px solid rgba(21,245,218,.18);background:rgba(21,245,218,.065);}
.contact-soft-note>span{width:40px;height:40px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.10);}
.contact-soft-note b{font-size:16px;color:#fff}.contact-soft-note small{display:block;color:rgba(255,255,255,.72);line-height:1.35;margin-top:3px;}
.payment-result-card{display:grid;gap:8px;place-items:center;margin-top:12px;padding:12px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);}
.payment-result-card.success{border-color:rgba(32,240,154,.34);background:rgba(32,240,154,.08)}.payment-result-card.danger{border-color:rgba(255,80,80,.34);background:rgba(255,80,80,.08)}
.confirm-sheet{border:0;background:transparent;color:#fff;max-width:min(92vw,390px);padding:0}.confirm-sheet::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(10px)}.confirm-card{padding:20px;border-radius:28px;background:rgba(8,12,16,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px rgba(0,0,0,.52);display:grid;gap:12px;text-align:left}.confirm-icon{width:44px;height:44px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--vc-good-1),var(--vc-good-2));color:#051412;font-weight:1000}.confirm-icon.danger{background:linear-gradient(135deg,#ff6868,#ff2f55);color:#fff}.confirm-card h3{margin:0;font-size:22px;letter-spacing:-.04em}.confirm-card p{margin:0;color:rgba(255,255,255,.74);line-height:1.45}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.confirm-actions button{min-height:48px;border-radius:18px;font-weight:950}
.detail-card{padding-top:0!important;max-height:98dvh!important;}.detail-card>.sheet-bar{position:sticky!important;top:0!important;z-index:95!important;margin:8px auto 0!important;}.detail-card .sheet-title{position:sticky!important;top:0!important;z-index:92!important;margin:0 -16px 12px!important;padding:12px 64px 14px 18px!important;background:linear-gradient(180deg,rgba(3,7,10,.99),rgba(3,7,10,.94) 74%,rgba(3,7,10,.76))!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(20px)!important;box-shadow:0 18px 38px rgba(0,0,0,.28)!important;}.detail-card .sheet-title .xbtn{right:14px!important;top:14px!important}.detail-card .sheet-title h3{font-size:20px!important;line-height:1.08!important;max-width:100%!important}.detail-card .sheet-title small{font-size:11px!important;letter-spacing:.14em!important;color:var(--vc-good-1)!important;}
.directory{padding-top:calc(238px + env(safe-area-inset-top))!important;}.directory .section-head{margin-top:0!important;}.directory .section-head .mini-btn{transform:translateY(-2px)!important;}
.share-actions.two{grid-template-columns:1fr 1fr!important}.share-card .qr-wrap.premium-qr{background:#fff!important}.share-card .qr-wrap.premium-qr .qr-main{filter:contrast(1.08)!important}.share-card .qr-copy small{font-size:12px!important;max-width:100%!important;}
.qr-wrap.qr-failed{background:radial-gradient(circle at 50% 0,rgba(21,245,218,.28),transparent 38%),#fff!important}.qr-wrap.qr-failed .qr-fallback{display:grid!important;color:#061014!important;background:repeating-linear-gradient(45deg,#111 0 4px,#fff 4px 8px)!important;opacity:.18}.qr-wrap.qr-failed::after{content:'Vi';position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:18px;background:#061014;color:#fff;display:grid;place-items:center;font-weight:1000;box-shadow:0 0 0 8px #fff;}
@media(max-width:390px){.profile-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.profile-actions .soft,.profile-actions .primary,.profile-actions a{min-height:46px!important;border-radius:18px!important}.directory{padding-top:calc(230px + env(safe-area-inset-top))!important}.detail-card .sheet-title{padding-right:60px!important}.contact-unlock-card{max-height:74dvh!important}}

/* v47: Product Details AI auto-return, Seller Studio Today metrics, Wanted Auto-Match */
.studio-today{border:1px solid rgba(30,246,244,.20);background:linear-gradient(145deg,rgba(30,246,244,.10),rgba(33,255,169,.06),rgba(0,0,0,.12));border-radius:24px;padding:13px;margin:0 0 12px;box-shadow:0 18px 42px rgba(0,0,0,.22)}
.studio-today-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}.studio-today-title>span{width:38px;height:38px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(30,246,244,.92),rgba(33,255,169,.72));box-shadow:0 14px 36px rgba(30,246,244,.20)}.studio-today-title svg{width:20px;height:20px;stroke:#06100e}.studio-today-title b{display:block;color:#fff;font-size:16px}.studio-today-title small{color:rgba(255,255,255,.68);line-height:1.25}.today-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.today-stat{min-width:0;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.10);display:grid;gap:3px;justify-items:center;text-align:center;padding:9px 5px}.today-stat span{width:28px;height:28px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center}.today-stat svg{width:15px;height:15px;stroke:#fff}.today-stat b{font-size:17px;line-height:1;color:#fff}.today-stat small{font-size:9px;color:rgba(255,255,255,.66);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.wanted-auto-match{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);border-radius:24px;padding:12px}.wanted-match-list{display:grid;gap:9px}.wanted-match-card{border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(30,246,244,.04));border-radius:20px;padding:10px;display:grid;gap:9px}.wanted-match-head{display:flex;gap:9px;align-items:flex-start}.wanted-match-head>span{width:34px;height:34px;border-radius:14px;background:rgba(30,246,244,.12);display:grid;place-items:center;flex:0 0 auto}.wanted-match-head svg{width:18px;height:18px;stroke:var(--cyan)}.wanted-match-head b{display:block;font-size:13px;color:#fff;line-height:1.2}.wanted-match-head small{display:block;color:rgba(255,255,255,.62);margin-top:2px;font-size:11px}.wanted-match-product{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);border-radius:16px;padding:6px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;color:#fff;text-align:left}.wanted-match-product img{width:42px;height:42px;border-radius:12px;object-fit:cover;background:#071014}.wanted-match-product b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wanted-match-product small{font-size:10px;color:var(--vc-good-1)}
@media(max-width:390px){.today-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.today-stat{padding:8px 4px}.today-stat small{font-size:8.5px}.studio-today{padding:11px;border-radius:22px}.wanted-match-card{border-radius:18px}}

/* v49: service-only contact fee, premium green buttons, secure account restore */
:root{--vc-action-a:#16f4dc;--vc-action-b:#22ee9b;--vc-action-c:#0a5d55;}
.primary:not(.danger-confirm),
.profile-actions .primary:not(.danger-confirm),
.profile-actions .soft:not(.danger),
#profileFollow,
#profileServiceConnect,
#startContactUnlock,
#sendBooking,
#sendChat,
#runAiHelp,
#publishBtn,
#saveProfile,
#restoreAccountBtn,
#openWalletBtn,
.share-actions .primary,
.service-empty .primary,
.action.get,
.action.book,
.action.live,
.live-open-mini,
.live-resume-mini,
.chat-send-icon,
.dir-actions .profile-small{
  background:linear-gradient(135deg,var(--vc-action-a),var(--vc-action-b))!important;
  color:#021513!important;
  border:0!important;
  box-shadow:0 14px 34px rgba(22,244,220,.16), inset 0 1px 0 rgba(255,255,255,.28)!important;
  text-shadow:none!important;
}
.action.get span,.action.book span,.action.live span,.action.chat span,
.reel-card.is-active .action.get span,.reel-card.is-active .action.book span,.reel-card.is-active .action.live span,.reel-card.is-active .action.chat span,
.plan-orb,.wallet-orb,.checkout-hero .plan-orb{
  background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.58),transparent 25%),linear-gradient(145deg,var(--vc-action-a),var(--vc-action-b))!important;
  color:#031513!important;
  box-shadow:0 14px 30px rgba(22,244,220,.18)!important;
}
.action.live b,.action.get b,.action.book b,.action.chat b{color:inherit!important;}
.badge.price{background:linear-gradient(135deg,var(--vc-action-a),var(--vc-action-b))!important;color:#031513!important;border:0!important;}
.chat-bubble.mine{background:linear-gradient(135deg,rgba(22,244,220,.92),rgba(34,238,155,.84))!important;color:#021513!important;}
.profile-actions #profileServiceConnect{background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;}
.signin-row.secure-signin{display:grid!important;grid-template-columns:1fr 120px auto!important;gap:8px!important;align-items:center!important;}
.signin-row.secure-signin input{min-width:0!important;}
.pin-help{display:block;margin:-4px 0 8px;padding:0 4px;color:rgba(255,255,255,.62);font-size:11.5px;line-height:1.35;}
.service-access-note{background:rgba(22,244,220,.055)!important;border-color:rgba(22,244,220,.18)!important;}
.contact-soft-note{background:rgba(22,244,220,.06)!important;border-color:rgba(22,244,220,.18)!important;}
.contact-soft-note b{color:#eafffb!important;}
@media(max-width:410px){.signin-row.secure-signin{grid-template-columns:1fr 1fr!important}.signin-row.secure-signin button{grid-column:1/-1;min-height:44px}.pin-help{font-size:11px}}

/* v50: ViAds, ViDeals, ViJobs, ViVerified, ViAgents revenue engine */
.revenue-card{max-height:94dvh!important;overflow:auto!important;background:linear-gradient(180deg,rgba(5,10,14,.98),rgba(3,7,10,.96))!important;}
.revenue-body{display:grid;gap:14px;padding-bottom:16px;}
.revenue-hero{position:relative;overflow:hidden;border:1px solid rgba(22,244,220,.18);background:radial-gradient(circle at 12% 0,rgba(22,244,220,.20),transparent 36%),radial-gradient(circle at 95% 18%,rgba(34,238,155,.12),transparent 34%),rgba(255,255,255,.045);border-radius:28px;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;box-shadow:0 22px 52px rgba(0,0,0,.24)}
.revenue-hero>span{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--vc-action-a,#16f4dc),var(--vc-action-b,#22ee9b));color:#031513;box-shadow:0 18px 42px rgba(22,244,220,.18)}
.revenue-hero svg{width:26px;height:26px;stroke:currentColor}.revenue-hero small{display:block;color:var(--vc-action-a,#16f4dc);font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.revenue-hero h4{margin:2px 0 4px;font-size:21px;line-height:1.02}.revenue-hero p{margin:0;color:rgba(255,255,255,.70);line-height:1.38;font-size:13px}.revenue-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.revenue-stat{min-width:0;border-radius:22px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.10);padding:11px 7px;text-align:center;display:grid;gap:4px}.revenue-stat b{font-size:19px;color:#fff;line-height:1}.revenue-stat small{font-size:10px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.revenue-block,.pricing-section{border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(22,244,220,.035));border-radius:26px;padding:12px;display:grid;gap:12px}.revenue-block-head,.pricing-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.revenue-block-head h4,.pricing-section-title h4{margin:0;color:#fff;font-size:17px;letter-spacing:-.03em}.revenue-block-head small,.pricing-section-title small{color:rgba(255,255,255,.62);line-height:1.25}.revenue-plan-grid,.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.revenue-plan,.pricing-plan{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.11);background:radial-gradient(circle at 18% 0,rgba(22,244,220,.14),transparent 32%),rgba(255,255,255,.055);padding:12px;display:grid;gap:10px;min-height:180px}.revenue-plan::after,.pricing-plan::after{content:'';position:absolute;inset:auto -35px -55px auto;width:110px;height:110px;border-radius:50%;background:rgba(22,244,220,.08);pointer-events:none}.revenue-plan.deal,.pricing-plan.deal{background:radial-gradient(circle at 18% 0,rgba(255,214,102,.16),transparent 32%),rgba(255,255,255,.055)}.revenue-plan.verification,.pricing-plan.verification{background:radial-gradient(circle at 18% 0,rgba(112,176,255,.16),transparent 32%),rgba(255,255,255,.055)}.revenue-plan.agent,.pricing-plan.agent{background:radial-gradient(circle at 18% 0,rgba(34,238,155,.18),transparent 32%),rgba(255,255,255,.055)}.plan-head{display:flex;gap:10px;align-items:center}.plan-head>span{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}.plan-head svg{width:21px;height:21px;stroke:#eafffb}.plan-head small{display:block;color:var(--vc-action-a,#16f4dc);font-size:10px;font-weight:1000;letter-spacing:.08em}.plan-head h4{margin:0;font-size:14px;line-height:1.12;color:#fff}.plan-price{font-size:18px;color:#fff}.revenue-plan ul,.pricing-plan ul{margin:0;padding-left:16px;color:rgba(255,255,255,.70);font-size:11.5px;line-height:1.36}.plan-actions{margin-top:auto}.revenue-plan .primary,.pricing-plan .primary{min-height:42px;border-radius:16px!important;font-size:12px!important}.revenue-quick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.revenue-quick button{border-radius:18px;min-height:46px;font-weight:950}.revenue-row{display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.045);padding:8px}.revenue-row img{width:50px;height:50px;border-radius:16px;object-fit:cover;background:#071014}.revenue-row b{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.revenue-row small{display:block;color:rgba(255,255,255,.62);font-size:11px}.revenue-row em{font-style:normal;color:var(--vc-action-a,#16f4dc);font-weight:1000;font-size:11px}.revenue-empty{border:1px dashed rgba(255,255,255,.16);border-radius:22px;padding:14px;color:rgba(255,255,255,.64);text-align:center;background:rgba(255,255,255,.03)}.revenue-context-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;border:1px solid rgba(22,244,220,.16);border-radius:20px;padding:10px;background:rgba(22,244,220,.055);margin:8px 0}.revenue-context-card>span{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.10)}.revenue-context-card b{display:block;color:#fff}.revenue-context-card small{color:rgba(255,255,255,.66);line-height:1.35}.agent-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;border-radius:24px;border:1px solid rgba(34,238,155,.20);background:linear-gradient(145deg,rgba(34,238,155,.10),rgba(22,244,220,.04));padding:12px}.agent-card>span{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.10)}.agent-card b{font-size:17px;color:#fff}.agent-card small{display:block;color:rgba(255,255,255,.66);line-height:1.35}.agent-code{font-family:ui-monospace,Menlo,monospace;color:var(--vc-action-a,#16f4dc);font-weight:1000;background:rgba(0,0,0,.22);padding:3px 7px;border-radius:9px}.boost-picker-label small{color:rgba(255,255,255,.62)}.boost-product-card .boost-card-meta small{line-height:1.25}.momo-checkout input#momoDealPrice,.momo-checkout input#momoJobText{border-radius:18px!important;min-height:48px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;padding:0 14px!important}
@media(max-width:430px){.revenue-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.revenue-plan-grid,.pricing-grid{grid-template-columns:1fr}.revenue-quick{grid-template-columns:1fr}.revenue-hero{grid-template-columns:1fr;text-align:left}.revenue-hero>span{width:48px;height:48px}.revenue-row{grid-template-columns:44px minmax(0,1fr)}.revenue-row em{grid-column:2}.pricing-section{padding:10px;border-radius:24px}.revenue-plan,.pricing-plan{min-height:auto}.revenue-card{max-height:96dvh!important}}


/* v51: revenue engine click fixes, cleaner cards, annual plans, premium green buttons */
:root{
  --vc-premium-a:#16f4dc;
  --vc-premium-b:#25ee97;
  --vc-premium-c:#dffef7;
}
.primary,
.action.get,
.action.live,
.live-side .get-small,
.wallet-mini span,
.account-wallet-card button,
.dir-actions .profile-small,
.profile-actions .primary,
.detail-actions .primary,
.momo-checkout .primary,
.payment-result .primary,
.revenue-plan .primary,
.pricing-plan .primary{
  background:linear-gradient(135deg,var(--vc-premium-a),var(--vc-premium-b))!important;
  color:#031413!important;
  border:0!important;
  box-shadow:0 16px 34px rgba(22,244,220,.16)!important;
}
.action.get svg,.action.live svg{stroke:#031413!important}.action.get small,.action.live small{color:#031413!important;font-weight:1000!important}
.pricing-section{padding:13px!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.035))!important;border-color:rgba(255,255,255,.13)!important}
.pricing-section-title{align-items:flex-start!important}.pricing-section-title h4{font-size:18px!important}.pricing-section-title small{max-width:230px!important;text-align:right!important}
.pricing-grid,.revenue-plan-grid{gap:12px!important}
.pricing-plan,.revenue-plan{
  min-height:0!important;
  padding:14px!important;
  border-radius:26px!important;
  background:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 42px rgba(0,0,0,.18)!important;
  isolation:isolate!important;
}
.pricing-plan::after,.revenue-plan::after{display:none!important;content:none!important}
.pricing-plan.current{
  background:radial-gradient(circle at 0 0,rgba(37,238,151,.18),transparent 34%),linear-gradient(155deg,rgba(22,244,220,.10),rgba(255,255,255,.04))!important;
  border-color:rgba(37,238,151,.42)!important;
}
.plan-head>span{background:rgba(22,244,220,.12)!important;border-color:rgba(22,244,220,.22)!important;color:#eafffb!important}.plan-head small{color:var(--vc-premium-a)!important}.plan-price{font-size:19px!important;letter-spacing:-.03em!important}.pricing-plan ul,.revenue-plan ul{padding-left:17px!important;margin:0!important;color:rgba(255,255,255,.76)!important}.pricing-plan li,.revenue-plan li{margin:3px 0!important}
.active-plan-box{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;border-radius:26px!important;padding:13px!important;background:linear-gradient(135deg,rgba(37,238,151,.14),rgba(22,244,220,.06))!important;border:1px solid rgba(37,238,151,.24)!important}.active-plan-box .plan-orb{width:48px!important;height:48px!important}.active-plan-box b{font-size:18px!important}.active-plan-box em{display:block!important;color:rgba(255,255,255,.70)!important;font-size:12px!important;line-height:1.3!important}.active-plan-pill{background:rgba(37,238,151,.15)!important;color:#9dffd7!important;border:1px solid rgba(37,238,151,.26)!important;border-radius:999px!important;padding:8px 10px!important;font-weight:1000!important;font-size:11px!important;white-space:nowrap!important}
.revenue-hero h3{margin:2px 0 5px!important;font-size:22px!important}.revenue-stats b{display:grid!important;gap:3px!important;padding:10px 7px!important;border-radius:18px!important;background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.10)!important;text-align:center!important}.revenue-stats b small{font-weight:800!important;color:rgba(255,255,255,.62)!important}.agent-card{grid-template-columns:54px minmax(0,1fr)!important}.agent-card button{grid-column:1/-1!important;width:100%!important}.agent-code{display:inline-block!important;margin-left:4px!important}
@media(max-width:430px){.pricing-section-title{display:grid!important;gap:4px!important}.pricing-section-title small{text-align:left!important}.active-plan-box{grid-template-columns:auto minmax(0,1fr)!important}.active-plan-pill{grid-column:2!important;width:max-content!important}.plan-head h4{font-size:15px!important}.pricing-plan,.revenue-plan{border-radius:24px!important}}


/* v51: pricing polish, agent metrics and premium action color */
:root{--vc-action-a:#20f2d6;--vc-action-b:#57f7b2;--vc-action-c:#063a34;--vc-accent-soft:rgba(32,242,214,.12)}
.primary,.action.get,.action.live,.action.book,.action.chat,#saveProfile,#restoreAccountBtn,#openWalletBtn,.chat-send-icon,.detail-actions .primary,.momo-checkout .primary,.pricing-plan .primary,.revenue-plan .primary{background:linear-gradient(135deg,var(--vc-action-a),var(--vc-action-b))!important;color:#031513!important;border:0!important;text-shadow:none!important;box-shadow:0 14px 34px rgba(32,242,214,.16),inset 0 1px 0 rgba(255,255,255,.36)!important}
.pricing-body{gap:15px!important}.current-plan-box.active-plan-box{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;align-items:center!important;border-radius:26px!important;padding:13px!important;background:linear-gradient(145deg,rgba(32,242,214,.11),rgba(255,255,255,.045))!important;border:1px solid rgba(32,242,214,.22)!important}.current-plan-box.active-plan-box .plan-orb,.plan-orb{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:16px!important;background:rgba(255,255,255,.08)!important;color:#eafffb!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.12)!important}.active-plan-pill{background:rgba(32,242,214,.14)!important;color:#cffff4!important;border:1px solid rgba(32,242,214,.22)!important;box-shadow:none!important}.pricing-section{overflow:hidden!important}.pricing-plan,.revenue-plan{min-height:auto!important;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(32,242,214,.04))!important;border:1px solid rgba(255,255,255,.11)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}.pricing-plan::after,.revenue-plan::after{display:none!important}.pricing-plan.current{border-color:rgba(32,242,214,.42)!important;background:linear-gradient(145deg,rgba(32,242,214,.13),rgba(87,247,178,.07))!important}.pricing-plan.current::after{content:''!important;display:none!important}.plan-head>span{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;color:#eafffb!important}.plan-head h4{font-size:15px!important}.plan-price{font-size:17px!important}.pricing-plan ul{font-size:12px!important;color:rgba(255,255,255,.78)!important}.revenue-quick{margin:4px 0 0!important}.agent-join-card{border:1px solid rgba(32,242,214,.16);background:rgba(32,242,214,.045);border-radius:22px;padding:14px;display:grid;gap:10px}.agent-join-card p{margin:0;color:rgba(255,255,255,.72);line-height:1.38}.agent-card{grid-template-columns:48px minmax(0,1fr)!important}.agent-card .agent-metrics{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.agent-card .agent-metrics em{font-style:normal;border:1px solid rgba(32,242,214,.18);background:rgba(32,242,214,.07);border-radius:999px;padding:6px 8px;font-size:11px;font-weight:900;color:#dffff7}.agent-code{color:#20f2d6!important;background:rgba(32,242,214,.10)!important}.badge.price{background:linear-gradient(135deg,#eafffb,#83f9cf)!important;color:#031513!important}.action.live{background:linear-gradient(135deg,#28f3d6,#70f6b4)!important}.action.get{background:linear-gradient(135deg,#20f2d6,#57f7b2)!important}.bottom-nav .post{box-shadow:-5px 0 0 #20f2d6,5px 0 0 #57f7b2!important}.revenue-plan-grid,.pricing-grid{align-items:stretch}@media(max-width:430px){.current-plan-box.active-plan-box{grid-template-columns:42px minmax(0,1fr)!important}.current-plan-box.active-plan-box .active-plan-pill{grid-column:2}.pricing-grid,.revenue-plan-grid{grid-template-columns:1fr!important}}

/* v51: professional pricing, working promote/agent cards, no oversized active blob */
.pricing-plan.current::after{display:none!important;content:none!important;width:0!important;height:0!important;inset:auto!important;background:none!important;}
.pricing-plan.current{overflow:hidden!important;border-color:rgba(34,238,155,.40)!important;background:linear-gradient(145deg,rgba(18,40,36,.94),rgba(8,20,22,.90))!important;box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)!important;}
.pricing-plan.current::before{content:'';position:absolute;right:-34px;top:-42px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,rgba(34,238,155,.16),transparent 70%);pointer-events:none;}
.current-stamp{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:4px 9px;border-radius:999px;background:rgba(34,238,155,.16);border:1px solid rgba(34,238,155,.30);color:#dfffee;font-size:9px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;}
.pricing-plan.current .plan-head,.pricing-plan.current .plan-price,.pricing-plan.current ul,.pricing-plan.current .plan-actions{position:relative;z-index:2;}
.pricing-plan.current .plan-head small{color:#70ffe3!important;}
.pricing-plan.current .plan-actions .primary:disabled{background:linear-gradient(135deg,#18f3ee,#22ee9b)!important;color:#031513!important;opacity:1!important;filter:none!important;}
.revenue-plan,.pricing-plan{isolation:isolate;}
.revenue-plan::after,.pricing-plan::after{opacity:.65;}
.agent-card em{display:block;margin-top:4px;color:#70ffe3;font-style:normal;font-weight:1000;font-size:12px;}
.agent-card button{justify-self:start;margin-top:8px;}
.plan-price{font-weight:1000;letter-spacing:-.03em;}
@media(max-width:430px){.pricing-plan.current::before{right:-46px;top:-52px;width:110px;height:110px}.current-stamp{right:10px;top:10px;font-size:8px}.pricing-plan .plan-head h4{padding-right:58px}}

/* v51: professional pricing, working promote/agent cards, no oversized active blob */
.pricing-plan.current::after{display:none!important;content:none!important;width:0!important;height:0!important;inset:auto!important;background:none!important;}
.pricing-plan.current{overflow:hidden!important;border-color:rgba(34,238,155,.40)!important;background:linear-gradient(145deg,rgba(18,40,36,.94),rgba(8,20,22,.90))!important;box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)!important;}
.pricing-plan.current::before{content:'';position:absolute;right:-34px;top:-42px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,rgba(34,238,155,.16),transparent 70%);pointer-events:none;}
.current-stamp{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:4px 9px;border-radius:999px;background:rgba(34,238,155,.16);border:1px solid rgba(34,238,155,.30);color:#dfffee;font-size:9px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;}
.pricing-plan.current .plan-head,.pricing-plan.current .plan-price,.pricing-plan.current ul,.pricing-plan.current .plan-actions{position:relative;z-index:2;}
.pricing-plan.current .plan-head small{color:#70ffe3!important;}
.pricing-plan.current .plan-actions .primary:disabled{background:linear-gradient(135deg,#18f3ee,#22ee9b)!important;color:#031513!important;opacity:1!important;filter:none!important;}
.revenue-plan,.pricing-plan{isolation:isolate;}
.revenue-plan::after,.pricing-plan::after{opacity:.65;}
.agent-card em{display:block;margin-top:4px;color:#70ffe3;font-style:normal;font-weight:1000;font-size:12px;}
.agent-card button{justify-self:start;margin-top:8px;}
.plan-price{font-weight:1000;letter-spacing:-.03em;}
@media(max-width:430px){.pricing-plan.current::before{right:-46px;top:-52px;width:110px;height:110px}.current-stamp{right:10px;top:10px;font-size:8px}.pricing-plan .plan-head h4{padding-right:58px}}

/* v52: public-ready account gate, clean buttons, hidden guest-only tools */
.account-locked .account-only { display: none !important; }
.account-locked #signinCard { display: grid !important; border-color: rgba(24,243,238,.26); background: linear-gradient(145deg, rgba(24,243,238,.10), rgba(255,255,255,.045)); }
.pin-help { display: none !important; }
.profile-switches.account-only, .service-profile-editor.account-only { transition: opacity .18s ease; }
body:not(.account-locked) .account-only { visibility: visible; }
/* remove the old pink-heavy commercial button color everywhere */
.primary,
.action.get,
.action.live,
.action.chat,
.detail-actions .primary,
.service-contact-card .primary,
.revenue-plan.active,
.pricing-plan.current button,
#joinAgentBtn,
#sendMomoPayment,
#saveProfile,
#publishBtn,
#sendOrderPayment,
#startContactUnlock,
#requestWithdrawBtn {
  background: linear-gradient(135deg, #20f4d2 0%, #27f59c 100%) !important;
  color: #031716 !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(32,244,210,.16), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.primary:hover,
.action.get:hover,
.action.live:hover,
.action.chat:hover,
#joinAgentBtn:hover,
#sendMomoPayment:hover {
  filter: brightness(1.04);
}
.chat-bubble.mine {
  background: linear-gradient(135deg, rgba(32,244,210,.92), rgba(39,245,156,.78)) !important;
  color: #031716 !important;
}
.dir-actions .profile-small,
.following,
.follow-btn.active,
.revenue-plan .selected,
.agent-card button,
#copyAgentLink {
  background: linear-gradient(135deg, rgba(32,244,210,.24), rgba(39,245,156,.16)) !important;
  border-color: rgba(32,244,210,.36) !important;
  color: #eafff8 !important;
}
.account-plan-card .plan-orb,
.wallet-orb,
.revenue-hero > span,
.checkout-hero .plan-orb {
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), rgba(32,244,210,.35) 38%, rgba(39,245,156,.22)) !important;
}
.account-locked .account-plan-card,
.account-locked .account-wallet-card { min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
.signin-card.compact-ok { opacity: .92; }
.revenue-plan-grid .revenue-plan { cursor: pointer; }
.revenue-plan-grid .revenue-plan:active { transform: scale(.985); }

/* v53: modal-safe toasts, forgot PIN, public launch admin/account polish */
.toast-zone { z-index: 2147483000 !important; }
.dialog-toast-zone.toast-zone {
  position: fixed !important;
  z-index: 2147483000 !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(92vw, 420px) !important;
  display: grid !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.link-btn.forgot-pin-btn {
  justify-self: start;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 950;
  padding: 8px 2px;
  text-decoration: none;
}
.link-btn.forgot-pin-btn:disabled { opacity: .56; }
.link-btn.forgot-pin-btn.is-busy::after { content: ' •••'; letter-spacing: .15em; }
.confirm-sheet { z-index: 2147482500; }


/* v54: Adaptive tablet and desktop experience inspired by TikTok web */
.desktop-sidebar,
.desktop-top-actions { display: none; }

@media (min-width: 720px) and (max-width: 1099px) {
  body { place-items: stretch; background: #020305; }
  .phone { width: 100vw !important; max-height: none !important; height: 100dvh !important; box-shadow: none !important; }
  .reel-card { min-height: 100dvh !important; background: #020305 !important; }
  .media-wrap { inset: 0 !important; }
  .media-wrap.photo .media-main { object-fit: contain !important; }
  .card-info { left: max(18px, 7vw) !important; right: 108px !important; bottom: calc(88px + var(--safe-bottom)) !important; max-width: 560px !important; }
  .reel-card.is-active .action-rail { right: max(18px, 4vw) !important; bottom: calc(96px + var(--safe-bottom)) !important; }
  .story-strip { padding-left: max(16px, 5vw) !important; padding-right: max(16px, 5vw) !important; }
  .topbar { padding-inline: max(16px, 5vw) !important; }
  .bottom-nav { left: max(18px, 18vw) !important; right: max(18px, 18vw) !important; max-width: 560px !important; margin-inline: auto !important; }
}

@media (min-width: 1100px) {
  html, body { width: 100%; height: 100%; background: #000 !important; }
  body { display: block !important; overflow: hidden !important; }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 35% -12%, rgba(24,243,238,.10), transparent 30%),
      radial-gradient(circle at 86% 12%, rgba(255,47,126,.08), transparent 26%),
      #000;
  }
  .desktop-sidebar {
    position: fixed;
    z-index: 180;
    left: 0;
    top: 0;
    bottom: 0;
    width: 246px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 18px 18px;
    background: rgba(0,0,0,.94);
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 18px 0 42px rgba(0,0,0,.34);
  }
  .desktop-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 2px 4px;
    background: transparent;
    color: #fff;
    text-align: left;
  }
  .desktop-logo img { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 0 22px rgba(24,243,238,.22); }
  .desktop-logo span { display: grid; line-height: .92; }
  .desktop-logo b { font-size: 24px; letter-spacing: -.08em; }
  .desktop-logo small { font-size: 14px; font-weight: 950; color: #dff; letter-spacing: -.04em; }
  .desktop-search {
    height: 44px;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.58);
  }
  .desktop-search svg { width: 18px; height: 18px; }
  .desktop-search input { height: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; color: #fff; font-weight: 700; }
  .desktop-nav { display: grid; gap: 4px; padding-top: 2px; }
  .desktop-nav button {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 12px;
    background: transparent;
    color: rgba(255,255,255,.90);
    text-align: left;
    font-weight: 920;
  }
  .desktop-nav button:hover { background: rgba(255,255,255,.08); }
  .desktop-nav button.active { color: #fff; background: linear-gradient(90deg, rgba(24,243,238,.14), rgba(255,255,255,.035)); }
  .desktop-nav button.active svg { color: var(--cyan); filter: drop-shadow(0 0 12px rgba(24,243,238,.28)); }
  .desktop-login {
    margin-top: 8px;
    min-height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #18f3ee, #25ee97) !important;
    color: #031313;
    font-weight: 1000;
    box-shadow: 0 18px 32px rgba(24,243,238,.18);
  }
  .desktop-foot { margin-top: auto; display: grid; gap: 6px; padding: 14px 4px 0; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.35; }
  .desktop-foot b { color: rgba(255,255,255,.70); }
  .desktop-top-actions {
    position: fixed;
    z-index: 181;
    right: 24px;
    top: 22px;
    display: flex;
    gap: 10px;
  }
  .desktop-top-actions button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-weight: 950;
    backdrop-filter: blur(16px);
  }
  .desktop-top-actions button.accent { background: linear-gradient(135deg, #18f3ee, #25ee97) !important; color: #031313; border: 0; }

  .phone { width: 100vw !important; height: 100dvh !important; max-height: none !important; overflow: hidden !important; background: #000 !important; box-shadow: none !important; }
  .phone::before { display: none !important; }
  .topbar {
    position: fixed !important;
    left: 246px !important;
    right: 0 !important;
    top: 0 !important;
    height: 96px !important;
    padding: 22px 280px 0 36px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.45) 74%, transparent) !important;
    gap: 0 !important;
  }
  .topbar .brand { display: none !important; }
  .top-row {
    grid-template-columns: 1fr 46px 46px !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    gap: 12px !important;
  }
  .feed-tabs {
    justify-self: center !important;
    width: 330px !important;
    max-width: none !important;
    height: 48px !important;
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(255,255,255,.11) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.25) !important;
  }
  .feed-tabs button { font-size: 14px !important; padding: 12px 16px !important; }
  .location-row {
    position: fixed !important;
    left: 276px !important;
    top: 22px !important;
    width: auto !important;
    display: flex !important;
    gap: 10px !important;
  }
  .location-row .area-chip { max-width: 190px !important; height: 42px !important; padding: 0 14px !important; background: rgba(255,255,255,.09) !important; }
  .location-row .tiny-lang, .location-row .tiny-ai, .location-row .account-top-chip, .location-row .ghost-dot { height: 42px !important; }
  .ghost-dot b { display: none !important; }
  .vi-radar-bar { display: none !important; }
  .story-strip { display: none !important; }
  .bottom-nav { display: none !important; }

  .feed { inset: 0 !important; scroll-snap-type: y mandatory !important; background: #000 !important; }
  .reel-card {
    min-height: 100dvh !important;
    height: 100dvh !important;
    background: #000 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }
  .media-wrap {
    position: absolute !important;
    top: 94px !important;
    bottom: 34px !important;
    left: clamp(315px, 21vw, 410px) !important;
    right: clamp(270px, 19vw, 380px) !important;
    width: auto !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #050505 !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.12) !important;
  }
  .media-wrap.photo .media-main { object-fit: contain !important; object-position: center !important; }
  .media-wrap.photo.landscape .media-main { object-fit: contain !important; }
  .reel-card.media-portrait .media-wrap.photo {
    left: calc(50vw - 156px) !important;
    right: auto !important;
    width: min(430px, calc(100vw - 650px)) !important;
    max-width: 430px !important;
  }
  .reel-card.media-squareish .media-wrap.photo {
    left: calc(50vw - 235px) !important;
    right: auto !important;
    width: min(560px, calc(100vw - 620px)) !important;
  }
  .media-wrap.demo img { width: min(62%, 460px) !important; height: min(56%, 420px) !important; }
  .media-wrap::after { background: linear-gradient(180deg, rgba(0,0,0,.20) 0, rgba(0,0,0,.02) 38%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.72) 100%) !important; }
  .media-wrap.photo .media-bg { opacity: .58 !important; filter: blur(20px) brightness(.60) saturate(1.16) !important; }

  .card-info {
    left: calc(clamp(315px, 21vw, 410px) + 18px) !important;
    right: auto !important;
    bottom: 56px !important;
    width: min(650px, calc(100vw - 760px)) !important;
    max-width: 650px !important;
    gap: 9px !important;
  }
  .reel-card.media-portrait .card-info {
    left: calc(50vw - 138px) !important;
    width: min(392px, calc(100vw - 700px)) !important;
  }
  .reel-card.media-squareish .card-info {
    left: calc(50vw - 215px) !important;
    width: min(520px, calc(100vw - 650px)) !important;
  }
  .card-info h1 { font-size: clamp(24px, 2.45vw, 38px) !important; line-height: .98 !important; max-width: 100% !important; }
  .card-info p { font-size: 15px !important; max-height: 44px !important; -webkit-line-clamp: 2 !important; }
  .seller-line { min-height: 44px !important; padding: 5px 12px 5px 5px !important; background: rgba(0,0,0,.46) !important; }
  .seller-line .avatar { width: 34px !important; height: 34px !important; }
  .badge { font-size: 11px !important; padding: 7px 11px !important; }

  .reel-card.is-active .action-rail {
    right: clamp(190px, 16vw, 330px) !important;
    bottom: 128px !important;
    width: 66px !important;
    gap: 12px !important;
  }
  .reel-card.media-portrait.is-active .action-rail { right: calc(50vw - 338px) !important; }
  .reel-card.media-squareish.is-active .action-rail { right: calc(50vw - 420px) !important; }
  .reel-card.is-active .action,
  .action { width: 62px !important; min-height: 66px !important; }
  .reel-card.is-active .action span,
  .action span { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; }
  .reel-card.is-active .action svg,
  .action svg { width: 23px !important; height: 23px !important; }
  .reel-card.is-active .action b,
  .action b { max-width: 64px !important; font-size: 10px !important; }

  .media-dots { bottom: 22px !important; }
  .feed-photo-count { bottom: 56px !important; left: 50% !important; transform: translateX(-50%) !important; }
  .directory {
    left: 246px !important;
    right: 0 !important;
    padding: 118px 56px 56px !important;
    background: radial-gradient(circle at 40% 0, rgba(24,243,238,.12), transparent 30%), #000 !important;
  }
  .directory-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important; gap: 14px !important; }
  .directory .section-head, .directory .chips, .directory .inline-search { max-width: 1180px !important; }

  .sheet[open] { align-items: center !important; justify-content: center !important; padding-left: 246px !important; }
  .sheet-card { width: min(760px, calc(100vw - 340px)) !important; max-height: min(90dvh, 900px) !important; border-radius: 28px !important; }
  .detail-card { width: min(820px, calc(100vw - 360px)) !important; }
  .detail-media { height: min(62dvh, 620px) !important; min-height: 420px !important; }
  .chat-card { width: min(720px, calc(100vw - 360px)) !important; }
  .toast-zone { left: 266px !important; right: 24px !important; bottom: 24px !important; align-items: flex-end !important; }
}

@media (min-width: 1500px) {
  .media-wrap { left: 330px !important; right: 345px !important; }
  .card-info { left: 352px !important; width: min(690px, calc(100vw - 850px)) !important; }
  .reel-card.is-active .action-rail { right: 290px !important; }
  .reel-card.media-portrait .media-wrap.photo { left: calc(50vw - 140px) !important; width: 470px !important; }
  .reel-card.media-portrait .card-info { left: calc(50vw - 118px) !important; width: 430px !important; }
  .reel-card.media-portrait.is-active .action-rail { right: calc(50vw - 450px) !important; }
}


/* v55: desktop/tablet modal polish, real desktop detail width, keyboard and arrow navigation */
.desktop-scroll-controls { display: none; }

@media (min-width: 720px) and (max-width: 1099px) {
  .sheet { width: 100vw !important; max-width: none !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; }
  .sheet[open] { display: flex !important; align-items: center !important; justify-content: center !important; }
  .sheet-card { width: min(92vw, 820px) !important; max-width: 92vw !important; max-height: 92dvh !important; overflow-x: hidden !important; border-radius: 30px !important; }
  .detail-card { width: min(94vw, 900px) !important; max-width: 94vw !important; }
  .detail-media { height: min(58dvh, 640px) !important; min-height: 390px !important; }
}

@media (min-width: 1100px) {
  .sheet {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .sheet[open] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 28px 0 274px !important;
    box-sizing: border-box !important;
  }
  .sheet::backdrop { background: rgba(0,0,0,.68) !important; backdrop-filter: blur(12px) brightness(.68) !important; }
  .sheet-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: min(900px, calc(100vw - 340px)) !important;
    max-width: min(900px, calc(100vw - 340px)) !important;
    max-height: min(92dvh, 920px) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    border-radius: 30px !important;
    padding: 14px 18px 20px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(24,243,238,.42) transparent;
  }
  .sheet-card::-webkit-scrollbar { width: 8px; height: 0 !important; }
  .sheet-card::-webkit-scrollbar-track { background: transparent; }
  .sheet-card::-webkit-scrollbar-thumb { background: rgba(24,243,238,.35); border-radius: 999px; }
  .sheet-card * { box-sizing: border-box; max-width: 100%; }
  .detail-card {
    width: min(1080px, calc(100vw - 360px)) !important;
    max-width: min(1080px, calc(100vw - 360px)) !important;
    max-height: min(94dvh, 940px) !important;
    padding: 12px 18px 22px !important;
    scroll-padding-top: 88px !important;
  }
  .detail-card > .sheet-bar { margin-top: 0 !important; }
  .detail-card .sheet-title {
    margin: 0 -18px 14px !important;
    padding: 14px 70px 14px 20px !important;
    top: 0 !important;
    border-radius: 28px 28px 0 0 !important;
  }
  .detail-card .sheet-title h3 {
    font-size: clamp(20px, 1.55vw, 29px) !important;
    line-height: 1.08 !important;
    max-width: calc(100% - 6px) !important;
  }
  .detail-card .sheet-title small { font-size: 11px !important; }
  .detail-media {
    height: min(64dvh, 690px) !important;
    min-height: 470px !important;
    max-height: 690px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    border-radius: 24px !important;
  }
  .detail-media .detail-main {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  .detail-media .detail-bg { inset: -28px !important; width: calc(100% + 56px) !important; height: calc(100% + 56px) !important; }
  .detail-thumbs { max-width: 100% !important; overflow-x: auto !important; padding-bottom: 10px !important; }
  .detail-meta h2 { font-size: clamp(28px, 2.2vw, 42px) !important; max-width: 100% !important; }
  .profile-card, .pricing-card, .revenue-card, .wallet-card, .studio-card, .pulse-card, .radar-card, .chat-card { width: min(900px, calc(100vw - 340px)) !important; max-width: min(900px, calc(100vw - 340px)) !important; }
  .post-card { width: min(920px, calc(100vw - 340px)) !important; max-width: min(920px, calc(100vw - 340px)) !important; }
  .desktop-scroll-controls {
    position: fixed;
    z-index: 182;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 16px;
    pointer-events: auto;
  }
  .desktop-scroll-controls button {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 30px;
    line-height: 1;
    font-weight: 1000;
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
  }
  .desktop-scroll-controls button:hover { background: rgba(24,243,238,.18); border-color: rgba(24,243,238,.34); transform: translateY(-1px); }
  body:has(dialog[open]) .desktop-scroll-controls { opacity: .16; pointer-events: none; }
}

@media (min-width: 1500px) {
  .detail-card { width: min(1160px, calc(100vw - 390px)) !important; max-width: min(1160px, calc(100vw - 390px)) !important; }
  .detail-media { height: min(66dvh, 740px) !important; max-height: 740px !important; }
}

/* v55: Desktop modal/stage polish, keyboard scrolling and TikTok-style desktop arrows */
@media (min-width: 1100px) {
  body.vc-desktop-ready .sheet,
  .sheet[open] {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: 0 0 0 246px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .sheet::backdrop {
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(18px) brightness(.72) !important;
  }
  .sheet-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: min(940px, calc(100vw - 340px)) !important;
    max-width: none !important;
    max-height: min(92dvh, 930px) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 22px 24px !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 18% 0, rgba(24,243,238,.10), transparent 34%),
      linear-gradient(180deg, rgba(7,12,16,.985), rgba(3,7,10,.965)) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 34px 120px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.07) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(32,242,214,.55) rgba(255,255,255,.06) !important;
    overscroll-behavior: contain !important;
  }
  .sheet-card::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
  .sheet-card::-webkit-scrollbar-thumb { background: rgba(32,242,214,.50) !important; border-radius: 999px !important; border: 2px solid rgba(6,10,14,.95) !important; }
  .sheet-card::-webkit-scrollbar-track { background: rgba(255,255,255,.045) !important; border-radius: 999px !important; }
  .sheet-card.compact { width: min(620px, calc(100vw - 360px)) !important; }
  .sheet-card.tall { width: min(980px, calc(100vw - 340px)) !important; }
  .share-card, .wanted-card, .offer-card, .schedule-card, .contact-unlock-card { width: min(680px, calc(100vw - 360px)) !important; }
  .pricing-card, .revenue-card, .studio-card, .wallet-card, .inbox-card, .chat-card, .radar-card, .pulse-card { width: min(1060px, calc(100vw - 340px)) !important; }

  .detail-card {
    width: min(1180px, calc(100vw - 330px)) !important;
    max-height: min(93dvh, 960px) !important;
    padding: 0 22px 24px !important;
    overflow-x: hidden !important;
  }
  .detail-card > .sheet-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    margin-top: 10px !important;
  }
  .detail-card .sheet-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 118 !important;
    margin: 0 -22px 18px !important;
    padding: 16px 76px 16px 22px !important;
    min-height: 76px !important;
    background:
      linear-gradient(180deg, rgba(3,7,10,.99), rgba(3,7,10,.94) 76%, rgba(3,7,10,.78)) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 22px 44px rgba(0,0,0,.34) !important;
  }
  .detail-card .sheet-title .xbtn { right: 18px !important; top: 18px !important; }
  .detail-card .sheet-title h3 { font-size: clamp(22px, 1.55vw, 31px) !important; line-height: 1.12 !important; -webkit-line-clamp: 2 !important; }

  #detailBody {
    display: grid !important;
    grid-template-columns: minmax(420px, .96fr) minmax(430px, 1fr) !important;
    gap: 18px 22px !important;
    align-items: start !important;
    overflow: visible !important;
  }
  #detailBody .detail-media,
  #detailBody .detail-thumbs { grid-column: 1 !important; }
  #detailBody .detail-meta,
  #detailBody .detail-service-note,
  #detailBody .detail-actions { grid-column: 2 !important; }
  .detail-media {
    height: min(70dvh, 720px) !important;
    min-height: 480px !important;
    max-height: calc(92dvh - 132px) !important;
    border-radius: 26px !important;
    background: #020406 !important;
  }
  .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  .detail-media .detail-bg { opacity: .58 !important; filter: blur(26px) brightness(.48) saturate(1.12) !important; }
  .detail-thumbs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 2px 12px !important;
    max-width: 100% !important;
    scrollbar-width: thin !important;
  }
  .detail-thumbs button { flex: 0 0 74px !important; width: 74px !important; height: 74px !important; }
  .detail-meta { min-width: 0 !important; align-self: start !important; }
  .detail-meta h2 { font-size: clamp(30px, 2.3vw, 46px) !important; line-height: 1.02 !important; }
  .detail-meta > p.muted { font-size: 15px !important; line-height: 1.5 !important; max-height: none !important; }
  .ai-assist-box.priority { margin-top: 10px !important; }
  .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .owner-tools { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

  #profileSheet .sheet-card { width: min(1040px, calc(100vw - 340px)) !important; }
  #profileBody { overflow-x: hidden !important; }
  #profileBody .profile-hero {
    display: grid !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
  }
  #profileBody .profile-hero strong,
  #profileBody .profile-hero span,
  #profileBody .profile-hero p { min-width: 0 !important; overflow-wrap: anywhere !important; }
  #profileBody .profile-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  #profileBody .profile-actions > * { width: 100% !important; min-width: 0 !important; }
  .showroom-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)) !important; gap: 12px !important; overflow: visible !important; }
  .inside-card { min-width: 0 !important; }
  .vc-qr-card { grid-template-columns: 138px minmax(0,1fr) !important; align-items: center !important; }
  .qr-copy, .qr-copy small { min-width: 0 !important; overflow-wrap: anywhere !important; }

  .desktop-scroll-controls {
    position: fixed;
    z-index: 179;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 16px;
    pointer-events: auto;
  }
  .desktop-scroll-controls button {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
  }
  .desktop-scroll-controls button:hover { transform: scale(1.05); background: rgba(255,255,255,.18); }
  .desktop-scroll-controls svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  body.vc-sheet-open .desktop-scroll-controls { opacity: .34; pointer-events: none; }
  .desktop-key-hint {
    position: fixed;
    z-index: 178;
    right: 24px;
    bottom: 24px;
    color: rgba(255,255,255,.45);
    font-size: 12px;
    font-weight: 800;
    display: block;
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  .sheet[open] { padding-left: 220px !important; }
  .desktop-sidebar { width: 220px !important; }
  .desktop-top-actions { right: 16px !important; }
  .detail-card { width: min(980px, calc(100vw - 260px)) !important; }
  #detailBody { grid-template-columns: minmax(360px, .92fr) minmax(360px, 1fr) !important; gap: 16px !important; }
  .detail-media { min-height: 410px !important; height: min(66dvh, 650px) !important; }
  .detail-actions { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .desktop-scroll-controls { right: 18px !important; }
}

@media (min-width: 1100px) and (max-height: 760px) {
  .sheet-card { max-height: 94dvh !important; }
  .detail-card { max-height: 94dvh !important; }
  .detail-media { min-height: 320px !important; height: min(58dvh, 540px) !important; }
  .detail-card .sheet-title { min-height: 62px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* v55: Desktop modal stage, keyboard/arrow navigation and unclipped details */
.desktop-scroll-arrows { display: none; }
@media (min-width: 1100px) {
  .sheet {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  .sheet::backdrop {
    background: rgba(0,0,0,.66) !important;
    backdrop-filter: blur(16px) brightness(.74) !important;
  }
  .sheet[open] {
    display: grid !important;
    place-items: center !important;
    padding-left: 246px !important;
    box-sizing: border-box !important;
  }
  .sheet-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: min(920px, calc(100vw - 360px)) !important;
    max-width: none !important;
    max-height: min(92dvh, 920px) !important;
    border-radius: 30px !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px 22px !important;
    background: rgba(4, 8, 11, .985) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 34px 120px rgba(0,0,0,.62), 0 0 0 1px rgba(24,243,238,.06) inset !important;
  }
  .sheet-card::-webkit-scrollbar,
  #detailBody::-webkit-scrollbar { width: 8px; height: 8px; }
  .sheet-card::-webkit-scrollbar-thumb,
  #detailBody::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
  .sheet-card::-webkit-scrollbar-track,
  #detailBody::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }

  #detailSheet.sheet[open] {
    padding-left: 246px !important;
    place-items: center !important;
  }
  #detailSheet .detail-card {
    width: min(1240px, calc(100vw - 340px)) !important;
    max-height: min(92dvh, 940px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 16px 18px 18px !important;
  }
  #detailSheet .detail-card > .sheet-bar {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    margin: 0 auto 10px !important;
  }
  #detailSheet .detail-card .sheet-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    flex: 0 0 auto !important;
    margin: 0 -18px 16px !important;
    padding: 12px 70px 14px 20px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.995), rgba(3,7,10,.94) 78%, rgba(3,7,10,.74)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
  }
  #detailSheet .detail-card .sheet-title .xbtn { right: 18px !important; top: 12px !important; }
  #detailSheet .detail-card .sheet-title h3 {
    font-size: clamp(20px, 1.45vw, 28px) !important;
    line-height: 1.05 !important;
    max-width: min(960px, 100%) !important;
    -webkit-line-clamp: 2 !important;
  }
  #detailSheet #detailBody {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(440px, 1.02fr) minmax(360px, .98fr) !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
    gap: 16px 24px !important;
    padding: 0 4px 24px 0 !important;
    scrollbar-gutter: stable !important;
  }
  #detailSheet #detailBody .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: min(72dvh, 720px) !important;
    min-height: 520px !important;
    max-height: 720px !important;
    border-radius: 24px !important;
    background: #030507 !important;
    box-shadow: 0 24px 74px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10) !important;
  }
  #detailSheet #detailBody .detail-media .detail-main,
  #detailSheet #detailBody .detail-media img.detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  #detailSheet #detailBody .detail-media .detail-bg {
    opacity: .36 !important;
    filter: blur(22px) brightness(.62) saturate(1.12) !important;
    transform: scale(1.04) !important;
  }
  #detailSheet #detailBody .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    padding: 0 2px 2px !important;
    overflow-x: auto !important;
  }
  #detailSheet #detailBody .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }
  #detailSheet #detailBody .detail-actions,
  #detailSheet #detailBody .detail-service-note,
  #detailSheet #detailBody .owner-tools,
  #detailSheet #detailBody .price-radar-box,
  #detailSheet #detailBody .trust-mini {
    grid-column: 2 !important;
  }
  #detailSheet #detailBody .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }
  #detailSheet #detailBody .detail-actions .primary,
  #detailSheet #detailBody .detail-actions .soft,
  #detailSheet #detailBody .detail-actions a {
    min-height: 50px !important;
    border-radius: 18px !important;
  }
  #detailSheet #detailBody .detail-meta h2 {
    font-size: clamp(28px, 2.15vw, 42px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    margin: 12px 0 14px !important;
  }
  #detailSheet #detailBody .ai-assist-box,
  #detailSheet #detailBody .price-radar-box,
  #detailSheet #detailBody .trust-mini {
    border-radius: 22px !important;
  }
  #profileSheet .sheet-card,
  #meSheet .sheet-card,
  #pricingSheet .sheet-card,
  #revenueSheet .sheet-card,
  #studioSheet .sheet-card,
  #walletSheet .sheet-card {
    width: min(1040px, calc(100vw - 360px)) !important;
  }
  #profileSheet .showroom-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 14px !important; }
  #profileSheet .profile-actions { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }

  .desktop-scroll-arrows {
    position: fixed;
    z-index: 210;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 14px;
    pointer-events: auto;
  }
  .desktop-scroll-arrows button {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
  }
  .desktop-scroll-arrows button:hover { transform: translateY(-2px) scale(1.04); background: rgba(24,243,238,.17); border-color: rgba(24,243,238,.34); }
  .desktop-scroll-arrows svg { width: 24px; height: 24px; stroke-width: 2.6px; fill: none; stroke: currentColor; }
  .desktop-scroll-arrows .up svg { transform: rotate(-90deg); }
  .desktop-scroll-arrows .down svg { transform: rotate(90deg); }
  .desktop-scroll-hint {
    position: fixed;
    z-index: 209;
    right: 24px;
    bottom: 28px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    pointer-events: none;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {
  #detailSheet .detail-card { width: min(980px, calc(100vw - 300px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(390px, 1fr) minmax(330px, .9fr) !important; gap: 14px 18px !important; }
  #detailSheet #detailBody .detail-media { min-height: 440px !important; height: min(66dvh, 620px) !important; }
}

@media (max-width: 1099px) {
  .desktop-scroll-arrows, .desktop-scroll-hint { display: none !important; }
}

/* v55: desktop/tablet modal polish, full details and keyboard arrows */
.desktop-feed-controls{display:none}
@media (min-width:1100px){
  .desktop-feed-controls{
    position:fixed;z-index:182;right:24px;top:50%;transform:translateY(-50%);display:grid;gap:14px;
  }
  .desktop-feed-controls button{
    width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(18px);box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .18s ease,background .18s ease,border-color .18s ease;
  }
  .desktop-feed-controls button:hover{transform:translateY(-1px) scale(1.04);background:rgba(24,243,238,.18);border-color:rgba(24,243,238,.38)}
  .desktop-feed-controls svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

  .sheet{width:100vw!important;max-width:none!important;height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important;}
  .sheet[open]{display:flex!important;align-items:center!important;justify-content:center!important;padding-left:246px!important;box-sizing:border-box!important;}
  .sheet-card{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:min(900px,calc(100vw - 330px))!important;max-width:none!important;height:auto!important;max-height:min(92dvh,980px)!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:32px!important;padding:18px 20px 24px!important;box-shadow:0 34px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.11)!important;}
  .sheet-card.compact{max-height:min(82dvh,780px)!important}
  .sheet-card.tall{max-height:min(92dvh,980px)!important}
  .sheet-card::-webkit-scrollbar{width:8px;height:8px}.sheet-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}.sheet-card::-webkit-scrollbar-track{background:transparent}

  #profileSheet .sheet-card,#pricingSheet .sheet-card,#revenueSheet .sheet-card,#walletSheet .sheet-card,#studioSheet .sheet-card,#pulseSheet .sheet-card,#radarSheet .sheet-card,#inboxSheet .sheet-card,#chatSheet .sheet-card{width:min(980px,calc(100vw - 340px))!important;}
  #shareSheet .sheet-card{width:min(720px,calc(100vw - 340px))!important;}

  .detail-card{width:min(1180px,calc(100vw - 330px))!important;max-width:1180px!important;padding:0!important;max-height:94dvh!important;border-radius:34px!important;}
  .detail-card>.sheet-bar{position:sticky!important;top:0!important;z-index:98!important;margin:10px auto 0!important;}
  .detail-card .sheet-title{position:sticky!important;top:0!important;z-index:96!important;margin:0!important;padding:16px 76px 16px 24px!important;background:linear-gradient(180deg,rgba(3,7,10,.985),rgba(3,7,10,.935) 82%,rgba(3,7,10,.78))!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(20px)!important;}
  .detail-card .sheet-title .xbtn{right:20px!important;top:15px!important;}
  .detail-card .sheet-title h3{font-size:clamp(22px,1.8vw,30px)!important;line-height:1.05!important;max-width:100%!important;display:block!important;white-space:normal!important;overflow:visible!important;}
  .detail-card .sheet-title small{font-size:12px!important;letter-spacing:.14em!important;}
  #detailBody{min-width:0!important;overflow:visible!important;padding:20px 24px 26px;box-sizing:border-box;}
  #detailBody>*{min-width:0!important;}
  .detail-media{border-radius:28px!important;overflow:hidden!important;width:100%!important;max-width:100%!important;}
  .detail-media .detail-main{object-fit:contain!important;object-position:center center!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;}
  .detail-media .detail-bg{object-fit:cover!important;}
  .detail-thumbs{max-width:100%!important;overflow-x:auto!important;}
  .detail-meta{min-width:0!important;}
  .detail-meta h2{font-size:clamp(26px,2.2vw,38px)!important;line-height:1.02!important;letter-spacing:-.05em!important;}
  .detail-actions{min-width:0!important;}
}
@media (min-width:1280px){
  #detailBody{display:grid!important;grid-template-columns:minmax(460px,1.08fr) minmax(380px,.82fr);grid-template-rows:auto auto 1fr;column-gap:22px;row-gap:12px;align-items:start;}
  #detailBody>.detail-media{grid-column:1;grid-row:1;height:clamp(480px,68vh,720px)!important;min-height:0!important;margin:0!important;}
  #detailBody>.detail-thumbs{grid-column:1;grid-row:2;margin:0!important;}
  #detailBody>.detail-meta{grid-column:2;grid-row:1 / span 2;max-height:calc(94dvh - 118px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;}
  #detailBody>.detail-service-note{grid-column:2;grid-row:3;margin-top:0!important;}
  #detailBody>.detail-actions{grid-column:2;grid-row:3;align-self:start;}
  #detailBody>.detail-meta::-webkit-scrollbar{width:7px}#detailBody>.detail-meta::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
  .detail-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (min-width:1100px) and (max-width:1279px){
  .detail-card{width:min(860px,calc(100vw - 310px))!important;}
  #detailBody{display:block!important;}
  .detail-media{height:clamp(430px,60vh,650px)!important;min-height:0!important;}
}
@media (min-width:1500px){
  .detail-card{width:min(1260px,calc(100vw - 360px))!important;}
  #detailBody{grid-template-columns:minmax(560px,1.16fr) minmax(420px,.84fr)!important;}
  #detailBody>.detail-media{height:clamp(540px,70vh,760px)!important;}
}


/* v55: Desktop/tablet detail polish, full-width modal stage and keyboard navigation */
.sheet-card { overflow-x: hidden !important; }
.sheet-card img { max-width: 100%; }

.desktop-scroll-controls { display: none; }

@media (min-width: 1100px) {
  .desktop-scroll-controls {
    position: fixed;
    z-index: 182;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 14px;
    pointer-events: auto;
  }
  .desktop-scroll-controls button {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    box-shadow: 0 18px 38px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
  }
  .desktop-scroll-controls button:hover {
    transform: translateY(-1px) scale(1.04);
    background: rgba(24,243,238,.16);
    border-color: rgba(24,243,238,.34);
  }
  .desktop-scroll-controls svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }

  .sheet[open] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 246px !important;
    padding-right: 88px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .sheet::backdrop { background: rgba(0,0,0,.66) !important; backdrop-filter: blur(18px) brightness(.82) !important; }
  .sheet-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(920px, calc(100vw - 370px)) !important;
    max-width: none !important;
    max-height: min(90dvh, 920px) !important;
    border-radius: 28px !important;
    padding: 14px 18px 20px !important;
    background: linear-gradient(145deg, rgba(4,8,11,.985), rgba(4,11,12,.96)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 36px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }
  .sheet-card.tall { max-height: min(92dvh, 940px) !important; }
  .sheet-card.compact { max-height: min(82dvh, 760px) !important; }
  .sheet-title { position: sticky !important; top: 0 !important; z-index: 20 !important; padding: 10px 58px 12px 0 !important; background: linear-gradient(180deg, rgba(4,8,11,.98), rgba(4,8,11,.82) 72%, rgba(4,8,11,0)) !important; }
  .sheet-title .xbtn { position: absolute !important; right: 0 !important; top: 8px !important; }

  #profileSheet .sheet-card,
  #meSheet .sheet-card,
  #walletSheet .sheet-card,
  #pricingSheet .sheet-card,
  #revenueSheet .sheet-card,
  #studioSheet .sheet-card,
  #pulseSheet .sheet-card,
  #radarSheet .sheet-card,
  #searchSheet .sheet-card,
  #postSheet .sheet-card,
  #chatSheet .sheet-card {
    width: min(980px, calc(100vw - 360px)) !important;
  }

  #profileBody .inside-grid,
  .profile-products,
  .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 12px !important;
  }

  #detailSheet[open] { padding-right: 80px !important; }
  #detailSheet .detail-card {
    width: min(1180px, calc(100vw - 360px)) !important;
    max-height: min(92dvh, 940px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 12px 18px 18px !important;
  }
  #detailSheet .detail-card > .sheet-bar { flex: 0 0 auto; margin: 0 auto 10px !important; }
  #detailSheet .detail-card > .sheet-title {
    flex: 0 0 auto !important;
    margin: 0 -18px 14px !important;
    padding: 12px 68px 14px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.22) !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    font-size: clamp(18px, 1.45vw, 24px) !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
    -webkit-line-clamp: 2 !important;
  }
  #detailBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
  }
  #detailSheet .detail-media {
    background: radial-gradient(circle at 50% 50%, rgba(24,243,238,.10), rgba(2,4,6,1) 70%) !important;
  }
  #detailSheet .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }
  #detailSheet .detail-bg {
    object-fit: cover !important;
    filter: blur(26px) brightness(.48) saturate(1.12) !important;
    opacity: .70 !important;
  }
  #detailSheet .detail-thumbs { max-width: 100%; }
  #detailSheet .detail-actions { gap: 10px !important; }

  #chatSheet .chat-card {
    height: min(88dvh, 820px) !important;
    min-height: 640px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #chatSheet .chat-messages { flex: 1 1 auto !important; min-height: 260px !important; }
}

@media (min-width: 1280px) {
  #detailBody {
    display: grid !important;
    grid-template-columns: minmax(520px, 1fr) minmax(380px, 440px) !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 16px 20px !important;
    align-items: start !important;
  }
  #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: min(72dvh, 710px) !important;
    min-height: 470px !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
  #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 4px 2px 0 !important;
  }
  #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: stretch !important;
    max-height: calc(min(92dvh, 940px) - 104px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 6px 92px 0 !important;
    scrollbar-width: thin;
  }
  #detailBody > .detail-service-note,
  #detailBody > .detail-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
  }
  #detailBody > .detail-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px 0 0 !important;
    margin-top: -76px !important;
    background: linear-gradient(180deg, rgba(4,8,11,0), rgba(4,8,11,.96) 28%, rgba(4,8,11,1)) !important;
  }
  #detailBody > .detail-actions button,
  #detailBody > .detail-actions a { min-width: 0 !important; }
  #detailBody > .detail-meta h2 { font-size: clamp(28px, 2.1vw, 42px) !important; }
  #detailBody .ai-assist-box { margin: 12px 0 !important; }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  #detailSheet .detail-card { overflow-y: auto !important; width: min(860px, calc(100vw - 320px)) !important; }
  #detailSheet .detail-media { height: min(58dvh, 580px) !important; min-height: 380px !important; }
  #detailSheet .detail-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 1099px) {
  .desktop-scroll-controls { display: none !important; }
}

/* v55: Desktop/tablet detail modal polish + keyboard arrows */
@media (min-width: 1100px) {
  .sheet {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .sheet[open] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 34px 34px 34px 280px !important;
  }
  .sheet-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: min(900px, calc(100vw - 360px)) !important;
    max-width: none !important;
    max-height: min(92dvh, 940px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 30px !important;
    padding: 14px 20px 22px !important;
    background: linear-gradient(180deg, rgba(5,9,12,.985), rgba(4,8,11,.965)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 32px 90px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.05) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(30,246,244,.36) rgba(255,255,255,.06);
  }
  .sheet-card::-webkit-scrollbar { width: 10px; height: 0 !important; }
  .sheet-card::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
  .sheet-card::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(24,243,238,.50), rgba(37,238,151,.38)); border-radius: 999px; border: 2px solid rgba(3,7,10,.95); }
  .sheet-card * { min-width: 0; }

  .detail-card {
    width: min(980px, calc(100vw - 380px)) !important;
    max-height: min(92dvh, 960px) !important;
    padding: 0 22px 24px !important;
    scroll-padding-top: 104px !important;
  }
  .detail-card > .sheet-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
  }
  .detail-card .sheet-title {
    position: sticky !important;
    top: 17px !important;
    z-index: 118 !important;
    margin: 0 -22px 18px !important;
    padding: 14px 72px 16px 22px !important;
    min-height: 74px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.99), rgba(3,7,10,.94) 76%, rgba(3,7,10,.78)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(22px) saturate(1.06) !important;
  }
  .detail-card .sheet-title h3 {
    font-size: clamp(22px, 1.65vw, 30px) !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
    -webkit-line-clamp: 2 !important;
  }
  .detail-card .sheet-title .xbtn { right: 18px !important; top: 16px !important; }
  .detail-media {
    height: min(58dvh, 610px) !important;
    min-height: 450px !important;
    width: 100% !important;
    border-radius: 28px !important;
    margin: 0 0 14px !important;
    background: radial-gradient(circle at 50% 42%, rgba(24,243,238,.10), rgba(4,6,9,1) 68%) !important;
  }
  .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
  }
  .detail-media .detail-bg {
    object-fit: cover !important;
    filter: blur(24px) brightness(.44) saturate(1.14) !important;
    opacity: .72 !important;
  }
  .detail-thumbs {
    padding: 2px 2px 14px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .detail-thumbs button {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
  }
  .detail-thumbs img { object-fit: cover !important; border-radius: 16px !important; }
  .detail-meta h2 { font-size: clamp(28px, 2.2vw, 42px) !important; line-height: 1 !important; max-width: 100% !important; }
  .detail-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .profileSheet .sheet-card, .profile-card { width: min(900px, calc(100vw - 360px)) !important; }
  .profile-sheet .showroom-grid, .showroom-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }

  .desktop-feed-arrows {
    position: fixed;
    z-index: 190;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 12px;
    pointer-events: auto;
  }
  .desktop-feed-arrows button {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
  }
  .desktop-feed-arrows button:hover { transform: translateY(-2px); background: rgba(24,243,238,.16); border-color: rgba(24,243,238,.28); }
  .desktop-feed-arrows svg { width: 25px; height: 25px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .sheet[open] ~ .desktop-feed-arrows,
  body.sheet-open .desktop-feed-arrows { opacity: .45; }
  .detail-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 46px;
    height: 58px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(2,6,9,.54) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #fff !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
  }
  .detail-nav-btn.prev { left: 14px; }
  .detail-nav-btn.next { right: 14px; }
  .detail-nav-btn svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.55; stroke-linecap: round; stroke-linejoin: round; }
  .detail-nav-btn:hover { background: rgba(24,243,238,.18) !important; border-color: rgba(24,243,238,.32) !important; }
}
@media (max-width: 1099px) { .desktop-feed-arrows { display: none !important; } }
@media (min-width: 1100px) and (max-height: 760px) {
  .detail-media { height: min(50dvh, 500px) !important; min-height: 340px !important; }
  .detail-card { max-height: 94dvh !important; }
  .detail-card .sheet-title { min-height: 64px !important; padding-top: 11px !important; padding-bottom: 12px !important; }
}

/* v55 final desktop control cleanup: one clean arrow stack only */
@media (min-width: 1100px) {
  .desktop-feed-arrows,
  .desktop-feed-controls,
  .desktop-scroll-arrows,
  .desktop-scroll-hint { display: none !important; }
  .desktop-scroll-controls {
    position: fixed !important;
    z-index: 230 !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    gap: 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.vc-sheet-open .desktop-scroll-controls,
  body:has(dialog[open]) .desktop-scroll-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .desktop-scroll-controls button {
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter: blur(18px) !important;
  }
  .desktop-scroll-controls button::before {
    content: "";
    width: 15px;
    height: 15px;
    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;
    display: block;
  }
  .desktop-scroll-controls [data-desktop-scroll="prev"]::before { transform: translateY(4px) rotate(45deg); }
  .desktop-scroll-controls [data-desktop-scroll="next"]::before { transform: translateY(-4px) rotate(-135deg); }
  .desktop-scroll-controls button:hover { background: rgba(24,243,238,.18) !important; border-color: rgba(24,243,238,.42) !important; transform: scale(1.045) !important; }
}

/* v55 final pass: wider desktop detail pages, no clipped modal content */
@media (min-width: 1100px) {
  .sheet {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .sheet[open] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 28px 92px 28px 286px !important;
  }
  .sheet-card {
    position: relative !important;
    inset: auto !important;
    width: min(980px, calc(100vw - 390px)) !important;
    max-width: none !important;
    max-height: min(92dvh, 980px) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 30px !important;
    scrollbar-width: thin !important;
  }
  #detailSheet .detail-card {
    width: min(1260px, calc(100vw - 390px)) !important;
    max-width: 1260px !important;
    height: auto !important;
    max-height: min(94dvh, 1000px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    border-radius: 34px !important;
  }
  #detailSheet .detail-card > .sheet-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 150 !important;
    margin: 10px auto 0 !important;
  }
  #detailSheet .detail-card > .sheet-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 145 !important;
    margin: 0 !important;
    padding: 15px 78px 15px 24px !important;
    min-height: 74px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.995), rgba(3,7,10,.94) 76%, rgba(3,7,10,.82)) !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    backdrop-filter: blur(22px) saturate(1.1) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.30) !important;
  }
  #detailSheet .detail-card > .sheet-title .xbtn { right: 20px !important; top: 15px !important; }
  #detailSheet .detail-card > .sheet-title h3 {
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: clamp(22px, 1.55vw, 30px) !important;
    line-height: 1.08 !important;
  }
  #detailSheet #detailBody {
    display: grid !important;
    grid-template-columns: minmax(520px, 1.15fr) minmax(380px, .85fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px 22px !important;
    align-items: start !important;
    padding: 22px 24px 26px !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  #detailSheet #detailBody > * { min-width: 0 !important; }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: clamp(480px, 68vh, 760px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 26px !important;
    background: radial-gradient(circle at center, rgba(24,243,238,.10), #020406 70%) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 2px 2px 8px !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    max-height: calc(min(94dvh, 1000px) - 128px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 6px 16px 0 !important;
    scrollbar-width: thin !important;
  }
  #detailSheet #detailBody > .detail-actions,
  #detailSheet #detailBody > .detail-service-note {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
  #detailSheet .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
  }
  #detailSheet .detail-media .detail-bg {
    object-fit: cover !important;
    filter: blur(28px) brightness(.46) saturate(1.15) !important;
    opacity: .70 !important;
  }
  #detailSheet .detail-meta h2 { font-size: clamp(28px, 2vw, 42px) !important; line-height: 1.02 !important; }
  #detailSheet .detail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #detailSheet .detail-actions button,
  #detailSheet .detail-actions a { min-width: 0 !important; }
  .desktop-feed-controls,
  .desktop-feed-arrows,
  .desktop-scroll-arrows,
  .desktop-scroll-hint { display: none !important; }
  .desktop-scroll-controls {
    display: grid !important;
    position: fixed !important;
    right: 28px !important;
    top: 50% !important;
    z-index: 240 !important;
    transform: translateY(-50%) !important;
    gap: 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .desktop-key-hint { display: block !important; }
}
@media (min-width: 1100px) and (max-width: 1320px) {
  .sheet[open] { padding-left: 270px !important; padding-right: 74px !important; }
  #detailSheet .detail-card { width: min(900px, calc(100vw - 350px)) !important; }
  #detailSheet #detailBody { display: block !important; }
  #detailSheet #detailBody > .detail-media { height: clamp(420px, 62vh, 650px) !important; margin-bottom: 14px !important; }
  #detailSheet #detailBody > .detail-meta { max-height: none !important; overflow: visible !important; padding-right: 0 !important; }
  #detailSheet .detail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1500px) {
  #detailSheet .detail-card { width: min(1340px, calc(100vw - 420px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(640px, 1.22fr) minmax(420px, .78fr) !important; }
  #detailSheet #detailBody > .detail-media { height: clamp(560px, 72vh, 820px) !important; }
}

/* v56: desktop details readability, media stage polish and compact arrows */
@media (min-width: 1100px) {
  #detailSheet[open] {
    padding: 24px 78px 24px 282px !important;
  }
  #detailSheet .detail-card {
    width: min(1320px, calc(100vw - 390px)) !important;
    max-width: 1320px !important;
    max-height: min(94dvh, 980px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 32px !important;
    background: linear-gradient(180deg, rgba(2,6,9,.985), rgba(2,7,9,.965)) !important;
  }
  #detailSheet .detail-card > .sheet-bar {
    height: 4px !important;
    width: 44px !important;
    opacity: .70 !important;
    margin: 10px auto 0 !important;
  }
  #detailSheet .detail-card > .sheet-title {
    min-height: auto !important;
    padding: 16px 72px 14px 24px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, rgba(2,6,9,.995), rgba(2,6,9,.94) 82%, rgba(2,6,9,.72)) !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    font-size: clamp(22px, 1.45vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    max-width: min(920px, 78vw) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #detailSheet #detailBody {
    display: grid !important;
    grid-template-columns: minmax(560px, 1.25fr) minmax(360px, .75fr) !important;
    gap: 18px 24px !important;
    padding: 18px 24px 24px !important;
    align-items: start !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: clamp(500px, 68vh, 780px) !important;
    min-height: 0 !important;
    border-radius: 26px !important;
    margin: 0 !important;
    background: radial-gradient(circle at 50% 50%, rgba(24,243,238,.09), rgba(3,5,8,.95) 68%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 28px 70px rgba(0,0,0,.38) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 2px !important;
  }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    max-height: calc(min(94dvh, 980px) - 126px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 6px 20px 0 !important;
    scrollbar-width: thin !important;
  }
  #detailSheet #detailBody > .detail-meta > * {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Header already contains the title on desktop, so this duplicate title is hidden to prevent crowding. */
  #detailSheet #detailBody > .detail-meta > h2 {
    display: none !important;
  }
  #detailSheet #detailBody .seller-line {
    max-width: 100% !important;
    width: max-content !important;
    min-width: min(100%, 230px) !important;
  }
  #detailSheet #detailBody .badge-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .ai-assist-box {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(24,243,238,.13), rgba(37,238,151,.06) 42%, rgba(255,255,255,.035)) !important;
  }
  #detailSheet #detailBody .ai-assist-box > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
  }
  #detailSheet #detailBody .ai-assist-box b,
  #detailSheet #detailBody .ai-assist-box small,
  #detailSheet #detailBody .ai-assist-box p {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  #detailSheet #detailBody .ai-question-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }
  #detailSheet #detailBody .mini-ai-note,
  #detailSheet #detailBody .ai-question-pills button {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }
  #detailSheet #detailBody .detail-meta > p.muted {
    display: block !important;
    padding: 2px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.78) !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .tag-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #detailSheet #detailBody > .detail-actions,
  #detailSheet #detailBody > .detail-service-note {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
  #detailSheet .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    filter: drop-shadow(0 16px 42px rgba(0,0,0,.22)) !important;
  }
  #detailSheet .detail-media .detail-bg {
    opacity: .52 !important;
    filter: blur(26px) brightness(.50) saturate(1.14) !important;
  }
  #detailSheet .detail-thumbs button {
    flex: 0 0 66px !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 18px !important;
    padding: 3px !important;
  }
  #detailSheet .detail-thumbs img {
    object-fit: cover !important;
    border-radius: 14px !important;
  }
  #detailSheet .detail-nav-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    top: 50% !important;
    background: rgba(2,7,10,.50) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(14px) !important;
  }
  #detailSheet .detail-nav-btn.prev { left: 12px !important; }
  #detailSheet .detail-nav-btn.next { right: 12px !important; }
  #detailSheet .detail-nav-btn svg { width: 17px !important; height: 17px !important; stroke-width: 2.6 !important; }
  .desktop-scroll-controls button {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.13) !important;
  }
  .desktop-scroll-controls button::before {
    width: 12px !important;
    height: 12px !important;
    border-width: 2.4px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1390px) {
  #detailSheet[open] { padding-left: 250px !important; padding-right: 58px !important; }
  #detailSheet .detail-card { width: min(1120px, calc(100vw - 320px)) !important; }
  #detailSheet #detailBody {
    grid-template-columns: minmax(500px, 1fr) minmax(330px, .72fr) !important;
    gap: 16px 18px !important;
  }
  #detailSheet #detailBody > .detail-media { height: clamp(440px, 62vh, 680px) !important; }
  #detailSheet #detailBody .ai-assist-box { grid-template-columns: 46px minmax(0,1fr) !important; }
}

@media (min-width: 1100px) and (max-height: 760px) {
  #detailSheet .detail-card { max-height: 96dvh !important; }
  #detailSheet #detailBody > .detail-media { height: clamp(360px, 55vh, 520px) !important; }
  #detailSheet #detailBody > .detail-meta { max-height: calc(96dvh - 112px) !important; }
}

/* v56: desktop detail reading polish, clean AI spacing and smaller modern gallery arrows */
@media (min-width: 1100px) {
  #detailSheet.sheet[open] {
    padding: 26px 86px 26px 286px !important;
  }
  #detailSheet .detail-card {
    width: min(1440px, calc(100vw - 360px)) !important;
    max-width: 1440px !important;
    max-height: min(94dvh, 1040px) !important;
    overflow: hidden !important;
    border-radius: 32px !important;
    background: linear-gradient(145deg, rgba(3,7,10,.98), rgba(1,4,7,.96)) !important;
  }
  #detailSheet .detail-card > .sheet-bar {
    height: 5px !important;
    width: 58px !important;
    margin: 10px auto 0 !important;
    opacity: .65 !important;
  }
  #detailSheet .detail-card > .sheet-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 170 !important;
    min-height: 78px !important;
    padding: 16px 82px 14px 26px !important;
    background: linear-gradient(180deg, rgba(2,6,9,.99), rgba(2,6,9,.91) 70%, rgba(2,6,9,.72)) !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    font-size: clamp(20px, 1.35vw, 26px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    max-width: min(760px, 70vw) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #detailSheet .detail-card > .sheet-title small {
    letter-spacing: .18em !important;
    font-size: 11px !important;
  }
  #detailSheet #detailBody {
    display: grid !important;
    grid-template-columns: minmax(600px, 1.46fr) minmax(380px, .74fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 15px 24px !important;
    align-items: start !important;
    padding: 22px 26px 28px !important;
    max-height: calc(min(94dvh, 1040px) - 88px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: clamp(520px, 67vh, 780px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 42%, rgba(24,243,238,.12), rgba(2,5,8,.98) 64%) !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 2px 2px 4px !important;
    align-self: start !important;
  }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 2px 4px 0 !important;
    min-width: 0 !important;
  }
  #detailSheet #detailBody > .detail-service-note,
  #detailSheet #detailBody > .detail-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
  }
  #detailSheet .detail-meta h2 {
    font-size: clamp(30px, 2.05vw, 44px) !important;
    line-height: .99 !important;
    letter-spacing: -.055em !important;
    margin: 2px 0 4px !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }
  #detailSheet .detail-meta > p.muted {
    font-size: 15px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.78) !important;
    margin: 2px 0 0 !important;
  }
  #detailSheet .ai-assist-box.priority,
  #detailSheet .price-radar-box,
  #detailSheet .trust-mini {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #detailSheet .ai-assist-box.priority {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 8px 0 10px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(12,48,50,.86), rgba(18,9,24,.82)) !important;
    border-color: rgba(24,243,238,.24) !important;
  }
  #detailSheet .ai-assist-box.priority > span {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
  }
  #detailSheet .ai-assist-box.priority > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #detailSheet .ai-assist-box.priority b {
    font-size: 15px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 5px !important;
  }
  #detailSheet .ai-assist-box.priority small {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #detailSheet .ai-question-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  #detailSheet .mini-ai-note {
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
    padding: 9px 12px !important;
    font-size: 11px !important;
  }
  #detailSheet .ai-alt-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #detailSheet .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
  }
  #detailSheet .detail-bg {
    opacity: .42 !important;
    filter: blur(32px) brightness(.42) saturate(1.18) !important;
    transform: scale(1.05) !important;
  }
  #detailSheet .detail-nav-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(4,12,15,.58) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    opacity: .96 !important;
  }
  #detailSheet .detail-nav-btn:hover {
    transform: translateY(-50%) scale(1.04) !important;
    background: rgba(12,42,45,.72) !important;
    border-color: rgba(24,243,238,.38) !important;
  }
  #detailSheet .detail-nav-btn.prev { left: 16px !important; }
  #detailSheet .detail-nav-btn.next { right: 16px !important; }
  #detailSheet .detail-nav-btn svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.7 !important;
  }
  #detailSheet .detail-zoom-btn {
    width: 36px !important;
    height: 36px !important;
    top: 16px !important;
    right: 16px !important;
    border-radius: 999px !important;
    background: rgba(5,13,16,.62) !important;
    backdrop-filter: blur(16px) !important;
  }
  #detailSheet .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-top: 10px !important;
    background: linear-gradient(180deg, rgba(2,5,8,0), rgba(2,5,8,.92) 22%, rgba(2,5,8,.98)) !important;
    position: sticky !important;
    bottom: -28px !important;
    z-index: 60 !important;
  }
  #detailSheet .detail-actions button,
  #detailSheet .detail-actions a {
    min-width: 0 !important;
    height: 50px !important;
  }
}
@media (min-width: 1100px) and (max-width: 1320px) {
  #detailSheet.sheet[open] { padding-left: 260px !important; padding-right: 64px !important; }
  #detailSheet .detail-card { width: min(1040px, calc(100vw - 330px)) !important; }
  #detailSheet #detailBody {
    display: grid !important;
    grid-template-columns: minmax(520px, 1.25fr) minmax(320px, .75fr) !important;
    gap: 14px 18px !important;
  }
  #detailSheet #detailBody > .detail-media { height: clamp(440px, 62vh, 660px) !important; }
  #detailSheet .detail-meta h2 { font-size: clamp(26px, 2vw, 36px) !important; }
  #detailSheet .ai-assist-box.priority { padding: 14px !important; }
}
@media (min-width: 1500px) {
  #detailSheet .detail-card { width: min(1520px, calc(100vw - 430px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(720px, 1.54fr) minmax(430px, .76fr) !important; }
  #detailSheet #detailBody > .detail-media { height: clamp(600px, 72vh, 860px) !important; }
}
@media (max-width: 1099px) {
  #detailSheet .detail-nav-btn {
    width: 36px !important;
    height: 36px !important;
    background: rgba(5,13,16,.66) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    backdrop-filter: blur(14px) !important;
  }
  #detailSheet .detail-nav-btn svg { width: 16px !important; height: 16px !important; }
}

/* v56: Desktop detail readability, AI spacing and modern mini arrows */
@media (min-width: 1100px) {
  #detailSheet .detail-card {
    width: min(1360px, calc(100vw - 360px)) !important;
    max-width: min(1360px, calc(100vw - 360px)) !important;
    max-height: min(94dvh, 1000px) !important;
    border-radius: 34px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: linear-gradient(145deg, rgba(3,7,10,.992), rgba(5,12,14,.975)) !important;
  }
  #detailSheet .detail-card > .sheet-title {
    top: 0 !important;
    z-index: 180 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 46px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 22px 16px 24px !important;
    min-height: 76px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.995), rgba(3,7,10,.955) 74%, rgba(3,7,10,.82)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.28) !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    font-size: clamp(22px, 1.45vw, 30px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  #detailSheet .detail-card > .sheet-title .xbtn {
    position: static !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
  }
  #detailSheet #detailBody {
    display: grid !important;
    grid-template-columns: minmax(560px, 1.08fr) minmax(390px, .92fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(20px, 2.1vw, 34px) !important;
    row-gap: 14px !important;
    align-items: start !important;
    padding: 24px clamp(22px, 2vw, 34px) 30px !important;
    overflow: visible !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: clamp(460px, 65vh, 760px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 44%, rgba(24,243,238,.14), rgba(3,7,10,.18) 44%, rgba(2,4,6,1) 76%),
      #020406 !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #detailSheet #detailBody > .detail-media.is-landscape { height: clamp(430px, 61vh, 700px) !important; }
  #detailSheet #detailBody > .detail-media.is-portrait { height: clamp(540px, 72vh, 820px) !important; }
  #detailSheet .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    filter: saturate(1.03) contrast(1.015) !important;
  }
  #detailSheet .detail-media .detail-bg {
    opacity: .44 !important;
    filter: blur(34px) brightness(.44) saturate(1.16) !important;
    transform: scale(1.08) !important;
  }
  #detailSheet .detail-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 36%, rgba(0,0,0,.16));
    z-index: 3;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 2px 1px 10px !important;
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
  }
  #detailSheet .detail-thumbs button {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.07) !important;
  }
  #detailSheet .detail-thumbs img { border-radius: 16px !important; object-fit: cover !important; }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 0 0 !important;
  }
  #detailSheet .detail-meta h2 {
    font-size: clamp(30px, 2.15vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.052em !important;
    margin: 6px 0 0 !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  #detailSheet .detail-description {
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: clamp(14px, .98vw, 16px) !important;
    line-height: 1.55 !important;
    max-width: 58ch !important;
  }
  #detailSheet .tag-line { margin-top: 2px !important; gap: 8px !important; }
  #detailSheet .detail-ai-card,
  #detailSheet .ai-assist-box.priority {
    margin: 8px 0 0 !important;
    width: 100% !important;
    padding: 14px 15px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(24,243,238,.105), rgba(255,255,255,.045)) !important;
    border-color: rgba(24,243,238,.22) !important;
  }
  #detailSheet .detail-ai-card b,
  #detailSheet .ai-assist-box.priority b { font-size: 14px !important; line-height: 1.15 !important; }
  #detailSheet .detail-ai-card small,
  #detailSheet .ai-assist-box.priority small { font-size: 12.5px !important; line-height: 1.48 !important; color: rgba(255,255,255,.77) !important; }
  #detailSheet .ai-question-pills { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; }
  #detailSheet .mini-ai-note { width: 100% !important; text-align: center !important; border-radius: 999px !important; padding: 9px 12px !important; }
  #detailSheet #detailBody > .detail-actions {
    grid-column: 2 !important;
    position: static !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #detailSheet #detailBody > .detail-service-note,
  #detailSheet .price-radar-box,
  #detailSheet .trust-mini { max-width: 100% !important; }
  .detail-nav-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: rgba(2,7,10,.52) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(14px) !important;
  }
  .detail-nav-btn.prev { left: 16px !important; }
  .detail-nav-btn.next { right: 16px !important; }
  .detail-nav-btn svg { width: 18px !important; height: 18px !important; stroke-width: 2.35 !important; }
  .detail-zoom-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    right: 16px !important;
    top: 16px !important;
  }
  .detail-count { right: 16px !important; bottom: 16px !important; }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  #detailSheet #detailBody {
    display: block !important;
    padding: 20px 22px 28px !important;
  }
  #detailSheet .detail-media { height: clamp(430px, 61vh, 650px) !important; margin-bottom: 12px !important; }
  #detailSheet .detail-meta { display: flex !important; gap: 12px !important; }
  #detailSheet .detail-actions { position: static !important; margin-top: 12px !important; }
}


/* v56: desktop details readability, media-safe stage and slimmer navigation arrows */
@media (min-width: 1100px) {
  #detailSheet.sheet[open] {
    padding: 22px 72px 22px 248px !important;
  }
  #detailSheet .detail-card {
    width: min(1380px, calc(100vw - 340px)) !important;
    max-width: 1380px !important;
    max-height: min(94dvh, 980px) !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.985), rgba(2,5,8,.98)) !important;
  }
  #detailSheet .detail-card > .sheet-title {
    min-height: 62px !important;
    padding: 12px 72px 12px 24px !important;
    display: flex !important;
    align-items: center !important;
  }
  #detailSheet .detail-card > .sheet-title small {
    font-size: 11px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    font-size: clamp(21px, 1.45vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    max-width: min(1020px, calc(100vw - 470px)) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #detailSheet .detail-card > .sheet-title .xbtn {
    width: 42px !important;
    height: 42px !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  #detailSheet #detailBody {
    grid-template-columns: minmax(620px, 1.26fr) minmax(380px, .74fr) !important;
    gap: 18px 22px !important;
    padding: 20px 24px 22px !important;
    align-items: start !important;
  }
  #detailSheet #detailBody > .detail-media {
    height: min(70dvh, 760px) !important;
    min-height: 500px !important;
    border-radius: 24px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 70px rgba(0,0,0,.26) !important;
  }
  #detailSheet #detailBody > .detail-media.is-landscape {
    height: min(66dvh, 700px) !important;
  }
  #detailSheet #detailBody > .detail-media.is-portrait {
    height: min(76dvh, 820px) !important;
  }
  #detailSheet #detailBody > .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  #detailSheet #detailBody > .detail-media.is-portrait .detail-main {
    width: auto !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    gap: 10px !important;
    padding-top: 8px !important;
  }
  #detailSheet #detailBody > .detail-thumbs button {
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px !important;
    border-radius: 18px !important;
  }
  #detailSheet #detailBody > .detail-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    max-height: calc(min(94dvh, 980px) - 108px) !important;
    overflow-y: auto !important;
    padding: 3px 8px 110px 0 !important;
  }
  #detailSheet #detailBody > .detail-meta > h2 {
    display: none !important;
  }
  #detailSheet #detailBody .seller-line { order: 1 !important; }
  #detailSheet #detailBody .badge-line { order: 2 !important; margin: 2px 0 0 !important; }
  #detailSheet #detailBody .detail-meta > p.muted {
    order: 3 !important;
    font-size: 15.5px !important;
    line-height: 1.68 !important;
    color: rgba(255,255,255,.80) !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
  }
  #detailSheet #detailBody .tag-line { order: 4 !important; margin: 2px 0 0 !important; }
  #detailSheet #detailBody .owner-tools { order: 5 !important; }
  #detailSheet #detailBody .ai-assist-box.priority {
    order: 6 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 13px !important;
    margin: 4px 0 2px !important;
    padding: 15px !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at 0 0, rgba(24,243,238,.13), transparent 40%), linear-gradient(145deg, rgba(12,43,44,.52), rgba(20,13,30,.42)) !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority > span {
    width: 44px !important;
    height: 44px !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority b {
    font-size: 15px !important;
    line-height: 1.16 !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority small {
    font-size: 13px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #detailSheet #detailBody .ai-question-pills {
    gap: 8px !important;
  }
  #detailSheet #detailBody .mini-ai-note {
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 8px 10px !important;
  }
  #detailSheet #detailBody .price-radar-box { order: 7 !important; }
  #detailSheet #detailBody .trust-mini { order: 8 !important; }
  #detailSheet #detailBody > .detail-service-note,
  #detailSheet #detailBody > .detail-actions {
    grid-column: 2 !important;
  }
  #detailSheet #detailBody > .detail-actions {
    margin-top: 0 !important;
    padding: 12px 0 0 !important;
    background: linear-gradient(180deg, rgba(4,8,11,0), rgba(4,8,11,.92) 32%, rgba(4,8,11,.995)) !important;
  }
  .detail-nav-btn {
    width: 34px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background: rgba(3,8,12,.44) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  }
  .detail-nav-btn.prev { left: 12px !important; }
  .detail-nav-btn.next { right: 12px !important; }
  .detail-nav-btn svg { width: 18px !important; height: 18px !important; stroke-width: 2.45 !important; }
  .detail-zoom-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 16px !important;
  }
  .desktop-scroll-controls {
    right: 22px !important;
    gap: 10px !important;
  }
  .desktop-scroll-controls button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.09) !important;
  }
  .desktop-scroll-controls button::before {
    width: 10px !important;
    height: 10px !important;
    border-top-width: 2px !important;
    border-left-width: 2px !important;
  }
}
@media (min-width: 1100px) and (max-width: 1370px) {
  #detailSheet.sheet[open] { padding-left: 238px !important; padding-right: 58px !important; }
  #detailSheet .detail-card { width: min(1120px, calc(100vw - 315px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(540px, 1fr) minmax(330px, 390px) !important; gap: 16px !important; }
  #detailSheet #detailBody > .detail-media { min-height: 440px !important; height: min(66dvh, 670px) !important; }
}
@media (min-width: 1100px) and (max-width: 1220px) {
  #detailSheet.sheet[open] { padding-left: 226px !important; padding-right: 48px !important; }
  #detailSheet .detail-card { width: min(900px, calc(100vw - 285px)) !important; }
  #detailSheet #detailBody { display: block !important; padding: 16px 18px 22px !important; }
  #detailSheet #detailBody > .detail-media { height: min(62dvh, 620px) !important; min-height: 390px !important; margin-bottom: 12px !important; }
  #detailSheet #detailBody > .detail-meta { max-height: none !important; overflow: visible !important; padding: 0 !important; }
  #detailSheet #detailBody > .detail-actions { position: static !important; }
}

/* v56: desktop detail readability, non-overlapping AI, full media stage and smaller arrows */
@media (min-width: 1100px) {
  #detailSheet.sheet[open] {
    padding: 22px 72px 22px 270px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #detailSheet .detail-card {
    width: min(1480px, calc(100vw - 360px)) !important;
    max-width: 1480px !important;
    max-height: calc(100dvh - 44px) !important;
    height: min(960px, calc(100dvh - 44px)) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 32px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.992), rgba(2,6,9,.972)) !important;
  }
  #detailSheet .detail-card > .sheet-bar {
    height: 5px !important;
    width: 58px !important;
    margin: 10px auto 0 !important;
    opacity: .55 !important;
    flex: 0 0 auto !important;
  }
  #detailSheet .detail-card > .sheet-title {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 260 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 13px 76px 10px 28px !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(180deg, rgba(3,7,10,.995), rgba(3,7,10,.88)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.30) !important;
  }
  #detailSheet .detail-card > .sheet-title small {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(24,243,238,.10) !important;
    border: 1px solid rgba(24,243,238,.18) !important;
    color: var(--cyan) !important;
    font-size: 12px !important;
    letter-spacing: .16em !important;
    font-weight: 1000 !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    display: none !important;
  }
  #detailSheet .detail-card > .sheet-title .xbtn {
    right: 20px !important;
    top: 10px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
  }
  #detailSheet #detailBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(640px, 1.28fr) minmax(430px, .72fr) !important;
    gap: 18px 26px !important;
    padding: 20px 24px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    box-sizing: border-box !important;
  }
  #detailSheet #detailBody > * { min-width: 0 !important; max-width: 100% !important; }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    height: min(76dvh, 780px) !important;
    min-height: 520px !important;
    max-height: calc(100dvh - 148px) !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 28px !important;
    background: radial-gradient(circle at 50% 48%, rgba(24,243,238,.08), rgba(2,4,6,1) 72%) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 0 !important;
    margin: 0 !important;
  }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: calc(100dvh - 150px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 8px 96px 0 !important;
    scrollbar-width: thin !important;
    align-self: start !important;
  }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar { width: 7px !important; }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar-thumb { background: rgba(24,243,238,.28) !important; border-radius: 999px !important; }
  #detailSheet .seller-line { max-width: 100% !important; }
  #detailSheet .badge-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 2px 0 0 !important;
  }
  #detailSheet .detail-meta h2 {
    font-size: clamp(30px, 2.1vw, 46px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.055em !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  #detailSheet .detail-meta > p.muted {
    order: 4 !important;
    font-size: 15.5px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.78) !important;
    margin: 0 !important;
    max-height: none !important;
  }
  #detailSheet .tag-line { order: 5 !important; margin: 0 !important; }
  #detailSheet .ai-assist-box.priority {
    order: 6 !important;
    margin: 4px 0 0 !important;
    padding: 15px !important;
    border-radius: 24px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 12px !important;
    background: linear-gradient(145deg, rgba(11, 35, 36, .92), rgba(23, 11, 24, .88)) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #detailSheet .ai-assist-box.priority > span { width: 46px !important; height: 46px !important; border-radius: 17px !important; }
  #detailSheet .ai-assist-box.priority b,
  #detailSheet .ai-assist-box.priority small,
  #detailSheet .ai-assist-box.priority p { max-width: 100% !important; overflow-wrap: anywhere !important; }
  #detailSheet .ai-question-pills { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  #detailSheet .mini-ai-note { width: 100% !important; text-align: center !important; line-height: 1.22 !important; white-space: normal !important; }
  #detailSheet #detailBody > .detail-actions,
  #detailSheet #detailBody > .detail-service-note {
    grid-column: 2 !important;
    width: 100% !important;
  }
  #detailSheet #detailBody > .detail-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 120 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    padding: 12px 0 0 !important;
    margin: -74px 8px 0 0 !important;
    background: linear-gradient(180deg, rgba(3,7,10,0), rgba(3,7,10,.92) 38%, rgba(3,7,10,.995)) !important;
  }
  #detailSheet .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    filter: none !important;
  }
  #detailSheet .detail-media .detail-bg {
    object-fit: cover !important;
    opacity: .48 !important;
    filter: blur(30px) brightness(.50) saturate(1.12) !important;
    transform: scale(1.06) !important;
  }
  #detailSheet .detail-thumbs button {
    flex: 0 0 66px !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 19px !important;
  }
  #detailSheet .detail-thumbs img { object-fit: cover !important; border-radius: 15px !important; }
  #detailSheet .detail-nav-btn {
    width: 36px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: rgba(2,7,10,.54) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.30) !important;
    opacity: .86 !important;
  }
  #detailSheet .detail-nav-btn.prev { left: 12px !important; }
  #detailSheet .detail-nav-btn.next { right: 12px !important; }
  #detailSheet .detail-nav-btn svg { width: 17px !important; height: 17px !important; stroke-width: 3 !important; }
  #detailSheet .detail-zoom-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 15px !important;
    right: 14px !important;
    top: 14px !important;
  }
  .desktop-scroll-controls button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
  }
  .desktop-scroll-controls button::before { width: 11px !important; height: 11px !important; border-width: 2.4px !important; }
}
@media (min-width: 1100px) and (max-width: 1320px) {
  #detailSheet.sheet[open] { padding: 18px 54px 18px 238px !important; }
  #detailSheet .detail-card { width: min(1040px, calc(100vw - 300px)) !important; height: min(950px, calc(100dvh - 36px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(500px, 1fr) minmax(360px, .82fr) !important; gap: 16px !important; }
  #detailSheet #detailBody > .detail-media { height: min(70dvh, 680px) !important; min-height: 440px !important; }
  #detailSheet .detail-meta h2 { font-size: clamp(26px, 2.1vw, 38px) !important; }
}
@media (min-width: 1100px) and (max-height: 780px) {
  #detailSheet .detail-card { height: calc(100dvh - 28px) !important; }
  #detailSheet #detailBody { padding-top: 14px !important; }
  #detailSheet #detailBody > .detail-media { height: min(66dvh, 600px) !important; min-height: 360px !important; }
  #detailSheet .detail-card > .sheet-title { min-height: 48px !important; padding-top: 10px !important; padding-bottom: 9px !important; }
}

/* v56: desktop detail readability, non-overlapping AI card, richer media stage and elegant mini arrows */
@media (min-width: 1100px) {
  #detailSheet .detail-card {
    width: min(1380px, calc(100vw - 380px)) !important;
    max-width: min(1380px, calc(100vw - 380px)) !important;
    max-height: min(94dvh, 1010px) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 34px !important;
  }
  #detailSheet .detail-card > .sheet-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 190 !important;
    display: grid !important;
    gap: 2px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 14px 76px 14px 24px !important;
    background: linear-gradient(180deg, rgba(3,7,10,.995), rgba(3,7,10,.955) 78%, rgba(3,7,10,.90)) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.30) !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    font-size: clamp(21px, 1.45vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    max-width: calc(100% - 4px) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #detailSheet .detail-card > .sheet-title .xbtn {
    top: 14px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
  }
  #detailSheet #detailBody {
    display: grid !important;
    grid-template-columns: minmax(620px, 1.34fr) minmax(390px, .66fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 18px 24px !important;
    align-items: start !important;
    padding: 22px 24px 28px !important;
    overflow: visible !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: clamp(520px, 70vh, 780px) !important;
    min-height: 520px !important;
    max-height: calc(94dvh - 132px) !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 48% 36%, rgba(24,243,238,.12), rgba(4,7,10,.92) 58%),
      #020406 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 70px rgba(0,0,0,.34) !important;
  }
  #detailSheet .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    display: block !important;
  }
  #detailSheet .detail-media .detail-bg {
    object-fit: cover !important;
    opacity: .54 !important;
    filter: blur(30px) brightness(.42) saturate(1.18) !important;
    transform: scale(1.06) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    margin: 0 !important;
    padding: 0 2px 10px !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
  }
  #detailSheet #detailBody > .detail-thumbs::-webkit-scrollbar { display: none !important; }
  #detailSheet .detail-thumbs button {
    flex: 0 0 74px !important;
    width: 74px !important;
    height: 74px !important;
    border-radius: 20px !important;
    padding: 2px !important;
  }
  #detailSheet .detail-thumbs img { object-fit: cover !important; border-radius: 16px !important; }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    gap: 12px !important;
    align-self: start !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  #detailSheet #detailBody > .detail-meta .detail-title-main {
    display: none !important;
  }
  #detailSheet #detailBody > .detail-meta .detail-description {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.78) !important;
    margin: 4px 0 0 !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 16px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 0 0, rgba(24,243,238,.16), transparent 42%),
      linear-gradient(145deg, rgba(7,22,24,.86), rgba(14,11,19,.78)) !important;
    border-color: rgba(24,243,238,.28) !important;
    box-shadow: 0 20px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority > div,
  #detailSheet #detailBody .ai-assist-box.priority small,
  #detailSheet #detailBody .ai-assist-box.priority b { min-width: 0 !important; max-width: 100% !important; }
  #detailSheet #detailBody .ai-assist-box.priority small { font-size: 13px !important; line-height: 1.48 !important; }
  #detailSheet #detailBody .ai-question-pills { gap: 8px !important; }
  #detailSheet #detailBody .mini-ai-note {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.18 !important;
    padding: 9px 12px !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .tag-line { margin-top: 2px !important; }
  #detailSheet #detailBody > .detail-service-note,
  #detailSheet #detailBody > .detail-actions {
    grid-column: 2 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #detailSheet #detailBody > .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-self: start !important;
  }
  #detailSheet #detailBody .price-radar-box,
  #detailSheet #detailBody .trust-mini { margin-top: 2px !important; }
  #detailSheet .detail-nav-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: rgba(5,9,12,.58) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter: blur(16px) !important;
    opacity: .92 !important;
  }
  #detailSheet .detail-nav-btn.prev { left: 16px !important; }
  #detailSheet .detail-nav-btn.next { right: 16px !important; }
  #detailSheet .detail-nav-btn svg { width: 19px !important; height: 19px !important; stroke-width: 2.35 !important; }
  #detailSheet .detail-nav-btn:hover { background: rgba(24,243,238,.20) !important; border-color: rgba(24,243,238,.36) !important; opacity: 1 !important; }
  .desktop-scroll-controls {
    right: 24px !important;
    gap: 12px !important;
  }
  .desktop-scroll-controls button {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .desktop-scroll-controls button::before {
    width: 11px !important;
    height: 11px !important;
    border-top-width: 2.4px !important;
    border-left-width: 2.4px !important;
  }
}
@media (min-width: 1100px) and (max-width: 1340px) {
  #detailSheet .detail-card { width: min(980px, calc(100vw - 330px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(460px, 1fr) minmax(360px, .82fr) !important; gap: 16px !important; }
  #detailSheet #detailBody > .detail-media { height: clamp(430px, 62vh, 660px) !important; min-height: 430px !important; }
}
@media (min-width: 1100px) and (max-height: 780px) {
  #detailSheet #detailBody > .detail-media { height: clamp(360px, 58vh, 560px) !important; min-height: 360px !important; }
  #detailSheet .detail-card > .sheet-title { min-height: 62px !important; padding-top: 11px !important; padding-bottom: 12px !important; }
}

/* v56 final override: clean desktop details, readable right panel and compact media controls */
@media (min-width: 1100px) {
  #detailSheet.sheet[open] {
    padding: 20px 70px 20px 270px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #detailSheet .detail-card {
    width: min(1500px, calc(100vw - 355px)) !important;
    max-width: 1500px !important;
    height: min(960px, calc(100dvh - 40px)) !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 34px !important;
  }
  #detailSheet .detail-card > .sheet-bar {
    width: 58px !important;
    height: 5px !important;
    margin: 10px auto 0 !important;
    opacity: .50 !important;
  }
  #detailSheet .detail-card > .sheet-title {
    min-height: 52px !important;
    padding: 10px 76px 10px 26px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(180deg, rgba(3,7,10,.995), rgba(3,7,10,.90)) !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.28) !important;
  }
  #detailSheet .detail-card > .sheet-title small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 27px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(24,243,238,.10) !important;
    border: 1px solid rgba(24,243,238,.18) !important;
    color: var(--cyan) !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
    font-weight: 1000 !important;
  }
  #detailSheet .detail-card > .sheet-title h3 { display: none !important; }
  #detailSheet .detail-card > .sheet-title .xbtn {
    top: 9px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
  }
  #detailSheet #detailBody {
    height: calc(100% - 67px) !important;
    max-height: none !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(660px, 1.34fr) minmax(430px, .66fr) !important;
    gap: 18px 28px !important;
    align-items: start !important;
    padding: 20px 24px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    scrollbar-gutter: stable !important;
  }
  #detailSheet #detailBody > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    height: min(76dvh, 780px) !important;
    min-height: 520px !important;
    max-height: calc(100dvh - 145px) !important;
    width: 100% !important;
    border-radius: 30px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 40%, rgba(24,243,238,.10), rgba(2,5,8,1) 70%) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.065) !important;
  }
  #detailSheet .detail-media .detail-main,
  #detailSheet .detail-media img.detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    display: block !important;
    filter: none !important;
  }
  #detailSheet .detail-media .detail-bg {
    object-fit: cover !important;
    filter: blur(30px) brightness(.46) saturate(1.15) !important;
    opacity: .52 !important;
    transform: scale(1.06) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 0 2px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
  }
  #detailSheet #detailBody > .detail-thumbs::-webkit-scrollbar { display: none !important; }
  #detailSheet .detail-thumbs button {
    flex: 0 0 66px !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 19px !important;
    padding: 2px !important;
  }
  #detailSheet .detail-thumbs img { object-fit: cover !important; border-radius: 15px !important; }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-self: start !important;
    max-height: calc(100dvh - 145px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 8px 98px 0 !important;
    scrollbar-width: thin !important;
  }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar { width: 7px !important; }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar-thumb { background: rgba(24,243,238,.28) !important; border-radius: 999px !important; }
  #detailSheet .seller-line,
  #detailSheet .badge-line,
  #detailSheet .tag-line,
  #detailSheet .detail-meta > p,
  #detailSheet .detail-meta > div { max-width: 100% !important; min-width: 0 !important; }
  #detailSheet .detail-meta h2,
  #detailSheet .detail-title-main {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    margin: 0 !important;
    font-size: clamp(30px, 2vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.055em !important;
  }
  #detailSheet .detail-description,
  #detailSheet .detail-meta > p.muted {
    font-size: 15.5px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.78) !important;
    margin: 0 !important;
  }
  #detailSheet .ai-assist-box.priority,
  #detailSheet .detail-ai-card {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: start !important;
    margin: 2px 0 0 !important;
    padding: 15px !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 0 0, rgba(24,243,238,.16), transparent 40%), linear-gradient(145deg, rgba(7,22,24,.88), rgba(13,10,18,.82)) !important;
    border: 1px solid rgba(24,243,238,.24) !important;
    box-shadow: 0 20px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #detailSheet .ai-assist-box.priority > span { width: 44px !important; height: 44px !important; border-radius: 16px !important; }
  #detailSheet .ai-assist-box.priority > div,
  #detailSheet .ai-assist-box.priority b,
  #detailSheet .ai-assist-box.priority small { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; }
  #detailSheet .ai-question-pills { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  #detailSheet .mini-ai-note { white-space: normal !important; width: 100% !important; text-align: center !important; line-height: 1.2 !important; }
  #detailSheet #detailBody > .detail-actions,
  #detailSheet #detailBody > .detail-service-note {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 120 !important;
  }
  #detailSheet #detailBody > .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: -76px 8px 0 0 !important;
    padding: 12px 0 0 !important;
    background: linear-gradient(180deg, rgba(3,7,10,0), rgba(3,7,10,.94) 34%, rgba(3,7,10,.995)) !important;
  }
  #detailSheet .detail-nav-btn {
    width: 34px !important;
    height: 38px !important;
    border-radius: 15px !important;
    background: rgba(3,8,11,.58) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
    opacity: .88 !important;
    backdrop-filter: blur(14px) !important;
  }
  #detailSheet .detail-nav-btn.prev { left: 12px !important; }
  #detailSheet .detail-nav-btn.next { right: 12px !important; }
  #detailSheet .detail-nav-btn svg { width: 16px !important; height: 16px !important; stroke-width: 2.6 !important; }
  #detailSheet .detail-zoom-btn { width: 36px !important; height: 36px !important; border-radius: 14px !important; }
  .desktop-scroll-controls { right: 22px !important; gap: 11px !important; }
  .desktop-scroll-controls button { width: 42px !important; height: 42px !important; }
  .desktop-scroll-controls button::before { width: 10px !important; height: 10px !important; border-top-width: 2.3px !important; border-left-width: 2.3px !important; }
}
@media (min-width: 1100px) and (max-width: 1360px) {
  #detailSheet.sheet[open] { padding: 18px 52px 18px 236px !important; }
  #detailSheet .detail-card { width: min(1040px, calc(100vw - 300px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(500px, 1fr) minmax(360px, .82fr) !important; gap: 16px !important; }
  #detailSheet #detailBody > .detail-media { height: min(70dvh, 670px) !important; min-height: 420px !important; }
  #detailSheet .detail-meta h2 { font-size: clamp(26px, 2vw, 38px) !important; }
}
@media (min-width: 1100px) and (max-height: 780px) {
  #detailSheet .detail-card { height: calc(100dvh - 28px) !important; }
  #detailSheet #detailBody { padding-top: 14px !important; }
  #detailSheet #detailBody > .detail-media { height: min(66dvh, 590px) !important; min-height: 350px !important; }
  #detailSheet .detail-card > .sheet-title { min-height: 48px !important; }
}

/* v56 final: desktop detail readability, non-duplicated title, airy AI card, full media and tiny arrows */
@media (min-width: 1100px) {
  #detailSheet.sheet[open] {
    padding: 22px 70px 22px 270px !important;
  }
  #detailSheet .detail-card {
    width: min(1500px, calc(100vw - 360px)) !important;
    height: min(950px, calc(100dvh - 44px)) !important;
    max-height: calc(100dvh - 44px) !important;
    overflow: hidden !important;
    border-radius: 32px !important;
  }
  #detailSheet .detail-card > .sheet-title {
    display: flex !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 13px 78px 13px 28px !important;
    background: linear-gradient(180deg, rgba(2,6,9,.995), rgba(2,6,9,.95) 72%, rgba(2,6,9,.82)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  #detailSheet .detail-card > .sheet-title > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  #detailSheet .detail-card > .sheet-title small {
    display: block !important;
    width: fit-content !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--cyan) !important;
    letter-spacing: .18em !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
  }
  #detailSheet .detail-card > .sheet-title h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    max-width: min(940px, calc(100vw - 520px)) !important;
    color: #fff !important;
    font-size: clamp(24px, 1.75vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.05em !important;
  }
  #detailSheet .detail-card > .sheet-title .xbtn {
    right: 20px !important;
    top: 18px !important;
    width: 42px !important;
    height: 42px !important;
  }
  #detailSheet #detailBody {
    height: calc(100% - 93px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: minmax(620px, 1.34fr) minmax(390px, .66fr) !important;
    gap: 18px 26px !important;
    padding: 20px 24px 24px !important;
    align-items: start !important;
    scrollbar-gutter: stable !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    height: min(72dvh, 740px) !important;
    min-height: 500px !important;
    max-height: calc(100dvh - 170px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 46%, rgba(24,243,238,.10), rgba(3,5,7,.98) 72%) !important;
  }
  #detailSheet .detail-media .detail-main {
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  #detailSheet .detail-media .detail-bg {
    object-fit: cover !important;
    opacity: .44 !important;
    filter: blur(32px) brightness(.48) saturate(1.1) !important;
    transform: scale(1.08) !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 4px 2px 0 !important;
  }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 8px 108px 0 !important;
  }
  #detailSheet #detailBody > .detail-meta > h2 {
    display: none !important;
  }
  #detailSheet #detailBody .seller-line {
    order: 1 !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .badge-line {
    order: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .detail-meta > p.muted {
    order: 3 !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    color: rgba(255,255,255,.80) !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .tag-line {
    order: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority {
    order: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 15px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, rgba(9,31,33,.94), rgba(18,12,24,.92)) !important;
    border: 1px solid rgba(24,243,238,.20) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority > div { min-width: 0 !important; }
  #detailSheet #detailBody .ai-assist-box.priority b,
  #detailSheet #detailBody .ai-assist-box.priority small,
  #detailSheet #detailBody .ai-assist-box.priority p {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .ai-question-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #detailSheet #detailBody .ai-question-pills button,
  #detailSheet #detailBody .mini-ai-note {
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.24 !important;
    padding: 9px 11px !important;
    border-radius: 16px !important;
  }
  #detailSheet #detailBody .owner-tools { order: 6 !important; }
  #detailSheet #detailBody .price-radar-box { order: 7 !important; }
  #detailSheet #detailBody .trust-mini { order: 8 !important; }
  #detailSheet #detailBody > .detail-actions,
  #detailSheet #detailBody > .detail-service-note {
    grid-column: 2 !important;
    width: 100% !important;
  }
  #detailSheet #detailBody > .detail-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 130 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: -88px 8px 0 0 !important;
    padding: 14px 0 0 !important;
    background: linear-gradient(180deg, rgba(3,7,10,0), rgba(3,7,10,.94) 34%, rgba(3,7,10,1)) !important;
  }
  #detailSheet .detail-nav-btn {
    width: 30px !important;
    height: 38px !important;
    border-radius: 14px !important;
    opacity: .78 !important;
    background: rgba(3,8,12,.48) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.26) !important;
  }
  #detailSheet .detail-nav-btn.prev { left: 10px !important; }
  #detailSheet .detail-nav-btn.next { right: 10px !important; }
  #detailSheet .detail-nav-btn svg { width: 15px !important; height: 15px !important; stroke-width: 2.7 !important; }
  #detailSheet .detail-nav-btn:hover { opacity: 1 !important; background: rgba(24,243,238,.16) !important; }
  .desktop-scroll-controls { right: 22px !important; gap: 9px !important; }
  .desktop-scroll-controls button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 16px !important;
  }
  .desktop-scroll-controls button::before {
    width: 9px !important;
    height: 9px !important;
    border-top-width: 2px !important;
    border-left-width: 2px !important;
  }
}
@media (min-width: 1100px) and (max-width: 1320px) {
  #detailSheet.sheet[open] { padding-left: 236px !important; padding-right: 48px !important; }
  #detailSheet .detail-card { width: min(1100px, calc(100vw - 294px)) !important; }
  #detailSheet #detailBody { grid-template-columns: minmax(500px, 1fr) minmax(350px, .76fr) !important; gap: 16px !important; }
  #detailSheet #detailBody > .detail-media { height: min(68dvh, 650px) !important; min-height: 420px !important; }
}
@media (min-width: 1100px) and (max-width: 1210px) {
  #detailSheet.sheet[open] { padding-left: 222px !important; padding-right: 42px !important; }
  #detailSheet .detail-card { width: min(900px, calc(100vw - 270px)) !important; }
  #detailSheet #detailBody { display: block !important; height: calc(100% - 93px) !important; overflow-y: auto !important; }
  #detailSheet #detailBody > .detail-media { position: relative !important; height: min(60dvh, 580px) !important; min-height: 380px !important; margin-bottom: 12px !important; }
  #detailSheet #detailBody > .detail-meta { max-height: none !important; overflow: visible !important; padding-right: 0 !important; }
  #detailSheet #detailBody > .detail-actions { position: static !important; margin: 14px 0 0 !important; }
}

/* v57: desktop detail no-overlap layout. The right column now owns its own scroll,
   and the CTA buttons live in a real bottom row instead of floating over photos/AI. */
@media (min-width: 1100px) {
  #detailSheet.sheet[open] {
    padding: 22px 64px 22px 270px !important;
  }
  #detailSheet .detail-card {
    width: min(1500px, calc(100vw - 350px)) !important;
    height: min(950px, calc(100dvh - 44px)) !important;
    max-height: calc(100dvh - 44px) !important;
    overflow: hidden !important;
  }
  #detailSheet #detailBody {
    height: calc(100% - 93px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(590px, 1fr) minmax(380px, 448px) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px 24px !important;
    padding: 20px 24px 22px !important;
    align-items: stretch !important;
  }
  #detailSheet #detailBody > * {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #detailSheet #detailBody > .detail-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 28px !important;
  }
  #detailSheet #detailBody > .detail-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    display: flex !important;
    gap: 9px !important;
    min-height: 78px !important;
    max-height: 88px !important;
    padding: 4px 2px 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
  }
  #detailSheet #detailBody > .detail-thumbs button {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
  }
  #detailSheet #detailBody > .detail-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 8px 4px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(24,243,238,.34) transparent !important;
  }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar,
  #detailSheet #detailBody > .detail-actions::-webkit-scrollbar { width: 7px !important; height: 7px !important; }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar-thumb,
  #detailSheet #detailBody > .detail-actions::-webkit-scrollbar-thumb { background: rgba(24,243,238,.34) !important; border-radius: 999px !important; }
  #detailSheet #detailBody > .detail-meta::-webkit-scrollbar-track,
  #detailSheet #detailBody > .detail-actions::-webkit-scrollbar-track { background: transparent !important; }
  #detailSheet #detailBody > .detail-meta > h2 { display: none !important; }
  #detailSheet #detailBody .seller-line,
  #detailSheet #detailBody .badge-line,
  #detailSheet #detailBody .tag-line,
  #detailSheet #detailBody .detail-description,
  #detailSheet #detailBody .ai-assist-box.priority,
  #detailSheet #detailBody .owner-tools,
  #detailSheet #detailBody .price-radar-box,
  #detailSheet #detailBody .trust-mini {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  #detailSheet #detailBody .ai-assist-box.priority {
    overflow: visible !important;
    margin: 0 !important;
  }
  #detailSheet #detailBody .ai-question-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  #detailSheet #detailBody .ai-question-pills button,
  #detailSheet #detailBody .mini-ai-note {
    min-height: 34px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.22 !important;
  }
  #detailSheet #detailBody .owner-tools {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(24,243,238,.08), rgba(255,47,126,.045)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }
  #detailSheet #detailBody .owner-tools .soft {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #detailSheet #detailBody > .detail-service-note {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    margin: 0 !important;
  }
  #detailSheet #detailBody > .detail-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    position: static !important;
    bottom: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-height: 184px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(10,20,24,.96), rgba(17,13,22,.94)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 20px 52px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #detailSheet #detailBody > .detail-actions:empty { display: none !important; }
  #detailSheet #detailBody > .detail-actions > button,
  #detailSheet #detailBody > .detail-actions > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #detailSheet .detail-nav-btn {
    z-index: 8 !important;
    width: 32px !important;
    height: 40px !important;
    opacity: .82 !important;
  }
  #detailSheet .detail-zoom-btn,
  #detailSheet .detail-count,
  #detailSheet .detail-loader { z-index: 9 !important; }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  #detailSheet.sheet[open] { padding-left: 228px !important; padding-right: 44px !important; }
  #detailSheet .detail-card { width: min(1120px, calc(100vw - 286px)) !important; }
  #detailSheet #detailBody {
    grid-template-columns: minmax(500px, 1fr) minmax(350px, 410px) !important;
    gap: 14px 18px !important;
  }
  #detailSheet #detailBody > .detail-actions { max-height: 170px !important; }
}

@media (min-width: 1100px) and (max-width: 1210px) {
  #detailSheet.sheet[open] { padding-left: 218px !important; padding-right: 34px !important; }
  #detailSheet .detail-card { width: min(920px, calc(100vw - 254px)) !important; }
  #detailSheet #detailBody {
    display: block !important;
    height: calc(100% - 93px) !important;
    overflow-y: auto !important;
    padding: 16px 20px 22px !important;
  }
  #detailSheet #detailBody > .detail-media {
    position: relative !important;
    height: min(58dvh, 560px) !important;
    min-height: 360px !important;
    margin-bottom: 12px !important;
  }
  #detailSheet #detailBody > .detail-thumbs { min-height: 74px !important; margin: 0 0 12px !important; }
  #detailSheet #detailBody > .detail-meta {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #detailSheet #detailBody > .detail-actions {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 14px !important;
  }
}

@media (min-width: 1100px) and (max-height: 780px) {
  #detailSheet .detail-card { height: calc(100dvh - 28px) !important; max-height: calc(100dvh - 28px) !important; }
  #detailSheet #detailBody { height: calc(100% - 74px) !important; padding-top: 14px !important; }
  #detailSheet .detail-card > .sheet-title { min-height: 60px !important; }
  #detailSheet #detailBody > .detail-actions { max-height: 150px !important; }
}

/* v57.1: keep the desktop thumbnail strip in its own lane, not on top of the media stage. */
@media (min-width: 1211px) {
  #detailSheet #detailBody > .detail-media {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }
}

/* v57.2: when the viewer is also the seller, keep seller controls visible before the long AI panel. */
@media (min-width: 1100px) {
  #detailSheet #detailBody .seller-line { order: 1 !important; }
  #detailSheet #detailBody .badge-line { order: 2 !important; }
  #detailSheet #detailBody .detail-description { order: 3 !important; }
  #detailSheet #detailBody .tag-line { order: 4 !important; }
  #detailSheet #detailBody .owner-tools { order: 5 !important; }
  #detailSheet #detailBody .ai-assist-box.priority { order: 6 !important; }
  #detailSheet #detailBody .price-radar-box { order: 7 !important; }
  #detailSheet #detailBody .trust-mini { order: 8 !important; }
}


/* v58: fast media switching. Keep the current photo visible while the next one is warming up. */
.media-wrap.carousel.is-buffering .media-main,
.media-wrap.carousel.is-preloading .media-main,
.media-wrap.carousel.is-changing .media-main {
  opacity: 1 !important;
  transform: scale(1.006) translateZ(0) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}
.media-wrap.carousel.is-buffering .media-bg,
.media-wrap.carousel.is-preloading .media-bg,
.media-wrap.carousel.is-changing .media-bg {
  opacity: .70 !important;
  transform: scale(1.045) translateZ(0) !important;
  filter: blur(18px) brightness(.68) saturate(1.12) !important;
}
.media-wrap.carousel .media-main,
.media-wrap.carousel .media-bg {
  transition: opacity .14s ease, transform .16s ease, filter .16s ease !important;
  will-change: opacity, transform;
}
.detail-media.is-preloading .detail-main,
.detail-media.is-changing .detail-main {
  opacity: 1 !important;
  transform: scale(1.002) translateZ(0) !important;
}
.detail-media.is-preloading .detail-bg,
.detail-media.is-changing .detail-bg {
  opacity: .72 !important;
}
.detail-media .detail-main,
.detail-media .detail-bg {
  transition: opacity .16s ease, transform .18s ease, filter .18s ease !important;
  will-change: opacity, transform;
}
.pricing-pro-guide {
  position: relative;
  overflow: hidden;
}
.pricing-pro-guide::after {
  content: '';
  position: absolute;
  inset: auto -20% -60% 32%;
  height: 96px;
  background: radial-gradient(circle, rgba(24,243,238,.18), transparent 62%);
  pointer-events: none;
}

/* v58.1: instant media handoff, no dark flash while photos change. */
.media-wrap.carousel .media-main,
.media-wrap.carousel .media-bg {
  transition: opacity .12s ease, transform .16s ease, filter .16s ease !important;
  backface-visibility: hidden !important;
  transform: translate3d(0,0,0) !important;
}
.media-wrap.carousel.is-preloading .media-main,
.media-wrap.carousel.is-changing .media-main,
.media-wrap.photo.loaded.is-preloading .media-main,
.media-wrap.photo.loaded.is-changing .media-main {
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(0,0,0) scale(1) !important;
}
.media-wrap.carousel.is-preloading .media-bg,
.media-wrap.carousel.is-changing .media-bg {
  opacity: .74 !important;
  filter: blur(20px) brightness(.62) saturate(1.12) !important;
  transform: translate3d(0,0,0) scale(1.06) !important;
}
.media-wrap.loaded .media-loader { opacity: 0 !important; }
.media-wrap.loaded.is-preloading .media-loader { opacity: .42 !important; }
.detail-media.is-preloading .detail-main,
.detail-media.is-changing .detail-main,
.detail-media.loaded.is-changing .detail-main {
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
}
.detail-media.is-preloading .detail-bg,
.detail-media.is-changing .detail-bg {
  opacity: .70 !important;
  filter: blur(22px) brightness(.60) saturate(1.14) !important;
}
.detail-media.loaded.is-preloading .detail-loader,
.detail-media.loaded.is-preloading .detail-media-loader { opacity: .45 !important; display: grid !important; }
.pricing-simplified-note {
  margin: 10px 0 12px;
  padding: 11px 13px;
  border-radius: 20px;
  border: 1px solid rgba(24,243,238,.18);
  background: linear-gradient(135deg, rgba(24,243,238,.10), rgba(255,47,126,.055));
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

/* v58.2: professional AI strip and simplified package sheet polish. */
.ai-pro-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: -4px 0 12px;
}
.ai-pro-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 9px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(24,243,238,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ai-pro-strip b {
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-pro-strip small {
  color: rgba(255,255,255,.66);
  font-size: 10.5px;
  line-height: 1.25;
}
.pricing-pro-guide {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(24,243,238,.18);
  background: radial-gradient(circle at 0 0, rgba(24,243,238,.13), transparent 44%), rgba(255,255,255,.055);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pricing-pro-guide b,
.pricing-pro-guide small {
  display: block;
}
.pricing-pro-guide b {
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: -.02em;
}
.pricing-pro-guide small {
  color: rgba(255,255,255,.68);
  line-height: 1.34;
  font-size: 11.5px;
}
.pricing-section-title small {
  max-width: 360px !important;
}
.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
}
.pricing-plan.pro_weekly,
.pricing-plan.service_pro_monthly,
.pricing-plan.shop_pro,
.pricing-plan.business_plus {
  min-height: 196px !important;
}
.pricing-plan.boost_24h,
.pricing-plan.smart_campaign_7d,
.pricing-plan.verified_business {
  min-height: 176px !important;
}
.pricing-plan .plan-actions .primary {
  white-space: normal !important;
  line-height: 1.1 !important;
}
.media-wrap.carousel.loaded:not(.is-changing) .media-main {
  animation: none !important;
}
.media-wrap.loading.loaded::before,
.media-wrap.loaded::before {
  animation: none !important;
}
.detail-media.is-preloading::before,
.detail-media.is-changing::before {
  opacity: .18 !important;
}
@media (min-width: 760px) {
  .ai-pro-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .ai-pro-strip { grid-template-columns: 1fr; }
  .pricing-pro-guide { grid-template-columns: 36px minmax(0,1fr); }
}


/* v58 final: fast media transitions, clean package screen, professional AI notes */
.media-wrap.carousel.is-warming .media-main,
.media-wrap.carousel.is-preloading .media-main,
.media-wrap.carousel.is-changing .media-main{opacity:1!important;transform:translateZ(0) scale(1.002)!important;filter:saturate(1.03) contrast(1.01)!important;}
.media-wrap.carousel.is-warming .media-bg,
.media-wrap.carousel.is-preloading .media-bg{opacity:.72!important;}
.media-wrap.carousel.is-warming .media-loader,
.media-wrap.carousel.is-preloading .media-loader,
.media-wrap.photo.loaded .media-loader{opacity:0!important;display:none!important;pointer-events:none!important;}
.detail-media.is-preloading .detail-main,
.detail-media.is-changing .detail-main{opacity:1!important;transform:translateZ(0) scale(1.001)!important;}
.detail-media.is-preloading .detail-bg,
.detail-media.is-changing .detail-bg{opacity:.72!important;}
.detail-media.is-preloading .detail-loader{opacity:.18!important;}
.detail-media.loaded:not(.loading) .detail-loader{display:none!important;opacity:0!important;}
.package-guide-card,.package-ai-note{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;border:1px solid rgba(32,242,214,.18)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(32,242,214,.09),rgba(255,255,255,.045))!important;padding:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;}
.package-guide-card>span{width:46px;height:46px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);color:#eafffb;}
.package-guide-card b,.package-ai-note b{display:block;color:#fff;font-size:15px;letter-spacing:-.02em;}
.package-guide-card small,.package-ai-note small{display:block;color:rgba(255,255,255,.68);line-height:1.38;margin-top:2px;}
.package-ai-note{grid-template-columns:38px minmax(0,1fr)!important;background:linear-gradient(145deg,rgba(255,47,126,.075),rgba(32,242,214,.055))!important;}
.package-ai-note .ai-brand-mark{width:38px!important;height:38px!important;border-radius:16px!important;}
.pricing-section .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.pricing-section .pricing-plan{min-height:188px!important;}
.pricing-plan.seller_pro,.pricing-plan.shop_pro{border-color:rgba(32,242,214,.22)!important;}
.pricing-plan.boost_24h{border-color:rgba(112,246,180,.24)!important;background:radial-gradient(circle at 20% 0,rgba(112,246,180,.16),transparent 35%),rgba(255,255,255,.055)!important;}
.pricing-plan.business_plus{border-color:rgba(255,47,126,.25)!important;background:radial-gradient(circle at 20% 0,rgba(255,47,126,.15),transparent 35%),rgba(255,255,255,.055)!important;}
@media(min-width:980px){.pricing-section .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.pricing-plan.business_plus{grid-column:auto!important;}}
@media(max-width:560px){.pricing-section .pricing-grid{grid-template-columns:1fr!important;}.package-guide-card,.package-ai-note{grid-template-columns:42px minmax(0,1fr)!important;border-radius:22px!important;}}

/* v58.2: professional AI action strips and instant carousel polish */
.ai-action-pills,
.ai-question-pills,
.ai-note-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  align-items:center!important;
  margin-top:10px!important;
}
.ai-action-pills>b,
.ai-question-pills>b,
.ai-note-pills>b,
.ai-alt-strip>b{
  flex:0 0 100%!important;
  display:block!important;
  color:rgba(255,255,255,.62)!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  margin-bottom:1px!important;
}
.mini-ai-action,
.mini-ai-note{
  border:1px solid rgba(32,242,214,.22)!important;
  background:linear-gradient(135deg,rgba(32,242,214,.12),rgba(255,255,255,.06))!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:8px 10px!important;
  font-weight:950!important;
  font-size:11px!important;
  line-height:1.15!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.mini-ai-action{
  border-color:rgba(32,242,214,.32)!important;
  background:linear-gradient(135deg,rgba(32,242,214,.18),rgba(255,47,126,.10))!important;
}
.ai-results-title{
  margin:13px 2px 8px!important;
  color:rgba(255,255,255,.66)!important;
  font-size:11px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.media-wrap.carousel .media-main,
.detail-media .detail-main{
  will-change:opacity,transform!important;
  backface-visibility:hidden!important;
}

/* v58.4: keep media glass alive while the next photo decodes. No blank frame between carousel slides. */
.media-wrap.carousel.quick-swap .media-main,
.media-wrap.carousel.is-changing .media-main,
.media-wrap.carousel.is-preloading .media-main {
  opacity: 1 !important;
  transform: translateZ(0) scale(1) !important;
}
.media-wrap.carousel.quick-swap .media-main { animation: vcQuickPhotoSwap .16s ease-out; }
.detail-media.quick-swap .detail-main,
.detail-media.is-changing .detail-main,
.detail-media.is-preloading .detail-main {
  opacity: 1 !important;
  transform: translateZ(0) scale(1) !important;
}
.detail-media.quick-swap .detail-main { animation: vcQuickPhotoSwap .16s ease-out; }
@keyframes vcQuickPhotoSwap {
  from { transform: translateZ(0) scale(.998); }
  to { transform: translateZ(0) scale(1); }
}

/* v60: AI Flyer Studio for seller/shop offerings */
#flyerSheet .sheet-card.flyer-card{
  max-height:92dvh!important;
  overflow:auto!important;
}
.flyer-card{
  border-color:rgba(32,242,214,.18)!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(32,242,214,.14),transparent 32%),
    radial-gradient(circle at 84% 8%,rgba(255,47,126,.12),transparent 30%),
    rgba(7,11,18,.96)!important;
}
.flyer-intro{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  margin:0 0 14px!important;
  padding:14px!important;
  border-radius:22px!important;
  border:1px solid rgba(32,242,214,.18)!important;
  background:linear-gradient(135deg,rgba(32,242,214,.11),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.flyer-intro>span{
  width:48px!important;
  height:48px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#23f0d8,#ff3f86)!important;
  color:#061114!important;
  box-shadow:0 14px 35px rgba(32,242,214,.16)!important;
}
.flyer-intro b{display:block!important;font-weight:1000!important;color:#fff!important;}
.flyer-intro small,.flyer-intro em{display:block!important;color:rgba(255,255,255,.7)!important;font-style:normal!important;line-height:1.35!important;}
.flyer-intro em{font-size:11px!important;color:rgba(35,240,216,.84)!important;margin-top:3px!important;}
.flyer-studio-grid{display:grid!important;gap:16px!important;align-items:start!important;}
.flyer-controls,.flyer-preview-panel{display:grid!important;gap:12px!important;min-width:0!important;}
.flyer-control-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.flyer-control-row label,.flyer-field-stack label,.flyer-caption-box{display:grid!important;gap:6px!important;min-width:0!important;}
.flyer-control-row small,.flyer-field-stack small,.flyer-caption-box small,.flyer-picker-head small{color:rgba(255,255,255,.58)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.03em!important;}
.flyer-control-row select,.flyer-field-stack input,.flyer-field-stack textarea,.flyer-caption-box textarea{
  width:100%!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  border-radius:16px!important;
  padding:12px 13px!important;
  outline:none!important;
  font-weight:850!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.flyer-control-row select option{background:#0b111b!important;color:#fff!important;}
.flyer-field-stack{display:grid!important;gap:10px!important;}
.flyer-field-stack textarea{min-height:76px!important;resize:vertical!important;line-height:1.35!important;}
.flyer-caption-box textarea{min-height:86px!important;resize:vertical!important;line-height:1.35!important;color:rgba(255,255,255,.84)!important;}
.flyer-picker-head,.flyer-showroom-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
}
.flyer-picker-head b,.flyer-showroom-head h3{color:#fff!important;font-weight:1000!important;}
.flyer-showroom-head>div{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:wrap!important;}
.flyer-generate-btn{
  min-height:38px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  background:linear-gradient(135deg,#23f0d8,#26ee97)!important;
  color:#061114!important;
  box-shadow:0 16px 34px rgba(35,240,216,.16)!important;
}
.flyer-product-picker{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;
  gap:10px!important;
  max-height:268px!important;
  overflow:auto!important;
  padding:1px 4px 2px 1px!important;
  scrollbar-color:rgba(35,240,216,.72) rgba(255,255,255,.08)!important;
}
.flyer-pick{
  position:relative!important;
  display:grid!important;
  gap:7px!important;
  padding:8px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.06)!important;
  cursor:pointer!important;
  min-width:0!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.flyer-pick:hover{transform:translateY(-1px)!important;border-color:rgba(35,240,216,.32)!important;}
.flyer-pick.active{border-color:rgba(35,240,216,.92)!important;background:rgba(35,240,216,.12)!important;box-shadow:0 0 0 2px rgba(35,240,216,.12),0 16px 36px rgba(0,0,0,.2)!important;}
.flyer-pick input{position:absolute!important;opacity:0!important;pointer-events:none!important;}
.flyer-pick span{height:92px!important;border-radius:14px!important;overflow:hidden!important;background:rgba(0,0,0,.25)!important;}
.flyer-pick img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
.flyer-pick b{color:#fff!important;font-size:12px!important;line-height:1.14!important;font-weight:1000!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.flyer-pick small{color:rgba(35,240,216,.9)!important;font-size:11px!important;font-weight:1000!important;}
.flyer-note{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:10px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;background:rgba(255,255,255,.045)!important;color:rgba(255,255,255,.68)!important;}
.flyer-note span{width:34px!important;height:34px!important;border-radius:13px!important;display:grid!important;place-items:center!important;background:rgba(35,240,216,.13)!important;color:#23f0d8!important;}
.flyer-note small{line-height:1.35!important;font-weight:750!important;}
.flyer-actions-row,.flyer-export-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
.flyer-export-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.flyer-actions-row button,.flyer-export-actions button,.flyer-caption-box button{min-height:42px!important;border-radius:16px!important;font-weight:1000!important;}
.flyer-canvas-shell{
  display:grid!important;
  place-items:center!important;
  min-height:420px!important;
  padding:12px!important;
  border-radius:26px!important;
  border:1px solid rgba(32,242,214,.16)!important;
  background:radial-gradient(circle at 50% 0,rgba(35,240,216,.14),transparent 34%),rgba(0,0,0,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  overflow:auto!important;
}
#flyerCanvas{
  width:100%!important;
  max-width:640px!important;
  max-height:62dvh!important;
  object-fit:contain!important;
  border-radius:20px!important;
  box-shadow:0 28px 70px rgba(0,0,0,.38)!important;
  background:#071114!important;
}
@media(min-width:1100px){
  #flyerSheet .sheet-card.flyer-card{width:min(1180px,calc(100vw - 340px))!important;max-width:min(1180px,calc(100vw - 340px))!important;}
  .flyer-studio-grid{grid-template-columns:minmax(320px,430px) minmax(0,1fr)!important;}
  .flyer-product-picker{max-height:304px!important;}
  #flyerCanvas{max-height:68dvh!important;max-width:720px!important;}
}
@media(max-width:720px){
  .flyer-control-row,.flyer-actions-row,.flyer-export-actions{grid-template-columns:1fr!important;}
  .flyer-product-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .flyer-showroom-head{align-items:flex-start!important;}
  .flyer-showroom-head>div{width:100%!important;justify-content:space-between!important;}
  .flyer-canvas-shell{min-height:300px!important;padding:8px!important;border-radius:20px!important;}
  #flyerCanvas{border-radius:16px!important;max-height:58dvh!important;}
}

/* v60: lighter feed media, sharper text and hands-free shop rotation polish */
.reel-card::before{
  height:34%!important;
  background:
    radial-gradient(ellipse at 14% 82%, rgba(0,0,0,.54), rgba(0,0,0,.22) 36%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 28%, rgba(0,0,0,.38) 74%, rgba(0,0,0,.66) 100%)!important;
  opacity:.86!important;
}
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.015) 35%, rgba(0,0,0,.045) 58%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 47%, rgba(0,0,0,.06))!important;
}
.card-info::before{
  left:-18px!important;
  right:-26px!important;
  bottom:-14px!important;
  height:calc(100% + 30px)!important;
  background:
    radial-gradient(ellipse at 12% 68%, rgba(0,0,0,.68), rgba(0,0,0,.34) 44%, transparent 72%),
    linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.16) 62%, transparent 100%)!important;
  filter:blur(12px)!important;
  opacity:.86!important;
}
.card-info .seller-line{
  background:rgba(2,5,8,.48)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.card-info h1{
  text-shadow:0 2px 0 rgba(0,0,0,.56),0 8px 22px rgba(0,0,0,.86),0 0 2px rgba(0,0,0,.90)!important;
  -webkit-text-stroke:.28px rgba(0,0,0,.52)!important;
}
.card-info p{
  color:#fff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.62),0 5px 16px rgba(0,0,0,.84)!important;
  background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.08), transparent)!important;
  border-radius:12px!important;
  padding:2px 6px 2px 0!important;
}
.reel-card.is-active .media-wrap.carousel .feed-photo-count{
  background:rgba(0,0,0,.52)!important;
  border-color:rgba(255,255,255,.18)!important;
  backdrop-filter:blur(12px) saturate(1.06)!important;
}
@media (min-width:760px){
  .reel-card::before{height:30%!important;opacity:.78!important;}
  .card-info::before{opacity:.80!important;filter:blur(13px)!important;}
}
@media (max-height:710px){
  .reel-card::before{height:38%!important;}
  .card-info::before{opacity:.88!important;}
}

/* v60: readable-light feed captions, auto-showroom feel, and professional Flyer Studio polish */
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.02) 34%,rgba(0,0,0,.06) 58%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.70) 100%),
    radial-gradient(ellipse at 15% 83%,rgba(0,0,0,.58),rgba(0,0,0,.26) 38%,transparent 70%)!important;
}
.reel-card::before{
  height:36%!important;
  background:
    radial-gradient(ellipse at 16% 76%,rgba(0,0,0,.58),rgba(0,0,0,.24) 36%,transparent 68%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,.42) 74%,rgba(0,0,0,.66) 100%)!important;
}
.card-glow{opacity:.48!important;}
.card-info::before{
  left:-20px!important;
  right:-18px!important;
  bottom:-18px!important;
  height:calc(100% + 34px)!important;
  opacity:.72!important;
  filter:blur(12px)!important;
  background:
    radial-gradient(ellipse at 18% 55%,rgba(0,0,0,.74),rgba(0,0,0,.30) 45%,transparent 76%),
    linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.18) 62%,transparent 100%)!important;
}
.card-info h1{
  text-shadow:0 4px 18px rgba(0,0,0,.92),0 1px 1px rgba(0,0,0,.88),0 0 2px rgba(0,0,0,.9)!important;
  -webkit-text-stroke:.18px rgba(0,0,0,.48)!important;
}
.card-info p{
  color:rgba(255,255,255,.97)!important;
  line-height:1.36!important;
  text-shadow:0 3px 14px rgba(0,0,0,.95),0 1px 1px rgba(0,0,0,.88),0 0 2px rgba(0,0,0,.9)!important;
}
.feed-photo-count{
  background:rgba(4,7,10,.62)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
}
.media-dots{
  background:rgba(2,4,7,.42)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  backdrop-filter:blur(14px)!important;
}
@media(min-width:1100px){
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.01) 42%,rgba(0,0,0,.08) 64%,rgba(0,0,0,.32) 83%,rgba(0,0,0,.62) 100%),
      radial-gradient(ellipse at 15% 84%,rgba(0,0,0,.54),rgba(0,0,0,.22) 36%,transparent 72%)!important;
  }
  .reel-card::before{
    left:clamp(315px,21vw,410px)!important;
    right:clamp(270px,19vw,380px)!important;
    bottom:34px!important;
    height:34%!important;
    border-radius:0 0 16px 16px!important;
    background:
      radial-gradient(ellipse at 17% 78%,rgba(0,0,0,.50),rgba(0,0,0,.20) 38%,transparent 70%),
      linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.38) 100%)!important;
  }
  .card-info p{font-size:16px!important;max-height:58px!important;-webkit-line-clamp:3!important;}
  .card-info h1{line-height:1.01!important;}
}

.flyer-profile-btn{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#23f0d8,#26ee97)!important;
  color:#041011!important;
  box-shadow:0 16px 34px rgba(35,240,216,.18)!important;
  white-space:nowrap!important;
}
.flyer-profile-btn svg{width:17px!important;height:17px!important;}
.flyer-body{display:grid!important;gap:14px!important;}
.flyer-studio-hero{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:13px!important;
  align-items:center!important;
  padding:14px!important;
  border-radius:24px!important;
  border:1px solid rgba(35,240,216,.22)!important;
  background:linear-gradient(135deg,rgba(35,240,216,.13),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.18)!important;
}
.flyer-studio-hero>span{
  width:52px!important;height:52px!important;border-radius:19px!important;display:grid!important;place-items:center!important;
  color:#eafffb!important;background:linear-gradient(135deg,rgba(35,240,216,.24),rgba(255,47,126,.14))!important;border:1px solid rgba(255,255,255,.14)!important;
}
.flyer-studio-hero b{display:block!important;color:#fff!important;font-size:18px!important;font-weight:1000!important;letter-spacing:-.03em!important;}
.flyer-studio-hero small,.flyer-studio-hero em{display:block!important;color:rgba(255,255,255,.68)!important;line-height:1.36!important;margin-top:3px!important;font-style:normal!important;}
.flyer-control-grid,.flyer-copy-fields{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.flyer-copy-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.flyer-field,.flyer-control-grid label,.flyer-copy-fields label{
  display:grid!important;gap:6px!important;padding:10px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.045)!important;
}
.flyer-field small,.flyer-control-grid small,.flyer-copy-fields small{color:rgba(35,240,216,.88)!important;font-weight:1000!important;font-size:11px!important;}
.flyer-field input,.flyer-control-grid select,.flyer-copy-fields input,.flyer-copy-fields textarea{
  width:100%!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:15px!important;background:rgba(0,0,0,.22)!important;color:#fff!important;min-height:42px!important;padding:10px 12px!important;font-weight:850!important;outline:none!important;
}
.flyer-copy-fields textarea{min-height:70px!important;resize:vertical!important;}
.flyer-ai-copy,.flyer-switches,.flyer-products-head,.flyer-preview-wrap{
  border:1px solid rgba(255,255,255,.10)!important;border-radius:22px!important;background:rgba(255,255,255,.05)!important;padding:12px!important;
}
.flyer-ai-copy{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:10px!important;align-items:center!important;}
.flyer-ai-copy small,.flyer-products-head small{color:rgba(255,255,255,.62)!important;line-height:1.35!important;}
.flyer-switches{display:flex!important;align-items:center!important;gap:13px!important;flex-wrap:wrap!important;}
.flyer-switches b,.flyer-products-head b{color:#fff!important;font-weight:1000!important;}
.flyer-switches label{display:inline-flex!important;align-items:center!important;gap:7px!important;color:rgba(255,255,255,.78)!important;font-weight:850!important;}
.flyer-products-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
.flyer-products-head em{font-style:normal!important;color:#041011!important;background:#23f0d8!important;border-radius:999px!important;padding:7px 10px!important;font-weight:1000!important;}
.flyer-product-picker{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(165px,1fr))!important;gap:10px!important;max-height:300px!important;overflow:auto!important;padding:2px!important;}
.flyer-product-pick{position:relative!important;display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;padding:8px!important;border-radius:19px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.055)!important;cursor:pointer!important;transition:transform .15s ease,border-color .15s ease,background .15s ease!important;}
.flyer-product-pick:hover{transform:translateY(-1px)!important;border-color:rgba(35,240,216,.36)!important;}
.flyer-product-pick:has(input:checked){border-color:rgba(35,240,216,.92)!important;background:rgba(35,240,216,.12)!important;box-shadow:0 0 0 2px rgba(35,240,216,.10)!important;}
.flyer-product-pick input{position:absolute!important;opacity:0!important;pointer-events:none!important;}
.flyer-product-pick img{width:70px!important;height:70px!important;border-radius:15px!important;object-fit:cover!important;background:rgba(0,0,0,.24)!important;}
.flyer-product-pick b{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;color:#fff!important;font-weight:1000!important;font-size:12.5px!important;line-height:1.18!important;}
.flyer-product-pick small{display:block!important;color:rgba(35,240,216,.86)!important;font-size:11px!important;font-weight:900!important;margin-top:3px!important;}
.flyer-preview-wrap{display:grid!important;place-items:center!important;gap:10px!important;background:radial-gradient(circle at 50% 0,rgba(35,240,216,.12),transparent 34%),rgba(0,0,0,.18)!important;}
.flyer-preview-wrap canvas{width:100%!important;max-width:620px!important;max-height:64dvh!important;object-fit:contain!important;border-radius:22px!important;box-shadow:0 26px 70px rgba(0,0,0,.40)!important;background:#071114!important;}
.flyer-status{justify-self:stretch!important;text-align:center!important;color:rgba(255,255,255,.72)!important;font-weight:900!important;font-size:12px!important;}
.flyer-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
.flyer-actions button{min-height:44px!important;border-radius:17px!important;font-weight:1000!important;}
@media(min-width:1100px){
  #flyerSheet .flyer-card{width:min(1160px,calc(100vw - 340px))!important;max-width:min(1160px,calc(100vw - 340px))!important;}
  .flyer-body{grid-template-columns:minmax(330px,460px) minmax(0,1fr)!important;align-items:start!important;}
  .flyer-studio-hero,.flyer-control-grid,.flyer-field,.flyer-ai-copy,.flyer-copy-fields,.flyer-switches,.flyer-products-head,.flyer-product-picker{grid-column:1!important;}
  .flyer-preview-wrap,.flyer-actions{grid-column:2!important;}
  .flyer-preview-wrap{grid-row:1 / span 7!important;min-height:620px!important;}
}
@media(max-width:720px){
  .flyer-control-grid,.flyer-copy-fields,.flyer-actions{grid-template-columns:1fr!important;}
  .flyer-ai-copy{grid-template-columns:1fr!important;}
  .flyer-product-picker{grid-template-columns:1fr!important;max-height:260px!important;}
  .flyer-preview-wrap canvas{max-height:58dvh!important;}
}

/* v60.0.0 final tune: keep the photo bright, keep the caption readable */
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.045) 62%,rgba(0,0,0,.20) 82%,rgba(0,0,0,.44) 100%),
    radial-gradient(ellipse at 15% 84%,rgba(0,0,0,.40),rgba(0,0,0,.15) 38%,transparent 74%)!important;
}
.reel-card::before{
  height:30%!important;
  opacity:.66!important;
  background:
    radial-gradient(ellipse at 17% 78%,rgba(0,0,0,.42),rgba(0,0,0,.17) 38%,transparent 72%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.055) 42%,rgba(0,0,0,.28) 100%)!important;
}
.card-info::before{
  left:-16px!important;
  right:auto!important;
  width:min(650px,calc(100% + 58px))!important;
  bottom:-13px!important;
  height:calc(100% + 28px)!important;
  opacity:.80!important;
  filter:blur(10px)!important;
  border-radius:26px!important;
  background:
    radial-gradient(ellipse at 15% 50%,rgba(0,0,0,.78),rgba(0,0,0,.33) 46%,transparent 78%),
    linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.22) 68%,transparent 100%)!important;
}
.card-info .seller-line{
  background:rgba(2,5,8,.42)!important;
}
.card-info h1{
  text-shadow:0 2px 1px rgba(0,0,0,.78),0 7px 21px rgba(0,0,0,.88),0 0 2px rgba(0,0,0,.88)!important;
}
.card-info p{
  background:transparent!important;
  color:rgba(255,255,255,.98)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.84),0 5px 17px rgba(0,0,0,.94),0 0 2px rgba(0,0,0,.90)!important;
}
@media(min-width:1100px){
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,.04) 66%,rgba(0,0,0,.18) 84%,rgba(0,0,0,.38) 100%),
      radial-gradient(ellipse at 15% 84%,rgba(0,0,0,.36),rgba(0,0,0,.12) 36%,transparent 74%)!important;
  }
  .reel-card::before{height:28%!important;opacity:.58!important;}
  .card-info::before{opacity:.76!important;width:min(670px,calc(100% + 70px))!important;}
}

/* v60 final polish: keep the picture bright, keep the words crisp */
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.006) 43%,rgba(0,0,0,.04) 66%,rgba(0,0,0,.25) 84%,rgba(0,0,0,.52) 100%),
    radial-gradient(ellipse at 14% 86%,rgba(0,0,0,.46),rgba(0,0,0,.18) 38%,transparent 72%)!important;
}
.reel-card::before{
  height:30%!important;
  opacity:.66!important;
  background:
    radial-gradient(ellipse at 16% 78%,rgba(0,0,0,.44),rgba(0,0,0,.16) 38%,transparent 70%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.28) 100%)!important;
}
.card-info::before{
  opacity:.62!important;
  filter:blur(10px)!important;
  background:
    radial-gradient(ellipse at 16% 58%,rgba(0,0,0,.60),rgba(0,0,0,.24) 45%,transparent 78%),
    linear-gradient(90deg,rgba(0,0,0,.40),rgba(0,0,0,.12) 62%,transparent 100%)!important;
}
.card-info h1{
  text-shadow:0 3px 16px rgba(0,0,0,.94),0 1px 1px rgba(0,0,0,.92),0 0 2px rgba(0,0,0,.95)!important;
  -webkit-text-stroke:.22px rgba(0,0,0,.52)!important;
}
.card-info p{
  background:transparent!important;
  color:rgba(255,255,255,.98)!important;
  text-shadow:0 3px 14px rgba(0,0,0,.96),0 1px 1px rgba(0,0,0,.90),0 0 2px rgba(0,0,0,.92)!important;
}
@media(min-width:1100px){
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.004) 46%,rgba(0,0,0,.035) 68%,rgba(0,0,0,.22) 84%,rgba(0,0,0,.46) 100%),
      radial-gradient(ellipse at 13% 86%,rgba(0,0,0,.42),rgba(0,0,0,.14) 38%,transparent 74%)!important;
  }
  .reel-card::before{height:28%!important;opacity:.58!important;}
  .card-info::before{opacity:.56!important;}
}

/* v60.0.0 showcase motion: next shop arrives gently without dimming the product photo */
.reel-card.auto-advancing .media-wrap img{transform:scale(1.012)!important;transition:transform .72s cubic-bezier(.2,.8,.2,1),filter .72s ease!important;}
.reel-card.auto-advancing .card-info{animation:vcShowcaseCaptionIn .58s cubic-bezier(.2,.8,.2,1) both!important;}
@keyframes vcShowcaseCaptionIn{from{opacity:.88;transform:translateY(10px) scale(.992);}to{opacity:1;transform:translateY(0) scale(1);}}

/* v60: lighter photo layer, sharper text, and desktop auto-showcase polish */
.media-wrap.photo::after,
.media-wrap::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.015) 34%, rgba(0,0,0,.04) 58%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.58) 100%),
    radial-gradient(ellipse at 13% 82%, rgba(0,0,0,.42), rgba(0,0,0,.22) 32%, transparent 66%) !important;
}
.reel-card::before {
  height: 34% !important;
  opacity: .72 !important;
  background:
    radial-gradient(ellipse at 13% 76%, rgba(0,0,0,.46), rgba(0,0,0,.20) 34%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.48) 100%) !important;
}
.card-info {
  position: absolute !important;
  isolation: isolate !important;
  padding: 8px 10px 10px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(2,8,12,.25), rgba(2,8,12,.10)) !important;
  backdrop-filter: blur(4px) saturate(1.04) !important;
  box-shadow: none !important;
}
.card-info::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: -12px !important;
  right: -12px !important;
  top: -8px !important;
  bottom: -10px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(0,0,0,.52), rgba(0,0,0,.24) 42%, transparent 72%),
    linear-gradient(135deg, rgba(0,0,0,.32), rgba(0,0,0,.10)) !important;
  filter: blur(4px) !important;
  opacity: .82 !important;
  pointer-events: none !important;
}
.card-info .seller-line {
  background: rgba(2,8,12,.46) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.card-info h1 {
  color: #fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.88), 0 1px 1px rgba(0,0,0,.86) !important;
  filter: none !important;
}
.card-info p {
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.82), 0 1px 1px rgba(0,0,0,.82) !important;
  line-height: 1.38 !important;
  max-height: 56px !important;
}
.reel-card.auto-advancing .media-wrap {
  box-shadow: 0 0 0 2px rgba(35,240,216,.22), 0 24px 76px rgba(0,0,0,.54) !important;
}
.flyer-profile-btn .icon,
.flyer-profile-btn svg {
  width: 16px !important;
  height: 16px !important;
}
.flyer-profile-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
@media (min-width: 1100px) {
  .media-wrap.photo::after,
  .media-wrap::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.01) 44%, rgba(0,0,0,.06) 66%, rgba(0,0,0,.36) 100%),
      radial-gradient(ellipse at 15% 82%, rgba(0,0,0,.40), rgba(0,0,0,.20) 34%, transparent 70%) !important;
  }
  .reel-card::before {
    height: 28% !important;
    opacity: .62 !important;
    background:
      radial-gradient(ellipse at 15% 76%, rgba(0,0,0,.42), rgba(0,0,0,.18) 35%, transparent 70%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 58%, rgba(0,0,0,.44) 100%) !important;
  }
  .card-info {
    padding: 10px 12px 12px !important;
    background: linear-gradient(135deg, rgba(1,7,10,.20), rgba(1,7,10,.07)) !important;
  }
  .card-info::before {
    opacity: .74 !important;
    filter: blur(5px) !important;
    background:
      radial-gradient(ellipse at 17% 74%, rgba(0,0,0,.48), rgba(0,0,0,.20) 42%, transparent 76%),
      linear-gradient(135deg, rgba(0,0,0,.24), rgba(0,0,0,.08)) !important;
  }
  .card-info h1 { text-shadow: 0 3px 16px rgba(0,0,0,.86), 0 1px 1px rgba(0,0,0,.84) !important; }
  .card-info p { max-height: 50px !important; -webkit-line-clamp: 2 !important; }
}

/* v60.0.0 shipping polish: auto-shop glide without hiding the photo */
.reel-card.auto-advancing{
  animation:vcAutoShopRise .58s cubic-bezier(.2,.78,.2,1) both!important;
}
@keyframes vcAutoShopRise{
  from{transform:translateY(14px) scale(.995);filter:saturate(.96) brightness(.96);}
  to{transform:translateY(0) scale(1);filter:none;}
}
.card-info{
  isolation:isolate!important;
}
.card-info p{
  letter-spacing:-.01em!important;
  max-width:min(580px,calc(100vw - 128px))!important;
}
@media(min-width:1100px){
  .card-info p{max-width:640px!important;}
}

/* v61.0.0 TikTok-style feed polish: no heavy caption card, product stays bright */
.media-wrap.photo .media-main{
  filter:saturate(1.07) contrast(1.045) brightness(1.02)!important;
}
.media-wrap.photo .media-bg{
  opacity:.42!important;
  filter:blur(18px) saturate(1.12) brightness(.74)!important;
}
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.015) 30%,rgba(0,0,0,.03) 58%,rgba(0,0,0,.20) 76%,rgba(0,0,0,.46) 100%),
    radial-gradient(ellipse at 15% 86%,rgba(0,0,0,.34),rgba(0,0,0,.12) 38%,transparent 72%)!important;
}
.reel-card::before{
  height:26%!important;
  opacity:.48!important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.30) 100%)!important;
}
.card-glow{opacity:.42!important;height:34%!important;}
.card-info{
  background:transparent!important;
  backdrop-filter:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
  isolation:isolate!important;
}
.card-info::before{display:none!important;content:none!important;}
.card-info .seller-line{
  background:rgba(0,0,0,.30)!important;
  border-color:rgba(255,255,255,.16)!important;
  backdrop-filter:blur(10px) saturate(1.05)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.card-info h1{
  color:#fff!important;
  letter-spacing:-.065em!important;
  text-shadow:0 3px 18px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.98),0 0 1px rgba(0,0,0,.95)!important;
  -webkit-text-stroke:.16px rgba(0,0,0,.42)!important;
}
.card-info p{
  background:transparent!important;
  color:rgba(255,255,255,.96)!important;
  text-shadow:0 2px 14px rgba(0,0,0,.92),0 1px 1px rgba(0,0,0,.98)!important;
  line-height:1.34!important;
}
.badge-line .badge,
.tag-line .tag{
  backdrop-filter:blur(10px)!important;
  background:rgba(0,0,0,.30)!important;
  border-color:rgba(255,255,255,.15)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
}
.badge-line .badge.price,
.badge.price{
  color:#031114!important;
  background:linear-gradient(135deg,#23f0d8,#8fffe8)!important;
  border:0!important;
  box-shadow:0 10px 24px rgba(35,240,216,.18)!important;
}
.badge-line .badge.available,
.badge.available{
  color:#031114!important;
  background:linear-gradient(135deg,#25ee97,#b7ffd8)!important;
  border:0!important;
}
@media(max-width:720px){
  .media-wrap.photo .media-main{object-fit:cover!important;object-position:center!important;}
  .media-wrap.photo.portrait .media-main{object-fit:cover!important;}
  .media-wrap.photo.landscape .media-main{object-fit:cover!important;}
  .media-wrap.photo .media-bg{opacity:.34!important;}
  .card-info{left:16px!important;right:84px!important;bottom:calc(82px + var(--safe-bottom))!important;gap:7px!important;}
  .card-info h1{font-size:clamp(28px,8vw,39px)!important;line-height:.99!important;max-height:82px!important;}
  .card-info p{font-size:14px!important;max-height:44px!important;-webkit-line-clamp:2!important;}
}
@media(min-width:1100px){
  .media-wrap.photo .media-bg{opacity:.30!important;filter:blur(18px) brightness(.78) saturate(1.12)!important;}
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.008) 42%,rgba(0,0,0,.035) 66%,rgba(0,0,0,.22) 84%,rgba(0,0,0,.40) 100%),
      radial-gradient(ellipse at 14% 86%,rgba(0,0,0,.34),rgba(0,0,0,.13) 38%,transparent 74%)!important;
  }
  .reel-card::before{height:22%!important;opacity:.42!important;}
  .card-info{
    background:transparent!important;
    backdrop-filter:none!important;
    padding:0!important;
  }
  .card-info .seller-line{background:rgba(0,0,0,.28)!important;}
  .card-info h1{text-shadow:0 3px 18px rgba(0,0,0,.90),0 1px 2px rgba(0,0,0,.96)!important;}
  .card-info p{max-height:46px!important;-webkit-line-clamp:2!important;}
}

/* v61.0.0 Flyer Studio: clear export progress and sharper preview chrome */
.flyer-export-progress{
  display:grid!important;
  gap:8px!important;
  padding:10px 12px!important;
  border-radius:18px!important;
  border:1px solid rgba(35,240,216,.22)!important;
  background:linear-gradient(135deg,rgba(35,240,216,.13),rgba(255,63,134,.07)),rgba(0,0,0,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.flyer-export-progress[hidden]{display:none!important;}
.flyer-export-progress>div{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.flyer-export-progress b,
#flyerProgressLabel{
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  line-height:1.25!important;
}
.flyer-export-progress span,
#flyerProgressPercent{
  color:#23f0d8!important;
  font-size:12px!important;
  font-weight:1000!important;
}
.flyer-export-progress i{
  display:block!important;
  height:8px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28)!important;
}
.flyer-export-progress i span,
#flyerProgressBar{
  display:block!important;
  width:0%;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#23f0d8,#25ee97,#ff3f86)!important;
  box-shadow:0 0 16px rgba(35,240,216,.45)!important;
  transition:width .22s ease!important;
}
.flyer-canvas-shell{
  background:radial-gradient(circle at 50% 0,rgba(35,240,216,.12),transparent 32%),rgba(0,0,0,.18)!important;
}
#flyerCanvas{
  image-rendering:auto!important;
  box-shadow:0 28px 80px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.13)!important;
}
.flyer-export-actions button.loading{
  opacity:.92!important;
  transform:none!important;
}

/* v61.0.0 sharper ViConnects mark wherever the SVG is used */
.brand img,
.desktop-logo img,
.qr-logo{
  object-fit:contain!important;
  background:#061017!important;
}

/* v61.0.0 final user polish: TikTok-like readable text without a heavy black card */
.media-wrap.photo .media-main,
.media-wrap.video .media-main,
.media-wrap img.media-main,
.media-wrap video.media-main{
  filter:saturate(1.08) contrast(1.035) brightness(1.035)!important;
}
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.006) 34%,rgba(0,0,0,.018) 60%,rgba(0,0,0,.16) 80%,rgba(0,0,0,.34) 100%),
    radial-gradient(ellipse at 15% 86%,rgba(0,0,0,.24),rgba(0,0,0,.08) 38%,transparent 72%)!important;
}
.reel-card::before{
  height:24%!important;
  opacity:.36!important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.24) 100%)!important;
}
.card-info{
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
.card-info::before{display:none!important;content:none!important;}
.card-info h1{
  text-shadow:0 2px 12px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.98),0 0 1px rgba(0,0,0,.96)!important;
  -webkit-text-stroke:.12px rgba(0,0,0,.38)!important;
}
.card-info p{
  background:transparent!important;
  text-shadow:0 2px 10px rgba(0,0,0,.90),0 1px 1px rgba(0,0,0,.96)!important;
  max-height:52px!important;
}
.card-info .seller-line,
.badge-line .badge,
.tag-line .tag{
  background:rgba(0,0,0,.24)!important;
  backdrop-filter:blur(8px) saturate(1.05)!important;
  border-color:rgba(255,255,255,.14)!important;
}
.flyer-export-progress.active{
  animation:vcFlyerProgressPulse 1.1s ease-in-out infinite alternate!important;
}
@keyframes vcFlyerProgressPulse{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 rgba(35,240,216,0);}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 22px rgba(35,240,216,.18);}}

/* v61.0.0 final pass: TikTok-style readable captions without the heavy black product mask */
.media-wrap.photo .media-main,
.media-wrap.video .media-main{
  filter:saturate(1.05) contrast(1.03) brightness(1.01)!important;
}
.media-wrap.photo::after,
.media-wrap.video::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.018) 66%,rgba(0,0,0,.14) 84%,rgba(0,0,0,.32) 100%),
    radial-gradient(ellipse at 15% 86%,rgba(0,0,0,.30),rgba(0,0,0,.10) 38%,transparent 74%)!important;
}
.reel-card::before{
  height:18%!important;
  opacity:.34!important;
  background:
    radial-gradient(ellipse at 14% 80%,rgba(0,0,0,.34),rgba(0,0,0,.12) 40%,transparent 76%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.05) 52%,rgba(0,0,0,.20) 100%)!important;
}
.card-info{
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
.card-info::before{display:none!important;content:none!important;}
.card-info .seller-line{
  width:max-content!important;
  max-width:min(92%,420px)!important;
  background:rgba(0,0,0,.34)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.11)!important;
}
.card-info h1{
  color:#fff!important;
  text-shadow:0 4px 18px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.96),0 0 1px rgba(0,0,0,1)!important;
  -webkit-text-stroke:.14px rgba(0,0,0,.58)!important;
}
.card-info p{
  background:transparent!important;
  color:rgba(255,255,255,.97)!important;
  text-shadow:0 3px 14px rgba(0,0,0,.96),0 1px 1px rgba(0,0,0,.96)!important;
  line-height:1.34!important;
}
.badge-line .badge,
.tag-line .tag{
  backdrop-filter:blur(12px) saturate(1.08)!important;
  background:rgba(0,0,0,.30)!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
@media(min-width:1100px){
  .media-wrap.photo::after,
  .media-wrap.video::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,0) 48%,rgba(0,0,0,.014) 70%,rgba(0,0,0,.12) 86%,rgba(0,0,0,.28) 100%),
      radial-gradient(ellipse at 14% 86%,rgba(0,0,0,.26),rgba(0,0,0,.08) 39%,transparent 76%)!important;
  }
  .reel-card::before{height:16%!important;opacity:.30!important;}
  .card-info h1{letter-spacing:-.066em!important;}
  .card-info p{max-height:48px!important;-webkit-line-clamp:2!important;}
}
@media(max-width:720px){
  .media-wrap.photo::after,
  .media-wrap.video::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.03) 68%,rgba(0,0,0,.20) 86%,rgba(0,0,0,.42) 100%),
      radial-gradient(ellipse at 15% 86%,rgba(0,0,0,.36),rgba(0,0,0,.13) 40%,transparent 74%)!important;
  }
  .reel-card::before{height:22%!important;opacity:.42!important;}
}

/* v61.0.0 Flyer Studio final polish: export progress is unmistakable and the preview stage stays premium */
.flyer-export-progress.active{
  animation:vcFlyerProgressPulse 1.4s ease-in-out infinite!important;
}
@keyframes vcFlyerProgressPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 rgba(35,240,216,0);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px rgba(35,240,216,.12);}
}
.flyer-canvas-shell canvas,
#flyerCanvas{
  border-radius:22px!important;
}
.flyer-profile-btn{
  background:linear-gradient(135deg,rgba(35,240,216,.18),rgba(37,238,151,.10))!important;
  border-color:rgba(35,240,216,.28)!important;
}
.brand img,
.desktop-logo img,
.qr-logo{
  border-radius:12px!important;
  padding:2px!important;
  box-shadow:0 0 0 1px rgba(35,240,216,.24),0 12px 28px rgba(0,0,0,.24)!important;
}


/* v61.0.0 final pass: TikTok-like product visibility with readable captions */
.media-wrap.photo .media-main{
  filter:saturate(1.10) contrast(1.035) brightness(1.045)!important;
}
.media-wrap.photo .media-bg{
  opacity:.24!important;
  filter:blur(20px) saturate(1.08) brightness(.82)!important;
}
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.07) 0%,rgba(0,0,0,.00) 38%,rgba(0,0,0,.025) 62%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.32) 100%),
    radial-gradient(ellipse at 14% 88%,rgba(0,0,0,.25),rgba(0,0,0,.10) 39%,transparent 73%)!important;
}
.reel-card::before{
  height:20%!important;
  opacity:.34!important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.07) 68%,rgba(0,0,0,.22) 100%)!important;
}
.card-glow{opacity:.22!important;height:27%!important;}
.card-info{
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border:0!important;
  padding:0!important;
}
.card-info .seller-line{
  background:rgba(0,0,0,.22)!important;
  border-color:rgba(255,255,255,.18)!important;
  backdrop-filter:blur(9px) saturate(1.05)!important;
}
.badge-line .badge,
.tag-line .tag{
  background:rgba(0,0,0,.20)!important;
  border-color:rgba(255,255,255,.18)!important;
}
.card-info h1{
  text-shadow:0 3px 16px rgba(0,0,0,.88),0 1px 2px rgba(0,0,0,.98)!important;
}
.card-info p{
  text-shadow:0 2px 13px rgba(0,0,0,.88),0 1px 1px rgba(0,0,0,.98)!important;
}
@media(min-width:1100px){
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.045) 0%,rgba(0,0,0,.00) 44%,rgba(0,0,0,.025) 68%,rgba(0,0,0,.12) 84%,rgba(0,0,0,.28) 100%),
      radial-gradient(ellipse at 13% 88%,rgba(0,0,0,.23),rgba(0,0,0,.09) 40%,transparent 75%)!important;
  }
  .reel-card::before{height:18%!important;opacity:.30!important;}
  .card-info .seller-line{background:rgba(0,0,0,.20)!important;}
  .badge-line .badge,.tag-line .tag{background:rgba(0,0,0,.18)!important;}
}

/* v61.0.0 final pass: export buttons clearly pause while a flyer is downloading */
.flyer-export-actions button:disabled,
.flyer-export-actions button.loading{
  cursor:wait!important;
  opacity:.78!important;
  filter:saturate(.92)!important;
}
.flyer-export-progress.active{
  animation:vcFlyerProgressBreath 1.15s ease-in-out infinite alternate!important;
}
@keyframes vcFlyerProgressBreath{
  from{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 rgba(35,240,216,0);}
  to{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 28px rgba(35,240,216,.13);}
}

/* v61.0.0 final cut: no heavy caption card, product stays the hero */
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.012) 64%,rgba(0,0,0,.10) 82%,rgba(0,0,0,.28) 100%),
    radial-gradient(ellipse at 13% 87%,rgba(0,0,0,.18),rgba(0,0,0,.055) 42%,transparent 78%)!important;
}
.reel-card::before{
  height:22%!important;
  opacity:.24!important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.055) 70%,rgba(0,0,0,.18) 100%)!important;
}
.card-info{
  padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border:0!important;
}
.card-info::before{display:none!important;opacity:0!important;background:none!important;filter:none!important;}
.card-info h1{
  text-shadow:0 2px 1px rgba(0,0,0,.92),0 8px 20px rgba(0,0,0,.74),0 0 2px rgba(0,0,0,.96)!important;
  -webkit-text-stroke:.10px rgba(0,0,0,.35)!important;
}
.card-info p{
  color:rgba(255,255,255,.97)!important;
  text-shadow:0 2px 1px rgba(0,0,0,.90),0 7px 18px rgba(0,0,0,.76),0 0 2px rgba(0,0,0,.95)!important;
  max-height:55px!important;
  background:transparent!important;
}
.card-info .seller-line,
.badge-line .badge,
.tag-line .tag{
  background:rgba(4,9,13,.30)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(8px) saturate(1.08)!important;
}
.action{
  background:rgba(4,8,12,.42)!important;
  backdrop-filter:blur(12px) saturate(1.10)!important;
  border-color:rgba(255,255,255,.15)!important;
}
.action.chat,.action.live,.action.get{box-shadow:0 12px 30px rgba(0,0,0,.20)!important;}
@media(min-width:1100px){
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.055) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,.012) 68%,rgba(0,0,0,.09) 84%,rgba(0,0,0,.24) 100%),
      radial-gradient(ellipse at 14% 88%,rgba(0,0,0,.16),rgba(0,0,0,.045) 42%,transparent 80%)!important;
  }
  .reel-card::before{height:20%!important;opacity:.20!important;}
  .card-info p{max-width:min(660px,calc(100vw - 820px))!important;}
}

/* v61.0.0 Flyer Studio: product-photo cards, clear QR and visible download progress */
.flyer-canvas-shell canvas,
#flyerCanvas{
  border-radius:24px!important;
  background:#061017!important;
}
.flyer-export-progress{
  position:relative!important;
  overflow:hidden!important;
}
.flyer-export-progress::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.07) 38%,transparent 68%)!important;
  transform:translateX(-120%)!important;
  animation:vcFlyerProgressSweep 1.45s linear infinite!important;
}
@keyframes vcFlyerProgressSweep{to{transform:translateX(120%);}}
.flyer-export-actions button[aria-busy="true"],
.flyer-export-actions button.loading{
  opacity:.96!important;
  cursor:progress!important;
}
.flyer-pick,
.flyer-product-pick{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.13)!important;
}
.flyer-pick.active,
.flyer-product-pick:has(input:checked){
  background:rgba(35,240,216,.13)!important;
  border-color:rgba(35,240,216,.72)!important;
  box-shadow:0 0 0 2px rgba(35,240,216,.10),0 12px 28px rgba(0,0,0,.18)!important;
}

/* v63.0.0 Long Flyer Studio + mobile photo fit polish */
.flyer-control-row.flyer-control-row-three{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.flyer-control-row input[readonly]{
  cursor:default!important;
  color:rgba(255,255,255,.88)!important;
  background:linear-gradient(135deg,rgba(35,240,216,.10),rgba(255,255,255,.055))!important;
}
.flyer-product-picker{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;
  max-height:360px!important;
}
.flyer-pick{
  min-height:184px!important;
}
.flyer-pick span{
  height:118px!important;
  background:radial-gradient(circle at 50% 18%,rgba(35,240,216,.10),transparent 48%),rgba(255,255,255,.08)!important;
}
.flyer-pick img{
  object-fit:contain!important;
  padding:3px!important;
  background:rgba(255,255,255,.92)!important;
}
.flyer-canvas-shell{
  min-height:min(760px,78dvh)!important;
  align-items:start!important;
}
#flyerCanvas{
  max-height:none!important;
  height:auto!important;
  max-width:min(720px,100%)!important;
}
@media(min-width:1100px){
  #flyerSheet .sheet-card.flyer-card{width:min(1260px,calc(100vw - 310px))!important;max-width:min(1260px,calc(100vw - 310px))!important;}
  .flyer-studio-grid{grid-template-columns:minmax(360px,460px) minmax(0,1fr)!important;}
  .flyer-product-picker{max-height:390px!important;}
  .flyer-canvas-shell{max-height:78dvh!important;overflow:auto!important;}
}
@media(max-width:720px){
  .flyer-control-row.flyer-control-row-three{grid-template-columns:1fr!important;}
  .flyer-product-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:330px!important;}
  .flyer-pick{min-height:172px!important;}
  .flyer-pick span{height:108px!important;}
  .flyer-canvas-shell{max-height:64dvh!important;overflow:auto!important;align-items:start!important;}
  #flyerCanvas{width:100%!important;max-width:100%!important;}
}

/* Mobile feed: never over-zoom product photos. The blurred background fills empty space, the main photo stays complete. */
@media(max-width:719px){
  .media-wrap.photo .media-main,
  .media-wrap.photo.portrait .media-main,
  .media-wrap.photo.landscape .media-main,
  .media-wrap.photo.squareish .media-main,
  .media-wrap.carousel .media-main{
    object-fit:contain!important;
    object-position:center center!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    transform:none!important;
    padding:0!important;
  }
  .media-wrap.photo .media-bg{
    opacity:.34!important;
    filter:blur(24px) saturate(1.12) brightness(.66)!important;
    transform:scale(1.06)!important;
  }
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.055) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.02) 66%,rgba(0,0,0,.13) 84%,rgba(0,0,0,.30) 100%),
      radial-gradient(ellipse at 13% 88%,rgba(0,0,0,.24),rgba(0,0,0,.08) 42%,transparent 78%)!important;
  }
  .reel-card::before{height:20%!important;opacity:.25!important;}
  .card-info h1{font-size:clamp(28px,8.8vw,38px)!important;line-height:.98!important;}
  .card-info p{font-size:14px!important;line-height:1.32!important;max-height:58px!important;}
}

/* v63.0.0 Domain move polish: bright TikTok-style feed, no title clipping, hands-free mobile showcase, cleaner long flyers */
.media-wrap.photo .media-main,
.media-wrap.carousel .media-main{
  object-fit:contain!important;
  object-position:center center!important;
}
.media-wrap.photo .media-bg,
.media-wrap.carousel .media-bg{
  opacity:.42!important;
  filter:blur(22px) saturate(1.15) brightness(.70)!important;
}
.media-wrap.photo::after,
.media-wrap::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.025) 66%,rgba(0,0,0,.15) 84%,rgba(0,0,0,.36) 100%),
    radial-gradient(ellipse at 13% 86%,rgba(0,0,0,.32),rgba(0,0,0,.12) 40%,transparent 74%)!important;
}
.reel-card::before{
  height:25%!important;
  opacity:.46!important;
  background:
    radial-gradient(ellipse at 16% 80%,rgba(0,0,0,.36),rgba(0,0,0,.13) 40%,transparent 72%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.035) 48%,rgba(0,0,0,.22) 100%)!important;
}
.card-info{
  overflow:visible!important;
  bottom:calc(84px + var(--safe-bottom))!important;
}
.card-info::before{
  opacity:.54!important;
  filter:blur(9px)!important;
  width:min(690px,calc(100% + 62px))!important;
  background:
    radial-gradient(ellipse at 16% 58%,rgba(0,0,0,.54),rgba(0,0,0,.22) 46%,transparent 78%),
    linear-gradient(90deg,rgba(0,0,0,.33),rgba(0,0,0,.10) 66%,transparent 100%)!important;
}
.card-info h1{
  line-height:1.065!important;
  max-height:132px!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  padding-bottom:7px!important;
  margin-bottom:-3px!important;
  text-shadow:0 2px 1px rgba(0,0,0,.82),0 7px 22px rgba(0,0,0,.90),0 0 2px rgba(0,0,0,.92)!important;
}
.card-info p{
  line-height:1.36!important;
  max-height:68px!important;
  -webkit-line-clamp:3!important;
  text-shadow:0 2px 1px rgba(0,0,0,.84),0 6px 18px rgba(0,0,0,.92)!important;
}
@media(max-width:719px){
  .card-info{left:16px!important;right:78px!important;bottom:calc(82px + var(--safe-bottom))!important;}
  .card-info h1{font-size:clamp(27px,8.4vw,36px)!important;line-height:1.055!important;max-height:122px!important;padding-bottom:8px!important;}
  .card-info p{font-size:14px!important;line-height:1.34!important;max-height:64px!important;}
  .card-info::before{opacity:.50!important;filter:blur(8px)!important;}
  .reel-card::before{height:18%!important;opacity:.22!important;}
}
@media(min-width:1100px){
  .card-info h1{font-size:clamp(28px,2.45vw,40px)!important;line-height:1.055!important;max-height:132px!important;}
  .card-info p{font-size:15.5px!important;line-height:1.38!important;max-height:70px!important;}
  .reel-card::before{height:25%!important;opacity:.42!important;}
  .media-wrap.photo::after,
  .media-wrap::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.055) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,.022) 68%,rgba(0,0,0,.13) 84%,rgba(0,0,0,.30) 100%),
      radial-gradient(ellipse at 15% 86%,rgba(0,0,0,.30),rgba(0,0,0,.10) 38%,transparent 74%)!important;
  }
}
.flyer-canvas-shell{
  background:radial-gradient(circle at 50% 0,rgba(35,240,216,.12),transparent 34%),rgba(1,6,10,.42)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 70px rgba(0,0,0,.30)!important;
}
#flyerCanvas{
  border-radius:24px!important;
  box-shadow:0 22px 60px rgba(0,0,0,.36)!important;
  image-rendering:auto!important;
}
.flyer-product-picker{max-height:430px!important;}
.flyer-pick{min-height:190px!important;}
.flyer-pick span{height:124px!important;}
.flyer-export-progress.active{outline:1px solid rgba(35,240,216,.26)!important;}
@media(min-width:1100px){
  #flyerSheet .sheet-card.flyer-card{width:min(1320px,calc(100vw - 260px))!important;max-width:min(1320px,calc(100vw - 260px))!important;}
  .flyer-studio-grid{grid-template-columns:minmax(370px,470px) minmax(0,1fr)!important;}
  #flyerCanvas{max-width:min(760px,100%)!important;}
}
@media(max-width:720px){
  .flyer-canvas-shell{max-height:70dvh!important;overflow:auto!important;}
  #flyerCanvas{width:100%!important;max-width:100%!important;}
  .flyer-product-picker{max-height:360px!important;}
}