/* ===== Jimbo Social ===== */
.js-page { --js-r: 14px; --js-card: var(--color-surface); --js-line: var(--color-border); --js-mut: var(--color-text-muted); --js-hi: color-mix(in oklab, var(--amber) 16%, transparent); }
.js-page body, body.js-page { background: var(--color-bg); }
.js-i { width: 20px; height: 20px; flex: none; }
.js-ver { width: 16px; height: 16px; color: var(--amber); margin-left: 4px; vertical-align: -2px; flex: none; }
.js-ver--blue { color: #2f6bff; }
.js-elite { margin-left: 6px; color: #2f6bff; font: 800 12px/1 var(--font-display); letter-spacing: .04em; vertical-align: 1px; }
.jc { position: fixed; inset: 0; z-index: 120; display: grid; align-content: end; gap: 14px; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); background: rgba(8, 10, 14, .92); color: #fff; }
body:has(#jcSheet:not([hidden])) .jrt { visibility: hidden; }
.jc[hidden] { display: none; }
.jc__who { display: grid; justify-items: center; gap: 8px; margin-bottom: 8px; text-align: center; }
.jc__who b { font: 800 28px/1.1 var(--font-display); }
.jc__who small { color: #c9d4e4; font-size: 15px; }
.jc__note { max-width: 34rem; margin: 0 auto; color: #c9d4e4; font-size: 14px; line-height: 1.45; text-align: center; }
.jc__row { display: flex; justify-content: center; gap: 12px; }
.jc__btn { min-width: 128px; min-height: 52px; border: 0; border-radius: 999px; background: #2a3342; color: #fff; font: 700 16px/1 var(--font-display); cursor: pointer; }
.jc__btn--go { background: #1f8a4c; }
.jc__btn--no { background: #c43838; }
.js-link { background: none; border: 0; padding: 0; color: var(--color-accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.js-fine { font-size: var(--text-xs); color: var(--js-mut); line-height: 1.5; }
.js-lock { overflow: hidden; }
.btn.btn--ghost-d { border: 1px solid var(--color-border); color: var(--color-text); background: transparent; }
.btn.btn--ghost-d:hover { border-color: var(--color-text); }
.js-wide { width: 100%; justify-content: center; }

/* hero */
.js-hero { position: relative; overflow: hidden; background: #0d0e0f; color: #fff; padding: calc(76px + 2.25rem) 0 2rem; }
.js-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% 10%, rgb(245 166 35 / .22), transparent 60%), radial-gradient(40% 60% at 10% 100%, rgb(45 212 191 / .10), transparent 70%); pointer-events: none; }
.js-hero__road { position: absolute; right: -40px; bottom: -10px; width: min(52vw, 640px); opacity: .9; pointer-events: none; }
.js-hero__road path { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 2; }
.js-hero__road .dash { stroke: var(--amber); stroke-width: 3; stroke-dasharray: 18 22; animation: jsDash 2.4s linear infinite; opacity: .8; }
@keyframes jsDash { to { stroke-dashoffset: -80; } }
.js-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: end; }
.js-hero__in > :not(.js-hero__stats) { grid-column: 1; }
.js-hero__in > .js-hero__stats { grid-column: 2; grid-row: 1 / span 4; align-self: end; }
.js-hero .eyebrow { color: var(--amber); margin: 0; display: flex; align-items: center; gap: .6rem; }
.js-hero h1 { font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem); line-height: .95; letter-spacing: -.01em; }
.js-hero h1 span { color: var(--amber); }
.js-hero p.lede { font-size: var(--text-base); color: rgb(255 255 255 / .82); max-width: 58ch; line-height: 1.5; }
.js-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.js-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); gap: 1.25rem 2rem; padding: 1.1rem 1.4rem; border: 1px solid rgb(255 255 255 / .12); border-radius: 14px; background: rgb(255 255 255 / .04); backdrop-filter: blur(6px); }
.js-hero__stats:empty { display: none; }
.js-hero__stats div { display: grid; }
.js-hero__stats b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.js-hero__stats small { font-size: var(--text-xs); color: rgb(255 255 255 / .62); text-transform: uppercase; letter-spacing: .1em; margin-top: .35rem; }

/* toolbar */
.js-top { position: sticky; top: 0; transition: top .35s var(--ease); z-index: 30; background: color-mix(in oklab, var(--color-bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--js-line); }
.js-top__in { display: flex; align-items: center; gap: 1rem; height: 62px; }
.js-logo { display: flex; align-items: center; gap: .55rem; color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.js-logo svg { width: 32px; height: 32px; }
.js-logo b { font-weight: 900; }
.js-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: .5rem; background: var(--color-surface-2); border: 1px solid var(--js-line); border-radius: 999px; padding: 0 .9rem; height: 40px; color: var(--js-mut); }
.js-search:focus-within { border-color: var(--amber); }
.js-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-text); font: inherit; font-size: .95rem; outline: none; }
.js-top__r { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.js-live { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-xs); color: var(--js-mut); white-space: nowrap; font-weight: 600; }
.js-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / .6); animation: jsPing 2s infinite; }
@keyframes jsPing { 70% { box-shadow: 0 0 0 7px rgb(34 197 94 / 0); } 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); } }
.js-live b { color: var(--color-text); }
.js-top .js-live { margin-right: .4rem; }
.js-iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--color-text); cursor: pointer; text-decoration: none; flex: none; }
.js-iconbtn:hover { background: var(--color-surface-2); }
.js-iconbtn.is-on { background: var(--amber); color: #141414; }
.js-dot { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1; border: 2px solid var(--color-bg); }
.js-dot:empty { min-width: 12px; height: 12px; padding: 0; }
.js-mebtn { display: block; border-radius: 50%; }
.js-mebtn .js-av { display: block; }
.js-av { border-radius: 50%; object-fit: cover; background: var(--color-surface-2); flex: none; display: block; }
.js-av--ph { width: 42px; height: 42px; display: grid; place-items: center; color: var(--js-mut); border: 1px dashed var(--js-line); }

/* shell */
.js-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr) 320px; gap: 1.75rem; align-items: start; padding-top: 1.5rem; padding-bottom: 4rem; }
.js-rail__in { position: sticky; top: 78px; }
.js-side__in { display: grid; gap: 1rem; }
.js-rail__in { display: grid; gap: 2px; }
.js-rail__h { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--js-mut); margin: 1rem .75rem .4rem; }
.js-rail__h:first-child { margin-top: 0; }
.js-rail a { position: relative; display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; color: var(--color-text); text-decoration: none; }
.js-rail a span { display: grid; min-width: 0; }
.js-rail a b { font-weight: 600; font-size: .94rem; line-height: 1.25; }
.js-rail a small { font-size: 12px; color: var(--js-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js-rail a:hover { background: var(--color-surface-2); }
.js-rail a.is-on { background: var(--js-hi); }
.js-rail a.is-on .js-i { color: var(--color-accent-text); }
.js-new19 { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; background: #ef4444; color: #fff; border-radius: 6px; padding: 2px 6px; }
.js-rules-link { margin: 1rem .75rem 0; justify-self: start; background: none; border: 0; color: var(--js-mut); font: inherit; font-size: var(--text-xs); text-decoration: underline; cursor: pointer; }
.js-main { min-width: 0; display: grid; gap: 1rem; align-content: start; outline: none; }

/* stories */
.js-stories { display: flex; gap: .9rem; overflow-x: auto; padding: .25rem .1rem .5rem; scrollbar-width: none; align-items: flex-start; }
.js-stories::-webkit-scrollbar { display: none; }
.js-story { display: grid; justify-items: center; gap: .35rem; background: none; border: 0; color: var(--color-text); cursor: pointer; width: 72px; flex: none; font: inherit; }
.js-story small { font-size: 12px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--js-mut); }
.js-story__ring { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: var(--js-line); }
.js-story.is-new .js-story__ring { background: conic-gradient(from 200deg, #f5a623, #ff6b4a, #facc15, #f5a623); }
.js-story__ring .js-av { border: 3px solid var(--color-bg); width: 60px !important; height: 60px !important; }
.js-story--me .js-story__ring { background: none; border: 2px dashed var(--js-line); }
.js-story--me .js-story__ring > b { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #141414; display: grid; place-items: center; border: 3px solid var(--color-bg); }
.js-story--me .js-story__ring > b .js-i { width: 14px; height: 14px; stroke-width: 3; }
.js-story__plus { color: var(--js-mut); }
.js-story__hint { align-self: center; font-size: var(--text-sm); color: var(--js-mut); max-width: 30ch; }

/* stub composer */
.js-stub { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; align-items: center; background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); padding: 1rem; }
.js-stub__in { text-align: left; border: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--js-mut); border-radius: 999px; padding: .7rem 1.1rem; font: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js-stub__in:hover { border-color: var(--amber); color: var(--color-text); }
.js-stub__quick { grid-column: 1 / -1; display: flex; gap: .25rem; flex-wrap: wrap; border-top: 1px solid var(--js-line); padding-top: .65rem; }
.js-stub__quick button { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; color: var(--js-mut); font: inherit; font-size: .9rem; font-weight: 600; padding: .45rem .7rem; border-radius: 8px; cursor: pointer; }
.js-stub__quick button:hover { background: var(--color-surface-2); color: var(--color-text); }
.js-stub__quick button:nth-child(1) .js-i { color: #2dd4bf; } .js-stub__quick button:nth-child(2) .js-i { color: #fb7185; } .js-stub__quick button:nth-child(3) .js-i { color: var(--amber); } .js-stub__quick button:nth-child(4) .js-i { color: #7aa7ff; }

/* qotd */
.js-qotd { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-radius: var(--js-r); background: linear-gradient(120deg, color-mix(in oklab, var(--amber) 20%, var(--js-card)), var(--js-card) 70%); border: 1px solid color-mix(in oklab, var(--amber) 35%, var(--js-line)); }
.js-qotd .eyebrow { margin-bottom: .3rem; }
.js-qotd__q { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.js-qotd .btn { flex: none; }
.js-mcurious { display: none; }

/* sorts */
.js-sorts { display: flex; gap: .35rem; border-bottom: 1px solid var(--js-line); position: relative; }
.js-sorts button { background: none; border: 0; padding: .7rem 1rem; font: inherit; font-weight: 700; color: var(--js-mut); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.js-sorts button[aria-selected="true"] { color: var(--color-text); border-color: var(--amber); }
.js-newpill { position: sticky; top: 74px; z-index: 5; justify-self: center; background: var(--amber); color: #141414; border: 0; border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 800; font-size: .9rem; box-shadow: var(--shadow); cursor: pointer; animation: jsDrop .35s var(--ease); }
@keyframes jsDrop { from { transform: translateY(-10px); opacity: 0; } }
.js-fhead { display: grid; gap: .35rem; padding: .25rem 0 .25rem; }
.js-fhead h1 { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1.1; }
.js-fhead h1 .js-i { width: 28px; height: 28px; color: var(--color-accent-text); }
.js-fhead p { color: var(--js-mut); max-width: 62ch; }
.js-fhead .js-link { justify-self: start; }

/* posts */
.js-feed { display: grid; gap: 1rem; }
.js-post { background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); padding: 1rem 1.1rem .65rem; display: grid; gap: .75rem; position: relative; transition: border-color .2s, box-shadow .2s; }
.js-post.is-fresh { animation: jsFresh 1.4s var(--ease); }
@keyframes jsFresh { from { box-shadow: 0 0 0 3px var(--amber); transform: translateY(-6px); } }
.js-post.is-reading { border-color: var(--amber); box-shadow: 0 0 0 3px var(--js-hi); }
.js-post.is-pinned { border-color: color-mix(in oklab, var(--amber) 45%, var(--js-line)); }
.js-pinned, .js-bestlbl { display: flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 700; color: var(--js-mut); text-transform: uppercase; letter-spacing: .08em; margin-bottom: -.35rem; }
.js-pinned .js-i, .js-bestlbl .js-i { width: 14px; height: 14px; }
.js-bestlbl { color: #16a34a; }
.js-post.is-best { border-color: #16a34a; }
.js-post__h { display: flex; gap: .7rem; align-items: flex-start; }
.js-post__who { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.js-post__line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.js-un { font-weight: 800; color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; }
.js-un:hover { text-decoration: underline; }
.js-lv { font-size: 11px; font-weight: 700; color: var(--color-accent-text); background: var(--js-hi); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.js-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; font-size: 13px; color: var(--js-mut); }
.js-post__meta a { color: inherit; text-decoration: none; }
.js-post__meta a:hover { color: var(--color-text); text-decoration: underline; }
.js-chip { font-weight: 600; }
.js-st::before, .js-time::before, .js-exp::before, .js-edited::before { content: '·'; margin-right: .55rem; }
.js-edited { font-weight: 700; color: var(--color-accent-text); }
.js-exp { color: #f59e0b; }
.js-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text); white-space: nowrap; flex: none; }
.js-badge .js-i { width: 14px; height: 14px; }
.js-badge--q { background: rgb(122 167 255 / .16); color: #7aa7ff; }
.js-badge--d { background: var(--js-hi); color: var(--color-accent-text); }
.js-badge--r { background: rgb(239 68 68 / .14); color: #f87171; }
[data-theme='light'] .js-badge--q { color: #2f5fc4; } [data-theme='light'] .js-badge--r { color: #b91c1c; }
.js-post__b { font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; }
.js-tag, .js-men { color: var(--color-accent-text); font-weight: 600; text-decoration: none; }
.js-tag:hover, .js-men:hover { text-decoration: underline; }
.js-url { color: var(--js-mut); text-decoration: underline dotted; overflow-wrap: anywhere; }
.js-post__f { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--js-line); padding-top: .45rem; flex-wrap: wrap; }
.js-reacts { display: flex; gap: .15rem; flex-wrap: wrap; }
.js-react { display: inline-flex; align-items: center; gap: .3rem; height: 36px; min-width: 40px; padding: 0 .55rem; border-radius: 999px; border: 0; background: none; color: var(--js-mut); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: transform .15s, background .15s, color .15s; }
.js-react:hover { background: var(--color-surface-2); color: var(--color-text); }
.js-react:active { transform: scale(.88); }
.js-react.is-on { color: #141414; background: var(--amber); }
.js-react[data-r="haul"].is-on { background: #ff6b4a; } .js-react[data-r="safe"].is-on { background: #2dd4bf; } .js-react[data-r="ha"].is-on { background: #facc15; } .js-react[data-r="pray"].is-on { background: #fb7185; } .js-react[data-r="sad"].is-on { background: #93c5fd; } .js-react[data-r="mad"].is-on { background: #f97316; }
.js-react.is-on .js-i { animation: jsPop .4s var(--ease); }
@keyframes jsPop { 40% { transform: scale(1.45) rotate(-8deg); } }
.js-react__n:empty { display: none; }
.js-post__acts { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.js-act { display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .65rem; border-radius: 999px; border: 0; background: none; color: var(--js-mut); text-decoration: none; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.js-act:hover { background: var(--color-surface-2); color: var(--color-text); }
.js-act span:empty { display: none; }
.js-act--best { color: #16a34a; border: 1px solid color-mix(in oklab, #16a34a 50%, transparent); }
.js-spark { position: fixed; z-index: 200; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: jsSpark .65s var(--ease) forwards; }
@keyframes jsSpark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* media */
.js-media { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.js-media--2, .js-media--4 { grid-template-columns: 1fr 1fr; }
.js-media--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.js-media--3 .js-media__i:first-child { grid-row: span 2; }
.js-media__i { border: 0; padding: 0; background: var(--color-surface-2); cursor: zoom-in; display: block; min-height: 0; }
.js-media__i img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 520px; }
.js-media--2 img, .js-media--3 img, .js-media--4 img { aspect-ratio: 1; }
.js-media--1 img { aspect-ratio: auto; object-fit: cover; }
.js-yt { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.js-yt button { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; position: relative; }
.js-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.js-yt__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 14px; background: #ff0000; color: #fff; display: grid; place-items: center; }
.js-yt__play .js-i { fill: #fff; stroke: none; }
.js-yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.js-audio { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem .6rem .6rem; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--js-line); }
.js-audio__btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--amber); color: #141414; display: grid; place-items: center; cursor: pointer; flex: none; }
.js-audio__btn .js-i { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.js-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 34px; min-width: 0; }
.js-wave i { flex: 1; min-width: 2px; max-width: 5px; border-radius: 2px; background: color-mix(in oklab, var(--color-text) 28%, transparent); transition: background .15s; }
.js-wave i.on { background: var(--amber); }
.js-audio.is-on .js-wave i:not(.on) { background: color-mix(in oklab, var(--color-text) 40%, transparent); }
.js-audio__t { font-size: 13px; font-weight: 700; color: var(--js-mut); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.js-audprev { display: flex; gap: .5rem; align-items: center; } .js-audprev .js-audio { flex: 1; }

/* route */
.js-route { display: grid; grid-template-columns: minmax(0, 1.25fr) 1fr; gap: 1rem; align-items: center; padding: .85rem; border-radius: 12px; background: linear-gradient(135deg, var(--color-surface-2), color-mix(in oklab, var(--amber) 9%, var(--color-surface-2))); border: 1px solid var(--js-line); }
.js-mini { width: 100%; height: auto; display: block; }
.js-mini__base { fill: color-mix(in oklab, var(--color-text) 12%, transparent); stroke: var(--js-card); stroke-width: 1.2; }
.js-mini .is-fr { fill: color-mix(in oklab, var(--amber) 45%, transparent); }
.js-mini .is-to { fill: var(--amber); }
.js-mini__arc { fill: none; stroke: var(--color-text); stroke-width: 4; stroke-dasharray: 10 8; stroke-linecap: round; animation: jsDash 1.6s linear infinite; }
.js-mini__dot { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 4; }
.js-mini__dot.is-to { fill: var(--amber); stroke: #141414; }
.js-route__txt { display: grid; gap: .1rem; font-family: var(--font-display); }
.js-route__txt b { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.js-route__txt span { color: var(--js-mut); font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.js-route__txt em { font-style: normal; font-family: var(--font-body); font-size: 13px; color: var(--js-mut); margin-top: .35rem; font-weight: 600; }

/* poll */
.js-poll { display: grid; gap: .45rem; }
.js-poll__o { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: .6rem .95rem; border: 1px solid var(--js-line); border-radius: 10px; background: none; color: var(--color-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.js-poll__o:hover { border-color: var(--amber); }
.js-poll__bar { position: absolute; inset: 0 auto 0 0; background: var(--js-hi); transition: width .7s var(--ease); }
.js-poll__o.is-my .js-poll__bar { background: color-mix(in oklab, var(--amber) 35%, transparent); }
.js-poll__o.is-my { border-color: var(--amber); }
.js-poll__l, .js-poll__p { position: relative; } .js-poll__p { font-weight: 800; font-variant-numeric: tabular-nums; }
.js-poll__n { font-size: 13px; color: var(--js-mut); }

/* skeleton / empty */
.js-skel { gap: .7rem; } .js-skel b, .js-skel i { display: block; background: var(--color-surface-2); border-radius: 6px; height: 12px; animation: jsShim 1.3s infinite; }
.js-skel__h { display: flex; gap: .7rem; align-items: center; } .js-skel__h i { width: 44px; height: 44px; border-radius: 50%; } .js-skel__h span { flex: 1; display: grid; gap: .4rem; } .js-skel__h b:first-child { width: 40%; } .js-skel__h b:last-child { width: 25%; }
.js-skel .w60 { width: 60%; }
@keyframes jsShim { 50% { opacity: .5; } }
.js-empty { display: grid; justify-items: center; text-align: center; gap: .6rem; padding: 2.5rem 1.25rem; border: 1px dashed var(--js-line); border-radius: var(--js-r); background: var(--js-card); }
.js-empty > .js-i { width: 40px; height: 40px; color: var(--color-accent-text); }
.js-empty h1, .js-empty h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.js-empty p { color: var(--js-mut); max-width: 46ch; }
.js-hello { padding: 3.5rem 1.25rem; }
.js-empty-s { color: var(--js-mut); font-size: var(--text-sm); }
.js-more { display: grid; justify-items: center; min-height: 20px; }
.js-loadmore { background: var(--js-card); border: 1px solid var(--js-line); color: var(--color-text); padding: .7rem 1.4rem; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.js-end { color: var(--js-mut); font-size: var(--text-sm); padding: 1rem; }
.js-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--js-line); border-top-color: var(--amber); animation: jsRot .8s linear infinite; display: block; margin: 1.5rem auto; }
@keyframes jsRot { to { transform: rotate(360deg); } }

/* thread */
.js-back { display: inline-flex; align-items: center; gap: .45rem; color: var(--js-mut); text-decoration: none; font-weight: 700; font-size: .92rem; justify-self: start; }
.js-back:hover { color: var(--color-text); }
#jsThread { display: grid; gap: 1rem; }
.js-replies { display: grid; gap: .8rem; }
.js-replies h2, .js-sech { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; margin-top: .5rem; }
.js-replybox { display: flex; gap: .7rem; align-items: flex-end; background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); padding: .75rem; }
.js-replybox textarea { flex: 1; min-height: 42px; resize: none; border: 0; background: none; color: var(--color-text); font: inherit; padding: .55rem 0; outline: none; }
.js-replylist { display: grid; gap: .6rem; }
.js-post--reply { padding: .8rem .95rem .45rem; margin-left: 1.25rem; }
.js-post--reply::before { content: ''; position: absolute; left: -1.25rem; top: 0; bottom: 50%; width: .9rem; border-left: 2px solid var(--js-line); border-bottom: 2px solid var(--js-line); border-bottom-left-radius: 10px; }
.js-post--reply .js-post__b { font-size: .97rem; }
.js-post--reply .js-react { height: 32px; min-width: 34px; padding: 0 .45rem; }
.js-joinbar { width: 100%; padding: .95rem; border-radius: var(--js-r); border: 1px dashed var(--amber); background: var(--js-hi); color: var(--color-text); font: inherit; font-weight: 700; cursor: pointer; }

/* side cards */
.js-card { background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); padding: 1rem; display: grid; gap: .7rem; color: var(--color-text); text-decoration: none; }
.js-card__h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.js-card__h h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.js-card__h span, .js-card__h a { font-size: 12px; color: var(--js-mut); font-weight: 600; }
.js-card__f { font-size: 12.5px; color: var(--js-mut); }
.js-mapcard:hover { border-color: var(--amber); }
.js-heat { width: 100%; height: auto; display: block; }
.js-heat__s { fill: color-mix(in oklab, var(--color-text) 9%, transparent); stroke: var(--js-card); stroke-width: 1.3; transition: fill .2s; }
.js-h1 { fill: color-mix(in oklab, var(--amber) 22%, var(--color-surface-2)); background: color-mix(in oklab, var(--amber) 22%, var(--color-surface-2)); }
.js-h2 { fill: color-mix(in oklab, var(--amber) 40%, var(--color-surface-2)); background: color-mix(in oklab, var(--amber) 40%, var(--color-surface-2)); }
.js-h3 { fill: color-mix(in oklab, var(--amber) 60%, var(--color-surface-2)); background: color-mix(in oklab, var(--amber) 60%, var(--color-surface-2)); }
.js-h4 { fill: color-mix(in oklab, var(--amber) 80%, var(--color-surface-2)); background: color-mix(in oklab, var(--amber) 80%, var(--color-surface-2)); }
.js-h5 { fill: var(--amber); background: var(--amber); }
.js-heat--big .js-heat__s { cursor: pointer; }
.js-heat--big .js-heat__s:hover { stroke: var(--color-text); stroke-width: 2.5; }
.js-arc { fill: none; stroke: var(--color-text); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 6 7; opacity: .75; animation: jsDash 2.2s linear infinite; pointer-events: stroke; }
.js-drop { fill: var(--amber); stroke: #141414; stroke-width: 2; }
.js-curious { background: linear-gradient(160deg, #141414, #23201a); color: #fff; border-color: transparent; }
.js-curious .eyebrow { margin: 0; color: var(--amber); }
.js-curious h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; line-height: 1.15; }
.js-curious p { font-size: .92rem; color: rgb(255 255 255 / .75); }
.js-qchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.js-qchips button, .js-chat__quick button, .js-qtips button, .js-reasons button, .js-subs button { border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .06); color: inherit; border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.js-qchips button:hover { border-color: var(--amber); background: rgb(245 166 35 / .14); }
.js-curious__cta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .2rem; }
.js-curious .js-link { color: #fff; }
.js-replist { list-style: none; display: grid; gap: .5rem; }
.js-replist a { display: grid; gap: .2rem; text-decoration: none; color: var(--color-text); padding: .55rem .65rem; border-radius: 10px; background: var(--color-surface-2); font-size: .9rem; line-height: 1.35; }
.js-replist small { color: var(--js-mut); font-size: 12px; }
.js-sub { justify-self: start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #f87171; }
.js-sub--weather { color: #7aa7ff; } .js-sub--parking { color: #2dd4bf; } .js-sub--fuel { color: var(--color-accent-text); } .js-sub--scale { color: #c084fc; }
.js-lead { list-style: none; display: grid; gap: .25rem; }
.js-lead li { display: flex; align-items: center; gap: .6rem; }
.js-lead__n { width: 20px; font-family: var(--font-display); font-weight: 900; color: var(--js-mut); text-align: center; }
.js-lead li:nth-child(1) .js-lead__n { color: var(--amber); }
.js-lead a { flex: 1; min-width: 0; display: flex; gap: .55rem; align-items: center; color: var(--color-text); text-decoration: none; padding: .3rem; border-radius: 8px; }
.js-lead a:hover { background: var(--color-surface-2); }
.js-lead a span { display: grid; min-width: 0; } .js-lead b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .js-lead small { font-size: 11.5px; color: var(--js-mut); }
.js-lead em { font-style: normal; font-weight: 800; font-size: .9rem; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.js-card > .js-link { justify-self: start; font-size: 13px; }
.js-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.js-tags a { display: inline-flex; gap: .35rem; align-items: baseline; text-decoration: none; color: var(--color-text); background: var(--color-surface-2); padding: .35rem .7rem; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.js-tags a small { color: var(--js-mut); font-size: 11px; }
.js-tags a:hover { background: var(--js-hi); }
.js-dotw a { display: grid; gap: .5rem; color: var(--color-text); text-decoration: none; }
.js-dotw p { font-size: .9rem; }
.js-mentors { display: flex; flex-wrap: wrap; gap: .45rem; }
.js-mentors .js-av { box-shadow: 0 0 0 2px var(--js-card), 0 0 0 4px #22c55e; }
.js-stats { grid-template-columns: repeat(3, 1fr); text-align: center; gap: .4rem; }
.js-stats div { display: grid; } .js-stats b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; } .js-stats small { font-size: 11px; color: var(--js-mut); line-height: 1.3; }

/* map view */
.js-bigmap { display: grid; gap: 1rem; }
.js-bigmap__svg { position: relative; background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); padding: 1rem; }
.js-tip { position: absolute; pointer-events: none; background: #141414; color: #fff; font-size: 13px; font-weight: 700; padding: .35rem .65rem; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow); }
.js-legend { display: flex; align-items: center; gap: .35rem; font-size: 12px; color: var(--js-mut); flex-wrap: wrap; }
.js-legend i { width: 22px; height: 12px; border-radius: 3px; display: inline-block; }
.js-legend__arc { margin-left: 1rem; display: inline-flex; align-items: center; gap: .4rem; }
.js-legend__arc::before { content: ''; width: 28px; border-top: 2.5px dashed var(--color-text); }
.js-mapstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.js-mapstats div { background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); padding: .9rem; display: grid; }
.js-mapstats b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; line-height: 1; }
.js-mapstats small { color: var(--js-mut); font-size: 12.5px; margin-top: .35rem; }
.js-toplist { list-style: none; counter-reset: t; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.js-toplist a { counter-increment: t; display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-radius: 10px; background: var(--js-card); border: 1px solid var(--js-line); color: var(--color-text); text-decoration: none; font-weight: 700; }
.js-toplist a::before { content: counter(t); color: var(--js-mut); font-family: var(--font-display); font-weight: 900; width: 1.2rem; }
.js-toplist a span { flex: 1; } .js-toplist em { font-style: normal; color: var(--color-accent-text); }

/* chat */
.js-chat { background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); display: grid; grid-template-rows: 1fr auto auto; height: min(68vh, 640px); overflow: hidden; }
.js-chat__log { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; background-image: repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in oklab, var(--color-text) 3%, transparent) 22px 23px); }
.js-chat__empty { margin: auto; color: var(--js-mut); text-align: center; }
.js-msg { display: flex; gap: .55rem; align-items: flex-end; max-width: 86%; animation: jsDrop .25s var(--ease); }
.js-msg > div { background: var(--color-surface-2); border-radius: 16px 16px 16px 4px; padding: .5rem .8rem; min-width: 0; }
.js-msg__h { display: flex; gap: .5rem; align-items: center; font-size: 12px; } .js-msg__h a { font-weight: 800; color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; } .js-msg__h time { color: var(--js-mut); }
.js-msg__b { overflow-wrap: anywhere; line-height: 1.45; }
.js-msg.is-me { align-self: flex-end; } .js-msg.is-me > div { background: var(--amber); color: #141414; border-radius: 16px 16px 4px 16px; } .js-msg.is-me .js-msg__h a, .js-msg.is-me .js-msg__h time, .js-msg.is-me .js-tag, .js-msg.is-me .js-men { color: #141414; }
.js-chat__quick { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem .8rem 0; scrollbar-width: none; border-top: 1px solid var(--js-line); }
.js-chat__quick button, .js-qtips button, .js-reasons button, .js-subs button { border-color: var(--js-line); background: var(--color-surface-2); white-space: nowrap; }
.js-chat__form { display: flex; gap: .6rem; align-items: center; padding: .7rem .8rem; }
.js-chat__form input { flex: 1; min-width: 0; height: 42px; border-radius: 999px; border: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--color-text); padding: 0 1rem; font: inherit; }
.js-chat__form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

/* notifications */
.js-notifs { list-style: none; display: grid; gap: .4rem; }
.js-notifs a { display: flex; gap: .75rem; align-items: center; padding: .8rem; border-radius: 12px; background: var(--js-card); border: 1px solid var(--js-line); color: var(--color-text); text-decoration: none; }
.js-notifs li.is-new a { border-color: color-mix(in oklab, var(--amber) 50%, var(--js-line)); background: color-mix(in oklab, var(--amber) 7%, var(--js-card)); }
.js-notifs span { display: grid; gap: .1rem; } .js-notifs small { color: var(--js-mut); font-size: 12px; }

/* profile */
.js-prof { background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); overflow: hidden; padding: 0 1.25rem 1.25rem; display: grid; gap: .8rem; }
.js-prof__cover { height: 120px; margin: 0 -1.25rem; background: radial-gradient(120% 140% at 80% 0, rgb(245 166 35 / .55), transparent 55%), linear-gradient(120deg, #141414, #2b2418); position: relative; }
.js-prof__cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; border-top: 3px dashed rgb(245 166 35 / .55); }
.js-prof__top { display: flex; justify-content: space-between; align-items: flex-end; margin-top: -56px; }
.js-prof__av { border: 4px solid var(--js-card); width: 104px !important; height: 104px !important; }
.js-prof__acts { display: flex; gap: .4rem; align-items: center; }
.js-prof__n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; line-height: 1.1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.js-prof__n .js-ver { width: 22px; height: 22px; }
.js-prof__sub { color: var(--js-mut); font-size: .92rem; }
.js-prof__bio { line-height: 1.5; }
.js-prof__sign { display: inline-block; margin: 0 0 10px; padding: 6px 10px; border: 2px solid var(--amber); border-radius: 4px; font: 800 14px/1.2 var(--font-display); letter-spacing: .02em; }
.js-sagabtn { margin: 0 0 14px; }
.js-prof__nums { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .92rem; color: var(--js-mut); }
.js-prof__nums b { color: var(--color-text); font-weight: 800; }
.js-streak { display: inline-flex; align-items: center; gap: .3rem; color: #ff6b4a !important; font-weight: 700; } .js-streak .js-i { width: 16px; height: 16px; }
.js-level { padding: .85rem; border-radius: 12px; background: var(--color-surface-2); display: grid; gap: .5rem; }
.js-level__h { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .9rem; } .js-level__h b { font-family: var(--font-display); font-weight: 900; color: var(--color-accent-text); } .js-level__h span { color: var(--js-mut); }
.js-level__bar { height: 10px; border-radius: 6px; background: color-mix(in oklab, var(--color-text) 10%, transparent); overflow: hidden; }
.js-level__bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--amber) 0 14px, #ffbf55 14px 22px); border-radius: 6px; animation: jsGrow 1.1s var(--ease); }
@keyframes jsGrow { from { width: 0 !important; } }
.js-badges { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.js-bdg { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--color-surface-2); border: 1px solid var(--js-line); }
.js-bdg .js-i { width: 16px; height: 16px; color: var(--color-accent-text); }
.js-bdg--official { background: var(--amber); color: #141414; border-color: transparent; } .js-bdg--official .js-i { color: #141414; }
.js-mymap { display: grid; gap: .5rem; } .js-mymap h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; display: flex; gap: .5rem; align-items: baseline; } .js-mymap h2 small { color: var(--js-mut); font-weight: 600; font-size: 12px; }
.js-mymap--empty { padding: 1rem; border: 1px dashed var(--js-line); border-radius: 12px; justify-items: start; } .js-mymap--empty p { color: var(--js-mut); }

/* tabs + fab (mobile) */
.js-tabs { display: none; }
.js-fab { display: none; }

/* modals */
.js-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 0); transition: background .18s; }
.js-modal.is-on { background: rgb(0 0 0 / .62); }
.js-modal__box { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--js-line); border-radius: 18px; padding: 1.5rem; box-shadow: 0 30px 80px rgb(0 0 0 / .45); transform: translateY(14px) scale(.98); opacity: 0; transition: transform .22s var(--ease), opacity .18s; outline: none; display: grid; gap: .9rem; }
.js-modal.is-on .js-modal__box { transform: none; opacity: 1; }
.js-modal__x { position: absolute; top: .6rem; right: .6rem; z-index: 2; }
.js-modal h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 900; line-height: 1.15; padding-right: 2.5rem; }
.js-modal h3 { font-family: var(--font-display); font-weight: 800; }
.js-modal p { color: var(--js-mut); line-height: 1.5; }
.js-modal--lb .js-modal__box { width: min(1100px, 100%); background: #0b0b0c; border-color: #222; padding: .5rem; }
.js-modal--lb .js-modal__x { color: #fff; background: rgb(0 0 0 / .5); }
.js-lb { position: relative; display: grid; place-items: center; }
.js-lb img { max-width: 100%; max-height: calc(100dvh - 5rem); object-fit: contain; border-radius: 10px; }
.js-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .55); color: #fff; font-size: 28px; cursor: pointer; }
.js-lb__p { left: .6rem; } .js-lb__n { right: .6rem; }
.js-lb__c { color: #bbb !important; font-size: 13px; margin-top: .4rem; }
.js-field { display: grid; gap: .4rem; font-weight: 700; font-size: .92rem; }
.js-field small { font-weight: 500; color: var(--js-mut); }
.js-field input, .js-field textarea, .js-field select, .js-sel select { width: 100%; border: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--color-text); border-radius: 10px; padding: .7rem .85rem; font: inherit; font-weight: 500; }
.js-field input:focus, .js-field textarea:focus, .js-field select:focus, .js-sel select:focus, .js-comp textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.js-at { display: flex; align-items: center; border: 1px solid var(--js-line); background: var(--color-surface-2); border-radius: 10px; padding-left: .85rem; }
.js-at b { color: var(--js-mut); } .js-at input { border: 0; background: none; padding-left: .3rem; } .js-at:focus-within { outline: 2px solid var(--amber); outline-offset: 1px; } .js-at input:focus { outline: none; }
.js-code { font-family: ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; font-size: 1.2rem !important; text-align: center; }
.js-bigcode { font-family: ui-monospace, monospace; font-size: clamp(1.4rem, 1rem + 2vw, 2rem); font-weight: 800; letter-spacing: .12em; color: var(--color-text) !important; text-align: center; background: var(--color-surface-2); padding: 1rem; border-radius: 12px; }
.js-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.js-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--amber); flex: none; }
.js-err { color: #ef4444 !important; font-weight: 700; font-size: .9rem; min-height: 0; }
.js-err:empty { display: none; }
.js-join { display: grid; gap: 1rem; }
.js-join form { display: grid; gap: 1rem; }
.js-join__art svg { width: 48px; height: 48px; }
.js-join__lede { margin-top: -.5rem; }
.js-avpick { justify-self: center; cursor: pointer; }
.js-avpick__ph { width: 120px; height: 120px; border-radius: 50%; border: 2px dashed var(--amber); display: grid; place-items: center; align-content: center; gap: .35rem; text-align: center; color: var(--color-accent-text); background: var(--js-hi); position: relative; overflow: hidden; transition: transform .2s; }
.js-avpick:hover .js-avpick__ph { transform: scale(1.04); }
.js-avpick__ph .js-i { width: 28px; height: 28px; } .js-avpick__ph b { font-size: 12.5px; }
.js-avpick__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js-avpick.has .js-avpick__ph { border-style: solid; }
.js-avpick.has .js-avpick__ph b { position: absolute; bottom: 0; left: 0; right: 0; background: rgb(0 0 0 / .6); color: #fff; padding: .3rem 0; }
.js-avpick:focus-within .js-avpick__ph { outline: 3px solid var(--amber); outline-offset: 3px; }
.js-claimlink { justify-self: center; font-size: .9rem; }
.js-rules { display: grid; gap: .65rem; padding-left: 1.2rem; line-height: 1.5; } .js-rules a { color: var(--color-accent-text); }
.js-miles { list-style: none; display: grid; gap: .45rem; } .js-miles b { display: inline-block; min-width: 3rem; color: var(--color-accent-text); font-family: var(--font-display); }
.js-levels { padding-left: 1.2rem; display: grid; gap: .3rem; } .js-levels small { color: var(--js-mut); margin-left: .4rem; }
.js-reasons { display: grid; gap: .45rem; } .js-reasons button { text-align: left; padding: .75rem 1rem; border-radius: 10px; font-size: .95rem; }
.js-reasons button:hover { border-color: var(--amber); }
.js-shares { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.js-shares a, .js-shares button { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 12px; background: var(--color-surface-2); border: 1px solid var(--js-line); color: var(--color-text); text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }

/* composer */
.js-modal--comp .js-modal__box { width: min(620px, 100%); }
.js-comp { display: grid; gap: .8rem; }
.js-comp__h { display: flex; gap: .7rem; align-items: center; } .js-comp__h div { display: grid; }
.js-park { display: inline-flex; align-items: center; gap: .3rem; font-size: 12.5px; color: #16a34a; font-weight: 700; } .js-park .js-i { width: 14px; height: 14px; }
.js-kinds { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.js-kinds button { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--js-line); background: none; color: var(--color-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.js-kinds button .js-i { width: 16px; height: 16px; }
.js-kinds button[aria-checked="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.js-comp textarea#jsBody, .js-comp textarea.js-edit { width: 100%; min-height: 110px; resize: vertical; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface-2); color: var(--color-text); padding: .85rem 1rem; font: inherit; font-size: 1.05rem; line-height: 1.5; }
.js-count { font-size: 12px; color: var(--js-mut); text-align: right; margin-top: -.55rem; }
.js-comp__extra:empty { display: none; }
.js-comp__extra { display: grid; gap: .5rem; }
.js-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.js-sel { display: grid; gap: .25rem; font-size: 12px; font-weight: 700; color: var(--js-mut); min-width: 0; }
.js-sel select { padding: .55rem .6rem; font-size: .9rem; }
.js-subs, .js-qtips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.js-qtips span { font-size: 12px; color: var(--js-mut); font-weight: 700; }
.js-subs button[aria-checked="true"] { background: var(--amber); color: #141414; border-color: var(--amber); }
.js-pollin { display: grid; gap: .45rem; } .js-popt { border: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--color-text); border-radius: 10px; padding: .6rem .85rem; font: inherit; }
.js-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; } .js-thumbs:empty { display: none; }
.js-thumb { position: relative; } .js-thumb img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; display: block; }
.js-thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .7); color: #fff; display: grid; place-items: center; cursor: pointer; } .js-thumb .js-i { width: 14px; height: 14px; }
.js-comp__tools { display: flex; gap: .45rem; flex-wrap: wrap; align-items: end; }
.js-comp__tools .js-sel { flex: 1; min-width: 130px; }
.js-tool { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .85rem; border-radius: 10px; border: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.js-tool:focus-within { outline: 2px solid var(--amber); }
.js-tool.is-rec { background: #ef4444; color: #fff; border-color: #ef4444; animation: jsRec 1.2s infinite; }
@keyframes jsRec { 50% { box-shadow: 0 0 0 6px rgb(239 68 68 / .2); } }
.js-comp__f { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--js-line); padding-top: .8rem; }

/* story viewer */
.js-sv { position: fixed; inset: 0; z-index: 130; background: rgb(0 0 0 / .92); display: grid; place-items: center; }
.js-sv__box { position: relative; width: min(440px, 100vw); height: min(780px, 100dvh); background: #000; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.js-sv__box > img { width: 100%; height: 100%; object-fit: contain; }
.js-sv__bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.js-sv__bars i { flex: 1; height: 3px; background: rgb(255 255 255 / .3); border-radius: 2px; overflow: hidden; } .js-sv__bars b { display: block; height: 100%; background: #fff; }
.js-sv__h { position: absolute; top: 22px; left: 12px; right: 6px; display: flex; align-items: center; gap: .55rem; z-index: 3; color: #fff; font-size: 13px; }
.js-sv__h a { color: #fff; font-weight: 800; text-decoration: none; } .js-sv__h span { opacity: .75; } .js-sv__h .js-iconbtn { margin-left: auto; color: #fff; }
.js-sv__cap { position: absolute; left: 0; right: 0; bottom: 70px; padding: 1rem 1.1rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .7)); z-index: 2; line-height: 1.45; }
.js-sv__cap .js-tag, .js-sv__cap .js-men { color: var(--amber); }
.js-sv__react { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; z-index: 4; }
.js-sv__react button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.js-sv__react button.is-on { background: var(--amber); color: #141414; border-color: var(--amber); }
.js-sv__nav { position: absolute; top: 70px; bottom: 80px; width: 40%; background: none; border: 0; z-index: 1; cursor: pointer; } .js-sv__prev { left: 0; } .js-sv__next { right: 0; }

/* sheet + toast + confetti */
.js-sheet { position: absolute; z-index: 140; width: 230px; background: var(--color-surface); border: 1px solid var(--js-line); border-radius: 12px; box-shadow: var(--shadow), 0 10px 40px rgb(0 0 0 / .25); padding: .35rem; display: grid; animation: jsDrop .18s var(--ease); }
.js-sheet button { display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; border-radius: 8px; border: 0; background: none; color: var(--color-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.js-sheet button:hover, .js-sheet button:focus-visible { background: var(--color-surface-2); }
.js-sheet button.is-danger { color: #ef4444; }
.js-sheet.is-bottom { position: fixed; left: .5rem; right: .5rem; bottom: .5rem; width: auto; padding: .5rem; border-radius: 16px; }
.js-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); z-index: 150; background: #141414; color: #fff; padding: .8rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .92rem; box-shadow: 0 12px 40px rgb(0 0 0 / .35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); max-width: calc(100vw - 2rem); text-align: center; border: 1px solid #333; }
.js-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.js-toast.is-err { background: #7f1d1d; border-color: #b91c1c; }
.js-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 145; overflow: hidden; }
.js-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: jsFall 1.6s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes jsFall { to { transform: translateY(105vh) rotate(var(--r)); opacity: .2; } }

/* ===== responsive ===== */
@media (max-width: 1180px) {
  .js-shell { grid-template-columns: 210px minmax(0, 1fr) 290px; gap: 1.25rem; }
  .js-rail a small { display: none; }
}
@media (max-width: 1000px) {
  .js-shell { grid-template-columns: minmax(0, 1fr) 300px; }
  .js-rail { grid-column: 1 / -1; }
  .js-rail__in { position: static; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
  .js-rail__in::-webkit-scrollbar { display: none; }
  .js-rail__h, .js-rules-link { display: none; }
  .js-rail a { flex: none; border: 1px solid var(--js-line); border-radius: 999px; padding: .45rem .85rem; gap: .45rem; background: var(--js-card); }
  .js-rail a .js-i { width: 16px; height: 16px; }
  .js-rail a b { font-size: .88rem; white-space: nowrap; }
}
@media (max-width: 820px) {
  .js-shell { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; padding-bottom: 6rem; }
  .js-side { display: none; }
  .js-app[data-view="map"] .js-side { display: block; }
  .js-app[data-view="map"] .js-side__in { position: static; max-height: none; overflow: visible; }
  .js-app[data-view="map"] .js-mapcard { display: none; }
  .js-mcurious { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--js-r); background: linear-gradient(160deg, #141414, #23201a); color: #fff; }
  .js-mcurious b { font-family: var(--font-display); font-size: 1.05rem; }
  .js-mcurious .js-qchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .js-mcurious .js-qchips button { white-space: nowrap; }
  .js-search { display: none; }
  .js-search.is-open { display: flex; position: absolute; left: .75rem; right: .75rem; top: 11px; max-width: none; z-index: 2; background: var(--color-surface); }
  .js-srch-btn { display: inline-grid !important; }
  .js-top .js-live { display: none; }
  .js-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in oklab, var(--color-surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--js-line); padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); }
  .js-tabs a { position: relative; display: grid; justify-items: center; gap: 2px; padding: .35rem 0; color: var(--js-mut); text-decoration: none; font-size: 11px; font-weight: 700; }
  .js-tabs a.is-on { color: var(--color-text); } .js-tabs a.is-on .js-i { color: var(--color-accent-text); }
  .js-tabs .js-i { width: 23px; height: 23px; }
  .js-tabs .js-dot { top: 0; right: calc(50% - 20px); }
  .js-tabs__post { justify-self: center; align-self: center; width: 52px; height: 52px; border-radius: 16px; border: 0; background: var(--amber); color: #141414; display: grid; place-items: center; box-shadow: 0 6px 20px rgb(245 166 35 / .35); cursor: pointer; }
  .js-tabs__post .js-i { width: 26px; height: 26px; stroke-width: 2.6; }
  .js-route { grid-template-columns: 1fr; }
  .js-mapstats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } .js-mapstats div { padding: .7rem; }
  .js-toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: 5rem; }
}
@media (min-width: 821px) {
  .js-fab { display: none; }
  .js-srch-btn { display: none !important; }
}
@media (max-width: 560px) {
  .js-hero { padding-top: calc(3rem + 64px); padding-bottom: 2rem; }
  .js-hero__road { width: 120vw; right: -40vw; opacity: .5; }
  .js-top__in { gap: .5rem; }
  .js-logo span { font-size: 1.05rem; }
  .js-post { padding: .85rem .85rem .5rem; border-radius: 12px; }
  .js-post__f { gap: .25rem; }
  .js-react { min-width: 36px; padding: 0 .4rem; }
  .js-post__acts { margin-left: 0; }
  .js-qotd { flex-direction: column; align-items: flex-start; }
  .js-stub { padding: .8rem; }
  .js-stub__quick button span { font-size: .85rem; }
  .js-row { grid-template-columns: 1fr 1fr; } .js-row .js-sel:last-child { grid-column: 1 / -1; }
  .js-modal { padding: 0; align-items: end; }
  .js-modal__box { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); transform: translateY(40px); }
  .js-modal--lb { align-items: center; } .js-modal--lb .js-modal__box { border-radius: 0; }
  .js-comp__f { flex-direction: column; align-items: stretch; } .js-comp__f .btn { justify-content: center; }
  .js-post--reply { margin-left: .75rem; } .js-post--reply::before { left: -.75rem; width: .5rem; }
  .js-mapstats b { font-size: 1.3rem; }
  .js-sv__box { border-radius: 0; height: 100dvh; }
  .js-prof { padding: 0 1rem 1rem; } .js-prof__cover { margin: 0 -1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js-arc, .js-mini__arc, .js-hero__road .dash, .js-live i { animation: none !important; }
}

/* keep the app toolbar below the site header when it is showing */
body.js-page:has(.header:not(.is-hidden)) .js-top { top: 76px; }
body.js-page:has(.header:not(.is-hidden)) .js-rail__in { top: 154px; }
body.js-page:has(.header:not(.is-hidden)) .js-newpill { top: 150px; }
@media (max-width: 1000px) { .js-hero__in { grid-template-columns: 1fr; } .js-hero__in > .js-hero__stats { grid-column: 1; grid-row: auto; grid-template-columns: repeat(4, auto); justify-content: start; } }
@media (max-width: 820px) {
  body.js-page .jrt { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; }
  body.js-page:has(.header:not(.is-hidden)) .js-top { top: 76px; }
}
@media (max-width: 560px) {
  .js-hero { padding-top: calc(64px + 1.5rem); padding-bottom: 1.4rem; }
  .js-hero .lede { font-size: .95rem !important; }
  .js-hero__ctas .btn { padding: .7rem 1rem; font-size: .92rem; }
  .js-hero__in > .js-hero__stats { grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .8rem; width: 100%; }
  .js-hero__stats b { font-size: 1.25rem; }
  .js-hero__stats small { font-size: 9.5px; letter-spacing: .06em; }
}
@media (max-width: 560px) { .js-joinbtn span { display: none; } .js-top .js-iconbtn { width: 36px; height: 36px; } .js-route { grid-template-columns: 1.4fr 1fr; gap: .6rem; } .js-route__txt b { font-size: 1rem; } }
.js-post--reply .js-time::before { content: none; }
.js-joinbtn { gap: 0; } .js-joinbtn span { margin-left: .28em; }
.js-card__h span, .js-card__h a { white-space: nowrap; }
/* Feed Radio voice picker */
.js-vp { display: grid; gap: .85rem; }
.js-vp .js-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text, #b4690e); margin: 0; }
.js-vp .js-modal__t { font-family: var(--font-display); font-size: 1.5rem; margin: -.4rem 0 0; }
.js-vp__list { display: grid; gap: .5rem; max-height: 46dvh; overflow: auto; padding-right: .15rem; }
.js-vp__v { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--js-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.js-vp__v:hover { border-color: var(--amber); }
.js-vp__v:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.js-vp__v.is-on { border-color: var(--amber); background: rgb(245 166 35 / .1); }
.js-vp__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--js-line); display: grid; place-items: center; }
.js-vp__v.is-on .js-vp__dot { border-color: var(--amber); }
.js-vp__v.is-on .js-vp__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.js-vp__n { display: grid; min-width: 0; }
.js-vp__n b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-vp__n small { color: var(--color-text-muted); font-size: .82rem; }
.js-vp__n em { font-style: normal; color: #1f9d55; font-weight: 600; }
.js-vp__try { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--js-line); background: transparent; color: inherit; font: 600 .82rem/1 var(--font-body); cursor: pointer; }
.js-vp__try:hover { border-color: var(--amber); }
.js-vp__try svg { width: 16px; height: 16px; }
.js-vp__speed { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.js-vp__speed > span { font-weight: 700; margin-right: .35rem; font-size: .9rem; }
.js-vp__speed .js-chip { padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--js-line); background: transparent; color: inherit; cursor: pointer; font-size: .85rem; }
.js-vp__speed .js-chip[aria-checked="true"] { background: var(--amber); border-color: var(--amber); color: #141414; }
.js-vp__go { justify-content: center; gap: .5rem; }
.js-vp__go svg { width: 18px; height: 18px; }

/* =================== shared bits =================== */
.js-page .js-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text, #b4690e); margin: 0; }
.js-page .js-eyebrow .js-i { width: 15px; height: 15px; }
.js-modal__t { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; margin: 0; }
.js-linkbtn { border: 0; background: none; padding: 0; color: var(--color-accent-text, #b4690e); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.js-linkbtn:hover { text-decoration: underline; }
.js-linkbtn .js-i { width: 15px; height: 15px; }
.js-sech-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .js-sech-row a { color: var(--color-accent-text); font-weight: 700; text-decoration: none; font-size: .9rem; }
.js-sech .js-i { width: 18px; height: 18px; vertical-align: -3px; margin-right: .3rem; }
.js-sech small { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--js-mut); margin-left: .4rem; }
.mk-fine { font-size: .88rem; color: var(--js-mut); line-height: 1.5; margin: 0; }
.mk-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .mk-row--c { justify-content: center; }
.mk-menu { display: grid; gap: 2px; } .mk-menu .js-modal__t { margin-bottom: .5rem; font-size: 1.2rem; }
.mk-menu__b { display: flex; align-items: center; gap: .7rem; padding: .8rem .75rem; border-radius: 10px; border: 0; background: none; color: var(--color-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.mk-menu__b:hover, .mk-menu__b:focus-visible { background: var(--color-surface-2); }
.js-modal--sm .js-modal__box { width: min(440px, 100%); }
.js-modal--sell .js-modal__box { width: min(680px, 100%); }
.mk-confirm { display: grid; gap: .9rem; } .mk-confirm p { margin: 0; color: var(--js-mut); } .mk-confirm .mk-row { justify-content: flex-end; }
.btn .js-i { width: 17px; height: 17px; }
.btn { gap: .4rem; }
.js-dmbtn .js-dot { top: 2px; right: 0; }
.js-modal--top { z-index: 130; }

/* share sheet */
.js-sh { display: grid; gap: 1rem; }
.js-sh__pv { display: flex; align-items: center; gap: .7rem; padding: .7rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface-2); min-width: 0; }
.js-sh__pv img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.js-sh__pv span { display: grid; min-width: 0; } .js-sh__pv b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .js-sh__pv small { color: var(--js-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-sh__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem .5rem; }
.js-sh__n { display: grid; justify-items: center; gap: .4rem; border: 0; background: none; color: var(--color-text); font: 600 .8rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; padding: .25rem 0; border-radius: 12px; }
.js-sh__n span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text); transition: transform .15s; }
.js-sh__n:hover span { transform: translateY(-2px); }
.js-sh__n .js-i { width: 26px; height: 26px; }
.js-sh__n--facebook span { background: #1877f2; color: #fff; } .js-sh__n--x span { background: #000; color: #fff; } .js-sh__n--whatsapp span { background: #25d366; color: #fff; }
.js-sh__n--linkedin span { background: #0a66c2; color: #fff; } .js-sh__n--reddit span { background: #ff4500; color: #fff; } .js-sh__n--sms span { background: #34c759; color: #fff; } .js-sh__n--mail span { background: #5b6472; color: #fff; }
[data-theme="dark"] .js-sh__n--x span { background: #fff; color: #000; }
.js-sh__copy { display: flex; gap: .5rem; } .js-sh__copy input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--js-line); border-radius: 10px; background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: .88rem; }

/* =================== Jimbo Market =================== */
.mk-hero { position: relative; overflow: hidden; display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--js-r); background: radial-gradient(120% 140% at 100% 0, rgb(245 166 35 / .28), transparent 55%), linear-gradient(160deg, #141414, #23201a); color: #fff; }
.mk-hero h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.05; margin: .35rem 0 0; color: #fff; }
.mk-hero p:not(.js-eyebrow) { color: rgb(255 255 255 / .78); margin: .5rem 0 0; max-width: 56ch; }
.mk-hero .js-eyebrow { color: var(--amber); }
.mk-search { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .9rem; background: #fff; border-radius: 999px; color: #141414; }
.mk-search .js-i { width: 20px; height: 20px; color: #6b6b6b; flex: none; }
.mk-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: #141414; padding: .45rem 0; outline: none; }
.mk-hero__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-hero .btn--ghost-d { color: #fff; border-color: rgb(255 255 255 / .3) !important; } .mk-hero .btn--ghost-d:hover { border-color: var(--amber) !important; }
.mk-cats { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .9rem 0 .2rem; margin: 0 -.1rem; }
.mk-cats::-webkit-scrollbar { display: none; }
.mk-cat { flex: none; display: grid; justify-items: center; gap: .3rem; min-width: 96px; padding: .75rem .6rem .6rem; border: 1px solid var(--js-line); border-radius: 14px; background: var(--js-card); color: var(--color-text); text-decoration: none; text-align: center; transition: border-color .15s, transform .15s; }
.mk-cat:hover { border-color: var(--amber); transform: translateY(-1px); }
.mk-cat .js-i { width: 26px; height: 26px; color: var(--color-accent-text); }
.mk-cat b { font-size: .8rem; font-weight: 700; line-height: 1.15; max-width: 10ch; }
.mk-cat small { font-size: .72rem; color: var(--js-mut); min-height: 1em; }
.mk-cat.is-on { background: var(--js-hi); border-color: var(--amber); }
.mk-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .7rem 0 0; }
.mk-fbtn { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid var(--js-line); border-radius: 999px; background: var(--js-card); color: var(--color-text); font: 600 .86rem/1 var(--font-body); cursor: pointer; }
.mk-fbtn .js-i { width: 16px; height: 16px; } .mk-fbtn:hover { border-color: var(--amber); }
.mk-fbtn.is-on { background: var(--amber); border-color: var(--amber); color: #141414; }
.mk-fbtn b { min-width: 18px; height: 18px; border-radius: 9px; background: var(--amber); color: #141414; font-size: 11px; display: inline-grid; place-items: center; padding: 0 4px; }
.mk-fbtn--alert { margin-left: auto; }
.mk-sort select { padding: .5rem 2rem .5rem .85rem; border: 1px solid var(--js-line); border-radius: 999px; background: var(--js-card); color: var(--color-text); font: 600 .86rem/1 var(--font-body); appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.mk-panel { margin-top: .7rem; padding: 1rem; border: 1px solid var(--js-line); border-radius: var(--js-r); background: var(--js-card); display: grid; gap: .8rem; }
.mk-panel .mk-row { justify-content: flex-end; }
.mk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mk-grid2 label, .mk-sell label, .sc-new label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; }
.mk-grid2 label small, .mk-sell label small, .sc-new label small { font-weight: 500; color: var(--js-mut); }
.mk-grid2 input, .mk-grid2 select, .mk-sell input:not([type=checkbox]):not([type=radio]):not([type=file]), .mk-sell select, .mk-sell textarea, .sc-new textarea, .sc-new select, .mk-offer textarea {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--js-line); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .95rem; font-weight: 500; }
.mk-sell textarea, .sc-new textarea, .mk-offer textarea { resize: vertical; line-height: 1.5; }
.mk-check { display: flex !important; align-items: center; gap: .5rem; font-weight: 600 !important; font-size: .9rem !important; cursor: pointer; }
.mk-check input { width: 18px; height: 18px; accent-color: var(--amber); }
.mk-routechips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; } .mk-routechips:empty { display: none; }
.mk-routechips span { padding: .2rem .5rem; border-radius: 6px; background: var(--js-hi); font-weight: 800; font-size: .8rem; } .mk-routechips .js-i { width: 12px; height: 12px; color: var(--js-mut); }
.mk-mapbox { margin-top: .7rem; padding: .9rem; border: 1px solid var(--js-line); border-radius: var(--js-r); background: var(--js-card); position: relative; }
.mk-map__h { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; margin-bottom: .4rem; } .mk-map__h span { color: var(--js-mut); }
.mk-heat [data-st] { cursor: pointer; } .mk-heat [data-st].is-sel { stroke: var(--amber); stroke-width: 3; }
.mk-map__tip { position: absolute; left: 1rem; bottom: .8rem; margin: 0; padding: .3rem .6rem; border-radius: 8px; background: #141414; color: #fff; font-size: .8rem; font-weight: 700; pointer-events: none; }
.mk-head { display: flex; align-items: baseline; justify-content: space-between; margin: 1.2rem 0 .6rem; }
.mk-head h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; } .mk-head h2 small { font-family: var(--font-body); font-weight: 500; color: var(--js-mut); font-size: .9rem; }
.mk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.mk-list--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; }
.mk-list--row::-webkit-scrollbar { display: none; }
.mk-list .js-empty { grid-column: 1 / -1; }
.mk-card { display: grid; align-content: start; border: 1px solid var(--js-line); border-radius: 14px; overflow: hidden; background: var(--js-card); color: var(--color-text); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.mk-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(0 0 0 / .12); border-color: color-mix(in oklab, var(--amber) 50%, var(--js-line)); }
.mk-card__img { position: relative; aspect-ratio: 1; background: var(--color-surface-2); overflow: hidden; }
.mk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.mk-card:hover .mk-card__img img { transform: scale(1.04); }
.mk-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--js-mut); } .mk-card__ph .js-i { width: 40px; height: 40px; }
.mk-card__n { position: absolute; left: .5rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 6px; background: rgb(0 0 0 / .6); color: #fff; font-size: .72rem; font-weight: 700; }
.mk-card__n .js-i { width: 12px; height: 12px; }
.mk-heart { position: absolute; top: .45rem; right: .45rem; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: #141414; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .2); transition: transform .15s; }
.mk-heart:hover { transform: scale(1.08); } .mk-heart .js-i { width: 19px; height: 19px; }
.mk-heart.is-on, .mk-heart2.is-on { color: #e11d48; } .mk-heart.is-on .js-i path, .mk-heart2.is-on .js-i path { fill: currentColor; }
.mk-flag { position: absolute; top: .5rem; left: .5rem; padding: .2rem .5rem; border-radius: 6px; background: var(--amber); color: #141414; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mk-flag--sold { background: #141414; color: #fff; } .mk-flag--lg { top: .9rem; left: .9rem; font-size: .85rem; padding: .35rem .7rem; }
.mk-card.is-sold .mk-card__img img { filter: grayscale(.7) brightness(.85); }
.mk-card__b { display: grid; gap: .15rem; padding: .65rem .75rem .75rem; min-width: 0; }
.mk-price { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; display: flex; align-items: baseline; gap: .35rem; }
.mk-price small { font-family: var(--font-body); font-size: .7rem; font-weight: 800; color: var(--color-accent-text); letter-spacing: .05em; }
.mk-price s { font-family: var(--font-body); font-size: .8rem; color: var(--js-mut); font-weight: 600; order: 2; }
.mk-card__t { font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-card__m { display: flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--js-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card__m .js-i { width: 13px; height: 13px; flex: none; }
.mk-card--sk .mk-card__img { animation: jsPulse 1.4s ease-in-out infinite; } .mk-card--sk i { display: block; height: 12px; border-radius: 6px; background: var(--color-surface-2); animation: jsPulse 1.4s ease-in-out infinite; } .mk-card--sk i:nth-child(2) { width: 80%; } .mk-card--sk i:nth-child(3) { width: 50%; }
@keyframes jsPulse { 50% { opacity: .55; } }
.mk-empty .btn { margin-top: .3rem; }
.mk-alerts, .mk-reviews { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .5rem; }
.mk-alerts li { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem .9rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--js-card); }
.mk-alerts li > .js-i { width: 18px; height: 18px; color: var(--color-accent-text); } .mk-alerts li span { flex: 1; font-weight: 600; }
.mk-reviews li { display: flex; gap: .7rem; padding: .8rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--js-card); } .mk-reviews span { display: grid; gap: .15rem; } .mk-reviews small { color: var(--js-mut); } .mk-reviews p { margin: .2rem 0 0; }
.mk-stars { letter-spacing: 1px; } .mk-star { color: var(--js-line); } .mk-star.is-on { color: var(--amber); }
.mk-profcta { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1px dashed var(--js-line); border-radius: var(--js-r); margin-top: 1rem; }
.mk-profcta > .js-i { width: 26px; height: 26px; color: var(--color-accent-text); } .mk-profcta span { flex: 1; display: grid; } .mk-profcta small { color: var(--js-mut); }

/* listing detail */
.mk-back { display: inline-flex; align-items: center; gap: .3rem; color: var(--js-mut); font-weight: 700; font-size: .9rem; text-decoration: none; margin-bottom: .7rem; }
.mk-back:hover { color: var(--color-text); } .mk-back .js-i { width: 16px; height: 16px; }
.mk-warn { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 10px; background: color-mix(in oklab, #ef4444 14%, transparent); font-weight: 700; margin: 0 0 .8rem; }
.mk-det { display: grid; gap: 1.1rem; }
.mk-gal { position: relative; border-radius: var(--js-r); overflow: hidden; background: #0d0d0e; aspect-ratio: 4 / 3; }
.mk-gal__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-gal__track::-webkit-scrollbar { display: none; }
.mk-gal__i { flex: 0 0 100%; height: 100%; scroll-snap-align: start; border: 0; padding: 0; background: none; cursor: zoom-in; }
.mk-gal__i img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-gal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .9); color: #141414; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.mk-gal__nav--p { left: .7rem; } .mk-gal__nav--n { right: .7rem; } .mk-gal__nav .js-i { width: 20px; height: 20px; }
.mk-gal__c { position: absolute; right: .8rem; bottom: .8rem; padding: .2rem .55rem; border-radius: 6px; background: rgb(0 0 0 / .6); color: #fff; font-size: .78rem; font-weight: 700; }
.mk-thumbs { display: flex; gap: .4rem; overflow-x: auto; margin-top: .5rem; scrollbar-width: none; }
.mk-thumbs button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; opacity: .7; }
.mk-thumbs button.is-on { border-color: var(--amber); opacity: 1; } .mk-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mk-info { display: grid; gap: .55rem; align-content: start; }
.mk-cat-l { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; font-weight: 700; color: var(--js-mut); } .mk-cat-l .js-i { width: 16px; height: 16px; color: var(--color-accent-text); }
.mk-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.1; margin: 0; }
.mk-bigprice { font-family: var(--font-display); font-size: 2rem; font-weight: 800; margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mk-bigprice small { font-family: var(--font-body); font-size: .9rem; font-weight: 700; color: var(--color-accent-text); }
.mk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin: 0; font-size: .86rem; color: var(--js-mut); } .mk-meta .js-i { width: 14px; height: 14px; }
.mk-pc { padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--js-line); background: var(--color-surface-2); display: grid; gap: .45rem; }
.mk-pc p { margin: 0; font-size: .85rem; color: var(--js-mut); }
.mk-pc__h { display: flex; align-items: center; gap: .4rem; } .mk-pc__h .js-i { width: 17px; height: 17px; color: var(--color-accent-text); }
.mk-pc--great { border-color: #22c55e; } .mk-pc--great .mk-pc__h b { color: #15803d; }
[data-theme="dark"] .mk-pc--great .mk-pc__h b { color: #4ade80; }
.mk-pc__bar { position: relative; height: 8px; border-radius: 4px; background: var(--js-line); margin: .3rem 0; }
.mk-pc__bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in oklab, var(--amber) 60%, transparent); }
.mk-pc__bar em { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--color-text); border: 3px solid var(--color-surface); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.mk-pc--none p { color: var(--js-mut); }
.mk-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mk-acts .btn { flex: 1 1 auto; justify-content: center; }
.mk-heart2 { border: 1px solid var(--js-line) !important; } .mk-acts .js-iconbtn { width: 44px; height: 44px; border: 1px solid var(--js-line); }
.mk-quick, .dm-quick { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; flex-wrap: wrap; }
.mk-quick button, .dm-quick button { flex: none; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--js-line); background: var(--js-card); color: var(--color-text); font: 600 .84rem/1.2 var(--font-body); cursor: pointer; }
.mk-quick button:hover, .dm-quick button:hover { border-color: var(--amber); background: var(--js-hi); }
.mk-owner { padding: .9rem; border-radius: 12px; border: 1px dashed var(--amber); background: var(--js-hi); display: grid; gap: .6rem; }
.mk-owner p { margin: 0; } .mk-owner__h { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 700; } .mk-owner__h .js-i { width: 15px; height: 15px; }
.mk-danger { color: #dc2626 !important; }
.mk-body { display: grid; gap: .6rem; margin-top: 1rem; }
.mk-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: 0; }
.mk-specs div { padding: .6rem .75rem; border: 1px solid var(--js-line); border-radius: 10px; background: var(--js-card); }
.mk-specs dt { font-size: .74rem; font-weight: 700; color: var(--js-mut); text-transform: uppercase; letter-spacing: .06em; } .mk-specs dd { margin: .1rem 0 0; font-weight: 700; }
.mk-desc { white-space: pre-line; line-height: 1.6; }
.mk-voice .js-audio { max-width: 420px; }
.mk-seller { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--js-line); border-radius: var(--js-r); background: var(--js-card); }
.mk-seller__u { display: flex; align-items: center; gap: .7rem; color: var(--color-text); text-decoration: none; } .mk-seller__u span { display: grid; } .mk-seller__u small { color: var(--js-mut); }
.mk-trust { display: flex; align-items: center; gap: .8rem; }
.mk-ring { --p: 0; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--amber) calc(var(--p) * 1%), var(--js-line) 0); position: relative; flex: none; }
.mk-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--js-card); }
.mk-ring b { position: relative; font-family: var(--font-display); font-size: 1.2rem; }
.mk-trust > div:last-child { display: grid; } .mk-trust__t { font-family: var(--font-display); font-size: 1.05rem; } .mk-trust small { color: var(--js-mut); } .mk-trust__r { font-size: .85rem; font-weight: 700; }
.mk-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem .8rem; }
.mk-facts li { display: flex; align-items: center; gap: .4rem; font-size: .88rem; } .mk-facts .js-i { width: 16px; height: 16px; color: var(--color-accent-text); }
.mk-how summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--color-accent-text); }
.mk-how p { font-size: .85rem; color: var(--js-mut); margin: .5rem 0; } .mk-how ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.mk-how li { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .3rem 0; border-bottom: 1px solid var(--js-line); }
.mk-safe { padding: .9rem 1rem; border-radius: var(--js-r); background: color-mix(in oklab, #22c55e 10%, var(--js-card)); border: 1px solid color-mix(in oklab, #22c55e 35%, var(--js-line)); }
.mk-safe b { display: flex; align-items: center; gap: .4rem; } .mk-safe .js-i { width: 18px; height: 18px; color: #16a34a; }
.mk-safe ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .88rem; }
.mk-report { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0 0; font-size: .85rem; color: var(--js-mut); } .mk-report .js-linkbtn { color: var(--js-mut); }
.mk-det--sk .mk-gal { animation: jsPulse 1.4s infinite; } .mk-det--sk .mk-info i { display: block; height: 18px; border-radius: 8px; background: var(--color-surface-2); animation: jsPulse 1.4s infinite; } .mk-det--sk .mk-info i:first-child { width: 70%; height: 28px; }
@media (min-width: 1100px) { .mk-det { grid-template-columns: 1.15fr 1fr; align-items: start; } .mk-det__media { position: sticky; top: 90px; } }
.mk-lb { position: relative; display: grid; place-items: center; min-height: 60vh; } .mk-lb img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.mk-lb__n { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .9); color: #141414; display: grid; place-items: center; cursor: pointer; } .mk-lb__n--p { left: .5rem; } .mk-lb__n--n { right: .5rem; }
.mk-lb__c { position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: .85rem; }

/* sell form */
.mk-sell { display: grid; gap: 1rem; }
.mk-sell__step { display: grid; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--js-line); }
.mk-sell__step > b { font-family: var(--font-display); font-size: 1rem; } .mk-sell__step > b small { font-family: var(--font-body); font-weight: 500; color: var(--js-mut); font-size: .82rem; margin-left: .3rem; }
.mk-catpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; }
.mk-catpick button { display: flex; align-items: center; gap: .5rem; padding: .65rem .7rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font: 700 .84rem/1.2 var(--font-body); text-align: left; cursor: pointer; }
.mk-catpick button .js-i { width: 20px; height: 20px; flex: none; color: var(--color-accent-text); }
.mk-catpick button[aria-checked="true"] { border-color: var(--amber); background: var(--js-hi); box-shadow: inset 0 0 0 1px var(--amber); }
.mk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.mk-ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--js-line); }
.mk-ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-ph.is-cover { border: 2px solid var(--amber); }
.mk-ph__x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .65); color: #fff; display: grid; place-items: center; cursor: pointer; } .mk-ph__x .js-i { width: 14px; height: 14px; }
.mk-ph__cv { position: absolute; left: 4px; bottom: 4px; padding: .15rem .4rem; border-radius: 6px; border: 0; background: rgb(0 0 0 / .65); color: #fff; font: 700 .68rem/1.2 var(--font-body); cursor: pointer; }
span.mk-ph__cv { background: var(--amber); color: #141414; cursor: default; }
.mk-ph--add { display: grid; place-items: center; align-content: center; gap: .3rem; border: 2px dashed var(--js-line); background: none; color: var(--js-mut); font: 700 .8rem/1.2 var(--font-body); cursor: pointer; }
.mk-ph--add:hover { border-color: var(--amber); color: var(--color-text); } .mk-ph--add .js-i { width: 26px; height: 26px; }
.mk-magic { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px; border: 1px solid var(--amber); background: linear-gradient(120deg, var(--js-hi), transparent); color: var(--color-text); font: 700 .9rem/1.2 var(--font-body); cursor: pointer; }
.mk-magic .js-i { width: 18px; height: 18px; color: var(--color-accent-text); }
.mk-money { position: relative; display: block; } .mk-money i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 800; color: var(--js-mut); } .mk-money input { padding-left: 1.6rem !important; }
.mk-voicebox { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mk-voicebox > span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; } .mk-voicebox audio { height: 36px; max-width: 100%; }
.mk-rec { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem .9rem; border-radius: 12px; border: 1px dashed var(--js-line); background: none; color: var(--color-text); text-align: left; cursor: pointer; font: inherit; }
.mk-rec > .js-i { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--js-hi); color: var(--color-accent-text); flex: none; }
.mk-rec span { display: grid; } .mk-rec small { color: var(--js-mut); font-size: .82rem; } .mk-rec em { font-style: normal; color: #ef4444; }
.mk-rec.is-rec { border-color: #ef4444; } .mk-rec.is-rec > .js-i { background: #ef4444; color: #fff; animation: jsPulse 1.2s infinite; }
.mk-sell__go { width: 100%; justify-content: center; }
.mk-rules { padding-left: 1.1rem; display: grid; gap: .4rem; margin: .4rem 0 .8rem; font-size: .92rem; }
.mk-offer { display: grid; gap: .8rem; }
.mk-offer__in { display: flex; align-items: center; gap: .3rem; padding: .5rem .9rem; border: 2px solid var(--amber); border-radius: 14px; }
.mk-offer__in span { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--js-mut); }
.mk-offer__in input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--color-text); outline: none; }
.mk-offer .btn { justify-content: center; }
.mk-buyers { display: grid; gap: .4rem; }
.mk-rate { display: flex; gap: .3rem; } .mk-rate button { font-size: 2rem; line-height: 1; border: 0; background: none; color: var(--js-line); cursor: pointer; padding: 0 .1rem; } .mk-rate button.is-on { color: var(--amber); }
.mk-sidecard .js-card__h h3 { display: flex; align-items: center; gap: .4rem; } .mk-sidecard .js-card__h .js-i { width: 17px; height: 17px; color: var(--color-accent-text); }
.mk-side { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mk-side a { display: grid; gap: .3rem; color: var(--color-text); text-decoration: none; min-width: 0; }
.mk-side img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--color-surface-2); }
.mk-side span { display: grid; min-width: 0; } .mk-side b { font-size: .9rem; } .mk-side small { font-size: .78rem; color: var(--js-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =================== Messenger =================== */
.dm-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: 2px; border: 1px solid var(--js-line); border-radius: var(--js-r); background: var(--js-card); overflow: hidden; }
.dm-list a { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--js-line); }
.dm-list li:last-child a { border-bottom: 0; } .dm-list a:hover { background: var(--color-surface-2); }
.dm-list a.is-un .dm-l__last { color: var(--color-text); font-weight: 700; }
.dm-av { position: relative; flex: none; }
.dm-on { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid var(--js-card); }
.dm-on--i { position: static; display: inline-block; width: 8px; height: 8px; border: 0; margin-right: .3rem; }
.dm-l__b { flex: 1; min-width: 0; display: grid; gap: .1rem; } .dm-l__b b { display: flex; align-items: center; gap: .2rem; }
.dm-l__item { display: flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--color-accent-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-l__item .js-i { width: 12px; height: 12px; flex: none; }
.dm-l__last { font-size: .88rem; color: var(--js-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-l__r { display: grid; justify-items: end; gap: .25rem; flex: none; } .dm-l__r small { font-size: .75rem; color: var(--js-mut); }
.dm-l__r img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.dm-un { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--amber); color: #141414; font-size: .72rem; display: grid; place-items: center; }
.dm-th { display: grid; grid-template-rows: auto auto 1fr auto auto auto; height: calc(100dvh - 190px); min-height: 460px; border: 1px solid var(--js-line); border-radius: var(--js-r); background: var(--js-card); overflow: hidden; }
.dm-th__h { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-bottom: 1px solid var(--js-line); }
.dm-th__who { flex: 1; min-width: 0; } .dm-th__who a { display: flex; align-items: center; gap: .6rem; color: var(--color-text); text-decoration: none; } .dm-th__who span { display: grid; min-width: 0; } .dm-th__who b { display: flex; align-items: center; gap: .2rem; } .dm-th__who small { color: var(--js-mut); font-size: .8rem; display: flex; align-items: center; }
.dm-th__item a { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-bottom: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.dm-th__item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; } .dm-th__item span { flex: 1; display: grid; min-width: 0; } .dm-th__item b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-th__item small { color: var(--js-mut); font-weight: 700; } .dm-th__item .js-i { width: 18px; height: 18px; color: var(--js-mut); }
.dm-th__item p { padding: .5rem .9rem; margin: 0; }
.dm-th__msgs { overflow-y: auto; padding: 1rem .9rem; display: flex; flex-direction: column; gap: .35rem; overscroll-behavior: contain; }
.dm-day { align-self: center; margin: .6rem 0 .3rem; font-size: .74rem; font-weight: 700; color: var(--js-mut); text-transform: uppercase; letter-spacing: .08em; }
.dm-msg { display: grid; max-width: min(78%, 460px); gap: .15rem; }
.dm-msg.is-me { align-self: flex-end; justify-items: end; } .dm-msg.is-them { align-self: flex-start; }
.dm-bub { padding: .55rem .85rem; border-radius: 18px; line-height: 1.45; word-break: break-word; }
.dm-bub p { margin: 0; }
.is-me .dm-bub { background: var(--amber); color: #141414; border-bottom-right-radius: 6px; } .is-me .dm-bub a { color: #141414; }
.is-them .dm-bub { background: var(--color-surface-2); border-bottom-left-radius: 6px; }
.dm-msg--photo .dm-bub, .dm-msg--offer .dm-bub { padding: 0; background: none; }
.dm-photo { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 16px; overflow: hidden; display: block; } .dm-photo img { display: block; max-width: 260px; max-height: 320px; object-fit: cover; }
.dm-of { display: grid; gap: .25rem; padding: .85rem 1rem; border-radius: 16px; border: 2px solid var(--amber); background: var(--js-card); min-width: 210px; }
.dm-of small { font-weight: 700; color: var(--js-mut); } .dm-of b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.dm-of__st { font-size: .8rem; font-weight: 800; color: var(--js-mut); } .dm-of__st.is-ok { color: #16a34a; } .dm-of__st.is-no { color: #dc2626; }
.dm-of__a { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.dm-meta { font-size: .72rem; color: var(--js-mut); padding: 0 .3rem; display: flex; align-items: center; gap: .3rem; }
.dm-rep { font-size: .72rem; color: var(--js-mut); font-weight: 600; opacity: 0; transition: opacity .15s; } .dm-msg:hover .dm-rep, .dm-rep:focus-visible { opacity: 1; }
@media (hover: none) { .dm-rep { opacity: .7; } }
.dm-flag { display: flex; gap: .45rem; align-items: flex-start; margin: .2rem 0 .3rem; padding: .55rem .7rem; border-radius: 10px; font-size: .82rem; line-height: 1.4; background: color-mix(in oklab, var(--amber) 18%, transparent); border: 1px solid color-mix(in oklab, var(--amber) 55%, transparent); }
.dm-flag .js-i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.dm-flag--code, .dm-flag--pay, .dm-flag--ship { background: color-mix(in oklab, #ef4444 12%, transparent); border-color: color-mix(in oklab, #ef4444 45%, transparent); }
.dm-sys { align-self: center; display: inline-flex; align-items: center; gap: .4rem; margin: .4rem 0; padding: .4rem .8rem; border-radius: 999px; background: var(--color-surface-2); font-size: .82rem; font-weight: 700; text-align: center; }
.dm-sys .js-i { width: 15px; height: 15px; } .dm-sys--accept { background: color-mix(in oklab, #22c55e 16%, transparent); }
.dm-hello { margin: auto; display: grid; justify-items: center; gap: .4rem; text-align: center; padding: 1rem; } .dm-hello p { margin: 0; color: var(--js-mut); max-width: 34ch; font-size: .9rem; }
.dm-typing { display: flex; gap: 4px; padding: 0 1.2rem .4rem; } .dm-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--js-mut); animation: dmT 1.2s infinite; } .dm-typing i:nth-child(2) { animation-delay: .15s; } .dm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dmT { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.dm-quick { padding: 0 .8rem .5rem; flex-wrap: nowrap; }
.dm-comp { display: flex; align-items: flex-end; gap: .25rem; padding: .5rem .6rem; border-top: 1px solid var(--js-line); }
.dm-comp textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; padding: .6rem .9rem; border: 1px solid var(--js-line); border-radius: 20px; background: var(--color-surface); color: var(--color-text); font: inherit; line-height: 1.35; }
.dm-send { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--amber); color: #141414; display: grid; place-items: center; cursor: pointer; } .dm-send .js-i { width: 19px; height: 19px; }
@media (max-width: 820px) { .dm-th { height: calc(100dvh - 150px); margin: 0 -.25rem; } .dm-msg { max-width: 86%; } }

/* =================== Scrolls =================== */
.sc-intro { margin: .2rem 0 .9rem; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.sc-grid .js-empty { grid-column: 1 / -1; }
.sc-tile { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; color: #fff; text-decoration: none; }
.sc-tile img, .sc-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .sc-tile:hover img { transform: scale(1.04); }
.sc-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / .7)); }
.sc-tile__v, .sc-tile__u { position: absolute; z-index: 1; left: .5rem; display: flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; }
.sc-tile__v { bottom: .5rem; } .sc-tile__u { top: .5rem; text-shadow: 0 1px 4px rgb(0 0 0 / .6); } .sc-tile__v .js-i { width: 13px; height: 13px; }
.js-scrollcard { position: relative; display: block; width: min(260px, 70%); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; margin-top: .6rem; }
.js-scrollcard img, .js-scrollcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.js-scrollcard__b { position: absolute; top: .5rem; left: .5rem; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .6); color: #fff; font-size: .75rem; font-weight: 800; } .js-scrollcard__b .js-i { width: 13px; height: 13px; }
.js-scrollcard__p { position: absolute; inset: 0; display: grid; place-items: center; } .js-scrollcard__p .js-i { width: 58px; height: 58px; padding: 16px; border-radius: 50%; background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(6px); }
.js-scrollcard__v { position: absolute; left: .5rem; bottom: .5rem; color: #fff; font-size: .75rem; font-weight: 700; text-shadow: 0 1px 4px rgb(0 0 0 / .7); }
.sc-wrap { position: fixed; inset: 0; z-index: 110; background: #000; color: #fff; }
.sc-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(.6rem + env(safe-area-inset-top)) .8rem .6rem; background: linear-gradient(rgb(0 0 0 / .55), transparent); pointer-events: none; }
.sc-top b { display: flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-size: 1.15rem; } .sc-top b .js-i { width: 20px; height: 20px; color: var(--amber); }
.sc-top__r { display: flex; gap: .3rem; pointer-events: auto; }
.sc-ib { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); } .sc-ib:hover { background: rgb(255 255 255 / .24); } .sc-ib .js-i { width: 21px; height: 21px; }
.sc-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.sc-feed::-webkit-scrollbar { display: none; }
.sc-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; }
.sc-vid { position: relative; height: 100%; width: 100%; max-width: calc(100dvh * 9 / 16); display: grid; place-items: center; background: #000; }
.sc-vid video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 821px) { .sc-vid video { object-fit: contain; } .sc-vid { border-radius: 0; } }
.sc-pp { position: absolute; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgb(0 0 0 / .45); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; pointer-events: none; }
.sc-pp .js-i { width: 34px; height: 34px; } .is-paused .sc-pp { opacity: 1; transform: none; }
.sc-rail { position: absolute; z-index: 2; right: max(.6rem, calc(50% - 100dvh * 9 / 32 - 74px)); bottom: calc(6.5rem + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 1rem; }
.sc-rail__av { border-radius: 50%; box-shadow: 0 0 0 2px #fff; display: block; }
.sc-act { display: grid; justify-items: center; gap: .2rem; border: 0; background: none; color: #fff; cursor: pointer; font: 700 .76rem/1 var(--font-body); text-decoration: none; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.sc-act .js-i { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: rgb(255 255 255 / .14); backdrop-filter: blur(8px); transition: transform .15s; }
.sc-act:active .js-i { transform: scale(.9); }
.sc-act.is-on .js-i { color: #ff3b5c; } .sc-act.is-on .js-i path { fill: currentColor; }
.sc-cap { position: absolute; z-index: 2; left: max(.9rem, calc(50% - 100dvh * 9 / 32 + .9rem)); right: 5.5rem; bottom: calc(1.6rem + env(safe-area-inset-bottom)); display: grid; gap: .25rem; text-shadow: 0 1px 6px rgb(0 0 0 / .7); max-width: 460px; }
.sc-cap a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; font-size: 1.02rem; } .sc-cap small { opacity: .8; font-size: .8rem; } .sc-cap p { margin: .2rem 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sc-cap p a { font-size: inherit; color: var(--amber); }
.sc-slide::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgb(0 0 0 / .65)); pointer-events: none; z-index: 1; }
.sc-prog { position: absolute; z-index: 2; left: max(0px, calc(50% - 100dvh * 9 / 32)); right: max(0px, calc(50% - 100dvh * 9 / 32)); bottom: env(safe-area-inset-bottom); height: 3px; background: rgb(255 255 255 / .2); }
.sc-prog i { display: block; height: 100%; width: 0; background: var(--amber); }
.sc-heart { position: absolute; z-index: 4; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: #ff3b5c; pointer-events: none; animation: scH .9s ease-out forwards; } .sc-heart .js-i { width: 100%; height: 100%; } .sc-heart path { fill: currentColor; }
@keyframes scH { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1) translateY(-40px); opacity: 0; } }
.sc-new { display: grid; gap: .9rem; }
.sc-pick__b { width: 100%; display: grid; justify-items: center; gap: .3rem; padding: 1.6rem 1rem; border: 2px dashed var(--js-line); border-radius: 16px; background: none; color: var(--color-text); cursor: pointer; font: inherit; }
.sc-pick__b:hover { border-color: var(--amber); } .sc-pick__b .js-i { width: 38px; height: 38px; color: var(--color-accent-text); } .sc-pick__b small { color: var(--js-mut); }
.sc-prev { display: grid; justify-items: center; gap: .4rem; } .sc-prev video { width: 160px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #000; } .sc-prev span { font-weight: 700; font-size: .85rem; }
.sc-up { display: grid; gap: .3rem; } .sc-up__bar { height: 8px; border-radius: 4px; background: var(--js-line); overflow: hidden; } .sc-up__bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s; } .sc-up small { color: var(--js-mut); font-weight: 700; }
.sc-new .btn { justify-content: center; }
@media (max-width: 560px) {
  .mk-grid2 { grid-template-columns: 1fr; }
  .mk-list { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .mk-list--row { grid-template-columns: none; grid-auto-columns: 46%; }
  .mk-fbtn--alert { margin-left: 0; }
  .mk-card__b { padding: .55rem .6rem .65rem; } .mk-price { font-size: 1rem; }
  .js-sh__grid { grid-template-columns: repeat(4, 1fr); }
  .mk-acts .btn { flex: 1 1 100%; }
  .sc-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sc-heart, .dm-typing i, .mk-card--sk *, .mk-rec.is-rec > .js-i { animation: none; } .mk-card, .mk-card__img img { transition: none; } }

/* =================== Jimbo Market: Facebook Marketplace-style layout =================== */
.js-app[data-view="market"] .js-shell, .js-app[data-view="mk"] .js-shell { grid-template-columns: minmax(0, 1fr); max-width: 1440px; }
.js-app[data-view="market"] .js-rail, .js-app[data-view="market"] .js-side, .js-app[data-view="mk"] .js-rail, .js-app[data-view="mk"] .js-side { display: none; }
.js-app[data-view="market"] .js-fab, .js-app[data-view="mk"] .js-fab { display: none; }
.fm { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.fm-side { position: sticky; top: 76px; max-height: calc(100dvh - 92px); overflow-y: auto; display: grid; gap: .9rem; padding: 1rem .9rem 1.25rem; background: var(--js-card); border: 1px solid var(--js-line); border-radius: var(--js-r); scrollbar-width: thin; }
.fm-side__h { display: flex; align-items: center; justify-content: space-between; }
.fm-side__h h1 { font-family: var(--font-display); font-size: 1.55rem; margin: 0; }
.fm-side__x { display: none !important; }
.fm-search { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; height: 42px; border-radius: 999px; background: var(--color-surface-2); }
.fm-search .js-i { width: 18px; height: 18px; color: var(--js-mut); flex: none; }
.fm-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .98rem; color: var(--color-text); outline: none; }
.fm-nav, .fm-cats { display: grid; gap: 2px; }
.fm-nav a, .fm-cats a { display: flex; align-items: center; gap: .75rem; padding: .5rem .55rem; border-radius: 10px; color: var(--color-text); text-decoration: none; font-weight: 600; font-size: .98rem; }
.fm-nav a:hover, .fm-cats a:hover { background: var(--color-surface-2); }
.fm-nav a.is-on, .fm-cats a.is-on { background: var(--js-hi); }
.fm-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-2); }
.fm-ic .js-i { width: 20px; height: 20px; }
.fm-nav a.is-on .fm-ic, .fm-cats a.is-on .fm-ic { background: var(--amber); color: #141414; }
.fm-cats a span:not(.fm-ic) { flex: 1; } .fm-cats small { color: var(--js-mut); font-weight: 600; font-size: .8rem; }
.fm-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e11d48; color: #fff; font-size: .72rem; display: grid; place-items: center; }
.fm-create { width: 100%; justify-content: center; }
.fm-sec { display: grid; gap: .55rem; padding-top: .9rem; border-top: 1px solid var(--js-line); }
.fm-sec h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.fm-f { display: grid; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--js-mut); }
.fm-f select, .fm-price2 input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--js-line); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .92rem; font-weight: 500; }
.fm-price2 { display: flex; align-items: center; gap: .45rem; } .fm-price2 i { font-style: normal; font-weight: 600; }
.fm-free { font-size: .9rem !important; }
.fm-link { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; padding: .3rem 0; color: var(--color-accent-text); font: 700 .9rem/1.3 var(--font-body); cursor: pointer; text-align: left; }
.fm-link .js-i { width: 17px; height: 17px; flex: none; } .fm-link:hover { text-decoration: underline; }
.fm-link.is-on { color: var(--color-text); } .fm-link--mut { color: var(--js-mut); }
.fm-back { display: flex; align-items: center; gap: .35rem; padding-top: .9rem; border-top: 1px solid var(--js-line); color: var(--js-mut); font-weight: 700; font-size: .9rem; text-decoration: none; }
.fm-back .js-i { width: 16px; height: 16px; } .fm-back:hover { color: var(--color-text); }
.fm-scrim { display: none; }
.fm-main { min-width: 0; display: grid; gap: .9rem; align-content: start; }
.fm-mbar, .fm-chips { display: none; }
.fm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fm-head h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0; }
.fm-head h2 small { font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--js-mut); margin-left: .4rem; }
.fm-head a { color: var(--color-accent-text); font-weight: 700; text-decoration: none; font-size: .92rem; }
.fm-head--more { margin-top: 2rem; }
.fm-loc { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: 0; color: var(--color-accent-text); font: 700 .95rem/1.2 var(--font-body); cursor: pointer; }
.fm-loc .js-i { width: 16px; height: 16px; }
@media (min-width: 821px) { .fm-loc { color: var(--js-mut); } .fm-loc:hover { color: var(--color-accent-text); } }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem .9rem; }
.fm-grid .js-empty { grid-column: 1 / -1; }
.fm-card { display: grid; align-content: start; gap: .45rem; color: var(--color-text); text-decoration: none; min-width: 0; }
.fm-card__img { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--color-surface-2); }
.fm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }
.fm-card:hover .fm-card__img img { filter: brightness(.92); }
.fm-card:hover .fm-card__t { text-decoration: underline; }
.fm-card__b { display: grid; gap: .1rem; min-width: 0; }
.fm-price { font-size: 1.08rem; font-weight: 800; display: flex; align-items: baseline; gap: .45rem; }
.fm-price s { font-size: .85rem; font-weight: 600; color: var(--js-mut); }
.fm-card__t { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-card__m { font-size: .84rem; color: var(--js-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-heart { position: absolute; top: .45rem; right: .45rem; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: #141414; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 1px 6px rgb(0 0 0 / .2); }
.fm-heart .js-i { width: 18px; height: 18px; }
.fm-card:hover .fm-heart, .fm-heart:focus-visible, .fm-heart.is-on { opacity: 1; }
@media (hover: none) { .fm-heart { opacity: 1; } }
.fm-heart.is-on, .fm-ib.is-on { color: #e11d48; } .fm-heart.is-on .js-i path, .fm-ib.is-on .js-i path { fill: currentColor; }
.fm-flag { position: absolute; left: .5rem; top: .5rem; padding: .2rem .55rem; border-radius: 6px; background: var(--amber); color: #141414; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.fm-flag--sold { background: #141414; color: #fff; } .fm-flag--lg { left: 1rem; top: 1rem; font-size: .9rem; padding: .35rem .75rem; z-index: 2; }
.fm-card.is-sold .fm-card__img img { filter: grayscale(.6) brightness(.85); }
.fm-card--sk .fm-card__img { animation: jsPulse 1.4s ease-in-out infinite; }
.fm-card--sk i { display: block; height: 12px; border-radius: 6px; background: var(--color-surface-2); animation: jsPulse 1.4s ease-in-out infinite; } .fm-card--sk i:first-child { width: 40%; height: 15px; } .fm-card--sk i:nth-child(2) { width: 85%; } .fm-card--sk i:nth-child(3) { width: 55%; }
.fm-tabs { display: flex; gap: .4rem; margin: .2rem 0 .3rem; }
.fm-tabs a { padding: .5rem 1rem; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text); font-weight: 700; font-size: .9rem; text-decoration: none; }
.fm-tabs a.is-on { background: var(--amber); color: #141414; }

/* listing page */
.fm-det { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0; border: 1px solid var(--js-line); border-radius: var(--js-r); overflow: hidden; background: var(--js-card); align-items: start; }
.fm-media { position: sticky; top: 76px; height: min(calc(100dvh - 100px), 760px); min-height: 420px; background: #0b0b0c; overflow: hidden; }
.fm-media__bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(34px) brightness(.45); transform: scale(1.1); }
.fm-media__track { position: relative; height: 100%; }
.fm-media .mk-gal__i { cursor: zoom-in; }
.fm-media .mk-gal__nav { z-index: 2; }
.fm-media__x { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .55); color: #fff; }
.fm-media__x .js-i { width: 20px; height: 20px; }
.fm-thumbs { position: absolute; left: 0; right: 0; bottom: .9rem; z-index: 2; display: flex; justify-content: center; gap: .4rem; padding: 0 1rem; overflow-x: auto; scrollbar-width: none; }
.fm-thumbs button { flex: none; width: 54px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .65; }
.fm-thumbs button.is-on { border-color: #fff; opacity: 1; } .fm-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.fm-panel { display: grid; gap: .9rem; align-content: start; padding: 1.1rem 1.2rem 1.5rem; border-left: 1px solid var(--js-line); min-width: 0; }
.fm-panel .mk-back { margin: 0; }
.fm-title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; margin: 0; }
.fm-bigprice { margin: -.4rem 0 0; font-size: 1.3rem; font-weight: 800; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.fm-bigprice s { font-size: .95rem; color: var(--js-mut); font-weight: 600; } .fm-bigprice small { font-size: .9rem; font-weight: 700; color: var(--color-accent-text); }
.fm-meta { margin: -.5rem 0 0; font-size: .88rem; color: var(--js-mut); }
.fm-acts { display: flex; gap: .45rem; }
.fm-acts__msg { flex: 1; justify-content: center; }
.fm-ib { width: 44px; height: 44px; flex: none; border-radius: 10px; border: 0; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text); cursor: pointer; }
.fm-ib:hover { filter: brightness(.95); } .fm-ib .js-i { width: 20px; height: 20px; }
.fm-block { display: grid; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--js-line); }
.fm-block h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: .4rem; } .fm-block h2 .js-i { width: 19px; height: 19px; }
.fm-block__h { display: flex; justify-content: space-between; align-items: baseline; } .fm-block__h a { color: var(--color-accent-text); font-weight: 700; font-size: .9rem; text-decoration: none; }
.fm-rows { margin: 0; display: grid; gap: .45rem; }
.fm-rows div { display: grid; grid-template-columns: 120px 1fr; gap: .8rem; font-size: .93rem; } .fm-rows dt { color: var(--js-mut); font-weight: 600; } .fm-rows dd { margin: 0; font-weight: 600; }
.fm-desc { font-size: .95rem; }
.fm-sub { display: flex; align-items: center; gap: .35rem; font-weight: 700; margin: .2rem 0 0; } .fm-sub .js-i { width: 17px; height: 17px; }
.fm-where { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: 0; font-weight: 700; } .fm-where .js-i { width: 17px; height: 17px; color: var(--color-accent-text); } .fm-where small { color: var(--js-mut); font-weight: 500; }
.fm-seller { display: flex; align-items: center; gap: .75rem; }
.fm-seller > div:nth-child(2) { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.fm-seller__n { font-weight: 800; color: var(--color-text); text-decoration: none; display: flex; align-items: center; gap: .2rem; } .fm-seller small { color: var(--js-mut); }
.fm-ring { width: 48px; height: 48px; } .fm-ring::before { inset: 5px; } .fm-ring b { font-size: .95rem; }
.fm-send { padding: 1rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface-2); }
.fm-send .mk-quick button { background: var(--js-card); }
.fm-send__row { display: flex; gap: .5rem; }
.fm-send__row input { flex: 1; min-width: 0; padding: .6rem .9rem; border: 1px solid var(--js-line); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; }
.fm-safe summary { cursor: pointer; list-style: none; } .fm-safe summary::-webkit-details-marker { display: none; }
.fm-det--sk .fm-media { animation: jsPulse 1.4s infinite; } .fm-det--sk .fm-panel i { display: block; height: 18px; border-radius: 8px; background: var(--color-surface-2); animation: jsPulse 1.4s infinite; } .fm-det--sk .fm-panel i:first-child { width: 70%; height: 30px; }
@media (max-width: 1180px) { .fm { grid-template-columns: 290px minmax(0, 1fr); gap: 1.25rem; } .fm-det { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 960px) { .fm-det { grid-template-columns: 1fr; } .fm-media { position: relative; top: 0; height: auto; aspect-ratio: 1; min-height: 0; } .fm-panel { border-left: 0; } }
@media (max-width: 820px) {
  .fm { grid-template-columns: 1fr; }
  .fm-side { position: fixed; z-index: 125; left: 0; right: 0; bottom: 0; top: auto; max-height: 86dvh; border-radius: 20px 20px 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -10px 40px rgb(0 0 0 / .3); }
  .fm.is-open .fm-side { transform: none; }
  .fm-side__x { display: inline-grid !important; }
  .fm-scrim { display: block; position: fixed; inset: 0; z-index: 124; background: rgb(0 0 0 / .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .fm.is-open .fm-scrim { opacity: 1; pointer-events: auto; }
  html.fm-lock, html.fm-lock body { overflow: hidden; }
  .fm-mbar { display: flex; align-items: center; justify-content: space-between; } .fm-mbar h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
  .fm-chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .fm-chips::-webkit-scrollbar { display: none; }
  .fm-chip { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .9rem; border-radius: 999px; border: 0; background: var(--color-surface-2); color: var(--color-text); font: 700 .88rem/1 var(--font-body); text-decoration: none; cursor: pointer; }
  .fm-chip .js-i { width: 16px; height: 16px; } .fm-chip.is-on { background: var(--amber); color: #141414; }
  .fm-grid { grid-template-columns: 1fr 1fr; gap: 1rem .5rem; }
  .fm-head h2 { font-size: 1.15rem; }
  .fm-det { margin: 0 -1rem; border-radius: 0; border-left: 0; border-right: 0; }
  .fm-panel { padding: 1rem; }
  .fm-title { font-size: 1.35rem; }
}
@media (min-width: 821px) {
  body.js-page:has(.header:not(.is-hidden)) .fm-side { top: 152px; max-height: calc(100dvh - 168px); }
  body.js-page:has(.header:not(.is-hidden)) .fm-media { top: 152px; height: min(calc(100dvh - 176px), 760px); }
  .fm-side, .fm-media { transition: top .35s var(--ease); }
}

/* =================== Messenger-style chats =================== */
.js-app[data-view="dm"] .js-shell { grid-template-columns: minmax(0, 1fr); max-width: 1440px; }
.js-app[data-view="dm"] .js-rail, .js-app[data-view="dm"] .js-side, .js-app[data-view="dm"] .js-fab { display: none; }
.ms { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100dvh - 170px); min-height: 520px; border: 1px solid var(--js-line); border-radius: var(--js-r); background: var(--js-card); overflow: hidden; }
.ms-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--js-line); }
.ms-list__h { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .5rem; }
.ms-list__h h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.ms-list__h .js-iconbtn { background: var(--color-surface-2); }
.ms-search { display: flex; align-items: center; gap: .5rem; margin: 0 1rem; padding: 0 .85rem; height: 40px; border-radius: 999px; background: var(--color-surface-2); }
.ms-search .js-i { width: 17px; height: 17px; color: var(--js-mut); flex: none; }
.ms-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--color-text); outline: none; }
.ms-tabs { display: flex; gap: .35rem; padding: .7rem 1rem .5rem; }
.ms-tabs a { padding: .4rem .85rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--color-text); text-decoration: none; }
.ms-tabs a:hover { background: var(--color-surface-2); }
.ms-tabs a.is-on { background: var(--js-hi); color: var(--color-accent-text); }
.ms-rows { list-style: none; margin: 0; padding: 0 .5rem .75rem; overflow-y: auto; flex: 1; }
.ms-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 10px; color: var(--color-text); text-decoration: none; }
.ms-row:hover { background: var(--color-surface-2); } .ms-row.is-on { background: var(--js-hi); }
.ms-av { position: relative; flex: none; display: inline-block; line-height: 0; }
.ms-av .dm-on { right: 1px; bottom: 1px; width: 14px; height: 14px; border-width: 3px; }
.ms-av--item { width: 52px; height: 52px; }
.ms-av--item img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ms-av--item > :last-child { position: absolute; right: -3px; bottom: -3px; border: 2px solid var(--js-card); border-radius: 50%; }
.ms-av--item > :last-child img, .ms-av--item > :last-child { width: 24px !important; height: 24px !important; }
.ms-av--sm .dm-on { width: 12px; height: 12px; border-width: 2px; }
.ms-row__b { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ms-row__b b { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row__b > span { display: flex; min-width: 0; font-size: .84rem; color: var(--js-mut); }
.ms-row__b em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-row__b small { flex: none; font-size: inherit; }
.ms-row.is-un b, .ms-row.is-un em { font-weight: 800; color: var(--color-text); }
.ms-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex: none; }
.ms-load, .ms-empty { padding: 2rem 1rem; text-align: center; color: var(--js-mut); font-size: .9rem; display: grid; justify-items: center; }
.ms-chat { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ms-none { margin: auto; display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 2rem; max-width: 380px; }
.ms-none > .js-i { width: 54px; height: 54px; padding: 13px; border-radius: 50%; background: var(--js-hi); color: var(--color-accent-text); }
.ms-none h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; } .ms-none p { margin: 0 0 .4rem; color: var(--js-mut); }
.ms-th.dm-th { height: 100%; min-height: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; background: none; }
.ms-th .dm-th__h { padding: .55rem .75rem; box-shadow: 0 1px 0 var(--js-line); border: 0; }
.ms-back { display: none !important; }
.ms-th .dm-th__who small { font-size: .8rem; }
.ms-th .dm-th__msgs { flex: 1; padding: .75rem 1rem 1rem; gap: 2px; }
.ms-th .dm-day { margin: 1rem 0 .5rem; text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 600; }
.ms-th .dm-msg { display: flex; align-items: flex-end; gap: .45rem; max-width: 72%; }
.ms-th .dm-msg.is-me { flex-direction: row-reverse; }
.ms-th .dm-msg__av { width: 28px; flex: none; line-height: 0; }
.ms-th .dm-msg.is-first { margin-top: .5rem; }
.ms-th .dm-bub { border-radius: 18px; padding: .5rem .8rem; font-size: .95rem; }
.ms-th .is-me .dm-bub { background: var(--amber); color: #141414; border-radius: 18px 4px 4px 18px; }
.ms-th .is-me.is-first .dm-bub { border-top-right-radius: 18px; } .ms-th .is-me.is-last .dm-bub { border-bottom-right-radius: 18px; }
.ms-th .is-them .dm-bub { background: var(--color-surface-2); border-radius: 4px 18px 18px 4px; }
.ms-th .is-them.is-first .dm-bub { border-top-left-radius: 18px; } .ms-th .is-them.is-last .dm-bub { border-bottom-left-radius: 18px; }
.ms-th .dm-msg--photo .dm-bub, .ms-th .dm-msg--offer .dm-bub, .ms-th .dm-msg--emoji .dm-bub { background: none !important; padding: 0; }
.ms-th .dm-msg--emoji .dm-bub p { font-size: 2.6rem; line-height: 1.1; }
.ms-th .dm-photo { border-radius: 18px; }
.ms-th .dm-rep { opacity: 0; border: 0; background: none; color: var(--js-mut); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; align-self: center; }
.ms-th .dm-rep .js-i { width: 14px; height: 14px; } .ms-th .dm-rep:hover { background: var(--color-surface-2); }
.ms-th .dm-msg:hover .dm-rep, .ms-th .dm-rep:focus-visible { opacity: 1; }
@media (hover: none) { .ms-th .dm-rep { opacity: .5; } }
.ms-th .dm-flag { margin-left: 2.2rem; max-width: 72%; }
.dm-seen { align-self: flex-end; margin: .2rem .1rem 0; line-height: 0; }
.dm-seen--sent { line-height: 1; font-size: .72rem; color: var(--js-mut); }
.ms-th .dm-typing { padding: .2rem 1rem .5rem; align-items: flex-end; gap: 4px; }
.ms-th .dm-typing span { line-height: 0; margin-right: .3rem; }
.ms-th .dm-typing i { margin-bottom: 10px; }
.ms-th .dm-hello { gap: .2rem; } .ms-th .dm-hello b { font-size: 1.15rem; margin-top: .5rem; } .ms-th .dm-hello small { color: var(--js-mut); } .ms-th .dm-hello p { margin-top: .6rem; }
.ms-th .dm-comp { align-items: center; gap: .15rem; padding: .55rem .6rem .7rem; border: 0; }
.ms-tool { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: none; color: var(--color-accent-text); display: grid; place-items: center; cursor: pointer; }
.ms-tool:hover { background: var(--color-surface-2); } .ms-tool .js-i { width: 22px; height: 22px; }
.ms-tool[hidden] { display: none; }
.ms-th .dm-comp textarea { border: 0; background: var(--color-surface-2); border-radius: 20px; padding: .55rem .95rem; margin: 0 .2rem; }
.ms-like .js-i { width: 24px; height: 24px; }
@media (max-width: 820px) {
  .ms { grid-template-columns: 1fr; height: auto; min-height: calc(100dvh - 220px); border: 0; background: none; border-radius: 0; margin: 0 -.25rem; }
  .ms-list { border-right: 0; } .ms-list__h, .ms-search, .ms-tabs { padding-left: .25rem; padding-right: .25rem; } .ms-search { margin: 0 .25rem; }
  .ms-rows { padding: 0 0 1rem; overflow: visible; }
  .ms-chat { display: none; }
  .ms.has-chat .ms-chat { display: flex; position: fixed; inset: 0; z-index: 115; background: var(--color-bg); padding-bottom: env(safe-area-inset-bottom); }
  .ms-back { display: inline-grid !important; }
  .ms-th .dm-th__h { padding-top: calc(.55rem + env(safe-area-inset-top)); }
  .ms-th .dm-msg { max-width: 82%; }
  html.ms-open .jrt, html.ms-open .js-tabs { display: none !important; }
}
/* ---------- members directory ---------- */
.mb { display: grid; gap: 1rem; }
.mb-head h1 .js-i { color: var(--color-accent-text); }
.mb-search { display: flex; align-items: center; gap: .5rem; padding: 0 1rem; height: 46px; border-radius: 999px; background: var(--js-card); border: 1px solid var(--js-line); }
.mb-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.mb-search .js-i { width: 18px; height: 18px; color: var(--js-mut); flex: none; }
.mb-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--color-text); outline: none; }
.mb-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mb-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-right: auto; }
.mb-chip { appearance: none; border: 1px solid var(--js-line); background: var(--js-card); color: var(--color-text); font: inherit; font-size: .88rem; font-weight: 600; padding: .45rem .9rem; border-radius: 999px; cursor: pointer; }
.mb-chip:hover { border-color: var(--color-accent); }
.mb-chip.is-on { background: var(--color-text); color: var(--js-card); border-color: var(--color-text); }
.mb-sel { font: inherit; font-size: .88rem; padding: .45rem 2rem .45rem .8rem; border-radius: 999px; border: 1px solid var(--js-line); background-color: var(--js-card); color: var(--color-text); max-width: 100%; }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.mb-grid > .js-empty, .mb-grid > .js-empty-s { grid-column: 1 / -1; }
.mb-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; border-radius: 18px; background: var(--js-card); border: 1px solid var(--js-line); transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0; }
.mb-card:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--js-line)); transform: translateY(-2px); box-shadow: 0 10px 28px -18px rgba(0,0,0,.45); }
.mb-card__top { display: flex; gap: .8rem; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.mb-card__top .ms-av img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.mb-card__id { display: grid; gap: .1rem; min-width: 0; }
.mb-card__id b { display: flex; align-items: center; gap: .3rem; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-card__id b .js-ver { width: 16px; height: 16px; flex: none; color: var(--color-accent-text); }
.mb-card__id small { color: var(--js-mut); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-lv { justify-self: start; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-text); }
.mb-bio { font-size: .92rem; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mb-stats { list-style: none; margin: 0; padding: .6rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--js-line); text-align: center; }
.mb-stats li { display: grid; font-size: .74rem; color: var(--js-mut); }
.mb-stats b { font-size: 1rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.mb-seen { font-size: .8rem; color: var(--js-mut); margin-top: auto; }
.mb-on { color: #16a34a; font-weight: 600; display: inline-flex; align-items: center; }
.mb-acts { display: flex; gap: .45rem; flex-wrap: wrap; }
.mb-acts .btn { flex: 1 1 auto; justify-content: center; }
.mb-acts .btn .js-i { width: 16px; height: 16px; margin-right: .3rem; }
.mb-card--sk { min-height: 250px; }
.mb-card--sk i { display: block; border-radius: 10px; background: var(--color-surface-2); animation: jsPulse 1.4s ease-in-out infinite; }
.mb-card--sk i:nth-child(1) { height: 64px; width: 64px; border-radius: 50%; }
.mb-card--sk i:nth-child(2) { height: 14px; width: 70%; }
.mb-card--sk i:nth-child(3) { height: 60px; }
@keyframes jsPulse { 50% { opacity: .5; } }
@media (max-width: 640px) {
  .mb-grid { grid-template-columns: 1fr; }
  .mb-filters { gap: .4rem; }
  .mb-chips { width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .mb-sel { flex: 1 1 30%; min-width: 0; padding-right: 1.4rem; }
}
@media (max-width: 420px) { .js-top__r { gap: .15rem; } .js-top .js-iconbtn { width: 34px; height: 34px; } .js-top__in { gap: .4rem; } }
@media (max-width: 640px) {
  .mb-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mb-chips { grid-column: 1 / -1; }
  .mb-sel { width: 100%; text-overflow: ellipsis; }
}
/* ---------- profile: picture, background, layout ---------- */
.js-prof__top { flex-wrap: wrap; gap: .6rem; }
.js-prof__avbtn { flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; line-height: 0; position: relative; z-index: 1; }
.js-prof__avbtn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.js-prof__av { display: block; border-radius: 50%; object-fit: cover; aspect-ratio: 1; flex: none; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.js-prof__acts { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.js-prof__cover { height: 150px; background-size: cover; background-position: center; }
.js-prof__cover::after { display: none; }
.js-cv__edit { position: absolute; right: .7rem; top: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 0; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.js-cv__edit:hover { background: rgb(0 0 0 / .75); }
.js-cv__edit .js-i { width: 16px; height: 16px; }
/* backgrounds */
.js-cv--road { background: radial-gradient(120% 140% at 80% 0, rgb(245 166 35 / .55), transparent 55%), linear-gradient(120deg, #141414, #2b2418); }
.js-cv--road::before { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; border-top: 3px dashed rgb(245 166 35 / .6); }
.js-cv--sunset { background: radial-gradient(circle at 72% 78%, #ffd36b 0 9%, rgb(255 211 107 / 0) 10%), linear-gradient(180deg, #2a1650 0%, #b33a6b 45%, #ff8a3d 78%, #ffc06b 100%); }
.js-cv--sunset::before { content: ''; position: absolute; inset: auto 0 0 0; height: 26%; background: linear-gradient(180deg, #2b1a2e, #140c18); clip-path: polygon(0 40%, 18% 10%, 30% 35%, 46% 0, 62% 30%, 78% 8%, 100% 38%, 100% 100%, 0 100%); }
.js-cv--night { background: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 18%, #fff, transparent), radial-gradient(1px 1px at 61% 42%, #fff, transparent), radial-gradient(2px 2px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 58%, #fff, transparent), radial-gradient(1px 1px at 6% 70%, #fff, transparent), radial-gradient(circle at 85% 20%, #f6efd2 0 5%, transparent 5.5%), linear-gradient(180deg, #050816, #12204a 70%, #1e2f66); }
.js-cv--night::before { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; border-top: 3px dashed rgb(255 220 120 / .55); }
.js-cv--prairie { background: radial-gradient(circle at 20% 30%, rgb(255 240 200 / .9) 0 6%, transparent 7%), linear-gradient(180deg, #8fc3e8 0%, #cfe6f2 48%, #e9c46a 49%, #d4a03b 75%, #a8741d 100%); }
.js-cv--mountain { background: linear-gradient(180deg, #7fb2d9, #cfe3ef 65%); }
.js-cv--mountain::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #5b6f86, #2f3e52); clip-path: polygon(0 100%, 0 62%, 14% 38%, 24% 52%, 40% 18%, 52% 40%, 63% 28%, 80% 55%, 90% 42%, 100% 58%, 100% 100%); }
.js-cv--mountain::after { content: '' !important; display: block !important; position: absolute; inset: 0; border: 0; background: #1f2b3a; clip-path: polygon(0 100%, 0 82%, 20% 66%, 34% 78%, 52% 60%, 70% 76%, 86% 64%, 100% 74%, 100% 100%); }
.js-cv--ocean { background: radial-gradient(circle at 78% 30%, #fff6d6 0 6%, transparent 7%), linear-gradient(180deg, #7cc6e8 0%, #bfe6f3 50%, #1d7fa6 51%, #0b4f72 100%); }
.js-cv--ocean::before { content: ''; position: absolute; left: 0; right: 0; bottom: 18%; height: 14px; background: radial-gradient(circle at 10px -4px, transparent 9px, rgb(255 255 255 / .35) 10px, transparent 11px) 0 0 / 20px 14px repeat-x; }
.js-cv--forest { background: linear-gradient(180deg, #a7d3c0, #e4f1e8 60%); }
.js-cv--forest::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #2f6b47, #163a27); clip-path: polygon(0 100%, 0 60%, 4% 40%, 8% 60%, 12% 30%, 16% 58%, 21% 36%, 26% 62%, 31% 26%, 36% 58%, 41% 40%, 46% 64%, 51% 30%, 56% 58%, 61% 38%, 66% 62%, 71% 28%, 76% 58%, 81% 40%, 86% 64%, 91% 34%, 96% 60%, 100% 44%, 100% 100%); }
.js-cv--desert { background: radial-gradient(circle at 25% 35%, #fff2c4 0 7%, transparent 8%), linear-gradient(180deg, #f6b26b 0%, #f7d39a 55%, #d9894a 56%, #b8602e 100%); }
.js-cv--desert::before { content: ''; position: absolute; inset: 0; background: #8f4320; clip-path: polygon(58% 56%, 60% 30%, 74% 30%, 76% 56%, 88% 56%, 89% 42%, 96% 42%, 97% 56%); }
.js-cv--chrome { background: linear-gradient(115deg, #2b2f36 0%, #8a939f 22%, #e9edf2 34%, #9aa3ae 46%, #3a3f47 60%, #c5ccd5 78%, #5d646e 100%); }
.js-cv--flag { background: linear-gradient(90deg, #1f3a6e 0 38%, transparent 38%), repeating-linear-gradient(180deg, #b22234 0 14.28%, #f4f1ea 14.28% 28.57%); }
.js-cv--flag::before { content: ''; position: absolute; left: 0; top: 0; width: 38%; height: 57%; background: radial-gradient(circle, #fff 1.3px, transparent 1.6px) 0 0 / 18px 15px, #1f3a6e; }
.js-cv--img { background-color: #222; background-repeat: no-repeat; background-size: cover; }
/* background picker */
.js-modal--cv .js-modal__box { max-width: 620px; }
.js-cvm__sub { color: var(--js-mut); margin: -.2rem 0 .9rem; }
.js-cvm__prev { height: 140px; margin: 0 0 .9rem; border-radius: 14px; overflow: hidden; position: relative; }
.js-cvm__pos { display: grid; gap: .3rem; margin-bottom: .9rem; font-size: .85rem; color: var(--js-mut); }
.js-cvm__pos input { width: 100%; accent-color: var(--color-accent); }
.js-cvm__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; }
.js-cvm__sw, .js-cvm__up { position: relative; overflow: hidden; height: 66px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0; display: flex; align-items: flex-end; font: inherit; }
.js-cvm__sw span { position: relative; z-index: 2; width: 100%; padding: .25rem .45rem; font-size: .74rem; font-weight: 700; color: #fff; text-align: left; background: linear-gradient(0deg, rgb(0 0 0 / .65), transparent); }
.js-cvm__sw::after { z-index: 1; }
.js-cvm__sw.is-on { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.js-cvm__sw.is-on span::after { content: ' \2713'; }
.js-cvm__up { flex-direction: column; align-items: center; justify-content: center; gap: .2rem; background: var(--color-surface-2); border: 2px dashed var(--js-line); color: var(--color-text); font-size: .78rem; font-weight: 700; }
.js-cvm__up:hover { border-color: var(--color-accent); }
.js-cvm__up .js-i { width: 20px; height: 20px; }
.js-cvm__acts { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
/* picture viewer */
.js-modal--avz .js-modal__box { background: transparent; border: 0; box-shadow: none; max-width: min(92vw, 460px); padding: 0; overflow: visible; }
.js-modal--avz .js-modal__x { top: -3rem; right: 0; background: rgb(0 0 0 / .55); color: #fff; }
.js-avz { display: grid; justify-items: center; gap: .9rem; padding-top: 1rem; }
.js-avz img { width: min(84vw, 420px); height: min(84vw, 420px); border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); background: #222; }
.js-avz p { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
/* who reacted */
.js-rxwho { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .55rem 0 .35rem; border: 0; border-radius: 999px; background: none; color: var(--js-mut); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.js-rxwho:hover { background: var(--color-surface-2); color: var(--color-text); }
.js-rxwho .js-rxi + .js-rxi { margin-left: -9px; }
.js-rxi { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; border: 2px solid var(--js-card); flex: none; font-style: normal; }
.js-rxi svg { width: 12px; height: 12px; }
.js-rxi--respect { background: #2563eb; } .js-rxi--haul { background: #ea580c; } .js-rxi--safe { background: #16a34a; } .js-rxi--ha { background: #d97706; } .js-rxi--pray { background: #db2777; } .js-rxi--sad { background: #6366f1; } .js-rxi--mad { background: #dc2626; }
.js-modal--rx .js-modal__box { max-width: 460px; }
.js-rxtabs { display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid var(--js-line); margin: .2rem -.2rem .4rem; padding: 0 .2rem; scrollbar-width: none; }
.js-rxtabs button { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .7rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--js-mut); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.js-rxtabs button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.js-rxtabs .js-rxi { border-color: transparent; }
.js-rxlist { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 460px); overflow-y: auto; }
.js-rxlist li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.js-rxlist__u { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.js-rxlist__u > span:last-child { display: grid; min-width: 0; }
.js-rxlist__u b { display: flex; align-items: center; gap: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-rxlist__u b .js-ver { width: 15px; height: 15px; color: var(--color-accent-text); }
.js-rxlist__u small, .js-rxlist__me { color: var(--js-mut); font-size: .8rem; }
.js-rxlist__av { position: relative; flex: none; line-height: 0; }
.js-rxlist__av img { border-radius: 50%; object-fit: cover; }
.js-rxlist__av .js-rxi { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; }
.js-rxlist__ld { justify-content: center; color: var(--js-mut); padding: 1.5rem 0 !important; }
@media (max-width: 560px) {
  .js-prof__cover { height: 120px; }
  .js-prof__top { margin-top: -50px; }
  .js-prof__av { width: 92px !important; height: 92px !important; }
  .js-prof__acts { width: 100%; justify-content: flex-start; }
  .js-prof__acts .btn { flex: 1 1 auto; justify-content: center; }
  .js-cv__edit span { display: none; } .js-cv__edit { padding: .5rem; }
}
.js-cvm__pos[hidden] { display: none; }
/* =========================================================
   SCROLLS — full-screen vertical feed
   ========================================================= */
body.sx-open .jrt, body.sx-open .js-tabs { display: none !important; }
.sx { position: fixed; inset: 0; z-index: 118; background: #000; color: #fff; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
.sx .js-i { width: 26px; height: 26px; }
.sx-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.sx-feed::-webkit-scrollbar { display: none; }
.sx-s { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.sx-stage { position: relative; width: 100%; height: 100%; }
.sx-bg { position: absolute; inset: 0; overflow: hidden; background-color: #0b0b0b; background-size: 0 0; }
.sx-bg::before { content: ''; position: absolute; inset: -40px; background-image: inherit; background-size: cover; background-position: center; filter: blur(36px) brightness(.55) saturate(1.2); }
.sx-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.sx-stage.is-wide .sx-v { object-fit: contain; }
.sx-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .45) 0, transparent 18%, transparent 58%, rgb(0 0 0 / .65) 100%); }
.sx-pp { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .35); opacity: 0; transform: scale(1.3); transition: opacity .18s, transform .18s; pointer-events: none; }
.sx-pp .js-i { width: 44px; height: 44px; margin-left: 4px; fill: #fff; }
.sx-s.is-paused .sx-pp { opacity: 1; transform: none; }
.sx-s.is-buf .sx-stage::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: sxSpin .8s linear infinite; }
.sx-spin { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .2); border-top-color: var(--amber, #f5a623); animation: sxSpin .8s linear infinite; }
@keyframes sxSpin { to { transform: rotate(360deg); } }
/* top bar */
.sx-top { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(.6rem, env(safe-area-inset-top)) .75rem .6rem; pointer-events: none; }
.sx-top > * { pointer-events: auto; }
.sx-top__r { justify-self: end; display: flex; gap: .4rem; align-items: center; }
.sx-ib { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .3); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sx-ib:hover { background: rgb(0 0 0 / .5); }
.sx-ib .js-i { width: 22px; height: 22px; }
.sx-auto { height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(0 0 0 / .3); color: #fff; font: 800 13px/1 var(--font-display); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sx-auto[aria-pressed="true"] { background: var(--amber); color: #141414; }
.sx-ib--d { background: var(--color-surface-2); color: var(--color-text); backdrop-filter: none; }
.sx-tabs { display: flex; gap: 1.1rem; }
.sx-tabs button { position: relative; border: 0; background: none; color: rgb(255 255 255 / .65); font: inherit; font-weight: 800; font-size: 1.02rem; padding: .4rem 0; cursor: pointer; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.sx-tabs button[aria-selected="true"] { color: #fff; }
.sx-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 26px; height: 3px; margin-left: -13px; border-radius: 3px; background: #fff; }
.sx-create { display: inline-flex; align-items: center; gap: .3rem; height: 38px; padding: 0 .85rem 0 .6rem; border: 0; border-radius: 999px; background: var(--amber, #f5a623); color: #111; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.sx-create .js-i { width: 20px; height: 20px; }
.sx-hint { position: absolute; z-index: 6; left: 50%; top: calc(max(.6rem, env(safe-area-inset-top)) + 54px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: rgb(0 0 0 / .6); font-size: .85rem; font-weight: 700; pointer-events: none; animation: sxIn .3s ease; }
.sx-hint .js-i { width: 18px; height: 18px; }
@keyframes sxIn { from { opacity: 0; transform: translate(-50%, -6px); } }
/* caption */
.sx-cap { position: absolute; z-index: 3; left: 0; right: 76px; bottom: 0; padding: 0 1rem calc(1.4rem + env(safe-area-inset-bottom)); text-shadow: 0 1px 4px rgb(0 0 0 / .55); }
.sx-cap a { color: #fff; text-decoration: none; }
.sx-cap__u { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.02rem; }
.sx-cap__u .js-ver { width: 16px; height: 16px; color: var(--amber, #f5a623); }
.sx-cap__u small { font-weight: 500; color: rgb(255 255 255 / .75); font-size: .85rem; }
.sx-cap__t { margin-top: .35rem; font-size: .95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.sx-cap__t .js-tag { font-weight: 800; color: #fff; }
.sx-cap.is-open .sx-cap__t { -webkit-line-clamp: unset; max-height: 38vh; overflow-y: auto; }
.sx-cap.is-open { background: linear-gradient(0deg, rgb(0 0 0 / .7), rgb(0 0 0 / .4) 70%, transparent); padding-top: 3rem; }
.sx-more { border: 0; background: none; color: #fff; font: inherit; font-weight: 800; font-size: .9rem; padding: .1rem 0; cursor: pointer; }
.sx-cap__m { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; }
.sx-cap__m .js-i { width: 15px; height: 15px; flex: none; }
.sx-cap__m em { font-style: normal; color: rgb(255 255 255 / .7); white-space: nowrap; margin-left: auto; padding-left: .6rem; }
.sx-marq { overflow: hidden; max-width: 60%; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.sx-marq span { display: inline-block; padding-right: 2rem; animation: sxMarq 9s linear infinite; }
@keyframes sxMarq { 0%, 15% { transform: translateX(0); } 100% { transform: translateX(-60%); } }
.sx-s.is-paused .sx-marq span, .sx-s.is-paused .sx-disc { animation-play-state: paused; }
/* right rail */
.sx-rail { position: absolute; z-index: 4; right: .5rem; bottom: calc(1.4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.sx-rail__av { position: relative; margin-bottom: .5rem; }
.sx-rail__av img { display: block; width: 48px !important; height: 48px !important; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.sx-fol { position: absolute; left: 50%; bottom: -10px; width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--amber, #f5a623); color: #111; cursor: pointer; padding: 0; transition: transform .2s, background .2s; }
.sx-fol .js-i { width: 14px; height: 14px; stroke-width: 3; }
.sx-fol.is-done { background: #fff; transform: scale(1.1); }
.sx-act { display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 0; background: none; color: #fff; cursor: pointer; padding: 0; font: inherit; text-decoration: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sx-act__i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; filter: drop-shadow(0 1px 4px rgb(0 0 0 / .5)); transition: transform .15s; }
.sx-act__i .js-i { width: 30px; height: 30px; }
.sx-act:active .sx-act__i { transform: scale(.88); }
.sx-act b { font-size: .76rem; font-weight: 700; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.sx-act--rx.is-pop .sx-act__i { animation: sxPop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sxPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.sx-act--rx.is-on .sx-act__i .js-i { stroke-width: 2.4; }
.sx-rx--respect { color: #60a5fa; } .sx-rx--haul { color: #fb923c; } .sx-rx--safe { color: #4ade80; } .sx-rx--ha { color: #fbbf24; } .sx-rx--pray { color: #f472b6; } .sx-rx--sad { color: #a5b4fc; } .sx-rx--mad { color: #f87171; }
.sx-act--rx.is-on b { color: #fff; }
.sx-disc { width: 42px; height: 42px; border-radius: 50%; padding: 6px; background: conic-gradient(#222, #444, #222, #444, #222); animation: sxSpin 5s linear infinite; margin-top: .2rem; }
.sx-disc img { width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; display: block; }
/* reaction picker */
.sx-picker { position: absolute; z-index: 7; right: 64px; bottom: calc(9.5rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; max-width: calc(100% - 80px); padding: .45rem; border-radius: 26px; background: rgb(18 18 18 / .92); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .8); animation: sxPk .22s cubic-bezier(.3, 1.4, .5, 1); transform-origin: right bottom; }
.sx-picker[hidden] { display: none; }
@keyframes sxPk { from { opacity: 0; transform: scale(.6); } }
.sx-picker button[data-sxr] { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); cursor: pointer; transition: transform .15s, background .15s; }
.sx-picker button[data-sxr]:hover, .sx-picker button[data-sxr]:focus-visible { transform: scale(1.18) translateY(-3px); background: rgb(255 255 255 / .16); }
.sx-picker .js-i { width: 26px; height: 26px; }
.sx-picker__who { flex-basis: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: .82rem; font-weight: 700; padding: .3rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* burst */
.sx-burst { position: absolute; z-index: 5; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; animation: sxBurst 1s ease-out forwards; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .4)); }
.sx-burst .js-i { width: 110px; height: 110px; stroke-width: 2.4; fill: currentColor; fill-opacity: .25; }
@keyframes sxBurst { 0% { transform: scale(.3) rotate(var(--rot)); opacity: 0; } 15% { transform: scale(1.15) rotate(var(--rot)); opacity: 1; } 30% { transform: scale(.95) rotate(var(--rot)); } 70% { opacity: 1; } 100% { transform: translateY(-90px) scale(1.3) rotate(var(--rot)); opacity: 0; } }
/* seek bar */
.sx-scrub { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 18px; display: flex; align-items: flex-end; padding-bottom: env(safe-area-inset-bottom); }
.sx-scrub input { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; margin: 0; background: linear-gradient(90deg, rgb(255 255 255 / .9) var(--p, 0%), rgb(255 255 255 / .25) var(--p, 0%)); cursor: pointer; transition: height .15s; }
.sx-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; border-radius: 50%; background: #fff; transition: width .15s, height .15s; }
.sx-scrub input::-moz-range-thumb { width: 0; height: 0; border: 0; border-radius: 50%; background: #fff; }
.sx-scrub:hover input, .sx-s.is-paused .sx-scrub input, .sx-scrub input:focus-visible { height: 5px; }
.sx-scrub:hover input::-webkit-slider-thumb, .sx-s.is-paused .sx-scrub input::-webkit-slider-thumb, .sx-scrub input:focus-visible::-webkit-slider-thumb { width: 14px; height: 14px; }
.sx-time { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgb(0 0 0 / .7); opacity: 0; transition: opacity .15s; pointer-events: none; }
.sx-s.is-paused .sx-time { opacity: 1; }
.sx-s.is-paused .sx-cap, .sx-s.is-paused .sx-rail { opacity: 1; }
/* empty */
.sx-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .7rem; text-align: center; padding: 2rem; }
.sx-empty .js-i { width: 52px; height: 52px; color: var(--amber, #f5a623); }
.sx-empty h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; max-width: 22ch; }
.sx-empty p { color: rgb(255 255 255 / .75); max-width: 34ch; }
/* comments sheet */
.sx-sheet { position: absolute; inset: 0; z-index: 9; }
.sx-sheet__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background .22s; }
.sx-sheet.is-on .sx-sheet__scrim { background: rgb(0 0 0 / .35); }
.sx-sheet__box { position: absolute; left: 0; right: 0; bottom: 0; height: min(72dvh, 640px); display: flex; flex-direction: column; background: var(--js-card); color: var(--color-text); border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.sx-sheet.is-on .sx-sheet__box { transform: none; }
.sx-sheet__box header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: .6rem .7rem; border-bottom: 1px solid var(--js-line); }
.sx-sheet__box header b { grid-column: 2; text-align: center; font-size: .95rem; }
.sx-sheet__box header .sx-ib { grid-column: 3; width: 36px; height: 36px; }
.sx-cl { list-style: none; margin: 0; padding: .4rem 1rem; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sx-cl li { display: flex; gap: .7rem; padding: .6rem 0; }
.sx-cl li > a img { border-radius: 50%; object-fit: cover; }
.sx-cl li > div { min-width: 0; }
.sx-cl__h { display: flex; align-items: center; gap: .4rem; font-size: .84rem; }
.sx-cl__h a { color: var(--js-mut); font-weight: 700; text-decoration: none; }
.sx-cl__h em { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--color-accent-text); background: color-mix(in srgb, var(--color-accent) 16%, transparent); padding: .05rem .4rem; border-radius: 4px; }
.sx-cl__h small { color: var(--js-mut); }
.sx-cl__b { font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.sx-cl__ld { flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--js-mut); padding: 3rem 0 !important; gap: .3rem !important; }
.sx-cl__ld .js-i { width: 34px; height: 34px; }
.sx-cl__ld b { color: var(--color-text); }
.sx-cf { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--js-line); }
.sx-cf--join { justify-content: center; }
.sx-cf__av img { border-radius: 50%; object-fit: cover; display: block; }
.sx-cf input { flex: 1; min-width: 0; height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--js-line); background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: 16px; outline: none; }
.sx-cf input:focus { border-color: var(--color-accent); }
.sx-cf__go { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-accent); color: #111; cursor: pointer; }
.sx-cf__go:disabled { opacity: .35; cursor: default; }
.sx-cf__go .js-i { width: 20px; height: 20px; }
.sx-nav { display: none; }
.sx-behind { display: grid; place-items: center; gap: .6rem; padding: 4rem 1rem; color: var(--js-mut); }
.sx-behind .js-i { width: 40px; height: 40px; }
/* desktop: centered phone-shaped stage with the rail beside it */
@media (min-width: 768px) {
  .sx { background: radial-gradient(120% 90% at 50% 0, #1d1d1f, #000 70%); }
  .sx-stage { height: calc(100dvh - 2rem); width: auto; aspect-ratio: 9 / 16; max-width: calc(100vw - 220px); }
  .sx-bg, .sx-v, .sx-shade { border-radius: 16px; }
  .sx-bg { box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9); }
  .sx-cap { right: 0; padding-bottom: 1.3rem; }
  .sx-cap.is-open { border-radius: 0 0 16px 16px; }
  .sx-rail { right: auto; left: calc(100% + 14px); bottom: .4rem; }
  .sx-act__i { background: rgb(255 255 255 / .1); filter: none; width: 50px; height: 50px; }
  .sx-act:hover .sx-act__i { background: rgb(255 255 255 / .18); }
  .sx-act__i .js-i { width: 26px; height: 26px; }
  .sx-picker { right: auto; left: calc(100% + 72px); bottom: 10.5rem; flex-wrap: nowrap; max-width: none; transform-origin: left bottom; }
  .sx-picker__who { flex-basis: auto; white-space: nowrap; padding: 0 .6rem; }
  .sx-scrub { left: 10px; right: 10px; bottom: 4px; }
  .sx-scrub input { border-radius: 3px; }
  .sx-nav { display: grid; gap: .7rem; position: absolute; z-index: 6; right: 1.4rem; top: 50%; transform: translateY(-50%); }
  .sx-nav .sx-ib { width: 48px; height: 48px; background: rgb(255 255 255 / .1); }
  .sx-top { padding: 1rem 1.4rem; }
  .sx-sheet__scrim { display: none; }
  .sx-sheet { inset: 0 0 0 auto; width: min(420px, 40vw); }
  .sx-sheet__box { top: 0; height: auto; border-radius: 0; transform: translateX(100%); border-left: 1px solid var(--js-line); }
  .sx-sheet__box header { padding-top: 1rem; }
}
@media (min-width: 768px) and (max-height: 640px) { .sx-rail { gap: .5rem; } .sx-act__i { width: 42px; height: 42px; } .sx-rail__av { margin-bottom: .2rem; } }
@media (prefers-reduced-motion: reduce) { .sx-marq span, .sx-disc { animation: none; } .sx-feed { scroll-behavior: auto; } }
@media (max-width: 440px) {
  .sx-create { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .sx-create span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sx-top { padding-left: .5rem; padding-right: .5rem; }
  .sx-tabs { gap: .9rem; }
  .sx-tabs button { font-size: .98rem; }
}
/* =========================================================
   JIMBO MARKET — location radius, delivery, seller dashboard
   ========================================================= */
.fm-locbtn { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .7rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.fm-locbtn:hover { border-color: var(--color-accent); }
.fm-locbtn > .js-i { width: 20px; height: 20px; color: var(--color-accent-text); flex: none; }
.fm-locbtn span { display: grid; min-width: 0; }
.fm-locbtn b { font-size: .92rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-locbtn small { font-size: .78rem; font-weight: 600; color: var(--color-accent-text); }
.mk-loc { display: grid; gap: .8rem; }
.mk-loc__in { position: relative; display: flex; align-items: center; }
.mk-loc__in .js-i { position: absolute; left: .8rem; width: 18px; height: 18px; color: var(--js-mut); pointer-events: none; }
.mk-loc__in input { width: 100%; height: 46px; padding: 0 .9rem 0 2.4rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: 16px; }
.mk-loc__in input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.mk-loc__sug { list-style: none; margin: -.4rem 0 0; padding: .3rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface); max-height: 230px; overflow-y: auto; }
.mk-loc__sug button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--color-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.mk-loc__sug button:hover, .mk-loc__sug button:focus-visible { background: var(--color-surface-2); }
.mk-loc__sug .js-i { width: 16px; height: 16px; color: var(--js-mut); }
.mk-loc__sug small { margin-left: auto; color: var(--js-mut); font-weight: 500; }
.mk-loc__none { padding: .6rem; color: var(--js-mut); font-size: .9rem; }
.mk-loc__pick { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 700; color: var(--color-text); }
.mk-loc__pick .js-i { width: 18px; height: 18px; color: #16a34a; }
.mk-loc__ring { position: relative; height: 150px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, transparent 0 2px, transparent 3px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--js-line) 70%, transparent) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--js-line) 70%, transparent) 0 1px, transparent 1px 22px), var(--color-surface-2); }
.mk-loc__ring i { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; width: auto; transform: translate(-50%, -50%); border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 20%, transparent); border: 2px solid var(--color-accent); transition: width .3s, height .3s; max-height: 140%; }
.mk-loc__ring b { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); color: #111; box-shadow: 0 4px 14px -4px rgb(0 0 0 / .4); }
.mk-loc__ring b .js-i { width: 18px; height: 18px; }
.fm-dv { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .9rem; padding: 0; }
.fm-dv li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: var(--color-surface-2); font-size: .82rem; font-weight: 700; }
.fm-dv .js-i { width: 15px; height: 15px; color: var(--color-accent-text); }
.fm-haul { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--js-line)); background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface)); color: var(--color-text); text-decoration: none; }
.fm-haul:hover { border-color: var(--color-accent); }
.fm-haul > .js-i:first-child { width: 28px; height: 28px; color: var(--color-accent-text); flex: none; }
.fm-haul > .js-i:last-child { width: 18px; height: 18px; margin-left: auto; color: var(--js-mut); flex: none; }
.fm-haul span { display: grid; gap: .1rem; }
.fm-haul small { color: var(--js-mut); font-size: .85rem; line-height: 1.35; }
.mk-grid3 { display: grid; grid-template-columns: .8fr 1.2fr 1fr; gap: .7rem; }
.mk-grid3 label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; }
.mk-dvpick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.mk-dvopt { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: .4rem !important; padding: .5rem .8rem; border: 1px solid var(--js-line); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .88rem; }
.mk-dvopt:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.mk-dvopt input { accent-color: var(--color-accent); margin: 0; }
.mk-dvopt .js-i { width: 16px; height: 16px; color: var(--color-accent-text); }
@media (max-width: 520px) { .mk-grid3 { grid-template-columns: 1fr 1fr; } .mk-grid3 label:first-child { grid-column: 1 / -1; } }
/* seller dashboard */
.fm-dash { display: grid; gap: 1rem; }
.fm-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.fm-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .8rem .9rem; border: 1px solid var(--js-line); border-radius: 14px; background: var(--js-card); }
.fm-kpi .js-i { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--color-accent-text); }
.fm-kpi b { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fm-kpi span { font-size: .76rem; font-weight: 700; color: var(--js-mut); }
.fm-dtabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.fm-dtabs button { padding: .45rem .9rem; border: 1px solid var(--js-line); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.fm-dtabs button small { color: var(--js-mut); font-weight: 600; }
.fm-dtabs button[aria-selected="true"] { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.fm-dtabs button[aria-selected="true"] small { color: inherit; opacity: .7; }
.fm-drows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fm-drow { display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem; align-items: center; padding: .75rem; border: 1px solid var(--js-line); border-radius: 14px; background: var(--js-card); }
.fm-drow.is-sold { opacity: .78; }
.fm-drow__img { display: block; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--color-surface-2); }
.fm-drow__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-drow__b { display: grid; gap: .2rem; min-width: 0; }
.fm-drow__t { font-weight: 800; color: var(--color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-drow__t:hover { text-decoration: underline; }
.fm-drow__p { font-weight: 800; display: flex; align-items: center; gap: .5rem; }
.fm-st { font-style: normal; font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; }
.fm-st--active { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.fm-st--pending { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-text); }
.fm-st--sold { background: var(--color-surface-2); color: var(--js-mut); }
[data-theme="dark"] .fm-st--active { color: #4ade80; }
.fm-drow__m { font-size: .84rem; color: var(--js-mut); }
.fm-drow__s { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--js-mut); }
.fm-drow__s .js-i { width: 15px; height: 15px; margin-left: .35rem; }
.fm-drow__s .js-i:first-child { margin-left: 0; }
.fm-drow__tip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--color-accent-text); }
.fm-drow__tip .js-i { width: 15px; height: 15px; }
.fm-drow__a { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; max-width: 330px; }
.fm-dash__new { justify-self: start; }
@media (max-width: 1100px) { .fm-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .fm-drow { grid-template-columns: 72px 1fr; gap: .7rem; }
  .fm-drow__img { width: 72px; height: 72px; }
  .fm-drow__a { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .fm-kpi { padding: .6rem .65rem; } .fm-kpi b { font-size: 1.1rem; }
}
/* Market: category filters, recently viewed, map pins */
.fm-catf { display: grid; gap: .7rem; padding: .8rem; border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface-2)); }
.fm-catf__h { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; font-weight: 800; color: var(--color-text); }
.fm-catf__h .js-i { width: 18px; height: 18px; color: var(--color-accent-text); }
.fm-in, .fm-price2 select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--js-line); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .92rem; min-width: 0; }
.fm-rv { margin-bottom: 1.1rem; }
.fm-head--rv { margin-bottom: .5rem; }
.fm-head--rv h2 { font-size: 1.05rem; }
.fm-rv__row { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.fm-rv__i { display: grid; gap: .15rem; text-decoration: none; color: var(--color-text); scroll-snap-align: start; }
.fm-rv__i img, .fm-rv__i > span { width: 132px; height: 132px; border-radius: 10px; object-fit: cover; background: var(--color-surface-2); display: block; }
.fm-rv__i b { font-size: .92rem; margin-top: .2rem; }
.fm-rv__i small { font-size: .8rem; color: var(--js-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-rv__i:hover img { filter: brightness(.94); }
.mk-pin { cursor: pointer; outline: none; }
.mk-pin path { fill: var(--color-accent); stroke: #111; stroke-width: 1.4; transition: transform .15s; }
.mk-pin circle { fill: #111; }
.mk-pin text { fill: #111; font: 800 10px/1 var(--font-body); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.mk-pin:hover path, .mk-pin:focus-visible path, .mk-pin.is-on path { transform: scale(1.25); fill: #fff; }
.mk-pin.is-on path { stroke: var(--color-accent); stroke-width: 2.4; }
.mk-pin-ring { fill: color-mix(in srgb, var(--color-accent) 16%, transparent); stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.mk-pin-me { fill: #2563eb; stroke: #fff; stroke-width: 2; pointer-events: none; }
.mk-map__sel { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--js-line); }
.mk-map__selh { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mk-map__selh .js-iconbtn { width: 32px; height: 32px; }
/* Find Drivers + profile For sale / Ratings */
.mb-mk { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: 0; font-size: .85rem; }
.mb-mk b { font-weight: 800; }
.mb-mk small { color: var(--js-mut); }
.mb-sale { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-text); font-weight: 800; font-size: .78rem; text-decoration: none; }
.mb-sale .js-i { width: 14px; height: 14px; }
.pf-sec { margin: 1.4rem 0 .4rem; padding: 1rem; border: 1px solid var(--js-line); border-radius: 16px; background: var(--js-card); display: grid; gap: .8rem; }
.pf-sec__h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pf-sec__h h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 900; }
.pf-sec__h h2 .js-i { width: 20px; height: 20px; color: var(--color-accent-text); }
.pf-sec__h a { font-weight: 700; font-size: .9rem; color: var(--color-accent-text); }
.pf-empty { margin: 0; color: var(--js-mut); font-size: .92rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pf-rcs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pf-rc { display: grid; gap: .15rem; padding: .8rem .9rem; border-radius: 12px; background: var(--color-surface-2); }
.pf-rc > span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--js-mut); }
.pf-rc > b { font-size: 1.6rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-rc > b.pf-rc__no { font-size: 1rem; }
.pf-rc small { color: var(--js-mut); font-size: .82rem; }
.pf-rateme { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; padding: .75rem .9rem; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--color-accent) 50%, var(--js-line)); }
.pf-rateme p { margin: 0; font-size: .92rem; }
.pf-deals { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pf-deal { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .7rem .8rem; border: 1px solid var(--js-line); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.pf-deal:hover { border-color: var(--color-accent); }
.pf-deal span { display: grid; } .pf-deal small { color: var(--js-mut); } .pf-deal em { font-style: normal; font-size: .8rem; color: var(--js-mut); }
.mk-reviews a { color: inherit; }
@media (max-width: 480px) { .pf-rcs { grid-template-columns: 1fr; } .pf-sec { padding: .85rem; } }
.mk-reviews .mk-stars { display: inline-flex; vertical-align: -1px; }
@media (max-width: 400px) { .js-logo span { font-size: .92rem; } .js-logo { gap: .4rem; } .js-logo svg { width: 28px; height: 28px; } .js-mebtn { flex: none; } }
@media (max-width: 370px) { .js-logo span { display: none; } }
/* Jimbo Studio entry points */
.js-thumb__ed, .mk-ph__ed { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: .2rem; height: 24px; padding: 0 .5rem; border-radius: 999px; border: 0; background: rgb(0 0 0 / .72); color: #fff; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.js-thumb .js-thumb__ed { top: auto; right: auto; width: auto; height: 24px; border-radius: 999px; display: inline-flex; }
.js-thumb__ed .js-i, .mk-ph__ed .js-i { width: 13px; height: 13px; }
.js-thumb__ed:hover, .mk-ph__ed:hover { background: var(--amber); color: #111; }
.sc-pick__b--studio { border-style: solid; border-color: color-mix(in srgb, var(--amber) 55%, var(--js-line)); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.sc-pick__b--studio small { max-width: 34ch; text-align: center; }
.sc-pick__alt { display: block; margin: .6rem auto 0; }
.sc-note { display: block; max-width: 36ch; margin: .2rem auto 0; color: var(--js-mut); font-size: .8rem; line-height: 1.4; text-align: center; }

/* ---------- Beta badge ---------- */
.js-beta { position: relative; align-self: flex-start; margin: -2px 0 0 -.2rem; display: inline-flex; align-items: center; padding: 4px 7px 3px; border-radius: 999px; font-family: var(--font-body); font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: #141414;
  background: linear-gradient(110deg, var(--amber) 0%, var(--amber) 38%, #fff4d8 50%, var(--amber) 62%, var(--amber) 100%); background-size: 260% 100%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent), 0 2px 14px color-mix(in srgb, var(--amber) 45%, transparent); animation: js-shine 5s ease-in-out infinite; }
.js-hero__beta { position: relative; top: -1.05em; margin-left: .5rem; display: inline-flex; align-items: center; gap: .4em; padding: .42em .7em .38em; border-radius: 999px; font-family: var(--font-body); font-size: .3em; font-weight: 900; font-stretch: 100%; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: #141414; vertical-align: baseline;
  background: linear-gradient(110deg, var(--amber) 0%, var(--amber) 38%, #fff4d8 50%, var(--amber) 62%, var(--amber) 100%); background-size: 260% 100%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent), 0 4px 22px color-mix(in srgb, var(--amber) 50%, transparent); animation: js-shine 5s ease-in-out infinite; }
.js-hero__beta i { width: .62em; height: .62em; border-radius: 50%; background: #141414; box-shadow: 0 0 0 0 rgb(20 20 20 / .5); animation: js-beat 2.2s ease-out infinite; }
.js-betanote { max-width: 60ch; margin: 1rem 0 0; padding: .7rem .95rem; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 8%, transparent); font-size: .92rem; line-height: 1.5; color: rgb(255 255 255 / .86); }
.js-betanote b { color: var(--amber); }
.js-betanote a { color: #fff; font-weight: 700; text-decoration-color: var(--amber); text-underline-offset: 3px; white-space: nowrap; }
@keyframes js-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes js-beat { 0% { box-shadow: 0 0 0 0 rgb(20 20 20 / .45); } 70%, 100% { box-shadow: 0 0 0 .5em rgb(20 20 20 / 0); } }
@media (max-width: 370px) { .js-beta { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .js-beta, .js-hero__beta, .js-hero__beta i { animation: none; } }

/* ---------- Live ---------- */
.js-stub__quick .js-stub__live { color: #ff4d4f; }
.js-stub__quick .js-stub__live .js-i { animation: lv-pulse 1.8s ease-in-out infinite; }
.js-badge--live { background: #e5262b; color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.js-badge--live i, .js-livecard__b i, .lv__live i, .lv-now__h i { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: inline-block; animation: lv-pulse 1.4s ease-in-out infinite; }
.js-livecard { position: relative; display: block; width: min(280px, 74%); aspect-ratio: 9 / 16; margin-top: .6rem; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 80% at 50% 20%, #2a2a2a, #0d0d0d); cursor: pointer; color: #fff; font: inherit; }
.js-livecard.is-on { box-shadow: 0 0 0 2px #e5262b, 0 8px 30px rgb(229 38 43 / .3); }
.js-livecard.is-over { cursor: default; aspect-ratio: 16 / 9; width: min(320px, 90%); opacity: .8; }
.js-livecard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.js-livecard.is-over img { filter: grayscale(.6) brightness(.6); }
.js-livecard__b { position: absolute; top: .55rem; left: .55rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; background: rgb(0 0 0 / .62); font-size: .78rem; font-weight: 800; }
.js-livecard.is-on .js-livecard__b { background: #e5262b; }
.js-livecard__p { position: absolute; inset: 0; display: grid; place-items: center; }
.js-livecard__p .js-i { width: 60px; height: 60px; padding: 17px; border-radius: 50%; background: rgb(0 0 0 / .45); color: #fff; transition: transform .2s; }
.js-livecard:hover .js-livecard__p .js-i, .js-livecard:focus-visible .js-livecard__p .js-i { transform: scale(1.08); }
.lv-now { margin: .9rem 0; padding: .8rem .9rem; border-radius: 14px; background: linear-gradient(90deg, rgb(229 38 43 / .12), transparent 70%); border: 1px solid rgb(229 38 43 / .3); }
.lv-now__h { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .82rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #ff4d4f; }
.lv-now__h i { background: #ff4d4f; }
.lv-now__row { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; }
.lv-now__b { flex: none; display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem .45rem .45rem; border-radius: 999px; border: 0; background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; text-align: left; max-width: 280px; }
.lv-now__b .js-av { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px #e5262b; }
.lv-now__b span { display: grid; min-width: 0; } .lv-now__b b { font-size: .9rem; } .lv-now__b small { color: var(--js-mut); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-now__b em { display: inline-flex; align-items: center; gap: .25rem; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--js-mut); }
.lv-now__b em .lv-i { width: 14px; height: 14px; }

.lv { position: fixed; inset: 0; z-index: 130; background: #000; color: #fff; font-family: var(--font-body); opacity: 0; transition: opacity .2s; overflow: hidden; }
.lv.is-on { opacity: 1; }
.lv [hidden] { display: none !important; }
.lv-i { width: 22px; height: 22px; flex: none; }
.lv__stage { position: absolute; inset: 0; margin: 0 auto; max-width: min(100vw, calc(100dvh * 9 / 16)); background: #0b0b0b; }
.lv__cam, .lv__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0b0b; }
.lv__cam.is-mirror { transform: scaleX(-1); }
.lv__v { opacity: 0; } .lv__v.is-on { opacity: 1; }
.lv__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .55) 0, transparent 22%, transparent 55%, rgb(0 0 0 / .7) 100%); }
.lv__top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, calc(100dvh * 9 / 16)); display: flex; align-items: center; gap: .5rem; padding: max(.75rem, env(safe-area-inset-top)) .75rem .5rem; z-index: 3; }
.lv__sp { flex: 1; }
.lv__ib { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .45); color: #fff; cursor: pointer; backdrop-filter: blur(6px); flex: none; }
.lv__ib:hover { background: rgb(0 0 0 / .65); } .lv__ib.is-off { background: #e5262b; }
.lv__ib:focus-visible, .lv button:focus-visible, .lv a:focus-visible, .lv input:focus-visible, .lv select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lv__badges { display: flex; align-items: center; gap: .4rem; }
.lv__live { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: 6px; background: #e5262b; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.lv__live.is-replay { background: rgb(0 0 0 / .55); letter-spacing: .02em; } .lv__live .lv-i { width: 15px; height: 15px; }
.lv__pill { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .6rem; border-radius: 6px; background: rgb(0 0 0 / .5); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv__pill .lv-i { width: 16px; height: 16px; }
.lv__who { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.lv__who span { display: grid; min-width: 0; } .lv__who b { font-size: .92rem; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.lv__who small { font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.lv__net, .lv__note { position: absolute; top: calc(max(.75rem, env(safe-area-inset-top)) + 54px); left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; padding: .45rem .8rem; border-radius: 999px; background: rgb(0 0 0 / .65); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.lv__net { background: #a15c00; } .lv__note { top: calc(max(.75rem, env(safe-area-inset-top)) + 92px); }
.lv__feed { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); width: min(100vw, calc(100dvh * 9 / 16)); margin: 0; padding: 0 4.5rem 0 .85rem; list-style: none; display: flex; flex-direction: column; gap: .4rem; z-index: 2; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); pointer-events: none; }
.lv--cast .lv__feed { bottom: calc(96px + env(safe-area-inset-bottom)); }
.lv-c { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; line-height: 1.35; text-shadow: 0 1px 3px rgb(0 0 0 / .8); }
.lv-c span { padding: .35rem .65rem; border-radius: 14px; background: rgb(0 0 0 / .35); overflow-wrap: anywhere; } .lv-c b { margin-right: .2rem; }
.lv-c.is-new { animation: lv-in .35s ease-out; }
.lv__floats { position: absolute; right: max(.5rem, calc(50vw - 100dvh * 9 / 32 + .5rem)); bottom: calc(80px + env(safe-area-inset-bottom)); width: 70px; height: 50vh; pointer-events: none; z-index: 2; }
.lv-fl { position: absolute; bottom: 0; color: #ff4d4f; animation: lv-float 2.6s ease-out forwards; } .lv-fl .lv-i { width: 30px; height: 30px; fill: currentColor; }
.lv__pre { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100vw, 460px); z-index: 3; padding: 1.3rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: rgb(14 14 14 / .82); backdrop-filter: blur(14px); display: grid; gap: .75rem; }
.lv__eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ff6b6d; } .lv__eyebrow .lv-i { width: 16px; height: 16px; }
.lv__pre h2 { margin: -.3rem 0 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; }
.lv__f { display: grid; gap: .3rem; font-size: .82rem; font-weight: 700; } .lv__f small { font-weight: 500; opacity: .65; }
.lv__f input, .lv__f select { width: 100%; padding: .7rem .8rem; border-radius: 10px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .08); color: #fff; font: inherit; font-size: 1rem; font-weight: 500; }
.lv__f select option { color: #111; }
.lv__chk { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-radius: 10px; background: rgb(255 180 40 / .12); border: 1px solid rgb(255 180 40 / .35); font-size: .92rem; font-weight: 700; cursor: pointer; }
.lv__chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--amber); flex: none; }
.lv__fine { margin: 0; font-size: .8rem; line-height: 1.45; opacity: .75; }
.lv__err { margin: 0; min-height: 0; color: #ff8a8c; font-size: .86rem; font-weight: 600; } .lv__err:empty { display: none; }
.lv__go { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .8rem 1.3rem; border: 0; border-radius: 999px; background: #e5262b; color: #fff; font: inherit; font-size: 1.02rem; font-weight: 800; cursor: pointer; text-decoration: none; }
.lv__go:hover { background: #ff3338; } .lv__go:disabled { opacity: .6; cursor: progress; }
.lv__ghost { min-height: 50px; padding: .8rem 1.3rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .3); background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.lv__bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100vw, calc(100dvh * 9 / 16)); padding: .8rem .85rem calc(.9rem + env(safe-area-inset-bottom)); display: flex; justify-content: center; z-index: 3; }
.lv__end { min-width: 160px; min-height: 48px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .92); color: #b3141a; font: inherit; font-weight: 900; cursor: pointer; transition: background .15s, color .15s; }
.lv__end.is-arm { background: #e5262b; color: #fff; }
.lv__say { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100vw, calc(100dvh * 9 / 16)); z-index: 3; display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem calc(.75rem + env(safe-area-inset-bottom)); }
.lv__say input { flex: 1; min-width: 0; height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); background: rgb(0 0 0 / .4); color: #fff; font: inherit; font-size: 1rem; backdrop-filter: blur(6px); }
.lv__say input::placeholder { color: rgb(255 255 255 / .7); }
.lv__heart { color: #ff4d4f; } .lv__heart.is-on .lv-i { fill: currentColor; }
.lv__joinc { margin: 0 auto; padding: .7rem 1.2rem; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-weight: 700; text-decoration: none; }
.lv__sound { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; border: 0; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font: inherit; font-weight: 800; cursor: pointer; backdrop-filter: blur(6px); }
.lv__buf { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .7rem; z-index: 1; font-size: .9rem; font-weight: 600; text-shadow: 0 1px 4px rgb(0 0 0 / .8); }
.lv__spin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: lv-spin .8s linear infinite; }
.lv__done { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); z-index: 4; display: grid; justify-items: center; gap: .85rem; padding: 1.6rem 1.3rem; border-radius: 22px; background: rgb(18 18 18 / .9); backdrop-filter: blur(14px); text-align: center; }
.lv__done h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; line-height: 1.15; }
.lv__doneic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgb(255 180 40 / .16); color: var(--amber); } .lv__doneic .lv-i { width: 28px; height: 28px; }
.lv__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: 100%; margin: 0; }
.lv__stats div { padding: .65rem .3rem; border-radius: 12px; background: rgb(255 255 255 / .07); } .lv__stats dt { font-size: .72rem; opacity: .7; } .lv__stats dd { margin: .15rem 0 0; font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.lv__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.lv.is-done .lv__stage { filter: blur(10px) brightness(.5); }
.lv.is-done .lv__feed, .lv.is-done .lv__floats, .lv.is-done [data-x=mic], .lv.is-done [data-x=flip], .lv.is-done .lv__note, .lv.is-done .lv__net { display: none; }
@keyframes lv-pulse { 50% { opacity: .35; } }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes lv-float { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; transform: translate(-6px, -40px) scale(1); } 100% { opacity: 0; transform: translate(10px, -45vh) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .lv-fl, .lv-c.is-new, .js-badge--live i, .js-livecard__b i, .lv__live i, .lv-now__h i, .js-stub__quick .js-stub__live .js-i { animation: none; } }

.js-betachip { justify-self: start; width: fit-content; display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: 4px 14px 4px 4px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: rgb(255 255 255 / .9); background: rgb(255 255 255 / .06); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--amber) 18%, transparent); }
.js-betachip__k { padding: 5px 10px 4px; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: #141414; background: linear-gradient(110deg, var(--amber) 0%, var(--amber) 38%, #fff4d8 50%, var(--amber) 62%, var(--amber) 100%); background-size: 260% 100%; animation: js-shine 5s ease-in-out infinite; }
@media (max-width: 420px) { .js-betachip { font-size: .78rem; gap: .45rem; } }
@media (prefers-reduced-motion: reduce) { .js-betachip__k { animation: none; } }

/* ---------- Scroll background upload ---------- */
.sc-bg { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .5rem auto 0; padding: .45rem .8rem; border-radius: 999px; width: fit-content; max-width: 100%; background: var(--color-surface-2); color: var(--js-mut); font-size: .82rem; font-weight: 600; line-height: 1.3; text-align: left; }
.sc-bg.is-done { background: color-mix(in srgb, #1f9d55 14%, transparent); color: #17803f; }
[data-theme=dark] .sc-bg.is-done { color: #5fd38d; }
.sc-bg.is-fail { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--color-text); }
.sc-bg .js-i { width: 16px; height: 16px; flex: none; }
.sc-bg__ring { --p: 0; flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--amber) calc(var(--p) * 1%), color-mix(in srgb, var(--js-mut) 25%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); transition: background .2s; }
.sc-prev__v { position: relative; }
.sc-prev__win { position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%); padding: .2rem .5rem; border-radius: 999px; background: rgb(0 0 0 / .65); color: #fff; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-prev .sc-prev__m { font-weight: 700; font-size: .85rem; color: var(--js-mut); }
.sc-win { width: 100%; display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; text-align: left; }
.sc-win b { font-variant-numeric: tabular-nums; }
.sc-win input[type=range] { width: 100%; accent-color: var(--amber); height: 28px; }
.sc-cov { width: 100%; display: grid; gap: .35rem; }
.sc-cov__h { font-size: .85rem; font-weight: 700; text-align: left; }
.sc-cov__row { display: grid; grid-template-columns: repeat(6, minmax(0, 58px)); justify-content: start; gap: .4rem; }
.sc-cov__b { aspect-ratio: 9 / 16; padding: 0; border: 2px solid transparent; border-radius: 9px; background: var(--color-surface-2); cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s; }
.sc-cov__b i { display: block; width: 100%; height: 100%; background: center / cover no-repeat; }
.sc-cov__b:hover { transform: translateY(-1px); }
.sc-cov__b.is-on { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 35%, transparent); }
.sc-cov__b:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sc-bg--act { display: grid; justify-items: center; gap: .35rem; background: none; padding: 0; border-radius: 0; }
.sc-bg--act button { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--color-text); font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.sc-bg--act button:hover { background: color-mix(in srgb, var(--amber) 24%, transparent); }
.sc-bg--act small { color: var(--js-mut); font-size: .78rem; text-align: center; max-width: 34ch; }
.sc-drop__hint { margin: .5rem 0 0; text-align: center; color: var(--js-mut); font-size: .8rem; }
.js-modal__box.is-drop { outline: 3px dashed var(--amber); outline-offset: -10px; }
.sc-load { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2rem 1rem; color: var(--js-mut); font-weight: 600; }
.sc-load__s { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--js-line); border-top-color: var(--amber); animation: lv-spin .8s linear infinite; }
.sc-prev video.is-wide { object-fit: contain; background: #000; }
.sc-prev video.is-fit { background: radial-gradient(120% 70% at 50% 50%, #3a3a3a, #111); }
.sc-fit { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .65rem !important; width: 100%; padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--js-line); cursor: pointer; text-align: left; }
.sc-fit input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--amber); flex: none; }
.sc-fit span { display: grid; gap: .15rem; } .sc-fit b { font-size: .9rem; } .sc-fit small { font-weight: 500; color: var(--js-mut); font-size: .8rem; line-height: 1.4; }
/* Posting pill */
.sc-pills { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 125; width: min(92vw, 380px); display: grid; gap: .5rem; pointer-events: none; }
@media (min-width: 900px) { .sc-pills { left: auto; right: 24px; transform: none; bottom: 24px; } }
.sc-pill { pointer-events: auto; display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem .5rem .5rem; border-radius: 16px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--js-line); box-shadow: 0 10px 30px rgb(0 0 0 / .18); animation: sc-pin .25s ease-out; transition: opacity .25s, transform .25s; }
.sc-pill.is-out { opacity: 0; transform: translateY(10px); }
.sc-pill.is-done { border-color: color-mix(in srgb, #1f9d55 45%, var(--js-line)); }
.sc-pill.is-fail { border-color: color-mix(in srgb, var(--amber) 60%, var(--js-line)); }
.sc-pill__th { flex: none; width: 34px; height: 48px; border-radius: 7px; background: #111 center / cover no-repeat; display: grid; place-items: center; color: #fff; }
.sc-pill__th .js-i { width: 18px; height: 18px; }
.sc-pill__t { flex: 1; min-width: 0; display: grid; gap: .1rem; } .sc-pill__t b { font-size: .9rem; } .sc-pill__t small { color: var(--js-mut); font-size: .78rem; line-height: 1.35; }
.sc-pill__ring { width: 24px !important; height: 24px !important; -webkit-mask: radial-gradient(circle, transparent 7.5px, #000 8px) !important; mask: radial-gradient(circle, transparent 7.5px, #000 8px) !important; }
.sc-pill__a { flex: none; padding: .45rem .8rem; border-radius: 999px; border: 0; background: var(--amber); color: #141414; font: inherit; font-size: .85rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.sc-pill__x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--js-mut); cursor: pointer; } .sc-pill__x .js-i { width: 16px; height: 16px; }
@keyframes sc-pin { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .sc-pill { animation: none; } }
/* New Scroll: one-tap start tiles */
.sc-quick { display: grid; gap: .6rem; }
.sc-qt { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; border-radius: 16px; border: 1.5px solid var(--js-line); background: var(--color-surface, transparent); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color .15s, transform .12s, background .15s; }
.sc-qt:hover { border-color: var(--amber); } .sc-qt:active { transform: scale(.98); }
.sc-qt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sc-qt__i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--color-accent-text); }
.sc-qt__i .js-i { width: 26px; height: 26px; }
.sc-qt__t { display: grid; gap: .15rem; } .sc-qt__t b { font-size: 1.05rem; } .sc-qt__t small { color: var(--js-mut); font-size: .85rem; }
.sc-qt--go { border: 0; background: var(--amber); color: #141414; padding: 1.15rem 1.1rem; box-shadow: 0 8px 22px color-mix(in srgb, var(--amber) 30%, transparent); }
.sc-qt--go .sc-qt__i { background: rgb(0 0 0 / .12); color: #141414; } .sc-qt--go small { color: rgb(20 20 20 / .72); }
.sc-qt--go:hover { filter: brightness(1.04); }
/* per-photo reactions (posts with 2+ photos) */
.js-ph { position: relative; cursor: default; overflow: visible; }
.js-ph__z { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.js-ph__r { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .7); background: rgb(10 10 10 / .62); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .15s, background .15s; }
.js-ph__r .js-i { width: 20px; height: 20px; }
.js-ph__r:hover { background: rgb(10 10 10 / .8); } .js-ph__r:active { transform: scale(.88); }
.js-ph__r:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.js-ph__r.is-on { border-color: #fff; color: #fff; background: var(--amber); }
.js-ph__r--respect.is-on { background: #2563eb; } .js-ph__r--haul.is-on { background: #ea580c; } .js-ph__r--safe.is-on { background: #16a34a; } .js-ph__r--ha.is-on { background: #d97706; } .js-ph__r--pray.is-on { background: #db2777; } .js-ph__r--sad.is-on { background: #6366f1; } .js-ph__r--mad.is-on { background: #dc2626; }
.js-ph__c { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: .3rem; height: 30px; padding: 0 .55rem 0 .3rem; border-radius: 999px; background: rgb(10 10 10 / .68); color: #fff; font-size: 12.5px; font-weight: 800; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.js-ph__c .js-rxi { border-color: rgb(10 10 10 / .7); width: 20px; height: 20px; } .js-ph__c .js-rxi + .js-rxi { margin-left: -8px; }
.js-phpick--float { position: fixed; z-index: 1200; flex-wrap: nowrap; }
.js-phpick { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--js-card, #1b1b1b); border: 1px solid var(--js-line, rgb(255 255 255 / .12)); box-shadow: 0 14px 34px -10px rgb(0 0 0 / .6); animation: jsPhIn .16s ease-out; max-width: calc(100% - 12px); }
@keyframes jsPhIn { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
.js-phpick__b { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-text); cursor: pointer; transition: transform .12s, background .12s; }
.js-phpick__b .js-i { width: 20px; height: 20px; }
.js-phpick__b:hover { background: var(--color-surface-2); transform: scale(1.12); }
.js-phpick__b.is-on { background: var(--amber); color: #141414; }
.js-phpick__b small { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #fff; color: #141414; font-size: 10px; font-weight: 800; line-height: 16px; }
.js-media--3 .js-ph:not(:first-child) .js-ph__c, .js-media--4 .js-ph .js-ph__c { max-width: calc(100% - 60px); }
.js-lb__rx { margin-top: .6rem; display: flex; justify-content: center; }
.js-lb__rx .js-phpick { background: rgb(20 20 20 / .9); border-color: rgb(255 255 255 / .15); }
.js-lb__rx .js-phpick__b { color: #fff; } .js-lb__rx .js-phpick__b:hover { background: rgb(255 255 255 / .12); }
.js-lb__rx .js-phpick { flex-wrap: nowrap; max-width: none; }
.js-lb__rx .js-phpick__b.is-on, .js-lb__rx .js-phpick__b.is-on:hover { color: #141414; background: var(--amber); }
@media (max-width: 360px) { .js-phpick__b { width: 33px; height: 33px; } }
/* Road tab tap-to-refresh */
.js-tabs a.is-spin .js-i { animation: jsRoadSpin .7s ease; }
@keyframes jsRoadSpin { 0% { transform: none; } 40% { transform: translateY(-3px) scale(1.15); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-phpick { animation: none; } .js-tabs a.is-spin .js-i { animation: none; } }
/* ===== Jimbo CB: voice messages in Messages ===== */
.cb-key { position: relative; color: var(--color-accent-text); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cb-key[hidden] { display: none; }
.cb-key.is-tx { color: #fff; background: #e5262b !important; box-shadow: 0 0 0 6px rgb(229 38 43 / .22), 0 0 22px rgb(229 38 43 / .55); transform: scale(1.18); transition: transform .12s; }
.cb-key.is-tx.is-cancel { background: #555 !important; box-shadow: none; }
.cb-key__lock { position: absolute; left: 50%; top: -46px; width: 34px; height: 34px; margin-left: -17px; display: none; place-items: center; border-radius: 50%; background: var(--js-card, #1b1b1b); color: var(--color-text); box-shadow: 0 6px 18px rgb(0 0 0 / .3); }
.cb-key.is-tx .cb-key__lock { display: grid; animation: cbBob 1s ease-in-out infinite; }
.cb-key.is-lockable .cb-key__lock { background: var(--amber); color: #141414; }
.cb-key__lock .js-i { width: 16px; height: 16px; }
@keyframes cbBob { 50% { transform: translateY(-5px); } }
.dm-comp.is-tx textarea, .dm-comp.is-tx #dmPh, .dm-comp.is-tx #dmLike, .dm-comp.is-tx #dmOf { visibility: hidden; }

.cb-tx { margin: 0 .6rem .35rem; padding: .7rem .8rem .6rem; border-radius: 16px; color: #f4ead2; background: linear-gradient(180deg, #2a2724, #161513 60%), #161513; border: 1px solid #3b3631; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 14px 30px -12px rgb(0 0 0 / .55); transform: translateX(var(--dx, 0)); animation: cbUp .18s ease-out; position: relative; overflow: hidden; }
.cb-tx::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px); pointer-events: none; }
@keyframes cbUp { from { opacity: 0; transform: translateY(10px); } }
.cb-tx.is-cancel { opacity: .6; }
.cb-tx__face { display: flex; align-items: center; gap: .6rem; }
.cb-tx__lamp, .cb-rx__lamp { font: 800 11px/1 var(--font-display, system-ui); letter-spacing: .08em; padding: .3rem .42rem; border-radius: 5px; background: #3a1210; color: #ff7b66; box-shadow: 0 0 0 1px #5b1c17 inset; }
.cb-tx__lamp { background: #e5262b; color: #fff; box-shadow: 0 0 14px rgb(229 38 43 / .8); animation: cbBlink 1s steps(2) infinite; }
@keyframes cbBlink { 50% { opacity: .55; } }
.cb-tx__lcd, .cb-rx__lcd { font: 700 22px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .06em; color: #ffb23f; background: #0c0b09; padding: .35rem .5rem; border-radius: 6px; text-shadow: 0 0 8px rgb(255 178 63 / .7); box-shadow: inset 0 2px 6px rgb(0 0 0 / .8); }
.cb-tx__lcd small { font-size: 11px; margin-right: .25rem; opacity: .75; }
.cb-tx__meter { position: relative; flex: 1; height: 42px; min-width: 90px; border-radius: 8px; background: radial-gradient(120% 140% at 50% 110%, #fff6dc, #e9d9b0); box-shadow: inset 0 2px 8px rgb(0 0 0 / .45); display: flex; justify-content: space-around; align-items: flex-start; padding: 4px 8px 0; overflow: hidden; }
.cb-tx__meter b { font: 800 9px/1 system-ui; color: #3d3428; } .cb-tx__meter b.is-r { color: #c62d1f; }
.cb-tx__needle, .cb-rx__needle { position: absolute; left: 50%; bottom: -4px; width: 2px; height: 40px; margin-left: -1px; background: #c62d1f; transform-origin: 50% 100%; transform: rotate(-50deg); transition: transform .08s linear; border-radius: 2px; }
.cb-tx__time { text-align: right; font: 700 15px/1.1 ui-monospace, Menlo, monospace; } .cb-tx__time small { display: block; font-size: 10px; opacity: .6; }
.cb-tx.is-late .cb-tx__time b { color: #ff7b66; }
.cb-tx__scope { display: block; width: 100%; height: 34px; margin: .45rem 0 .2rem; border-radius: 6px; background: #0c0b09; }
.cb-tx__hint { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 12px; font-weight: 700; color: #cdbf9f; }
.cb-tx__hint span { display: inline-flex; align-items: center; gap: .2rem; } .cb-tx__hint .js-i { width: 14px; height: 14px; }
.cb-tx__to { color: #ffb23f; text-align: center; flex: 1; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-tx__locked { display: none; gap: .5rem; margin-top: .5rem; }
.cb-tx.is-locked .cb-tx__hint { display: none; } .cb-tx.is-locked .cb-tx__locked { display: flex; }
.cb-tx__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; height: 44px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.cb-tx__btn .js-i { width: 18px; height: 18px; }
.cb-tx__btn--clr { background: #34302b; color: #f4ead2; } .cb-tx__btn--over { background: var(--amber); color: #141414; }

.ms-th .dm-msg--voice .dm-bub, .dm-msg--voice .dm-bub { background: none !important; padding: 0; }
.cb-rx { --p: 0; width: min(290px, 72vw); padding: .55rem .65rem .5rem; border-radius: 16px; color: #f4ead2; background: linear-gradient(180deg, #2a2724, #171614); border: 1px solid #3b3631; box-shadow: 0 10px 22px -14px rgb(0 0 0 / .6); }
.cb-rx--me { background: linear-gradient(180deg, #3a2a0f, #1d160b); border-color: #5a431b; }
.cb-rx__top { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.cb-rx__lcd { font-size: 15px; padding: .25rem .4rem; }
.cb-rx__lamp { font-size: 10px; padding: .25rem .35rem; background: #10301d; color: #6be29b; box-shadow: 0 0 0 1px #1d4a2f inset; }
.cb-rx--me .cb-rx__lamp { background: #3a1210; color: #ff9a86; box-shadow: 0 0 0 1px #5b1c17 inset; }
.cb-rx.is-play .cb-rx__lamp { background: #22c55e; color: #052e12; box-shadow: 0 0 12px rgb(34 197 94 / .8); }
.cb-rx--me.is-play .cb-rx__lamp { background: #e5262b; color: #fff; box-shadow: 0 0 12px rgb(229 38 43 / .8); }
.cb-rx__meter { position: relative; margin-left: auto; width: 74px; height: 26px; border-radius: 6px; background: radial-gradient(120% 140% at 50% 110%, #fff6dc, #e2cf9f); box-shadow: inset 0 2px 6px rgb(0 0 0 / .45); overflow: hidden; }
.cb-rx__needle { height: 26px; bottom: -3px; }
.cb-rx__row { display: flex; align-items: center; gap: .5rem; }
.cb-rx__play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--amber); color: #141414; cursor: pointer; box-shadow: 0 0 0 3px rgb(245 166 35 / .2); }
.cb-rx__play .js-i { width: 18px; height: 18px; } .cb-rx__play:active { transform: scale(.92); }
.cb-rx__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cb-rx__wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; min-width: 0; }
.cb-rx__wave i { flex: 1; min-width: 2px; border-radius: 2px; background: rgb(244 234 210 / .3); }
.cb-rx__wave i.is-on { background: #ffb23f; } .cb-rx.is-heard:not(.is-play) .cb-rx__wave i { background: rgb(255 178 63 / .45); }
.cb-rx__t { font: 700 12.5px/1 ui-monospace, Menlo, monospace; min-width: 2.4em; text-align: right; color: #e9dcc0; }
.cb-rx__f { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; }
.cb-rx__f small { margin-left: auto; font-size: 11px; color: #a99c80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-rx__chip { height: 24px; padding: 0 .55rem; border-radius: 999px; border: 1px solid #4a443c; background: transparent; color: #e9dcc0; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.cb-rx__chip.is-on { background: #ffb23f; color: #141414; border-color: #ffb23f; }
.cb-mon.is-on { color: #ffb23f; background: rgb(255 178 63 / .14); }
.cb-mon.is-on .js-i { animation: cbPulse 1.6s ease-in-out infinite; }
@keyframes cbPulse { 50% { opacity: .55; } }
.cb-quick button { font-weight: 800; }
.cb-hint { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 6; display: grid; gap: .15rem; text-align: center; padding: .6rem .9rem; border-radius: 14px; background: #161513; color: #f4ead2; font-size: 13px; box-shadow: 0 14px 30px -10px rgb(0 0 0 / .6); width: max-content; max-width: calc(100% - 24px); transition: opacity .3s; }
.cb-hint b { color: #ffb23f; } .cb-hint.is-out { opacity: 0; }
.dm-th { position: relative; }
.cb-gate { text-align: center; display: grid; gap: .7rem; justify-items: center; }
.cb-gate__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 178 63 / .16); color: #d98a00; }
.cb-gate__ic .js-i { width: 28px; height: 28px; }
.cb-gate .js-wide { width: 100%; }
@media (prefers-reduced-motion: reduce) { .cb-tx, .cb-tx__lamp, .cb-key__lock, .cb-mon.is-on .js-i { animation: none !important; } .cb-tx__needle, .cb-rx__needle { transition: none; } }

.cb-key.is-locked .cb-key__lock { display: none; }
.cb-key.is-locked { transform: none; }
/* Signed-out phones: keep the top bar inside the screen (Join stays visible) */
@media (max-width: 480px) {
  .js-top__r:has(.js-joinbtn) .js-dmbtn, .js-top__r:has(.js-joinbtn) .js-bell, .js-top__r:has(.js-joinbtn) .js-finddr { display: none; }
}
.js-top__in { min-width: 0; } .js-top__r { flex-shrink: 0; }
/* ===== CB on the wall: Breaker 1-9 ===== */
.js-badge--cb { background: #161513; color: #ffb23f; }
.js-stub__cb { color: #c2410c !important; font-weight: 800; }
.js-stub__cb .js-i { color: #e5262b; }
.js-sort--cb { font-weight: 800; }
.js-sort--cb[aria-selected="true"] { background: #161513 !important; color: #ffb23f !important; }
.cbw { margin-top: .6rem; display: grid; gap: .55rem; }
.cbw .cbw__set { width: 100%; padding: .7rem .75rem .6rem; border-radius: 18px; background: linear-gradient(180deg, #34302b 0%, #1d1b18 38%, #141311 100%); border: 1px solid #45403a; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 16px 30px -18px rgb(0 0 0 / .7); position: relative; overflow: hidden; }
.cbw .cbw__set::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 2px, transparent 2px 5px); pointer-events: none; }
.cbw__face { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; position: relative; }
.cbw__lcd { font: 700 22px/1 ui-monospace, Menlo, monospace; color: #ffb23f; background: #0c0b09; padding: .35rem .45rem; border-radius: 7px; text-shadow: 0 0 8px rgb(255 178 63 / .7); box-shadow: inset 0 2px 6px rgb(0 0 0 / .8); white-space: nowrap; }
.cbw__lcd small { font-size: 10px; margin-right: .2rem; opacity: .7; }
.cbw__dot { flex: 1; min-width: 0; overflow: hidden; height: 34px; display: flex; align-items: center; border-radius: 7px; padding: 0 .55rem; background: #0c0b09 radial-gradient(circle, rgb(255 178 63 / .07) 1px, transparent 1.2px) 0 0 / 4px 4px; box-shadow: inset 0 2px 6px rgb(0 0 0 / .8); }
.cbw__mq { font: 800 15px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: #ffb23f; text-shadow: 0 0 6px rgb(255 178 63 / .8); white-space: nowrap; }
.cbw.is-live .cbw__mq { animation: cbwMq 7s linear infinite; }
@keyframes cbwMq { 0% { transform: translateX(105%); } 100% { transform: translateX(-105%); } }
.cbw .cbw__set .cb-rx__wave { height: 38px; }
.cbw__copies { color: #d8c9a7 !important; font-weight: 700; }
/* convoy road */
.cbw__road { position: relative; border-radius: 14px; background: linear-gradient(180deg, #232629, #191b1d); padding: .45rem .5rem .35rem; overflow: hidden; }
.cbw__road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 3px; background: repeating-linear-gradient(90deg, #ffb23f 0 22px, transparent 22px 44px); opacity: .55; pointer-events: none; }
.cbw.is-live .cbw__road::after { animation: cbwRoad .6s linear infinite; }
@keyframes cbwRoad { to { background-position: -44px 0; } }
.cbw__lane { display: flex; align-items: flex-end; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .2rem .1rem 0; scroll-snap-type: x proximity; position: relative; z-index: 1; }
.cbw__lane::-webkit-scrollbar { display: none; }
.cbw__truck { flex: none; width: 92px !important; padding: .1rem .1rem .25rem !important; margin: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: #f4ead2; display: grid; justify-items: center; gap: 0; cursor: pointer; scroll-snap-align: center; border-radius: 10px !important; }
.cbw__truck:focus-visible { outline: 2px solid #ffb23f; }
.cbw__rig { width: 76px; height: 36px; overflow: visible; transition: transform .2s; }
.cbw__puff circle { fill: rgb(220 220 220 / .5); opacity: 0; }
.cbw__truck.is-talk .cbw__rig, .cbw__truck.is-play .cbw__rig { animation: cbwBounce .32s ease-in-out infinite alternate; }
.cbw__truck.is-talk .cbw__puff circle, .cbw__truck.is-play .cbw__puff circle { animation: cbwPuff 1s ease-out infinite; }
.cbw__truck.is-talk .cbw__puff circle + circle { animation-delay: .5s; }
@keyframes cbwBounce { to { transform: translateY(-2.5px) rotate(-1deg); } }
@keyframes cbwPuff { 0% { opacity: .8; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-10px, -8px) scale(1.6); } }
.cbw__truck.is-new { animation: cbwIn .9s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes cbwIn { from { transform: translateX(80px); opacity: 0; } }
.cbw__tlab { font-size: 11px; font-weight: 800; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; margin-top: 2px; }
.cbw__tlab em { display: block; font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #ffb23f; }
.cbw__tdur { font: 700 10px/1 ui-monospace, Menlo, monospace; color: #a99c80; }
.cbw__truck.is-talk .cbw__tlab, .cbw__truck.is-play .cbw__tlab { color: #ffb23f; }
.cbw__empty { align-self: center; font-size: 12.5px; font-weight: 700; color: #a99c80; padding: 0 .5rem 1rem; }
.cbw__convoy { position: relative; z-index: 1; margin-top: .3rem; display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .7rem; border: 0; border-radius: 999px; background: #ffb23f; color: #141414; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; }
.cbw__convoy .js-i { width: 14px; height: 14px; } .cbw__convoy span { font-weight: 700; opacity: .75; }
/* CB back + quick */
.cbw__acts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.cbw__back { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .3rem .9rem .3rem .4rem; border-radius: 999px; border: 0; background: #e5262b; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 8px 18px -8px rgb(229 38 43 / .7); }
.cbw__back > .js-i { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.cbw__back span { display: grid; text-align: left; line-height: 1.15; } .cbw__back b { font-size: 14px; } .cbw__back small { font-size: 11px; opacity: .85; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbw__back.is-tx { background: #b91c1c; box-shadow: 0 0 0 6px rgb(229 38 43 / .22), 0 0 22px rgb(229 38 43 / .55); }
.cbw__back .cb-key__lock { display: none; }
.cbw__quick { display: flex; flex-wrap: wrap; gap: .3rem; }
.cbw__quick button { height: 32px; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--js-line); background: var(--color-surface, transparent); color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.cbw__quick button:hover { border-color: #ffb23f; }
.cbw__tx { flex-basis: 100%; height: 0; }
.cbw__acts .cb-tx { flex-basis: 100%; margin: 0; order: 5; }
.cbw-mini { width: min(300px, 100%); margin-top: .4rem; }
.cbw-mini__h { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; font-size: 12.5px; }
.cbw-mini__h b { color: #ffb23f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cbw-mini__lcd { font: 700 12px/1 ui-monospace, Menlo, monospace; color: #ffb23f; background: #0c0b09; padding: .22rem .35rem; border-radius: 5px; }
/* slang decoder */
.cb-slang { all: unset; cursor: help; color: inherit; font-weight: 700; border-bottom: 2px dotted #ffb23f; }
.cb-slang:focus-visible { outline: 2px solid #ffb23f; outline-offset: 2px; border-radius: 3px; }
.cb-slangpop { position: fixed; z-index: 120; max-width: 260px; padding: .6rem .75rem; border-radius: 12px; background: #161513; color: #f4ead2; box-shadow: 0 16px 30px -10px rgb(0 0 0 / .6); display: grid; gap: .1rem; font-size: 13px; animation: cbUp .15s ease-out; }
.cb-slangpop small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #a99c80; } .cb-slangpop b { color: #ffb23f; }
.cb-hint--float { position: fixed; bottom: 96px; }
/* scan bar */
.cbw-scan { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .8rem; padding: .6rem .7rem; border-radius: 16px; background: #161513; color: #f4ead2; }
.cbw-scan p { flex: 1; margin: 0; font-size: 12.5px; color: #cdbf9f; }
.cbw-scan__b, .cbw-scan__k { display: inline-flex; align-items: center; gap: .35rem; height: 38px; padding: 0 .8rem; border-radius: 999px; border: 0; font: inherit; font-weight: 900; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cbw-scan__b { background: #ffb23f; color: #141414; } .cbw-scan__b.is-on { background: #22c55e; }
.cbw-scan__b.is-on .js-i { animation: cbPulse 1s ease-in-out infinite; }
.cbw-scan__k { background: #e5262b; color: #fff; }
.cbw-scan .js-i { width: 17px; height: 17px; }
@media (max-width: 520px) { .cbw-scan { flex-wrap: wrap; } .cbw-scan p { flex-basis: 100%; order: 3; } }
.cbw-empty .btn { margin-top: .4rem; }
/* Base Station sheet */
.cbs-box .js-modal__box { max-width: 460px; }
.cbs { display: grid; gap: .85rem; }
.cbs__head { display: flex; gap: .7rem; align-items: center; } .cbs__head h2 { margin: 0; font-size: 1.35rem; } .cbs__head p { margin: .1rem 0 0; font-size: 13.5px; color: var(--color-text-muted); }
.cbs__ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #161513; color: #ffb23f; } .cbs__ic .js-i { width: 24px; height: 24px; }
.cbs__rig { display: flex; align-items: center; gap: .9rem; padding: .75rem .85rem; border-radius: 18px; background: linear-gradient(180deg, #34302b, #141311); color: #f4ead2; }
.cbs__dial { display: grid; justify-items: center; gap: .2rem; } .cbs__dial small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #a99c80; }
.cbs__knob { --r: 0deg; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: grab; touch-action: none; position: relative; background: conic-gradient(from 0deg, #4a453e, #2a2723, #4a453e, #2a2723, #4a453e); box-shadow: 0 6px 14px rgb(0 0 0 / .5), inset 0 2px 0 rgb(255 255 255 / .15); transform: rotate(var(--r)); transition: transform .12s; }
.cbs__knob i { position: absolute; left: 50%; top: 6px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: #ffb23f; box-shadow: 0 0 8px #ffb23f; }
.cbs__knob:focus-visible { outline: 3px solid #ffb23f; outline-offset: 3px; }
.cbs__lcdw { display: grid; gap: .3rem; min-width: 0; } .cbs__lcd { font: 700 34px/1 ui-monospace, Menlo, monospace; color: #ffb23f; background: #0c0b09; padding: .4rem .6rem; border-radius: 8px; text-shadow: 0 0 10px rgb(255 178 63 / .7); width: max-content; }
.cbs__lcd small { font-size: 13px; margin-right: .3rem; opacity: .7; } .cbs__chn { font-size: 12.5px; color: #cdbf9f; font-weight: 700; }
.cbs__f { display: grid; gap: .3rem; font-size: 13px; font-weight: 800; } .cbs__f small { font-weight: 600; color: var(--color-text-muted); }
.cbs__hrow { display: flex; gap: .4rem; } .cbs__hrow input, .cbs__f textarea { flex: 1; min-width: 0; height: 44px; padding: 0 .8rem; border-radius: 12px; border: 1px solid var(--js-line); background: var(--color-bg); color: var(--color-text); font: inherit; font-weight: 700; font-size: 16px; }
.cbs__f textarea { height: auto; padding: .6rem .8rem; resize: vertical; font-weight: 500; }
.cbs__dice { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 0; background: #ffb23f; color: #141414; cursor: pointer; display: grid; place-items: center; }
.cbs__dice:active { transform: rotate(180deg); transition: transform .3s; }
.cbs__beeps { display: flex; flex-wrap: wrap; gap: .35rem; }
.cbs__beeps button { height: 34px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--js-line); background: transparent; color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.cbs__beeps button[aria-checked="true"] { background: #161513; color: #ffb23f; border-color: #161513; }
.cbs__cap { display: flex; gap: .55rem; align-items: flex-start; font-size: 13px; } .cbs__cap input { width: 20px; height: 20px; margin-top: 2px; accent-color: #e5262b; } .cbs__cap span { display: grid; } .cbs__cap small { color: var(--color-text-muted); }
.cbs__stage { display: grid; justify-items: center; gap: .5rem; padding-top: .2rem; } .cbs__stage[hidden] { display: none; }
.cbs__tx { width: 100%; height: 0; } .cbs__stage .cb-tx { width: 100%; margin: 0; }
.cbs__ptt { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; width: 100%; display: grid; justify-items: center; gap: .15rem; padding: .9rem; border-radius: 20px; border: 0; background: #e5262b; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 12px 26px -12px rgb(229 38 43 / .8); }
.cbs__ptt > .js-i { width: 44px; height: 44px; } .cbs__ptt b { font-size: 17px; } .cbs__ptt small { font-size: 12px; opacity: .9; }
.cbs__ptt.is-tx { background: #b91c1c; transform: none; box-shadow: 0 0 0 6px rgb(229 38 43 / .22), 0 0 26px rgb(229 38 43 / .6); }
.cbs__ptt .cb-key__lock { display: none; }
.cbs__live { margin: 0; width: 100%; padding: .55rem .7rem; border-radius: 12px; background: #161513; color: #f4ead2; font-size: 14px; min-height: 2.6em; }
.cbs__review { display: grid; gap: .7rem; } .cbs__review[hidden] { display: none; }
.cbs__ok { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 800; color: #16a34a; } .cbs__ok .js-i { width: 18px; height: 18px; }
.cbs__btns { display: flex; gap: .5rem; } .cbs__btns .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; } .cbs__btns .js-i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .cbw.is-live .cbw__mq, .cbw.is-live .cbw__road::after, .cbw__truck .cbw__rig, .cbw__truck .cbw__puff circle, .cbw__truck.is-new { animation: none !important; } }
.cbs, .cbs *, .cbw, .cbw * { box-sizing: border-box; }
.cbs { min-width: 0; } .cbs > * { min-width: 0; max-width: 100%; }
.cbs-box .js-modal__box { overflow-x: hidden; }
/* Signed-in phones: logo + six icons didn't fit 390px. Find drivers stays in the Members page and the bottom bar. */
@media (max-width: 440px) { .js-top__r .js-finddr { display: none; } .js-logo { min-width: 0; flex-shrink: 1; } }

/* lock-screen alerts card */
.js-push { margin-bottom: 1rem; }
.js-push__h { display: flex; gap: .85rem; align-items: flex-start; }
.js-push__h > div { display: grid; gap: .6rem; min-width: 0; flex: 1; }
.js-push__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--js-hi); color: var(--amber); }
.js-push__ic svg { width: 22px; height: 22px; }
.js-push h2 { font: 800 var(--text-base)/1.2 var(--font-display); margin: 0; }
.js-push p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--color-text); }
.js-push .btn { justify-self: start; min-height: 44px; }
.js-push__on { color: #1d8f4e; }
.js-push__list { list-style: none; display: grid; gap: .25rem; margin: 0; padding: 0; }
.js-push__list label { display: flex; gap: .75rem; align-items: center; min-height: 48px; padding: .35rem 0; cursor: pointer; }
.js-push__list input { flex: none; width: 22px; height: 22px; accent-color: var(--amber); }
.js-push__list span { display: grid; gap: 1px; }
.js-push__list b { font-size: 15px; }
.js-push__list small { font-size: 13px; color: var(--js-mut); }
.js-push__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.js-push__err:empty { display: none; }
.js-push__err { font-size: 14px; color: var(--color-text); background: var(--color-surface-2); border-radius: 10px; padding: .6rem .75rem; }

/* Easier to tap and read on phones (audit, Oct 2026). Hit areas grow; the layout stays the same. */
.js-stub__quick .js-stub__live { color: #c4271b; }
[data-theme="dark"] .js-stub__quick .js-stub__live { color: #ff6b6b; }
.cbw__back { background: #c21f24; box-shadow: 0 8px 18px -8px rgb(194 31 36 / .7); }
.js-push__on { color: #157a40; }
[data-theme="dark"] .js-push__on { color: #4ade80; }
@media (pointer: coarse) {
  .js-un, .js-time, .js-st, a.js-chip, .js-tag, .js-men, .sx-cap__u { padding-block: 9px; margin-block: -9px; }
  .js-vp__speed .js-chip { min-height: 40px; }
  .js-link { padding-block: 10px; margin-block: -10px; }
  .js-page .brand, .js-logo { padding-block: 10px; margin-block: -10px; }
  .cb-rx__chip { height: 34px; padding: 0 .7rem; font-size: 12.5px; }
  .cbw__convoy { height: 40px; padding: 0 .9rem; }
  .fm-link { padding-block: .7rem; }
  .fm-loc { padding-block: .7rem; margin-block: -.7rem; }
  .js-time { padding-inline: 6px; margin-inline: -6px; }
  .fm-search input { min-height: 40px; }
  .mk-check { min-height: 40px; }
  .mk-check input { width: 22px; height: 22px; }
  .sx-fol { width: 30px; height: 30px; margin-left: -15px; bottom: -14px; }
  .sx-fol::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
  .sx-fol .js-i { width: 16px; height: 16px; }
  .sx-scrub { height: 34px; }
  .sx-scrub input { height: 34px; background-size: 100% 3px; background-repeat: no-repeat; background-position: center bottom 6px; background-color: transparent; }
  .sx-scrub:hover input, .sx-s.is-paused .sx-scrub input, .sx-scrub input:focus-visible { height: 34px; background-size: 100% 5px; }
}
/* Red badges and error text: readable red (was 3.8:1 on white) */
.js-dot, .js-new19 { background: #d42020; }
.js-err, .js-sheet button.is-danger, .mk-rec em { color: #c4271b !important; }
[data-theme="dark"] .js-err, [data-theme="dark"] .js-sheet button.is-danger, [data-theme="dark"] .mk-rec em { color: #ff6b6b !important; }