/* =========================================================================
TOOLS MARKET — shared components for inner pages
(loads AFTER styles.css; reuses its variables)
========================================================================= */
/* ---------- page scaffold ---------- */
.page { padding: 34px 0 64px; min-height: 60vh; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.01em; }
.page-head h1 .accent { color: var(--teal); }
.page-head p { color: var(--txt-3); font-size: 14px; margin-top: 5px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--txt-3); margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a { color: var(--txt-2); }
.crumbs a:hover { color: var(--teal); }
.crumbs .sep { opacity: .5; }
/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; color: var(--txt-2); }
.field label .req { color: var(--red); }
.input, .select, .textarea {
width: 100%; background: var(--navy-850); border: 1px solid var(--line-2);
border-radius: 10px; padding: 11px 14px; color: var(--txt); font-size: 14px;
font-family: inherit; transition: border-color .18s, box-shadow .18s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow); }
.input::placeholder, .textarea::placeholder { color: var(--txt-3); }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F819A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-inline-end: 38px; }
[dir="rtl"] .select { background-position: left 12px center; }
.textarea { min-height: 110px; resize: vertical; }
.field__err { font-size: 12px; color: var(--red); display: none; }
.field.invalid .field__err { display: block; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--red); }
.form-note { font-size: 12.5px; color: var(--txt-3); }
.form-note a { color: var(--teal); font-weight: 600; }
.form-alert { display: none; font-size: 13.5px; font-weight: 600; padding: 11px 14px; border-radius: 10px; }
.form-alert.show { display: block; }
.form-alert--err { background: rgba(255,90,110,.1); color: var(--red); border: 1px solid rgba(255,90,110,.3); }
.form-alert--ok { background: rgba(53,208,127,.1); color: var(--green); border: 1px solid rgba(53,208,127,.3); }
/* ---------- auth pages ---------- */
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card {
background: linear-gradient(160deg, var(--panel), var(--navy-850));
border: 1px solid var(--line-2); border-radius: var(--radius-lg);
padding: 34px 32px; box-shadow: var(--shadow);
}
.auth-card .auth-head { text-align: center; margin-bottom: 24px; }
.auth-card .auth-head h1 { font-size: 24px; font-weight: 800; }
.auth-card .auth-head p { color: var(--txt-3); font-size: 13.5px; margin-top: 6px; }
.auth-alt { text-align: center; font-size: 13.5px; color: var(--txt-2); margin-top: 18px; }
.auth-alt a { color: var(--teal); font-weight: 700; }
/* .demo-box styles removed with the demo-account panel on the login page. */
/* ---------- market layout ---------- */
.market-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.filters { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: calc(var(--header-h) + 14px); }
.filters h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; color: var(--txt-2); }
.filters .fgroup { padding: 12px 0; border-top: 1px solid var(--line); }
.filters .fgroup:first-of-type { border-top: 0; padding-top: 0; }
.filters .fgroup > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--txt-3); margin-bottom: 8px; }
.filters .frange { display: flex; gap: 8px; align-items: center; }
.filters .fcheck { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--txt-2); cursor: pointer; }
.filters .fcheck input { accent-color: var(--teal); width: 16px; height: 16px; }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.results-bar .count { font-size: 13.5px; color: var(--txt-3); }
.results-bar .count b { color: var(--txt); }
.results-bar .select { width: auto; padding-block: 9px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.page-btn { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; color: var(--txt-2); border: 1px solid var(--line); background: var(--panel); transition: .15s; }
.page-btn:hover { border-color: var(--teal); color: var(--txt); }
.page-btn.active { background: var(--teal); color: #04231f; border-color: var(--teal); }
.page-btn:disabled { opacity: .35; cursor: default; }
/* ---------- offer detail ---------- */
/* Wider container just for this page: G2G-style 72/28 split needs more
room than the site's default 1280px content width. */
.detail-page { max-width: 1420px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 72%) minmax(300px, 28%); gap: 28px; align-items: start; }
.detail-layout > * { min-width: 0; }
.detail-layout .desc { overflow-wrap: anywhere; }
.detail-art { height: 240px; border-radius: var(--radius-lg); border: 1px solid var(--line-2); display: grid; place-items: center; position: relative; overflow: hidden; }
.detail-art .glyph { font-size: 72px; font-weight: 800; color: rgba(255,255,255,.92); }
.detail-art .offer__badges { top: 14px; inset-inline-start: 14px; }
.detail-title { font-size: clamp(20px, 2.3vw, 26px); font-weight: 800; line-height: 1.25; margin-top: 18px; }
.detail-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--txt-2); }
.detail-meta .stars svg { width: 14px; height: 14px; color: var(--orange); }
.panel-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel-box + .panel-box { margin-top: 16px; }
.panel-box h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.panel-box .desc { font-size: 14px; color: var(--txt-2); line-height: 1.65; white-space: pre-line; overflow-wrap:anywhere; word-break:break-word; }
.buy-box { position: sticky; top: calc(var(--header-h) + 24px); background: linear-gradient(160deg, var(--panel), var(--navy-850)); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); }
.buy-box .price { font-size: 30px; font-weight: 800; }
.buy-box .price small { font-size: 13px; color: var(--txt-3); font-weight: 600; display: block; }
.buy-box .rows { margin: 14px 0; border-top: 1px solid var(--line); }
.buy-box .row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--txt-2); padding: 9px 0; border-bottom: 1px solid var(--line); }
.buy-box .row b { color: var(--txt); }
.protection-card{margin-top:13px;border:1px solid color-mix(in srgb,var(--teal) 34%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--teal) 7%,var(--panel));overflow:hidden}.protection-card summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px;cursor:pointer;color:var(--teal)}.protection-card summary::-webkit-details-marker{display:none}.protection-card summary>span{display:grid;gap:2px;flex:1}.protection-card summary b{font-size:12px;color:var(--txt)}.protection-card summary small{font-size:10px;color:var(--txt-3)}.protection-card summary i{font-style:normal;transition:transform .25s}.protection-card[open] summary i{transform:rotate(180deg)}.protection-card ol{margin:0;padding:2px 15px 8px 43px;display:grid;gap:10px}.protection-card li{padding-inline-start:3px;color:var(--teal);font-size:11px}.protection-card li b,.protection-card li span{display:block}.protection-card li b{color:var(--txt);font-size:11px}.protection-card li span{color:var(--txt-3);margin-top:2px;line-height:1.45}.protection-card>a{display:block;border-top:1px solid var(--line);padding:10px 13px;color:var(--teal);font-size:10.5px;font-weight:700}
.save-offer{width:100%;margin-top:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--txt-2);font-size:11px;font-weight:700;background:var(--panel-2);transition:border-color .2s,color .2s,transform .2s}.save-offer:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}.save-offer.is-saved{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line));background:color-mix(in srgb,var(--red) 8%,var(--panel))}.save-offer.is-saved svg{fill:currentColor}
.compare-toggle{padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--txt-2);font-size:10px;font-weight:750;transition:.2s}.compare-toggle:hover,.compare-toggle.is-selected{color:var(--red);border-color:var(--red);background:color-mix(in srgb,var(--red) 9%,transparent)}.compare-hint{display:flex;align-items:center;gap:7px;margin:12px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;color:var(--txt-3);font-size:11px}.compare-panel{margin:14px 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.compare-panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.compare-panel__head b{font-size:14px}.compare-panel__head button{color:var(--red);font-size:11px}.compare-panel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px}.compare-card{display:grid;gap:7px;padding:12px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line)}.compare-card>b{display:flex;align-items:center;gap:4px;font-size:12px}.compare-card>b svg{width:12px}.compare-card strong{font-size:18px;color:var(--red)}.compare-card span{font-size:10.5px;color:var(--txt-3)}
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.qty-stepper button { width: 38px; height: 40px; font-size: 18px; font-weight: 800; color: var(--txt-2); background: var(--navy-850); }
.qty-stepper button:hover { color: var(--teal); }
.qty-stepper input { width: 52px; text-align: center; background: none; border: none; color: var(--txt); font-size: 15px; font-weight: 700; }
.buy-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.seller-card { display: flex; align-items: center; gap: 12px; }
.seller-card .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #04231f; background: var(--teal); flex-shrink: 0; }
/* Same fix as .seller-trust__id: the name column must shrink and the name row
must wrap, or a long username pushes the Founding Seller chip off-screen. */
.seller-card .info { min-width: 0; }
.seller-card .info b { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; flex-wrap: wrap; }
.seller-card .info b svg { width: 14px; height: 14px; color: var(--teal); flex-shrink: 0; }
.seller-card .info span { font-size: 12.5px; color: var(--txt-3); display: block; }
.qty-stepper--sm button { width: 30px; height: 32px; font-size: 15px; }
.qty-stepper--sm input { width: 38px; font-size: 13px; }
/* ---------- other sellers (full-width section below the two-column area) ---------- */
.other-sellers { margin-top: 28px; }
.other-sellers__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 2px 16px; }
.other-sellers__title { font-size: 18px; font-weight: 800; }
.other-sellers__title span { color: var(--txt-3); font-weight: 700; }
.other-sellers__controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.other-sellers__controls .fcheck { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--txt-2); cursor: pointer; white-space: nowrap; }
.other-sellers__controls .fcheck input { accent-color: var(--teal); width: 16px; height: 16px; }
.other-sellers__sort { display: flex; align-items: center; gap: 10px; }
.other-sellers__sort label { font-size: 13px; color: var(--txt-3); font-weight: 600; white-space: nowrap; }
.other-sellers__sort .select { width: auto; padding-block: 8px; font-size: 13.5px; }
.offer-list { display: flex; flex-direction: column; gap: 11px; }
.offer-row {
position: relative; width: 100%; min-height: 76px;
display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(300px, 2fr) minmax(130px, .7fr) 96px;
align-items: center; gap: 18px; padding: 16px 18px;
border: 1px solid var(--line); border-radius: var(--radius);
background: rgba(255,255,255,0.025);
transition: background .15s, border-color .15s;
}
.offer-row:hover { background: rgba(255,255,255,0.045); border-color: var(--line-2); }
.offer-row--out { opacity: .65; }
.offer-row--best { border-color: var(--teal); }
.offer-row .chip--best { position: absolute; top: -10px; inset-inline-start: 14px; background: var(--teal); color: #04231f; }
.offer-row__seller { display: flex; align-items: center; gap: 12px; min-width: 0; }
.offer-row__seller .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #04231f; background: var(--teal); flex-shrink: 0; }
.offer-row__seller .info { min-width: 0; }
/* The NAME is the part that may be truncated; the badges must survive.
Previously overflow:hidden sat on this flex container, so once the
name + level + founding chip exceeded the column the browser simply
cut through whatever came last -- producing "FOUNDING SEL". Moving
the clipping onto the name itself (with min-width:0 so it is allowed
to shrink) truncates the name and leaves every badge intact. */
.offer-row__seller .info b { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; flex-wrap: wrap; }
/* The name keeps a floor so it can never be squeezed out of existence --
without it, a tight column shrank it to zero width and the row showed
badges with no seller at all. Past that floor the badges wrap to a
second line instead of being clipped: a slightly taller row is a fair
price for never printing "FOUNDING SEL" or hiding who is selling. */
.offer-row__seller .info b > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 5.5em; }
.offer-row__seller .info b svg { width: 13px; height: 13px; color: var(--teal); flex-shrink: 0; }
.offer-row__seller .info span { font-size: 12px; color: var(--txt-3); display: block; margin-top: 2px; }
.offer-row__stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--txt-2); }
.offer-row__stats .stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.offer-row__stats .stat b { color: var(--txt); font-weight: 700; }
.offer-row__stats .stat svg { width: 13px; height: 13px; color: var(--teal); }
.offer-row__stats .badge--discount { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--teal-glow); color: var(--teal); font-size: 11px; font-weight: 800; }
.offer-row__price { text-align: end; }
.offer-row__price small { display: block; font-size: 11px; color: var(--txt-3); font-weight: 600; }
.offer-row__price b { font-size: 18px; font-weight: 800; }
.offer-row__view { justify-self: end; }
.offer-row__out-notice { grid-column: 3 / span 2; justify-self: end; }
/* ---------- seller trust card ---------- */
.seller-trust { display: flex; flex-direction: column; gap: 16px; }
.seller-trust__id { display: flex; align-items: center; gap: 12px; }
/* The middle .info column must be allowed to shrink; a flex item defaults to
min-width:auto, so a long seller name held its intrinsic width and pushed
the Follow button off-screen — a real horizontal-scroll bug on mobile. */
.seller-trust__id .info { flex: 1 1 auto; min-width: 0; }
.seller-trust__id > .btn { flex-shrink: 0; }
/* The name row holds the username plus a "Founding Seller" chip. It is a flex
row, so a long name kept the chip on the same line and pushed it off-screen.
Let it wrap, cap the name with an ellipsis, and stop the chip from shrinking
into an unreadable sliver. */
.seller-trust__id .info b { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; flex-wrap: wrap; }
.seller-trust__id .info b svg { width: 14px; height: 14px; color: var(--teal); flex-shrink: 0; }
.seller-trust__id .info b .founding-chip { flex-shrink: 0; }
/* Badges must never be squeezed. Their flex parents set
overflow:hidden + text-overflow:ellipsis so a long seller NAME is
truncated -- correct -- but every child defaults to flex-shrink:1,
so the chips were being crushed and clipped too (the verify svg was
already protected, the chips were not). A half-rendered
"FOUNDING SELLE" is worse than no badge, and it happened in every
flex row that shows one, so this is global rather than per-context. */
.founding-chip, .lvl-chip { flex-shrink: 0; }
.seller-trust__sub { font-size: 12.5px; color: var(--txt-3); display: block; margin-top: 2px; overflow-wrap: anywhere; }
.seller-trust__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seller-trust__stats .stat { text-align: center; }
.seller-trust__stats .stat small { display: block; font-size: 11px; color: var(--txt-3); font-weight: 600; margin-bottom: 4px; }
.seller-trust__stats .stat b { font-size: 15px; font-weight: 800; }
.seller-trust__chat { align-self: flex-start; }
.avatar { position: relative; }
.avatar--lg { width: 52px; height: 52px; font-size: 19px; }
.dot-status { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--txt-3); border: 2px solid var(--panel); }
.dot-status--on { background: var(--green); }
/* ---------- product info grid ---------- */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info-grid__item { display: flex; align-items: center; gap: 12px; }
.info-grid__ic { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--navy-850); border: 1px solid var(--line-2); color: var(--teal); }
.info-grid__item small { display: block; font-size: 11.5px; color: var(--txt-3); font-weight: 600; }
.info-grid__item b { font-size: 14px; font-weight: 700; }
/* ---------- FAQ accordion + terms ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--navy-850); overflow: hidden; }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font-size: 14px; font-weight: 700; text-align: start; }
.faq-item__q svg { flex-shrink: 0; transition: transform .2s; color: var(--txt-3); }
.faq-item--open .faq-item__q svg { transform: rotate(180deg); color: var(--teal); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; padding: 0 16px; font-size: 13.5px; color: var(--txt-2); line-height: 1.6; }
.faq-item--open .faq-item__a { max-height: 320px; padding: 0 16px 15px; }
.terms-box .desc { font-size: 13px; }
/* ---------- other packages ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pkg-card { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px; background: var(--navy-850); display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; }
.pkg-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.pkg-card b { font-size: 14px; }
.pkg-card p { font-size: 12.5px; color: var(--txt-3); line-height: 1.5; flex: 1; }
.pkg-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pkg-card__price { font-size: 16px; font-weight: 800; color: var(--teal); }
.review { padding: 14px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 0; }
.review .rhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review .rhead .avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #04231f; background: var(--panel-3); color: var(--txt); }
.review .rhead b { font-size: 13.5px; }
.review .rhead time { font-size: 11.5px; color: var(--txt-3); margin-inline-start: auto; }
.review p { font-size: 13.5px; color: var(--txt-2); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; color: var(--orange); }
.stars svg.off { color: var(--panel-3); }
.stars--pick svg { width: 26px; height: 26px; cursor: pointer; transition: transform .12s; }
.stars--pick svg:hover { transform: scale(1.15); }
/* ---------- cart / checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.cart-item + .cart-item { margin-top: 12px; }
.cart-item .thumb { width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: rgba(255,255,255,.92); }
.cart-item .t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.cart-item .s { font-size: 12px; color: var(--txt-3); margin-top: 3px; }
.cart-item .end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-item .end b { font-size: 15px; }
.cart-item .rm { font-size: 12px; color: var(--red); font-weight: 700; }
.summary-box { background: linear-gradient(160deg, var(--panel), var(--navy-850)); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 22px; position: sticky; top: calc(var(--header-h) + 14px); }
.summary-box h3 { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.summary-box .row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--txt-2); padding: 8px 0; }
.summary-box .row.total { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 14px; font-size: 15px; color: var(--txt); font-weight: 800; }
.pay-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; cursor: pointer; transition: .15s; margin-top: 10px; }
.pay-option:hover { border-color: var(--teal); }
.pay-option.selected { border-color: var(--teal); background: rgba(255,36,54,.06); box-shadow: 0 0 0 1px var(--teal); }
.pay-option input { accent-color: var(--teal); width: 17px; height: 17px; }
.pay-option .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,36,54,.09); color: var(--teal); }
.pay-option .ic svg { width: 20px; height: 20px; }
.pay-option .ic img { width: 40px; height: 40px; border-radius: 10px; display:block; }
.pay-brand-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pay-brand-strip span { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--line-2); border-radius:10px; color:var(--txt-2); font-size:12px; }
.pay-brand-strip img { width:24px; height:24px; border-radius:6px; }
.pay-option .t b { font-size: 14px; display: block; }
.pay-option .t span { font-size: 12px; color: var(--txt-3); }
.card-fields { display: none; margin-top: 12px; }
.card-fields.show { display: block; }
.pay-options { display: flex; flex-direction: column; }
.pm-steps { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.pm-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--txt-3); padding: 8px 12px; border-radius: 999px; background: var(--panel-2); }
.pm-step__n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: var(--txt-2); font-size: 11px; }
.pm-step.active { color: var(--teal); background: rgba(255,36,54,.09); }
.pm-step.active .pm-step__n { background: var(--teal); color: #04231f; }
.pm-step.done { color: var(--txt-2); }
.pm-step.done .pm-step__n { background: var(--green); color: #04231f; }
.pm-pane { }
.pm-actions { display: flex; gap: 10px; margin-top: 18px; }
.pm-summary .row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--txt-2); padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.pm-summary .row:last-child { border-bottom: none; font-size: 15px; color: var(--txt); font-weight: 800; }
.success-box { text-align: center; max-width: 520px; margin: 40px auto; }
.success-box .big-ic { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(53,208,127,.12); color: var(--green); border: 2px solid rgba(53,208,127,.4); }
.success-box .big-ic svg { width: 40px; height: 40px; }
.success-box h1 { font-size: 26px; font-weight: 800; }
.success-box p { color: var(--txt-2); margin: 12px 0 24px; }
/* ---------- dashboard (account + seller) ---------- */
.dash-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 24px; align-items: start; }
.dash-layout > * { min-width: 0; }
.side-nav { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; position: sticky; top: calc(var(--header-h) + 14px); }
.side-nav .who { display: flex; align-items: center; gap: 11px; padding: 10px 10px 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.side-nav .who .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04231f; background: var(--teal); }
.side-nav .who b { font-size: 14px; display: block; line-height: 1.2; }
.side-nav .who span { font-size: 11.5px; color: var(--txt-3); }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--txt-2); transition: .14s; }
.side-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-nav a:hover { background: var(--panel-2); color: var(--txt); }
.side-nav a.active { background: rgba(255,36,54,.09); color: var(--teal); }
.side-nav a.danger { color: var(--red); }
.side-nav .sep { height: 1px; background: var(--line); margin: 10px 4px; }
.side-nav__h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-3); padding: 14px 12px 6px; }
.side-nav__h:first-child { padding-top: 4px; }
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.dash-card { background: linear-gradient(160deg, var(--panel), var(--navy-850)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.dash-card .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,36,54,.09); color: var(--teal); margin-bottom: 12px; }
.dash-card .ic svg { width: 19px; height: 19px; }
.dash-card .n { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.dash-card .l { font-size: 12px; color: var(--txt-3); margin-top: 3px; font-weight: 600; }
.dash-card.orange .ic { background: rgba(245,181,70,.12); color: var(--orange); }
/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th { text-align: start; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); padding: 13px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl td { padding: 13px 16px; font-size: 13.5px; color: var(--txt-2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }
.tbl td b { color: var(--txt); }
.tbl .mini { display: flex; align-items: center; gap: 10px; }
.tbl .mini .thumb { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.92); flex-shrink: 0; }
.tbl .mini .t { font-weight: 700; color: var(--txt); font-size: 13px; line-height: 1.25; }
.tbl .mini .s { font-size: 11.5px; color: var(--txt-3); }
/* ---------- status chips ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--paid { background: rgba(245,181,70,.12); color: var(--orange); }
.status--delivering { background: rgba(90,150,255,.14); color: #6ea8ff; }
.status--pending_payment { background: rgba(255,36,54,.11); color: var(--teal); }
.status--delivered { background: rgba(255,36,54,.11); color: var(--teal); }
.status--completed { background: rgba(53,208,127,.12); color: var(--green); }
.status--disputed { background: rgba(255,90,110,.12); color: var(--red); }
.status--cancelled { background: rgba(255,255,255,.07); color: var(--txt-3); }
.status--active { background: rgba(53,208,127,.12); color: var(--green); }
.status--paused { background: rgba(255,255,255,.07); color: var(--txt-3); }
.status--waiting { background: rgba(255,36,54,.11); color: var(--teal); }
.status--confirming { background: rgba(245,181,70,.12); color: var(--orange); }
.status--finished { background: rgba(53,208,127,.12); color: var(--green); }
.status--failed { background: rgba(255,90,110,.12); color: var(--red); }
.status--expired { background: rgba(255,255,255,.07); color: var(--txt-3); }
/* ---------- misc ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--txt-3); }
.empty-state .eic { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line-2); color: var(--txt-3); }
.empty-state .eic svg { width: 30px; height: 30px; }
.empty-state h3 { font-size: 17px; font-weight: 800; color: var(--txt); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; margin-bottom: 18px; }
.empty-state--mascot{display:flex;align-items:center;justify-content:center;gap:28px;text-align:left;padding:28px 34px;min-height:280px;background:radial-gradient(circle at 20% 50%,rgba(255,36,61,.12),transparent 48%)}
.empty-state--mascot>img{width:min(220px,38%);max-height:260px;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.24))}
.tmx-mascot--favorites{content:url("../img/tmx-mascot-favorites-v3.webp?v=20260820.10")}
.tmx-mascot--support{content:url("../img/tmx-mascot-support-v3.webp?v=20260820.10")}
.tmx-mascot--seller{content:url("../img/tmx-mascot-seller-v3.webp?v=20260820.10")}
.empty-state--mascot>div{max-width:360px}.empty-state--mascot p{max-width:330px}
html[data-theme="light"] .empty-state--mascot{background:radial-gradient(circle at 20% 50%,rgba(255,36,61,.08),transparent 48%)}
.skeleton { border-radius: var(--radius); background: linear-gradient(100deg, var(--panel) 40%, var(--panel-2) 50%, var(--panel) 60%); background-size: 200% 100%; animation: sk 1.2s infinite linear; min-height: 120px; border: 1px solid var(--line); }
@keyframes sk { to { background-position: -200% 0; } }
.notice { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--txt-2); background: rgba(255,36,54,.055); border: 1px solid rgba(255,36,54,.22); border-radius: 12px; padding: 12px 14px; }
.notice svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; margin-top: 1px; }
.notice--warn { background: rgba(245,181,70,.07); border-color: rgba(245,181,70,.25); }
.notice--warn svg { color: var(--orange); }
.notice--escrow { background: rgba(43,214,106,.06); border-color: rgba(43,214,106,.22); }
.notice--escrow svg { color: var(--green, #2bd66a); }
/* low-stock urgency (honest — driven by real stock<=5) */
.scarcity-note { display:flex; align-items:center; gap:8px; margin:12px 0 4px; padding:8px 12px; font-size:13px; font-weight:700; color:var(--red); background:rgba(255,36,54,.07); border:1px solid rgba(255,36,54,.22); border-radius:10px; }
.scarcity-note svg { width:15px; height:15px; color:var(--red); flex-shrink:0; }
.offer-row .scarcity-chip, .store-offer .scarcity-chip, .live-offer .scarcity-chip { color:var(--red); font-weight:700; }
/* escrow reassurance block under the Buy button */
.escrow-assure { margin-top:14px; padding:12px 14px; background:rgba(43,214,106,.05); border:1px solid rgba(43,214,106,.2); border-radius:12px; display:flex; flex-direction:column; gap:8px; }
.escrow-assure__row { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.4; color:var(--txt-2); }
.escrow-assure__tick { flex-shrink:0; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--green, #2bd66a); color:#04231f; font-size:11px; font-weight:900; margin-top:1px; }
/* collapsed coupon field at checkout */
.coupon-toggle > summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--teal); list-style:none; padding:4px 0; }
.coupon-toggle > summary::-webkit-details-marker { display:none; }
.coupon-toggle > summary::before { content:"＋ "; font-weight:800; }
.coupon-toggle[open] > summary::before { content:"− "; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs button { padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--txt-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-pane[hidden] { display: none; }
.social-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; margin-top: 10px; }
.social-card .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,36,54,.09); color: var(--teal); flex-shrink: 0; }
.social-card .ic svg { width: 20px; height: 20px; }
.social-card .body { flex: 1; min-width: 0; }
.social-card .body b { font-size: 14px; display: block; }
.social-card .body span { font-size: 12px; color: var(--txt-3); }
.social-card .body input { margin-top: 6px; }
.verify-box { text-align: center; padding: 26px 16px; }
.verify-box .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,36,54,.09); color: var(--teal); margin: 0 auto 14px; }
.verify-box .ic svg { width: 26px; height: 26px; }
.verify-box.pending .ic { background: rgba(245,181,70,.12); color: var(--orange); }
.verify-box.approved .ic { background: rgba(255,36,54,.13); color: var(--teal); }
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.modal h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.modal .modal-sub { font-size: 13px; color: var(--txt-2); margin-bottom: 16px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.btn--danger { background: rgba(255,90,110,.12); color: var(--red); border: 1px solid rgba(255,90,110,.35); }
.btn--danger:hover { background: var(--red); color: #fff; }
.btn--sm { padding: 7px 13px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.link-teal { color: var(--teal); font-weight: 700; }
.muted { color: var(--txt-3); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace; }
.header-user .avatar-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 700; font-size: 13px; color: var(--txt); }
[dir="rtl"] .header-user .avatar-btn { padding: 5px 5px 5px 10px; }
.header-user .avatar-btn:hover { border-color: var(--teal); }
.header-user .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #04231f; background: var(--teal); }
.header-user .bal { font-size: 11px; color: var(--teal); font-weight: 800; }
.menu__item.danger { color: var(--red); }
.menu__head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu__head b { font-size: 14px; display: block; }
.menu__head span { font-size: 12px; color: var(--txt-3); }
/* ---------- market category hero (G2G-style) ---------- */
.cat-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; margin-bottom: 20px; border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(255,36,54,.10), rgba(255,255,255,.025)); }
.cat-hero h2 { font-size: 22px; }
.cat-hero__stats { display: flex; gap: 26px; }
.cat-hero__stats div { text-align: center; }
.cat-hero__stats b { display: block; font-size: 20px; color: var(--teal); }
.cat-hero__stats small { font-size: 11.5px; color: var(--txt-3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
/* ---------- brand cards in search results (G2G-style) ----------
A search for a service name surfaces the service itself above the product
grid: its tile, plus the categories it actually has entries in. */
.brand-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 20px; }
.brand-card { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; background: var(--panel-2); }
.brand-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brand-card__head b { font-size: 15px; }
.brand-card__head .thumb { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; flex: none; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.brand-chip { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--txt-2); transition: .16s; }
.brand-chip:hover { border-color: var(--teal); color: var(--teal); }
.brand-chip.on { background: var(--teal); border-color: var(--teal); color: #04231f; }
.cat-hero .brand-chips { margin-top: 12px; }
html[data-theme="light"] .brand-card { background: #fff; }
/* ---------- offer form tips (G2G-style side notes) ---------- */
.form-tips { border: 1px dashed var(--line-2); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.form-tips b { display: block; font-size: 13px; margin-bottom: 8px; }
.form-tips li { font-size: 12.5px; color: var(--txt-2); margin-inline-start: 16px; margin-top: 5px; }
/* ---------- footer theme toggle (G2G night mode) ---------- */
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--txt-2); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); }
.theme-toggle:hover { color: var(--teal); border-color: var(--teal); }
/* ---------- G2G-style homepage: hero search + recently bought ---------- */
.hero__search { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-2); }
.hero__search:focus-within { border-color: var(--teal); }
.hero__search svg { width: 18px; height: 18px; color: var(--txt-3); flex-shrink: 0; }
.hero__search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--txt); font-size: 14px; font-family: inherit; }
.hero__topsearch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hero__topsearch .lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--txt-3); }
.hero__topsearch .lbl svg { width: 13px; height: 13px; color: var(--orange); }
.ts-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--txt-2); }
.ts-chip:hover { border-color: var(--teal); color: var(--teal); }
/* ---------- risk review queue + account panel ---------- */
/* The queue cells were running into each other because name/email and
signal/detail were each stacked with a
inside a cell that had no width
discipline. Two-line cells with an explicit block layout and a truncating
secondary line keep the columns in their lanes at any width. */
.risk-tbl td { vertical-align: top; }
.risk-who, .risk-sig { min-width: 0; max-width: 320px; }
/* BOTH lines truncate, not just the secondary one: a long username overflowed
into the next column on a narrow screen while the email beside it behaved. */
.risk-who strong, .risk-sig strong,
.risk-who .s, .risk-sig .s {
display: block; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.risk-who .s, .risk-sig .s { margin-top: 2px; }
.risk-when { white-space: nowrap; }
.risk-act { text-align: end; white-space: nowrap; }
.risk-panel {
margin-top: 18px; padding: 20px;
border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel);
}
.risk-panel > header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.risk-panel h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; }
.risk-panel h4 { margin: 22px 0 8px; font-size: 13px; color: var(--txt-2); }
/* auto-fit rather than a fixed column count: this panel is read on a phone as
often as on the dashboard, and the tiles should reflow, not squash. */
.risk-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px; margin-top: 16px;
}
.risk-stat {
border: 1px solid var(--line); border-radius: 11px;
background: var(--bg); padding: 12px 13px; min-width: 0;
}
.risk-stat small { display: block; color: var(--txt-3); font-size: 10px;
margin-bottom: 5px; }
.risk-stat b { font-size: 18px; display: block; }
.risk-stat .s { display: block; margin-top: 3px; color: var(--txt-3);
font-size: 10.5px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.risk-panel > footer {
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px;
padding-top: 16px; border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
.risk-panel > header { flex-direction: column; }
.risk-who, .risk-sig { max-width: 180px; }
}
/* ---------- dispute report form (G2G-style) ---------- */
/* The faulty-item picker. Wraps rather than clips, and each row is a whole
touch target -- picking "item 3 of 5" on a phone must not need precision. */
/* minmax(0,1fr), not the default auto: an auto grid column grows to fit its
widest child, so one long code pushed the whole row past the dialog edge.
The row and the label both need min-width:0 as well -- a flex item refuses
to shrink below its content unless told, and that is what makes the code
truncate instead of the layout breaking. */
.dr-items { display: grid; grid-template-columns: minmax(0, 1fr);
gap: 6px; margin-top: 6px; }
.dr-item { display: flex; align-items: center; gap: 9px; min-height: 44px;
min-width: 0; padding: 8px 11px; border: 1px solid var(--line-2);
border-radius: 10px; background: var(--panel-2); cursor: pointer;
font-size: 12.5px; }
.dr-item:hover { border-color: var(--teal); }
.dr-item input { flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--red); }
.dr-item b { flex-shrink: 0; color: var(--txt-3); font-size: 11px; }
/* The code itself can be long; it is the row that truncates, never the label. */
.dr-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; font-family: ui-monospace, monospace; }
.dr-radio { display: flex; align-items: center; gap: 9px; min-height: 40px;
font-size: 12.5px; cursor: pointer; }
.dr-radio input { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--red); }
/* The asterisk appears only for the problem types where proof is actually
required, so a required marker never sits on an optional field. */
.dr-required > label:first-child:after { content: " *"; color: var(--red); }
/* Every horizontal strip on the site, treated the same way. Without this a
sideways swipe that reaches the end of the strip carries on into the page --
on iOS that can trigger back-navigation mid-browse, which reads as the site
randomly leaving. Loading after styles.css lets one rule cover the strips
declared there (.cat-nav__row, .discovery__grid) too. */
.rb-row, .tabs, .store-tabs, .tbl-wrap, .order-progress-shell,
.cat-nav__row, .discovery__grid, .seg-scroll { overscroll-behavior-x: contain; }
/* A .code-tabs strip that has more buttons than the width allows. At 375px
the five sales ranges are 339px wide against ~300px of panel, so without
this the group simply hangs 30px outside the card. It scrolls instead --
the same answer .tabs and .store-tabs already use, so it also inherits the
overscroll rule above and cannot pull the page sideways.
min-width:0 is what lets a flex child shrink below its content at all;
without it overflow-x never engages. The buttons must not shrink, or the
labels wrap into two lines inside a 39px-tall pill. */
.seg-scroll { overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll > .code-tab { flex-shrink: 0; }
/* padding-top must clear the hover lift. A horizontal scroller cannot have
overflow-y: visible -- the browser forces it to auto/hidden -- so any
child that rises on hover gets its top sliced off. The card lifts 4px
and gains a 1px border, and 3px of padding did not cover it: the top
edge, the red border and the upper shadow were all being cut. */
.rb-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 310px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding: 10px 1px 11px; scroll-snap-type: x proximity; scrollbar-width: none; }
.rb-row::-webkit-scrollbar { display: none; }
.rb-card { position: relative; display: flex; flex-direction: column; min-height: 264px; overflow: hidden; scroll-snap-align: start; border-radius: 13px; background: var(--panel); border: 1px solid var(--line-2); cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.rb-card:hover,.rb-card:focus-visible { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 15px 34px rgba(0,0,0,.22); outline: none; }
.rb-card__main { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 1; min-height: 206px; padding: 17px 16px 15px; color: var(--txt); overflow: hidden; }
.rb-card__watermark { position: absolute; z-index: -1; inset-block-start: -15px; inset-inline-end: -5px; color: var(--txt); opacity: .035; font-size: 94px; line-height: 1; font-weight: 950; letter-spacing: -7px; pointer-events: none; }
.rb-card__crumb { display: block; max-width: 100%; overflow: hidden; color: var(--txt-3); font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }
.rb-card h3 { min-height: 42px; margin: 14px 0 10px; font-size: 15px; line-height: 1.38; letter-spacing: -.15px; }
.rb-card__badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rb-card__badges span { padding: 3px 6px; border-radius: 5px; background: var(--panel-3); color: var(--txt-2); font-size: 9.5px; font-weight: 750; }
.rb-card__badges .good { color: var(--green); background: rgba(32,201,120,.09); }
.rb-card__seller { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 17px; min-width: 0; }
.rb-card__avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: #fff; font-size: 12px; font-weight: 900; }
.rb-card__seller > span:last-child { display: grid; min-width: 0; }
.rb-card__seller b { overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.rb-card__seller small { margin-top: 2px; color: var(--txt-3); font-size: 9.5px; }
.rb-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.018); }
.rb-card__foot > span { display: grid; }
.rb-card__foot small { color: var(--txt-3); font-size: 9px; }
.rb-card__foot strong { margin-top: 1px; font-size: 15px; }
.rb-card__view { min-width: 72px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--txt); font-size: 11px; font-weight: 850; text-align: center; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.rb-card:hover .rb-card__view,.rb-card__view:hover { border-color: var(--red); background: var(--red); color: #fff; }
@media (max-width:600px) { .rb-row { grid-auto-columns: minmax(258px, 84vw); } .rb-card { min-height: 252px; } }
/* ---------- buyer<->seller chat ---------- */
.chat-page #app-footer { display: none; }
.chat-page .page { padding: 18px 0; min-height: 0; }
.chat-page .page-head { margin-bottom: 12px; }
.chat-page .page-head h1 { font-size: 24px; }
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: stretch; height: clamp(500px, calc(100dvh - 205px), 760px); }
.chat-list { padding: 10px; max-height: 66vh; overflow-y: auto; }
.chat-page .chat-list { height: 100%; max-height: none; min-height: 0; }
.chat-conv { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 10px; text-align: start; }
.chat-conv:hover { background: var(--panel-2); }
.chat-conv.active { background: rgba(255,36,54,.08); }
.chat-conv .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04231f; background: var(--teal); flex-shrink: 0; }
.chat-conv .meta { flex: 1; min-width: 0; }
/* The header's amber badge, with the count inside it, laid out inline. The
shared .badge-count cannot be reused here: it is position:absolute, pinned
to the corner of a 40px header button, so in a flex row it would anchor to
the wrong box. Same colours and radius, different positioning. */
.chat-conv__dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #3a2600; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Telegram handle under the email in the admin users table. Its own colour so
it reads as a third, weaker line rather than competing with the email. */
.adm-tg { color: var(--teal); font-variant-numeric: tabular-nums; }
.adm-tg a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.adm-tg a:hover { opacity: .8; }
.chat-conv .meta b { display: block; font-size: 13.5px; }
.chat-conv .meta small { display: block; font-size: 12px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread { display: flex; flex-direction: column; min-height: 66vh; max-height: 66vh; padding: 0; }
.chat-page .chat-thread { height: 100%; min-height: 0; max-height: none; }
.chat-thread__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-thread__head .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04231f; background: var(--teal); }
.chat-thread__identity { display: grid; gap: 2px; min-width: 0; }
.chat-thread__identity b { font-size: 14px; line-height: 1.2; }
.chat-thread__identity .s { font-size: 10.5px; line-height: 1.3; }
.chat-thread__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg .bubble { padding: 9px 13px; border-radius: 14px; background: var(--panel-3); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.chat-msg .bubble.has-image { padding: 5px; overflow: hidden; }
.chat-caption { display: block; padding: 5px 8px 6px; white-space: pre-wrap; }
.chat-photo { position: relative; display: block; width: min(330px, 58vw); min-height: 120px; padding: 0; overflow: hidden; border: 0; border-radius: 11px; background: var(--panel-2); cursor: zoom-in; }
.chat-photo img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.chat-photo__download { position:absolute; top:7px; inset-inline-end:7px; display:grid; width:32px; height:32px; place-items:center; border-radius:9px; background:rgba(10,12,18,.62); color:#fff; opacity:0; transform:translateY(-3px); transition:opacity .14s ease, transform .14s ease, background .14s ease; backdrop-filter:blur(3px); cursor:pointer; }
.chat-photo:hover .chat-photo__download, .chat-photo:focus-within .chat-photo__download { opacity:1; transform:translateY(0); }
.chat-photo__download:hover, .chat-photo__download:focus-visible { background:var(--red); outline:0; }
@media (hover: none) { .chat-photo__download { opacity:1; transform:none; } }
.chat-image-error { display: grid; min-height: 120px; place-items: center; color: var(--txt-3); font-size: 12px; }
.chat-lightbox[hidden] { display:none; }
.chat-lightbox { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px; background:rgba(2,4,10,.88); backdrop-filter:blur(7px); cursor:zoom-out; }
.chat-lightbox img { display:block; max-width:min(1180px,94vw); max-height:90dvh; object-fit:contain; border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,.55); cursor:default; }
.chat-lightbox__bar { position:fixed; z-index:1; top:max(18px,env(safe-area-inset-top)); inset-inline-end:22px; display:flex; gap:10px; }
.chat-lightbox__close, .chat-lightbox__download, .chat-lightbox__edit { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(18,20,27,.86); color:#fff; line-height:1; cursor:pointer; }
.chat-lightbox__close { font-size:30px; }
.chat-lightbox__close:hover,.chat-lightbox__close:focus-visible,.chat-lightbox__download:hover,.chat-lightbox__download:focus-visible,.chat-lightbox__edit:hover,.chat-lightbox__edit:focus-visible { border-color:var(--red); background:var(--red); outline:0; }
body.chat-lightbox-open { overflow:hidden; }
/* pending-attachment three-icon toolbar (edit / blur / delete, Telegram-style) */
.chat-attachment-preview__tools { display:flex; gap:6px; margin-inline-start:auto; }
.chat-attachment-preview__tools button { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--panel-2); font-size:15px; line-height:1; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.chat-attachment-preview__tools button:hover { background:var(--panel-3); border-color:var(--red); }
/* full-screen image editor */
.chat-editor[hidden] { display:none; }
.chat-editor { position:fixed; inset:0; z-index:2200; display:flex; flex-direction:column; background:rgba(2,4,10,.94); backdrop-filter:blur(8px); }
.chat-editor__stage { flex:1; display:grid; place-items:center; min-height:0; padding:20px; overflow:hidden; }
.chat-editor__stage canvas { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; box-shadow:0 20px 70px rgba(0,0,0,.55); background:#111; touch-action:none; cursor:crosshair; }
.chat-editor__bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(14,16,22,.92); border-top:1px solid rgba(255,255,255,.1); }
.chat-editor__tools { display:flex; gap:6px; }
.chat-editor__tools button { display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.06); color:#fff; font-size:17px; line-height:1; cursor:pointer; }
.chat-editor__tools button.active { border-color:var(--red); background:var(--red); }
.chat-editor__colors { display:flex; gap:6px; }
.chat-editor__colors button { width:24px; height:24px; padding:0; border:2px solid rgba(255,255,255,.35); border-radius:50%; cursor:pointer; }
.chat-editor__colors button.active { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); transform:scale(1.12); }
.chat-editor__size { display:flex; align-items:center; gap:8px; color:#cfd3dc; font-size:12px; font-weight:600; }
.chat-editor__size input { width:120px; accent-color:var(--red); }
.chat-editor__actions { display:flex; gap:10px; margin-inline-start:auto; }
.chat-editor__actions button { padding:9px 18px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; font-weight:700; cursor:pointer; }
.chat-editor__actions button.btn--primary { border-color:var(--red); }
@media (max-width:640px){ .chat-editor__actions { margin-inline-start:0; width:100%; } .chat-editor__actions button { flex:1; } }
/* drag-and-drop attach overlay */
.chat-thread { position:relative; }
.chat-drop-hint { position:absolute; inset:10px; z-index:6; display:none; place-items:center; padding:16px; background:rgba(255,36,54,.10); border:2px dashed var(--red); border-radius:14px; pointer-events:none; }
.chat-thread.is-dropping .chat-drop-hint { display:grid; }
.chat-drop-hint > div { display:flex; align-items:center; gap:8px; padding:12px 20px; border-radius:12px; background:var(--panel); color:var(--txt-1); font-weight:700; box-shadow:0 12px 34px rgba(0,0,0,.32); }
.chat-drop-hint span { font-size:20px; }
.chat-msg.mine .bubble { background: rgba(255,36,54,.14); }
.chat-msg .bubble.has-order { width: min(380px, 66vw); padding: 6px; background: var(--panel-3); }
.chat-msg.mine .bubble.has-order { background: rgba(255,36,54,.14); }
.chat-order-card { display: grid; overflow: hidden; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel); color: var(--txt); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.chat-order-card:hover { border-color: var(--red); transform: translateY(-1px); }
.chat-order-card__top,.chat-order-card__foot { display: flex; align-items: center; gap: 7px; padding: 9px 11px; }
.chat-order-card__top { border-bottom: 1px solid var(--line); }
.chat-order-card__top b { font-size: 11.5px; }
.chat-order-card__top small { color: var(--txt-3); font-size: 10px; }
.chat-order-card__main { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; padding: 12px 11px; }
.chat-order-card__glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-3); color: var(--txt); font-size: 11px; font-weight: 900; }
.chat-order-card__main > span:last-child { min-width: 0; }
.chat-order-card__main b { display: block; font-size: 12.5px; line-height: 1.3; }
.chat-order-card__main small { display: block; margin-top: 3px; color: var(--txt-3); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-order-card__foot { border-top: 1px solid var(--line); font-size: 10.5px; }
.chat-order-card__foot b { margin-inline-end: auto; color: var(--txt); font-size: 13px; }
.chat-order-card__foot span { color: var(--txt-3); }
.chat-order-card__foot em { border: 1px solid rgba(36,206,125,.4); border-radius: 999px; padding: 3px 7px; color: var(--green); font-size: 9px; font-style: normal; text-transform: capitalize; }
.chat-msg small { font-size: 10.5px; color: var(--txt-3); margin-top: 3px; }
.chat-presence-on { color: var(--green); font-weight: 700; }
.chat-receipt { color: var(--txt-3); font-weight: 600; }
.chat-receipt.seen { color: var(--green); }
.chat-thread__send { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-thread__send .input { flex: 1; }
.chat-attach { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel-2); cursor: pointer; transition: border-color .18s, transform .18s; }
.chat-attach:hover { border-color: var(--red); transform: translateY(-1px); }
.chat-image-preview { position: absolute; inset-inline-start: 14px; bottom: 66px; width: 112px; padding: 5px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.chat-image-preview img { display: block; width: 100%; height: 82px; border-radius: 8px; object-fit: cover; }
.chat-image-preview button { position: absolute; top: -8px; inset-inline-end: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.chat-attachment-preview { width:min(360px,calc(100vw - 48px)); padding:10px 12px; }
.chat-attachment-preview.is-image { width:180px; }
.chat-attachment-preview.is-image img { height:118px; }
.chat-attachment-preview__meta { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-attachment-preview__icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--panel-2); font-size:20px; }
.chat-attachment-preview__meta span { min-width:0; }
.chat-attachment-preview__meta b,.chat-attachment-preview__meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-attachment-preview__meta b { font-size:13px; }
.chat-attachment-preview__meta small { margin-top:3px; color:var(--txt-3); font-size:11px; }
.chat-file { display:flex; align-items:center; gap:11px; width:min(340px,58vw); padding:12px; border:1px solid var(--line-2); border-radius:11px; background:var(--panel-2); color:var(--txt); text-align:start; cursor:pointer; }
.chat-file:hover { border-color:var(--red); }
.chat-file__icon { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:color-mix(in srgb,var(--red) 14%,transparent); font-size:21px; }
.chat-file__meta { min-width:0; flex:1; }
.chat-file__meta b,.chat-file__meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-file__meta b { font-size:13px; }
.chat-file__meta small { margin-top:3px; color:var(--txt-3); font-size:11px; }
.chat-file__action { color:var(--red); font-size:12px; font-weight:800; }
.chat-file[disabled] { opacity:.65; cursor:wait; }
@media (max-width: 860px) {
.chat-page .page { padding-top: 12px; }
.chat-layout { grid-template-columns: 1fr; height: auto; }
.chat-page .chat-list { height: min(230px, 30dvh); }
.chat-page .chat-thread { height: 64dvh; min-height: 460px; }
}
@media (max-width: 600px) {
.chat-page .page-head { display: none; }
.chat-page .page { padding-top: 8px; }
.chat-page .chat-thread { height: 68dvh; min-height: 430px; }
.chat-msg .bubble.has-order { width: min(340px, 78vw); }
}
/* ---------- TMX conversation workspace ---------- */
.chat-page #app-header { display:none; }
.chat-page { height:100dvh; min-height:0; margin:0; overflow:hidden; }
.chat-workspace { box-sizing:border-box; height:100dvh; min-height:0; padding:18px; overflow:hidden; background:radial-gradient(circle at 70% 0,rgba(255,36,54,.06),transparent 34%),var(--bg); }
.chat-shell { width:min(1620px,100%); height:100%; margin:auto; }
.chat-page .chat-layout { grid-template-columns:360px minmax(460px,1fr) 330px; gap:0; height:100%; min-height:0; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); transition:grid-template-columns .22s ease; }
.chat-page .chat-layout.orders-collapsed { grid-template-columns:360px minmax(460px,1fr); }
.chat-page .chat-layout.orders-collapsed .chat-orders { display:none; }
.chat-sidebar,.chat-page .chat-thread,.chat-orders { border:0; border-radius:0; background:var(--panel); }
.chat-sidebar { display:flex; min-width:0; min-height:0; flex-direction:column; border-inline-end:1px solid var(--line); }
/* Hidden by default: on a wide screen the list is always on screen beside the
thread, so a back button would point at something already visible. */
.chat-back { display:none; align-items:center; gap:6px; width:100%; padding:11px 14px;
border:0; border-bottom:1px solid var(--line); background:var(--panel-2);
color:var(--txt-2); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.chat-back:hover { color:var(--txt); }
.chat-sidebar__brand { position:relative; height:72px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 18px; border-bottom:1px solid var(--line); }
.chat-sidebar__logo { display:flex; align-items:center; gap:9px; color:var(--red); text-decoration:none; }
.chat-sidebar__logo img { width:38px; height:38px; border-radius:9px; object-fit:contain; }
.chat-sidebar__logo b { color:var(--red); font-size:22px; letter-spacing:-1px; }
.chat-sidebar__logo b span { color:var(--red); }
.chat-sidebar__quick { display:flex; align-items:center; gap:10px; }
.chat-sidebar__notice { position:relative; }
.chat-sidebar__bell { position:relative; display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--panel-3); color:var(--txt-3); cursor:pointer; transition:color .18s,border-color .18s,background .18s; }
.chat-sidebar__bell:hover,.chat-sidebar__bell[aria-expanded="true"] { border-color:var(--red); background:rgba(255,36,54,.09); color:var(--txt); }
.chat-sidebar__bell svg { width:20px; height:20px; }
.chat-sidebar__notice-count { position:absolute; top:-5px; inset-inline-end:-5px; display:grid; min-width:20px; height:20px; place-items:center; padding:0 5px; border:2px solid var(--panel); border-radius:999px; background:var(--red); color:#fff; font-size:10px; font-weight:900; }
.chat-sidebar__profile { display:grid; width:42px; height:42px; place-items:center; overflow:hidden; border:2px solid var(--line-2); border-radius:50%; background:#fff; color:#15161a; text-decoration:none; transition:border-color .18s,transform .18s; }
.chat-sidebar__profile:hover { border-color:var(--red); transform:translateY(-1px); }
.chat-sidebar__profile span { display:grid; width:100%; height:100%; place-items:center; font-size:14px; font-weight:900; }
.chat-sidebar__profile img { width:100%; height:100%; object-fit:cover; }
.chat-sidebar__notice-panel { position:absolute; z-index:70; top:50px; inset-inline-end:-52px; width:min(330px,calc(100vw - 42px)); max-height:min(430px,70dvh); overflow:auto; padding:7px; border:1px solid var(--line-2); border-radius:13px; background:var(--panel); box-shadow:0 20px 55px rgba(0,0,0,.48); }
.chat-sidebar__notice-panel[hidden] { display:none; }
.chat-sidebar__notice-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px 10px; border-bottom:1px solid var(--line); }
.chat-sidebar__notice-head b { color:var(--txt); font-size:12px; }
.chat-sidebar__notice-head button { color:var(--red); font-size:10px; font-weight:800; cursor:pointer; }
.chat-sidebar__notice-row { display:block; padding:10px; border-radius:9px; color:var(--txt); text-decoration:none; }
.chat-sidebar__notice-row:hover { background:var(--panel-2); }
.chat-sidebar__notice-row.is-read { opacity:.58; }
.chat-sidebar__notice-row b,.chat-sidebar__notice-row small { display:block; }
.chat-sidebar__notice-row b { font-size:11.5px; line-height:1.35; }
.chat-sidebar__notice-row small { margin-top:4px; overflow:hidden; color:var(--txt-3); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.chat-sidebar__notice-empty { padding:28px 12px; color:var(--txt-3); font-size:11px; text-align:center; }
.chat-search { display:flex; align-items:center; gap:8px; margin:16px; padding:0 14px; height:43px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel-2); color:var(--txt-3); }
.chat-search input { width:100%; border:0; outline:0; background:transparent; color:var(--txt); font:inherit; font-size:12px; }
.chat-page .chat-list { flex:1; height:auto; padding:0 10px 12px; }
.chat-list-heading { padding:12px 10px 7px; color:var(--txt-3); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.chat-list-heading--direct { margin-top:8px; border-top:1px solid var(--line); padding-top:16px; }
.chat-official { margin:0 0 4px; padding:0 0 10px; border-bottom:1px solid var(--line); }
.chat-channel { display:flex; align-items:center; gap:10px; width:100%; min-height:62px; padding:9px 10px; border-radius:9px; color:var(--txt); text-align:start; transition:background .16s,border-color .16s; }
.chat-channel:hover { background:var(--panel-2); }
.chat-channel.active { background:color-mix(in srgb,var(--red) 12%,var(--panel-2)); }
.chat-channel .meta { flex:1; min-width:0; }
.chat-channel .meta b,.chat-channel .meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-channel .meta b { font-size:13px; }
.chat-channel .meta small { margin-top:3px; color:var(--txt-3); font-size:10.5px; }
.chat-channel__icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:50%; background:linear-gradient(145deg,#ff7a24,#ff2436); color:#fff; font-size:9px; font-weight:900; letter-spacing:-.02em; }
.chat-channel__icon.official { background:#fff; color:var(--red); border:2px solid var(--red); }
.chat-channel__icon.affiliate { background:linear-gradient(145deg,#8b5cf6,#6d28d9); }
.chat-channel__count { min-width:22px; height:22px; display:grid; place-items:center; padding:0 5px; border-radius:999px; background:var(--panel-3); color:var(--txt-2); font-size:9px; font-weight:900; }
.chat-auto-group { margin:0 0 4px; }
.chat-auto-group > summary { display:flex; align-items:center; gap:8px; min-height:36px; padding:7px 10px; border-radius:8px; color:var(--txt-2); cursor:pointer; list-style:none; font-size:12px; font-weight:800; }
.chat-auto-group > summary::-webkit-details-marker { display:none; }
.chat-auto-group > summary:before { content:"›"; color:var(--red); font-size:18px; line-height:1; transition:transform .18s; }
.chat-auto-group[open] > summary:before { transform:rotate(90deg); }
.chat-auto-group > summary:hover { background:var(--panel-2); color:var(--txt); }
.chat-auto-group > summary span:last-child { margin-inline-start:auto; min-width:21px; padding:2px 6px; border-radius:999px; background:var(--red); color:#fff; font-size:9px; text-align:center; }
.chat-list-empty { padding:22px 10px; color:var(--txt-3); font-size:12px; text-align:center; }
.chat-page .chat-conv { min-height:64px; padding:9px 10px; border-radius:9px; }
.chat-page .chat-conv.active { background:color-mix(in srgb,var(--red) 12%,var(--panel-2)); }
.chat-page .chat-thread { display:grid; grid-template-rows:72px minmax(0,1fr) minmax(68px,auto); height:100%; min-height:0; overflow:hidden; border-inline-end:1px solid var(--line); }
.chat-page .chat-thread__head { min-height:72px; padding:12px 18px; }
.chat-thread__identity { flex:1; }
.chat-orders-toggle { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; padding:0; border:1px solid var(--line-2); border-radius:50%; color:var(--txt); font-size:24px; line-height:1; transition:background .18s,border-color .18s,transform .18s; }
.chat-orders-toggle:hover { border-color:var(--red); background:rgba(255,36,54,.08); }
.chat-orders-toggle span { display:block; transform:translateY(-1px); }
.chat-page .chat-thread__body { min-height:0; padding:24px 18px; background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 38%,transparent),transparent 30%); }
.chat-page .chat-layout.no-selection { grid-template-columns:360px minmax(0,1fr); }
.chat-page .chat-layout.no-selection .chat-orders { display:none; }
.chat-page .chat-layout.no-selection .chat-thread { grid-template-rows:1fr; border-inline-end:0; }
.chat-page .chat-layout.no-selection .chat-thread__head,
.chat-page .chat-layout.no-selection .chat-thread__send { display:none!important; }
.chat-page .chat-layout.no-selection .chat-thread__body { display:grid; place-items:center; padding:28px; }
.chat-welcome { width:min(540px,100%); text-align:center; }
.chat-welcome img { width:106px; height:106px; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(255,36,54,.18)); }
.chat-welcome h1 { margin:18px 0 7px; color:var(--txt); font-size:28px; letter-spacing:-.03em; }
.chat-welcome > p { margin:0 0 26px; color:var(--txt-3); font-size:13px; }
.chat-welcome__safety { display:grid; gap:9px; padding:20px 24px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); color:var(--txt-2); font-size:12px; line-height:1.55; }
.chat-welcome__safety strong { color:var(--txt); }
.chat-welcome__safety span { display:block; }
.chat-welcome__safety a { margin-top:4px; color:var(--red); font-weight:800; }
.chat-page .chat-layout.channel-selection { grid-template-columns:360px minmax(0,1fr); }
.chat-page .chat-layout.channel-selection .chat-orders { display:none; }
.chat-page .chat-layout.channel-selection .chat-thread { grid-template-rows:72px minmax(0,1fr); border-inline-end:0; }
.chat-page .chat-layout.channel-selection .chat-thread__send { display:none!important; }
.chat-page .chat-layout.channel-selection.channel-can-post .chat-thread { grid-template-rows:72px minmax(0,1fr) minmax(68px,auto); }
.chat-page .chat-layout.channel-selection.channel-can-post .chat-thread__send { display:grid!important; }
.chat-channel-loading { width:min(680px,90%); height:180px; margin:34px auto; }
.chat-channel-feed { display:grid; width:min(980px,100%); margin:auto; gap:18px; }
.chat-channel-post { padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); color:var(--txt-2); }
.chat-channel-post header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.chat-channel-post header img { width:44px; height:44px; object-fit:contain; }
.chat-channel-post header span:last-child { min-width:0; }
.chat-channel-post header b,.chat-channel-post header small { display:block; }
.chat-channel-post header b { color:var(--txt); font-size:13px; }
.chat-channel-post header small { margin-top:3px; color:var(--txt-3); font-size:10px; }
.chat-channel-post__body { color:var(--txt); font-size:13px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-channel-post__photo { display:block; width:min(520px,100%); margin-top:16px; border-radius:11px; overflow:hidden; }
.chat-channel-post__photo img { display:block; width:100%; max-height:520px; object-fit:contain; background:var(--panel); }
.chat-channel-empty { display:grid; place-items:center; align-content:center; min-height:100%; color:var(--txt-3); text-align:center; }
.chat-channel-empty .chat-channel__icon { width:54px; height:54px; margin-bottom:12px; flex-basis:54px; }
.chat-channel-empty b { color:var(--txt); font-size:17px; }
.chat-channel-empty p { margin:7px 0 0; font-size:12px; }
.chat-page .chat-msg { max-width:min(74%,580px); }
.chat-page .chat-msg .bubble:not(.has-image):not(.has-order) { padding:10px 13px; border-radius:11px; }
.chat-page .chat-thread__send { box-sizing:border-box; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; min-height:68px; gap:10px; padding:8px 12px max(16px,env(safe-area-inset-bottom)); overflow:hidden; background:var(--panel); }
.chat-page .chat-thread__send .input { width:100%; height:42px; min-height:42px; }
.chat-page .chat-thread__send .chat-attach { width:42px; height:42px; }
.chat-page .chat-thread__send > .btn { width:auto; min-width:88px; height:42px; min-height:42px; padding:0 18px; justify-self:end; }
.chat-page .chat-thread__send .chat-compose-context,
.chat-page .chat-thread__send .chat-image-preview { grid-column:1 / -1; }
.chat-page .chat-thread__send .chat-image-preview { position:relative; inset:auto; bottom:auto; max-width:100%; margin:2px 0 4px; box-sizing:border-box; }
.chat-compose-context { order:0; flex:1 0 100%; position:relative; max-height:330px; overflow:auto; padding:12px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); }
.chat-compose-context__close { position:absolute; z-index:2; top:7px; inset-inline-end:9px; color:var(--txt-2); font-size:22px; }
.chat-compose-context__label { padding:0 28px 9px 2px; font-size:12px; font-weight:800; }
.chat-compose-context__label small { color:var(--txt-3); font-weight:600; }
.chat-compose-context .chat-order-card { max-width:none; }
.chat-compose-context .chat-order-card__main { padding:9px 11px; }
.chat-safety-note { margin-top:9px; padding:9px 11px; border-radius:8px; background:#ff8a00; color:#fff; font-size:10.5px; line-height:1.45; }
.chat-safety-note b { margin-inline-end:5px; }
.chat-orders { min-width:0; min-height:0; overflow:hidden; }
.chat-trade-total { height:72px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; border-bottom:1px solid var(--line); font-size:12px; }
.chat-trade-total > span:first-child { color:var(--green); }
.chat-trade-total > span b { color:var(--txt); }
.chat-trade-total strong { font-size:13px; }
.chat-trade-total strong small { color:var(--txt-3); font-size:10px; }
.chat-order-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.chat-order-tabs button { position:relative; min-height:52px; color:var(--txt-3); font-size:11px; font-weight:800; }
.chat-order-tabs button.active { color:var(--red); background:rgba(255,36,54,.05); }
.chat-order-tabs button.active:after { content:""; position:absolute; inset:auto 14px -1px; height:2px; background:var(--red); }
.chat-order-tabs button span { margin-inline-start:3px; }
.chat-side-orders { height:calc(100% - 124px); overflow:auto; padding:8px; }
.chat-side-orders > p,.chat-orders__empty { padding:36px 16px; color:var(--txt-3); font-size:11px; text-align:center; }
.chat-side-order { display:grid; grid-template-columns:38px 1fr; gap:9px; padding:11px 8px; border-radius:9px; color:var(--txt); text-decoration:none; transition:background .16s,transform .16s; }
.chat-side-order:hover { background:var(--panel-2); transform:translateX(2px); }
.chat-side-order__glyph { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--panel-3); font-size:9px; font-weight:900; }
.chat-side-order > span:last-child { min-width:0; }
.chat-side-order b,.chat-side-order small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-side-order b { font-size:11px; }
.chat-side-order small { margin-top:3px; color:var(--txt-3); font-size:9px; }
.chat-side-order em { display:inline-block; margin-top:6px; padding:2px 7px; border:1px solid currentColor; border-radius:999px; color:var(--green); font-size:8px; font-style:normal; text-transform:capitalize; }
.chat-side-order em.status-cancelled,.chat-side-order em.status-refunded,.chat-side-order em.status-expired { color:var(--txt-3); }
@media(max-width:1180px){
.chat-page .chat-layout { grid-template-columns:300px minmax(420px,1fr); }
.chat-page .chat-layout.no-selection { grid-template-columns:300px minmax(0,1fr); }
.chat-page .chat-layout.channel-selection { grid-template-columns:300px minmax(0,1fr); }
.chat-orders { position:absolute; z-index:20; inset-block:18px; inset-inline-end:18px; width:min(340px,calc(100vw - 36px)); border:1px solid var(--line-2); box-shadow:var(--shadow); transform:translateX(calc(100% + 36px)); transition:transform .22s ease; }
.chat-orders.open { transform:translateX(0); }
.chat-orders-toggle { display:grid; }
}
@media(max-width:760px){
.chat-workspace { padding:0; }
.chat-shell { height:100%; }
.chat-page .chat-layout { grid-template-columns:1fr; border:0; border-radius:0; }
.chat-page .chat-layout.no-selection { grid-template-columns:1fr; }
.chat-page .chat-layout.channel-selection { grid-template-columns:1fr; }
/* One column means one pane at a time. Hiding the sidebar unconditionally
left the phone on the "Choose a conversation" panel with no list to
choose from and no way to reach one -- a dead end. So: nothing selected
shows the LIST, a selection shows the THREAD, and .chat-back walks it
back. The empty-state pane is pointless on a phone; the list replaces it.
Only the sidebar's own list scrolls, so the page itself never gains a
second scrollbar. */
.chat-sidebar { display:none; }
.chat-page .chat-layout.no-selection .chat-sidebar { display:flex; border-inline-end:0; }
.chat-page .chat-layout.no-selection .chat-thread { display:none; }
.chat-page .chat-layout.no-selection .chat-list { height:auto; flex:1; min-height:0; }
.chat-page .chat-back { display:inline-flex; }
/* .chat-thread is a GRID with a fixed row list, so the back button is not a
free extra child: it claims row 1 and pushes the head into the 1fr row
(a 414px-tall header over a squashed body) while the composer falls into
an implicit fourth row. Every template that applies while the button is
visible therefore gains a leading auto row. Desktop is untouched: there
the button is display:none and never becomes a grid item. */
.chat-page .chat-thread { grid-template-rows:auto 72px minmax(0,1fr) minmax(68px,auto); }
.chat-page .chat-layout.channel-selection .chat-thread { grid-template-rows:auto 72px minmax(0,1fr); }
.chat-page .chat-layout.channel-selection.channel-can-post .chat-thread { grid-template-rows:auto 72px minmax(0,1fr) minmax(68px,auto); }
.chat-page .chat-thread { height:100%; min-height:0; }
.chat-page .chat-thread__body { padding:15px 10px; }
.chat-page .chat-msg { max-width:86%; }
.chat-orders { inset:0; width:100%; }
.chat-channel-post { padding:16px; }
}
/* ---------- seller trust: level + badge chips, ranking ---------- */
.lvl-chip { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(90,150,255,.14); color: #6ea8ff; vertical-align: middle; margin-inline-start: 6px; }
.badge-chip { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(245,181,70,.12); color: var(--orange); vertical-align: middle; margin-inline-start: 4px; }
.founding-chip{display:inline-flex!important;align-items:center;gap:5px;width:max-content;padding:3px 8px!important;border:1px solid rgba(245,181,70,.34);border-radius:999px;background:linear-gradient(135deg,rgba(245,181,70,.16),rgba(24,199,190,.10));color:var(--orange)!important;font-size:9.5px!important;font-weight:850!important;line-height:1.2!important;letter-spacing:.025em;vertical-align:middle;margin:2px 0 2px 4px!important;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.founding-chip__mark{display:inline!important;margin:0!important;color:var(--teal)!important;font-size:8px!important;line-height:1!important}
.seller-founder-line{display:block;margin-bottom:6px}.seller-founder-line .founding-chip{margin-inline-start:0!important}
.rank-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--panel-3); color: var(--txt-2); flex-shrink: 0; }
.rank-num--top { background: rgba(245,181,70,.15); color: var(--orange); }
.sp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sp-head .avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #04231f; background: var(--teal); flex-shrink: 0; }
.sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 16px; }
.sp-stats .stat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sp-stats .stat small { display: block; color: var(--txt-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.sp-stats .stat b { font-size: 16px; }
.seller-store-page{max-width:1160px;margin:auto}.store-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:34px}.store-tabs button{border:0;background:none;color:var(--txt-3);font:inherit;font-size:13px;font-weight:700;padding:14px 0;cursor:pointer;position:relative}.store-tabs button.active{color:var(--txt)}.store-tabs button.active:after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:var(--teal)}.store-hero{border:1px solid var(--line-2);border-radius:14px;background:var(--panel);padding:28px}.store-identity{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}.store-avatar{width:106px;height:106px;border-radius:50%;background:linear-gradient(145deg,var(--teal),#39e0d7);color:#04231f;display:grid;place-items:center;font-size:38px;font-weight:900;position:relative}.store-avatar i{position:absolute;right:7px;bottom:7px;width:16px;height:16px;border:2px solid var(--panel);border-radius:50%;background:var(--txt-3)}.store-avatar i.on{background:#20c978}.store-name{min-width:0}.store-name h1{display:flex;align-items:center;gap:7px;margin:0;font-size:24px;flex-wrap:wrap;min-width:0}.store-name h1 .founding-chip{flex-shrink:0}.store-name h1 svg{width:18px;color:var(--teal)}.store-name span{display:block;color:var(--txt-3);font-size:12px;margin-top:6px}.store-actions{display:flex;flex-direction:column;gap:9px;min-width:150px}.store-metrics{margin:20px 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:11px;background:var(--bg);overflow:hidden}.store-metrics>div{padding:14px 16px;border-inline-end:1px solid var(--line)}.store-metrics>div:last-child{border:0}.store-metrics small{display:block;color:var(--txt-3);font-size:10px;margin-bottom:6px}.store-metrics b{font-size:18px}.teal{color:var(--teal)!important}.store-progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.store-progress-grid article{background:#ece8e5;color:#513b2d;border-radius:12px;padding:16px}.store-progress-grid article.trust{background:#dce4e7;color:#294047}.store-progress-grid article>span{display:inline-block;background:rgba(255,255,255,.55);border-radius:999px;padding:4px 8px;font-size:10px}.store-progress-grid article>div{display:flex;justify-content:space-between;margin:13px 0 5px}.store-progress-grid article b,.store-progress-grid article em{font-size:11px;font-style:normal}.store-progress-grid progress{width:100%;height:8px;accent-color:#806650}.store-progress-grid p{font-size:10px;line-height:1.5;margin:11px 0 0}.store-overview-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;margin-top:24px}.store-about,.store-overview-grid>aside,.store-feature,.store-section{border:1px solid var(--line-2);border-radius:13px;background:var(--panel);padding:20px}.store-about{min-height:260px;display:flex;flex-direction:column}.store-about header,.store-feature header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:13px}.store-about h2,.store-overview-grid h2,.store-feature h2{font-size:16px;margin:0}.store-about p{color:var(--txt-2);font-size:13px;line-height:1.8;flex:1}.store-about footer{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;color:var(--txt-3);font-size:10.5px}.store-review{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}.store-review .avatar{width:34px;height:34px}.store-review b{font-size:11px}.store-review .stars{display:block;margin-top:3px}.store-review .stars svg{width:11px}.store-review p{font-size:11px;color:var(--txt-2);margin:5px 0}.store-review time{font-size:9px;color:var(--txt-3)}.store-feature{margin-top:18px}.store-feature header button{border:0;background:none;color:var(--teal);font-weight:700;cursor:pointer}.store-offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.store-offer{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:13px;transition:border-color .18s,transform .18s}.store-offer:hover{border-color:rgba(24,199,190,.55);transform:translateY(-1px)}.store-offer__thumb{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-weight:800}.store-offer span:nth-child(2){min-width:0}.store-offer b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store-offer small{font-size:10.5px;color:var(--txt-3)}.store-offer strong{font-size:12px}.store-section>h1{font-size:22px;margin:0 0 6px}.sales-calendar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.sales-calendar>div{border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:6px}.sales-calendar span,.sales-calendar small{font-size:10px;color:var(--txt-3)}.sales-calendar b{font-size:24px;color:var(--teal)}@media(max-width:900px){.store-progress-grid{grid-template-columns:1fr}.store-overview-grid{grid-template-columns:1fr}.store-metrics{grid-template-columns:repeat(2,1fr)}.sales-calendar{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.store-tabs{overflow-x:auto}.store-identity{grid-template-columns:auto 1fr}.store-avatar{width:72px;height:72px;font-size:26px}.store-actions{grid-column:1/-1;flex-direction:row}.store-metrics,.store-offer-grid{grid-template-columns:1fr}.store-metrics>div{border-inline-end:0;border-bottom:1px solid var(--line)}.sales-calendar{grid-template-columns:1fr}}
/* ---------- G2G-style order progress stepper ---------- */
.osteps { display: flex; align-items: flex-start; gap: 0; padding: 20px 8px 6px; margin-bottom: 16px; }
.ostep { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 74px; }
.ostep .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); border: 2px solid var(--line-2); color: transparent; }
.ostep.done .dot { background: var(--green); border-color: var(--green); color: #04231f; }
.ostep.done .dot svg { width: 14px; height: 14px; }
.ostep small { font-size: 11px; font-weight: 700; color: var(--txt-3); text-align: center; }
.ostep.done small { color: var(--txt); }
.oline { flex: 1; height: 2px; background: var(--line-2); margin-top: 13px; min-width: 18px; }
.oline.done { background: var(--green); }
.purchased-box { background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px;margin-bottom:16px; }
/* Order detail — restrained G2G-inspired information hierarchy. */
.order-page .dash-layout{display:block;max-width:1320px;margin-inline:auto}
.order-page #sideNav{display:none}
.order-page .page{padding-top:24px}
.order-page .page-head{margin-bottom:14px}
.order-page #orderWrap{display:flex;flex-direction:column;gap:18px}
.order-page #orderWrap>.panel-box,
.order-page #orderWrap>.purchased-box{margin:0}
.order-g2g-head{display:flex;align-items:center;gap:18px;padding:4px 2px;font-size:13px}
.order-g2g-head__status{margin-inline-start:auto}
.order-awaiting{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:14px;background:#1fc378;color:#fff;box-shadow:0 12px 32px rgba(31,195,120,.15)}
.order-awaiting__icon{width:36px;height:36px;border:3px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none}
.order-awaiting__icon svg{width:22px;height:22px}
.order-awaiting__copy{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.order-awaiting__copy b{font-size:20px;line-height:1.2}
.order-awaiting__copy small{font-size:13px;line-height:1.55;max-width:900px}
.order-awaiting__button{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.85)!important;white-space:nowrap}
.order-awaiting__button:hover{background:#fff!important;color:#128557!important}
.order-progress-shell{padding:14px 28px 6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.order-progress-shell .osteps{margin:0;padding:8px 0 4px}
.order-received-count{text-align:center;padding:16px 0 4px;font-size:13px}
.order-product-card{padding:26px!important}
.order-product-card__identity{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.order-contact-card{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.order-page #orderWrap>.panel-box h3{font-size:18px}
.order-page #orderWrap>.panel-box:nth-last-child(1){margin-bottom:0}
@media(max-width:720px){
.order-page .page{padding-top:14px}
.order-page .crumbs{display:none}
.order-page .page-head h1{font-size:25px}
.order-g2g-head{align-items:flex-start;flex-wrap:wrap;gap:7px 14px}
.order-g2g-head__status{width:100%;margin:0}
.order-awaiting{align-items:flex-start;padding:17px;gap:12px;flex-wrap:wrap}
.order-awaiting__copy{flex-basis:calc(100% - 52px)}
.order-awaiting__copy b{font-size:17px}
.order-awaiting__button{width:100%}
.order-progress-shell{padding:12px 10px 5px;overflow-x:auto}
.order-progress-shell .osteps{min-width:570px}
}
.purchased-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
.purchased-head h3 { margin:0 0 3px;font-size:16px;font-weight:800; }
.purchased-head .muted { font-size:12px; }
.purchased-download { display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--txt);font:inherit;font-size:12.5px;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px; }
.purchased-download svg { width:15px;height:15px; }
.purchased-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.purchased-item { min-width:0;border:1px solid var(--line-2);border-radius:11px;background:var(--panel-2);overflow:hidden;transition:border-color .18s,background .18s; }
.purchased-item.open { grid-column:1/-1;border-color:rgba(24,199,190,.55); }
.purchased-toggle { width:100%;min-height:58px;display:flex;align-items:center;gap:10px;padding:11px 13px;border:0;background:none;color:var(--txt);font:inherit;cursor:pointer;text-align:start; }
.purchased-ico { width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;color:#061e1c;background:var(--teal); }
.purchased-ico svg { width:15px;height:15px; }
.purchased-name { min-width:0;flex:1;font-size:12.5px;font-weight:750;text-decoration:underline; }
.purchased-viewed { border:1px solid var(--line-2);border-radius:999px;padding:3px 8px;color:var(--txt-3);font-size:9px; }
.purchased-viewed.seen { border-color:rgba(24,199,190,.5);color:var(--teal); }
.purchased-caret { display:grid;place-items:center;transition:transform .18s; }
.purchased-caret svg { width:13px;height:13px; }
.purchased-item.open .purchased-caret { transform:rotate(180deg); }
.purchased-detail { border-top:1px solid var(--line);padding:14px; }
.purchased-detail .muted { display:block;font-size:11.5px;margin-bottom:7px; }
.purchased-detail code { display:block;padding:11px 12px;margin-bottom:10px;border-radius:8px;background:var(--bg);font-size:12px;line-height:1.55;overflow-wrap:anywhere;word-break:break-word;user-select:all; }
.sold-card-list{display:grid;gap:14px}.sold-card{border:1px solid var(--line-2);border-radius:12px;background:var(--panel);overflow:hidden}.sold-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--line)}.sold-card__head>div{display:flex;align-items:center;gap:14px;min-width:0}.sold-card__head b{font-size:13px}.sold-card__head span:not(.status){font-size:11.5px;color:var(--txt-3)}.sold-card__body{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(300px,1fr) auto;gap:18px;align-items:center;padding:17px 18px}.sold-card__offer{display:flex;align-items:center;gap:12px;min-width:0}.sold-card__offer .thumb{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-weight:800;flex:0 0 auto}.sold-card__offer>div{display:grid;gap:3px;min-width:0}.sold-card__offer b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis}.sold-card__offer span{font-size:11.5px;color:var(--txt-3)}.sold-card__offer strong{font-size:12px}.sold-card__facts{display:grid;grid-template-columns:repeat(2,minmax(95px,1fr));gap:10px 18px}.sold-card__facts>div{display:grid;gap:2px}.sold-card__facts span{font-size:10.5px;color:var(--txt-3)}.sold-card__facts b{font-size:12.5px}.sold-card__facts .teal{color:var(--teal)}.sold-card__meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:135px}.sold-pill{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:4px 9px;color:var(--txt-3);font-size:10px;white-space:nowrap}.sold-pill--auto,.sold-pill--seen{border-color:rgba(24,199,190,.45);color:var(--teal)}.sold-pill--cancelled{border-color:rgba(255,92,92,.3);color:var(--red)}.sold-pill--warn{border-color:rgba(255,170,40,.35);color:var(--orange)}.sold-card__view-time{font-size:9.5px;color:var(--txt-3);white-space:nowrap}.sold-card__actions{grid-column:3;justify-self:end}.sold-card__actions .btn{white-space:nowrap}@media(max-width:1100px){.sold-card__body{grid-template-columns:1fr 1fr}.sold-card__meta{grid-column:1}.sold-card__actions{grid-column:2;grid-row:2;justify-self:end}}@media(max-width:700px){.sold-card__head>div{display:grid;gap:3px}.sold-card__body{grid-template-columns:1fr}.sold-card__facts{grid-template-columns:repeat(2,1fr)}.sold-card__meta,.sold-card__actions{grid-column:1;grid-row:auto;justify-self:start}.sold-card__actions{width:100%}}
.sold-card{cursor:pointer;transition:border-color .18s,transform .18s}.sold-card:hover,.sold-card:focus-visible{border-color:rgba(24,199,190,.55);transform:translateY(-1px);outline:none}
@media(max-width:900px){.purchased-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.purchased-grid{grid-template-columns:1fr}.purchased-head{align-items:flex-start}.purchased-download{white-space:nowrap}.purchased-item.open{grid-column:auto}}
/* ---------- volume discount tiers (buy box + form) ---------- */
.tier-table { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tier-table small { display: block; color: var(--txt-3); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.tier-table .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.tier-table .row b { color: var(--teal); }
/* ---------- G2G-style profile dropdown ---------- */
.avatar-btn--round { padding: 3px !important; border-radius: 50% !important; }
.g2g-panel { min-width: 290px; max-height: min(78vh, 640px); overflow-y: auto; padding-bottom: 8px; }
.gp-head { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.gp-head .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #04231f; background: var(--teal); flex-shrink: 0; }
.gp-id b { display: block; font-size: 14.5px; }
.gp-id > span { display: block; font-size: 12px; color: var(--txt-3); margin-top: 2px; }
.gp-id > span b { display: inline; font-size: 12px; color: var(--txt); }
.gp-stats { padding: 4px 14px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.gp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--txt-2); }
.gp-row b { font-size: 13px; color: var(--txt); }
a.gp-row:hover b { color: var(--teal); }
.gp-invite { display: flex; align-items: center; gap: 9px; margin: 6px 10px 10px; padding: 12px; border-radius: 10px; background: #6C4FE0; color: #fff; font-weight: 700; font-size: 13px; }
.gp-invite:hover { filter: brightness(1.1); color: #fff; }
.gp-invite svg { flex-shrink: 0; }
.gp-exp { width: 100%; text-align: start; }
.gp-exp .caret { margin-inline-start: auto; transition: transform .18s; }
.gp-exp.open .caret { transform: rotate(180deg); }
.gp-sub { padding-inline-start: 12px; }
.gp-sub .menu__item { font-size: 13px; }
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
.dash-cards { grid-template-columns: repeat(2, 1fr); }
.detail-layout { grid-template-columns: 1fr; }
.offer-row { grid-template-columns: minmax(160px, 1.1fr) 1fr auto; row-gap: 10px; }
.offer-row__stats { grid-column: 1 / -1; order: 3; flex-wrap: wrap; }
.offer-row__price { align-items: flex-end; }
.buy-box { position: static; }
/* tablet: keep the horizontal seller row, but drop to a looser 3-track
grid so the stats block can wrap instead of overflowing */
.seller-row { grid-template-columns: minmax(160px, 1.1fr) 1fr auto; row-gap: 10px; }
.seller-row__stats { grid-column: 1 / -1; order: 3; flex-wrap: wrap; }
.seller-row__price { align-items: flex-end; }
}
@media (max-width: 900px) {
.market-layout { grid-template-columns: 1fr; }
.filters { position: static; }
.cart-layout { grid-template-columns: 1fr; }
.summary-box { position: static; }
.dash-layout { grid-template-columns: 1fr; }
.side-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
.side-nav .who { display: none; }
.side-nav .sep { display: none; }
.side-nav__h { display: none; }
.side-nav a { padding: 9px 12px; }
}
@media (max-width: 720px) {
/* mobile: stack product content above the checkout card, no sticky */
.buy-box { position: static; }
.other-sellers-head { flex-direction: column; align-items: stretch; gap: 12px; }
.other-sellers-head__right { justify-content: space-between; }
/* compact card: identity on top, stats underneath, price+View at bottom —
no horizontal scroll, everything wraps in normal block flow */
.seller-row { grid-template-columns: 1fr; row-gap: 12px; padding: 14px 16px; }
.seller-row__stats { order: 2; flex-wrap: wrap; }
.seller-row__price { order: 3; grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.seller-row__price .from-lbl { display: none; }
.offer-row { grid-template-columns: 1fr; row-gap: 12px; padding: 14px 16px; }
.offer-row__seller { order: 1; }
.offer-row__stats { order: 2; grid-column: 1; flex-wrap: wrap; }
.offer-row__price { order: 3; grid-column: 1; text-align: start; }
.offer-row__view { order: 4; grid-column: 1; justify-self: stretch; }
.offer-row__out-notice { order: 4; grid-column: 1; justify-self: start; }
}
@media (max-width: 560px) {
.form-row { grid-template-columns: 1fr; }
.dash-cards { grid-template-columns: 1fr 1fr; }
.auth-card { padding: 26px 20px; }
.cart-item { grid-template-columns: 56px 1fr; }
.cart-item .thumb { width: 56px; height: 56px; }
.cart-item .end { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
/* ---------------------------- policies page ----------------------------- */
.pol-nav {
display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
}
.pol-nav a {
padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
color: var(--txt-2); background: var(--panel-2);
border: 1px solid var(--line); text-decoration: none;
}
.pol-nav a:hover { color: var(--txt-1); border-color: var(--teal); }
.pol-nav a.active { color:#fff; border-color:var(--red); background:var(--red); }
.pol-sec { margin-bottom: 16px; scroll-margin-top: 90px; }
.pol-sec h3 { margin: 0 0 10px; font-size: 17px; }
.pol-sec p { color: var(--txt-2); line-height: 1.75; margin: 0 0 10px; font-size: 14.5px; }
.pol-help{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:26px;align-items:center;overflow:hidden;background:radial-gradient(circle at 92% 45%,rgba(255,36,61,.13),transparent 36%),var(--panel)}
.pol-help__mascot{width:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.22))}
.pol-list { margin: 0 0 10px; padding-inline-start: 20px; }
.pol-list li { color: var(--txt-2); line-height: 1.75; margin-bottom: 8px; font-size: 14.5px; }
/* ------------------------- attention flash (buy box) -------------------- */
/* Used when "View" on a package card jumps the buyer to the purchase panel,
so it is obvious where the page landed. */
@keyframes boxFlash {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
25%, 60% { box-shadow: 0 0 0 3px var(--teal); }
}
.box-flash { animation: boxFlash 1.4s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .box-flash { animation: none; } }
/* become-a-seller terms — the deal, not just the process. Figures are
injected from /api/config so they can never contradict the server. */
.become-terms { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 8px; }
.become-terms li { display: flex; gap: 9px; align-items: flex-start;
font-size: 13px; line-height: 1.5; color: var(--tx); }
.become-terms .bt-g { flex: 0 0 20px; text-align: center; font-size: 14px; }
.become-terms li:first-child { font-weight: 700; }
/* searchable select — a type-to-filter box in front of a native