:root{
	--bg:#ffffff;
	--text:#0a0a0a;
	--muted:#6b7280; /* gray-500 */
	--primary:#8b5cf6; /* violet-500 */
	--hover:#b295f5; /* requested hover violet */
	--border:#e5e7eb;
  /* minimal space above stats row */
  --stats-min-gap: 10px;
	/* header height for viewport calculations */
	--header-h: 96px;
	/* unified field/icon geometry */
	--field-h: 48px;
	--icon-l: 14px;
	--icon-sz: 18px;
	--icon-color: #6b7280;
    /* bottom navigation height for mobile */
    --bn-h: 68px;
}

/* Desktop-only animation helper: disable on small screens */
.only-desktop-anim.animate__animated{--animate-duration:.6s}
@media (max-width: 768px){
	.only-desktop-anim.animate__animated{animation:none !important;opacity:1 !important}
}

/* Reduce CLS from late webfont swap: prefer system fallback until webfont is ready */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;src:local('Inter');font-display:swap}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;src:local('Manrope');font-display:swap}

/* Small helper for live character counters */
.char-counter{font-size:12px;color:var(--muted);margin-top:4px;text-align:right}

/* --- Reviews UI: Edit/Delete buttons and Votes --- */
/* Actions container (right side of each review) */
.rev__actions{display:flex;gap:8px;align-items:center}
/* Default review action button — use warn/edit style (match "Редактировать") */
.rev__actions .rev__btn{background:#78350f;border:1px solid #f59e0b;color:#fff;border-radius:10px;padding:6px 12px;font-weight:800;letter-spacing:.1px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.rev__actions .rev__btn:hover{box-shadow:0 12px 28px rgba(245,158,11,.38);transform:translateY(-1px)}
/* Danger variant — match all Delete/Cancel buttons */
.rev__actions .rev__btn.danger{background:#7f1d1d;border:1px solid #ef4444;color:#fff}
.rev__actions .rev__btn.danger:hover{box-shadow:0 14px 30px rgba(239,68,68,.38);transform:translateY(-1px)}
/* If icons appear inside buttons, force them white for contrast */
.rev__actions .rev__btn img{filter:brightness(0) invert(1)}

/* Votes: like/dislike — make them squarer and clearer */
.rev__vote{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;border:1px solid transparent;font-weight:800;line-height:1;cursor:pointer;transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease, color .15s ease}
.rev__vote .cnt{font-variant-numeric:tabular-nums}
.rev__vote img{width:16px;height:16px;object-fit:contain;opacity:.95}
/* Like (inactive) */
.rev__vote.like{background:rgba(16,185,129,.12);border-color:#22c55e;color:#22c55e}
.rev__vote.like:hover{box-shadow:0 10px 24px rgba(16,185,129,.25);transform:translateY(-1px)}
/* Like (active) */
.rev__vote.like.is-active{background:#166534;border-color:#22c55e;color:#fff}
.rev__vote.like.is-active img{filter:brightness(0) invert(1)}
/* Dislike (inactive) */
.rev__vote.dislike{background:rgba(239,68,68,.12);border-color:#ef4444;color:#ef4444}
.rev__vote.dislike:hover{box-shadow:0 10px 24px rgba(239,68,68,.25);transform:translateY(-1px)}
/* Dislike (active) */
.rev__vote.dislike.is-active{background:#7f1d1d;border-color:#ef4444;color:#fff}
.rev__vote.dislike.is-active img{filter:brightness(0) invert(1)}

/* Dark theme tokens */
.theme-dark:root{
	--bg:#1f1f1f;
	--text:#f2f2f2;
	--muted:#a1a1a1;
	--border:#2e2e2e;
	--surface:#262626;
	--surface-2:#232323;
  --icon-color:#e5e7eb;
}
.theme-dark #ap-center-check > div{
  background:#0b1220 !important;
  color:#e5e7eb !important;
  border:1px solid rgba(148,163,184,.25) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.5) !important;
}

/* --- Review star rating (minimal, outline stars; no violet) --- */
.reviews .rating{display:flex;gap:8px;align-items:center}
.reviews .rating .star{all:unset;display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;cursor:pointer;line-height:0;color:#777;background:transparent;transition:color .18s ease, background .18s ease}
.reviews .rating .star:hover{background:rgba(255,255,255,.04);color:#aaa}
.reviews .rating .star:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.reviews .rating .star.is-on{color:#f5d347}


*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:'Manrope','Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
	color:var(--text);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
    /* Guard against rare horizontal scroll from fixed bars or min-width items */
    overflow-x:hidden;
}

/* Background canvas (fixed behind content); no blur */
.background-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;background:transparent;filter:blur(3px);will-change:transform}
/* Ensure main content sits above */
header, main, footer, .modal, .cart-modal{position:relative;z-index:1}

/* Global custom scrollbars (desktop only) */
@media (pointer: fine){
	:root{
		--scroll-thumb: rgba(0,0,0,.28);
		--scroll-thumb-hover: rgba(0,0,0,.42);
	}
	.theme-dark:root{
		--scroll-thumb: rgba(255,255,255,.22);
		--scroll-thumb-hover: rgba(255,255,255,.34);
	}
	/* Firefox */
	html{scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent}
	/* WebKit (Chrome/Edge/Safari) */
	*::-webkit-scrollbar{width:10px;height:10px}
	*::-webkit-scrollbar-track{background:transparent}
	*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:12px;border:3px solid transparent;background-clip:content-box}
	*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
	*::-webkit-scrollbar-corner{background:transparent}
}

/* Bottom mobile navigation (TikTok-like) */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:var(--bn-h);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--border);display:none;z-index:1100}
.theme-dark .bottom-nav{background:rgba(31,31,31,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bottom-nav__inner{height:100%;width:100%;max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:#6b7280;min-width:72px;flex:1 1 0;height:100%}
.bn-item .bn-icon{width:22px;height:22px;display:block}
.bn-item .bn-label{font-size:12px;font-weight:800;letter-spacing:.2px}
.bn-item.is-active{color:#0a0a0a}
.theme-dark .bn-item{color:#9aa1a8}
.theme-dark .bn-item.is-active{color:#f2f3f5}

/* Extra-tight screens: allow nav items to shrink more to avoid overflow */
@media (max-width: 360px){
	.bn-item{min-width:64px}
}
@media (max-width: 320px){
	.bn-item{min-width:58px}
}

/* Floating Cart button (bottom-right) */
.fab-cart{position:fixed;right:14px;bottom:82px;width:56px;height:56px;border-radius:999px;background:var(--primary);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.25);z-index:1200;border:none;cursor:pointer}
.fab-cart img{width:22px;height:22px;filter:brightness(0) invert(1)}
.fab-cart .badge{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:999px;background:#ef4444;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* Activate bottom navigation on small screens */
@media (max-width: 768px){
	/* Avoid extra blank space below content; rely on main/footer paddings */
	body.has-bottom-nav{padding-bottom: env(safe-area-inset-bottom, 0px)}
	.bottom-nav{display:block; padding-bottom: env(safe-area-inset-bottom, 0px)}
	.fab-cart{display:inline-flex; bottom: calc(82px + env(safe-area-inset-bottom, 0px))}
	/* Ensure scrollable content has extra space above the bottom nav */
	/* Keep content clear of bottom nav using exact nav height */
	body.has-bottom-nav main{padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px))}
	/* Reserve bottom-nav space early on small screens (prevents CLS when JS toggles .has-bottom-nav) */
	@media (max-width: 768px){
		body{padding-bottom: env(safe-area-inset-bottom, 0px)}
		body:not(.chat-page) main{padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px))}
		body:not(.chat-page) .site-footer{padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)) !important}
		/* Show bottom nav immediately and hide desktop navigation pieces to prevent CLS */
		.bottom-nav{display:block; padding-bottom: env(safe-area-inset-bottom, 0px)}
		.nav{display:none !important}
		.actions .cart{display:none !important}
	}

	/* Reserve width for actions to avoid header jiggle when items toggle */
	/* Reduce on small screens to prevent overflow with burger */
	.actions{min-width:96px}
	/* Hide top nav from header when bottom bar is present; keep burger visible */
	body.has-bottom-nav .nav{display:none !important}
	body.has-bottom-nav .actions .cart{display:none !important}
	/* On mobile, hide header profile button only if user is authenticated. When logged out, keep it visible for login. */
	body.has-bottom-nav.is-auth .actions .profile-btn{display:none !important}
	/* Hide burger on mobile when logged out (no session) */
	body.has-bottom-nav:not(.is-auth) .burger{display:none !important}
	/* Hide avatar+nickname block on mobile to save space; burger remains available */
	body.has-bottom-nav .user .user-btn{display:none !important}
}

/* Utility: lock scroll when modal open */
.no-scroll{overflow:hidden}

.container{width:min(1200px,92%);margin:0 auto}
/* On very small phones add a touch more side gutter to avoid "впритык" look */
@media (max-width: 420px){
	.container{width:min(1200px,94%)}
}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid var(--border);background:var(--bg)}
.footer__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100px;text-align:center}
.footer__row{display:flex;align-items:center;justify-content:center;gap:12px}
.footer__label{color:var(--muted);font-weight:600}
.footer__link{color:var(--text);text-decoration:none;font-weight:800}
.footer__link:hover{text-decoration:underline;color:var(--hover)}
.footer__tg{display:inline-flex;align-items:center;justify-content:center}
.footer__tg img{width:42px;height:42px;border-radius:999px;display:block;transition:transform .15s ease, box-shadow .15s ease}
.footer__tg:hover img{transform:scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.footer__copy{font-size:12px;color:var(--muted)}
.theme-dark .site-footer{background:var(--bg)}
/* No special dark styles needed for the icon itself */

@media (max-width: 640px){
		.footer__inner{flex-direction:column;align-items:center;padding:12px 0;gap:6px;min-height:72px}
		.footer__tg img{width:36px;height:36px}
}

/* Ensure footer is not hidden behind fixed bottom nav on mobile */
@media (max-width: 768px){
	/* Ensure footer ends exactly above bottom nav: add bn height as bottom padding */
	body.has-bottom-nav .site-footer{padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)) !important}
}

/* Header */
/* Ultra transparent header (near full pass-through) */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
/* Dark header: same tone as bg with neutral blur (no saturation shift) */
/* Dark header: keep almost transparent; rely on text shadow/contrast elsewhere */
.theme-dark .header{background:rgba(12,12,12,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.home-page .header{background:rgba(255,255,255,.36);border-bottom:1px solid rgba(255,255,255,.28)}
.theme-dark .home-page .header{background:rgba(12,12,12,.60);border-bottom:1px solid rgba(255,255,255,.20)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}

.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--text)}
.logo__img{height:76px;max-height:calc(96px - 16px);width:auto;display:block;object-fit:contain}

.nav{display:flex;gap:28px}
.nav__link{color:var(--muted);text-decoration:none;font-weight:600;transition:color .15s ease}
.nav__link:hover{color:var(--hover)}
.nav__link.is-active{color:var(--text)}

.actions{display:flex;align-items:center;gap:16px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;border:none;background:transparent;color:var(--text);cursor:pointer;transition:background-color .15s ease,color .15s ease, box-shadow .15s ease}
.icon-btn:hover{background:var(--hover);color:#fff;box-shadow:0 8px 22px rgba(178,149,245,.35)}
.icon-btn img{width:20px;height:20px;display:block}
.icon-btn:hover img{filter:brightness(0) invert(1)}
.icon-btn .badge{position:absolute;top:0;right:0;transform:translate(55%,-45%);display:inline-grid;place-items:center;background:var(--hover);color:#fff;border-radius:999px;width:18px;height:18px;font-size:11px;line-height:1}

/* User dropdown */
.hidden{display:none !important}
.user{position:relative}
.user-btn{display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer}
.user .user-badge{display:inline-flex;align-items:center;margin-left:2px;gap:8px}
.user .user-badge img{width:16px;height:16px;display:inline-block;vertical-align:middle}
.user .user-badge:empty{display:none;margin-left:0}
.avatar{width:32px;height:32px;border-radius:999px;background:var(--hover);color:#fff;display:inline-grid;place-items:center;font-weight:700}
.nickname{font-weight:600;color:var(--text)}
.user-menu{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:10px;width:240px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scaleY(.9) scaleX(.98);transform-origin:top right;clip-path:inset(10% 0 0 0 round 14px);transition:opacity .28s ease,transform .34s cubic-bezier(0.16,1,0.3,1),clip-path .34s cubic-bezier(0.16,1,0.3,1),visibility 0s linear .34s;will-change:opacity,transform,clip-path}
.user-menu:not(.hidden){opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0 round 14px);transition:opacity .28s ease,transform .34s cubic-bezier(0.16,1,0.3,1),clip-path .34s cubic-bezier(0.16,1,0.3,1),visibility 0s linear 0s}
.user-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0 round 14px);transition:opacity .28s ease,transform .34s cubic-bezier(0.16,1,0.3,1),clip-path .34s cubic-bezier(0.16,1,0.3,1),visibility 0s linear 0s}
/* Let the menu animate even when code toggles the global .hidden class */
.user-menu.hidden{display:block !important}
/* Hover/focus open on desktop (keeps click for touch devices) */
@media (hover: hover){
	.user:hover .user-menu,
	.user:focus-within .user-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0 round 14px);transition:opacity .28s ease,transform .34s cubic-bezier(0.16,1,0.3,1),clip-path .34s cubic-bezier(0.16,1,0.3,1),visibility 0s linear 0s}
}
/* Hover bridge to avoid flicker across the 10px gap */
.user::after{content:"";position:absolute;top:100%;right:0;width:240px;height:10px;pointer-events:auto;background:transparent;opacity:0}
@media (hover: hover){
	.user:hover::after,
	.user:focus-within::after{opacity:1}
}
/* Keep nickname container with a fixed width to avoid layout shift; updated via --nick-w */
.user .nickname{display:inline-block;width:var(--nick-w,84px);overflow:hidden;white-space:nowrap}
/* On small screens, let nickname expand a bit and allow wrapping to avoid clipping badges */
@media (max-width: 640px){
	/* Keep nickname and badges on one line; let nickname truncate */
	.user-btn{flex-wrap:nowrap;max-width:68vw}
	.user .nickname{width:auto;max-width:60vw;flex:1 1 auto;min-width:0;text-overflow:ellipsis}
	.user .user-badge{flex:0 0 auto}
}
/* Loading state for navbar user (skeleton shimmer) */
@keyframes um-skeleton{0%{background-position:-200% 0}100%{background-position:200% 0}}
/* Show skeleton until profile is ready */
.user.loading .avatar,
.user:not(.ready) .avatar{position:relative;color:transparent !important;background:var(--hover);overflow:hidden}
.user.loading .avatar::after,
.user:not(.ready) .avatar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;animation:um-skeleton 1.2s linear infinite;border-radius:inherit}
.user.loading .nickname,
.user:not(.ready) .nickname{color:transparent !important;position:relative;text-shadow:none}
.user.loading .nickname::after,
.user:not(.ready) .nickname::after{content:"";display:block;height:12px;width:100%;border-radius:6px;background:var(--hover);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;animation:um-skeleton 1.2s linear infinite}
/* Restore normal styles when ready */
.user.ready .nickname{color:var(--text) !important}
.user.ready .avatar{color:#fff !important}
/* Soft reveal for avatar and nickname when ready (match product fade-in) */
.user.ready .avatar,
.user.ready .nickname{animation:um-fadein .22s ease-out both}

/* --- Product skeletons & fade-in --- */
.hero .hero__title{will-change:auto}
@keyframes um-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card.fade-in{animation:um-fadein .22s ease-out both}
/* smooth reveal for purchase rows */
.purch-item.fade-in{animation:um-fadein .22s ease-out both}

/* generic shimmer (reuses um-skeleton from navbar) */
.um-skel{position:relative;background:var(--hover);color:transparent;border-radius:10px;overflow:hidden}
.um-skel::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;animation:um-skeleton 1.2s linear infinite}

