/* ==========================================================================
   UserSell theme — one stylesheet.
   Sections: 1 tokens · 2 base · 3 header/footer · 4 buttons/forms · 5 cards & badges
             6 home · 7 listing · 8 ad page · 9 panel · 10 new-ad wizard · 11 login
             12 modals/toasts · 13 effects (3D, reveal) · 14 responsive · 15 print
   Dark mode: <html class="is-dark"> (set before paint by inc/assets.php).
   ========================================================================== */

/* 1. Design tokens --------------------------------------------------------- */
:root {
	--font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--brand: #0ea772;          /* emerald — UserSell green */
	--brand-600: #077a53;      /* was #0b8a5e — darkened a little for WCAG AA text contrast (4.5:1) */
	--brand-200: #bdf0da;
	--brand-50: #ecfdf5;
	--ink: #0f172a;
	--ink-2: #334155;
	--ink-3: #64748b;
	--line: #e2e8f0;
	--line-2: #cbd5e1;
	--bg: #f6f8fb;
	--card: #ffffff;
	--card-2: #f8fafc;
	--amber: #f59e0b; --amber-50: #fffbeb;
	--red: #e11d48;   --red-50: #fff1f2;
	--blue: #2563eb;  --blue-50: #eff6ff;
	--violet: #7c3aed;
	--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
	--shadow-lg: 0 20px 50px -20px rgba(15, 23, 42, .35);
	--radius: 16px;
	--radius-sm: 10px;
	--wrap: 1200px;
	--header-h: 68px;
	--glass: rgba(255, 255, 255, .72);
	--grad: linear-gradient(135deg, #0ea772 0%, #0891b2 60%, #6366f1 100%);
	--grad-soft: linear-gradient(135deg, rgba(14, 167, 114, .14), rgba(99, 102, 241, .12));
	color-scheme: light;
}
html.is-dark {
	--ink: #e5e7eb; --ink-2: #cbd5e1; --ink-3: #94a3b8;
	--line: #1f2937; --line-2: #334155;
	--bg: #0b1220; --card: #111a2e; --card-2: #0f172a;
	--brand-50: rgba(14, 167, 114, .12); --brand-200: rgba(14, 167, 114, .3);
	--amber-50: rgba(245, 158, 11, .12); --red-50: rgba(225, 29, 72, .12); --blue-50: rgba(37, 99, 235, .14);
	--glass: rgba(17, 26, 46, .7);
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
	--shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .8);
	--grad-soft: linear-gradient(135deg, rgba(14, 167, 114, .2), rgba(99, 102, 241, .18));
	--brand-600: #34d399;      /* green TEXT on dark cards: 4.5:1+ (the light-mode green was too dark here) */
	color-scheme: dark;
}
/* Places that use --brand-600 as a BACKGROUND with white text keep the deep green in dark mode. */
html.is-dark .us-btn--primary:hover, html.is-dark .us-toast--ok { background: #0b8a5e; }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* Components set display (flex/grid); `hidden` must still hide them. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.9; color: var(--ink); background: var(--bg); overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.4; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); } h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; unicode-bidi: embed; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 .35em; }
.us-wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.us-main { min-height: 60vh; padding-bottom: 72px; }
.us-sr, .us-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.us-skip:focus { position: fixed; top: 8px; inset-inline-start: 8px; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 999; }
.us-muted { color: var(--ink-3); }
.us-ltr { direction: ltr; unicode-bidi: embed; text-align: left; }
.us-num { font-variant-numeric: tabular-nums; }
.us-section { padding: clamp(40px, 7vw, 80px) 0; }
.us-section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.us-section__head p { color: var(--ink-3); margin: 0; }
.us-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand-600); background: var(--brand-50); border: 1px solid var(--brand-200); padding: 4px 12px; border-radius: 999px; }
.us-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 14px 0; font-size: 13px; color: var(--ink-3); }
.us-crumbs li + li::before { content: '›'; margin-inline-end: 6px; opacity: .6; }

/* Background orbs (soft, blurred; respect reduced motion) */
.us-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.us-bg__orb { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .35; animation: us-float 26s ease-in-out infinite alternate; }
.us-bg__orb--1 { background: radial-gradient(circle, rgba(14, 167, 114, .55), transparent 60%); top: -20vmax; right: -20vmax; }
.us-bg__orb--2 { background: radial-gradient(circle, rgba(99, 102, 241, .45), transparent 60%); bottom: -25vmax; left: -15vmax; animation-delay: -8s; }
.us-bg__orb--3 { background: radial-gradient(circle, rgba(8, 145, 178, .4), transparent 60%); top: 30vh; left: 30vw; width: 40vmax; height: 40vmax; animation-delay: -16s; }
html.is-dark .us-bg__orb { opacity: .28; }
@keyframes us-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 8vh, 0) scale(1.12); } }

/* 3. Header & footer ------------------------------------------------------ */
.us-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); background: var(--glass); border-bottom: 1px solid var(--line); }
.us-header__in { display: flex; align-items: center; gap: 18px; height: var(--header-h); }
.us-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 900; font-size: 1.15rem; white-space: nowrap; }
.us-logo__mark { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(14, 167, 114, .7); }
.us-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.us-logo__text small { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.us-logo img { max-height: 42px; width: auto; }
.us-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.us-nav__list a { display: block; white-space: nowrap; padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.us-nav__list a:hover, .us-nav__list .current-menu-item > a { background: var(--card-2); color: var(--brand-600); }
.us-nav__list .sub-menu { display: none; }
.us-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.us-search { display: flex; align-items: center; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 0; padding-inline: 10px 4px; height: 42px; min-width: 240px; }
.us-search input { border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); flex: 1; outline: none; }
.us-search button { border: 0; background: transparent; color: var(--ink-3); width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.us-search button:hover { color: var(--brand-600); background: var(--card); }
.us-iconbtn { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 12px; cursor: pointer; transition: .2s; }
.us-iconbtn:hover { border-color: var(--brand); color: var(--brand-600); }
[data-us-theme] .us-i-sun { display: none; } html.is-dark [data-us-theme] .us-i-sun { display: block; } html.is-dark [data-us-theme] .us-i-moon { display: none; }
.us-avatar-link { position: relative; display: inline-block; }
.us-avatar-link img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; border: 2px solid var(--brand-200); }
.us-dot { position: absolute; top: -3px; inset-inline-end: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--card); }
.us-burger { display: none; }
.us-footer { background: var(--card); border-top: 1px solid var(--line); padding: 48px 0 0; margin-top: 40px; }
.us-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.us-footer h3 { font-size: .95rem; margin-bottom: 12px; }
.us-footer ul { list-style: none; padding: 0; margin: 0; }
.us-footer li { margin: 6px 0; } .us-footer li a { color: var(--ink-2); font-size: 14px; }
.us-footer__about { color: var(--ink-3); font-size: 14px; margin: 12px 0 16px; }
.us-footer__legal { display: flex; gap: 10px; align-items: flex-start; margin-top: 32px; padding: 14px 18px; background: var(--amber-50); border: 1px solid rgba(245, 158, 11, .35); border-radius: var(--radius-sm); color: var(--ink-2); font-size: 13.5px; }
.us-footer__legal p { margin: 0; }
.us-footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0 24px; margin-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.us-tabbar { display: none; }

/* 4. Buttons & forms ------------------------------------------------------ */
.us-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, color .2s; text-decoration: none; line-height: 1.5; }
.us-btn:active { transform: translateY(1px); }
.us-btn--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(14, 167, 114, .8); }
.us-btn--primary:hover { background: var(--brand-600); color: #fff; box-shadow: 0 14px 28px -10px rgba(14, 167, 114, .9); transform: translateY(-1px); }
.us-btn--ghost { background: var(--card); color: var(--ink-2); border-color: var(--line-2); }
.us-btn--ghost:hover { border-color: var(--brand); color: var(--brand-600); }
.us-btn--soft { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.us-btn--danger { background: var(--red-50); color: var(--red); border-color: rgba(225, 29, 72, .3); }
.us-btn--dark { background: var(--ink); color: #fff; } html.is-dark .us-btn--dark { background: #fff; color: #0f172a; }
.us-btn--tg { background: #229ed9; color: #fff; } .us-btn--tg:hover { background: #1b8ac0; color: #fff; }
.us-btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.us-btn--lg { padding: 14px 26px; font-size: 16px; border-radius: 14px; }
.us-btn--block { width: 100%; }
.us-btn[disabled], .us-btn.is-busy { opacity: .6; pointer-events: none; }
.us-btn.is-busy::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: us-spin .7s linear infinite; }
@keyframes us-spin { to { transform: rotate(360deg); } }
.us-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.us-field > span, .us-field > label { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.us-field .us-hint { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
/* Currency prefix next to a price input ("$" before the amount): .us-field > span.us-ltr > .us-input__prefix + .us-input */
.us-field > span.us-ltr { font-weight: 400; }
.us-input__prefix { font-weight: 800; font-size: 15px; color: var(--ink-3); padding-inline-start: 2px; }
.us-input, .us-select, .us-textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--card); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 11px 14px; min-height: 48px; outline: none; transition: border .2s, box-shadow .2s; }
.us-input:focus, .us-select:focus, .us-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14, 167, 114, .15); }
.us-textarea { min-height: 150px; resize: vertical; line-height: 1.9; }
.us-field.is-error .us-input, .us-field.is-error .us-textarea, .us-field.is-error .us-select { border-color: var(--red); }
.us-err { color: var(--red); font-size: 13px; display: none; }
.us-field.is-error .us-err { display: block; }
.us-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.us-check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--brand); }
.us-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.us-pill { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--card); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: .15s; }
.us-pill:hover { border-color: var(--brand); }
.us-pill.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.us-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card-2); font-size: 14px; margin: 0 0 16px; }
.us-alert p { margin: 0; }
.us-alert--info { background: var(--blue-50); border-color: rgba(37, 99, 235, .3); }
.us-alert--warn { background: var(--amber-50); border-color: rgba(245, 158, 11, .4); }
.us-alert--ok { background: var(--brand-50); border-color: var(--brand-200); }
.us-alert--err { background: var(--red-50); border-color: rgba(225, 29, 72, .3); color: var(--red); }