.card.skeleton{pointer-events:none;user-select:none}
.card.skeleton .card__media{height:180px;border-radius:12px}
.card.skeleton .card__media .um-skel{height:100%;border-radius:12px}
.card.skeleton .card__title{height:18px;margin:12px 0 8px;border-radius:6px}
.card.skeleton .card__text{height:12px;margin:8px 0;border-radius:6px}
.card.skeleton .card__text.line-2{width:70%}
.card.skeleton .card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.card.skeleton .price .bar{width:120px;height:16px;border-radius:6px}
.card.skeleton .btn-skel{width:100px;height:34px;border-radius:999px}
.menu-balance{display:flex;align-items:center;gap:8px;color:#222;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:#fff;color:#222;border-radius:10px;cursor:pointer;transition:background-color .15s ease, color .15s ease}
.menu-item:hover{background:#8e60f7;color:#fff}
.menu-item.exit{color:#e5484d}
.menu-item.exit:hover{background:#ffecec;color:#d0302c}
/* icons inside user menu */
.menu-item img{width:18px;height:18px;display:block}
.menu-item:hover img{filter:brightness(0) invert(1)}
/* Ensure Exit icon is white in dark themes (avoid teal fill from source SVG) */
html.theme-dark .menu-item.exit img,
body.dark .menu-item.exit img,
body.theme-topo .menu-item.exit img{
	filter: brightness(0) invert(1) contrast(1.1) !important;
}
.menu-item.exit:hover img{filter:none}

.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;border:none;border-radius:10px;background:transparent}
.burger span{width:20px;height:2px;background:var(--text)}

.mobile-nav{display:none;border-top:1px solid var(--border);padding:12px 4%;gap:12px}
.mobile-nav.open{display:flex;flex-direction:column}
.mobile-nav__link{padding:10px 0;color:var(--text);text-decoration:none}

/* Hero */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:100svh;margin-top:calc(-1 * var(--header-h));padding:calc(88px + var(--header-h)) 0 240px}
.hero__title{font-size:64px;line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:40px 0 24px}
.hero__title .accent{color:var(--primary)}
.hero__subtitle{font-size:20px;color:var(--muted);max-width:780px}

.hero__cta{margin-top:28px}
/* Space multiple CTA buttons nicely */
.hero__cta .btn + .btn{margin-left:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;cursor:pointer}
.btn--primary{background:#0a0a0a;color:#fff;padding:14px 22px;border-radius:14px;font-weight:700;border:1px solid #0a0a0a;transition:transform .18s ease, box-shadow .22s ease, filter .18s ease, background-color .18s ease, border-color .18s ease}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.08);filter:brightness(1.02)}
.btn--primary:active{transform:translateY(0);box-shadow:0 6px 14px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06)}
.btn--pill{height:44px;border-radius:14px;border:1px solid var(--border);background:#fff;color:#111;padding:0 14px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.btn--pill:hover{background:#f5f6f8}
.btn__icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:transparent}
.btn--primary .btn__icon img{filter:brightness(0) invert(1)}

/* Homepage hero background video */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px) brightness(.56) saturate(1.05);transform:scale(1.02);transform-origin:center;opacity:0;transition:opacity .5s ease-in;will-change:opacity}
.hero__bg.playing video{opacity:1}
.hero__bg::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(1200px 60% at 50% 20%, rgba(0,0,0,.35), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));mix-blend-mode:normal}
.hero__edge{position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:2;background:linear-gradient(90deg, transparent, rgba(255,255,255,.22) 15%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.22) 85%, transparent);opacity:.85;pointer-events:none}
.hero > .container{position:relative;z-index:1}

/* Respect prefers-reduced-motion: pause background video */
@media (prefers-reduced-motion: reduce){
	.hero__bg video{animation:none;filter:blur(10px) brightness(.6)}
}

/* On low-end or tiny screens, further darken for readability */
@media (max-width: 480px){
	.hero__bg::after{background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65))}
}

/* Make hero truly fullscreen on small screens accounting for bottom nav */
@media (max-width: 768px){
	:root{ --header-h: 64px }
	.hero{min-height: calc(100svh - var(--bn-h));}
}