/* 5. Cards, badges, chips ------------------------------------------------- */
.us-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.us-card__body { padding: 20px; }
.us-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2); line-height: 1.6; }
.us-badge--ok { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-600); }
.us-badge--kyc { background: var(--blue-50); border-color: rgba(37, 99, 235, .3); color: #1d4ed8; }
.us-badge--hold { background: var(--amber-50); border-color: rgba(245, 158, 11, .4); color: #a14a08; }
.us-badge--sales { background: #fdf4ff; border-color: #e9d5ff; color: var(--violet); } html.is-dark .us-badge--sales { background: rgba(124, 58, 237, .15); border-color: rgba(124, 58, 237, .4); color: #c4b5fd; }
.us-badge--sold { background: var(--ink); color: #fff; border-color: var(--ink); } html.is-dark .us-badge--sold { background: #fff; color: #0f172a; }
.us-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; color: #fff; }
.us-chip--instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 60%, #8134af); }
.us-chip--telegram { background: #229ed9; } .us-chip--youtube { background: #e62117; } .us-chip--tiktok { background: #111; }
.us-stat-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }

/* Ad card */
.us-adcard { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s, border-color .25s; transform-style: preserve-3d; will-change: transform; }
.us-adcard:hover { box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.us-adcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--grad-soft); overflow: hidden; }
.us-adcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.us-adcard:hover .us-adcard__media img { transform: scale(1.05); }
.us-adcard__media .us-chip { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.us-adcard__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 44px; }
.us-adcard__sold { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(15, 23, 42, .55); color: #fff; font-weight: 900; font-size: 1.3rem; letter-spacing: .05em; backdrop-filter: grayscale(.7); }
.us-adcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.us-adcard__title { font-size: 15.5px; font-weight: 800; margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.us-adcard__title a { color: var(--ink); }
.us-adcard__title a::after { content: ''; position: absolute; inset: 0; }
.us-adcard__meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink-3); font-size: 13px; }
.us-adcard__badges { display: flex; flex-wrap: wrap; gap: 5px; position: relative; z-index: 2; }
.us-adcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.us-price { font-weight: 900; font-size: 1.05rem; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.us-price small { font-weight: 600; font-size: .75em; color: var(--ink-3); margin-inline-start: 3px; }
.us-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

/* 6. Home ----------------------------------------------------------------- */
.us-hero { position: relative; padding: clamp(40px, 8vw, 96px) 0 clamp(30px, 5vw, 60px); overflow: hidden; }
.us-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.us-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.3; margin: 14px 0 16px; }
.us-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.us-hero__sub { font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-2); max-width: 540px; }
.us-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.us-hero__trust { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-3); font-size: 13.5px; }
.us-hero__trust span { display: inline-flex; gap: 6px; align-items: center; }
.us-hero__trust .us-i { color: var(--brand); }
/* 3D card stack */
.us-stack { position: relative; height: 420px; perspective: 1200px; perspective-origin: 60% 40%; }
.us-stack__scene { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .2s ease-out; }
.us-stack__card { position: absolute; left: 50%; top: 50%; width: 300px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); transform-style: preserve-3d; animation: us-hover 7s ease-in-out infinite; will-change: translate; }
.us-stack__card--1 { transform: translate3d(-50%, -60%, 80px) rotateY(-10deg) rotateX(5deg); z-index: 3; }
.us-stack__card--2 { transform: translate3d(2%, -22%, 0) rotateY(-16deg) rotateX(4deg) scale(.9); z-index: 2; animation-delay: -2.5s; opacity: .95; }
.us-stack__card--3 { transform: translate3d(-104%, -16%, -80px) rotateY(-6deg) rotateX(8deg) scale(.84); z-index: 1; animation-delay: -5s; opacity: .9; }
/* "translate" (not margin-top): runs on the GPU and does not touch the cards' own 3D transform. */
@keyframes us-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.us-stack__card .us-adcard__title { font-size: 14.5px; }
.us-stack__row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.us-stack__shield { position: absolute; left: 50%; top: 50%; transform: translate3d(-150%, -170%, 160px) rotate(-8deg); z-index: 4; width: 72px; height: 72px; border-radius: 22px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 24px 40px -14px rgba(14, 167, 114, .8); animation: us-hover 5s ease-in-out infinite; }
.us-stack__note { position: absolute; left: 50%; top: 50%; transform: translate3d(-40%, 78%, 140px) rotate(3deg); z-index: 4; background: var(--card); border: 1px solid var(--brand-200); border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow-lg); animation: us-hover 6s ease-in-out infinite; animation-delay: -3s; }
.us-stack__note .us-i { color: var(--brand); }
/* stats */
.us-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px; }
.us-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow); }
.us-stat b { display: block; font-size: 1.7rem; font-weight: 900; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.us-stat span { color: var(--ink-3); font-size: 13.5px; }
/* platforms */
.us-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.us-ptile { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); transition: .25s; overflow: hidden; }
.us-ptile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.us-ptile__ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); }
.us-ptile--instagram .us-ptile__ico { background: linear-gradient(45deg, #f58529, #dd2a7b 60%, #8134af); }
.us-ptile--telegram .us-ptile__ico { background: #229ed9; } .us-ptile--youtube .us-ptile__ico { background: #e62117; } .us-ptile--tiktok .us-ptile__ico { background: #111; }
.us-ptile b { display: block; font-size: 1.05rem; } .us-ptile span { color: var(--ink-3); font-size: 13px; }
/* how it works */
.us-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.us-step { position: relative; padding: 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.us-step::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; inset-inline-start: 18px; width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 900; display: grid; place-items: center; box-shadow: 0 8px 16px -8px rgba(14, 167, 114, .8); }
.us-step .us-i { color: var(--brand); margin-bottom: 8px; }
.us-step h3 { font-size: 1rem; } .us-step p { color: var(--ink-3); font-size: 13.5px; margin: 0; }
/* trust strip */
.us-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.us-trust__item { display: flex; gap: 12px; padding: 18px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line); }
.us-trust__item .us-i { color: var(--brand); flex-shrink: 0; }
.us-trust__item b { display: block; margin-bottom: 2px; } .us-trust__item span { font-size: 13.5px; color: var(--ink-2); }
/* CTA band */
.us-cta { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(28px, 5vw, 56px); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
html.is-dark .us-cta { background: #0f172a; border: 1px solid var(--line); }
.us-cta::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 90deg at 50% 50%, rgba(14, 167, 114, .35), rgba(99, 102, 241, .35), rgba(14, 167, 114, .35)); filter: blur(60px); animation: us-spin 18s linear infinite; }
.us-cta > * { position: relative; }
.us-cta h2 { color: #fff; margin-bottom: 6px; } .us-cta p { color: rgba(255, 255, 255, .75); margin: 0; }
/* SEO text blocks from the plugin keep their own class names; give them room */
.us-seo { max-width: 900px; margin-inline: auto; }
.us-seo details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px; margin: 8px 0; }
.us-seo summary { cursor: pointer; font-weight: 700; }

/* 7. Listing ---------------------------------------------------------------- */
.us-listing { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.us-filters { position: sticky; top: calc(var(--header-h) + 14px); }
.us-filters .us-card__body { padding: 18px; }
.us-filters h3 { font-size: 1rem; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.us-filters h3 a { font-size: 12.5px; font-weight: 600; }
.us-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.us-range .us-input { min-height: 42px; padding: 8px 10px; font-size: 14px; }
.us-listing__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.us-listing__top .us-select { width: auto; min-height: 42px; padding: 6px 12px; }
.us-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.us-chips a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.us-chips a.is-on, .us-chips a:hover { border-color: var(--brand); color: var(--brand-600); }
.us-pager { display: flex; justify-content: center; gap: 6px; margin: 26px 0; flex-wrap: wrap; }
.us-pager a, .us-pager span { min-width: 40px; height: 40px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-weight: 700; }
.us-pager .is-current, .us-pager .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.us-empty { text-align: center; padding: 50px 20px; color: var(--ink-3); background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.us-empty .us-i { color: var(--brand); margin-bottom: 8px; }
.us-filters-toggle { display: none; }
.us-grid.is-loading { opacity: .5; pointer-events: none; }
.us-skel { background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 50%, var(--card-2) 75%); background-size: 200% 100%; animation: us-skel 1.2s infinite; border-radius: var(--radius); min-height: 320px; }
@keyframes us-skel { to { background-position: -200% 0; } }

/* 8. Ad page --------------------------------------------------------------- */
.us-ad { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
.us-gallery { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.us-gallery__main { position: relative; aspect-ratio: 4 / 3; background: var(--grad-soft); }
.us-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.us-gallery__thumbs { display: flex; gap: 8px; padding: 10px; background: var(--card-2); }
.us-gallery__thumbs button { width: 72px; height: 56px; border-radius: 8px; border: 2px solid transparent; padding: 0; overflow: hidden; cursor: pointer; background: var(--card); }
.us-gallery__thumbs button.is-on { border-color: var(--brand); }
.us-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.us-gallery__sold { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(15, 23, 42, .55); color: #fff; font-size: 2rem; font-weight: 900; backdrop-filter: grayscale(.8); }
.us-ad__head { margin: 18px 0 8px; }
.us-ad__head h1 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: 8px 0 10px; }
.us-ad__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ink-3); font-size: 13.5px; align-items: center; }
.us-ad__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.us-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.us-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.us-kpi b { display: block; font-size: 1.15rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; } .us-kpi span { font-size: 12.5px; color: var(--ink-3); }
.us-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.us-fields__group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.us-fields__group h3 { font-size: .95rem; margin-bottom: 10px; color: var(--brand-600); display: flex; align-items: center; gap: 6px; }
.us-fields__group dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; }
.us-fields__group dt { color: var(--ink-3); } .us-fields__group dd { margin: 0; font-weight: 700; text-align: end; }
.us-prose { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0; font-size: 15px; line-height: 2; }
.us-prose h2 { font-size: 1.1rem; }
.us-buybox { position: sticky; top: calc(var(--header-h) + 14px); }
.us-buybox .us-card__body { padding: 20px; }
.us-buybox__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.us-buybox__price b { font-size: 1.7rem; font-weight: 900; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.us-buybox__fee { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.us-buybox__fee b { color: var(--ink); }
.us-buybox > .us-card:first-child .us-btn { width: 100%; margin-bottom: 8px; }
.us-buybox__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.us-buybox__row .us-btn { margin: 0; }
.us-buybox__note { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.us-sellerbox { margin-top: 14px; }
.us-sellerbox .us-card__body { display: flex; gap: 12px; align-items: center; }
.us-sellerbox img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.us-sellerbox b { display: block; } .us-sellerbox small { color: var(--ink-3); }
.us-sellerbox__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.us-howbox { margin-top: 14px; }
.us-howbox ol { margin: 0; padding-inline-start: 1.2em; font-size: 13.5px; color: var(--ink-2); } .us-howbox li { margin: 4px 0; }
.us-soldbar { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: var(--ink); color: #fff; margin-bottom: 16px; }
html.is-dark .us-soldbar { background: #1e293b; }
.us-soldbar .us-i { flex-shrink: 0; }
.us-related { margin-top: 36px; }
.us-share { display: flex; gap: 6px; }

/* 9. Panel ----------------------------------------------------------------- */
.us-panel { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; margin-top: 20px; }
.us-panel__side { position: sticky; top: calc(var(--header-h) + 14px); }
.us-panel__user { display: flex; gap: 12px; align-items: center; padding: 16px; }
.us-panel__user img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.us-panel__user b { display: block; } .us-panel__user small { color: var(--ink-3); }
.us-panel__nav { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.us-panel__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.us-panel__nav a:hover { background: var(--card-2); } .us-panel__nav a.is-active { background: var(--brand-50); color: var(--brand-600); }
.us-panel__nav .us-count { margin-inline-start: auto; background: var(--red); color: #fff; font-size: 11px; min-width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 6px; }
.us-panel__nav .us-count:empty, .us-panel__nav .us-count[data-n="0"] { display: none; }
.us-panel__main > section { display: none; } .us-panel__main > section.is-active { display: block; }
.us-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.us-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.us-tile b { font-size: 1.5rem; color: var(--brand-600); font-variant-numeric: tabular-nums; } .us-tile span { font-size: 13px; color: var(--ink-3); }
.us-list { display: flex; flex-direction: column; gap: 10px; }
.us-row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.us-row__thumb { width: 72px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--grad-soft); flex-shrink: 0; }
.us-row__body { flex: 1; min-width: 0; } .us-row__body b { display: block; font-size: 15px; } .us-row__body small { color: var(--ink-3); display: block; }
.us-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.us-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.us-status--gray { background: var(--card-2); color: var(--ink-3); border: 1px solid var(--line); } .us-status--amber { background: var(--amber-50); color: #b45309; } .us-status--red { background: var(--red-50); color: var(--red); } .us-status--green { background: var(--brand-50); color: var(--brand-600); } .us-status--blue { background: var(--blue-50); color: var(--blue); }
.us-status--slate, .us-status--indigo, .us-status--violet, .us-status--teal, .us-status--emerald, .us-status--rose { background: var(--blue-50); color: var(--blue); }
.us-reason { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--red-50); color: var(--red); font-size: 13px; }
.us-notice { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.us-notice.is-unread { border-inline-start: 4px solid var(--brand); } .us-notice--warning { border-inline-start-color: var(--red); background: var(--red-50); }
.us-notice__head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.us-notice b { display: block; } .us-notice p { margin: 4px 0 0; font-size: 14px; }
.us-timeline { list-style: none; margin: 10px 0 0; padding: 0; padding-inline-start: 14px; border-inline-start: 2px solid var(--line); font-size: 13px; }
.us-timeline li { position: relative; padding: 2px 0 10px; } .us-timeline li::before { content: ''; position: absolute; inset-inline-start: -20px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.us-timeline small { color: var(--ink-3); display: block; }
.us-deal { padding: 16px 18px; }
.us-deal__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-deal__steps { display: flex; gap: 4px; margin: 12px 0; }
.us-deal__steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); } .us-deal__steps i.is-done { background: var(--brand); }
.us-chat { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--card-2); border-radius: var(--radius-sm); }
.us-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 14px; align-self: flex-start; }
.us-msg.is-mine { align-self: flex-end; background: var(--brand-50); border-color: var(--brand-200); }
.us-msg small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.us-msg--admin { background: var(--blue-50); }
.us-avatar-edit { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.us-avatar-edit img { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; border: 2px solid var(--brand-200); }
.us-toggle-list { display: flex; flex-direction: column; gap: 10px; }
.us-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.us-toggle input { width: 20px; height: 20px; accent-color: var(--brand); }
.us-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.us-tabs button { font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; }
.us-tabs button.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.us-code { display: inline-block; font-family: ui-monospace, Menlo, monospace; direction: ltr; font-size: 1.2rem; font-weight: 800; letter-spacing: 2px; padding: 6px 16px; border: 2px dashed var(--brand); border-radius: 10px; background: var(--brand-50); color: var(--brand-600); user-select: all; }

/* 10. New-ad wizard ------------------------------------------------------- */
.us-wizard { max-width: 860px; margin: 20px auto 0; }
.us-wizard__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 22px; counter-reset: wz; }
.us-wizard__steps li { list-style: none; position: relative; padding: 10px 0; padding-inline-end: 10px; font-size: 13px; font-weight: 700; color: var(--ink-3); border-top: 4px solid var(--line); }
.us-wizard__steps li::before { counter-increment: wz; content: counter(wz); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); margin-inline-end: 6px; font-size: 12px; }
.us-wizard__steps li.is-on { color: var(--brand-600); border-top-color: var(--brand); } .us-wizard__steps li.is-on::before { background: var(--brand); color: #fff; border-color: var(--brand); }
.us-wizard__steps li.is-done { border-top-color: var(--brand); color: var(--ink-2); }
.us-wizard__pane { display: none; } .us-wizard__pane.is-on { display: block; }
.us-wizard__pane .us-card__body { padding: 24px; }
.us-wizard__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; align-items: center; }
.us-wizard__save { font-size: 12.5px; color: var(--ink-3); }
.us-platform-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.us-platform-pick label { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 700; font-size: 14px; transition: .15s; background: var(--card); }
.us-platform-pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.us-platform-pick input { position: absolute; opacity: 0; }
.us-platform-pick .us-ptile__ico { width: 46px; height: 46px; }
.us-uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.us-upload { position: relative; aspect-ratio: 4 / 3; border: 2px dashed var(--line-2); border-radius: var(--radius); display: grid; place-items: center; text-align: center; color: var(--ink-3); font-size: 13px; cursor: pointer; background: var(--card-2); overflow: hidden; transition: .15s; }
.us-upload:hover, .us-upload.is-over { border-color: var(--brand); color: var(--brand-600); }
.us-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.us-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.us-upload__rm { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(15, 23, 42, .8); color: #fff; cursor: pointer; display: grid; place-items: center; }
.us-upload__bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 4px; background: var(--brand); width: 0; transition: width .2s; }
.us-upload__first { position: absolute; top: 6px; inset-inline-start: 6px; background: var(--brand); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.us-words { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.us-words.is-ok b { color: var(--brand-600); } .us-words b { color: var(--red); }
.us-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--card-2); }
.us-gatebox { text-align: center; padding: 28px 20px; }
.us-gatebox .us-i { color: var(--brand); } .us-gatebox ol { text-align: start; display: inline-block; }
.us-done { text-align: center; padding: 30px 20px; }
.us-done .us-i { color: var(--brand); }
/* plugin fields block inside the wizard: inherit the theme look */
.us-wizard .usig-box { border: 0; box-shadow: none; padding: 0; background: transparent; }
.us-wizard .usig-head { display: none; }
/* Insights fields in dark mode: the plugin's sheet is light-only (dark grey labels on the dark card). */
html.is-dark .us-wizard .usig-box { --usig-line: var(--line-2); --usig-text: var(--ink); --usig-muted: var(--ink-3); --usig-brand: #c084fc; color: var(--ink); }
html.is-dark .us-wizard .usig-group { border-top-color: var(--line-2); }
html.is-dark .us-wizard .usig-field label { color: var(--ink); }
html.is-dark .us-wizard .usig-help { background: var(--line-2); color: var(--ink); }
html.is-dark .us-wizard .usig-help:hover, html.is-dark .us-wizard .usig-help.is-open { background: #8134af; color: #fff; }
html.is-dark .us-wizard .usig-box select, html.is-dark .us-wizard .usig-box input[type=text] { background: var(--card-2); border-color: var(--line-2); color: var(--ink); }
html.is-dark .us-wizard .usig-box input::placeholder { color: #7c8aa0; }
html.is-dark .us-wizard .usig-box .usig-pill:not(.is-on) { background: var(--card-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; }
html.is-dark .us-wizard .usig-box .usig-pill:not(.is-on):hover { border-color: #c084fc !important; color: #e9d5ff !important; }
html.is-dark .us-wizard .usig-box .usig-field.is-error .usig-pill:not(.is-on) { border-color: #fb7185 !important; }
html.is-dark .us-wizard .usig-affix, html.is-dark .us-wizard .usig-sub, html.is-dark .us-wizard .usig-progress { color: var(--ink-3); }

/* 11. Login ---------------------------------------------------------------- */
.us-auth { max-width: 520px; margin: 24px auto 0; }
.us-auth .us-card__body { padding: 28px; }
.us-auth h1 { font-size: 1.5rem; text-align: center; }
.us-auth__or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 18px 0; }
.us-auth__or::before, .us-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.us-rolepick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.us-rolepick label { position: relative; padding: 12px 8px; text-align: center; border: 2px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; background: var(--card); }
.us-rolepick label:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); }
.us-rolepick input { position: absolute; opacity: 0; }
.us-rolepick small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-3); }
/* the plugin's Telegram box, restyled */
.usg-tgl { background: var(--card-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 16px !important; box-shadow: none !important; }
.usg-tgl .usg-btn, .usg-btn { background: #229ed9 !important; color: #fff !important; border-radius: 12px !important; font-weight: 700 !important; border: 0 !important; cursor: pointer; }
.usg-tgl__go { display: block !important; width: 100% !important; padding: 13px 16px !important; font-size: 15.5px !important; margin-top: 10px !important; }
.usg-tgl .usg-account__row { display: block !important; } .usg-tgl .usg-account__ico { font-size: 22px; }
.usg-tgl input { border: 1.5px solid var(--line-2) !important; border-radius: 10px !important; padding: 10px 12px !important; background: var(--card) !important; color: var(--ink) !important; }
.us-login-form .login-remember { display: flex; align-items: center; gap: 6px; }
.us-login-form p { margin-bottom: 12px; } .us-login-form label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 14px; }
.us-login-form input[type=text], .us-login-form input[type=password] { width: 100%; font: inherit; font-size: 15px; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 11px 14px; background: var(--card); color: var(--ink); }
.us-login-form .button { background: var(--ink); color: #fff; border: 0; border-radius: 12px; padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; width: 100%; }

/* 12. Modals & toasts ------------------------------------------------------- */
.us-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(6px); }
.us-modal.is-open { display: flex; }
.us-modal__box { width: min(100%, 520px); max-height: 90vh; overflow: auto; background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 24px; animation: us-pop .25s ease-out; }
@keyframes us-pop { from { transform: translateY(16px) scale(.98); opacity: 0; } }
.us-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.us-modal__head h3 { margin: 0; }
.us-toasts { position: fixed; bottom: 84px; inset-inline-end: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.us-toast { padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: var(--shadow-lg); animation: us-pop .25s; }
.us-toast--ok { background: var(--brand-600); } .us-toast--err { background: var(--red); }
.us-pushcard { position: fixed; bottom: 84px; inset-inline-start: 16px; z-index: 110; display: flex; gap: 12px; align-items: center; width: min(100% - 32px, 420px); padding: 14px 16px; background: var(--card); border: 1px solid var(--brand-200); border-radius: 16px; box-shadow: var(--shadow-lg); animation: us-pop .3s; }
.us-pushcard[hidden] { display: none; }
.us-pushcard p { margin: 0; font-size: 12.5px; color: var(--ink-3); } .us-pushcard strong { font-size: 14px; }

/* 13. Effects --------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-tilt] { transition: transform .15s ease-out, box-shadow .25s; }
.us-glow { position: relative; }
.us-glow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.us-glow:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	[data-reveal] { opacity: 1; transform: none; }
}

/* 14. Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.us-footer__grid { grid-template-columns: 1fr 1fr; }
	.us-hero__grid { grid-template-columns: 1fr; }
	.us-stack { height: 360px; margin-top: 10px; }
	.us-ad { grid-template-columns: 1fr 340px; }
}
@media (max-width: 900px) {
	/* The header has backdrop-filter, which makes it the containing block of fixed children;
	   so the drawer is placed under the header with an explicit height instead of inset:0. */
	.us-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--bg); z-index: 49; padding: 16px 16px 110px; overflow: auto; border-top: 1px solid var(--line); }
	.us-nav.is-open { display: block; }
	.us-nav__list { flex-direction: column; } .us-nav__list a { padding: 12px 14px; font-size: 16px; }
	.us-burger { display: inline-grid; }
	.us-search { display: none; }
	.us-btn--new span { display: none; } .us-btn--new { padding: 10px; }
	.us-listing { grid-template-columns: 1fr; }
	.us-filters { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow: auto; padding: 16px; display: none; }
	.us-filters.is-open { display: block; }
	.us-filters-toggle { display: inline-flex; }
	.us-ad { grid-template-columns: 1fr; }
	.us-buybox { position: static; }
	.us-buybox > .us-card:first-child { position: fixed; bottom: 64px; left: 0; right: 0; z-index: 60; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .3); }
	.us-buybox > .us-card:first-child .us-card__body { padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
	.us-buybox__price b { font-size: 1.25rem; } .us-buybox__fee, .us-buybox__note, .us-buybox__row { display: none; }
	.us-buybox > .us-card:first-child .us-btn { margin: 0; width: auto; }
	.us-buybox > .us-card:first-child .us-share { grid-column: 1 / -1; justify-content: flex-end; margin: 0; }
	.us-buybox > .us-card:first-child .us-btn--dark, .us-buybox > .us-card:first-child .us-btn--ghost { font-size: 13px; padding: 8px 12px; }
	.us-sellerbox, .us-howbox { position: static; }
	.us-main { padding-bottom: 150px; }
	/* minmax(0,1fr): the horizontal tab row must scroll, not stretch the page to 1300px. */
	.us-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.us-panel > * { min-width: 0; }
	.us-panel__side { position: static; }
	.us-panel__side .us-card { overflow: hidden; }
	.us-panel__nav { flex-direction: row; overflow-x: auto; gap: 8px; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
	.us-panel__nav::-webkit-scrollbar { display: none; }
	.us-panel__nav li { flex: 0 0 auto; scroll-snap-align: start; }
	.us-panel__nav a { white-space: nowrap; border: 1px solid var(--line); background: var(--card-2); border-radius: 999px; padding: 8px 14px; font-size: 13px; box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .3); }
	.us-panel__nav a.is-active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(14, 167, 114, .9); }
	.us-panel__nav a .us-i { width: 16px; height: 16px; }
	.us-tiles, .us-kpis, .us-stats, .us-platforms, .us-steps, .us-wizard__steps { grid-template-columns: repeat(2, 1fr); }
	.us-trust { grid-template-columns: 1fr; }
	.us-fields { grid-template-columns: 1fr; }
	.us-cta { flex-direction: column; text-align: center; }
	.us-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; height: 64px; background: var(--glass); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
	.us-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); font-size: 11px; font-weight: 700; }
	.us-tabbar a.is-active { color: var(--brand-600); }
	.us-tabbar__add .us-i { width: 46px; height: 46px; padding: 11px; border-radius: 16px; background: var(--grad); color: #fff; margin-top: -22px; box-shadow: 0 10px 20px -8px rgba(14, 167, 114, .8); }
	.us-toasts { bottom: 76px; inset-inline: 12px; max-width: none; }
	.us-pushcard { bottom: 76px; inset-inline: 16px; width: auto; }
	.us-footer { padding-bottom: 70px; }
}
@media (max-width: 560px) {
	body { font-size: 14.5px; }
	.us-footer__grid, .us-platform-pick, .us-rolepick { grid-template-columns: 1fr; }
	.us-platform-pick { grid-template-columns: repeat(2, 1fr); }
	.us-uploads { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.us-grid { grid-template-columns: 1fr; }
	.us-stack { height: 320px; perspective-origin: 50% 50%; } .us-stack__card { width: 250px; }
	.us-stack__card--3 { display: none; }
	.us-stack__card--2 { transform: translate3d(-18%, -24%, 0) rotateY(-14deg) scale(.86); }
	.us-stack__shield { transform: translate3d(-200%, -200%, 160px) rotate(-8deg) scale(.85); }
	.us-stack__note { transform: translate3d(-45%, 95%, 140px) rotate(3deg); font-size: 12px; }
	.us-section__head { flex-direction: column; align-items: flex-start; }
	.us-row { flex-wrap: wrap; } .us-row__actions { width: 100%; justify-content: flex-start; }
	.us-wizard__pane .us-card__body { padding: 16px; }
	.us-stats { grid-template-columns: repeat(2, 1fr); }
	.us-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* 15. Print ----------------------------------------------------------------- */
@media print { .us-header, .us-footer, .us-tabbar, .us-bg, .us-buybox, .us-pushcard { display: none !important; } }

/* 16. Content written by users / old Charsoogh ads (inline colors) -------- */
/* Old ad descriptions carry inline white boxes and dark text; in dark mode they must follow the theme. */
html.is-dark .us-prose *:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-seo:not(.us-seo-box__body) *:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)) { background-color: transparent !important; color: inherit !important; border-color: var(--line) !important; }
html.is-dark .us-prose a:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-seo:not(.us-seo-box__body) a:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)) { color: #34d399 !important; }
html.is-dark .us-prose h1:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-prose h2:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-prose h3:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-prose h4:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-prose strong:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)), html.is-dark .us-prose b:not(:is(.us-endbox, .us-bizbox, .us-srvbox, .us-endbox *, .us-bizbox *, .us-srvbox *)) { color: #f1f5f9 !important; }
.us-prose img { border-radius: 10px; }
.us-prose table { width: 100%; border-collapse: collapse; } .us-prose td, .us-prose th { border: 1px solid var(--line); padding: 6px 10px; }

/* 17. Home SEO text: kept for Google, shown in a scrollable card ------------- */
.us-seo-box { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.us-seo-box__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.us-seo-box__head h2 { margin: 0; font-size: 1.1rem; }
.us-seo-box__body { max-height: 420px; overflow-y: auto; padding: 18px 22px; color: var(--ink-2); font-size: 14.5px; line-height: 2; overscroll-behavior: contain; scrollbar-width: thin; }
.us-seo-box.is-open .us-seo-box__body { max-height: none; }
.us-seo-box__body h1, .us-seo-box__body h2, .us-seo-box__body h3 { color: var(--ink) !important; font-size: 1.05rem; margin-top: 1.2em; }
.us-seo-box__body p, .us-seo-box__body li, .us-seo-box__body span, .us-seo-box__body div { color: var(--ink-2) !important; }
.us-seo-box__body a { color: var(--brand-600) !important; }
.us-seo-box__body section { padding: 0 !important; margin: 0 0 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.us-seo-box__body [class*="card"] { background: var(--card-2) !important; border: 1px solid var(--line) !important; border-radius: 12px; padding: 12px 14px !important; }
.us-seo-box__fade { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 60px; border-radius: 0 0 var(--radius) var(--radius); background: linear-gradient(transparent, var(--card)); pointer-events: none; }
.us-seo-box.is-open .us-seo-box__fade { display: none; }

/* 18. SEO card content design (FAQ accordion, headings, lists, links) ------------ */
.us-seo-box__body { background: radial-gradient(600px 200px at 100% 0, color-mix(in srgb, var(--brand-600) 8%, transparent), transparent); }
.us-seo-box__body h2, .us-seo-box__body h3 { position: relative; padding-inline-start: 14px; margin: 1.6em 0 .6em; line-height: 1.6; }
.us-seo-box__body h2::before, .us-seo-box__body h3::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 4px; border-radius: 4px; background: linear-gradient(var(--brand-600), #6366f1); }
.us-seo-box__body ul { list-style: none; padding: 0; margin: .6em 0; display: grid; gap: 6px; }
.us-seo-box__body ul li { position: relative; padding: 8px 12px; padding-inline-start: 34px; background: var(--card-2) !important; border: 1px solid var(--line); border-radius: 10px; }
.us-seo-box__body ul li::before { content: "✓"; position: absolute; inset-inline-start: 10px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--brand-600) 18%, transparent); color: var(--brand-600); font-size: 11px; line-height: 18px; text-align: center; font-weight: 800; }
/* FAQ: <details> as accordion cards (overrides the plugin's white boxes in both themes). */
.us-seo-box__body details, .us-seo-bottom details { background: var(--card-2) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 0 !important; margin: 8px 0 !important; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.us-seo-box__body details[open] { border-color: color-mix(in srgb, var(--brand-600) 55%, var(--line)) !important; box-shadow: 0 6px 20px -12px var(--brand-600); }
.us-seo-box__body summary { list-style: none; cursor: pointer; padding: 13px 16px; padding-inline-end: 44px; font-weight: 700; color: var(--ink) !important; position: relative; }
.us-seo-box__body summary::-webkit-details-marker { display: none; }
.us-seo-box__body summary::after { content: "+"; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--brand-600); text-align: center; line-height: 20px; font-weight: 800; transition: transform .2s; }
.us-seo-box__body details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.us-seo-box__body details > :not(summary) { padding: 0 16px 14px; margin: 0; }
/* Text links inside the card look like small buttons. */
.us-seo-box__body p > a:only-child, .us-seo-box__body .us-lp__cta a, .us-seo-box__body [class*="cta"] a { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; margin-inline-end: 8px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--brand-600) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-600) 30%, transparent); text-decoration: none; font-weight: 700; font-size: 13px; }
.us-seo-box__body::-webkit-scrollbar { width: 8px; } .us-seo-box__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.us-kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
/* Old texts with inline colors inside the SEO card follow the theme. */
html.is-dark .us-seo-box__body [style] { background-color: transparent !important; color: inherit !important; }
/* Mobile drawer quick links (platforms). */
.us-nav__quick { display: none; }
@media (max-width: 900px) {
	.us-nav__quick { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
	.us-nav__quick b { display: block; margin-bottom: 10px; color: var(--ink-3); font-size: 13px; }
	.us-nav__quick div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.us-nav__quick a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
}

/* 19. Featured ("featured") ads: golden strip + ribbon on the card ---------------------- */
.us-featured { position: relative; margin: 8px 0 28px; padding: 18px; border-radius: calc(var(--radius) + 6px); background:
	radial-gradient(500px 160px at 90% 0, rgba(251, 191, 36, .22), transparent 70%),
	radial-gradient(400px 160px at 0 100%, rgba(245, 158, 11, .14), transparent 70%), var(--card);
	border: 1px solid rgba(245, 158, 11, .45); box-shadow: 0 20px 50px -30px rgba(217, 119, 6, .7), inset 0 1px 0 rgba(255, 255, 255, .5); overflow: hidden; }
.us-featured::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, #fde68a, #f59e0b, #fbbf24, #fde68a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; pointer-events: none; }
.us-featured__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.us-featured__head h2 { margin: 0; font-size: 1.25rem; background: linear-gradient(90deg, #b45309, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.is-dark .us-featured__head h2 { background-image: linear-gradient(90deg, #fde68a, #f59e0b); }
.us-featured__head p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.us-featured__crown { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #fcd34d, #f59e0b 55%, #b45309); box-shadow: 0 10px 24px -8px rgba(217, 119, 6, .8), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .12); transform: rotate(-8deg); animation: us-float 4s ease-in-out infinite; }
.us-featured__crown svg, .us-adcard__vip svg, .us-badge--vip svg { fill: currentColor; }
.us-featured__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; }
.us-featured__track > * { scroll-snap-align: start; }
.us-adcard.is-featured { border-color: rgba(245, 158, 11, .6); box-shadow: 0 14px 34px -18px rgba(217, 119, 6, .65); }
.us-adcard__vip { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; padding-inline-end: 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #451a03;
	background: linear-gradient(110deg, #fde68a 0%, #fbbf24 45%, #f59e0b 80%, #fbbf24 100%); overflow: hidden; isolation: isolate;
	box-shadow: 0 6px 16px -6px rgba(217, 119, 6, .9), inset 0 1px 0 rgba(255, 255, 255, .7); }
.us-adcard__vip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 247, 214, .95) 50%, transparent 70%); transform: translateX(-100%); animation: us-shine 3s linear infinite; }
.us-adcard__vip[hidden] { display: none !important; }
.us-badge--vip { color: #92400e !important; background: linear-gradient(90deg, #fef3c7, #fde68a) !important; border-color: #fbbf24 !important; }
@keyframes us-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes us-float { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .us-adcard__vip, .us-adcard__vip::after, .us-featured__crown { animation: none; } }
/* Logo image (custom logo / site icon) in the header mark. */
.us-logo__mark--img { background: transparent; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); overflow: hidden; }
.us-logo__mark--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 20. Hero deck v2: cards stacked BEHIND the front card (peeking above it) instead of
       sliding out to the side, so the back cards never look like they overlap by mistake. */
.us-stack__card--1 { transform: translate3d(-50%, -42%, 60px) rotateX(8deg) rotateY(-12deg); z-index: 3; opacity: 1; }
.us-stack__card--2 { transform: translate3d(-50%, -66%, 0) rotateX(8deg) rotateY(-12deg) scale(.92); z-index: 2; opacity: .9; filter: saturate(.85); }
.us-stack__card--3 { transform: translate3d(-50%, -88%, -60px) rotateX(8deg) rotateY(-12deg) scale(.84); z-index: 1; opacity: .75; filter: saturate(.7); }
.us-stack__card--2 > *, .us-stack__card--3 > * { visibility: hidden; } /* only their top edge shows: no half-hidden text */
.us-stack__card--2::before, .us-stack__card--3::before { content: ""; position: absolute; inset: 10px 16px auto; height: 8px; border-radius: 8px; background: var(--grad-soft); visibility: visible; }
.us-stack__shield { transform: translate3d(70%, -190%, 120px) rotate(10deg); }
.us-stack__note { top: auto; bottom: 6px; transform: translate3d(-50%, 0, 100px) rotate(-2deg); white-space: nowrap; }
@media (max-width: 560px) {
	.us-stack { height: 350px; }
	.us-stack__card--3 { display: block; }
	.us-stack__card--1 { transform: translate3d(-50%, -46%, 60px) rotateX(6deg) rotateY(-8deg); }
	.us-stack__card--2 { transform: translate3d(-50%, -68%, 0) rotateX(6deg) rotateY(-8deg) scale(.92); }
	.us-stack__card--3 { transform: translate3d(-50%, -88%, -60px) rotateX(6deg) rotateY(-8deg) scale(.84); }
	.us-stack__shield { transform: translate3d(85%, -175%, 120px) rotate(10deg) scale(.8); }
	.us-stack__note { transform: translate3d(-50%, 0, 100px) rotate(-2deg); bottom: 0; }
}

/* 21. 3D glossy platform icons (home tiles + new-ad picker) and richer tiles ---------------- */
.us-ptile__ico { position: relative; transform: perspective(300px) rotateX(10deg) rotateY(-12deg); transform-style: preserve-3d; isolation: isolate;
	box-shadow: 0 14px 22px -10px var(--p-shadow, rgba(0, 0, 0, .5)), 0 4px 0 -1px var(--p-edge, rgba(0, 0, 0, .25)), inset 0 2px 1px rgba(255, 255, 255, .55), inset 0 -6px 12px rgba(0, 0, 0, .22);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.us-ptile__ico::before { content: ""; position: absolute; inset: 3px 5px 50% 5px; border-radius: 12px 12px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); z-index: -1; } /* glass highlight */
.us-ptile__ico svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); stroke-width: 2.2; }
.us-ptile--instagram .us-ptile__ico { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 95%); --p-shadow: rgba(214, 36, 159, .7); --p-edge: #a01a77; }
.us-ptile--telegram .us-ptile__ico { background: linear-gradient(160deg, #5fd0ff, #229ed9 55%, #1677b3); --p-shadow: rgba(34, 158, 217, .7); --p-edge: #11679b; }
.us-ptile--youtube .us-ptile__ico { background: linear-gradient(160deg, #ff6a5c, #ff0000 55%, #b30000); --p-shadow: rgba(255, 0, 0, .55); --p-edge: #8f0000; }
.us-ptile--tiktok .us-ptile__ico { background: linear-gradient(160deg, #3a3a3a, #111 60%, #000); --p-shadow: rgba(0, 0, 0, .7); --p-edge: #000; }
.us-ptile--tiktok .us-ptile__ico svg { filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }
.us-ptile:hover .us-ptile__ico, .us-platform-pick label:hover .us-ptile__ico, .us-platform-pick label:has(input:checked) .us-ptile__ico { transform: perspective(300px) rotateX(0) rotateY(0) translateY(-4px) scale(1.06); }

/* Home tiles: soft colored glow + arrow, icon on top on phones. */
.us-ptile { --p-glow: rgba(14, 167, 114, .18); background: radial-gradient(180px 120px at 85% 0, var(--p-glow), transparent 70%), var(--card); }
.us-ptile--instagram { --p-glow: rgba(214, 36, 159, .16); } .us-ptile--telegram { --p-glow: rgba(34, 158, 217, .18); }
.us-ptile--youtube { --p-glow: rgba(255, 0, 0, .13); } .us-ptile--tiktok { --p-glow: rgba(37, 244, 238, .14); }
.us-ptile::after { content: "→"; position: absolute; inset-inline-end: 16px; bottom: 14px; font-weight: 800; color: var(--ink-3); transition: transform .25s, color .25s; }
.us-ptile:hover::after { transform: translateX(4px); color: var(--brand-600); }
.us-ptile span span { white-space: nowrap; }
@media (max-width: 560px) {
	.us-ptile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 14px 18px; }
	.us-ptile__ico { width: 52px; height: 52px; }
	.us-ptile b { font-size: 1rem; } .us-ptile span span { font-size: 12px; }
}

/* 22. Footer columns: icon headings everywhere; glass cards with link pills on phones ---------- */
.us-footer { position: relative; overflow: hidden; }
.us-footer::before { content: ""; position: absolute; inset: -40% -10% auto; height: 360px; background: radial-gradient(closest-side, rgba(14, 167, 114, .12), transparent), radial-gradient(closest-side at 80% 50%, rgba(99, 102, 241, .1), transparent); pointer-events: none; }
.us-footer h3 { display: flex; align-items: center; gap: 8px; }
.us-footer__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: var(--grad); box-shadow: 0 8px 16px -8px rgba(14, 167, 114, .8), inset 0 1px 0 rgba(255, 255, 255, .4); transform: rotate(-6deg); }
.us-footer__col--user .us-footer__ico { background: linear-gradient(145deg, #818cf8, #6366f1); box-shadow: 0 8px 16px -8px rgba(99, 102, 241, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.us-footer__col--shield .us-footer__ico { background: linear-gradient(145deg, #fbbf24, #f59e0b); box-shadow: 0 8px 16px -8px rgba(245, 158, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.us-footer li a { transition: color .2s, padding .2s; } .us-footer li a:hover { color: var(--brand-600); padding-inline-start: 4px; }
@media (max-width: 560px) {
	.us-footer__grid { gap: 14px; }
	.us-footer__col { position: relative; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--card-2) 70%, transparent), var(--card)); box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .5); }
	.us-footer__col::after { content: ""; position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 4px 4px; background: var(--grad); opacity: .8; }
	.us-footer__col--user::after { background: linear-gradient(90deg, #818cf8, #6366f1); } .us-footer__col--shield::after { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
	.us-footer__col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.us-footer__col li { margin: 0; }
	.us-footer__col li a { display: flex; align-items: center; min-height: 42px; height: 100%; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .35); }
	.us-footer__col li a:active { transform: scale(.97); }
}

/* 23. Small touches: glossy primary buttons with a passing shine, section titles with an accent,
       3D press on the bottom bar's add button. All respect reduced-motion. */
.us-grid--2col { grid-template-columns: 1fr 1fr; }
html, body { overflow-x: clip; } /* safety net: nothing may widen the page on phones (html too: some Android browsers ignore body) */
/* Account panel on phones: use the full screen width (thin 10px gutters), never let one long
   word/number/link widen a card, and keep both grid columns equal. */
@media (max-width: 560px) {
	.us-wrap:has(> .us-panel) { width: calc(100% - 20px); }
	.us-grid.us-grid--2col { grid-template-columns: minmax(0, 1fr); }
	.us-panel, .us-panel__main, .us-panel__side { width: 100%; max-width: 100%; margin-inline: 0; }
	.us-panel__main { overflow-wrap: anywhere; }
	.us-panel__main .us-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.us-panel__main .us-stat { padding: 14px 10px; }
	.us-panel__main .us-grid { grid-template-columns: minmax(0, 1fr); }
}
.us-btn--primary { position: relative; overflow: hidden; background: linear-gradient(160deg, #19c288, var(--brand) 55%, #0a8a5e); box-shadow: 0 12px 26px -12px rgba(14, 167, 114, .9), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.us-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(0) skewX(-20deg); animation: us-btnshine 4.5s ease-in-out infinite; pointer-events: none; }
/* Same path as before (left -60% → 130% of the button = 475% of the 40%-wide shine), via transform. */
@keyframes us-btnshine { 0%, 70% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
.us-btn:active { transform: translateY(1px) scale(.99); }
.us-section__head h2 { position: relative; padding-bottom: 8px; }
.us-section__head h2::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 46px; height: 4px; border-radius: 4px; background: var(--grad); }
@media (prefers-reduced-motion: reduce) { .us-btn--primary::after { animation: none; display: none; } }

/* 24. Platform icons v2 — clean "app icon" look (replaces the glossy v1 of section 21):
       solid white glyph, brand gradient squircle, thin light rim, coloured soft shadow.
       Flat and crisp at rest; lifts slightly on hover/selection. */
.us-ptile__ico { transform: none; border-radius: 30%; box-shadow: 0 10px 20px -10px var(--p-shadow, rgba(0, 0, 0, .45)), inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.us-ptile__ico::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 48%); z-index: 0; }
.us-ptile__ico svg { position: relative; z-index: 1; filter: none; }
.us-ptile--instagram .us-ptile__ico { background: linear-gradient(225deg, #4f5bd5 0%, #962fbf 28%, #d62976 55%, #fa7e1e 80%, #feda75 100%); }
.us-ptile--telegram .us-ptile__ico { background: linear-gradient(200deg, #37bbfe 0%, #1e96d1 100%); }
.us-ptile--telegram .us-ptile__ico svg { transform: translateX(-1px); }
.us-ptile--youtube .us-ptile__ico { background: linear-gradient(200deg, #ff3d3d 0%, #e00000 100%); }
.us-ptile--tiktok .us-ptile__ico { background: linear-gradient(200deg, #2b2b2b 0%, #050505 100%); }
.us-ptile--tiktok .us-ptile__ico svg { filter: drop-shadow(-1.4px -1.2px 0 #25f4ee) drop-shadow(1.4px 1.2px 0 #fe2c55); }
.us-ptile:hover .us-ptile__ico, .us-platform-pick label:hover .us-ptile__ico, .us-platform-pick label:has(input:checked) .us-ptile__ico { transform: translateY(-3px); box-shadow: 0 16px 26px -12px var(--p-shadow, rgba(0, 0, 0, .5)), inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .4); }
.us-ptile .us-ptile__ico, .us-platform-pick .us-ptile__ico { color: #fff !important; }
.us-ptile b { color: var(--ink); }

/* 25. Slim sticky buy bar on phones: one row — price | "Buy safely" | "Make an offer". */
.us-ad__mactions { display: none; }
@media (max-width: 900px) {
	.us-ad__mactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
	.us-buybox > .us-card:first-child .us-card__body { display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px) * 0); }
	.us-buybox > .us-card:first-child .us-share, .us-buybox > .us-card:first-child .us-btn--ask, .us-buybox > .us-card:first-child .us-btn--ghost { display: none !important; }
	.us-buybox > .us-card:first-child .us-buybox__row { display: contents; }
	.us-buybox__price { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; margin-inline-start: auto; order: 3; line-height: 1.2; min-width: 0; }
	.us-buybox__price b { font-size: 1.05rem; white-space: nowrap; } .us-buybox__price .us-muted { font-size: 11px; }
	.us-buybox > .us-card:first-child .us-btn--primary, .us-buybox > .us-card:first-child .us-btn--dark { order: 1; flex: 0 1 auto; padding: 10px 14px; font-size: 14px; min-height: 0; white-space: nowrap; }
	.us-buybox > .us-card:first-child .us-btn--offer { order: 2; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
	.us-buybox > .us-card:first-child { border-radius: 18px 18px 0 0; }
}

/* 26. Footer licences row. */
.us-footer__seals { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.us-footer__sealcode { display: flex; gap: 10px; align-items: center; }
.us-footer__sealcode img { max-height: 90px; width: auto; background: #fff; border-radius: 12px; padding: 4px; }
.us-footer__seal { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; padding-inline-end: 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--card-2), var(--card)); color: var(--ink); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .5); transition: transform .2s, box-shadow .2s; }
.us-footer__seal:hover { transform: translateY(-2px); color: var(--ink); box-shadow: 0 16px 30px -18px rgba(14, 167, 114, .6); }
.us-footer__seal b { display: block; font-size: 14px; } .us-footer__seal small { color: var(--ink-3); font-size: 12px; }
.us-footer__seal-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #34d399, #059669); box-shadow: 0 8px 16px -8px rgba(5, 150, 105, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* 27. Ad video + its upload field. */
.us-ad__video { margin: 18px 0; padding: 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.us-ad__video video { display: block; width: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 12px; background: #000; }
.us-ad__video figcaption { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.us-vupload { margin-top: 18px; }
.us-vupload__box { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--card-2); cursor: pointer; overflow: hidden; color: var(--ink-2); font-weight: 600; }
.us-vupload__box:hover { border-color: var(--brand); }
.us-vupload__box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.us-vupload [data-us-video-rm] { margin-top: 8px; }

/* 24. Seller page: "buy safely from this seller" block (same step cards as the home page). */
.us-sellerhow { margin-top: 36px; padding: 26px 22px 20px; border-radius: calc(var(--radius) + 6px); background: var(--grad-soft), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.us-sellerhow .us-section__head { margin-bottom: 26px; }
.us-sellerhow .us-section__head h2 { font-size: 1.25rem; }
.us-sellerhow .us-section__head p { color: var(--ink-2); margin: 0; }
.us-sellerhow__link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; font-size: 13px; color: var(--ink-3); }
.us-sellerhow__link .us-i { color: var(--brand); }
.us-sellerhow__link code { overflow-wrap: anywhere; }
@media (max-width: 560px) {
	.us-sellerhow { padding: 22px 14px 16px; }
	.us-sellerhow .us-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.us-sellerhow .us-step { padding: 18px 16px 14px; }
	.us-sellerhow .us-step .us-i { position: absolute; top: 14px; inset-inline-end: 16px; margin: 0; width: 22px; height: 22px; }
	.us-sellerhow .us-step h3 { margin: 4px 0 4px; }
}

/* Panel: an ad the seller deleted (kept on the site as "sold"): faded, view only. */
.us-row--off { opacity: .55; filter: grayscale(.6); }
.us-row--off:hover { opacity: .8; }
.us-wizard__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: .5em; }

/* 25. Membership terms (sign-up step and the last step of the ad form): read, then tick. */
.usg-terms, .us-terms { margin: 12px 0; }
.usg-terms > strong, .us-terms > strong { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.usg-terms__text, .us-terms__text { max-height: 230px; overflow: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; line-height: 2; color: var(--ink-2); overscroll-behavior: contain; }
.usg-terms__text p, .us-terms__text p { margin: 0 0 10px; }
.usg-terms__text strong, .us-terms__text strong { color: var(--ink); }
.usg-terms__ok { display: flex !important; gap: 8px; align-items: flex-start; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; }
.usg-tgl .usg-terms__ok input { width: 18px !important; height: 18px !important; padding: 0 !important; margin-top: 4px; flex: 0 0 auto; accent-color: var(--brand); }
.us-price-words { font-weight: 700; color: var(--brand-600); }
html.is-dark .us-price-words { color: #5eead4; }

/* 26. Reading experience for articles and content pages (blog posts + plain pages).
   Pure styling: the text is never touched. Scoped so ads (products), the panel, the wizard and
   the landing pages that bring their own design (.us-lp, .sa) keep their look. Works with dark mode. */
body.single-post .us-prose:not(:has(.us-lp-hero, .sa)),
body.page:not(.page-template) .us-prose:not(:has(.us-lp-hero, .sa)) {
	--pc1: #14b8a6; --pc2: #3b82f6;
	padding: 22px 22px 26px; font-size: 16px; line-height: 2.1; overflow-wrap: anywhere; hyphens: auto;
}
/* progress bar: fills while scrolling the article (browsers without scroll timelines simply skip it) */
@supports (animation-timeline: scroll()) {
	body.single-post::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 9999; transform-origin: 100% 50%; transform: scaleX(0);
		background: linear-gradient(270deg, #14b8a6, #3b82f6, #8b5cf6, #ec4899); animation: us-read linear both; animation-timeline: scroll(root); }
}
@keyframes us-read { to { transform: scaleX(1); } }
@keyframes us-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* text */
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) p { margin: 0 0 1.15em; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) > p:first-of-type,
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) > article > p:first-of-type { font-size: 1.07em; padding: 14px 16px; border-radius: 16px; border-inline-start: 5px solid #14b8a6; background-image: linear-gradient(color-mix(in srgb, #14b8a6 9%, transparent), color-mix(in srgb, #14b8a6 9%, transparent)); }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) strong { font-weight: 800; background: linear-gradient(transparent 62%, rgba(45, 212, 191, .32) 62%); padding: 0 2px; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) a:not([class]) { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(20, 184, 166, .45); text-underline-offset: 5px; text-decoration-thickness: 2px; transition: text-decoration-color .2s, color .2s; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) a:not([class]):hover { text-decoration-color: currentColor; }

/* headings: colored banners that rotate through six palettes */
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:not(.us-lp *) {
	display: flex; align-items: center; gap: 10px; margin: 2em 0 .8em; padding: 12px 16px; border-radius: 18px; font-size: 1.15rem; line-height: 1.7; font-weight: 800;
	color: #fff !important; background: linear-gradient(120deg, var(--pc1), var(--pc2)) !important; box-shadow: 0 14px 28px -14px var(--pc1); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	scroll-margin-top: 80px;
}
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:not(.us-lp *)::before { content: "✦"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:nth-of-type(6n+2):not(.us-lp *) { --pc1: #8b5cf6; --pc2: #ec4899; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:nth-of-type(6n+3):not(.us-lp *) { --pc1: #f59e0b; --pc2: #ef4444; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:nth-of-type(6n+4):not(.us-lp *) { --pc1: #10b981; --pc2: #06b6d4; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:nth-of-type(6n+5):not(.us-lp *) { --pc1: #f43f5e; --pc2: #8b5cf6; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:nth-of-type(6n+6):not(.us-lp *) { --pc1: #0ea5e9; --pc2: #6366f1; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h3:not(.us-lp *) { margin: 1.6em 0 .6em; padding: 8px 14px; border-radius: 12px; font-size: 1.05rem; line-height: 1.8; border-inline-start: 5px solid #8b5cf6; background-image: linear-gradient(color-mix(in srgb, #8b5cf6 10%, transparent), color-mix(in srgb, #8b5cf6 10%, transparent)); }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h4:not(.us-lp *) { margin: 1.3em 0 .5em; font-size: 1rem; color: var(--brand-600); }

/* lists */
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(ul, ol):not(.us-lp *):not(.us-toc__list) { list-style: none; padding: 0; margin: 0 0 1.3em; counter-reset: usli; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(ul, ol):not(.us-lp *):not(.us-toc__list) > li { position: relative; margin: 0 0 8px; padding: 10px 14px; padding-inline-start: 46px; border-radius: 14px; background-image: linear-gradient(color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 6%, transparent)); counter-increment: usli; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) ul:not(.us-lp *):not(.us-toc__list) > li::before { content: "✓"; position: absolute; inset-inline-start: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #14b8a6, #3b82f6); }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) ol:not(.us-lp *):not(.us-toc__list) > li::before { content: counter(usli); position: absolute; inset-inline-start: 10px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) li:not(.us-lp *) > :is(ul, ol) { margin: 8px 0 0; }

/* quotes become callouts */
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) blockquote:not(.us-lp *) { position: relative; margin: 1.4em 0; padding: 16px; padding-inline-start: 52px; border-radius: 16px; border-inline-start: 5px solid #f59e0b; background-image: linear-gradient(color-mix(in srgb, #f59e0b 12%, transparent), color-mix(in srgb, #f59e0b 12%, transparent)); }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) blockquote:not(.us-lp *)::before { content: "💡"; position: absolute; inset-inline-start: 14px; top: 12px; font-size: 24px; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) blockquote:not(.us-lp *) p:last-child { margin-bottom: 0; }

/* tables scroll sideways on phones instead of squeezing the text */
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) table:not(.us-lp *) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: separate; border-spacing: 0; border-radius: 16px; border: 1px solid var(--line); margin: 0 0 1.4em; font-size: .94em; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) table:not(.us-lp *) :is(th, td) { border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: start; min-width: 110px; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) table:not(.us-lp *) th { font-weight: 800; background: linear-gradient(120deg, rgba(20, 184, 166, .22), rgba(139, 92, 246, .22)) !important; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) table:not(.us-lp *) tr:nth-child(even) td { background-image: linear-gradient(color-mix(in srgb, currentColor 5%, transparent), color-mix(in srgb, currentColor 5%, transparent)); }

/* images, video, code */
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) img { max-width: 100%; height: auto; border-radius: 18px; box-shadow: 0 16px 36px -18px rgba(15, 23, 42, .55); margin: 6px 0; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(.alignnone, .aligncenter) { display: block; margin-inline: auto; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(figure, .wp-caption) { max-width: 100%; margin: 1.2em auto; text-align: center; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(figcaption, .wp-caption-text) { font-size: .85em; opacity: .75; margin-top: 6px; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(iframe, video, embed, object) { max-width: 100%; border-radius: 16px; border: 0; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) iframe[src*="youtube"], :is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) iframe[src*="aparat"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) pre { overflow-x: auto; padding: 14px; border-radius: 14px; direction: ltr; text-align: left; background: #0f172a !important; color: #e2e8f0 !important; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) hr { border: 0; height: 3px; border-radius: 3px; margin: 2em 0; background: linear-gradient(90deg, transparent, #14b8a6, #8b5cf6, transparent); opacity: .7; }

/* table of contents (added to long articles) */
.us-toc { margin: 0 0 1.8em; padding: 16px 18px; border-radius: 20px; border: 1px solid color-mix(in srgb, #8b5cf6 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #14b8a6 12%, transparent), color-mix(in srgb, #8b5cf6 12%, transparent)); }
.us-toc > strong { display: inline-block; margin-bottom: 10px; padding: 3px 14px; border-radius: 99px; color: #fff !important; background: linear-gradient(120deg, #14b8a6, #3b82f6) !important; font-size: .95rem; }
.us-toc .us-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: ustoc; display: grid; gap: 6px; }
.us-toc .us-toc__list li { counter-increment: ustoc; padding: 0; margin: 0; background: none; }
.us-toc .us-toc__list li::before { content: none; }
.us-toc .us-toc__list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: .95em; line-height: 1.8; text-decoration: none !important; font-weight: 600; }
.us-toc .us-toc__list a::before { content: counter(ustoc); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.us-toc .us-toc__list a:hover { background-image: linear-gradient(color-mix(in srgb, #14b8a6 14%, transparent), color-mix(in srgb, #14b8a6 14%, transparent)); }

/* reveal on scroll (only where the browser supports scroll timelines) */
@supports (animation-timeline: view()) {
	:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(h2, table, blockquote, .us-toc) { animation: us-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
/* dark mode: the generic reset above strips backgrounds, so the accents are restated */
html.is-dark body.single-post .us-prose:not(:has(.us-lp-hero, .sa)) h2:not(.us-lp *) { color: #fff !important; }
html.is-dark .us-prose .us-toc > strong { color: #fff !important; }
html.is-dark .us-prose li::before { color: #fff !important; }

@media (max-width: 600px) {
	body.single-post .us-prose:not(:has(.us-lp-hero, .sa)), body.page:not(.page-template) .us-prose:not(:has(.us-lp-hero, .sa)) { padding: 16px 14px 20px; line-height: 2.05; }
	:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:not(.us-lp *) { font-size: 1.05rem; padding: 10px 12px; border-radius: 16px; }
	:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2:not(.us-lp *)::before { width: 30px; height: 30px; }
	:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) :is(ul, ol):not(.us-lp *):not(.us-toc__list) > li { padding-inline-start: 44px; }
}
@media (prefers-reduced-motion: reduce) { body.single-post::before { animation: none; transform: none; display: none; } .us-prose * { animation: none !important; } }

/* 28. Landing pages (.us-lp): theme-mode polish, dark mode, mobile */
.us-prose .us-lp { max-width: 100%; overflow-wrap: anywhere; }
.us-prose .us-lp-hero { padding: clamp(20px, 5vw, 44px); }
.us-prose .us-lp-hero h2 { background: none !important; box-shadow: none !important; padding: 0 !important; text-shadow: none; }
.us-prose .us-lp-badges > * { display: inline-flex; align-items: center; }
.us-prose .us-lp-steps li, .us-prose .us-lp-card, .us-prose .us-lp-faq details { overflow-wrap: anywhere; }
.us-prose .us-lp-scroll { max-width: 100%; border-radius: 16px; }
.us-prose .us-lp-scroll table { min-width: 520px; }
.us-prose .us-lp ul:not(.us-lp-steps) { padding-inline-start: 22px; }
.us-prose .us-lp-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
html.is-dark .us-prose .us-lp { --lp-ink: #e5e7eb; --lp-muted: #a8b3c7; --lp-brand: #c4b5fd; }
html.is-dark .us-prose .us-lp h2 { color: #c4b5fd !important; }
html.is-dark .us-prose .us-lp h3 { color: #f9a8d4 !important; }
html.is-dark .us-prose .us-lp-hero h2, html.is-dark .us-prose .us-lp-hero p, html.is-dark .us-prose .us-lp-hero .us-lp-badges * { color: #fff !important; }
html.is-dark .us-prose .us-lp-btn--light { color: #5b21b6 !important; background-color: #fff !important; }
html.is-dark .us-prose .us-lp-btn--brand { color: #fff !important; }
html.is-dark .us-prose .us-lp :is(.us-lp-tldr, .us-lp-steps li, .us-lp-card, .us-lp-faq details, .us-lp-final) { background-image: linear-gradient(rgba(139, 92, 246, .14), rgba(139, 92, 246, .08)); border-color: rgba(167, 139, 250, .35); }
html.is-dark .us-prose .us-lp-note--ok { background-image: linear-gradient(rgba(34, 197, 94, .16), rgba(34, 197, 94, .16)); border-color: rgba(74, 222, 128, .4); }
html.is-dark .us-prose .us-lp-note--warn { background-image: linear-gradient(rgba(245, 158, 11, .16), rgba(245, 158, 11, .16)); border-color: rgba(251, 191, 36, .4); }
html.is-dark .us-prose .us-lp-note--info { background-image: linear-gradient(rgba(59, 130, 246, .16), rgba(59, 130, 246, .16)); border-color: rgba(96, 165, 250, .4); }
html.is-dark .us-prose .us-lp-table th { background-image: linear-gradient(rgba(139, 92, 246, .25), rgba(139, 92, 246, .25)); color: #ddd6fe !important; }
html.is-dark .us-prose .us-lp-table, html.is-dark .us-prose .us-lp-table :is(th, td) { border-color: rgba(148, 163, 184, .25); }
html.is-dark .us-prose .us-lp-faq summary::after { color: #f9a8d4; }
html.is-dark .us-prose .us-lp-steps strong, html.is-dark .us-prose .us-lp-card b { color: #f1f5f9 !important; }
@media (max-width: 640px) {
	.us-prose .us-lp-hero { border-radius: 20px; }
	.us-prose .us-lp-badges { gap: 6px; }
	.us-prose .us-lp-badges > * { font-size: 12.5px; padding: 4px 10px; }
	.us-prose .us-lp-cta { flex-direction: column; }
	.us-prose .us-lp-btn { width: 100%; justify-content: center; }
	.us-prose .us-lp h2 { margin-top: 32px !important; }
	.us-prose .us-lp-steps li { padding-inline-start: 56px; }
	.us-prose .us-lp-steps li::before { width: 32px; height: 32px; inset-inline-start: 12px; }
}

/* 29. Guide + FAQ under the ads list (SEO/GEO target page for "buy Instagram page") */
.us-guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; margin: 32px 0 8px; }
.us-guide > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.us-guide h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.us-guide h2::before { content: ""; width: 8px; height: 26px; border-radius: 6px; background: linear-gradient(180deg, var(--brand-500), #8b5cf6); }
.us-guide p { margin: 0 0 12px; line-height: 2; }
.us-guide__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.us-guide__points li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.9; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand-500) 7%, transparent); }
.us-guide__points li span { flex: 0 0 auto; }
.us-guide__points a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.us-guide__faq details { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; margin: 0 0 8px; }
.us-guide__faq details[open] { background: color-mix(in srgb, var(--brand-500) 5%, transparent); }
.us-guide__faq summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 800; display: flex; justify-content: space-between; gap: 10px; }
.us-guide__faq summary::-webkit-details-marker { display: none; }
.us-guide__faq summary::after { content: "+"; color: var(--brand-500); font-size: 22px; line-height: 1; }
.us-guide__faq details[open] summary::after { content: "–"; }
.us-guide__faq details p { margin: 0 0 12px; color: var(--ink-2); }
.us-guide__cta { margin: 14px 0 0 !important; }
@media (max-width: 860px) { .us-guide { grid-template-columns: 1fr; } .us-guide > div { padding: 16px; } }

/* ------------------------------------------------------------------ */
/* 30. Sold pages archive (/sold-pages/)                               */
/* ------------------------------------------------------------------ */
.us-sold__intro { margin-bottom: 28px; }
.us-sold__month { font-size: 1.15rem; margin: 30px 0 14px; padding-inline-start: 12px; border-inline-start: 4px solid var(--brand, #2563eb); }
.us-sold__table-wrap { overflow-x: auto; }
.us-sold__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.us-sold__table th, .us-sold__table td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); white-space: nowrap; }
.us-sold__table th { color: var(--ink-3); font-weight: 600; }
.us-sold__table tbody tr:first-child td { font-weight: 700; }
.us-sold .us-adcard.is-sold { opacity: 1; }
.us-sold__cta { margin-top: 32px; text-align: center; }
.us-sold__cta .us-btn { margin: 6px 4px 0; }
.us-sold-link { white-space: nowrap; }
@media (max-width: 640px) {
	.us-sold .us-section__head { flex-wrap: wrap; align-items: start; }
	.us-section__head .us-sold-link { order: 3; }
}

/* ------------------------------------------------------------------ */
/* 31. Sold ad → Telegram channel box (+ sticky bar on phones)         */
/* ------------------------------------------------------------------ */
.us-chbox { position: relative; overflow: hidden; display: flex; gap: 22px; align-items: center; margin: 18px 0 26px; padding: 26px 26px; border-radius: 22px; color: #fff;
	background: linear-gradient(120deg, #0b5ed7 0%, #229ed9 55%, #0ea772 120%);
	box-shadow: 0 24px 60px -24px rgba(34, 158, 217, .75); isolation: isolate; }
.us-chbox::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1;
	background: conic-gradient(from var(--us-ch-a, 0deg), #fff 0deg, transparent 60deg, transparent 300deg, #fff 360deg); opacity: .55;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.us-chbox__glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); inset-inline-end: -90px; top: -120px; z-index: -1; animation: us-ch-pulse 3.2s ease-in-out infinite; }
.us-chbox__plane { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); animation: us-ch-float 3s ease-in-out infinite; }
.us-chbox__plane svg { stroke: #fff; }
.us-chbox__body { min-width: 0; }
.us-chbox__live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,.18); padding: 5px 12px; border-radius: 999px; }
.us-chbox__live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #ff3b5c; }
.us-chbox__live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b5c; animation: us-ch-dot 1.4s ease-out infinite; }
.us-chbox h2 { color: #fff; font-size: clamp(19px, 2.6vw, 25px); line-height: 1.5; margin: 12px 0 8px; }
.us-chbox p { color: rgba(255,255,255,.93); margin: 0 0 12px; line-height: 1.9; }
.us-chbox__ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; padding: 0; font-size: 14px; font-weight: 600; }
.us-chbox__ticks li::before { content: "✓"; margin-inline-end: 6px; font-weight: 900; }
.us-chbox__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; background: #fff; color: #0b5ed7; font-weight: 800; font-size: 16px; text-decoration: none;
	box-shadow: 0 12px 26px -10px rgba(0,0,0,.45); transition: transform .2s, box-shadow .2s; animation: us-ch-nudge 4s ease-in-out infinite; }
.us-chbox__btn svg { stroke: #229ed9; }
.us-chbox__btn:hover { transform: translateY(-2px) scale(1.02); color: #0b5ed7; box-shadow: 0 18px 32px -12px rgba(0,0,0,.5); }
.us-chbar { display: none; }
@media (max-width: 760px) {
	.us-chbox { flex-direction: column; text-align: center; padding: 24px 18px; }
	.us-chbox__ticks { justify-content: center; }
	.us-chbox__btn { width: 100%; justify-content: center; }
	/* Sticky bar above the bottom tab bar, so the channel is visible while scrolling the sold ad. */
	.us-chbar { display: flex; align-items: center; gap: 10px; position: fixed; inset-inline: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 69; padding: 11px 14px; border-radius: 14px;
		background: linear-gradient(120deg, #0b5ed7, #229ed9); color: #fff; font-size: 13px; line-height: 1.6; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(11,94,215,.8); animation: us-ch-rise .6s ease-out both, us-ch-bob 3.5s ease-in-out 1s infinite; }
	.us-chbar svg { stroke: #fff; flex: 0 0 auto; }
	.us-chbar b { color: #fff; }
	body:has(.us-chbar) .us-footer { padding-bottom: 150px; }
}
@keyframes us-ch-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes us-ch-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes us-ch-dot { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(3); opacity: 0; } }
@keyframes us-ch-nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateX(-4px); } 96% { transform: translateX(4px); } }
@keyframes us-ch-rise { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes us-ch-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ------------------------------------------------------------------ */
/* 32. Blog: likes / views service box (after the first paragraph)     */
/* ------------------------------------------------------------------ */
.us-srvbox { position: relative; overflow: hidden; margin: 26px 0 30px; padding: 24px 22px 20px; border-radius: 22px; color: #fff; text-align: center; isolation: isolate;
	background: radial-gradient(120% 140% at 100% 0%, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%); box-shadow: 0 26px 60px -26px rgba(238, 42, 123, .8); }
.us-srvbox::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%); transform: translateX(-120%); animation: us-srv-shine 5s ease-in-out infinite; }
.us-srvbox__orbs i { position: absolute; z-index: -1; font-style: normal; font-size: 22px; opacity: .55; animation: us-srv-up 7s linear infinite; bottom: -30px; }
.us-srvbox__orbs i:nth-child(1) { inset-inline-start: 8%; animation-delay: 0s; }
.us-srvbox__orbs i:nth-child(2) { inset-inline-start: 26%; animation-delay: 1.6s; font-size: 16px; }
.us-srvbox__orbs i:nth-child(3) { inset-inline-start: 52%; animation-delay: 3.1s; }
.us-srvbox__orbs i:nth-child(4) { inset-inline-start: 74%; animation-delay: 4.4s; font-size: 18px; }
.us-srvbox__orbs i:nth-child(5) { inset-inline-start: 90%; animation-delay: 5.6s; }
.us-srvbox__tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .3px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.us-srvbox__title { display: block; font-weight: 800; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.6; margin: 10px 0 6px; color: #fff; }
.us-srvbox .us-srvbox__text { color: rgba(255,255,255,.95); margin: 0 auto 14px; max-width: 560px; line-height: 1.95; }
.us-srvbox__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.us-srvbox__chips span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); }
.us-prose .us-srvbox p.us-srvbox__text { color: rgba(255,255,255,.95); margin: 0 auto 14px; }
.us-srvbox__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 0; isolation: isolate; }
.us-srvbox__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 170px; padding: 13px 20px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #fff !important; text-decoration: none !important;
	box-shadow: 0 12px 24px -10px rgba(0,0,0,.45); transition: transform .2s, filter .2s; }
.us-srvbox__btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.us-srvbox__btn--wa { position: relative; background: #15803d; }
.us-srvbox__btn--wa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #25d366; animation: us-srv-ping 2.6s ease-out infinite; }
.us-srvbox__btn--tg { background: #229ed9; }
.us-srvbox__btn--tg svg { stroke: #fff; }
.us-srvbox__phone { display: inline-block; margin-top: 12px; color: #fff !important; font-weight: 800; letter-spacing: 1px; text-decoration: none !important; opacity: .9; }
@keyframes us-srv-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes us-srv-up { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: .6; } 100% { transform: translateY(-260px) scale(1.2); opacity: 0; } }
@keyframes us-srv-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.18, 1.5); opacity: 0; } }
@media (max-width: 520px) { .us-srvbox__btn { flex: 1 1 100%; } }

/* ------------------------------------------------------------------ */
/* 33. "Safe deal by link" (/safe-link/)                              */
/* ------------------------------------------------------------------ */
.us-slink__hero { text-align: center; padding: 34px 18px 26px; margin: 6px 0 22px; border-radius: 26px; background: var(--grad-soft); border: 1px solid var(--line); }
.us-slink__hero h1 { font-size: clamp(22px, 3.4vw, 34px); line-height: 1.55; margin: 14px auto 10px; max-width: 760px; }
.us-slink__hero p { color: var(--ink-2); max-width: 680px; margin: 0 auto; line-height: 2; }
.us-slink__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--brand-200); color: var(--brand-600); font-weight: 800; font-size: 13px; }
.us-slink__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.us-slink__facts span { padding: 9px 16px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); }
.us-slink__facts b { color: var(--brand-600); font-size: 17px; margin-inline-end: 4px; }
.us-slink__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; align-items: start; }
.us-slink__side { display: grid; gap: 20px; }
.us-slink h2 { font-size: 19px; margin: 0 0 14px; }
.us-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.us-seg--3 { grid-template-columns: repeat(3, 1fr); }
.us-seg label { position: relative; cursor: pointer; }
.us-seg input { position: absolute; opacity: 0; pointer-events: none; }
.us-seg span { display: block; text-align: center; padding: 11px 8px; border-radius: 12px; border: 1.5px solid var(--line-2); font-weight: 700; color: var(--ink-2); transition: .15s; }
.us-seg input:checked + span { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); box-shadow: 0 0 0 3px rgba(14,167,114,.15); }
html.is-dark .us-seg input:checked + span { background: rgba(14,167,114,.15); }
.us-slink__quote { margin: 4px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--card-2); border: 1px dashed var(--line-2); display: grid; gap: 8px; }
.us-slink__quote div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.us-slink__quote b { color: var(--ink); }
.us-slink__lvl { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--violet); }
.us-slink__done { text-align: center; }
.us-slink__check { width: 64px; height: 64px; margin: 4px auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; animation: us-ch-pulse 2.4s ease-in-out infinite; }
.us-slink__check svg { stroke: #fff; }
.us-slink__link { display: flex; gap: 8px; margin: 14px 0; }
.us-slink__share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.us-btn--wa { background: #25d366; color: #fff; } .us-btn--wa:hover { background: #1eb457; color: #fff; }
.us-slink__steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.us-slink__steps li { display: flex; gap: 12px; align-items: flex-start; }
.us-slink__ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--brand-50); }
html.is-dark .us-slink__ico { background: rgba(14,167,114,.15); }
.us-slink__steps p { margin: 2px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.8; }
.us-slink__levels table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
.us-slink__levels th, .us-slink__levels td { padding: 8px; border-bottom: 1px solid var(--line); text-align: start; }
.us-slink__summary { max-width: 640px; margin: 0 auto 22px; }
.us-slink__summary dl { margin: 0 0 18px; display: grid; gap: 2px; }
.us-slink__summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.us-slink__summary dt { color: var(--ink-3); }
.us-slink__summary dd { margin: 0; font-weight: 700; }
.us-slink__summary .is-strong dd { color: var(--brand-600); font-size: 17px; }
.us-slink__go { width: 100%; justify-content: center; }
.us-slink__faq { margin-top: 26px; }
.us-slink--invite .us-slink__steps, .us-slink__hero--invite + .us-slink__summary + .us-slink__steps { max-width: 640px; margin: 0 auto; }
@media (max-width: 900px) { .us-slink__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.us-chbox, .us-chbox::before, .us-chbox__glow, .us-chbox__plane, .us-chbox__live i, .us-chbox__btn, .us-chbar,
	.us-srvbox::after, .us-srvbox__orbs i, .us-srvbox__btn--wa, .us-slink__check { animation: none !important; }
}

/* ------------------------------------------------------------------ */
/* 34. Blog: web design / SEO / app box (middle of the post)           */
/* ------------------------------------------------------------------ */
.us-bizbox { position: relative; overflow: hidden; margin: 30px 0 32px; border-radius: 24px; color: #e2e8f0; isolation: isolate;
	background: radial-gradient(90% 120% at 0% 0%, #1e3a8a 0%, transparent 60%), radial-gradient(80% 100% at 100% 100%, #0e7490 0%, transparent 55%), #0b1120;
	box-shadow: 0 30px 70px -30px rgba(14, 116, 144, .9), inset 0 0 0 1px rgba(148, 163, 184, .18); }
.us-bizbox__grid { position: absolute; inset: -28px 0 0 -28px; z-index: -1; opacity: .35;
	background-image: linear-gradient(rgba(148,163,184,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.14) 1px, transparent 1px); background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); animation: us-biz-grid 18s linear infinite; }
.us-bizbox__beam { position: absolute; top: -40%; left: -50%; width: 40%; height: 180%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(56,189,248,.18), transparent); transform: rotate(18deg); animation: us-biz-beam 6s ease-in-out infinite; }
.us-bizbox__in { padding: 28px 24px 24px; text-align: center; }
.us-bizbox__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #7dd3fc; background: rgba(56,189,248,.1); box-shadow: inset 0 0 0 1px rgba(56,189,248,.35); }
.us-bizbox__tag i { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: us-ch-pulse 2s ease-in-out infinite; }
.us-bizbox__title { display: block; margin: 14px auto 8px; max-width: 620px; font-weight: 900; font-size: clamp(20px, 2.8vw, 27px); line-height: 1.6;
	background: linear-gradient(90deg, #fff, #7dd3fc 50%, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.us-prose .us-bizbox p.us-bizbox__text, .us-bizbox__text { color: #cbd5e1; max-width: 620px; margin: 0 auto 18px; line-height: 2; }
.us-bizbox__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.us-bizbox__card { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: #f1f5f9; text-align: start;
	background: linear-gradient(160deg, rgba(30,41,59,.9), rgba(15,23,42,.9)); box-shadow: inset 0 0 0 1px rgba(148,163,184,.2); transition: transform .25s, box-shadow .25s; }
.us-bizbox__card b { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: rgba(56,189,248,.12); }
.us-bizbox__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(56,189,248,.6), 0 12px 24px -12px rgba(56,189,248,.6); }
.us-bizbox__cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 0; isolation: isolate; }
.us-bizbox__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.us-bizbox__btn--main { color: #0b1120 !important; background: linear-gradient(90deg, #22d3ee, #a5b4fc); position: relative; box-shadow: 0 14px 30px -12px rgba(34,211,238,.8); }
.us-bizbox__btn--main::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #22d3ee; animation: us-biz-glow 2.8s ease-out infinite; }
.us-bizbox__btn--tg { color: #e0f2fe !important; background: rgba(34,158,217,.18); box-shadow: inset 0 0 0 1px rgba(34,158,217,.6); }
.us-bizbox__btn--tg svg { stroke: #7dd3fc; }
.us-bizbox__btn:hover { transform: translateY(-2px); }
.us-bizbox__note { display: block; margin-top: 12px; font-size: 12.5px; color: #94a3b8; }
@keyframes us-biz-grid { to { transform: translate(28px, 28px); } }
@keyframes us-biz-beam { 0% { transform: translateX(0) rotate(18deg); } 60%, 100% { transform: translateX(425%) rotate(18deg); } }
@keyframes us-biz-glow { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.15, 1.5); opacity: 0; } }
@media (max-width: 640px) {
	.us-bizbox__in { padding: 24px 16px 20px; }
	.us-bizbox__cards { grid-template-columns: 1fr 1fr; }
	.us-bizbox__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .us-bizbox__grid, .us-bizbox__beam, .us-bizbox__tag i, .us-bizbox__btn--main { animation: none !important; } }

/* ------------------------------------------------------------------ */
/* 35. Price / guarantee collections                                   */
/* ------------------------------------------------------------------ */
/* "Budget" row on the ads list (scrolls sideways on phones) */
.us-budget { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
.us-budget::-webkit-scrollbar { display: none; }
.us-budget__label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-weight: 800; font-size: 13.5px; color: var(--ink-2); }
.us-budget a { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px dashed var(--line-2); text-decoration: none; transition: .15s; }
.us-budget a:hover { border-style: solid; border-color: var(--brand); color: var(--brand-600); }
.us-budget a.is-on { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
/* The guarantee chip stands out: it is a reason to buy here. */
.us-chips a.us-chip-hold { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.us-chips a.us-chip-hold.is-on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
html.is-dark .us-chips a.us-chip-hold:not(.is-on) { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); color: #fcd34d; }
/* Intro under the heading on collection pages */
.us-colintro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; border-radius: 16px; background: var(--brand-50); border: 1px solid var(--brand-200); }
.us-colintro p { margin: 0; line-height: 2; color: var(--ink-2); font-size: 14.5px; }
.us-colintro__ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.us-colintro__ico svg { stroke: #fff; }
.us-colintro--hold { background: #fffbeb; border-color: #fde68a; }
.us-colintro--hold .us-colintro__ico { background: #f59e0b; }
html.is-dark .us-colintro { background: rgba(14,167,114,.1); border-color: rgba(14,167,114,.35); }
html.is-dark .us-colintro--hold { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); }
/* Home: "Shop by budget" */
.us-cols__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.us-coltile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.us-coltile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--brand)); }
.us-coltile:hover { transform: translateY(-3px); border-color: var(--c, var(--brand)); box-shadow: var(--shadow-lg); color: var(--ink); }
.us-coltile__ico { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.us-coltile b { font-size: 17px; }
.us-coltile small { color: var(--ink-3); font-size: 13px; }
.us-coltile__go { position: absolute; inset-inline-end: 14px; bottom: 14px; color: var(--c, var(--brand)); font-weight: 900; transition: transform .2s; }
.us-coltile:hover .us-coltile__go { transform: translateX(4px); }
.us-coltile--under-100 { --c: #10b981; } .us-coltile--100-500 { --c: #3b82f6; } .us-coltile--500-2000 { --c: #8b5cf6; } .us-coltile--over-2000 { --c: #f59e0b; }
.us-coltile--hold { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; color: #fff; border: 0;
	background: linear-gradient(110deg, #b45309, #f59e0b 55%, #fbbf24); box-shadow: 0 20px 40px -22px rgba(245,158,11,.9); isolation: isolate; }
.us-coltile--hold::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-100%); animation: us-shine 6s ease-in-out infinite; }
.us-coltile--hold::before { display: none; }
.us-coltile--hold:hover { color: #fff; }
.us-coltile__shield { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.us-coltile__shield svg { stroke: #fff; }
.us-coltile__txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.us-coltile--hold b { font-size: 18px; }
.us-coltile--hold small { color: rgba(255,255,255,.92); font-size: 13.5px; line-height: 1.9; }
.us-coltile__count { flex: 0 0 auto; font-size: 26px; font-weight: 900; text-align: center; line-height: 1.1; }
.us-coltile__count small { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }
@media (max-width: 900px) { .us-cols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .us-coltile--hold { flex-wrap: wrap; } .us-coltile__count { width: 100%; text-align: start; } .us-coltile__count small { display: inline; } }
@media (prefers-reduced-motion: reduce) { .us-coltile--hold::after { animation: none; } }

/* ------------------------------------------------------------------ */
/* 36. H1 written inside an ad / article body (now an H2 for SEO): keeps the old H1 look */
/* ------------------------------------------------------------------ */
.us-prose h2.us-h1, :is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2.us-h1:not(.us-lp *) {
	display: block; font-size: clamp(1.6rem, 3.5vw, 2.4rem); padding: 0; border-radius: 0; color: inherit !important; background: none !important; box-shadow: none; text-shadow: none; }
:is(body.single-post, body.page:not(.page-template)) .us-prose:not(:has(.us-lp-hero, .sa)) h2.us-h1:not(.us-lp *)::before { content: none; display: none; }
html.is-dark body.single-post .us-prose:not(:has(.us-lp-hero, .sa)) h2.us-h1:not(.us-lp *) { color: inherit !important; }
/* Home intro heading (was an H1, now H2 — one H1 per page): exactly the old look. */
.us-seo-top .us-home-intro__title { font-size: 22px; line-height: 1.7; margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ */
/* 37. Blog: closing call to action (very end of each post)            */
/* ------------------------------------------------------------------ */
.us-endbox { position: relative; overflow: hidden; isolation: isolate; margin: 36px 0 12px; padding: 28px 22px 22px; border-radius: 26px; text-align: center;
	background: linear-gradient(150deg, #ecfdf5 0%, #ffffff 45%, #eef2ff 100%); border: 1px solid var(--brand-200); box-shadow: 0 30px 60px -34px rgba(14,167,114,.55); }
.us-endbox::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.us-endbox__glow { position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; top: -230px; inset-inline-start: 50%; margin-inline-start: -210px;
	background: radial-gradient(circle, rgba(14,167,114,.22), transparent 65%); animation: us-ch-pulse 5s ease-in-out infinite; }
.us-endbox__logo { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--grad);
	box-shadow: 0 16px 30px -12px rgba(14,167,114,.8); animation: us-end-float 4s ease-in-out infinite; }
.us-endbox__logo svg { stroke: #fff; }
.us-endbox__title { display: block; max-width: 640px; margin: 0 auto 10px; font-weight: 900; font-size: clamp(19px, 2.8vw, 26px); line-height: 1.6; color: var(--ink); }
.us-prose .us-endbox p.us-endbox__text, .us-endbox__text { max-width: 640px; margin: 0 auto 20px; color: var(--ink-2); line-height: 2; font-size: 15px; }
.us-endbox__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: start; }
.us-endbox__col { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.us-endbox__col:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.us-endbox__col--sell { border-top: 4px solid #f59e0b; }
.us-endbox__col--buy { border-top: 4px solid var(--brand); }
.us-endbox__ico { font-size: 28px; line-height: 1; }
.us-endbox__col b { font-size: 16.5px; color: var(--ink); }
.us-endbox__p { color: var(--ink-2); font-size: 14px; line-height: 1.95; flex: 1 1 auto; }
.us-endbox__btn { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 13px; font-weight: 800; font-size: 14.5px; color: #fff !important; text-decoration: none !important; transition: transform .2s, filter .2s; }
.us-endbox__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.us-endbox__btn--sell { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 12px 24px -12px rgba(217,119,6,.9); color: #1f1300 !important; }
.us-endbox__btn--buy { background: linear-gradient(160deg, #19c288, var(--brand) 55%, #0a8a5e); box-shadow: 0 12px 24px -12px rgba(14,167,114,.9); }
.us-endbox__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.us-endbox__trust span { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
html.is-dark .us-endbox { background: linear-gradient(150deg, rgba(14,167,114,.14), var(--card) 45%, rgba(99,102,241,.12)); border-color: rgba(14,167,114,.35); }
@keyframes us-end-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@media (max-width: 640px) {
	.us-endbox { padding: 24px 14px 18px; }
	.us-endbox__cols { grid-template-columns: 1fr; }
	.us-endbox__btn { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .us-endbox__glow, .us-endbox__logo { animation: none; } }


/* ------------------------------------------------------------------ */
/* 38. Dark-mode readability guard (audit of all 90 posts, Nov 2026)    */
/* ------------------------------------------------------------------ */
/* The theme's own boxes (end box, business box, services box) keep their designed colors: the
   blanket "old content" rules above no longer touch them (see :not() there). */

/* Plugin box "Buy a page safely / Sell safely" (.us-lp-promo): it had a white inner gradient that stayed white in dark mode, with light text on it. */
html.is-dark .us-prose .us-lp-promo { background-image: linear-gradient(rgba(139, 92, 246, .16), rgba(139, 92, 246, .08)), linear-gradient(var(--card), var(--card)), linear-gradient(135deg, #8b5cf6, #ec4899); background-clip: padding-box, padding-box, border-box; background-origin: padding-box, padding-box, border-box; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
html.is-dark .us-prose .us-lp-promo > b { color: #ddd6fe !important; }
html.is-dark .us-prose .us-lp-promo li, html.is-dark .us-prose .us-lp-promo .us-lp-steps li { color: #e5e7eb !important; }
html.is-dark .us-prose .us-lp-promo .us-lp-steps li { background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)); border-color: rgba(167, 139, 250, .4) !important; }
html.is-dark .us-prose .us-lp-promo .us-lp-btn--light { color: #5b21b6 !important; background-color: #fff !important; }
html.is-dark .us-prose .us-lp-promo .us-lp-btn--brand { color: #fff !important; background-image: linear-gradient(120deg, #7c3aed, #db2777); }

/* Links inside headings and the table of contents sit on a colored bar: keep the bar's text color, not the green link color. */
html.is-dark .us-prose :is(h1, h2, h3, h4) a, html.is-dark .us-prose .us-toc a { color: inherit !important; }

/* Hand-written boxes with a LIGHT inline gradient (class added by inc/dark-safety.php): a soft tint instead of a light slab. */
html.is-dark .us-prose .us-lightbg, html.is-dark .us-seo .us-lightbg { background-image: linear-gradient(rgba(148, 163, 184, .13), rgba(148, 163, 184, .13)) !important; }

/* QR-code tool: its gold button must keep dark text. */
html.is-dark .us-prose .uqr-btn-gold { color: #1a1200 !important; }

/* ------------------------------------------------------------------ */
/* 39. Image zoom (lightbox)                                           */
/* ------------------------------------------------------------------ */
.us-gallery__main img[data-us-main] { cursor: zoom-in; }
.us-gallery__zoom { position: absolute; z-index: 3; inset-block-end: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: #fff; background: rgba(15, 23, 42, .72); backdrop-filter: blur(6px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); cursor: pointer; transition: transform .2s, background .2s; }
.us-gallery__zoom:hover { transform: scale(1.05); background: rgba(15, 23, 42, .88); }
.us-gallery__zoom:focus-visible, .us-lb__btn:focus-visible, .us-lb__nav:focus-visible, .us-zoomable:focus-visible { outline: 3px solid #34d399; outline-offset: 2px; }
.us-prose img.us-zoomable { cursor: zoom-in; }
html.us-lb-open { overflow: hidden; }
.us-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(2, 6, 23, .94); display: flex; flex-direction: column; animation: us-lb-in .2s ease-out; }
.us-lb[hidden] { display: none; }
.us-lb__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); color: #e2e8f0; }
.us-lb__count { margin-inline-end: auto; font-size: 14px; font-weight: 700; }
.us-lb__btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; }
.us-lb__btn:hover { background: rgba(255, 255, 255, .22); }
.us-lb__stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pinch-zoom; padding: 0 8px max(12px, env(safe-area-inset-bottom)); }
.us-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; cursor: zoom-in; user-select: none; -webkit-user-select: none; transition: scale .25s ease, translate .05s linear; }
.us-lb.is-zoomed .us-lb__img { scale: 2.5; cursor: grab; touch-action: none; }
.us-lb.is-zoomed .us-lb__img:active { cursor: grabbing; }
.us-lb__nav { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; border: 0; font-size: 30px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.us-lb__nav--prev { inset-inline-start: 10px; } .us-lb__nav--next { inset-inline-end: 10px; }
.us-lb.is-single .us-lb__nav, .us-lb.is-zoomed .us-lb__nav { display: none; }
@keyframes us-lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .us-lb, .us-lb__img { animation: none; transition: none; } }

/* ------------------------------------------------------------------ */
/* 40. Phones: blog, posts and pages use the full width                */
/* ------------------------------------------------------------------ */
/* Ad pages already looked right; on posts/pages the side gutters (page 16px + card 22px + hand-made boxes)
   left a narrow, ragged column. Here the outer gutter is 6px and the card's padding 12px. */
@media (max-width: 640px) {
	body:is(.single-post, .page:not(.page-template), .blog, .category, .tag, .search, .author, .date) .us-wrap { width: calc(100% - 12px); }
	body.single-post .us-prose, body.page:not(.page-template) .us-prose { padding: 16px 12px 20px !important; border-radius: 16px; margin-block: 10px; }
	body:is(.single-post, .page:not(.page-template)) .us-prose .us-lp-hero { padding: 22px 14px; border-radius: 18px; }
	body:is(.single-post, .page:not(.page-template)) .us-prose .us-lp-steps li { padding: 14px 12px; padding-inline-start: 54px; }
	/* Hand-written boxes inside old posts carry their own side padding (often 20–30px): trim it on phones. */
	.us-prose :is(div, section, article, aside, blockquote)[style*="padding"] { padding-inline: 12px !important; }
	.us-prose :is(div, section)[style*="max-width"] { margin-inline: 0 !important; }
	body:is(.blog, .category, .tag, .search, .author, .date) .us-grid { gap: 12px; }
	.us-gallery__zoom span { display: none; }
	.us-gallery__zoom { padding: 10px; }
}

/* 41. Ad: plain-language summary of the numbers (readable for people, Google and AI answers) */
.us-ad__facts { margin: 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--brand); }
.us-ad__facts h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.us-ad__facts p { margin: 0; font-size: 14.5px; line-height: 2.05; color: var(--ink-2); }

/* 42. /seller-plans/ */
.us-plans__mine { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--grad-soft); border: 1px solid var(--brand-200); }
.us-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.us-plans__card { position: relative; padding: 18px 14px; border-radius: 20px; text-align: center; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s; }
.us-plans__card:hover { transform: translateY(-3px); }
.us-plans__card.is-mine { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-200); }
.us-plans__emoji { font-size: 34px; line-height: 1; }
.us-plans__card h2 { margin: 8px 0 4px; font-size: 1.05rem; }
.us-plans__off { margin: 0; color: var(--ink-2); } .us-plans__off b { font-size: 1.6rem; color: var(--brand-600); }
.us-plans__card .us-muted { margin: 4px 0 0; font-size: 13px; }
.us-plans__body details { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin: 8px 0; }
.us-plans__body summary { cursor: pointer; font-weight: 800; }
@media (max-width: 760px) { .us-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 43. New ad: fill the form from the profile screenshot */
.us-ocrpick { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--brand); background: var(--grad-soft); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.us-ocrpick:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.us-ocrpick__ico { font-size: 28px; line-height: 1; }
.us-ocrpick b { display: block; font-size: 15px; }
.us-ocrpick small { display: block; color: var(--ink-2); font-size: 12.5px; line-height: 1.9; }
.us-ocrpick.is-busy { opacity: .7; pointer-events: none; }
.us-ocrpick.is-busy .us-ocrpick__ico { animation: us-ch-pulse 1s ease-in-out infinite; }
.us-input.is-auto { border-color: #a78bfa !important; background-image: linear-gradient(rgba(167, 139, 250, .08), rgba(167, 139, 250, .08)); }
.us-autohint { display: block; margin-top: 4px; font-size: 12px; color: #7c3aed; }
html.is-dark .us-autohint { color: #c4b5fd; }

/* 44. Blog cards: the whole featured image is visible (no cropping), on phones and desktop */
.us-adcard__media--post { aspect-ratio: 1200 / 630; display: grid; place-items: center; }
.us-adcard__media--post img { width: 100%; height: 100%; object-fit: contain; }
.us-prose img, .us-prose figure img, .us-prose .wp-block-image img { max-width: 100%; height: auto; }
.us-prose :is(figure, .wp-block-image, .wp-caption) { max-width: 100% !important; }
/* Blog index page (/blog/ uses the page template "template-blog.php") gets the full width on phones too */
@media (max-width: 640px) {
	body.page-template-template-blog .us-wrap { width: calc(100% - 12px); }
	body.page-template-template-blog .us-grid { gap: 12px; }
}

/* Lightbox on desktop: the whole picture fits the screen at first sight */
.us-lb__stage { height: calc(100dvh - 64px); }
.us-lb__img { max-height: calc(100dvh - 84px); max-width: min(100%, 100vw - 120px); width: auto; height: auto; }
@media (max-width: 640px) { .us-lb__img { max-width: 100%; } }

/* ===================================================================
   45. Follow a seller (1.0.27): button, seller box row, panel alarms
   =================================================================== */
.us-follow { gap: 6px; }
.us-follow.is-on { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.us-follow__n { font-size: 11.5px; opacity: .75; font-weight: 500; }
.us-follow__n::before { content: "· "; }
.us-btn--block.us-follow { width: 100%; justify-content: center; }
.us-sellerbox__follow { padding: 0 16px 14px; display: grid; gap: 6px; }
.us-sellerbox__follow small, .us-sellerhead__follow small { font-size: 12px; line-height: 1.7; }
.us-sellerhead__follow { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.us-falarm { text-decoration: none; color: inherit; border-radius: 12px; }
.us-falarm.is-unread { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-600); }
.us-pwatch { margin-top: 8px; width: 100%; justify-content: center; gap: 6px; font-size: 13.5px; }
.us-pwatch.is-on { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
@media (max-width: 600px) {
	.us-sellerhead__follow .us-follow { width: 100%; justify-content: center; }
}