/* Neon buttons (reusable) */
.btn-neon{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;font-weight:800;letter-spacing:.2px;color:#fff;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.btn-neon:disabled{opacity:.6;cursor:default;transform:none}
.btn-neon:focus-visible{outline:2px solid rgba(255,255,255,.5); outline-offset:2px}

/* Violet variant (default brand) */
.btn-neon--violet{background:#8b5cf6;box-shadow:0 8px 22px rgba(139,92,246,.35), 0 0 0 1px rgba(139,92,246,.45) inset}
.btn-neon--violet:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(139,92,246,.5), 0 0 0 2px rgba(139,92,246,.55) inset;filter:brightness(1.02)}

/* Green variant (success) */
.btn-neon--green{background:#16a34a;box-shadow:0 8px 22px rgba(22,163,74,.35), 0 0 0 1px rgba(22,163,74,.45) inset}
.btn-neon--green:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(22,163,74,.5), 0 0 0 2px rgba(22,163,74,.55) inset;filter:brightness(1.02)}

/* Red variant (danger) */
.btn-neon--red{background:#dc2626;box-shadow:0 8px 22px rgba(220,38,38,.35), 0 0 0 1px rgba(220,38,38,.45) inset;color:#fff}
.btn-neon--red:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(220,38,38,.5), 0 0 0 2px rgba(220,38,38,.55) inset;filter:brightness(1.02)}
#apModApprove.btn-neon--green{background:#16a34a !important;border:1px solid #22c55e !important;color:#fff !important;border-radius:10px !important}
#apModReject.btn-neon--red{background:#dc2626 !important;border:1px solid #ef4444 !important;color:#fff !important;border-radius:10px !important}

/* Strong overrides for moderation view buttons at the bottom of add-product (view mode) */
#apActions .btn-neon--green{background:#16a34a !important;border:1px solid #22c55e !important;color:#fff !important}
#apActions .btn-neon--green:hover{box-shadow:0 12px 30px rgba(22,163,74,.5), 0 0 0 2px rgba(22,163,74,.55) inset}
#apActions .btn-neon--red{background:#dc2626 !important;border:1px solid #ef4444 !important;color:#fff !important}
#apActions .btn-neon--red:hover{box-shadow:0 12px 30px rgba(239,68,68,.5), 0 0 0 2px rgba(239,68,68,.55) inset}
#apActions .btn-neon .btn__icon img{filter:brightness(0) invert(1)}
#apActions .btn-neon{border-radius:10px}
/* Hard ID-level overrides to eliminate any theme bleed */
#apActions #apModApprove{background:#16a34a !important;border:1px solid #22c55e !important;color:#fff !important;border-radius:10px !important}
#apActions #apModApprove:hover{box-shadow:0 12px 30px rgba(22,163,74,.5), 0 0 0 2px rgba(22,163,74,.55) inset}
#apActions #apModReject{background:#dc2626 !important;border:1px solid #ef4444 !important;color:#fff !important;border-radius:10px !important}
#apActions #apModReject:hover{box-shadow:0 12px 30px rgba(239,68,68,.5), 0 0 0 2px rgba(239,68,68,.55) inset}

/* Force light icons for dark theme (common mono SVGs used as <img>) */
html.theme-dark img[src$="Mop.svg"],
body.dark img[src$="Mop.svg"],
html.theme-dark img[src$="/Mop.svg"],
body.dark img[src$="/Mop.svg"],
html.theme-dark img[src$="Trash.svg"],
body.dark img[src$="Trash.svg"],
html.theme-dark img[src$="/Trash.svg"],
body.dark img[src$="/Trash.svg"]{
	filter: invert(1) brightness(2) contrast(1.1) !important;
}
.btn__arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease}
.btn--primary:hover .btn__arrow{transform:translateX(4px)}
/* Accent (violet) pill button */
.btn--violet{background:var(--primary);color:#fff;border:1px solid var(--primary);border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--violet:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
.btn--violet img{filter:brightness(0) invert(1)}
/* Account flow action buttons (dark -> violet) */
.theme-dark #wdContinue,.theme-dark #wdNext,.theme-dark #trNext{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.theme-dark #wdContinue:hover,.theme-dark #wdNext:hover,.theme-dark #trNext:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
/* Product card action in Account (Редактировать/Открыть) */
.open-prod{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:6px;box-shadow:0 10px 24px rgba(139,92,246,.24);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.open-prod:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
.open-prod .btn__icon img{filter:brightness(0) invert(1)}

/* Make account product card buttons even squarer */
.acc-panel .products-grid .open-prod{border-radius:6px !important}
/* Ensure 'Мои товары' edit buttons that also have btn--pill stay violet by default */
.btn.btn--pill.open-prod{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important;border-radius:6px !important;box-shadow:0 10px 24px rgba(139,92,246,.24)}
.btn.btn--pill.open-prod:hover{background:var(--hover) !important;box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
/* Cart: Buy All button — violet CTA with glow */
.cart__buy-all{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.cart__buy-all:hover{background:var(--hover) !important;box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
.cart__buy-all .btn__icon img{filter:brightness(0) invert(1)}

/* Account: My products (Add new) — violet CTA */
#accAddProductBtn{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:10px;box-shadow:0 10px 24px rgba(139,92,246,.24);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
#accAddProductBtn:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
#accAddProductBtn .btn__icon img{filter:brightness(0) invert(1)}

/* Account: Support send button — violet CTA */
#supChatSend{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:10px;box-shadow:0 10px 24px rgba(139,92,246,.24);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
#supChatSend:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
#supChatSend .btn__icon img{filter:brightness(0) invert(1)}
/* Account: Support — Create ticket CTA */
#supCreateBtn{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:10px;box-shadow:0 10px 24px rgba(139,92,246,.24);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
#supCreateBtn:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}

/* Profile: action buttons (Write / Subscribe) — violet CTA */
.pr-actions .btn{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:10px;box-shadow:0 10px 24px rgba(139,92,246,.24);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.pr-actions .btn:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
.pr-actions .btn img{filter:brightness(0) invert(1)}
/* Telegram button override: keep it brand blue inside profile actions */
.pr-actions .btn.btn--telegram{background:#61A8DE;border-color:#61A8DE;color:#fff}
.pr-actions .btn.btn--telegram:hover{background:#4FA0DA;box-shadow:0 14px 30px rgba(97,168,222,.35)}
.pr-actions .btn.btn--telegram img{filter:none}
/* Profile product card: edit icon should be white for warn/edit buttons */
.profile-card-action.btn--warn .btn__icon img,
.profile-card-action.btn--edit .btn__icon img{filter:brightness(0) invert(1)}

/* Account: Likes panel — give heart buttons a subtle violet glow on hover */
.acc-panel[data-panel="likes"] .fav-btn:hover{box-shadow:0 12px 28px rgba(139,92,246,.28)}
/* Light theme: promo button black by default */
html:not(.theme-dark) #accPromoBtn{background:#0a0a0a !important;border-color:#0a0a0a !important;color:#fff !important}
html:not(.theme-dark) #accPromoBtn img{filter:brightness(0) invert(1)}
html:not(.theme-dark) #accPromoBtn:hover{background:#111 !important;box-shadow:0 12px 28px rgba(0,0,0,.28) !important}
/* Dark theme: keep promo button violet */
.theme-dark #accPromoBtn{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important}
.theme-dark #accPromoBtn img{filter:brightness(0) invert(1)}
/* Hover inherits from generic .theme-dark .acc-section .bal-card:hover to match other buttons */

/* --- Neon button system (square, glow on hover) --- */
.btn--squareish{border-radius:10px}

/* White (ghost) neon button */
.btn--ghost{background:#ffffff;color:#111827;border:1px solid var(--border);border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--ghost:hover{background:#f5f6f8;box-shadow:0 12px 28px rgba(17,24,39,.12);transform:translateY(-1px)}

/* Red (danger/cancel) neon — dark background */
.btn--danger{background:#7f1d1d;border:1px solid #ef4444;color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--danger:hover{box-shadow:0 14px 30px rgba(239,68,68,.38);transform:translateY(-1px)}
.theme-dark .btn--danger{background:#3a1f25;border-color:#ef4444;color:#fecaca}
.theme-dark .btn--danger:hover{box-shadow:0 14px 30px rgba(239,68,68,.38)}

/* Yellow (edit/warn) neon */
.btn--warn{background:#78350f;border:1px solid #f59e0b;color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--warn:hover{background:#78350f;box-shadow:0 12px 28px rgba(245,158,11,.38);transform:translateY(-1px)}

/* Green (success/add balance) neon */
.btn--success{background:#166534;border:1px solid #22c55e;color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--success:hover{background:#166534;box-shadow:0 12px 28px rgba(34,197,94,.38);transform:translateY(-1px)}
.theme-dark .btn--success{background:#065f46;border-color:#10b981;color:#d1fae5}
.theme-dark .btn--success:hover{box-shadow:0 12px 28px rgba(16,185,129,.38)}

/* Map common labels (non-breaking): keep existing classes and add square neon look */
.btn.btn--pill.btn--danger,.btn.btn--pill.btn--warn,.btn.btn--pill.btn--success,.btn.btn--pill.btn--ghost{border-radius:10px}

/* Make dynamic edit buttons look like warn */
.btn--edit{background:#78350f;border:1px solid #f59e0b;color:#fff;border-radius:10px;transition:box-shadow .2s ease, transform .15s ease}
.btn--edit:hover{box-shadow:0 12px 28px rgba(245,158,11,.38);transform:translateY(-1px)}

/* Specific element mappings (best-effort, non-breaking) */
/* Settings: avatar change/remove */
#profAvatarChange{background:#166534;color:#fff;border:1px solid #22c55e;border-radius:10px !important;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
#profAvatarChange:hover{box-shadow:0 12px 28px rgba(34,197,94,.38);transform:translateY(-1px)}
#profAvatarRemove{background:#7f1d1d;color:#fff;border:1px solid #ef4444;border-radius:10px !important;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
#profAvatarRemove:hover{box-shadow:0 14px 30px rgba(239,68,68,.38);transform:translateY(-1px)}

/* Admin: add balance buttons (if present) */
#admBalTopup{background:#166534;border:1px solid #22c55e;color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
#admBalTopup:hover{background:#166534;box-shadow:0 12px 28px rgba(34,197,94,.38);transform:translateY(-1px)}

/* Admin overlay buttons for product cards */
.ov-btn{border-radius:10px;padding:6px 10px;transition:box-shadow .2s ease, transform .15s ease;font-size:12px}
.ov-btn.ov-danger{background:#ffecec;border:1px solid #ffd0d0;color:#d0302c}
.ov-btn.ov-danger:hover{background:#ffdede;box-shadow:0 14px 30px rgba(220,38,38,.28);transform:translateY(-1px)}
.ov-btn.ov-warn{background:#78350f;border:1px solid #f59e0b;color:#fff}
.ov-btn.ov-warn:hover{box-shadow:0 12px 28px rgba(245,158,11,.38);transform:translateY(-1px)}
/* Approve button (success) */
.ov-btn.ov-success{background:#166534;border:1px solid #22c55e;color:#fff}
.ov-btn.ov-success:hover{box-shadow:0 12px 28px rgba(34,197,94,.38);transform:translateY(-1px)}
/* Likes / generic open button in dark */
.theme-dark .open-prod{background:var(--primary);border-color:var(--primary);color:#fff}
/* Icons on violet buttons should be white */
.btn--violet img{filter:brightness(0) invert(1)}
/* Muted/grey pill button (for subscribed state) */
.btn--muted{background:#eef1f5;color:#4b5563;border:1px solid var(--border)}
.btn--muted:hover{background:#e2e6ea}
.btn--telegram{background:#61A8DE;color:#fff;border:1px solid #61A8DE;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--telegram:hover{background:#4FA0DA;box-shadow:0 14px 30px rgba(97,168,222,.35);transform:translateY(-1px)}
/* Default: keep icon colors as-is for Telegram artwork unless overridden in specific contexts */
.btn--telegram img{filter:none}
/* Home hero CTA: violet by default with glow hover */
.hero .btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);border-radius:10px;box-shadow:0 12px 28px rgba(139,92,246,.2)}
.hero .btn--primary:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32)}

/* White button variant (same geometry, white look) */
.btn--white{background:#fff;color:#0f0f0f;padding:14px 22px;border-radius:14px;font-weight:700;border:1px solid #e5e5e5;transition:transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);background:#f7f7f7;border-color:#dddddd}
.btn--white:active{transform:translateY(0);box-shadow:0 6px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04)}
.hero .btn--white{border-radius:10px;background:#fff;color:#0f0f0f;box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:#eaeaea}
.hero .btn--white:hover{background:#f7f7f7;box-shadow:0 12px 28px rgba(0,0,0,.12)}

/* Utilities */
@media (max-width: 1024px){
	.hero__title{font-size:48px}
  .logo__img{height:56px;max-height:56px}
}
@media (max-width: 768px){
	.nav{display:none}
	.burger{display:flex}
	.hero{padding:56px 0 80px}
	.hero__title{font-size:36px}
  .logo__img{height:54px;max-height:54px}
  /* Compact header spacing on mobile */
  .header__inner{gap:6px;min-height:72px}
	.actions{gap:10px}
	/* Place notifications as the rightmost item so it's next to the burger */
	.actions .profile-btn{order:1}
	.actions .notif{order:3}
	/* Group logo on left; push actions + burger to the right to avoid big gaps */
	.header__inner{justify-content:flex-start}
	.header .actions{margin-left:auto; justify-content:flex-end}
	/* Ensure dropdown positions correctly even when avatar button hidden */
	body.has-bottom-nav .user-menu{position:fixed; right:12px; top:68px; z-index:2000}
	/* On mobile, hide duplicate "Профиль" item in the header dropdown (exists in bottom nav) */
	body.has-bottom-nav .user-menu .menu-item[data-action="profile"]{display:none !important}
}

/* Extra-tight header on very small phones */
@media (max-width: 480px){
  /* Hide header profile button to free up space; profile is in bottom nav */
  .actions .profile-btn{display:none !important}
}
@media (max-width: 420px){
	.logo__img{height:44px;max-height:44px}
	.header__inner{gap:8px;min-height:64px}
}

/* Sections */
.section{padding:28px 0 80px}
.section__head{margin-bottom:24px}
.section__title{font-size:56px;line-height:1.06;letter-spacing:-.02em;margin:0 0 8px;font-weight:900}
.section__subtitle{font-size:20px;color:var(--muted);margin:0}

.featured{padding-top:0;margin-top:100px}
@media (max-width: 768px){
	.featured{margin-top:60px}
}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:stretch}

/* Scroll-synced reveal for featured cards */
.cards .card{--rev:0;opacity:calc(.15 + .85 * var(--rev));transform:translateY(calc((1 - var(--rev)) * 24px)) scale(calc(.98 + .02 * var(--rev)));will-change:transform,opacity;transition:opacity .12s linear}

.card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .2s ease, box-shadow .2s ease;will-change:transform;display:grid;grid-template-rows:auto 1fr auto;height:100%;cursor:pointer}
.theme-dark .card{background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.card__media{position:relative}
.card__media img{display:block;width:100%;height:360px;object-fit:cover;transition:transform .35s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(0,0,0,.12)}
.card:hover .card__media img{transform:scale(1.03)}
.free-badge{position:absolute;left:14px;top:14px;z-index:2;padding:6px 10px;border-radius:999px;background:#e8ffef;border:1px solid #b8efc5;color:#12883b;font-weight:800;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.discount-badge{position:absolute;right:14px;top:14px;z-index:2;padding:6px 10px;border-radius:999px;background:#ef4444;color:#fff;font-weight:900;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.cards#homeTopGrid .free-badge{left:64px; top:14px}
.fav-btn{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;border:none;background:#fff;color:var(--text);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.12);cursor:pointer}
.fav-btn:hover{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.fav-btn.active{background:#fff;transform:scale(1.04)}
.fav-btn svg{transition:transform .2s ease}
.fav-btn:active svg{transform:scale(0.92)}
.fav-btn svg path{fill:none;transition:fill .15s ease, stroke .15s ease}
.fav-btn.active svg path{fill:#e5484d;stroke:#e5484d}

.card__body{padding:28px 28px 16px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card__title{margin:0 0 6px;font-size:18.5px;line-height:1.25;font-weight:800;flex:0 0 auto;display:flex;align-items:center;gap:8px}
.card__game-wrap{display:inline-flex;margin-left:auto}
.card__game{width:36px;height:36px;object-fit:contain;display:block;opacity:.95;border-radius:10px}
.card__seller{margin:0 0 6px;white-space:nowrap;color:var(--text);font-size:14px;display:flex;align-items:center;gap:4px}
.card__seller strong{display:inline-flex;align-items:center}
.card__seller .seller-link{cursor:pointer;color:var(--link, #6366f1);text-decoration:none;border-bottom:1px solid transparent}
.card__seller .seller-link:hover{color:#4f46e5;border-bottom-color:currentColor}
.card__seller .verified{display:inline-block;vertical-align:middle;margin-left:2px;transform:translateY(0);width:16px;height:16px}
.card__seller .admin-crown{display:inline-block;vertical-align:middle;margin-left:4px;width:16px;height:16px;filter:drop-shadow(0 0 2px rgba(0,0,0,.15))}
.card__seller .admin-crown path{fill:#f5c542;stroke:#f5c542}
/* Product page seller name styling reuse */
.product-seller .seller-link{cursor:pointer;color:#2563eb;text-decoration:none;font-weight:600}
.product-seller .seller-link:hover{color:#1d4ed8;text-decoration:underline}
.product-seller .admin-crown{margin-left:6px}
/* Custom tooltip */
.um-tip{position:fixed;z-index:6000;background:#111;color:#fff;font-size:12px;line-height:1.25;padding:6px 8px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.25);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;max-width:220px}
.um-tip[data-show="1"]{opacity:1;transform:translateY(0)}
.um-tip[data-theme="light"]{background:#fff;color:#111;border:1px solid var(--border)}
/* Product page seller row */
.product__seller{display:flex;align-items:center;gap:4px;color:var(--text);font-size:14px}
.product__seller .verified{vertical-align:middle; transform:translateY(0); margin-left:0; width:16px; height:16px}
/* Ensure admin crown sits tight next to the name on product page */
.product__seller .admin-crown{display:inline-block;vertical-align:middle;margin-left:2px;width:16px;height:16px;filter:drop-shadow(0 0 2px rgba(0,0,0,.15))}
.card__text{margin:0;color:var(--muted)}
.card__meta{display:flex;gap:18px;margin-top:18px;color:var(--muted);font-size:14px}
.meta{display:inline-flex;align-items:center;gap:6px}

/* Market card stats refinement */
.stats{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-top:auto;margin-bottom:0;padding-top:var(--stats-min-gap)}
/* Ensure .stats sticks to bottom even if page-level styles try to override */
.card .card__body .stats{margin-top:auto}
.stats span{display:inline-flex;align-items:center;gap:6px;line-height:1}
.stats img{width:18px;height:18px;display:block}

.card__footer{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 24px;margin-top:0;border-top:1px solid var(--border)}
.price{font-size:22px;font-weight:900}
/* Slightly smaller quantity text inside card price */
.card .price .qty-inline{display:block;font-size:14px;color:var(--muted);margin-top:6px}
.btn--pill{background:#eee;color:#111;border:none;border-radius:999px;padding:10px 14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
/* Ensure pill variants keep neon background/shape instead of being white/round */
.btn.btn--pill.btn--squareish{border-radius:10px !important}
.btn.btn--pill.btn--edit,
.btn.btn--pill.btn--warn{background:#78350fcc !important;border:1px solid #f59e0b !important;color:#fff !important;border-radius:10px !important}
.btn.btn--pill.btn--edit:hover,
.btn.btn--pill.btn--warn:hover{box-shadow:0 12px 28px rgba(245,158,11,.38);transform:translateY(-1px)}
.btn.btn--pill.btn--success{background:#166534cc !important;border:1px solid #22c55e !important;color:#fff !important;border-radius:10px !important}
.btn.btn--pill.btn--success:hover{box-shadow:0 12px 28px rgba(34,197,94,.38);transform:translateY(-1px)}
.btn.btn--pill.btn--danger{background:#7f1d1dcc !important;border:1px solid #ef4444 !important;color:#fff !important;border-radius:10px !important}
.btn.btn--pill.btn--danger:hover{box-shadow:0 14px 30px rgba(239,68,68,.38);transform:translateY(-1px)}
.btn.btn--pill.btn--ghost{background:#ffffff !important;border:1px solid var(--border) !important;color:#111827 !important;border-radius:10px !important}
.btn.btn--pill.btn--ghost:hover{background:#f5f6f8;box-shadow:0 12px 28px rgba(17,24,39,.12);transform:translateY(-1px)}

/* Light theme: make warn/danger/success/edit backgrounds more translucent */
body:not(.theme-dark) .btn--warn{background:#78350fcc}
body:not(.theme-dark) .btn--edit{background:#78350fcc}
body:not(.theme-dark) .btn--success{background:#166534cc}
body:not(.theme-dark) .btn--danger{background:#7f1d1dcc}

/* IDs in settings: ensure translucency on light theme */
body:not(.theme-dark) #profAvatarChange{background:#166534cc}
body:not(.theme-dark) #profAvatarRemove{background:#7f1d1dcc}
.btn--add{background:var(--primary);color:#fff;border-radius:10px;transition:transform .2s ease, box-shadow .2s ease, background-color .15s ease}
.btn--add:hover{background:var(--hover);transform:translateY(-1px) scale(1.02);box-shadow:0 16px 36px rgba(139,92,246,.32)}
.btn--add:active{transform:translateY(0) scale(0.99)}
.btn--add .btn__icon{background:transparent}

/* Rank badges for homepage top cards */
.rank-badge{position:absolute;left:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;font-weight:900;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.1);border:2px solid #eaecef}
.rank-badge span{font-size:18px;line-height:1}
.rank-badge.rank-1{color:#b38600;border-color:#f2d47a}
.rank-badge.rank-2{color:#6b7684;border-color:#c8d0d8}
.rank-badge.rank-3{color:#9a642e;border-color:#e8c49e}
.rank-badge.rank-4{color:#5851ff;border-color:#cfcdfc}
/* Dark: neutralize rank badge chip */
.theme-dark .rank-badge{background:var(--surface);border-color:var(--border);color:#e5e7eb;box-shadow:0 8px 22px rgba(0,0,0,.35)}

@media (max-width: 960px){
  .cards{grid-template-columns:1fr}
  .card__media img{height:280px}
}

/* Themes grid and cards */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width: 640px){ .theme-grid{grid-template-columns:1fr} }
.card--theme{cursor:pointer; user-select:none}
.card--theme .card__media img{height:280px}
.theme-card.is-active{outline:3px solid var(--hover); outline-offset:2px; background: #faf9ff}
.theme-card:focus-visible{outline:3px solid var(--hover); outline-offset:2px}
/* Dark: selected theme card background */
.theme-dark .theme-card.is-active{background:var(--surface-2)}

/* Topographic theme card placeholder styling */
.theme-card[data-theme="topo"] .card__media{background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.theme-card[data-theme="topo"] .card__media::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),transparent 60%),radial-gradient(circle at 70% 65%,rgba(255,255,255,.08),transparent 55%);mix-blend-mode:screen;pointer-events:none}
.theme-card[data-theme="topo"] img{object-fit:cover;opacity:.85;filter:brightness(.9)}

/* Reusable topographic background (can be applied with .bg-topographic) */
.bg-topographic{background-color:#000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath d='M50 20c40 60 120 60 160 0 40-60 120-60 160 0' fill='none' stroke='%23ffffff22' stroke-width='2'/%3E%3Cpath d='M0 120c60 80 180 80 240 0 60-80 180-80 240 0' fill='none' stroke='%23ffffff18' stroke-width='2'/%3E%3Cpath d='M50 220c40 60 120 60 160 0 40-60 120-60 160 0' fill='none' stroke='%23ffffff22' stroke-width='2'/%3E%3Cpath d='M0 320c60 80 180 80 240 0 60-80 180-80 240 0' fill='none' stroke='%23ffffff12' stroke-width='2'/%3E%3C/svg%3E");background-size:600px 600px;background-attachment:fixed}
.theme-dark .bg-topographic{background-color:#000}

/* Apply background to settings themes panel wrapper */
body.settings-page .set-panel[data-panel="themes"]{position:relative}
body.settings-page .set-panel[data-panel="themes"]::before{content:"";position:absolute;inset:0;z-index:0;background:#000}
body.settings-page.theme-dark .set-panel[data-panel="themes"]::before{background:#000}
body.settings-page .set-panel[data-panel="themes"] > *{position:relative;z-index:1}

/* Topographic Map canvas system */
body.theme-topo{position:relative}
#topo-canvas{background:#000}
body.theme-topo{background:#000 !important}
#topo-canvas{background:#000}
#topo-canvas:after{content:""}
#topo-canvas{opacity:1}
/* Translucent nav bars on topo theme */
body.theme-topo .header{background:rgba(0,0,0,.14);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
body.theme-topo.theme-dark .header{background:rgba(0,0,0,.18)}
body.theme-topo .mobile-nav{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
body.theme-topo .bottom-nav{background:rgba(0,0,0,.65);backdrop-filter:blur(8px)}
@media (max-width: 380px){
	:root{ --bn-h: 62px }
}
#topo-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;display:block;mix-blend-mode:normal}
/* Do not force z-index on all children to avoid blocking clicks; only push canvas back */
#topo-canvas{z-index:-1}
body.theme-topo .set-panel,body.theme-topo .main,body.theme-topo main,body.theme-topo .container{background:transparent !important}
/* Dark/Light adaptation for line color handled in JS via strokeStyle */

/* Product page price free pill */
.product__price .free-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid #b8efc5;background:#e8ffef;color:#12883b;font-weight:700;font-size:12px}
/* Hide redundant "Free" badges/pills sitewide; account page uses .p-badge.p-free and remains unaffected */
.free-badge,
.free-pill{display:none!important}
/* Product page discount badge near price */
.discount-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#ef4444;color:#fff;font-weight:800;font-size:12px;margin-left:8px}
/* For product price row specifically, keep inline with price and before qty */
.product__price .discount-pill{vertical-align:middle}
/* Product page: place stock below price and make it grey */
.product__price .qty-inline{display:block;font-size:16px;color:var(--muted);margin-top:6px}

/* Modal (Auth) */
  /* Edit product title smaller on mobile */
  .ap-center .section__title.is-edit{font-size:28px;line-height:1.2}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000;
	/* smooth show/hide */
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .24s ease, visibility 0s linear .24s;
}
.modal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .24s ease}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);opacity:0;transition:opacity .24s ease}
.modal.open .modal__backdrop{opacity:1}
.modal__dialog{position:relative;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.35);width:min(500px,92%);padding:26px 24px 28px;
	transform:translateY(10px) scale(.985);opacity:.98;will-change:transform,opacity;
	transition:transform .26s cubic-bezier(0.22,1,0.36,1), opacity .2s ease;
}
.modal.open .modal__dialog{transform:none;opacity:1}
.theme-dark .modal__dialog{background:var(--surface)}
.modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#222;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease, box-shadow .15s ease, border-color .15s ease}
.modal__close:hover{background:#f5f5f7;box-shadow:0 10px 24px rgba(139,92,246,.28);border-color:var(--primary)}
.theme-dark .modal__close:hover{background:#171a21;box-shadow:0 10px 28px rgba(139,92,246,.36);border-color:var(--hover);color:#e5e7eb}
.img-modal__dialog{background:transparent !important;box-shadow:none !important;padding:0 !important;width:min(1100px,96vw) !important;height:92vh !important;display:flex;align-items:center;justify-content:center}
#img-modal img{max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#img-modal .modal__close{top:16px;right:16px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.28);color:#fff}
#img-modal .modal__close:hover{background:rgba(0,0,0,.75)}
.modal__title{text-align:center;font-weight:900;margin:8px 0 16px;letter-spacing:.3px}
.modal__logo{display:block;margin:6px auto 14px;height:54px;object-fit:contain}
.theme-dark .modal__logo{content:url('logos/white unique logo.png')}

.auth-form{display:flex;flex-direction:column;gap:14px}
.theme-dark .auth-form .auth-form__switch .switch-text{color:#fff}

/* Payment option cards in Balance modal */
.pay-options{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pay-card{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;border:1.5px solid var(--border);background:#fff;cursor:pointer;transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease}
.pay-card:hover{background:#f8fafc}
.pay-card.is-selected{border-color:#86efac; box-shadow:0 0 0 3px rgba(22,163,74,.12); background:#ecfdf5}
.pay-card__check{display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid #d1d5db;border-radius:8px;background:#fff}
.pay-card__check svg{opacity:0;transition:opacity .12s ease}
.pay-card.is-selected .pay-card__check{border-color:#86efac;background:#ecfdf5}
.pay-card.is-selected .pay-card__check svg{opacity:1}
.pay-card__icon{width:28px;height:28px;display:inline-grid;place-items:center}
.pay-card__body{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.pay-card__title{font-weight:800;text-align:left}
.pay-card__sub{font-size:12px;color:var(--muted);text-align:left}
.pay-badge{display:inline-block;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid #fde68a;background:#fef9c3;color:#a16207}
.pay-badge--rec{border-color:#bbf7d0;background:#ecfdf5;color:#15803d}
/* Make lolz icon slightly larger */
#balMethodLolz .pay-card__icon img{width:28px;height:28px}

/* LOLZ confirm card */
.lolz-card{position:relative;border-radius:14px;background:#f8fafc;border:1px solid var(--border);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.lolz-card__accent{width:4px;border-radius:8px;background:#22c55e;align-self:stretch}
.lolz-card__body{display:flex;flex-direction:column;gap:6px}
.lolz-card__title{font-size:12px;letter-spacing:.08em;color:#6b7280;font-weight:800}
.lolz-card__sum{font-size:20px;color:#0a0a0a}
.lolz-card__meta{font-size:13px;color:#6b7280}
.link-like{border:none;background:transparent;color:#16a34a;font-weight:700;cursor:pointer}
.link-like:hover{text-decoration:underline}
.lolz-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.lolz-done{background:#22c55e !important;border:1px solid #16a34a !important;color:#fff !important}
.lolz-done:hover{filter:brightness(0.98)}

@media (prefers-reduced-motion: reduce){
	.modal,.modal__backdrop,.modal__dialog{transition:none !important}
}
/* Removed high-DPI nudge; icons now centered via variables */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.field .control{position:relative;height:var(--field-h)}
.input{width:100%;height:var(--field-h);border-radius:12px;border:1px solid var(--border);padding:0 14px;font:inherit;box-sizing:border-box}
.input[type="text"],
.input[type="email"],
.input[type="password"],
.input:not(textarea){line-height:var(--field-h)}
.input:focus{outline:none;border-color:#9ca3af;box-shadow:0 0 0 1px rgba(156,163,175,.45)}
.input:focus-visible{outline:none;border-color:#9ca3af;box-shadow:0 0 0 1px rgba(156,163,175,.45)}
/* Dark theme: subtle lighter-gray focus */
.theme-dark .input:focus{border-color:#6b7280;box-shadow:0 0 0 1px rgba(107,114,128,.35)}
.theme-dark .input:focus-visible{border-color:#6b7280;box-shadow:0 0 0 1px rgba(107,114,128,.35)}
.control.has-icon .input{padding-right:40px}

/* Fix Chrome/Opera autofill turning inputs white: keep theme-consistent background/text */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:autofill{
	-webkit-text-fill-color: inherit;
	caret-color: inherit;
	border: 1px solid var(--border) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
					box-shadow: 0 0 0 1000px var(--bg) inset;
	transition: background-color 9999s ease-in-out 0s;
}
.theme-dark .input:-webkit-autofill,
.theme-dark .input:-webkit-autofill:hover,
.theme-dark .input:-webkit-autofill:focus,
.theme-dark .input:autofill{
	-webkit-text-fill-color: #e5e7eb;
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
					box-shadow: 0 0 0 1000px var(--surface) inset;
}
.input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;background:transparent;color:#555;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-eye.on{display:none}
.toggle-pass.showing .icon-eye.on{display:block}
.toggle-pass.showing .icon-eye.off{display:none}

/* Left icons for username/email/password inputs */
.input.input--user{padding-left: calc(var(--icon-l) + var(--icon-sz) + 16px)}
.input.input--email{padding-left: calc(var(--icon-l) + var(--icon-sz) + 16px)}
.input.input--password{padding-left: calc(var(--icon-l) + var(--icon-sz) + 16px)}

/* Left icons using mask; exact vertical centering via variables */
.control:has(.input--user)::before,
.control:has(.input--email)::before,
.control:has(.input--password)::before{content:"";position:absolute;left:var(--icon-l);top:calc((var(--field-h) - var(--icon-sz)) / 2);width:var(--icon-sz);height:var(--icon-sz);background:var(--icon-color)}
.control:has(.input--user)::before{mask:url('logos/User.svg') no-repeat center / contain;-webkit-mask:url('logos/User.svg') no-repeat center / contain}
.control:has(.input--email)::before{mask:url('logos/Email.svg') no-repeat center / contain;-webkit-mask:url('logos/Email.svg') no-repeat center / contain}
.control:has(.input--password)::before{mask:url('logos/Password.svg') no-repeat center / contain;-webkit-mask:url('logos/Password.svg') no-repeat center / contain}

/* Auth submit button: violet with glow */
.auth-form .submit-main{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(139,92,246,.2);transition:transform .15s ease, box-shadow .2s ease, background-color .15s ease}
.auth-form .submit-main:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
/* Loading spinner inside submit button (new liquid loader) */
@keyframes btn-spin{to{transform:rotate(360deg)}}
.submit-main.is-loading{position:relative;color:transparent !important}
.submit-main.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;border:3px solid currentColor;animation:rotate .9s linear infinite, prixClipFix 2s linear infinite;filter:brightness(0) invert(1)}
.theme-dark .submit-main.is-loading::after{filter:none}

/* Generic loading state for any button (used on Add Product submit) */
.btn.is-loading{position:relative;pointer-events:none;color:transparent !important}
/* Hide element children too (text is hidden by color above) */
.btn.is-loading > *{visibility:hidden}
.btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;animation:rotate .9s linear infinite, prixClipFix 2s linear infinite}
/* Primary/dark buttons: white ring */
.btn--primary.is-loading::after{border:3px solid rgba(255,255,255,.95)}
/* Light/ghost buttons: dark ring */
.btn--pill.is-loading::after,.btn--ghost.is-loading::after{border:3px solid rgba(17,24,39,.9)}
.theme-dark .btn--pill.is-loading::after,.theme-dark .btn--ghost.is-loading::after{border-color:rgba(229,231,235,.95)}

/* Busy overlay (modal with spinner + blurred/dimmed background) */
#umBusyOverlay{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:saturate(120%) blur(10px);-webkit-backdrop-filter:saturate(120%) blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, visibility 0s linear .22s}
#umBusyOverlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease, visibility 0s linear 0s}
#umBusyOverlay .um-busy-card{background:#ffffff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);padding:18px 20px;display:flex;align-items:center;gap:12px;transform:translateY(6px) scale(.985);opacity:.98;animation:umBusyIn .22s ease-out both}
@keyframes umBusyIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
#umBusyOverlay .um-spinner{position:relative;width:26px;height:26px;border-radius:50%;animation:rotate 1s linear infinite !important;border:0 !important}
#umBusyOverlay .um-spinner::before{content:"";position:absolute;inset:0;border-radius:50%;box-sizing:border-box;border:3px solid #111827;animation:prixClipFix 2s linear infinite}
#umBusyOverlay .um-busy-text{font-weight:900;color:#111827}
.theme-dark #umBusyOverlay .um-busy-card{background:var(--surface);border-color:var(--border);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.theme-dark #umBusyOverlay .um-spinner::before{border-color:#e5e7eb}

/* Universal loader class + fallbacks for legacy classes used across pages */
.loader{width:48px;height:48px;border-radius:50%;position:relative;display:inline-block;animation:rotate 1s linear infinite}
.loader::before{content:"";box-sizing:border-box;position:absolute;inset:0;border-radius:50%;border:5px solid var(--loader-color, #fff);animation:prixClipFix 2s linear infinite}
.loader.loader--sm{width:18px;height:18px}
.loader.loader--sm::before{border-width:3px}
.spinner,.loading-spinner{position:relative;display:inline-block;border:0 !important;background:transparent !important;animation:rotate 1s linear infinite !important;width:var(--spin-w,20px);height:var(--spin-h,20px)}
.spinner::before,.loading-spinner::before{content:"";position:absolute;inset:0;border-radius:50%;box-sizing:border-box;border:3px solid var(--loader-color, #fff);animation:prixClipFix 2s linear infinite}

@keyframes rotate{100%{transform:rotate(360deg)}}
@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}100%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}
.theme-dark #umBusyOverlay .um-busy-text{color:#e5e7eb}

/* Tweak auth text colors in dark */
.theme-dark .auth-form .agree{color:#cbd5e1}
.theme-dark .auth-form .agree .link{color:#b295f5}

/* Market filters icon sizing */
.search{background-size:18px}
.dd.dd--rating .dd-toggle{background-size:18px}
.dd.dd--category .dd-toggle{background-size:18px}
.dd.dd--sort .dd-toggle{background-size:18px}

/* Toasts: Professional theme + Slide animation (bottom-right stack) */
#um-toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:12px;z-index:9999;pointer-events:none}
#um-toasts .um-toast{position:relative;max-width:380px;padding:12px 16px;border-radius:12px;font:600 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;box-shadow:0 12px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(40px);
	background:
		radial-gradient(circle at 50% 50%, var(--toast-glow, rgba(56,189,248,.22)) 0%, rgba(0,0,0,0) 62%),
		#2e2e2e;
	color:#eee;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto;border:none}
#um-toasts .um-toast.um-toast--in{animation:umToastSlideIn .6s ease-out forwards}
#um-toasts .um-toast.um-toast--out{animation:umToastSlideOut .28s ease-in forwards}
@keyframes umToastSlideIn{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
@keyframes umToastSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}
/* Variants by semantic type */
.um-toast--info{--toast-glow: rgba(56,189,248,.22)} /* blue */
.um-toast--success{--toast-glow: rgba(16,185,129,.24)} /* green */
.um-toast--error{--toast-glow: rgba(244,63,94,.26)} /* red */

/* Add-product: custom dropdown (category) */
.ap-dd{position:relative;display:block;width:100%}
.ap-dd__btn{width:100%;height:48px;border-radius:12px;border:1px solid var(--border);background:#fff;color:#111;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease}
.ap-dd__btn:focus{outline:none;border-color:var(--hover);box-shadow:0 0 0 3px rgba(178,149,245,.25)}
.ap-dd__label{font:inherit;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-dd__chev{color:#6b7280}
.ap-dd__list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.12);list-style:none;margin:0;padding:6px;max-height:260px;overflow:auto;z-index:2000;-webkit-overflow-scrolling:touch}
.ap-dd.ap-dd--up .ap-dd__list{top:auto;bottom:calc(100% + 6px)}
.ap-dd__opt{padding:10px 12px;border-radius:10px;cursor:pointer;transition:background-color .12s ease}
.ap-dd__opt{display:flex;align-items:center;gap:10px}
.ap-dd__opt .ap-dd__icon{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.ap-dd__opt .ap-dd__text{flex:1 1 auto;min-width:0}
.ap-dd__opt:hover{background:#f5f7fb}
.ap-dd__opt.is-selected{background:#efe9ff}
.ap-dd__opt[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.theme-dark .ap-dd__btn{background:var(--surface);color:#e5e7eb;border-color:var(--border)}
.theme-dark .ap-dd__list{background:var(--surface);color:#e5e7eb;border-color:var(--border);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.theme-dark .ap-dd__label{color:#e5e7eb}
.theme-dark .ap-dd__label.is-placeholder{color:#9aa1a8}
.theme-dark .ap-dd__chev{color:#9aa1a8}
.theme-dark .ap-dd__opt:hover{background:#222632}
.theme-dark .ap-dd__opt.is-selected{background:#26223a}

/* Price range icon slightly larger */
.pr__icon img{width:20px;height:20px}

/* Make add-to-cart Box.svg white */
.btn--add .btn__icon img{filter:brightness(0) invert(1)}

/* Remove black background behind Google icon */
.btn--google .btn__icon{background:transparent}

.agree{display:flex;gap:10px;align-items:flex-start;color:#444;font-size:14px;margin-top:4px}
.agree input{appearance:none;-webkit-appearance:none;width:18px;height:18px;aspect-ratio:1/1;box-sizing:border-box;border:1.5px solid var(--border);border-radius:4px;display:inline-block;position:relative;margin-top:3px;background:#fff;cursor:pointer;vertical-align:middle;transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease}
.agree input:focus{outline:none;border-color:var(--hover);box-shadow:0 0 0 3px rgba(178,149,245,.25)}
.agree input:checked{background:var(--hover);border-color:var(--hover);box-shadow:0 0 0 4px rgba(178,149,245,.18)}
.agree input::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-60%) rotate(45deg);opacity:0;transition:opacity .15s ease}
.agree input:checked::after{opacity:1}
.agree .link{color:#b295f5;text-decoration:none}
.agree .link:hover{text-decoration:underline}
.remember{display:none}
.auth--login .field--email,.auth--login .field--confirm{display:none}
.auth--login .remember{display:flex}
.auth--login .agree-terms{display:none}
.auth--login .submit-main{content:unset}
/* Hide strength meter on login */
.auth--login .pass-meter{display:none}

/* Password strength meter */
.pass-meter{margin-top:6px}
.pass-meter__track{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.pass-meter__bar{height:100%;width:0%;transition:width .18s ease, background-color .18s ease;background:#ef4444}
.pass-meter__label{margin-top:4px;font-size:12px;color:#6b7280}
.pass-weak .pass-meter__bar{background:#ef4444}
.pass-medium .pass-meter__bar{background:#f59e0b}
.pass-strong .pass-meter__bar{background:#10b981}

/* Inline field error */
.field-error{margin-top:6px;font-size:12px;color:#ef4444;display:none}
.field-error.is-visible{display:block}
.input.is-invalid{border-color:#ef4444 !important;background-color:#fff1f2}

/* Password input colored by strength (like review like/dislike chips) */
.input.str-weak{background-color:#ffe9e9;border-color:#ffc1c1;transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease}
.input.str-medium{background-color:#fff7d6;border-color:#fde68a;transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease}
.input.str-strong{background-color:#e8ffef;border-color:#b8efc5;transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease}
.input.str-weak:focus{box-shadow:0 0 0 3px rgba(255,97,97,.18)}
.input.str-medium:focus{box-shadow:0 0 0 3px rgba(253,230,138,.35)}
.input.str-strong:focus{box-shadow:0 0 0 3px rgba(184,239,197,.45)}

/* Dark theme tints */
.theme-dark .input.str-weak{background-color:#3b1f22;border-color:#7f2a30}
.theme-dark .input.str-medium{background-color:#3a341e;border-color:#8a7a2f}
.theme-dark .input.str-strong{background-color:#1e3627;border-color:#2f7a4e}

.btn--google{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 16px;justify-content:center;cursor:pointer;transition:background-color .15s ease,color .15s ease, box-shadow .15s ease}
.btn--google:hover{background:#7a45f5;color:#fff;box-shadow:0 10px 24px rgba(122,69,245,.35)}
.btn--google:active{transform:translateY(0);box-shadow:0 6px 16px rgba(122,69,245,.28)}
.btn--block{width:100%;justify-content:center;padding:14px 18px;border-radius:12px}

.modal__logo{display:block;margin:8px auto 16px;max-height:56px}

.auth-form__switch{margin:4px 0 0;color:rgba(0,0,0,.55);text-align:center;font-size:14px}
.auth-form__switch a{color:#8c71f2;text-decoration:none}
.auth-form__switch a:hover{text-decoration:underline}

/* Cart modal */
.cart-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease, visibility 0s linear .28s}
.cart-modal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease, visibility 0s linear 0s}
.cart__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);opacity:0;transition:opacity .28s ease}
.cart-modal.open .cart__backdrop{opacity:1}
.cart__dialog{position:relative;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);width:min(560px,92%);display:flex;flex-direction:column;max-height:min(86vh,920px);transform:translateY(16px) scale(.98);opacity:.96;transform-origin:top center;transition:opacity .28s ease, transform .34s cubic-bezier(0.16,1,0.3,1);will-change:transform, opacity}
.cart-modal.open .cart__dialog{transform:translateY(0) scale(1);opacity:1}
@media (prefers-reduced-motion: reduce){
	.cart-modal{transition:none}
	.cart__backdrop{transition:none}
	.cart__dialog{transition:none}
}
.theme-dark .cart__dialog{background:var(--surface)}
.cart__header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.cart__title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.cart__title img{display:inline-block}
.cart__count{background:#8c71f2;color:#fff;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}
.cart__close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#222;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cart__content{display:flex;flex-direction:column;min-height:240px;max-height:70vh;overflow:hidden}
.cart__empty{display:grid;place-items:center;text-align:center;color:#9aa1a8;gap:8px;padding:40px 20px}
.cart__items{list-style:none;margin:0;padding:0;overflow:auto}
.cart-item{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:12px 18px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.cart-item:hover{box-shadow:0 12px 28px rgba(0,0,0,.1)}
.ci__img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.ci__info{flex:1 1 auto;min-width:0}
.ci__title{font-weight:800;margin:0 0 4px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci__meta{display:flex;align-items:center;gap:12px;color:#6b7280;font-size:13px}
.unit-price{color:#6b7280}
.qty{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;padding:8px 12px;background:#fff}
.qty button{width:28px;height:28px;border-radius:10px;border:none;outline:none;background:#f3f4f6;color:#111;cursor:pointer;transition:background-color .15s ease, transform .05s ease;font-weight:800;font-size:16px;line-height:1}
.qty button:hover{background:#e7eaf0}
.qty button:active{transform:scale(0.98)}
.qty .q-val{min-width:20px;text-align:center;font-weight:800;font-size:16px;color:#111}
.ci__price{display:none}

/* Cart: per-item actions */
.cart-item .ci__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.cart-item .buy-one{background:#166534;border:1px solid #22c55e;color:#fff;border-radius:10px;padding:8px 12px;font-weight:800;transition:box-shadow .2s ease, transform .15s ease}
.cart-item .buy-one:hover{box-shadow:0 12px 28px rgba(34,197,94,.32);transform:translateY(-1px)}
.cart-item .buy-one:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.theme-dark .cart-item .buy-one,.cart-item .buy-one.btn--ghost{background:#166534 !important;border:1px solid #22c55e !important;color:#fff !important}
.theme-dark .cart-item .buy-one:hover{box-shadow:0 12px 28px rgba(34,197,94,.32);transform:translateY(-1px)}
.cart-item .remove-one{background:#7f1d1d;border:1px solid #ef4444;color:#fff;border-radius:10px;padding:8px 12px;font-weight:800;transition:box-shadow .2s ease, transform .15s ease}
.cart-item .remove-one:hover{box-shadow:0 14px 30px rgba(239,68,68,.32);transform:translateY(-1px)}

/* Cart: quantity controls */
.cart-item .qty{display:inline-flex;align-items:center;gap:8px;background:var(--surface,#f3f4f6);border:1px solid var(--border);border-radius:12px;padding:6px}
.theme-dark .cart-item .qty{background:rgba(255,255,255,.06)}
.cart-item .qty .q-minus,.cart-item .qty .q-plus{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:#fff;color:#111;font-weight:900;cursor:pointer;transition:box-shadow .2s ease, transform .15s ease, background .15s ease}
.cart-item .qty .q-minus:hover,.cart-item .qty .q-plus:hover{background:#f7f8fa;box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-1px)}
.theme-dark .cart-item .qty .q-minus,.theme-dark .cart-item .qty .q-plus{background:var(--surface);color:#f2f2f2}
.cart-item .qty .q-val{display:inline-block;min-width:20px;text-align:center;font-weight:900;color:var(--text)}
.ci__price-inline{display:inline-block;margin-left:8px;font-weight:800;color:#7a45f5}
.ci__actions{display:flex;align-items:center;gap:10px;margin-left:10px}
.btn--ghost{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer}
.btn--danger{background:#ffecec;border:1px solid #ffd0d0;color:#d0302c;border-radius:10px;padding:8px 10px;cursor:pointer}
.btn--danger .btn__icon img{width:18px;height:18px;filter: invert(16%) sepia(93%) saturate(4106%) hue-rotate(357deg) brightness(85%) contrast(103%)}
.btn--success{background:#eaffea;border:1px solid #c6f2c6;color:#198038;border-radius:10px;padding:8px 10px;cursor:pointer}
.btn--success .btn__icon img{width:18px;height:18px;filter: invert(26%) sepia(88%) saturate(333%) hue-rotate(94deg) brightness(90%) contrast(90%)}
.cart__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-top:1px solid var(--border)}
.cart__sum{font-weight:900;font-size:22px}
@media (max-width:480px){
  /* Cart: compact header and totals */
  .cart__title{font-size:18px}
	.cart__sum{font-size:14px;line-height:1.2}
	.cart__sum strong{font-size:13px}
  /* Cart items: improve readability on narrow screens */
  .ci__title{font-size:14px}
	/* right-aligned price hidden on mobile via display:none above */
	.ci__price-inline{font-size:14px}
	.cart-item{align-items:flex-start}
	.ci__actions{flex-direction:column;gap:8px;margin-left:8px}
	.ci__actions .btn--ghost,.ci__actions .btn--danger{width:100%;padding:6px 10px;font-size:13px}
  /* Footer spacing tighter */
  .cart__footer{gap:10px}
	/* Buy all button even smaller and content-width */
	.cart__buy-all{padding:6px 10px;min-height:32px;border-radius:10px;font-size:12px;width:auto;max-width:140px;flex:0 0 auto;white-space:nowrap;gap:6px}
	.cart__buy-all .btn__icon img{width:12px;height:12px}
}
.cart__buy-all{display:inline-flex;align-items:center;gap:10px}

/* Cart success overlay */
.cart__success{display:none;padding:28px 22px}
.cart__success.open{display:block}
.cart__success .success__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cart__success .success__icon{width:40px;height:40px;border-radius:999px;background:#22c55e;display:inline-grid;place-items:center;color:#fff;flex:0 0 auto}
.cart__success .success__title{margin:0;font-size:20px;font-weight:900}
.cart__success .success__list{list-style:none;margin:12px 0 10px;padding:0;max-height:40vh;overflow:auto}
.cart__success .success__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.cart__success .success__item:last-child{border-bottom:none}
.cart__success .success__name{font-weight:700}
.cart__success .success__meta{color:#6b7280}
.cart__success .success__sum{font-weight:900}
.cart__success .success__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* New success design cards */
.success-card{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(16,185,129,.08);margin-bottom:12px}
/* Success stack container (centered, taller layout) */
#cartSuccess .success-stack{width:min(520px,92%);margin:8px auto 0;animation:umSuccessIn .26s ease-out both;transform-origin:top center}
@keyframes umSuccessIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.success-banner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 18px}
.sc-icon{background:#22c55e;color:#fff;display:inline-grid;place-items:center;border-radius:999px}
.sc-icon--lg{width:40px;height:40px}
.sc-icon--sm{width:22px;height:22px}
.sc-text .sc-title{font-size:20px;font-weight:900;color:#065f46;margin:0}
.sc-text .sc-sub{font-size:14px;color:#047857;margin-top:2px}
.success-items{list-style:none;margin:10px 0;padding:0}
.si{display:flex;align-items:flex-start;justify-content:space-between;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px 16px;margin:12px 0;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.si-left{display:flex;align-items:center;gap:10px;color:#111827}
.si-title{font-weight:700;color:#111827}
.si-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.si-price{font-weight:900;color:#0f172a;font-size:18px}
.si-qty{background:#f3f4f6;color:#111827;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:12px}
.success-summary{background:#fff;border:1px solid #e5e7eb}
.sum-row{display:flex;justify-content:space-between;margin:8px 0;color:#065f46}
.sum-row.total{font-weight:900;color:#059669;font-size:18px}
.sum-total{color:#059669}
.success-actions{display:flex;gap:10px;margin-top:10px;justify-content:center}
/* legacy success container */
.success__actions{display:flex;justify-content:center}
.btn-success-primary{background:linear-gradient(90deg,#34d399,#10b981);color:#fff;font-weight:800;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:box-shadow .18s ease, transform .14s ease, filter .14s ease}
.btn-success-primary:hover{filter:brightness(1.02);box-shadow:0 14px 34px rgba(16,185,129,.35);transform:translateY(-1px)}
.btn-success-primary .btn-ico{width:18px;height:18px;opacity:.95}
.btn-success-primary .btn-ico img{filter:brightness(0) invert(1)}
.btn-success-secondary{background:#f9fafb;color:#111827;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px;cursor:pointer}
.btn-success-secondary:hover{background:#f9fafb}

/* Thumbnails in success list */
.si-thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid #e5e7eb;background:#fff}

/* Stack glue (connect cards and list visually) */
.success-stack .stack-top{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
.success-stack .stack-bottom{border-top-left-radius:8px;border-top-right-radius:8px}
.success-stack .success-items{margin-top:8px}
.btn--ok{background:#22c55e;color:#fff;border:1px solid #22c55e;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn--ok:hover{filter:brightness(0.95)}

/* Product page */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;margin-bottom:14px}
.back-link:hover{color:var(--hover);text-decoration:underline}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;margin-top:8px}
.product__media-inner{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.12);aspect-ratio:3/2;min-height:460px;background:#f7f8fa}
.product__media-inner img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Fade effect for switching main product image */
.um-fade{transition:opacity .3s ease,filter .3s ease}
.um-fade.out{opacity:0;filter:blur(4px)}
/* Product thumbnails gallery (responsive full-width grid) */
.product__thumbs,.p-thumbs{margin-top:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));width:100%;padding:0}
/* Hide scrollbar styling no longer needed since we avoid horizontal scroll */
.p-thumb{position:relative;display:block;padding:0;border:1px solid var(--border);background:#fff;border-radius:12px;overflow:hidden;cursor:pointer;opacity:.8;transition:.22s opacity,.22s box-shadow,.22s transform;aspect-ratio:4/3;max-height:120px}
.p-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.p-thumb__num{position:absolute;top:4px;left:6px;font-size:11px;font-weight:600;line-height:1;padding:3px 6px;border-radius:20px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(2px)}
.p-thumb--more{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;letter-spacing:.3px;color:var(--violet);background:linear-gradient(135deg,var(--violet) 0%,var(--violet) 0%) no-repeat;border:1px dashed var(--violet);opacity:1;box-shadow:none;aspect-ratio:auto;min-height:48px;padding:8px 10px}
.p-thumb--more:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.p-thumb--more:hover{background:var(--violet);color:#fff;border-style:solid}
.p-thumb:hover{opacity:.95}
.p-thumb[aria-current="true"]{opacity:1;box-shadow:0 0 0 3px var(--violet)}
.p-thumb:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.pnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 10px 28px rgba(0,0,0,.18);cursor:pointer;display:grid;place-items:center;font-size:18px;color:#111}
.pnav:hover{background:#fff;transform:translateY(-50%) translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.24)}
.pnav:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:2px}
.pnav--prev{left:10px}
.pnav--next{right:10px}
/* Dark: neutral chip for image nav buttons */
.theme-dark .pnav{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(0,0,0,.5);color:#fff}
.theme-dark .pnav:hover{background:rgba(255,255,255,.18)}
.product__title{margin:0 0 8px;font-size:20px;line-height:1.22;font-weight:900;display:flex;align-items:center;gap:8px}
/* Prevent extremely long titles from causing horizontal overflow */
.product__title,.seller-title{word-break:break-word;overflow-wrap:anywhere}
/* Ensure seller line content can shrink inside flex and wrap */
.seller-line{min-width:0;flex-wrap:wrap}
.seller-col{min-width:0}
/* Extremely long seller names: let them shrink/wrap without pushing layout */
#productSellerName{min-width:0;max-width:100%;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width: 480px){
	#productSellerName{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;overflow-wrap:anywhere}
}
/* Extra small phones: keep slightly smaller */
@media (max-width: 420px){.product__title{font-size:17px}}
/* Tablets */
@media (min-width: 768px){.product__title{font-size:22px}}
/* Desktop */
@media (min-width: 1024px){.product__title{font-size:28px}}
.product .stats{margin-top:var(--stats-min-gap)}
.product .stats span{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-weight:700}
.product .stats img{opacity:.9;filter:grayscale(0)}
.product__buy{display:flex;flex-direction:column;gap:14px;margin:18px 0}
/* Allow price line to wrap (price + qty badge) without pushing layout horizontally */
#productPrice, .product__price{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
#productQty{white-space:normal}
.product__price{font-size:36px;font-weight:900}
.product__cta{display:flex;align-items:center;gap:14px}
/* Mobile: place seller line below action buttons so long nicknames fit */
@media (max-width: 520px){
	/* Inline flex on element wins by default; override to grid on small screens */
	#productSeller{display:grid !important;grid-template-columns:48px 1fr auto;grid-template-areas:
		"icon title actions"
		"icon seller actions";align-items:center;column-gap:10px;row-gap:0}
	#productSeller .seller-icon{grid-area:icon}
	/* Flatten children so title and seller-line can be placed in grid directly */
	#productSeller .seller-col{display:contents}
	#productTitle{grid-area:title}

	/* Image modal tweaks: slightly smaller height on very small screens */
	#img-modal img{max-width:96vw;max-height:88vh}
	#productSeller .seller-line{grid-area:seller;min-width:0}
	#productSeller .seller-actions{grid-area:actions;justify-self:end;margin-left:0 !important}
}
.product__cta .btn--add{flex:1 1 auto;min-height:56px;padding:16px 24px;border-radius:12px;font-weight:900;font-size:16px;justify-content:center;background:linear-gradient(90deg,#a78bfa,#8b5cf6);border:1px solid #8b5cf6;box-shadow:0 14px 34px rgba(139,92,246,.28);transition:transform .18s ease, box-shadow .22s ease, filter .16s ease}
.product__cta .btn--add:hover{filter:brightness(1.02);transform:translateY(-1px);box-shadow:0 18px 42px rgba(139,92,246,.35)}
.product__cta .btn--add:active{transform:translateY(0)}
.product__cta .btn--add{width:100%}
/* Desktop: do not let the Add-to-Cart button stretch too wide */
@media (min-width: 1025px){
	.product__cta .btn--add{
		flex:0 0 auto; /* stop stretching on desktop */
		max-width:420px; /* cap width so it doesn't look oversized */
		width:100%;
	}
}
.product__cta .btn--add .btn__icon{width:28px;height:28px}
.product__cta .fav-btn{position:static;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--border);background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.14);border-radius:999px}
.product__divider{border:none;border-top:1px solid var(--border);margin:18px 0}
.product__subhead{font-size:20px;font-weight:800;margin:0 0 8px}
.product__desc{color:#454c54;line-height:1.7}
/* Seller card: compact dark surface with subtle border, like in screenshot */
.product__seller{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;color:var(--text) !important}
.theme-dark .product__seller strong{color:#e5e7eb}
/* VirusTotal button on product page */
.product__info{position:relative}
#productVTBtn{
	position:absolute;
	top:0; right:0; /* will be shifted left when website button visible via JS */
	display:inline-flex; align-items:center; justify-content:center;
	padding:10px 16px; /* шире по горизонтали */
	min-height:48px;
	border-radius:10px;
	line-height:0; /* убрать лишний вертикочный ритм */
}
#productVTBtn img{
	display:block;
	height:24px; /* крупнее и не сплющено */
	width:auto; /* сохраняем пропорции */
	filter: invert(1); /* сделать чёрный svg белым на синем фоне */
	transform: translateX(-1px); /* чуть левее по просьбе */
}

/* Website button on product page (desktop absolute next to VT; mobile inline) */
#productSiteBtn{
	position:absolute;
	top:0; right:0; /* сайт — самый правый, а VT сдвигаем левее */
	display:inline-flex; align-items:center; justify-content:center;
	padding:10px 16px;
	min-height:48px;
	border-radius:10px;
	line-height:0;
	background:#262626; /* чисто серый (без синевы) */
	color:#fff; border:1px solid #3d3d3d;
}
#productSiteBtn:hover{ background:#2b2a2a; border-color:#2f2f2f; }
#productSiteBtn img{
	display:block; height:24px; width:auto;
}

	/* Mobile: place VT button inline to the right of Buy/Edit button inside .product__cta */
	@media (max-width: 640px){
		#productVTBtn{
			position:static;
			padding:0;
			width:50px; min-width:50px; height:44px; min-height:44px; /* высота как у Редактировать (~44px), ширина чуть больше */
			border-radius:12px;
			margin-left:-1px; /* чуть ближе к основной кнопке */
		}
		#productVTBtn img{
			height:20px; /* под 44px высоту кнопки */
			transform:none; /* не смещаем на мобильном, визуально ровнее */
		}
		#productSiteBtn{
			position:static;
			padding:0;
			width:50px; min-width:50px; height:44px; min-height:44px;
			border-radius:12px;
		}
		#productSiteBtn img{ height:20px; }
	}
.btn--blue{background:#2563eb;color:#fff;border:1px solid #1d4ed8}
.btn--blue:hover{background:#1d4ed8;border-color:#1e40af}
.product__muted{color:#9aa1a8}
/* Product page: created/updated dates row — show as two small cards on larger screens */
.product__dates{display:grid;grid-template-columns:1fr;gap:10px;color:var(--muted);font-size:13px;margin:10px 0 14px}
.product__dates .dot{display:none}
.product__dates span{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);font-weight:800}
@media (min-width: 768px){.product__dates{grid-template-columns:1fr 1fr;gap:12px}}

@media (max-width: 1024px){
	.product{grid-template-columns:1fr;gap:26px}
	.product__media-inner{min-height:360px}
}
@media (max-width: 640px){
	.product__media-inner{min-height:260px}
}

/* Add product */
.ap-form{width:100%;margin:8px 0}
.ap-center{display:block;margin:0 auto;width:min(820px,92%)}
.ap-field{margin:18px 0}
.ap-label{display:block;font-weight:800;margin:0 0 8px}
.ap-textarea{min-height:120px;resize:vertical}
.ap-help{font-size:12px;color:var(--muted);text-align:right;margin-top:6px}
.ap-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
.input.is-hidden{position:absolute !important;opacity:0 !important;pointer-events:none !important;width:0;height:0}
.ap-dd{position:relative;display:block}
.ap-dd__btn{position:relative;height:48px;border-radius:14px;border:1px solid var(--border);background:#fff;padding:0 44px 0 14px;display:flex;align-items:center;gap:8px;font:inherit;color:#111;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ap-dd__btn .ap-dd__icon{width:18px;height:18px;object-fit:contain}
.ap-dd__btn:focus{outline:none;border-color:var(--hover);box-shadow:0 0 0 3px rgba(178,149,245,.2)}
.ap-dd__chev{position:absolute;right:12px;color:#6b7280;transition:transform .12s ease}
.ap-dd.open .ap-dd__chev{transform:rotate(180deg)}
.ap-dd__menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.14);padding:8px;list-style:none;margin:0;z-index:60}
.ap-dd__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;color:#111}
.ap-dd__item:hover{background:#f5f6f8}
.ap-dd__item.is-active{background:var(--hover);color:#fff}
.ap-drop{border:2px dashed var(--border);border-radius:14px;height:180px;display:grid;place-items:center;background:#fff;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.ap-drop:focus,.ap-drop:hover{background:#faf9ff;border-color:#d8cdfa}
.ap-drop__icon{font-size:22px;color:#6b7280;text-align:center}
.ap-drop__text{color:#6b7280}
.ap-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ap-thumb{width:96px;height:96px;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--border);background:#f7f8fa}
.ap-thumb img{width:100%;height:100%;object-fit:cover}
.ap-thumb button{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
/* Dark: neutral chip for remove button over thumbs */
.theme-dark .ap-thumb button{background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ap-keys{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ap-key{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#f1f2f6;border:1px solid var(--border);font-size:12px}
.ap-key code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.ap-key button{border:none;background:transparent;color:#555;cursor:pointer;font-size:14px;line-height:1}

/* Settings */
.set-tabs{display:flex;gap:10px;margin:12px 0 16px}
.set-tab{height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:#fff;color:#111;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.set-tab.is-active{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.acc-tabs .set-tab img{vertical-align:middle}
.acc-tabs .set-tab.is-active img{filter:brightness(0) invert(1)}
.set-panel{margin:14px 0}
.set-panel.is-hidden{display:none}
.set-card{background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.08);padding:14px 16px}
.theme-dark .set-card{background:var(--surface)}
.theme-dark .set-card .btn--primary{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.theme-dark .set-card .btn--primary:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}
.set-card.danger{background:#fff5f5;border:1px solid #ffdede}
.theme-dark .set-card.danger{background:#2a1317;border:1px solid #7f1d1d}
.set-card__head{display:flex;align-items:center;gap:10px}
.set-card__head h2{margin:0;font-size:22px;font-weight:900}
.set-card__icon{width:34px;height:34px;border-radius:10px;background:#dcd0ff;display:inline-flex;align-items:center;justify-content:center}
.theme-dark .set-card__icon{background:var(--surface-2)}
.set-card__icon.warn{background:#ffe082;color:#222;font-weight:900}
.theme-dark .set-card.danger .set-card__icon.warn{background:#5b1a1e;color:#fecaca}
.set-divider{border:none;border-top:1px solid var(--border);margin:12px 0}
.set-form{display:flex;flex-direction:column;gap:14px}
.set-field{display:flex;flex-direction:column;gap:6px}
.set-label{font-weight:800}
.set-actions{display:flex;gap:12px;justify-content:flex-start;margin-top:6px}
.set-avatar{display:flex;align-items:center;gap:16px;margin:6px 4px 16px}
.avatar--lg{width:72px;height:72px;border-radius:999px;background:var(--hover);color:#fff;display:inline-grid;place-items:center;font-weight:900;font-size:28px;overflow:hidden;background-size:cover;background-position:center}
.set-avatar__actions{display:flex;gap:10px;flex-wrap:wrap}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid #f1f2f4}
.set-row:last-child{border-bottom:none}
.set-row__text{display:flex;flex-direction:column}
.set-row__title{font-weight:800}
.set-row__sub{font-size:13px;color:#6b7280}
/* Switch */
.switch{position:relative;display:inline-block;width:52px;height:30px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#e5e7eb;border-radius:999px;transition:.2s}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:4px;top:4px;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:.2s}
.switch input:checked + .slider{background:#8b5cf6}
.switch input:checked + .slider:before{transform:translateX(22px)}

/* Reviews block */
.reviews{margin-top:32px; grid-column: 1 / -1}
.reviews__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.reviews__summary{display:flex;align-items:center;gap:12px;color:var(--muted)}
.reviews__avg{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.reviews__form{display:grid;grid-template-columns:1fr max-content;gap:8px;align-items:start;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.06);border-radius:16px;padding:8px 10px 6px;margin:10px 0}
/* Remove default paragraph margins inside the reviews form to avoid bottom whitespace */
.reviews__form .purch-meta{margin:0}
.theme-dark .reviews__form{background:var(--surface)}
.rf__left{display:flex;flex-direction:column;gap:8px}
.rating{display:inline-flex;gap:8px;align-items:center}
.rating .star{width:auto;height:auto;border-radius:8px;border:none;background:transparent;color:#777;font-size:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:6px;transition:color .18s ease, background .18s ease}
.rating .star:hover{background:rgba(0,0,0,.06);transform:none;color:#999}
.theme-dark .rating .star:hover{background:rgba(255,255,255,.04)}
.rating .star.is-on{color:#f5d347}
.rf__right{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.rf__text{min-height:calc(36px + 8px + 44px);border-radius:12px;resize:vertical;width:100%;overflow:auto}
.rf__actions{display:flex;gap:8px;align-items:center;width:100%}
.rf__actions .btn{width:100%}
.reviews__list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.review{display:flex;gap:12px;border:1px solid var(--border);border-radius:16px;background:#fff;padding:12px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.reviews__head{flex-wrap:wrap}
.rev__text,.review{word-break:break-word;overflow-wrap:anywhere}
.theme-dark .review{background:var(--surface)}
.rev__avatar{width:36px;height:36px;border-radius:999px;background:#e9e1ff;color:#6b63ff;display:inline-grid;place-items:center;font-weight:900;flex:0 0 auto}
.rev__body{flex:1 1 auto;min-width:0}
.rev__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rev__name{font-weight:800}
.rev__meta{font-size:12px;color:#6b7280}
.rev__stars{color:#f59e0b}
.rev__text{margin:6px 0 0;color:#111}
.theme-dark .rev__text{color:#e5e7eb}
.rev__actions{margin-left:auto;display:flex;gap:8px}
.rev__votes{margin-left:auto;display:flex;align-items:center;gap:10px}
.rev__vote{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:4px 8px;cursor:pointer;user-select:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.rev__vote .cnt{font-weight:700}
.rev__vote.like{color:#0f766e;border-color:#99f6e4;background:#ecfdf5}
.rev__vote.dislike{color:#b91c1c;border-color:#fecaca;background:#fff1f2}
.theme-dark .rev__vote.like{color:#34d399;border-color:#065f46;background:#052e2b}
.theme-dark .rev__vote.dislike{color:#fca5a5;border-color:#7f1d1d;background:#3f0d0d}
/* In dark theme, make the thumb icon light for better contrast */
.theme-dark .rev__vote img{filter:brightness(0) invert(1)}
/* Active state: make selection clearly visible */
.rev__vote.is-active.like{background:#0d9488;color:#fff;border-color:#0f766e}
.rev__vote.is-active.dislike{background:#b91c1c;color:#fff;border-color:#7f1d1d}
.theme-dark .rev__vote.is-active.like{background:#065f46;color:#ecfdf5;border-color:#10b981}
.theme-dark .rev__vote.is-active.dislike{background:#7f1d1d;color:#fee2e2;border-color:#fca5a5}
.rev__vote:focus-visible{outline:2px solid var(--hover); outline-offset:2px}
.rev__btn{background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 10px;cursor:pointer}
.rev__btn.danger{background:#ffecec;border-color:#ffd0d0;color:#d0302c}

@media (max-width: 640px){
	.reviews__form{grid-template-columns:1fr;gap:12px}
	.rf__right{justify-content:flex-start}
}

/* Violet submit button for reviews */
.btn--violet{background:var(--primary);color:#fff;border:1px solid var(--primary);border-radius:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .15s ease, background-color .15s ease}
.btn--violet:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.32);transform:translateY(-1px)}

/* Mobile fine-tuning for Settings and dropdowns */
@media (max-width: 420px){
	/* Tabs smaller text */
	.set-tabs{gap:8px;flex-wrap:wrap}
	.set-tab{height:34px;padding:0 10px;font-size:12px}
	/* Card head title slightly smaller */
	.set-card__head h2{font-size:18px}
	/* Row titles/subtitles smaller */
	.set-row__title{font-size:15px}
	.set-row__sub{font-size:12px}
	/* Dropdown button smaller height and text */
	.ap-dd__btn{height:42px;font-size:14px}
	.ap-dd__label{font-size:14px}
		/* Dropdown menu taller on mobile viewport but still scrollable */
	.ap-dd__list{max-height:50vh}
		.ap-dd__opt{font-size:14px}
}

@media (max-width:640px){
  .product{padding-bottom:84px;} /* пространство под нижний navbar */
  main.container{padding-bottom:100px!important;} /* чуть больше чтобы FAB и bottom-nav не перекрывали текст */
	body,html{max-width:100%;overflow-x:hidden}
	/* Медиа блок: фиксированное прямоугольное окно с кропом (cover) */
	.product__media-inner{width:100%;border-radius:20px;margin:0 auto;aspect-ratio:3/2;min-height:auto;padding:0;background:#f7f8fa;position:relative;overflow:hidden}
	.product__media-inner img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;max-height:none}
	/* Phones: hide gallery arrows */
	.product__media-inner .pnav{display:none !important}
	/* Превью: симметричные поля вместо правого смещения */
	.product__thumbs,.p-thumbs{grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:10px;margin:8px 0 0 0;padding:0 2px}
	.reviews{margin-right:0}
	/* Чуть уменьшаем номера для компактности */
	.p-thumb__num{font-size:10px;padding:2px 5px}
}

/* Узкий экран <480px: ещё мягче поведение */
@media (max-width:480px){
	/* На очень узких экранах просто сохраняем то же поведение (cover в прямоугольнике) */
	.product__media-inner{aspect-ratio:4/3}
	.product__media-inner img{height:100%;}
	.product__thumbs,.p-thumbs{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}
}

/* --------- Dark theme refinements (global) --------- */
/* Invert site logo for dark header */
.theme-dark .logo__img{filter:brightness(0) invert(1)}

/* Success view (cart) dark palette */
.theme-dark .cart__success .success__head .success__title{color:#e5e7eb}
.theme-dark .success-card{background:var(--surface-2);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.theme-dark #cartSuccess .success-stack{color:#d1fae5}
.theme-dark .success-banner{background:linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.10));border:1px solid rgba(34,197,94,.35);color:#d1fae5}
.theme-dark .sc-text .sc-title{color:#86efac}
.theme-dark .sc-text .sc-sub{color:#a7f3d0}
/* Product titles in success list should be readable on dark */
.theme-dark .success-items .si-title{color:#ffffff}
.theme-dark .si{background:var(--bg);border:1px solid var(--border);color:#e5e7eb}
.theme-dark .si-price{color:#22c55e}
.theme-dark .si-qty{background:var(--surface-2);color:#e5e7eb;border:1px solid var(--border)}
.theme-dark .success-summary{background:var(--bg);border:1px solid var(--border)}
.theme-dark .sum-row{color:#bbf7d0}
.theme-dark .sum-row.total,.theme-dark .sum-total{color:#34d399}

/* Generic custom dropdown dark (market/settings) */
.theme-dark .dd-toggle{background:var(--surface);border:1px solid var(--border);color:#e5e7eb}
.theme-dark .dd-menu{background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.theme-dark .dd__chev{color:#9aa1a8}
.theme-dark .dd-item{color:#e5e7eb}
.theme-dark .dd-item:hover{background:#222632}
.theme-dark .dd-item.selected{background:var(--primary);color:#fff}

/* Market search: white search icon via inline SVG and darker field */
.theme-dark .search{background-color:var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:16px center; background-size:18px 18px; color:#e5e7eb}
.theme-dark .search::placeholder{color:#9aa1a8}
/* Market: Reset button dark + price range Min/Max dark */
.theme-dark #resetFilters{background:var(--surface);border:1px solid var(--border);color:#e5e7eb}
.theme-dark .pr{background:var(--surface-2);border:1px solid var(--border)}
.theme-dark .pr .pnum{color:#e5e7eb}
.theme-dark .pr .pnum::placeholder{color:#9aa1a8}
.theme-dark .pr .pr__curr{color:#e5e7eb}
.theme-dark .pr__icon img{filter:brightness(0) invert(1)}

/* Market filter toggles: white left icons using masks */
.theme-dark .dd.dd--category .dd-toggle,.theme-dark .dd.dd--rating .dd-toggle,.theme-dark .dd.dd--sort .dd-toggle{background-image:none}
.theme-dark .dd.dd--category .dd-toggle::before,
.theme-dark .dd.dd--rating .dd-toggle::before,
.theme-dark .dd.dd--sort  .dd-toggle::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:#e5e7eb}
.theme-dark .dd.dd--category .dd-toggle::before{-webkit-mask:url('logos/Burger_Menu.svg') no-repeat center/contain;mask:url('logos/Burger_Menu.svg') no-repeat center/contain}
.theme-dark .dd.dd--rating .dd-toggle::before{-webkit-mask:url('logos/Star.svg') no-repeat center/contain;mask:url('logos/Star.svg') no-repeat center/contain}
.theme-dark .dd.dd--sort .dd-toggle::before{-webkit-mask:url('logos/Filter.svg') no-repeat center/contain;mask:url('logos/Filter.svg') no-repeat center/contain}
/* Settings dropdowns: white left icons in dark */
.theme-dark .dd.dd--lang .dd-toggle{background-image:none}
.theme-dark .dd.dd--lang .dd-toggle::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:#e5e7eb;-webkit-mask:url('logos/Settings.svg') no-repeat center/contain;mask:url('logos/Settings.svg') no-repeat center/contain}
.theme-dark .dd.dd--currency .dd-toggle{background-image:none}
.theme-dark .dd.dd--currency .dd-toggle::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:#e5e7eb;-webkit-mask:url('logos/Money.svg') no-repeat center/contain;mask:url('logos/Money.svg') no-repeat center/contain}
/* Market game filter: always mask generic Game.svg in dark so it looks white */
.theme-dark .dd.dd--game .dd-toggle{background-image:none !important}
.theme-dark .dd.dd--game .dd-toggle::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:#e5e7eb;-webkit-mask:url('logos/Game.svg') no-repeat center/contain;mask:url('logos/Game.svg') no-repeat center/contain}

/* Market game filter: force white generic icon when using mask helper */
.theme-dark .dd.dd--game .dd-toggle.use-mask-game{background-image:none !important}
.theme-dark .dd.dd--game .dd-toggle.use-mask-game::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:#e5e7eb;-webkit-mask:url('logos/Game.svg') no-repeat center/contain;mask:url('logos/Game.svg') no-repeat center/contain}

/* ===== Dark theme enhancements across pages ===== */
/* Make key UI icons white in dark theme */
.theme-dark .icon-btn img{filter:brightness(0) invert(1)}
.theme-dark .bn-icon{filter:brightness(0) invert(1)}
.theme-dark .stats img{filter:brightness(0) invert(1)}
.theme-dark .set-card__icon img{filter:brightness(0) invert(1)}
/* Profile page hero buttons & product action icon in dark */
.theme-dark #prMsgBtn img,.theme-dark #prSubBtn img{filter:brightness(0) invert(1)}
.theme-dark .profile-card-action .btn__icon img{filter:brightness(0) invert(1)}

/* Header user menu dark */
.theme-dark .user-menu{background:var(--surface);box-shadow:0 14px 40px rgba(0,0,0,.5);border:1px solid var(--border)}
.theme-dark .menu-balance{background:var(--surface);color:#e5e7eb}
.theme-dark .menu-item{background:var(--surface);color:#e5e7eb}
.theme-dark .menu-item:hover{background:var(--hover);color:#fff}
.theme-dark .menu-item img{filter:brightness(0) invert(1)}
.theme-dark .menu-item.exit{color:#fca5a5}
.theme-dark .menu-item.exit:hover{background:#3a1f25;color:#fecaca}

/* Home hero CTA in dark: keep violet as in light */
.theme-dark .hero .btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 12px 28px rgba(139,92,246,.28)}
.theme-dark .hero .btn--primary:hover{background:var(--hover);box-shadow:0 16px 36px rgba(139,92,246,.38)}

/* Cards & fav button tweaks */
.theme-dark .fav-btn{background:var(--surface);border:1px solid var(--border);color:#e5e7eb}
.theme-dark .card__seller{color:var(--text)}

/* Product page */
.theme-dark .product__desc{color:#cbd5e1}
.theme-dark .product__cta .fav-btn{background:var(--surface);border:1px solid var(--border);color:#e5e7eb}
.theme-dark .product__seller{color:#e5e7eb}
/* Dark: product dates use muted tone */
.theme-dark .product__dates{color:#9aa1a8}

/* Notifications */
.theme-dark .notif-item{background:var(--surface);border-color:var(--border)}
.theme-dark .notif-text{color:#9aa1a8}
.theme-dark .notif-meta{color:#6b7280}
.theme-dark .notif-clear{border-color:var(--border);color:#e5e7eb}
.theme-dark .notif-clear img{filter:brightness(0) invert(1)}

/* Cart: dark surfaces and violet primary */
.theme-dark .cart__close{background:var(--surface);color:#e5e7eb;border-color:var(--border)}
.theme-dark .cart-item{background:var(--surface);border-color:var(--border)}
.cart__buy-all{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important}
.cart__buy-all:hover{background:var(--hover) !important}
.theme-dark .cart__title img{filter:brightness(0) invert(1)}
.theme-dark .ci__meta,.theme-dark .unit-price{color:#9aa1a8}
.theme-dark .qty{background:var(--surface)}
/* Cart qty controls & value */
.theme-dark .qty .q-val{color:#e5e7eb}
.theme-dark .qty button{background:var(--surface-2);color:#e5e7eb}
.theme-dark .qty button:hover{background:var(--surface)}
.theme-dark .btn--ghost{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .btn--danger{background:#3a1f25;border-color:#7f1d1d;color:#fecaca}
.theme-dark .btn--success{background:#052e16;border-color:#064e3b;color:#bbf7d0}
/* Cart success: brighten product names in dark */
.theme-dark .cart__success .success__name{color:#e5e7eb}

/* Settings: tabs & panels */
.theme-dark .set-tab{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .set-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.theme-dark .set-row{border-bottom-color:var(--border)}
.theme-dark .set-row__sub{color:#9aa1a8}

/* Inputs in dark */
.theme-dark .input{background-color:var(--surface-2);border-color:var(--border);color:#e5e7eb}
.theme-dark .input::placeholder{color:#9aa1a8}
.theme-dark .input-icon{color:#9aa1a8}
/* Modal close button in dark */
.theme-dark .modal__close{background:var(--surface);color:#e5e7eb;border-color:var(--border)}
/* Dark: hover for close chip */
.theme-dark .modal__close:hover{background:var(--surface-2);box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* Account page surfaces */
.theme-dark .dash-card{background:var(--surface);border-color:var(--border)}
.theme-dark .dash-card h3{color:#9aa1a8}
.theme-dark .dash-card .val{color:#e5e7eb}
.theme-dark .acc-section{background:var(--surface);border-color:var(--border)}
.theme-dark .purch-item{background:var(--surface-2);border-color:var(--border)}
.theme-dark .purch-meta{color:#9aa1a8}
.theme-dark .p-badge{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .prod-card{background:var(--surface);border-color:var(--border)}
.theme-dark .prod-media{background:var(--bg)}
.theme-dark .status{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .bal-item{background:var(--surface);border-color:var(--border)}
.theme-dark .bal-icon{background:var(--surface-2)}
.theme-dark .bal-icon img{filter:brightness(0) invert(1)}
.theme-dark .bal-title{color:#e5e7eb}
.theme-dark .bal-text,.theme-dark .bal-meta{color:#9aa1a8}

/* Profile */
.theme-dark .pr-hero{background:var(--surface);border-color:var(--border)}
.theme-dark .pr-username{color:#9aa1a8}
.theme-dark .pr-card{background:var(--surface);border-color:var(--border)}
.theme-dark .mini-stat__val{color:#e5e7eb}
/* Profile: dark-suited default avatar and violet actions */
.theme-dark .pr-avatar{background:var(--surface-2);color:#e5e7eb}
.theme-dark #prMsgBtn,.theme-dark #prSubBtn{background:var(--primary);border-color:var(--primary);color:#fff}

/* Admin */
.theme-dark .admin-sidebar{background:var(--surface);border-color:var(--border);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.theme-dark .admin-sidebar .menu-title{color:#e5e7eb}
.theme-dark .admin-menu .g-head{color:#e5e7eb}
.theme-dark .admin-menu .g-head:hover{background:var(--surface-2)}
.theme-dark .admin-menu .sub a{color:#cbd5e1}
.theme-dark .admin-menu .sub a:hover{background:var(--surface-2);color:#fff}
.theme-dark .admin-sidebar .g-ico img,.theme-dark .admin-menu .sub a img{filter:brightness(0) invert(1)}
.theme-dark .adm-card{background:var(--surface);border-color:var(--border);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.theme-dark .adm-card .media{background:var(--bg)}
.theme-dark .adm-card .title{color:#e5e7eb}
.theme-dark .adm-card .price{color:#fff}
.theme-dark .adm-card .meta{color:#9aa1a8}
/* Admin charts wrappers and strokes in dark */
.theme-dark #admChartWrap,.theme-dark #admMoneyChartWrap{background:var(--surface) !important;border-color:var(--border) !important}
.theme-dark #admChart .grid line,.theme-dark #admMoneyChart .grid line{stroke:var(--border)}
.theme-dark #admChartPath,.theme-dark #admMoneyChartPath{stroke:#8b5cf6}
.theme-dark #admChartDots,.theme-dark #admMoneyChartDots{fill:#8b5cf6}
.theme-dark #admChartLabels,.theme-dark #admMoneyChartLabels{fill:#9aa1a8}
/* Account stats chart (match admin) */
.theme-dark #accChartWrap{background:var(--surface) !important;border-color:var(--border) !important}
.theme-dark #accChart .grid line{stroke:var(--border)}
.theme-dark #accChartBuyPath{stroke:#8b5cf6}
.theme-dark #accChartSellPath{stroke:#f472b6}
.theme-dark #accChartDotsBuy{fill:#8b5cf6}
.theme-dark #accChartDotsSell{fill:#f472b6}
.theme-dark #accChartLabels{fill:#9aa1a8}
/* Admin: chart headings and activity icons */
.theme-dark #admChartWrap > div,.theme-dark #admMoneyChartWrap > div{color:#e5e7eb !important}
.theme-dark #accChartWrap > div{color:#e5e7eb !important}
.theme-dark .adm-activity .purch-img{filter:brightness(0) invert(1) contrast(1.05)}
/* Admin tables: brighten headers and inputs */
.theme-dark .adm-table th{color:#e5e7eb}
.theme-dark .adm-table td{color:#e5e7eb}
.theme-dark .adm-table td .input{background-color:var(--surface-2);border-color:var(--border);color:#e5e7eb}

/* Chat */
.theme-dark .chat-layout{background:var(--bg);border-color:var(--border)}
.theme-dark .chat-sidebar{background:var(--surface-2);border-right-color:var(--border)}
.theme-dark .search-box input{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .search-box .icon-btn.sm{background:var(--surface)}
.theme-dark .chat-filters .flt{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .chat-filters .flt.is-active{background:var(--surface-2);color:#fff}
.theme-dark .thread-item{background:var(--surface-2);border-bottom-color:var(--border)}
.theme-dark .thread-item:hover,.theme-dark .thread-item.is-active{background:var(--surface)}
.theme-dark .thread-item .avatar{background:var(--surface-2);color:#e5e7eb}
.theme-dark .thread-meta .name{color:#e5e7eb}
.theme-dark .thread-meta .last,.theme-dark .thread-meta .top{color:#9aa1a8}
.theme-dark .chat-conv{background:var(--bg)}
.theme-dark .conv-head{background:var(--bg);border-bottom-color:var(--border)}
.theme-dark .conv-menu{background:var(--surface)}
.theme-dark .messages-wrap{background:var(--surface-2)}
.theme-dark .msg .bubble{background:var(--surface);color:#e5e7eb}
.theme-dark .msg .bubble .reply-frag{background:var(--bg)}
.theme-dark .composer{background:var(--bg);border-top-color:var(--border)}
.theme-dark .composer textarea{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .cmp-btn{background:var(--surface);border-color:var(--border);color:#e5e7eb}
.theme-dark .btn-send{filter:none}
/* Chat: brighten empty-state and white emoji icon */
.theme-dark .conv-user .meta .name{color:#e5e7eb}
.theme-dark .conv-user .avatar{background:var(--surface-2);color:#e5e7eb}
.theme-dark .msg-empty{color:#e5e7eb}
.theme-dark #btnEmoji img{filter:brightness(0) invert(1)}
/* Chat: user suggestions popup */
.theme-dark .user-suggests{background:var(--surface) !important;border:1px solid var(--border) !important}
.theme-dark .user-suggests .us-item:hover,.theme-dark .user-suggests .us-item:focus{background:#222632}
.theme-dark .user-suggests .us-item:active{background:#1a1f2b}
.theme-dark .user-suggests .meta .sub{color:#9aa1a8}

/* Add-product page dark tweaks */
.theme-dark .ap-label{color:#e5e7eb}
.theme-dark #apDiscountRow .agree span{color:#e5e7eb}
.theme-dark .ap-drop{background:var(--surface-2);border:2px dashed var(--primary)}
.theme-dark .ap-drop:focus,.theme-dark .ap-drop:hover{background:#151824;border-color:var(--hover)}
.theme-dark .ap-drop__icon,.theme-dark .ap-drop__text{color:#9aa1a8}
/* Add-product and general agree rows */
.theme-dark .agree{color:#e5e7eb}
.theme-dark .agree input{background:var(--surface-2);border-color:var(--border)}
.theme-dark #apSubmit{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(139,92,246,.32)}
.theme-dark #apSubmit:hover{background:var(--hover);box-shadow:0 12px 28px rgba(139,92,246,.38)}

/* Notifications: unread items dark from the start */
.theme-dark .notif-item.unread{background:var(--surface-2)}

/* Account page: tabs icons white, brighter balance, violet actions */
.theme-dark .acc-tabs .set-tab img{filter:brightness(0) invert(1)}
/* Account page: Balance action buttons glow on hover in dark theme */
.theme-dark .acc-section .bal-card{background-color:var(--primary) !important;color:#fff !important;border:1px solid var(--primary) !important;box-shadow:none;transition:background-color .2s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease}
.theme-dark .acc-section .bal-card .bal-ico{background:rgba(255,255,255,.16)}
.theme-dark .acc-section .bal-card:hover,
.theme-dark .acc-section .bal-card:focus-visible{background-color:#9f7aea !important; /* lighter violet */ color:#fff !important; border-color:var(--primary) !important; box-shadow:0 14px 34px rgba(139,92,246,.55), 0 0 0 3px rgba(139,92,246,.25); transform:translateY(-2px)}
.theme-dark .acc-section .bal-card:hover .bal-ico,
.theme-dark .acc-section .bal-card:focus-visible .bal-ico{background:rgba(255,255,255,.28)}
.theme-dark .acc-section .bal-card:active{transform:translateY(-1px);box-shadow:0 10px 22px rgba(139,92,246,.45)}
.theme-dark .acc-balance-amount{color:#e5e7eb}
.theme-dark #accAddProductBtn{background:var(--primary);border-color:var(--primary);color:#fff}
.theme-dark #supCreateBtn{background:var(--primary);border-color:var(--primary);color:#fff}

/* === Global dropdown (user menu) — unified look across all pages === */
/* Keep .user visible control via JS; override only the menu to allow transitions */
.user{position:relative}
.user .user-menu.hidden{display:block !important}
.user .user-menu{
	position:absolute; top:calc(100% + 12px); right:0;
	background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px;
	padding:8px; min-width:240px;
	opacity:0; visibility:hidden; transform:translateY(-10px);
	transition:all .3s cubic-bezier(.4,0,.2,1);
	z-index:1000; box-shadow:0 8px 32px rgba(0,0,0,.4)
}
.user .user-menu:not(.hidden){opacity:1;visibility:visible;transform:translateY(0)}
/* Tail at top-right */
.user .user-menu::before{
	content:""; position:absolute; top:-8px; right:14px; width:14px; height:14px;
	background:#1a1a1a; border-top:1px solid #2a2a2a; border-left:1px solid #2a2a2a; transform:rotate(45deg);
}
/* Profile button hover + avatar fill */
.user .user-btn{display:flex;align-items:center;gap:10px;background:transparent;border:none;padding:6px;border-radius:10px;cursor:pointer;transition:all .2s ease}
.user .user-btn:hover{background:#2a2a2a}
.user .user-btn .avatar{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,#7c3aed 0%, #9333ea 100%);font-weight:600;color:#fff}
.user .user-btn .nickname{color:#fff;font-size:14px;font-weight:500}
/* Menu items */
.user .user-menu .menu-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:transparent;border:none;border-radius:8px;width:100%;cursor:pointer;transition:all .2s ease;color:#aaa;text-align:left}
.user .user-menu .menu-item:hover{background:#2a2a2a;color:#fff}
/* Icons gray by default (turn black SVGs into neutral gray) */
.user .user-menu .menu-item img{width:18px;height:18px;object-fit:contain;filter: invert(74%) sepia(3%) saturate(8%) hue-rotate(0deg) brightness(92%) contrast(86%)}
/* On hover make icons lighter (not black) */
.user .user-menu .menu-item:hover img{filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(112%) contrast(92%)}
/* Balance card look */
.user .user-menu .menu-balance{background:#141414;border:1px solid #2a2a2a;border-radius:10px;margin:4px 4px 8px 4px;padding:12px;display:flex;align-items:center;gap:12px}
.user .user-menu .menu-balance img{display:none}
.user .user-menu .menu-balance::before{content:'$';display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#1a4d1a;color:#4ade80;font-weight:800}
.user .user-menu .menu-balance span{color:#888;font-size:12px}
.user .user-menu .menu-balance strong{display:block;color:#4ade80;font-size:16px;font-weight:600;margin-top:2px}
/* Divider before logout + red icon */
.user .user-menu .menu-item.exit{color:#ff6b6b; position:relative; margin-top:8px}
.user .user-menu .menu-item.exit img{opacity:1;filter: invert(40%) sepia(75%) saturate(4226%) hue-rotate(340deg) brightness(95%) contrast(95%) !important}
.user .user-menu .menu-item.exit:hover img{filter: invert(40%) sepia(75%) saturate(4226%) hue-rotate(340deg) brightness(105%) contrast(95%) !important}
.user .user-menu .menu-item.exit::before{content:"";display:block;position:absolute;left:8px;right:8px;height:1px;background:#2a2a2a;top:-6px;border-radius:1px}
.user .user-menu .menu-item.exit:hover{background:#2a1a1a;color:#ff8b8b}
/* Menu header (avatar, name, email) */
.user .user-menu{--hdr-p:12px}
.user .user-menu .menu-balance{margin-top:8px}
.user .user-menu .menu-header{display:flex;align-items:center;gap:12px;padding:10px 12px 12px 12px;margin:4px;border-bottom:1px solid #2a2a2a}
.user .user-menu .menu-header .mh-avatar{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed 0%, #9333ea 100%);color:#fff;font-weight:800}
.user .user-menu .menu-header .mh-info{display:flex;flex-direction:column;min-width:0}
.user .user-menu .menu-header .mh-name{font-weight:700;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .user-menu .menu-header .mh-email{font-size:12px;color:#9ca3af;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ensure both header and menu avatars are purple by default */
.user .user-btn .avatar,
.user .user-menu .menu-header .mh-avatar{background:linear-gradient(135deg,#7c3aed 0%, #9333ea 100%)}
/* Mobile: fix dropdown position to the right and hide tail */
@media (max-width: 768px){
	.user .user-menu{position:fixed; right:12px; left:auto; top:68px; transform:translateY(0)}
	.user .user-menu::before{display:none}
}
/* Desktop: ensure tail visible on top-right */
@media (hover: hover) and (pointer: fine){
	.user .user-menu::before{display:block; top:-8px; right:14px}
}
/* Balance action cards: violet idle (no glow) */
.theme-dark .bal-card{background:var(--primary) !important;color:#fff !important;border-color:var(--primary) !important;box-shadow:none}
.theme-dark .bal-card .bal-ico{background:rgba(255,255,255,.16)}
/* Ensure all balance action buttons match design in dark theme */
.theme-dark .acc-balance-actions .bal-card{border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;gap:10px}
.theme-dark .acc-balance-actions .bal-card .bal-ico{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.theme-dark .acc-balance-actions .bal-card .bal-txt{font-weight:700}
/* Balance modal: dark payment methods + violet Continue */
.theme-dark .pay-card{background:var(--surface);border-color:var(--border)}
.theme-dark .pay-card:hover{background:var(--surface-2)}
.theme-dark .pay-card__check{border-color:var(--border);background:var(--surface)}
.theme-dark .pay-card.is-selected{border-color:#86efac;box-shadow:0 0 0 3px rgba(22,163,74,.12);background:#0d1b12}
.theme-dark .pay-card__title{color:#e5e7eb}
.theme-dark .pay-card__sub{color:#9aa1a8}
/* Dark: payment badges use soft green tint for both types */
.theme-dark .pay-badge,.theme-dark .pay-badge--rec{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28);color:#86efac}
.theme-dark #balContinue{background:var(--primary);border-color:var(--primary);color:#fff}
/* Balance modal info cards */
.theme-dark .lolz-card{background:var(--surface-2);border:1px solid var(--border)}
.theme-dark .lolz-card__title{color:#9aa1a8}
.theme-dark .lolz-card__sum{color:#e5e7eb}
/* Account section headings icons to white */
.theme-dark .acc-section h2 img{filter:brightness(0) invert(1)}
.theme-dark .lolz-card__meta{color:#9aa1a8}
/* Account: transfer suggestions (override inline light styles) */
.theme-dark #trSuggest{background:var(--surface) !important;border:1px solid var(--border) !important;box-shadow:0 12px 28px rgba(0,0,0,.45) !important}
.theme-dark #trSuggest > div{color:#e5e7eb}
.theme-dark #trSuggest > div:hover{background:#222632 !important}
/* Switch dark/disabled states */
.theme-dark .slider{background:var(--border)}
.theme-dark .switch input:disabled + .slider{background:#1a1e27;opacity:.6;cursor:not-allowed}
.theme-dark .switch input:disabled + .slider:before{background:var(--border);box-shadow:none}


/* Bottom mobile nav active color already handled; ensure label contrast */
.theme-dark .bn-item.is-active{color:#fff}

/* Chat badges removed globally */


/* === Auth modal (login) — unified look across all pages === */
/* Scope to #auth-modal so other modals keep their own styles */
#auth-modal{ --icon-color:#666 }
#auth-modal .modal__dialog{
	background:#1a1a1a; border:1px solid #2a2a2a; border-radius:16px;
	padding:40px 28px; width:min(520px,94%);
}
#auth-modal .modal__close{
	top:18px; right:18px; width:32px; height:32px; border-radius:8px;
	background:transparent; border:none; display:flex; align-items:center; justify-content:center; transition:background .2s ease
}
#auth-modal .modal__close:hover{ background:#2a2a2a }
#auth-modal .modal__close svg{ width:20px; height:20px }
#auth-modal .modal__logo{ display:block; margin:0 auto 22px auto; max-width:220px }

/* Inputs inside auth modal (login + recovery) */
#auth-modal .auth-form .control::before{content:none !important}
#auth-modal .auth-form .input,
.um-recovery .um-input{ width:100%; background:#141414; border:1px solid #2a2a2a; border-radius:12px; padding:16px 16px; color:#fff; font-size:15px; transition:all .2s ease }
#auth-modal .auth-form .input:focus,
.um-recovery .um-input:focus{ outline:none; border-color:#3a3a3a; background:#1a1a1a }
#auth-modal .auth-form .input:hover{ border-color:#3a3a3a }
#auth-modal .auth-form .input::placeholder,
.um-recovery .um-input::placeholder{ color:#666 }
#auth-modal .auth-form .input.is-invalid,
.um-recovery .um-input.is-invalid{ border-color:#ff6b6b; background:#2a1a1a }
#auth-modal .auth-form .field-error{ color:#ff6b6b; font-size:13px; margin-top:8px; min-height:16px }
#auth-modal .auth-form .control.has-icon .input-icon{ right:12px }
#auth-modal .auth-form .input-icon{ color:#666 }
/* No thick focus ring */
#auth-modal .auth-form .input{ box-shadow:none }
#auth-modal .auth-form .input:focus{ box-shadow:none }
/* Left icon inside input */
#auth-modal .auth-form .control.has-left-ico{ position:relative }
#auth-modal .auth-form .control.has-left-ico .um-left-ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:#666 }
#auth-modal .auth-form .control.has-left-ico .um-left-ico svg{ fill:#666 }
#auth-modal .auth-form .control.has-left-ico .input{ padding-left:46px }

/* Remember checkbox and forgot link */
#auth-modal .auth-form .agree.remember{ display:flex; align-items:center; gap:10px }
#auth-modal .auth-form .agree.remember input[type="checkbox"]{ appearance:none; width:20px; height:20px; border:2px solid #3a3a3a; border-radius:6px; background:#141414; cursor:pointer; position:relative; transition:all .2s ease; margin-right:4px; display:inline-block; outline:none }
#auth-modal .auth-form .agree.remember input[type="checkbox"]:checked{ background:#7c3aed; border-color:#7c3aed }
#auth-modal .auth-form .agree.remember input[type="checkbox"]:checked::after{ content:''; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) }
#auth-modal .auth-form .agree.remember input[type="checkbox"]:focus{ outline:none; box-shadow:none }
#auth-modal .auth-form .agree.remember input[type="checkbox"]:active{ outline:none; box-shadow:none }
#auth-modal .auth-form .agree.remember span{ color:#aaa; font-size:14px; line-height:1 }
#auth-modal .auth-form .forgot-link{ color:#9333ea; font-size:14px; text-decoration:none; transition:all .2s ease; white-space:nowrap }
#auth-modal .auth-form .forgot-link:hover{ color:#a855f7; text-decoration:underline }
#auth-modal .auth-form .forgot-wrap{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 12px }

/* Buttons inside auth modal */
#auth-modal .btn--primary{ background:linear-gradient(135deg,#7c3aed 0%, #9333ea 100%); color:#fff; border:none; padding:16px 22px }
#auth-modal .btn--primary:hover{ opacity:.9; transform:translateY(-1px) }
#auth-modal .btn--primary:active{ transform:none }
#auth-modal .btn--google{ background:#fff; color:#333; padding:16px }
#auth-modal .btn--google:hover{ background:#f5f5f5 }

/* Recovery visuals inside auth modal */
.um-recovery{ --bg:#1a1a1a; --bd:#2a2a2a; --muted:#888; --text:#fff; --accent:#7c3aed }
.um-recovery .um-rec-title{ font-size:20px; font-weight:700; color:var(--text); text-align:center; margin:8px 0 14px }
.um-recovery .um-rec-info{ color:#aaa; font-size:14px; line-height:1.5; margin:0 0 16px }
.um-recovery .um-input{ padding:16px 16px 16px 46px; border:1px solid var(--bd) }
.um-recovery .um-input:focus{ border-color:#3a3a3a }
.um-recovery .um-inputwrap{ position:relative }
.um-recovery .um-inputwrap .input-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#666; cursor:pointer }