/* Hols — profile customization: layouts, banner, frames, nickname gradients, editor */

/* ---------- custom nickname animations ---------- */
@keyframes nsFlow { to { background-position: 200% 0; } }
@keyframes nsPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5) saturate(1.2); } }
@keyframes nsHue { to { filter: hue-rotate(360deg); } }
.nm.ns-custom { -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; }
.nm.nf { letter-spacing: 0; }
html.touch .nm.ns-custom { will-change: background-position; }

/* ---------- avatar frames ---------- */
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes frAng { to { --fa: 360deg; } }
@keyframes frRot { to { transform: rotate(360deg); } }
@keyframes frNeon { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: .45; } 50% { opacity: 1; } 72% { opacity: .8; } }
@keyframes frPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
@keyframes frFlick { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.fr { position: relative; display: inline-grid; place-items: center; border-radius: 50%; isolation: isolate; vertical-align: middle; }
.fr.sq { border-radius: 12px; }
.fr > .ava { position: relative; z-index: 1; }
.fr::before, .fr::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; pointer-events: none; z-index: 0; }
.fr.sq::before, .fr.sq::after { border-radius: 16px; }
.pf-hero .fr .pf-ava, .pf-lay .fr .pf-ava { box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }

/* ring made from a conic gradient, cut out with a mask (works for round and square avatars) */
.fr-spin::before, .fr-rainbow::before, .fr-gold::before, .fr-fire::before, .fr-ice::before {
  inset: -8px; padding: 5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: frAng 3s linear infinite;
}
.fr-spin::before { background: conic-gradient(from var(--fa), var(--fc), var(--fc2), transparent 60%, var(--fc)); animation-duration: 2.4s; }
.fr-rainbow::before { background: conic-gradient(from var(--fa), #ff3b5c, #ffb800, #3ed598, #40a9ff, #a77bff, #ff3b5c); }
.fr-gold::before { background: conic-gradient(from var(--fa), #7a4f00, #ffe680, #b8860b, #fff6c9, #c99700, #7a4f00); animation-duration: 4.5s; }
.fr-gold::after { inset: -8px; box-shadow: 0 0 22px rgba(255, 196, 0, .45); }
.fr-fire::before { background: conic-gradient(from var(--fa), #ff2a00, #ffb000, #ff5a00, #ffd000, #ff2a00); animation-duration: 1.6s; filter: blur(.4px); }
.fr-fire::after { inset: -8px; box-shadow: 0 0 26px 2px rgba(255, 90, 0, .65), 0 -6px 30px rgba(255, 180, 0, .35); animation: frFlick 1.1s ease-in-out infinite; }
.fr-ice::before { background: conic-gradient(from var(--fa), #bdf3ff, #4fc3f7, #ffffff, #81d4fa, #bdf3ff); animation-duration: 5s; }
.fr-ice::after { inset: -8px; box-shadow: 0 0 22px rgba(120, 220, 255, .55); }
.fr-glow::before { inset: -5px; border: 3px solid var(--fc); box-shadow: 0 0 22px 2px var(--fc), inset 0 0 10px var(--fc); }
.fr-neon::before { inset: -6px; border: 3px solid var(--fc); box-shadow: 0 0 6px var(--fc), 0 0 18px var(--fc), 0 0 36px var(--fc), inset 0 0 8px var(--fc); animation: frNeon 3s linear infinite; }
.fr-double::before { inset: -5px; border: 3px solid var(--fc); }
.fr-double::after { inset: -11px; border: 2px solid var(--fc2); }
.fr-dashed::before { inset: -7px; border: 3px dashed var(--fc); animation: frRot 14s linear infinite; }
.fr-orbit::before { inset: -8px; border: 2px solid color-mix(in srgb, var(--fc) 45%, transparent); }
.fr-orbit::after { inset: -8px; background: radial-gradient(circle at 50% 3px, var(--fc) 0 4px, transparent 5px); filter: drop-shadow(0 0 4px var(--fc)); animation: frRot 3.2s linear infinite; }
.fr-pulse::before { inset: -5px; border: 3px solid var(--fc); }
.fr-pulse::after { inset: -5px; border: 3px solid var(--fc); animation: frPulse 1.8s ease-out infinite; }
html.touch.perf-low .fr::before, html.touch.perf-low .fr::after { animation: none !important; }

/* ---------- banner ---------- */
.bn { position: relative; overflow: hidden; background: var(--graphite-2); }
.bn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bn.nftbn { background: radial-gradient(90% 90% at 50% 40%, var(--c1), var(--c2)); }
.bn .nft-pattern { position: absolute; inset: -10%; width: 120%; height: 120%; }
.bn .nft-pattern .sym { opacity: .24 !important; }
.pf-hero.has-bn .bn { position: absolute; inset: 0; z-index: 0; }
.pf-hero.has-bn .bn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)); }
.pf-hero.has-bn { background: #000 !important; }

/* ---------- pinned gifts strip (layouts without the avatar ring) ---------- */
.pin-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ps-gift { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--graphite-2); transition: transform .15s; }
.ps-gift.nft { background: radial-gradient(80% 80% at 50% 40%, var(--c1), var(--c2)); }
.ps-gift:hover { transform: translateY(-2px); }
.ps-gift .gift-img { width: 38px !important; height: 38px !important; }

/* ---------- layout: Slasher (pure black, centred, minimal) ---------- */
.pf-hero.lay-slasher { background: #050506 !important; padding-bottom: 22px; }
.pf-hero.lay-slasher::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 32%, color-mix(in srgb, var(--a2) 28%, transparent), transparent 72%) !important; }
.pf-hero.lay-slasher .pf-name { font-weight: 900; letter-spacing: -.01em; }
.pf-hero.lay-slasher .pf-ava { box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .6); }

/* ---------- layout: Discord ---------- */
.pf-lay { position: relative; text-align: left; }
.pf-lay .pf-name { justify-content: flex-start; margin: 0; font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; flex-wrap: wrap; }
.pf-lay .pf-pills { justify-content: flex-start; margin-top: 8px; }
.lay-discord .bn { height: 132px; border-radius: 22px 22px 0 0; }
.lay-discord .dc-ava { position: absolute; left: 20px; top: 80px; z-index: 2; padding: 6px; border-radius: 50%; background: var(--basalt); }
.lay-discord .dc-body { margin: 12px 14px 0; padding: 52px 16px 16px; border-radius: 20px; background: color-mix(in srgb, var(--a2) 16%, var(--graphite)); }

/* ---------- layout: Twitter ---------- */
.lay-twitter .bn { height: 142px; border-radius: 22px 22px 0 0; }
.lay-twitter .tw-ava { position: absolute; left: 16px; top: 96px; z-index: 2; padding: 4px; border-radius: 50%; background: var(--basalt); }
.lay-twitter .tw-body { padding: 60px 18px 4px; }
.tw-handle { color: var(--text-2); font-size: .92rem; margin-top: 2px; }
.tw-bar { height: 6px; border-radius: 3px; background: var(--seam); margin-top: 14px; overflow: hidden; }
.tw-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5a623, var(--a2)); }

/* ---------- layout: Steam ---------- */
.modal.skin-steam { background: #1b2838 !important; border-color: #2a3f5a !important; }
.modal.skin-steam .pf-card, .modal.skin-steam .pf-channel { background: #16202d !important; }
.modal.skin-steam .pf-card .pf-row { border-bottom-color: #22344a; }
.modal.skin-steam .pf-cta .btn { background: #2a475e; color: #c7d5e0; }
.modal.skin-steam .pf-cta .btn-primary { background: linear-gradient(90deg, #5c7e10, #75a61c); color: #fff; }
.modal.skin-steam .tabs, .modal.skin-steam .modal-body { color: #c7d5e0; }
.lay-steam { color: #fff; }
.lay-steam .st-head { position: relative; padding: 60px 18px 18px; overflow: hidden; border-radius: 22px 22px 0 0; }
.lay-steam .st-head .bn { position: absolute; inset: 0; opacity: .55; }
.lay-steam .st-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 40, 56, .2), #1b2838 92%); }
.lay-steam .st-row { position: relative; z-index: 1; display: flex; gap: 16px; align-items: center; }
.lay-steam .pf-ava.sqa { border-radius: 8px !important; }
.lay-steam .pf-ava.sqa img, .lay-steam .pf-ava.sqa video { border-radius: 8px !important; }
.lay-steam .pf-name { color: #fff; font-size: 1.3rem; }
.lay-steam .status-pill { background: transparent; border: 0; padding: 0; color: #57cbde; }
.lay-steam .st-show { margin: 0 14px; padding: 12px; border-radius: 6px; background: #0e1520; gap: 10px; }
.lay-steam .st-show .ps-gift { border-radius: 4px; width: 52px; height: 52px; }

/* light theme keeps the cards readable */
html[data-theme="light"] .lay-discord .dc-ava, html[data-theme="light"] .lay-twitter .tw-ava { background: #fff; }

/* ============================ editor ============================ */
.modal.cz-modal { width: min(960px, 96vw); max-width: none; }
.cz-modal .modal-body { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.cz { display: grid; grid-template-columns: 250px 1fr; gap: 0; height: min(70vh, 720px); }
.cz-nav { padding: 6px 14px 16px; overflow-y: auto; border-right: 1px solid var(--seam); }
.cz-g { text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; color: var(--text-2); font-weight: 700; margin: 14px 8px 8px; }
.cz-list { background: var(--graphite); border-radius: 18px; overflow: hidden; }
.cz-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; font-size: .98rem; font-weight: 500; text-align: left; border-bottom: 1px solid var(--seam); transition: background .15s; }
.cz-item:last-child { border-bottom: 0; }
.cz-item:hover { background: var(--graphite-2); }
.cz-item.on { background: var(--graphite-2); box-shadow: inset 3px 0 0 var(--accent); }
.cz-item .ico-sq { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.cz-main { overflow-y: auto; padding: 14px 18px 22px; }
.cz-prev { border-radius: 24px; overflow: hidden; background: var(--graphite); margin-bottom: 14px; padding-bottom: 12px; }
.cz-prev-in { pointer-events: none; max-width: 440px; margin: 0 auto; }
.cz-prev .pf-hero { padding-top: 64px; border-radius: 0 0 24px 24px; }
.cz-hint { color: var(--text-2); font-size: .9rem; margin: 2px 2px 12px; }
.cz-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

.cz-lay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; border-radius: 22px; background: var(--graphite); }
.cz-lcard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px 12px; border-radius: 18px; background: var(--graphite-2); border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.cz-lcard:hover { transform: translateY(-2px); }
.cz-lcard.on { border-color: #34c759; }
.cz-lcard b { font-size: 1rem; }
.lc-art { position: relative; width: 100%; max-width: 150px; aspect-ratio: 1 / 1.05; border-radius: 16px; overflow: hidden; background: #0c0c0e; }
.lc-art i { position: absolute; display: block; border-radius: 6px; background: #3a3a40; }
/* telegram */
.lc-telegram { background: linear-gradient(180deg, #2a9d8f 0 70%, #0c0c0e 70%); }
.lc-telegram .a { left: 38%; top: 12%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.lc-telegram .b { left: 30%; top: 42%; width: 40%; height: 7%; background: #fff; }
.lc-telegram .c { left: 12%; top: 56%; width: 76%; height: 9%; background: rgba(0, 0, 0, .25); }
.lc-telegram .d { left: 20%; top: 80%; width: 60%; height: 5%; }
/* slasher */
.lc-slasher .a { left: 36%; top: 12%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #4a4a50; }
.lc-slasher .b { left: 30%; top: 46%; width: 40%; height: 6%; background: #55555c; }
.lc-slasher .c { left: 12%; top: 60%; width: 76%; height: 9%; background: #26262b; }
.lc-slasher .d { left: 22%; top: 80%; width: 56%; height: 5%; }
/* discord */
.lc-discord .a { left: 0; top: 0; width: 100%; height: 30%; border-radius: 0; background: linear-gradient(135deg, #8a7a5a, #3e4a3a); }
.lc-discord .b { left: 8%; top: 18%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #5b6b7a; box-shadow: 0 0 0 3px #0c0c0e; }
.lc-discord .c { left: 8%; top: 50%; width: 46%; height: 6%; background: #ddd; }
.lc-discord .d { left: 8%; top: 64%; width: 84%; height: 10%; background: #8a8164; }
/* twitter */
.lc-twitter .a { left: 0; top: 0; width: 100%; height: 36%; border-radius: 0; background: linear-gradient(135deg, #8a7a5a, #4a5248); }
.lc-twitter .b { left: 8%; top: 24%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #5b6b7a; box-shadow: 0 0 0 3px #0c0c0e; }
.lc-twitter .c { left: 8%; top: 60%; width: 56%; height: 6%; background: #ddd; }
.lc-twitter .d { left: 8%; top: 82%; width: 84%; height: 3%; background: linear-gradient(90deg, #f5a623 45%, #333 45%); }
/* steam */
.lc-steam { background: #1b2838; }
.lc-steam .a { left: 0; top: 0; width: 100%; height: 34%; border-radius: 0; background: #2a475e; }
.lc-steam .b { left: 8%; top: 9%; width: 18%; aspect-ratio: 1; border-radius: 3px; background: #6b8aa5; }
.lc-steam .c { left: 32%; top: 12%; width: 58%; height: 6%; background: #e8eef3; }
.lc-steam .d { left: 8%; top: 82%; width: 84%; height: 8%; background: #5c7e10; }

.cz-bn, .cz-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.cz-sw { position: relative; min-width: 48px; height: 48px; border-radius: 14px; padding: 4px; background: var(--graphite); border: 2px solid transparent; display: inline-grid; place-items: center; cursor: pointer; }
.cz-sw.on { border-color: var(--accent); }
.cz-sw > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; font-size: .78rem; color: var(--text-2); min-width: 36px; }
.cz-bn .cz-sw { width: 86px; }
.cz-sw .auto { background: var(--graphite-2); font-weight: 700; }
.cz-own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cz-own::after { content: '+'; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 13px/18px system-ui; text-align: center; }

.cz-fr { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.cz-fcard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 6px 10px; border-radius: 16px; background: var(--graphite); border: 2px solid transparent; }
.cz-fcard.on { border-color: var(--accent); }
.cz-fcard small { color: var(--text-2); font-size: .8rem; }
.cz-col { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--graphite); font-size: .9rem; }
.cz-col input, .cz-stop input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.cz-col input::-webkit-color-swatch-wrapper, .cz-stop input::-webkit-color-swatch-wrapper { padding: 0; }
.cz-col input::-webkit-color-swatch, .cz-stop input::-webkit-color-swatch { border: 0; border-radius: 10px; }

.cz-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cz-font { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; background: var(--graphite); border: 2px solid transparent; text-align: left; min-width: 0; }
.cz-font.on { border-color: var(--accent); }
.cz-font .fprev { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.5; }
.cz-font .fprev.nf-press { font-size: .8rem; }
.cz-font small { color: var(--text-2); }

.cz-ns { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-ns .cz-sw { height: 42px; padding: 0 14px; }
.cz-ns .cz-sw > span { font-size: .95rem; font-weight: 700; width: auto; color: var(--text); }
.cz-own-grad { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--graphite); border: 2px solid transparent; }
.cz-own-grad.on { border-color: var(--accent); }
.cz-og-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cz-stops { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cz-stop { position: relative; display: inline-grid; padding: 3px; border-radius: 12px; background: var(--graphite-2); }
.cz-stop .x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--basalt); color: var(--text-2); font-size: 13px; line-height: 16px; border: 1px solid var(--seam); }
.cz-add { width: 40px; height: 40px; border-radius: 12px; background: var(--graphite-2); font-size: 1.2rem; color: var(--text-2); }
.cz-gp { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cz-gpb { width: 46px; height: 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .08); }
.cz-anim { margin: 4px 0 10px; flex-wrap: wrap; }
.cz-anim button { min-width: 90px; }
.cz-sl { display: grid; grid-template-columns: 80px 1fr 46px; align-items: center; gap: 10px; margin-top: 6px; font-size: .9rem; color: var(--text-2); }
.cz-sl input { accent-color: var(--accent); width: 100%; }
.cz-sl em { font-style: normal; text-align: right; }
.cz-modal .modal-foot { display: flex; gap: 10px; }
.cz-modal .modal-foot .btn { flex: 1; }

@media (max-width: 760px) {
  .cz { grid-template-columns: 1fr; height: auto; max-height: calc(92vh - 140px); grid-template-rows: auto 1fr; }
  .cz-nav { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px 10px; border-right: 0; border-bottom: 1px solid var(--seam); scrollbar-width: none; }
  .cz-nav::-webkit-scrollbar { display: none; }
  .cz-g { display: none; }
  .cz-list { display: contents; }
  .cz-item { flex: none; width: auto; border: 0; border-radius: 999px; background: var(--graphite); padding: 6px 12px 6px 6px; font-size: .88rem; white-space: nowrap; }
  .cz-item.on { box-shadow: inset 0 0 0 2px var(--accent); }
  .cz-item .ico-sq { width: 26px; height: 26px; border-radius: 50%; }
  .cz-main { padding: 12px 12px 18px; }
  .cz-lay { grid-template-columns: repeat(2, 1fr); }
  .cz-fonts { grid-template-columns: repeat(2, 1fr); }
}

/* layouts use their own avatar sizes (base .pf-ava forces 116px) */
.lay-discord .pf-ava { --s: 92px !important; font-size: 2rem !important; }
.lay-twitter .pf-ava { --s: 88px !important; font-size: 2rem !important; }
.lay-steam .pf-ava { --s: 84px !important; font-size: 1.8rem !important; }
.lay-discord .dc-ava { top: 76px; }
.lay-discord .dc-body { padding-top: 54px; }
.lay-twitter .tw-ava { top: 94px; }
.lay-twitter .tw-body { padding-top: 58px; }
/* editor: preview pinned on the right on wide screens */
@media (min-width: 1100px) {
  .cz-main { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
  .cz-prev { order: 2; position: sticky; top: 0; margin: 0; }
  .cz-prev-in { max-width: 340px; }
  .cz-pane { order: 1; min-width: 0; }
  .cz-lay { grid-template-columns: repeat(2, 1fr); }
  .modal.cz-modal { width: min(1080px, 96vw); }
}
@media (max-width: 760px) { .cz-prev { position: sticky; top: -12px; z-index: 3; } .cz-prev .pf-hero { padding-top: 40px; transform-origin: top; } }
@media (max-width: 760px) { .cz-prev-in { zoom: .72; } .cz-prev { padding-bottom: 6px; margin-bottom: 10px; } }

/* ================= stickers: own stickers, frosted panel ================= */
.popover.stk-pop { background: color-mix(in srgb, var(--graphite) 58%, transparent) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; backdrop-filter: blur(24px) saturate(1.6) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .45) !important; border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 22px !important; }
html[data-theme="light"] .popover.stk-pop { background: rgba(255, 255, 255, .62) !important; border-color: rgba(0, 0, 0, .06) !important; }
.stk-panel { height: 380px; }
.stk-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; font-size: .92rem; }
.stk-head .muted { font-weight: 500; margin-left: 4px; }
.stk-edit { font-size: .84rem; font-weight: 600; color: var(--accent); padding: 4px 8px; border-radius: 8px; }
.stk-edit.on { background: var(--accent); color: #fff; }
.stk-grid .stk { position: relative; cursor: pointer; }
.stk-grid .stk img { object-fit: contain; }
.stk.add { flex-direction: column; gap: 2px; border: 2px dashed color-mix(in srgb, var(--text-2) 40%, transparent); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.stk.add small { font-size: .7rem; }
.stk.add:hover { color: var(--accent); border-color: var(--accent); }
.stk.ed { animation: stkWiggle .32s ease-in-out infinite alternate; }
.stk.ed:nth-child(even) { animation-delay: .16s; }
@keyframes stkWiggle { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.stk-x, .stk-l { position: absolute; top: -4px; width: 22px; height: 22px; border-radius: 50%; font: 700 15px/20px system-ui; display: grid; place-items: center; z-index: 2; }
.stk-x { right: -4px; background: #ff3b4f; color: #fff; }
.stk-l { left: -4px; background: var(--graphite-2); color: var(--text); }
.stk-empty { grid-column: 1 / -1; color: var(--text-2); font-size: .86rem; text-align: center; padding: 18px 10px; line-height: 1.45; }
.stk-packs button { color: var(--text-2); }
.stk-packs button.active { color: var(--accent); }
.b-sticker img { object-fit: contain; }
.b-sticker img.media-missing, .b-sticker .media-missing { opacity: .3; }

/* pinned gifts around the avatar — size like Telegram (screenshot) */
.pf-pin { width: 58px !important; height: 58px !important; margin: -29px 0 0 -29px !important; }
.pf-pin .gift-img, .pf-pin img, .pf-pin canvas, .pf-pin .nft-art { width: 58px !important; height: 58px !important; }
@media (max-width: 600px), (pointer: coarse) and (max-width: 900px) {
  .pf-pin { width: 50px !important; height: 50px !important; margin: -25px 0 0 -25px !important; --k: .92; transform: translate(calc(var(--dx) * var(--k)), calc(var(--dy) * var(--k))); }
  .pf-pin .gift-img, .pf-pin img, .pf-pin canvas, .pf-pin .nft-art { width: 50px !important; height: 50px !important; }
  @keyframes pinFloat { 0%, 100% { transform: translate(calc(var(--dx) * .92), calc(var(--dy) * .92)); } 50% { transform: translate(calc(var(--dx) * .92), calc(var(--dy) * .92 - 4px)); } }
}

/* worn collectible next to the nickname */
.worn { display: inline-flex; flex: none; vertical-align: middle; position: relative; cursor: pointer; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.worn .gift-img { display: block; }
.pf-name .pf-worn { margin-left: 2px; animation: wornBob 3.6s ease-in-out infinite; }
.pf-name .pf-worn::after { content: '✦'; position: absolute; right: -7px; top: -7px; color: #fff; font-size: .62rem; animation: gaTwinkle 1.6s ease-in-out infinite; }
.cl-worn { margin-left: 3px; }
.cv-worn { margin-left: 4px; }
@keyframes wornBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
html.touch .pf-name .pf-worn { animation: none; }

/* ================= e-mail code ================= */
.mail-step { text-align: center; }
.mail-step h2 { margin: 12px 0 4px; font-size: 1.35rem; }
.mail-step .sub { color: var(--text-2); margin-bottom: 16px; line-height: 1.45; }
.mail-step .input { width: 100%; text-align: center; font-size: 1.05rem; }
.mail-ico { width: 64px; height: 64px; margin: 4px auto 0; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #5b8cff, #2f5bff); box-shadow: 0 10px 30px rgba(47, 91, 255, .35); }
.code-boxes { display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.code-boxes input { width: 46px; height: 56px; border-radius: 14px; border: 2px solid var(--seam); background: var(--graphite); color: var(--text); font: 800 1.5rem/1 inherit; text-align: center; caret-color: var(--accent); transition: border-color .15s; -webkit-user-select: text; user-select: text; }
.code-boxes input:focus { outline: none; border-color: var(--accent); }
.code-boxes.shake { animation: shake .4s; }
.mail-dev { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 196, 0, .12); color: #f5c400; font-size: .86rem; }
.mail-modal .mail-host { padding: 6px 4px 8px; }
@media (max-width: 380px) { .code-boxes input { width: 40px; height: 50px; } .code-boxes { gap: 6px; } }

/* ================= devices ================= */
.dev-modal .ctx-title { margin: 14px 4px 8px; }
.dev-modal .ctx-title:first-child { margin-top: 2px; }
.dev-li .li-label small { line-height: 1.4; }
.dev-li .li-val { font-size: .8rem; white-space: nowrap; }
.dev-cd { display: flex; gap: 6px; align-items: flex-start; color: #f5a623; }
.li[disabled] { opacity: .45; pointer-events: none; }
.dev-hero { text-align: center; padding: 8px 0 6px; }
.dev-hero h2 { margin: 12px 0 2px; font-size: 1.3rem; }
.dev-big { width: 72px; height: 72px; border-radius: 22px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(160deg, #5b8cff, #2f5bff); }
.dev-big.phone { background: linear-gradient(160deg, #3ed598, #13a86b); }
.dev-big.tablet { background: linear-gradient(160deg, #b58cff, #7b4dff); }
.dev-big svg { width: 34px; height: 34px; }
.dev-sheet .pf-card { margin: 14px 0 0; }

/* tinted fixed frames (own colour) */
.fr-tint.fr-rainbow::before, .fr-tint.fr-gold::before, .fr-tint.fr-fire::before, .fr-tint.fr-ice::before { background: conic-gradient(from var(--fa), var(--td), var(--tl), var(--fc), var(--tl), var(--td)); }
.fr-tint.fr-gold::after, .fr-tint.fr-ice::after, .fr-tint.fr-fire::after { box-shadow: 0 0 22px color-mix(in srgb, var(--fc) 55%, transparent); }

/* gift ordering */
.gs-head { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.gs-btn { background: var(--panel-2); }
.gr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: .84rem; color: var(--text-2); position: sticky; top: 0; z-index: 5; padding: 6px 0; background: var(--panel, transparent); }
.gr-cell { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.gr-grid.dragging, .gr-grid.dragging * { cursor: grabbing !important; touch-action: none; }
.gr-cell .gift-card { pointer-events: none; animation: grWob .5s ease-in-out infinite alternate; }
.gr-cell.gr-ph { opacity: .25; }
.gr-cell.gr-ph .gift-card { animation: none; }
.gr-float { position: fixed; z-index: 99999; pointer-events: none; opacity: .96; filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .45)); transition: none; }
.gr-float .gift-card { pointer-events: none; animation: none; }
@keyframes grWob { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }

/* ================= gift folders ================= */
.gf-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.gf-chips::-webkit-scrollbar { display: none; }
.gf-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--graphite); color: var(--text-2); font-size: .86rem; font-weight: 600; transition: background .15s, color .15s; }
.gf-chip i { font-style: normal; font-weight: 600; opacity: .6; font-size: .78rem; }
.gf-chip.on { background: var(--text); color: var(--basalt); }
.gf-chip.add { background: transparent; border: 1px dashed var(--seam); }
.gf-item { display: contents; }
.gf-item.hide { display: none; }

/* gift / currency / premium cards: no message bubble behind them (v3 out-bubble rule was more specific) */
.mrow .bubble.gbub, .mrow.out .bubble.gbub, .mrow.in .bubble.gbub { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.mrow .bubble.gbub::before, .mrow .bubble.gbub::after { display: none !important; }
.b-gcard .gc-cap { display: table; margin: 0 auto 8px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.3; text-align: center; color: #fff; background: rgba(20, 20, 24, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); max-width: 92%; }
html[data-theme="light"] .b-gcard .gc-cap { background: rgba(0, 0, 0, .38); }
.bubble.gbub .b-meta { background: rgba(20, 20, 24, .45); color: #fff !important; border-radius: 999px; padding: 2px 8px; width: max-content; margin: 6px 4px 0 auto !important; }

/* ================= organisation badge (before the nickname) ================= */
.org-b { display: inline-flex; vertical-align: -3px; margin-right: 4px; color: #fff; cursor: pointer; flex: none; background: none !important; transition: transform .15s; }
.org-b:hover { transform: scale(1.08); }
.org-b svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
html[data-theme="light"] .org-b { color: #111; }
html[data-theme="light"] .pf-hero .org-b, html[data-theme="light"] .lay-steam .org-b { color: #fff; }
.pf-name .org-b svg { width: 22px; height: 22px; }
.cl-title .org-b, .cv-title .org-b { vertical-align: -3px; }
.popover.org-pop { padding: 14px 16px !important; max-width: min(320px, calc(100vw - 24px)); border-radius: 18px !important;
  background: color-mix(in srgb, var(--graphite) 60%, transparent) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .45) !important;
  transform-origin: top left; animation: orgIn .26s cubic-bezier(.2, .9, .3, 1.15) both !important; }
html[data-theme="light"] .popover.org-pop { background: rgba(255, 255, 255, .7) !important; border-color: rgba(0, 0, 0, .06) !important; }
@keyframes orgIn { from { opacity: 0; transform: translateY(6px) scale(.92); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.org-card .oc-title { display: block; font-size: 1.05rem; margin-bottom: 8px; }
.org-card .oc-row { display: flex; gap: 10px; align-items: center; font-size: .92rem; line-height: 1.35; color: var(--text); }
.org-card .oc-ico { flex: none; color: var(--text); display: inline-flex; }
.org-dlg .org-prev { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--graphite); margin-bottom: 14px; }
.org-dlg .org-prev b svg { color: var(--text); }
.org-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.org-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--graphite); display: grid; place-items: center; color: var(--text); border: 2px solid transparent; }
.org-ic.on { border-color: var(--accent); }

/* ================= profile action tiles (Чат · Звук · Звонок · Ещё) ================= */
.pf-cta { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 14px 4px !important; }
.pf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 62px; border-radius: 16px; background: var(--graphite); color: var(--text); font-size: .78rem; font-weight: 600; transition: transform .12s, background .15s; -webkit-tap-highlight-color: transparent; }
.pf-tile:hover { background: var(--graphite-2); }
.pf-tile:active { transform: scale(.95); }
.pf-tile svg { width: 22px; height: 22px; }
.pf-tile.off { color: var(--text-3, #6b6b72); }
.pf-tile.wide { grid-column: 1 / -1; flex-direction: row; gap: 8px; height: 50px; font-size: .95rem; }
.pf-tile.danger { color: #ff5a6a; }
.modal.skin-steam .pf-tile { background: #2a475e; color: #c7d5e0; }

/* ================= context menus: smooth, springy, frosted (PC + iPhone) ================= */
.ctx { animation: ctxPop .28s cubic-bezier(.2, .95, .25, 1.15) both !important; will-change: transform, opacity;
  background: color-mix(in srgb, var(--graphite) 66%, transparent) !important; -webkit-backdrop-filter: blur(26px) saturate(1.7) !important; backdrop-filter: blur(26px) saturate(1.7) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important; box-shadow: 0 22px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06) !important; }
html[data-theme="light"] .ctx { background: rgba(255, 255, 255, .72) !important; border-color: rgba(0, 0, 0, .06) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .18) !important; }
.ctx.closing { animation: ctxOut .15s ease-in both !important; }
@keyframes ctxPop { 0% { opacity: 0; transform: scale(.82); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes ctxOut { to { opacity: 0; transform: scale(.9); filter: blur(3px); } }
.ctx .ctx-item { animation: ctxItem .3s cubic-bezier(.2, .9, .3, 1) both; }
.ctx .ctx-item:nth-child(1) { animation-delay: .02s; } .ctx .ctx-item:nth-child(2) { animation-delay: .04s; } .ctx .ctx-item:nth-child(3) { animation-delay: .06s; }
.ctx .ctx-item:nth-child(4) { animation-delay: .08s; } .ctx .ctx-item:nth-child(5) { animation-delay: .1s; } .ctx .ctx-item:nth-child(6) { animation-delay: .12s; }
.ctx .ctx-item:nth-child(n+7) { animation-delay: .14s; }
@keyframes ctxItem { from { opacity: 0; transform: translateY(-4px); } }
.ctx .ctx-item:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .ctx, .ctx .ctx-item, .popover.org-pop { animation-duration: .01s !important; } }

/* ================= phone tab bar — liquid glass ================= */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: flex; position: fixed; z-index: 60; left: 14px; right: 14px; bottom: max(10px, env(safe-area-inset-bottom)); height: 64px; padding: 5px; border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)), rgba(22, 22, 26, .42);
    -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.05); backdrop-filter: blur(22px) saturate(1.9) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .05);
    transition: transform .32s cubic-bezier(.2, .9, .3, 1), opacity .25s; }
  html[data-theme="light"] .tabbar { background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .5)); border-color: rgba(0, 0, 0, .06); box-shadow: 0 10px 30px rgba(0, 0, 0, .14), inset 0 1px 0 #fff; }
  .app.chat-open ~ .tabbar, .app.chat-open .tabbar { transform: translateY(130%); opacity: 0; pointer-events: none; }
  .tb-ind { position: absolute; left: 0; top: 5px; bottom: 5px; border-radius: 27px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .38s cubic-bezier(.2, .9, .25, 1.15), width .3s; pointer-events: none; }
  html[data-theme="light"] .tb-ind { background: rgba(0, 0, 0, .07); }
  .tb-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 27px; color: var(--text-2); font-size: .64rem; font-weight: 600; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; transition: color .2s, transform .12s; z-index: 1; }
  .tb-item.on { color: var(--accent); }
  .tb-item:active { transform: scale(.92); }
  .tb-item svg { width: 24px; height: 24px; }
  .tb-ava { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .2s; }
  .tb-ava .ava { --s: 28px !important; }
  .tb-item.on .tb-ava { box-shadow: 0 0 0 2px var(--accent); }
  .tb-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .66rem; line-height: 18px; text-align: center; font-weight: 700; }
  /* the old corner menu button is replaced by the tab bar */
  #menuBtn, .menu-btn { display: none !important; }
  .sb-search.with-menu { grid-template-columns: 1fr !important; padding-left: 12px; }
  #sbScroll, .sidebar .sb-scroll { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  /* «Настройки» tab opens the menu as a bottom sheet */
  .drawer { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-height: 86vh; border-radius: 26px 26px 0 0 !important; border: 0 !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; animation: sheetUp .38s cubic-bezier(.2, .9, .3, 1) both !important;
    background: color-mix(in srgb, var(--basalt) 82%, transparent) !important; -webkit-backdrop-filter: blur(26px) saturate(1.6) !important; backdrop-filter: blur(26px) saturate(1.6) !important; }
  .drawer.closing { animation: sheetDown .25s ease-in both !important; }
  .contacts-modal .srch-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: var(--graphite); margin-bottom: 10px; }
}
@keyframes sheetDown { to { transform: translateY(105%); } }
.contacts-v .srch-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: var(--graphite); margin-bottom: 10px; color: var(--text-2); }
.contacts-v .srch-box .input { background: transparent; border: 0; padding-left: 0; }

/* ================= stories: no gradients, compact, matte & slightly transparent ================= */
.story-ring, html[data-theme="dark"] .story-ring { background: var(--accent) !important; }
.sv-content.matte, .story-editor-prev .matte { background: #1b1b1f !important; }
.sv-content.matte .sv-text, .story-editor-prev .sv-text { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.sv-caption { background: rgba(18, 18, 22, .5) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); margin: 0 12px; border-radius: 14px; left: 0; right: 0; }
.sv-foot { background: rgba(14, 14, 18, .45) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid rgba(255, 255, 255, .06); }
.sv-head { background: rgba(14, 14, 18, .32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 0 0 16px 16px; }
.sv-reply { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .1) !important; }
.sv-sheet { background: rgba(20, 20, 24, .72) !important; -webkit-backdrop-filter: blur(24px) saturate(1.5) !important; backdrop-filter: blur(24px) saturate(1.5) !important; }
.modal.story-modal { width: min(640px, 96vw); background: color-mix(in srgb, var(--basalt) 80%, transparent) !important; -webkit-backdrop-filter: blur(26px) saturate(1.5) !important; backdrop-filter: blur(26px) saturate(1.5) !important; }
.st-ed { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.st-ed .story-editor-prev { width: 200px; height: 340px; margin: 0; border-radius: 18px; }
.st-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-side .textarea { min-height: 64px; background: rgba(255, 255, 255, .05); }
.st-opt { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--text-2); font-weight: 600; }
.st-opt .seg button { height: 30px; font-size: .82rem; }
.st-kind button { height: 32px; font-size: .84rem; }
.st-side .filter-row { margin: 0; }
@media (max-width: 560px) { .st-ed { grid-template-columns: 1fr; } .st-ed .story-editor-prev { width: 100%; height: 260px; } }

/* ================= gift card (tap on a gift) — hero + 2-column table ================= */
.modal.gd-modal { width: min(460px, 96vw); padding: 0; overflow: hidden; }
.gd-modal .modal-body { padding: 0 0 14px !important; }
.gd-hero { position: relative; overflow: hidden; text-align: center; padding: 44px 16px 22px; color: #fff;
  background: radial-gradient(90% 85% at 50% 38%, var(--c1, #2a2a30), var(--c2, #0e0e10)); }
.gd-hero .nft-pattern { position: absolute; inset: -10%; width: 120%; height: 120%; pointer-events: none; }
.gd-hero .nft-pattern .sym { opacity: .22 !important; }
.gd-hero > :not(.nft-pattern) { position: relative; z-index: 1; }
.gd-btn { position: absolute !important; top: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); z-index: 2 !important; }
.gd-btn.l { left: 12px; } .gd-btn.r { right: 12px; }
.gd-art { display: flex; justify-content: center; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .45)); }
.gd-art .gift-img { width: 150px !important; height: 150px !important; }
.gd-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.gd-sub { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.gd-table { margin: 12px 12px 0; border: 1px solid var(--seam); border-radius: 16px; overflow: hidden; background: var(--graphite); }
.gd-row { display: grid; grid-template-columns: 130px 1fr; min-height: 46px; border-bottom: 1px solid var(--seam); }
.gd-row:last-child { border-bottom: 0; }
.gd-k { display: flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: .93rem; border-right: 1px solid var(--seam); background: color-mix(in srgb, var(--graphite) 70%, var(--basalt)); }
.gd-v { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: .95rem; min-width: 0; flex-wrap: wrap; }
.gd-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--graphite-2); color: var(--text-2); font-size: .74rem; font-weight: 700; }
.gd-who { display: inline-flex; align-items: center; gap: 8px; color: #4ea4f6; font-weight: 600; min-width: 0; }
.gd-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-v .bd-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.gd-acts { display: flex; gap: 8px; overflow-x: auto; padding: 12px 12px 0; scrollbar-width: none; }
.gd-acts::-webkit-scrollbar { display: none; }
.gd-act { flex: 1 0 auto; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; border-radius: 14px; background: var(--graphite); color: var(--text); font-size: .74rem; font-weight: 600; white-space: nowrap; transition: transform .12s, background .15s; }
.gd-act:hover { background: var(--graphite-2); } .gd-act:active { transform: scale(.95); }
html[data-theme="light"] .gd-who { color: #1f7ae0; }

/* animated model (Lottie) over the still picture */
.gd-art { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.gd-art .lottie-box { position: absolute; inset: -12px; opacity: 0; transition: opacity .25s; }
.gd-art.animated .lottie-box { opacity: 1; }
.gd-art.animated > .gift-img { opacity: 0; transition: opacity .2s; }
.anim-host { position: relative; }
.anim-host .lottie-box { position: absolute; inset: -10px; opacity: 0; transition: opacity .25s; }
.anim-host.animated .lottie-box { opacity: 1; }
.anim-host.animated > .gift-img { opacity: 0; transition: opacity .2s; }

/* hover animation inside tiles */
.gift-card .gart { position: relative; }
.gift-card .nft-art .nft-model { position: absolute !important; inset: 15% !important; }
.gift-card .lottie-box { position: absolute; inset: -6%; opacity: 0; transition: opacity .2s; pointer-events: none; }
.gift-card .animated .lottie-box, .gift-card .animated.lottie-host .lottie-box { opacity: 1; }
.gift-card .animated > .gift-img, .gift-card .nft-model.animated > .gift-img { opacity: 0; }
.gift-card.is-hidden { opacity: .55; }
.gift-card .hid-mark { position: absolute; top: 6px; left: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; }

/* ================= gift card: owner layout (buttons in the hero, ⋮ menu, tinted plaques) ================= */
.gd-tr { position: absolute !important; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2 !important; }
.gd-tr .gd-btn { position: static !important; }
.gd-wrap { --tint: color-mix(in srgb, var(--c1, #6b4bd8) 55%, #000); }
.gd-hero { padding-bottom: 16px; }
.gd-hacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 18px 4px 0; }
.gd-hact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px; border-radius: 16px; color: #fff; font-size: .86rem; font-weight: 700;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); transition: background .15s, transform .12s; }
.gd-hact:hover { background: rgba(255, 255, 255, .18); } .gd-hact:active { transform: scale(.96); }
.gd-hact svg { width: 26px; height: 26px; }
.gd-hact span { display: inline-flex; align-items: center; gap: 4px; }
.gd-hact span svg { width: 12px; height: 12px; }
.gd-pill { background: color-mix(in srgb, var(--tint) 70%, transparent) !important; color: #fff !important; }
.gd-sub svg { vertical-align: -2px; }
.gd-acts { display: none !important; }

/* ================= worn NFT intro: small frosted name pill (3 s) + soft white wave ================= */
.worn-tip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 6px; margin: 10px auto -4px; border-radius: 999px; font-size: .8rem; color: #fff;
  background: rgba(10, 10, 14, .38); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: wornTipIn .45s cubic-bezier(.2, .9, .3, 1.15) both; position: relative; z-index: 2; }
.worn-tip b { font-weight: 700; } .worn-tip span { opacity: .7; font-weight: 600; }
.worn-tip .gift-img { width: 18px !important; height: 18px !important; }
.worn-tip.out { animation: wornTipOut .45s ease both; }
.pf-lay .worn-tip { margin: 8px 0 -2px; }
@keyframes wornTipIn { from { opacity: 0; transform: translateY(6px) scale(.9); filter: blur(4px); } }
@keyframes wornTipOut { to { opacity: 0; transform: translateY(-4px) scale(.95); filter: blur(3px); } }
.pf-hero.pf-wave::after, .pf-lay.pf-wave::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .22) 54%, transparent 70%);
  background-size: 260% 100%; animation: heroWave 1.6s cubic-bezier(.4, 0, .2, 1) .15s both; mix-blend-mode: soft-light; }
@keyframes heroWave { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.pf-lay { position: relative; overflow: hidden; }
.worn.hov-anim .gift-img { position: relative; }
.worn.hov-anim .lottie-box { position: absolute; inset: -10%; opacity: 0; transition: opacity .2s; }
.worn.hov-anim .animated > .lottie-box, .worn.hov-anim .gift-img.animated .lottie-box { opacity: 1; }
.worn.hov-anim .gift-img.animated > img { opacity: 0; }

/* ================= no browser «download / visual search» button on gift pictures ================= */
.gift-img, .nft-art, .gd-art { position: relative; }
.gift-img::after, .gd-art::after { content: ''; position: absolute; inset: 0; z-index: 2; background: transparent; }
.gift-img img, .nft-art img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }

/* ================= sizes: NFT fits the card and the tiles ================= */
.gd-art { width: 124px !important; height: 124px !important; }
.gd-art .gift-img { width: 124px !important; height: 124px !important; }
.gd-art .gift-img img { width: 100%; height: 100%; object-fit: contain; }
.gd-art .lottie-box { inset: 0 !important; }
.gd-hero { padding-top: 40px !important; }
.gd-title { font-size: 1.3rem !important; }
.gd-hacts { gap: 8px !important; margin-top: 14px !important; }
.gd-hact { height: 62px !important; font-size: .8rem !important; border-radius: 14px !important; }
.gd-hact > svg { width: 22px !important; height: 22px !important; }
.gift-card { overflow: hidden; }
.gift-card .lottie-box { inset: 0 !important; }
@media (max-width: 420px) { .gd-art, .gd-art .gift-img { width: 108px !important; height: 108px !important; } .gd-row { grid-template-columns: 110px 1fr; } }
/* worn pill floats at the top of the header */
.worn-tip { position: absolute !important; top: 18px; left: 50%; margin: 0 !important; transform: translateX(-50%); white-space: nowrap; z-index: 4; animation: wornTipIn2 .45s cubic-bezier(.2, .9, .3, 1.15) both !important; }
.worn-tip.out { animation: wornTipOut2 .45s ease both !important; }
@keyframes wornTipIn2 { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.9); filter: blur(4px); } to { opacity: 1; transform: translateX(-50%); filter: none; } }
@keyframes wornTipOut2 { from { opacity: 1; transform: translateX(-50%); } to { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.95); filter: blur(3px); } }
/* models always fit inside their tile / card */
.nft-art .nft-model .gift-img { width: 100% !important; height: 100% !important; }
.gift-img img { object-fit: contain; }

/* gifts drawn as background (no browser download buttons over them) */
.gift-img { background-position: center; background-size: contain; background-repeat: no-repeat; }
.gift-img > img { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.gift-img:not(.bg-ready) { background-image: none; }
.pf-card .pf-org-note { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-2); cursor: pointer; }
.pf-org-note svg { flex: none; color: var(--text-2); }
/* animation inside gift cards (purchase preview, chat) */
.gcard-art { position: relative; }
.gcard-art .lottie-box { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none; }
.gcard-art.animated .lottie-box { opacity: 1; }
.gcard-art.animated > .gift-img { opacity: 0; transition: opacity .2s; }

/* phones: 3 gifts per row that actually fit */
@media (max-width: 560px) {
  .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .gift-card { padding: 6px 4px 8px !important; border-radius: 14px !important; min-width: 0; }
  .gift-card .gn { font-size: .74rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .gift-card .gr { font-size: .6rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: .02em; }
  .gift-card .nft-no { font-size: .62rem; padding: 1px 5px; }
  .gift-card .worn-mark { font-size: .55rem; padding: 1px 5px; }
  .gift-card .gart .gift-img { width: 60px !important; height: 60px !important; }
  .profile-modal .modal-body .tab-page, .profile-modal .tabs-host { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 560px) {
  .gift-card .gp { font-size: .7rem !important; gap: 3px; }
  .gift-card .gleft { font-size: .56rem !important; }
}

/* ===== performance: big gift grids ===== */
.lg-more { grid-column: 1 / -1; height: 1px; }
.nft-pattern.lite .ring { position: absolute; inset: 0; background-repeat: no-repeat; filter: brightness(0); pointer-events: none; }
.bn .nft-pattern .ring { opacity: .24 !important; }
.gd-hero .nft-pattern .ring { opacity: .22 !important; }
/* tiles in a grid don't spin their pattern all the time — only the one under the cursor */
.gift-grid .nft-art .nft-pattern { animation: none; }
html:not(.nohover) .gift-grid .gift-card:hover .nft-art .nft-pattern { animation: patSpin 120s linear infinite; }
.gift-grid > .gift-card, .gift-grid > .gf-item > .gift-card { contain: layout paint style; }
@supports (content-visibility: auto) {
  .gift-grid > .gift-card, .gift-grid > .gf-item > .gift-card { content-visibility: auto; contain-intrinsic-size: auto 150px; }
}
/* touch / iPhone: no per-tile filters, blurs or shine sweeps (each one is a separate GPU layer) */
html.nohover .gift-card .gart, html.ios .gift-card .gart { filter: none !important; }
html.nohover .gift-card::after, html.ios .gift-card::after { display: none !important; }
html.nohover .gift-card:hover, html.ios .gift-card:hover { transform: none !important; box-shadow: none !important; }
html.ios .gift-card .nft-no, html.ios .gift-card .worn-mark, html.ios .gift-card .pin-mark, html.ios .gift-card .hid-mark { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0, 0, 0, .45) !important; }
html.ios .gift-card { transition: none !important; will-change: auto !important; }
html.ios .modal-body, html.ios .tab-page { -webkit-overflow-scrolling: touch; }

/* ===== animated emoji ===== */
img.aemo { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; margin: 0 .04em; object-fit: contain; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.b-emoji img.aemo { width: 1.15em; height: 1.15em; vertical-align: -.15em; margin: 0; }
.b-emoji { filter: none; }
.rx .e img.aemo { width: 18px; height: 18px; vertical-align: -4px; margin: 0; }
.ctx-rx button img.aemo { width: 28px; height: 28px; vertical-align: middle; margin: 0; }
.stk.e img.aemo { width: 32px; height: 32px; vertical-align: middle; margin: 0; }
.burst-p img.aemo, .big-emoji-fx img.aemo { width: 1.2em; height: 1.2em; vertical-align: middle; }

/* ===== channel posts: meta stays on the text line, comments bar below ===== */
.bubble .b-comments { clear: both; margin-top: 10px; }
.bubble .b-meta { top: 3px; }
.cv-foot .cv-bigbtn { max-width: 520px; margin-left: auto; margin-right: auto; border-radius: 16px; }

/* ===== exactly one gift in the profile: one wide card (Telegram style), corner ribbon with the number ===== */
.gift-grid.single { grid-template-columns: 1fr !important; }
.gift-grid.single .gift-card { aspect-ratio: 2.3 / 1; padding: 0 !important; display: block; border-radius: 22px !important; }
.gift-grid.single .gift-card .gn, .gift-grid.single .gift-card .gr { display: none; }
.gift-grid.single .gift-card .nft-art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: inherit; }
.gift-grid.single .gift-card .nft-art .nft-model { inset: 12% 34% !important; }
.gift-grid.single .gift-card .nft-pattern { inset: auto !important; left: 50%; top: 50%; height: 100% !important; width: auto !important; aspect-ratio: 1; transform: translate(-50%, -50%) scale(1.9); }
.gift-grid.single .gift-card .nft-no { top: 16px; left: auto; right: -34px; width: 130px; transform: rotate(45deg); text-align: center; border-radius: 0; padding: 4px 0; font-size: .78rem; background: rgba(255, 255, 255, .16); letter-spacing: .02em; }
.gift-grid.single .gift-card.shop { display: grid; place-items: center; background: radial-gradient(70% 90% at 50% 50%, var(--c1, var(--rc)), var(--c2, var(--panel-2))); }
.gift-grid.single .gift-card.shop .gart { width: 46% !important; height: 80% !important; max-width: none; }
.gift-grid.single .gift-card.shop .gart .gift-img { width: 100% !important; height: 100% !important; }
.org-card .oc-ico.bdg-ico svg { width: 26px; height: 26px; }
.org-card .oc-ico.bdg-ico .i-premium { color: #a78bfa; }

/* ===== NFT card slides up from the bottom (any screen) ===== */
@keyframes gdRise { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gdSink { to { transform: translateY(80px); opacity: 0; } }
@media (min-width: 561px) {
  .modal.gd-modal { animation: gdRise .46s cubic-bezier(.22, 1, .36, 1) both !important; }
  .modal-back.closing .modal.gd-modal { animation: gdSink .26s cubic-bezier(.4, 0, 1, 1) both !important; }
}
@media (max-width: 560px) {
  .modal.gd-modal { animation: sheetUp .44s cubic-bezier(.22, 1, .36, 1) both !important; }
}

/* ===== liquid glass: context menus (profile ⋮ etc.), pin marks ===== */
html:not([data-theme="light"]) .ctx {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .04)), color-mix(in srgb, var(--graphite) 48%, transparent) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.9) brightness(1.05) !important; backdrop-filter: blur(30px) saturate(1.9) brightness(1.05) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 22px rgba(255, 255, 255, .03) !important;
}
.ctx .ctx-item:hover { background: rgba(255, 255, 255, .08); }
.gift-card .pin-mark, .pin-open, .pin-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.8); backdrop-filter: blur(10px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px rgba(0, 0, 0, .25);
}

/* ===== upgrade roulette: smoother spin, model reveal ===== */
.rl-stage { position: relative; }
.rl-stage .nft-art { transition: background .28s ease; }
.rl-stage .nft-model .gift-img { transition: transform .2s ease, opacity .2s ease; }
@keyframes rlTick2 { from { transform: scale(.9) translateY(4px); opacity: .7; } to { transform: none; opacity: 1; } }
.rl-stage.tick .nft-model { animation: rlTick2 .22s cubic-bezier(.2, .9, .3, 1) both !important; }
@keyframes rlReveal { 0% { transform: scale(.35) rotate(-10deg); opacity: 0; filter: blur(6px); } 55% { transform: scale(1.14) rotate(3deg); opacity: 1; filter: none; } 100% { transform: none; opacity: 1; } }
.rl-stage.done .rl-final .nft-model { animation: rlReveal .9s cubic-bezier(.2, 1.2, .35, 1) both !important; }
@keyframes rlShine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.rl-stage.done::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: rlShine 1.1s .35s ease-out both; pointer-events: none; z-index: 3; }
.rl-stage.done .rl-final .nft-pattern { animation: patSpin 60s linear infinite !important; }

/* ===== NFT link preview in messages (like Telegram) ===== */
.nft-preview { margin: 8px 0 2px; max-width: 320px; cursor: pointer; }
.nft-preview .np-body { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px 12px 12px 6px; padding: 8px 10px 10px; }
.mrow.out .nft-preview .np-body { border-left-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .1); }
.nft-preview .np-site { font-size: .8rem; font-weight: 700; color: var(--accent); }
.mrow.out .nft-preview .np-site { color: #fff; }
.nft-preview .np-title { font-weight: 700; font-size: .92rem; margin-top: 1px; }
.nft-preview .np-desc { font-size: .8rem; opacity: .75; margin: 2px 0 8px; line-height: 1.3; }
.nft-preview .np-art { width: 100%; border-radius: 12px; overflow: hidden; position: relative; }
.nft-preview .np-art .nft-art { width: 100%; border-radius: 12px; }
.nft-preview .np-art.animated .gift-img, .nft-preview .np-art .nft-model.animated > .gift-img { opacity: 0; }
.nft-preview .np-btn { width: 100%; margin-top: 6px; padding: 9px 0; border-radius: 10px; font-weight: 700; font-size: .86rem; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background .15s; }
.mrow.out .nft-preview .np-btn { color: #fff; background: rgba(255, 255, 255, .14); }
.nft-preview .np-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.nft-preview .nft-model .lottie-box { position: absolute; inset: 0; }
.nft-art .nft-model .lottie-box { position: absolute; inset: 0; pointer-events: none; }
.nft-art .nft-model.animated > .gift-img { opacity: 0; }

/* ===== gift purchase offers ===== */
.usd-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(160deg, #4ade80, #16a34a); color: #fff; font-weight: 900; font-size: .68em; line-height: 1; vertical-align: -2px; flex: none; }
.of-card { width: min(300px, 70vw); padding: 14px 14px 12px; text-align: center; }
.of-art { width: 110px; height: 110px; margin: 0 auto 12px; border-radius: 22px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.of-art.big { width: 140px; height: 140px; border-radius: 28px; }
.of-art .nft-art { width: 100%; height: 100%; border-radius: inherit; }
.of-cover { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, var(--c1), var(--c2)); }
.of-cover .gift-img { width: 70% !important; height: 70% !important; }
.of-text { font-size: .95rem; line-height: 1.38; }
.of-exp, .of-status { margin-top: 10px; font-size: .84rem; opacity: .75; }
.of-card.accepted .of-status { color: #4ade80; opacity: 1; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.of-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.of-acts.one { grid-template-columns: 1fr; }
.of-acts button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-radius: 12px; font-weight: 700; font-size: .9rem; background: rgba(255, 255, 255, .1); color: inherit; transition: background .15s, transform .15s; }
.of-acts button:hover { background: rgba(255, 255, 255, .17); }
.of-acts button:active { transform: scale(.97); }
.of-acts button[data-offer-act="accept"] { background: color-mix(in srgb, var(--accent) 85%, transparent); color: #fff; }
.of-dlg { text-align: center; }
.of-dlg .of-name { font-weight: 800; font-size: 1.15rem; }
.of-dlg .of-owner { opacity: .65; font-size: .86rem; margin-bottom: 14px; }
.of-dlg .label { text-align: left; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 12px; }
.seg button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border-radius: 10px; font-weight: 700; font-size: .88rem; color: var(--text-2); transition: background .2s, color .2s; }
.seg button.on { background: var(--panel-3); color: var(--text); box-shadow: var(--shadow-sm); }
.of-sum { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.of-sum .input { border: 0 !important; background: none !important; font-size: 1.3rem; font-weight: 800; padding: 12px 0; }
.of-info { display: flex; gap: 10px; text-align: left; margin-top: 14px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #22c55e 9%, transparent); font-size: .84rem; line-height: 1.4; }
.of-info .i { color: #22c55e; flex: none; margin-top: 2px; }

/* ===== monochrome NFTs (from the craft cube) ===== */
.nft-art.mono .nft-model, .gd-wrap.mono .gd-art { filter: grayscale(1) contrast(1.15) drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.nft-art.mono { background: radial-gradient(70% 70% at 50% 45%, #5a5a5e, #0b0b0c) !important; }
.gd-wrap.mono .gd-hero { background: radial-gradient(70% 70% at 50% 40%, #56565a, #0b0b0c) !important; }

/* ===== craft cube ===== */
.craft2 .cr-hint { font-size: .9rem; margin: 0 0 6px; }
.cube-scene { height: 190px; display: grid; place-items: center; perspective: 700px; position: relative; }
.cube { width: 110px; height: 110px; position: relative; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(35deg); animation: cubeIdle 9s linear infinite; }
@keyframes cubeIdle { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.cube-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .18); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 0 0 30px rgba(255, 255, 255, .06); }
.cube-face .nft-art { width: 100%; height: 100%; border-radius: 0; }
.cube-face .nft-pattern { animation: none !important; }
.cube-face .cf-empty { font-size: 2rem; font-weight: 800; opacity: .25; }
.cube-face.f0 { transform: translateZ(55px); } .cube-face.f1 { transform: rotateY(90deg) translateZ(55px); }
.cube-face.f2 { transform: rotateY(180deg) translateZ(55px); } .cube-face.f3 { transform: rotateY(-90deg) translateZ(55px); }
.cube-face.top { transform: rotateX(90deg) translateZ(55px); background: radial-gradient(circle, rgba(255, 255, 255, .25), rgba(255, 255, 255, .04)); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(55px); }
.cube-shadow { position: absolute; bottom: 14px; width: 120px; height: 18px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .55), transparent 70%); }
.cube.spin { animation: cubeSpin 2.4s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes cubeSpin { 0% { transform: rotateX(-22deg) rotateY(0) scale(1); } 60% { transform: rotateX(340deg) rotateY(900deg) scale(.86); } 85% { transform: rotateX(700deg) rotateY(1400deg) scale(.8); filter: brightness(1.8); } 100% { transform: rotateX(698deg) rotateY(1440deg) scale(.82); filter: brightness(2.4); } }
.cube.pop { animation: cubePop .65s ease-out both; }
@keyframes cubePop { to { transform: rotateX(-22deg) rotateY(1440deg) scale(1.6); opacity: 0; filter: brightness(3); } }
.cube.burn { animation: cubeBurn .65s ease-in both; }
@keyframes cubeBurn { 0% { filter: brightness(1.4) sepia(1) saturate(4) hue-rotate(-20deg); } 100% { transform: rotateX(-22deg) rotateY(1440deg) scale(.2); opacity: 0; filter: brightness(.2) sepia(1) saturate(6); } }
.cr-coll { text-align: center; font-size: .88rem; opacity: .8; margin: 2px 0 10px; }
.cr-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.cr-slot { aspect-ratio: 1; border-radius: 16px; border: 1.5px dashed var(--line-strong, rgba(255, 255, 255, .2)); display: grid; place-items: center; position: relative; overflow: hidden; cursor: pointer; }
.cr-slot.filled { border-style: solid; border-color: transparent; }
.cr-slot .nft-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-slot .cr-plus { font-size: 1.5rem; opacity: .35; }
.cr-slot .cr-x { position: absolute; top: 4px; right: 6px; z-index: 3; font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.cr-slot .cr-n { position: absolute; left: 6px; bottom: 4px; z-index: 3; font-size: .68rem; font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.cr-slot.fly { animation: crFly .7s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes crFly { to { transform: translateY(-150px) scale(.2); opacity: 0; } }
.cr-odds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: .82rem; margin-bottom: 12px; }
.cr-odds span { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); }
.cr-odds .b b { color: #f97316; } .cr-odds .g b { color: #4ade80; } .cr-odds .m b { color: #e5e7eb; }
.cr-grid .gift-card.sel { outline: 2.5px solid var(--accent); outline-offset: -2px; }
.cr-grid .cr-on { position: absolute; top: 8px; right: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: .8rem; }
.cr-res { text-align: center; padding: 6px 4px 0; }
.cr-res h3 { margin: 12px 0 4px; }
.cr-res .cr-fire { font-size: 5rem; animation: crFire 1.2s ease-in-out infinite alternate; }
@keyframes crFire { from { transform: scale(1); filter: drop-shadow(0 0 10px #f97316); } to { transform: scale(1.12) rotate(4deg); filter: drop-shadow(0 0 26px #ef4444); } }
.cr-res .cr-art { width: 180px; height: 180px; margin: 10px auto 0; border-radius: 30px; overflow: hidden; animation: rlReveal .9s cubic-bezier(.2, 1.2, .35, 1) both; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.cr-res .cr-art .nft-art { width: 100%; height: 100%; }
.cr-res .cr-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: .82rem; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cr-res.mono .cr-badge { background: linear-gradient(90deg, #fff, #555); color: #000; }

/* ===== shop: catalog + collection page ===== */
.shop-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.shop-tools .srch { flex: 1; min-width: 180px; position: relative; display: flex; align-items: center; }
.shop-tools .srch .i-search { position: absolute; left: 12px; opacity: .55; pointer-events: none; }
.shop-tools .srch .input { padding-left: 38px; height: 40px; border-radius: 12px; }
.cl-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--text-2); padding: 6px 8px 6px 2px; margin-bottom: 8px; }
.cl-back:hover { color: var(--text); }
.cl-hero { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 24px; background: radial-gradient(90% 120% at 15% 50%, var(--c1), var(--c2)); color: #fff; position: relative; overflow: hidden; }
.cl-hero .cl-art { width: 120px; height: 120px; flex: none; position: relative; }
.cl-hero .cl-art .gift-img { width: 120px !important; height: 120px !important; }
.cl-hero h2 { margin: 0 0 6px; font-size: 1.4rem; }
.cl-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; opacity: .92; margin-bottom: 12px; }
.cl-stats span { display: inline-flex; align-items: center; gap: 4px; }
.cl-hero .btn-primary { background: rgba(255, 255, 255, .95) !important; color: #111 !important; border: 0; }
.cl-models { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; margin-bottom: 4px; }
.cl-models .chip { flex: none; }
.cl-models .chip i { font-style: normal; opacity: .55; margin-left: 2px; }
.cl-owner { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 3px; font-size: .72rem; opacity: .8; padding: 0 6px; }
.cl-owner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-owner .ava { flex: none; }
@media (max-width: 560px) { .cl-hero { flex-direction: column; text-align: center; } .cl-stats { justify-content: center; } }

/* ===== admin panel: cleaner look ===== */
.admin-modal.modal { width: min(980px, 100%) !important; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0 14px; }
.adm-stat { padding: 12px 14px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.adm-stat .as-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.adm-stat b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.adm-stat small { font-size: .74rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tabs { gap: 4px !important; padding: 4px !important; margin-bottom: 12px; border-radius: 14px; background: var(--panel-2) !important; border: 1px solid var(--line); scrollbar-width: none; top: -1px !important; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs [data-tab] { flex: none; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: .86rem; color: var(--text-2); white-space: nowrap; transition: background .2s, color .2s; }
.adm-tabs [data-tab].active { background: var(--panel-3); color: var(--text); box-shadow: var(--shadow-sm); }
.adm-tabs [data-tab="owner"] { color: #f5a524; }
.adm-row { border: 1px solid transparent; }
.adm-row + .adm-row { margin-top: 2px; }
.adm-row:hover { border-color: var(--line); }

/* owner tools */
.ow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ow-card { padding: 16px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ow-card.focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ow-card.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.ow-card h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .98rem; }
.ow-p { margin: 0; font-size: .84rem; }
.ow-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ow-row .input { flex: 1; min-width: 110px; }
.ow-seg { margin: 0 !important; padding: 3px !important; }
.ow-seg button { padding: 6px 10px !important; }
.ow-user { display: flex; align-items: center; gap: 6px; padding-left: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); flex: 1; min-width: 160px; }
.ow-user > span { opacity: .5; font-weight: 700; }
.ow-user .input { border: 0 !important; background: none !important; padding-left: 0; }
.ow-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.ow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ow-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--text-3); }
.ow-prev { display: flex; justify-content: center; }
.ow-art { width: 120px; height: 120px; border-radius: 24px; overflow: hidden; position: relative; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, var(--c1, #333), var(--c2, #111)); }
.ow-art .nft-art { width: 100%; height: 100%; }
.ow-num { position: absolute; top: 8px; left: 8px; font-size: .7rem; font-weight: 800; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, .4); color: #fff; z-index: 3; }
.ow-bal { font-size: .82rem; }
.ow-card > .ow-user, .ow-card > .input, .ow-card > select { flex: none; }
.ow-grid label.ow-check { flex-direction: row; align-items: center; color: var(--text); font-size: .86rem; }
/* pattern colour follows the backdrop (light symbols on dark backdrops) */
.nft-pattern .sym, .nft-pattern.lite .ring { filter: var(--symf, brightness(0)) !important; }
.nft-pattern.lite .ring { opacity: calc(var(--symo, 1) * 1) ; }
.of-card { background: color-mix(in srgb, var(--graphite, #1c1c1f) 88%, transparent); border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

/* ===================== Wallet ($) and Balance (rubies) ===================== */
.miniapp.wl, .miniapp.rb { background: #0d0e11 !important; color: #f2f4f8; }
.miniapp.wl .ma-head .t, .miniapp.rb .ma-head .t { gap: 7px; }
.wl-page { display: flex; flex-direction: column; gap: 12px; }
.wl-page.in { animation: wlIn .35s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wlIn { from { transform: translateX(26px); opacity: 0; } }
.wl-earn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 11px 14px; border-radius: 14px; background: #171a20; font-size: .9rem; color: #c8ccd6; transition: background .15s; }
.wl-earn b { color: #5aa9ff; }
.wl-earn span { margin-left: auto; opacity: .6; display: inline-flex; }
.wl-earn:hover { background: #1d2129; }
.wl-card-wrap { perspective: 900px; padding: 4px 0; }
.wl-card { position: relative; height: 196px; border-radius: 22px; padding: 18px 20px; overflow: hidden; color: #fff; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.22, 1, .36, 1); will-change: transform;
  background: radial-gradient(120% 140% at 0% 0%, #6cc4ff 0%, #2b8cff 38%, #1565e8 70%, #0d47c9 100%); box-shadow: 0 22px 48px -18px rgba(29, 110, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.wl-card-wrap:hover .wl-card { transition: transform .12s linear; }
.wl-glare { position: absolute; inset: 0; pointer-events: none; transition: background .2s; mix-blend-mode: soft-light; }
.wl-dots { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.wl-dots i, .wl-spark i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #fff; transform: scale(var(--s)); animation: twinkle 2.6s var(--d) ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.wl-amt { display: flex; align-items: center; gap: 8px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; position: relative; }
.wl-amt .dgem { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.wl-sub { opacity: .8; margin-top: 4px; font-size: .9rem; position: relative; }
.wl-qr { position: absolute; right: 18px; top: 50%; transform: translateY(-50%) translateZ(20px); width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #1b2a44; background: linear-gradient(160deg, #fff, #dfe8f5); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.wl-holder { position: absolute; left: 20px; bottom: 16px; font-weight: 800; letter-spacing: .12em; font-size: .86rem; opacity: .95; }
.wl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-btn { height: 48px; border-radius: 14px !important; background: #1d63e0 !important; color: #fff !important; border: 0 !important; font-weight: 700; gap: 8px; }
.wl-btn:hover { background: #2a73f0 !important; }
.wl-feats { display: flex; flex-direction: column; gap: 16px; padding: 8px 6px; }
.wl-feat { display: flex; gap: 14px; align-items: flex-start; }
.wl-feat > span { color: #4aa3ff; flex: none; margin-top: 2px; }
.wl-feat b { display: block; font-size: .95rem; }
.wl-feat small { color: #9aa1ad; font-size: .84rem; line-height: 1.35; }
.wl-label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #8e95a2; font-weight: 700; margin: 6px 4px -4px; }
.wl-box { padding: 14px; border-radius: 18px; background: #16181d; display: flex; flex-direction: column; gap: 10px; }
.wl-li { display: flex; flex-direction: column; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.wl-li b { font-size: 1.1rem; color: #fff; }
.wl-li small { color: #8e95a2; }
.wl-collect { background: #1f2430 !important; color: #5aa9ff !important; border: 0 !important; }
.wl-big { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 2.2rem; font-weight: 800; }
.wl-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: #9aa1ad; font-weight: 600; }
.wl-hero, .rb-hero { position: relative; text-align: center; padding: 18px 10px 6px; overflow: hidden; }
.wl-hero h2, .rb-hero h2 { margin: 8px 0 6px; font-size: 1.5rem; }
.wl-hero p, .rb-hero p { margin: 0 auto; max-width: 320px; color: #a8aebb; font-size: .9rem; line-height: 1.4; }
.wl-spark { position: absolute; inset: 0; pointer-events: none; }
.wl-spark i { background: #5aa9ff; width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg) scale(var(--s)); }
.wl-spark.gold i { background: #ffc94a; }
.wl-hero .dgem, .rb-gem { position: relative; filter: drop-shadow(0 10px 26px rgba(74, 168, 255, .45)); animation: gemFloat 4s ease-in-out infinite; display: inline-block; }
.rb-gem { filter: drop-shadow(0 10px 30px rgba(255, 70, 100, .5)); }
@keyframes gemFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.wl-legal { text-align: center; font-size: .78rem; color: #6f7684; margin: 6px 0 0; }
.wl-legal a { color: #5aa9ff; }
.tx-tabs { margin: 4px 0 0 !important; background: #16181d !important; border-color: transparent !important; }
.tx-tabs button { font-size: .82rem !important; }
.tx-list { display: flex; flex-direction: column; }
.tx2 { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.tx2 .ti { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #1b1e25; color: #c8ccd6; flex: none; }
.tx2 .tb { flex: 1; min-width: 0; }
.tx2 .tb b { display: block; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx2 .tb small { color: #7d8492; font-size: .76rem; }
.tx2 .ta { font-weight: 800; font-size: .92rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.tx2 .ta.plus { color: #4ade80; } .tx2 .ta.minus { color: #ff6b7e; }
/* balance (rubies) */
.rb-box { margin: 10px 0 12px; padding: 18px 16px; border-radius: 22px; background: #16181d; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rb-bal { display: flex; align-items: center; gap: 8px; font-size: 2.4rem; font-weight: 800; }
.rb-box > small { color: #8e95a2; }
.rb-buy { margin-top: 12px; height: 50px; border-radius: 16px !important; font-weight: 700; gap: 8px; background: linear-gradient(180deg, #ff5a73, #d61f45) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px -10px rgba(230, 40, 80, .7); }
.rb-link { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: #9aa1ad; font-weight: 600; font-size: .9rem; }
.rb-link:hover { color: #fff; }
.rb-earn { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 18px; background: #16181d; margin-bottom: 10px; color: inherit; }
.rb-earn:hover { background: #1b1e25; }
.rb-earn b { display: block; } .rb-earn small { color: #8e95a2; font-size: .82rem; line-height: 1.35; }
.rb-earn > div { flex: 1; }
.rb-ei { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #4ade80, #16a34a); }
.rb-ei.usd { background: #12233f; }
/* top up / exchange / receive */
.tu-list { display: flex; flex-direction: column; gap: 6px; }
.tu-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-align: left; transition: background .15s; }
.tu-item:hover:not([disabled]) { background: var(--hover); }
.tu-item[disabled] { opacity: .5; }
.tu-item > div { flex: 1; } .tu-item b { display: block; } .tu-item small { color: var(--text-3); }
.tu-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }
.tu-ic.c1 { background: linear-gradient(160deg, #60a5fa, #2563eb); } .tu-ic.c2 { background: linear-gradient(160deg, #a78bfa, #6d28d9); } .tu-ic.c3 { background: linear-gradient(160deg, #fbbf24, #d97706); } .tu-ic.c4 { background: linear-gradient(160deg, #94a3b8, #475569); }
.ex { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ex-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.ex-row .input { border: 0 !important; background: none !important; font-size: 1.4rem; font-weight: 800; }
.ex-row.out { padding: 14px 12px; } .ex-row.out b { font-size: 1.4rem; }
.ex-arrow { align-self: center; transform: rotate(90deg); opacity: .6; }
.rx { text-align: center; }
.rx-qr { width: 200px; height: 200px; margin: 0 auto 12px; border-radius: 20px; background: #fff; display: grid; place-items: center; color: #1b2a44; padding: 10px; }
.rx-qr img, .rx-qr canvas { width: 180px !important; height: 180px !important; }
.rx-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: var(--panel-2); font-weight: 600; }
/* send $ */
.us { text-align: center; display: flex; flex-direction: column; gap: 12px; }
.us-to { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.us-to small { color: var(--text-3); }
.us-amt { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 2.8rem; font-weight: 800; }
.us-amt span { opacity: .45; }
.us-amt input { width: 6ch; min-width: 2ch; background: none; border: 0; outline: 0; color: inherit; font: inherit; text-align: left; }
.us-quick { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.us-quick button { padding: 6px 12px; border-radius: 999px; background: var(--panel-2); font-weight: 700; font-size: .86rem; }
.us-info { font-size: .82rem; color: var(--text-3); }
.usd-fly { display: inline-grid; place-items: center; padding: 10px 14px; border-radius: 16px; font-weight: 900; color: #fff; background: linear-gradient(160deg, #6cc4ff, #1565e8); box-shadow: 0 10px 24px rgba(29, 110, 255, .5); }
/* chat card */
.usd-card { position: relative; overflow: hidden; width: min(280px, 68vw); padding: 14px 16px 12px; border-radius: 20px; color: #fff; text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, #6cc4ff 0%, #2b8cff 40%, #1565e8 75%, #0d47c9 100%); box-shadow: 0 14px 30px -14px rgba(29, 110, 255, .8); }
.usd-card .uc-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .25) 45%, transparent 60%); background-size: 250% 100%; animation: ucShine 4s ease-in-out infinite; pointer-events: none; }
@keyframes ucShine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.usd-card .uc-top { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .84rem; opacity: .95; }
.usd-card .uc-amt { font-size: 2rem; font-weight: 900; letter-spacing: -.02em; margin: 6px 0 8px; }
.usd-card .uc-who { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; flex-wrap: wrap; }
.usd-card .uc-who span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usd-card .uc-note { margin-top: 8px; font-size: .86rem; font-style: italic; opacity: .95; }
.usd-card .uc-st { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
/* PIN, phrase, how it works */
.pin { text-align: center; padding: 6px 0 4px; }
.pin-ic { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 14px 0 18px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-3); transition: background .15s, border-color .15s; }
.pin-dots i.on { background: var(--text); border-color: var(--text); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.pin-pad button { height: 72px; border-radius: 50%; font-size: 1.5rem; font-weight: 600; background: var(--panel-2); transition: background .12s, transform .12s; }
.pin-pad button:active { transform: scale(.94); background: var(--panel-3); }
.pin-pad button[disabled] { visibility: hidden; }
.phrase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phrase span { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-weight: 700; font-size: .9rem; }
.phrase i { font-style: normal; opacity: .45; font-size: .74rem; margin-right: 6px; }
.hiw { text-align: center; }
.hiw .hiw-gem { margin: 6px 0 4px; }
.hiw .wl-feats { text-align: left; margin-top: 12px; }
.hiw .wl-feat small { color: var(--text-3); }

/* ===== buy rubies (fixed on desktop): even 2×2 grid, nothing overflows ===== */
.modal.tp-modal { width: min(520px, 100%) !important; }
.tp-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 16px !important; }
.tp-card { min-width: 0 !important; width: 100% !important; padding: 16px 10px 12px !important; }
.tp-card .tp-gems { display: flex; justify-content: center; gap: 2px; min-height: 30px; flex-wrap: nowrap; }
.tp-card .tp-gem { display: inline-flex; }
.tp-card .tp-btn { width: 100%; }
.tp-card .tp-rate { white-space: nowrap; }
.tp-diamond svg { filter: drop-shadow(0 10px 26px rgba(255, 60, 90, .45)); }

/* in-chat search bar */
.cv-search { position: relative; z-index: 4; display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; padding: 4px 6px 4px 12px; border-radius: 14px; border: 1px solid var(--line); animation: fadeIn .2s ease both; }
.cv-search .i-s { opacity: .55; display: inline-flex; }
.cv-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 6px 2px; }
.cv-search .cs-n { font-size: .78rem; color: var(--text-3); white-space: nowrap; }
.cv-search [data-s="up"] .i { transform: rotate(-90deg); } .cv-search [data-s="down"] .i { transform: rotate(90deg); }

/* ===== channel & bot profiles (Telegram iOS look) ===== */
.pf-subs { text-align: center; color: var(--text-2); font-size: .98rem; margin-top: 2px; }
.edit-pill { height: 34px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); color: var(--text); margin-right: 6px; transition: background .15s; }
.edit-pill:hover { background: rgba(255, 255, 255, .16); }
.chan-modal .pf-cta .pf-tile span, .profile-modal .pf-cta .pf-tile span { text-transform: lowercase; }
.pf-row-qr { position: relative; padding-right: 50px !important; }
.pf-qr { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--accent); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.pf-qr:hover { background: var(--hover); }
.pf-linkrow { display: block; width: 100%; text-align: left; font-size: 1rem; color: var(--text-2); padding-top: 14px !important; padding-bottom: 14px !important; transition: background .15s; }
.pf-linkrow:hover { background: var(--hover); color: var(--text); }
.pf-foot-note { padding: 10px 26px 20px; font-size: .84rem; color: var(--text-3); }
.un-also { font-size: .92rem; }

/* =================================================================== matte black (macOS-like) */
html[data-theme="dark"] {
  --void: #050506; --basalt: #0d0d0f; --graphite: #17171a; --graphite-2: #1f1f23; --seam: rgba(255, 255, 255, .065);
  --line-2: rgba(255, 255, 255, .1);
  --text: #f0f0f2; --text-2: #8e8e93; --text-3: #5b5b61;
  --bubble-in: #1a1a1d; --input: #151518;
  --hover: rgba(255, 255, 255, .045); --active: rgba(255, 255, 255, .08);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body { background: var(--void) var(--noise) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font, Inter), "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
/* matte surfaces: a hair of grain + soft top highlight, like macOS dark windows */
html[data-theme="dark"] .sidebar { background: #0b0b0d var(--noise) !important; border-right: 1px solid rgba(255, 255, 255, .055) !important; }
html[data-theme="dark"] .cv-head, html[data-theme="dark"] .cv-foot .composer, html[data-theme="dark"] .cv-search { background: rgba(14, 14, 16, .86) !important; -webkit-backdrop-filter: blur(22px) saturate(1.6) !important; backdrop-filter: blur(22px) saturate(1.6) !important; border-color: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] .modal { background: #111113 var(--noise) !important; border: 1px solid rgba(255, 255, 255, .07) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05) !important; }
html[data-theme="dark"] .pf-card, html[data-theme="dark"] .pf-info, html[data-theme="dark"] .lgroup, html[data-theme="dark"] .gift-card { background-color: #161618 !important; }
html[data-theme="dark"] .pf-tile { background: #18181b !important; border: 1px solid rgba(255, 255, 255, .05) !important; }
html[data-theme="dark"] .pf-tile:hover { background: #1f1f23 !important; }
html[data-theme="dark"] .bubble { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; }
html[data-theme="dark"] .cl-item:hover { background: rgba(255, 255, 255, .035) !important; }
html[data-theme="dark"] .cl-item.active, html[data-theme="dark"] .cl-item.sel { background: rgba(255, 255, 255, .07) !important; }
html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, .14) transparent; }

/* ===================== chat themes & wallpapers ===================== */
.cv > .tw { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cv.themed > .cv-bg { opacity: .14 !important; mix-blend-mode: overlay; }
.cv.th-nopattern > .cv-bg { display: none; }
.tw-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
video.tw-layer { width: 100%; height: 100%; object-fit: cover; }
.tw-dim { position: absolute; inset: 0; background: #000; }
.tw-anim { background: var(--t1); overflow: hidden; }
.tw-aurora { background: linear-gradient(120deg, var(--t1), var(--t2), var(--t3), var(--t1)); background-size: 400% 400%; animation: twPan 18s ease-in-out infinite; }
.tw-flow { background: linear-gradient(200deg, var(--t1), var(--t2), var(--t3)); background-size: 300% 300%; animation: twPan 12s ease-in-out infinite alternate; }
@keyframes twPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.tw-waves::before, .tw-waves::after { content: ''; position: absolute; left: -50%; width: 200%; height: 200%; border-radius: 42%; background: color-mix(in srgb, var(--t2) 70%, transparent); top: 55%; animation: twSpin 24s linear infinite; }
.tw-waves::after { background: color-mix(in srgb, var(--t3) 45%, transparent); top: 62%; border-radius: 45%; animation-duration: 32s; animation-direction: reverse; }
@keyframes twSpin { to { transform: rotate(360deg); } }
.tw-lava::before, .tw-lava::after { content: ''; position: absolute; width: 70%; height: 70%; border-radius: 50%; filter: blur(60px); opacity: .85; animation: twBlob 16s ease-in-out infinite alternate; }
.tw-lava::before { background: var(--t2); left: -10%; top: -10%; }
.tw-lava::after { background: var(--t3); right: -15%; bottom: -15%; animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes twBlob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30%, 20%) scale(1.25); } 100% { transform: translate(10%, 45%) scale(.9); } }
.tw-pulse { background: radial-gradient(circle at 50% 50%, var(--t2), var(--t1) 70%); animation: twPulse 6s ease-in-out infinite; background-size: 140% 140%; background-position: center; }
@keyframes twPulse { 50% { background-size: 190% 190%; } }
.tw-stars { background: radial-gradient(ellipse at 50% 120%, var(--t2), var(--t1) 70%); }
.tw-stars i { position: absolute; inset: -50%; background-image: radial-gradient(1.5px 1.5px at 20px 30px, var(--t3), transparent), radial-gradient(1px 1px at 120px 80px, var(--t3), transparent), radial-gradient(1.5px 1.5px at 200px 160px, var(--t3), transparent), radial-gradient(1px 1px at 60px 200px, var(--t3), transparent), radial-gradient(2px 2px at 160px 20px, var(--t3), transparent); background-size: 240px 240px; animation: twDrift 80s linear infinite; opacity: .8; }
.tw-stars i:nth-child(2) { background-size: 170px 170px; animation-duration: 120s; opacity: .5; }
.tw-stars i:nth-child(3) { background-size: 330px 330px; animation-duration: 60s; opacity: .35; animation-name: twDrift, twinkle; }
@keyframes twDrift { to { transform: translate(240px, -240px); } }
html.ios .tw-anim, html.ios .tw-anim::before, html.ios .tw-anim::after, html.ios .tw-stars i { animation-duration: 40s !important; }
/* picker */
.th-sec { font-weight: 700; margin: 6px 2px 8px; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.th-card { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 6px; border-radius: 18px; border: 2px solid transparent; position: relative; transition: border-color .15s; }
.th-card.on { border-color: var(--accent); }
.th-card b { font-size: .84rem; }
.th-own { position: absolute; top: 12px; left: 12px; font-style: normal; font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .5); color: #fff; z-index: 2; }
.th-mini { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--panel-2); display: block; }
.th-mini.def, .th-mini.add { display: grid; place-items: center; font-size: .78rem; color: var(--text-3); border: 1.5px dashed var(--line-2); }
.th-mini .b1, .th-mini .b2, .th-mini .b3 { position: absolute; height: 12%; border-radius: 8px; z-index: 2; }
.th-mini .b1 { left: 8%; top: 18%; width: 58%; background: var(--bubble-in); }
.th-mini .b2 { right: 8%; top: 40%; width: 52%; background: var(--bubble-out-1); }
.th-mini .b3 { left: 8%; top: 62%; width: 44%; background: var(--bubble-in); }
.th-editor.modal { width: min(860px, 100%) !important; }
.the { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
@media (max-width: 700px) { .the { grid-template-columns: 1fr; } }
.th-prev { position: relative; height: 420px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.th-prev .cv { position: absolute; inset: 0; background: var(--void); }
.thp-msgs { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; justify-content: flex-end; height: 100%; }
.thp { max-width: 78%; padding: 8px 12px; border-radius: 18px; font-size: .88rem; }
.thp.in { background: var(--bubble-in); color: var(--text); align-self: flex-start; border-bottom-left-radius: 6px; }
.thp.out { background: var(--bubble-out-1); color: var(--bubble-out-text); align-self: flex-end; border-bottom-right-radius: 6px; }
.the-form .seg { margin-bottom: 10px; }
.the-cols { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; }
.th-anims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.th-an { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; border: 2px solid transparent; }
.th-an.on { border-color: var(--accent); }
.th-an .tw-layer { position: relative; display: block; width: 100%; height: 54px; border-radius: 10px; overflow: hidden; inset: auto; }
.th-an small { font-size: .74rem; }

/* ===== photo viewer ===== */
.viewer-back { background: rgba(0, 0, 0, .97) !important; overflow: hidden; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.viewer-back.closing { animation: fadeOut .18s ease both; }
.viewer-back .vclose { display: none; }
.v-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.v-stage .v-media { max-width: 92vw; max-height: 84vh; border-radius: 12px; user-select: none; touch-action: none; will-change: transform; animation: pop .32s var(--spring) both; }
.viewer-back.zoomed .v-media { cursor: grab; border-radius: 0; }
.glassy.v-top, .glassy.v-zoom { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)) !important; -webkit-backdrop-filter: blur(20px) saturate(1.8) !important; backdrop-filter: blur(20px) saturate(1.8) !important; border: 1px solid rgba(255, 255, 255, .18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px rgba(0, 0, 0, .4) !important; }
.v-top { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.v-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background .15s, transform .15s; }
.v-btn:hover { background: rgba(255, 255, 255, .14); }
.v-btn:active { transform: scale(.92); }
.v-zoom { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; color: #fff; animation: fadeIn .3s .1s ease both; }
.v-zoom button { width: 38px; height: 34px; border-radius: 999px; font-size: 1.3rem; font-weight: 600; color: #fff; display: grid; place-items: center; }
.v-zoom button:hover { background: rgba(255, 255, 255, .14); }
.v-zoom .v-z { min-width: 54px; text-align: center; font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================== calls ===================== */
.cx { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; color: #fff; background: radial-gradient(120% 80% at 50% 0%, #1b1b22, #050506 70%); animation: fadeIn .25s ease both; }
.cx.closing { animation: fadeOut .2s ease both; }
.cx.mini { inset: auto 16px 86px auto; background: none; animation: none; }
.cx-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.cx-title { flex: 1; text-align: center; min-width: 0; }
.cx-title b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-title small { display: inline-flex; align-items: center; gap: 4px; opacity: .7; font-size: .8rem; }
.cx-fp { letter-spacing: 2px; }
.cx-ib { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; }
.cx-ib:hover { background: rgba(255, 255, 255, .18); }
.cx-stage { position: relative; flex: 1 1 60%; margin: 0 16px; border-radius: 18px; overflow: hidden; background: #000; min-height: 0; cursor: zoom-in; }
.cx-bigvid { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cx-stage-tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: .8rem; font-weight: 600; }
.cx-grid { flex: 1; display: grid; gap: 10px; padding: 14px 16px; align-content: center; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 1100px; width: 100%; margin: 0 auto; overflow-y: auto; }
.cx-grid.n1, .cx-grid.n2 { grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); justify-content: center; }
.cx-grid.small { flex: 0 0 auto; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: 30vh; }
.cx-grid.small .cx-tile { aspect-ratio: 16 / 10; }
.cx-grid.small .cx-ava .ava { --s: 46px !important; width: 46px !important; height: 46px !important; }
.cx-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; background: #16161b; border: 1px solid rgba(255, 255, 255, .06); display: grid; place-items: center; overflow: hidden; transition: box-shadow .12s; cursor: context-menu; }
.cx-tile.speaking { box-shadow: 0 0 0 3px #22c55e, 0 0 calc(10px + var(--lv, 0) * 30px) rgba(34, 197, 94, .5); }
.cx-tile .cx-ava { position: relative; }
.cx-tile .cx-ava::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(34, 197, 94, calc(var(--lv, 0) * 1.6)); transform: scale(calc(1 + var(--lv, 0) * .25)); transition: transform .1s; }
.cx-tile.lmuted { opacity: .55; }
.cx-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cx-name { position: absolute; left: 10px; bottom: 8px; right: 10px; display: flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.cx-name small { opacity: .65; font-weight: 500; margin-left: 4px; }
.cx-mi { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(239, 68, 68, .85); }
.cx-bar { display: flex; justify-content: center; gap: 10px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.cx-b { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 72px; padding: 12px 10px 8px; border-radius: 18px; background: rgba(255, 255, 255, .09); color: #fff; font-size: .74rem; font-weight: 600; transition: background .15s, transform .12s; }
.cx-b:hover { background: rgba(255, 255, 255, .16); }
.cx-b:active { transform: scale(.95); }
.cx-b.off { background: #fff; color: #111; }
.cx-b.on { background: #2563eb; }
.cx-b.red { background: #ef4444; }
.cx-b.red:hover { background: #f05252; }
/* incoming */
.cx.incoming { justify-content: center; align-items: center; background: radial-gradient(120% 80% at 50% 30%, #1d2440, #050506 70%); }
.cx-in { text-align: center; }
.cx-in-ava { display: inline-block; border-radius: 50%; animation: cxPulse 1.6s ease-out infinite; }
@keyframes cxPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 100% { box-shadow: 0 0 0 34px rgba(255, 255, 255, 0); } }
.cx-in h2 { margin: 18px 0 4px; font-size: 1.6rem; }
.cx-in p { opacity: .7; display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.cx-in-acts { display: flex; gap: 60px; justify-content: center; margin-top: 54px; }
.cx-round { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: .84rem; }
.cx-round .i { width: 68px; height: 68px; padding: 21px; border-radius: 50%; box-sizing: border-box; }
.cx-round.accept .i { background: #22c55e; animation: cxWig 1.2s ease-in-out infinite; }
.cx-round.decline .i { background: #ef4444; }
@keyframes cxWig { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } 50% { transform: rotate(0); } }
/* minimized pill */
.cx-pill { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(20, 20, 24, .88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); cursor: pointer; animation: pop .3s var(--spring) both; }
.cx-pill b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.cx-pill .cx-time { font-variant-numeric: tabular-nums; opacity: .75; font-size: .82rem; }
.cx-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.cx-pb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; }
.cx-pb.off { background: #fff; color: #111; } .cx-pb.red { background: #ef4444; }
/* participant menu */
.cx-pm-back { position: fixed; inset: 0; z-index: 410; }
.cx-pmenu { position: fixed; width: 250px; padding: 8px; border-radius: 16px; background: rgba(28, 28, 32, .92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); color: #fff; animation: ctxPop .22s cubic-bezier(.2, .95, .25, 1.15) both; }
.cx-pmenu > b { display: block; padding: 6px 10px 8px; font-size: .9rem; }
.cx-vol { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.cx-vol input { flex: 1; accent-color: #22c55e; }
.cx-vol em { font-style: normal; font-size: .78rem; min-width: 38px; text-align: right; opacity: .8; }
/* settings */
.cx-set.modal { width: min(460px, 100%) !important; }
.cxs { display: flex; flex-direction: column; gap: 10px; }
.cxs-sec { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-top: 8px; }
.cxs-p { margin: 0; font-size: .82rem; }
.cxs-meter { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.cxs-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); transition: width .1s; }
.cxs-presets { display: flex; flex-wrap: wrap; gap: 6px; }
/* chat bar */
.call-joinbar { position: relative; z-index: 4; display: flex; align-items: center; gap: 12px; margin: 8px 12px 0; padding: 8px 10px 8px 14px; border-radius: 14px; border: 1px solid var(--line); }
.call-joinbar small { display: block; color: var(--text-3); font-size: .78rem; }
.cj-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .25); animation: cxBlink 1.4s ease-in-out infinite; }
@keyframes cxBlink { 50% { opacity: .35; } }
@media (max-width: 560px) { .cx-b { min-width: 58px; padding: 10px 6px 6px; font-size: .68rem; } .cx-grid { grid-template-columns: repeat(2, 1fr) !important; } .cx-grid.n1, .cx-grid.n2 { grid-template-columns: 1fr !important; } }

/* ===== AI editor ===== */
.ai-pop.ai2 { width: min(380px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.ai2 .ai-head { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.ai-badge { margin-left: auto; font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--panel-3); color: var(--text-3); letter-spacing: .03em; }
.ai-badge.on { background: linear-gradient(90deg, #4d6bfe, #7c3aed); color: #fff; }
.ai2 .seg { margin: 0 !important; }
.ai2 .seg button { font-size: .78rem !important; padding: 6px 0 !important; }
.ai2 .seg button.active, .ai2 .seg button.on { background: var(--panel-3); color: var(--text); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ai-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 12px; background: var(--panel-2); font-size: .76rem; font-weight: 600; transition: background .15s, transform .12s; }
.ai-grid button:hover { background: var(--panel-3); }
.ai-grid button:active { transform: scale(.96); }
.ai-grid button.wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
.ai-grid button[disabled] { opacity: .5; }
.ai-tr, .ai-own { display: flex; gap: 6px; }
.ai-tr .input, .ai-own .input { flex: 1; height: 36px; font-size: .86rem; }
.ai-res { border-radius: 14px; background: var(--panel-2); padding: 10px; border: 1px solid var(--line); }
.ai-out { white-space: pre-wrap; font-size: .9rem; line-height: 1.4; max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.ai-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-note { display: flex; gap: 6px; font-size: .76rem; color: var(--text-3); }

/* ===== security page ===== */
.sec-card { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 16px; margin-bottom: 8px; background: linear-gradient(135deg, color-mix(in srgb, #22c55e 14%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, #22c55e 25%, transparent); }
.sec-card > div { flex: 1; } .sec-card b { display: block; } .sec-card small { color: var(--text-3); font-size: .82rem; }
.sc-ic { color: #22c55e; display: inline-flex; }
.sec-hero { text-align: center; padding: 6px 0 10px; color: #22c55e; }
.sec-hero h3 { color: var(--text); margin: 8px 0 0; }
.sec-row { display: flex; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.sec-row b { display: block; font-size: .94rem; } .sec-row small { color: var(--text-3); font-size: .84rem; line-height: 1.4; }
.sr-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.sr-ic.ok { color: #22c55e; background: rgba(34, 197, 94, .12); } .sr-ic.warn { color: #f59e0b; background: rgba(245, 158, 11, .12); }

/* ===================== performance pass ===================== */
.msgs-more { display: flex; justify-content: center; padding: 10px 0; }
.spinner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); animation: cxBlink 1s ease-in-out infinite; }
/* the chat header & composer were blurring the messages behind them on every scroll frame — solid is much cheaper */
html[data-theme="dark"] .cv-head, html[data-theme="dark"] .cv-foot .composer, html[data-theme="dark"] .cv-search { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #0f0f11 !important; }
/* rows outside the screen are not laid out / painted at all */
.msgs-inner > .mrow { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.cl-item { content-visibility: auto; contain-intrinsic-size: auto 72px; }
/* fewer GPU layers */
.gift-card::after { display: none; }
html.touch .pf-hero .nft-pattern, html.touch .gd-hero .nft-pattern { animation: none !important; }
.modal-back { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ===================== giveaways ===================== */
.gw { width: min(360px, 76vw); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gw-pill { padding: 5px 12px; border-radius: 999px; background: rgba(20, 20, 24, .78); color: #fff; font-weight: 700; font-size: .84rem; text-align: center; }
.gw-card { width: 100%; border-radius: 34px; background: #151517; border: 1px solid rgba(255, 255, 255, .07); overflow: hidden; text-align: center; padding-bottom: 18px; color: #f2f2f4; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.gw-art { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 90% at 50% 45%, #7a1f33, #2a0d14 70%, #151517); }
.gw-art.k-usd { background: radial-gradient(70% 90% at 50% 45%, #1d4f9c, #0c1d3a 70%, #151517); }
.gw-art.k-gift, .gw-art.k-nft { background: radial-gradient(70% 90% at 50% 45%, #6b2a86, #261033 70%, #151517); }
.gw-art.gold { background: radial-gradient(70% 90% at 50% 45%, #6e4b11, #2b1d07 70%, #151517); }
.gw-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0deg 7deg, transparent 7deg 18deg); animation: gwSpin 40s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 62%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 62%); }
@keyframes gwSpin { to { transform: rotate(360deg); } }
.gw-sp { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #ff5a7a; box-shadow: 0 0 12px #ff5a7a; opacity: .7; animation: gwFloat 5s ease-in-out infinite; }
.gw-art.gold .gw-sp { background: #fbbf24; box-shadow: 0 0 12px #fbbf24; }
.gw-sp.s1 { left: 16%; top: 30%; } .gw-sp.s2 { right: 20%; top: 22%; width: 6px; height: 6px; animation-delay: 1s; } .gw-sp.s3 { left: 26%; bottom: 18%; width: 5px; height: 5px; animation-delay: 2s; } .gw-sp.s4 { right: 14%; bottom: 30%; animation-delay: 3s; }
@keyframes gwFloat { 50% { transform: translateY(-10px); opacity: 1; } }
.gw-orb { position: relative; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a1820, #1c0b10); box-shadow: 0 0 0 2px rgba(255, 255, 255, .06), 0 14px 40px rgba(0, 0, 0, .5); }
.gw-art.k-usd .gw-orb { background: radial-gradient(circle at 50% 40%, #183053, #0a1426); }
.gw-art.gold .gw-orb { background: radial-gradient(circle at 50% 40%, #4a1c27, #250c13); }
.gw-orb .gift-img { width: 74px !important; height: 74px !important; }
.gw-x { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font-weight: 900; font-size: .95rem; color: #fff; background: linear-gradient(180deg, #ff5a76, #d6204a); border: 3px solid #151517; }
.gw-art.k-usd .gw-x { background: linear-gradient(180deg, #4aa8ff, #1d63e0); }
.gw-art.gold .gw-x { background: linear-gradient(180deg, #ffd34d, #e39b0b); color: #2a1a00; }
.gw-title { font-size: 1.4rem; font-weight: 900; margin: 8px 12px 2px; }
.gw-sub { color: #a9a9b1; font-size: 1rem; }
.gw-extra { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: #ff6f8b; background: rgba(255, 90, 118, .14); }
.gw-card.done .gw-extra { color: #fbbf24; background: rgba(251, 191, 36, .14); }
.gw-txt { margin: 12px 14px 8px; font-size: .98rem; color: #cfcfd6; }
.gw-txt b { color: #fff; }
.gw-timer { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 8px; }
.gw-timer i { font-style: normal; font-weight: 900; color: #5b5b62; }
.gw-tb { min-width: 66px; padding: 8px 6px 6px; border-radius: 14px; background: #222225; }
.gw-tb b { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gw-tb small { color: #9a9aa2; font-size: .74rem; }
.gw-cnt { display: inline-flex; align-items: center; gap: 6px; color: #a9a9b1; font-size: .92rem; margin: 6px 0 12px; }
.gw-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 28px); margin: 0 14px; height: 50px; border-radius: 999px; font-weight: 800; font-size: 1rem; color: #fff; background: #2a2a2e; border: 1px solid rgba(255, 255, 255, .08); transition: background .15s, transform .12s; }
.gw-btn:hover:not([disabled]) { background: #333338; }
.gw-btn:active:not([disabled]) { transform: scale(.98); }
.gw-btn.in { color: #4ade80; background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .45); cursor: default; }
.gw-admin { margin-top: 10px; font-size: .8rem; color: #8e8e95; text-decoration: underline; text-underline-offset: 3px; }
.gw-wait { color: #a9a9b1; font-size: .86rem; margin-top: -2px; }
.gw-list { margin: 12px 14px 4px; border-radius: 18px; background: #1f1f22; overflow: hidden; text-align: left; }
.gw-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: inherit; }
.gw-row:last-child { border-bottom: 0; }
.gw-row:hover { background: rgba(255, 255, 255, .03); }
.gw-n { width: 16px; color: #fbbf24; font-weight: 800; }
.gw-nm { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-pz { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #fbbf24; }
.gw-gi .gift-img { width: 22px !important; height: 22px !important; }
.gw-more, .gw-empty { padding: 10px 14px; color: #9a9aa2; font-size: .86rem; text-align: center; }
.gw-won { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: #4ade80; background: rgba(34, 197, 94, .12); font-weight: 700; font-size: .86rem; }
.bubble.gclear { background: transparent !important; box-shadow: none !important; }
html.touch .gw-rays { animation: none; }
/* create dialog */
.gw-modal.modal { width: min(520px, 100%) !important; }
.gwc-prev { display: flex; justify-content: center; margin-bottom: 14px; pointer-events: none; zoom: .8; }
.gwc-row { display: flex; align-items: center; gap: 12px; }
.gwc-row input { flex: 1; accent-color: var(--accent); }
.gwc-row b { min-width: 28px; text-align: right; font-size: 1.1rem; }
.gwc-dur { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gwc-dur .input { flex: 1; min-width: 180px; height: 36px; }
.gwc-cost { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--panel-2); font-size: .86rem; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gw-nm { text-align: left; } .gw-row .ava { flex: none; }
/* offer card: always light text on its dark card, whatever the chat theme */
.of-card, .of-card .of-text, .of-card .of-exp, .of-card .of-status { color: #f2f2f4 !important; }
.of-card .of-exp, .of-card .of-status { color: #a9a9b1 !important; }
.of-card.accepted .of-status { color: #4ade80 !important; }
.of-sum-i { display: inline-flex; align-items: center; gap: 3px; vertical-align: -3px; white-space: nowrap; }
.of-acts button { color: #f2f2f4 !important; }
.gw-card, .gw-card .gw-title, .usd-card { color: #f2f2f4; }

/* ===================== phones & iPhone ===================== */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html.touch body { overscroll-behavior: none; }
html.touch .msgs, html.touch .modal-body, html.touch #sbScroll, html.touch .ma-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* iPhone zooms the page when a field with text smaller than 16px gets focus */
@supports (-webkit-touch-callout: none) {
  input, textarea, select, .ce, [contenteditable] { font-size: max(16px, 1em) !important; }
}
/* no «stuck» hover effects after a tap */
@media (hover: none) {
  .gift-card:hover, .pf-tile:hover, .cx-b:hover, .gw-btn:hover, .btn:hover, .ctx-item:hover, .cl-item:hover { transform: none !important; filter: none !important; }
  .gift-card:active { transform: scale(.97) !important; transition: transform .1s; }
  .cl-item:active { background: rgba(255, 255, 255, .05) !important; }
}
/* phones: lighter visuals = smoother scrolling */
html.touch .ctx, html.touch .popover, html.touch .cx-pill, html.touch .cx-pmenu, html.touch .v-top, html.touch .v-zoom { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #1b1b1e !important; }
html.touch body, html.touch .sidebar, html.touch .modal { background-image: none !important; }
html.touch .bubble, html.touch .gift-card, html.touch .pf-tile { box-shadow: none !important; }
html.touch .tw-anim, html.touch .tw-anim::before, html.touch .tw-anim::after, html.touch .tw-stars i { animation-duration: 60s !important; }
html.touch .usd2 .u2-shine, html.touch .usd-card .uc-shine { animation: none !important; }
html.touch .wl-dots i, html.touch .wl-spark i { animation: none !important; opacity: .6; }
@media (max-width: 560px) {
  .modal { max-height: calc(100dvh - max(10px, env(safe-area-inset-top))) !important; }
  .gw { width: min(330px, 86vw); }
  .gw-tb { min-width: 58px; } .gw-tb b { font-size: 1.35rem; }
  .gw-art { height: 180px; }
  .of-card, .usd2 { width: min(290px, 78vw); }
  .cx-top { padding-top: max(14px, env(safe-area-inset-top)); }
  .miniapp { height: 100dvh !important; border-radius: 0 !important; width: 100% !important; }
  .miniapp-back { padding: 0 !important; }
  .ma-head { padding-top: max(12px, env(safe-area-inset-top)) !important; }
  .ma-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  .viewer-back .v-top { top: max(14px, env(safe-area-inset-top)); }
  .viewer-back .v-zoom { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .ow { grid-template-columns: 1fr; }
  .adm-stats { grid-template-columns: repeat(2, 1fr); }
  .th-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== dollar transfer card («cheque») ===== */
.usd2 { position: relative; overflow: hidden; width: min(300px, 70vw); padding: 14px 16px 14px; border-radius: 22px; color: #eafff6; text-align: left;
  background: radial-gradient(120% 90% at 100% 0%, #18a37a 0%, #0d6b54 38%, #08443a 72%, #062e28 100%);
  box-shadow: 0 16px 34px -16px rgba(8, 90, 70, .9), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.usd2 .u2-guil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.usd2 .u2-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 60%); background-size: 260% 100%; animation: ucShine 5s ease-in-out infinite; }
.u2-top { position: relative; display: flex; align-items: center; gap: 10px; }
.u2-seal { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; color: #4a3200;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #f4c542 45%, #b8860b 100%); box-shadow: 0 0 0 3px rgba(244, 197, 66, .25), 0 4px 10px rgba(0, 0, 0, .35); }
.u2-hd b { display: block; font-size: .92rem; letter-spacing: .01em; }
.u2-hd small { opacity: .7; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.u2-amt { position: relative; margin: 12px 0 10px; font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.u2-cur { font-size: 1.3rem; vertical-align: 14px; margin-right: 2px; color: #f4c542; }
.u2-c { font-size: 1.2rem; opacity: .75; }
.u2-tear { position: relative; height: 1px; margin: 0 -16px 10px; background-image: linear-gradient(90deg, rgba(255, 255, 255, .35) 50%, transparent 50%); background-size: 10px 1px; }
.u2-tear::before, .u2-tear::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--void, #050506); }
.u2-tear::before { left: -8px; } .u2-tear::after { right: -8px; }
.u2-who { position: relative; display: flex; align-items: center; gap: 6px; }
.u2-p { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.u2-p span { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u2-p small { font-size: .62rem; font-weight: 600; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
.u2-arrow { opacity: .6; flex: none; }
.u2-note { position: relative; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .2); font-size: .86rem; font-style: italic; }
.u2-stamp { position: absolute; right: 14px; top: 58px; padding: 3px 8px; border: 2px solid rgba(134, 239, 172, .75); border-radius: 8px; color: rgba(134, 239, 172, .9); font-weight: 900; font-size: .7rem; letter-spacing: .12em; transform: rotate(-12deg); }
.usd2.pre .u2-stamp { border-color: rgba(253, 224, 71, .7); color: rgba(253, 224, 71, .9); }

/* ===== regular gift in chat (Telegram look, no backdrop) ===== */
.gsimple { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(300px, 74vw); }
.gs-cap { padding: 4px 12px; border-radius: 999px; background: rgba(20, 20, 24, .75); color: #fff; font-size: .84rem; font-weight: 600; text-align: center; }
.gs-card { width: 100%; padding: 16px 16px 18px; border-radius: 26px; text-align: center; color: #eef1f5; background: linear-gradient(180deg, #232a33, #1b2129); border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.gs-art { width: 120px; height: 120px; margin: 0 auto 6px; position: relative; }
.gs-art .gift-img { width: 120px !important; height: 120px !important; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.gs-art .lottie-box { position: absolute; inset: 0; }
.gs-art.animated > .gift-img { opacity: 0; }
.gs-for { font-weight: 700; font-size: 1.02rem; margin-top: 4px; }
.gs-note { margin-top: 6px; font-size: .9rem; opacity: .85; word-break: break-word; }
.gs-btn { position: relative; margin-top: 12px; padding: 7px 18px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: #fff; background: rgba(255, 255, 255, .12); overflow: visible; transition: background .15s, transform .12s; }
.gs-btn:hover { background: rgba(255, 255, 255, .18); }
.gs-btn:active { transform: scale(.96); }
.gs-s { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; animation: gsTw 2.4s ease-in-out infinite; pointer-events: none; }
.gs-s.s1 { left: 8px; top: 4px; } .gs-s.s2 { right: 10px; top: 2px; animation-delay: .6s; } .gs-s.s3 { left: 30%; bottom: 3px; animation-delay: 1.2s; } .gs-s.s4 { right: 26%; bottom: 5px; animation-delay: 1.8s; }
@keyframes gsTw { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.4); } }

.gs-art .gift-img.animated { background-image: none !important; } .gs-art .gift-img .lottie-box { position: absolute; inset: 0; }
.lg-chunk { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; content-visibility: auto; contain-intrinsic-size: auto 720px; }
.lg-chunk > .gift-card, .lg-chunk > .gf-item > .gift-card { contain: layout paint style; }

/* ===== deleted account & smoother menus (feedback fixes) ===== */
.deleted-ava { background: color-mix(in srgb, var(--text-3) 18%, transparent) !important; color: var(--text-3); display: grid; place-items: center; opacity: .7; }
.deleted-nm { color: var(--text-3) !important; font-style: italic; opacity: .85; }
.st-blocked { color: var(--danger) !important; }

/* smoother side menus / panels */
.side-panel, .sb, .notif-panel, .menu-sheet, .lgroup, .cv-foot, .modal-body {
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.side-panel, .sb {
  border-radius: 18px 0 0 18px;
  overflow: hidden;
}
.menu-sheet, .modal.glass {
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.li, .pick-item, .chat-item {
  transition: background .15s ease, transform .12s ease;
  border-radius: 12px;
}
.li:active, .pick-item:active, .chat-item:active { transform: scale(.985); }

/* shop polish */
.shop-grid, .gift-shop .glist { gap: 12px; }
.gift-card {
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.gift-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }

/* ===== theme-aware text / buttons / meta alignment fixes ===== */
/* Ensure readable text and borders on every chat theme */
.themed .bubble { border: 1px solid color-mix(in srgb, var(--bubble-out-text, #fff) 12%, transparent); }
.themed .mrow.in .bubble { color: var(--text); background: var(--bubble-in, var(--panel-2)); }
.themed .mrow.out .bubble { color: var(--bubble-out-text, #fff); }
.themed .b-meta { color: color-mix(in srgb, var(--bubble-out-text, var(--text-3)) 70%, transparent) !important; }
.themed .mrow.in .b-meta { color: var(--text-3) !important; }
.themed .btn, .themed .icon-btn, .themed .cv-bigbtn {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}
.themed .btn-primary, .themed .cv-bigbtn.primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.themed .seg button {
  color: var(--text-2);
  border: 1px solid var(--line);
}
.themed .seg button.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Fix views + time alignment in channel posts / meta */
.b-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: right;
  flex-wrap: nowrap;
  line-height: 1.2;
  vertical-align: baseline;
}
.b-meta .views-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.b-meta > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.loose-meta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
/* channel post footer bar (views list style) */
.views-bar, .post-meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-solid) 80%, transparent);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
}
.views-bar .views-tag, .post-meta-bar .views-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}
.views-bar time, .post-meta-bar time {
  margin-left: auto;
  color: var(--text-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* better contrast for light theme buttons/text */
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger) {
  border: 1px solid rgba(15, 23, 42, .12);
  color: var(--text);
}
html[data-theme="light"] .icon-btn {
  color: var(--text-2);
}
html[data-theme="light"] .seg button {
  border-color: rgba(15, 23, 42, .1);
}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger) {
  border: 1px solid rgba(255, 255, 255, .1);
}


/* ===== less jerky open, but keep mobile sidebar/chat slide ===== */
.cl-item { animation: none !important; }
.mrow.fresh { animation: none !important; }
/* mobile: chatview must stay off-screen until .chat-open (do NOT force transform:none) */
@media (max-width: 860px) {
  .chatview {
    position: absolute !important;
    inset: 0 !important;
    transform: translateX(100%) !important;
    transition: transform .28s ease !important;
    z-index: 4 !important;
  }
  .app.chat-open .chatview {
    transform: translateX(0) !important;
  }
  .sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .main {
    grid-template-columns: 1fr !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .cv-back { display: inline-grid !important; }
}


/* ===== post customization ===== */
.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 6px 8px 4px;
}
.rt-toolbar .icon-btn {
  width: 32px;
  height: 32px;
  font-size: .85rem;
  font-weight: 700;
}
.post-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 8px;
}
.po-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel-2, rgba(255,255,255,.06));
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.po-chip input { accent-color: var(--accent); }
.rich .spoiler, .b-text .spoiler, span.spoiler {
  background: var(--text);
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  transition: background .2s, color .2s;
  user-select: none;
}
.rich .spoiler.revealed, .b-text .spoiler.revealed, span.spoiler.revealed {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: inherit;
  user-select: text;
}
.rich hr, .b-text hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}
.post-sign {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--text-3);
  font-style: italic;
}


/* profile gifts tab: only the model, no name / subtitle under tiles */
.gs-wrap .gift-card .gn,
.gs-wrap .gift-card .gr,
.tab-page .gift-grid .gift-card .gn,
.tab-page .gift-grid .gift-card .gr,
.profile-modal .gift-grid .gift-card .gn,
.profile-modal .gift-grid .gift-card .gr {
  display: none !important;
}
.gs-wrap .gift-card,
.profile-modal .gift-grid .gift-card {
  padding-bottom: 8px !important;
}


/* pinned gifts around avatar — compact size (36px) */
.pf-pin {
  width: 36px !important;
  height: 36px !important;
  margin: -18px 0 0 -18px !important;
  z-index: 3;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.pf-pin .gift-img,
.pf-pin img,
.pf-pin canvas,
.pf-pin .nft-art,
.pf-pin .lottie-box,
.pf-pin > * {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
}
.pf-ava-zone {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}
.pf-hero .pf-ava-zone,
.pf-top .pf-ava-zone {
  overflow: visible !important;
}
@media (max-width: 600px) {
  .pf-pin { width: 32px !important; height: 32px !important; margin: -16px 0 0 -16px !important; --k: .95; }
  .pf-pin .gift-img, .pf-pin img, .pf-pin canvas, .pf-pin .nft-art, .pf-pin > * {
    width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important;
  }
}


/* chat wallpaper: photo/GIF must fill and animate */
.tw { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tw-layer, .tw-media-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.tw-media-wrap { overflow: hidden; }
.tw-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.tw-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tw-dim {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}


/* ===== channel posts: even layout (name / text / meta / comments) ===== */
.mrow.channel .mcol {
  max-width: min(94%, 640px) !important;
  width: 100%;
}
.mrow.channel .bubble.channel-post {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 10px 14px 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  float: none !important;
}
.mrow.channel .bubble.channel-post .b-name {
  margin: 0 0 6px !important;
  font-size: .88rem !important;
  line-height: 1.25 !important;
}
.mrow.channel .bubble.channel-post .b-body {
  min-width: 0;
  width: 100%;
}
.mrow.channel .bubble.channel-post .b-text,
.mrow.channel .bubble.channel-post .rich {
  margin: 0 !important;
  padding: 0 !important;
  font-size: .97rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.mrow.channel .bubble.channel-post .b-meta {
  float: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 8px 0 10px !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  color: var(--text-3) !important;
  box-sizing: border-box;
}
.mrow.channel .bubble.channel-post .b-meta .views-tag,
.mrow.channel .bubble.channel-post .b-meta .ed-tag,
.mrow.channel .bubble.channel-post .b-meta .meta-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  vertical-align: middle;
}
.mrow.channel .bubble.channel-post .b-meta .views-tag .i,
.mrow.channel .bubble.channel-post .b-meta svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.mrow.channel .bubble.channel-post .b-comments {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100% + 28px) !important;
  margin: 0 -14px 0 !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--seam, var(--line)) !important;
  border-radius: 0 0 18px 18px !important;
  box-sizing: border-box;
  font-size: .86rem !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
.mrow.channel .bubble.channel-post .b-comments .bc-label {
  flex: 1;
  min-width: 0;
}
.mrow.channel .bubble.channel-post .b-comments .bc-chev {
  margin-left: auto;
  display: inline-flex;
  opacity: .75;
  flex: none;
}
.mrow.channel .bubble.channel-post.solo {
  padding-top: 0 !important;
}


/* channel worn NFT next to title */
.cv-title .cv-worn,
.b-name .ch-worn,
.pf-name .pf-worn {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  flex: none;
}
.cv-title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.cv-title .t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* channel info top with NFT pattern already via .pf-top.worn */
.chan-modal .pf-top.worn {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
}


/* ===== channel card header: clean layout with NFT banner ===== */
.chan-modal .modal-head {
  position: relative;
  z-index: 20 !important;
}
.chan-modal .edit-pill {
  position: relative;
  z-index: 21;
  background: rgba(0, 0, 0, .4) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
.chan-modal .pf-top.chan-top,
.pf-top.chan-top {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 0 28px 28px !important;
  padding: 28px 16px 22px !important;
  text-align: center !important;
  color: #fff !important;
  min-height: 220px;
  box-sizing: border-box;
}
.pf-top.chan-top .nft-pattern {
  position: absolute !important;
  inset: -12% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.pf-top.chan-top .pf-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.pf-top.chan-top .chan-top-inner {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.pf-top.chan-top .pf-ava-zone {
  position: relative !important;
  margin: 0 auto !important;
  z-index: 3 !important;
}
.pf-top.chan-top .pf-ava {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35) !important;
  border: 3px solid rgba(255, 255, 255, .18) !important;
}
.pf-top.chan-top .pf-name {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
  padding: 0 12px !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #fff !important;
  text-align: center !important;
  max-width: 100%;
}
.pf-top.chan-top .pf-name .pf-worn {
  margin: 0 !important;
}
.pf-top.chan-top .pf-subs {
  margin: 0 !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: .9rem !important;
}
.pf-top.chan-top .worn-tip,
.pf-top.chan-top .worn-tip-inline {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  z-index: 3 !important;
  background: rgba(0, 0, 0, .4) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* keep pins around avatar above pattern */
.pf-top.chan-top .pf-pin {
  z-index: 4 !important;
}

/* ===== v6: members list (groups / channel owner) ===== */
.mem-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; font-size: .86rem; font-weight: 600; color: var(--text-2); }
.mem-head .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
.mem-item { position: relative; }
.mem-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-kick { flex: none; opacity: .55; }
.mem-kick:hover { opacity: 1; color: var(--danger, #e0314b); }

/* ===== v6: gifts / rubies / NFT / Premium in chats and channels — only the caption pill and the card:
   no bubble colour (any theme, any side), no post background, no time ===== */
html body .mrow .bubble.gpure, html body .mrow.out .bubble.gpure, html body .mrow.in .bubble.gpure,
html body .themed .mrow .bubble.gpure, html body .mrow .bubble.channel-post.gpure {
  background: none !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-width: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body .mrow .bubble.gpure::before, html body .mrow .bubble.gpure::after { display: none !important; }
html body .bubble.gpure .b-meta, html body .bubble.gpure .b-name { display: none !important; }
html body .bubble.gpure .b-body { padding: 0 !important; }
html body .mrow.gift-row { justify-content: center; flex-direction: row; margin: 6px 0; }
html body .mrow.gift-row > .m-ava { display: none; }
html body .mrow.gift-row > .mcol { align-items: center; max-width: 100%; margin: 0 auto; }
.bubble.gpure .b-gcard, .bubble.gpure .gsimple { margin: 0 auto; }
.b-gcard.refund .gcard-attrs { grid-template-columns: 1fr; gap: 4px; }
.b-gcard.refund .gcard-attrs .k { text-align: center; }
.b-gcard.refund .gcard-attrs b { max-width: none; white-space: normal; text-align: center; font-weight: 500; font-size: .84rem; line-height: 1.35; overflow: visible; }

/* basic (50-ruby) gifts: no backdrop, plain tile */
.gift-card.shop.basic::before { display: none !important; }
.gift-grid.single .gift-card.shop.basic { background: var(--panel-2, #1c1c20); }
.gd-wrap.basic { --c1: #2a2a30; --c2: #18181c; }
.gd-wrap.basic .gd-hero { background: var(--panel-2, #1c1c20) !important; }
.cl-hero.basic { background: var(--panel-2, #1c1c20) !important; }

/* NFT comment: sender avatar + speech bubble inside the card (like Telegram) */
.gcard-note { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 14px auto 2px; max-width: 92%; }
.gcard-note .gn-ava { flex: none; display: inline-flex; }
.gcard-note .gn-ava .ava { --s: 30px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.gcard-note .gn-bubble { position: relative; text-align: left; color: #fff; font-size: .95rem; font-weight: 500; line-height: 1.3; padding: 9px 14px; border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); word-break: break-word; max-width: 230px; }
.gcard-note .gn-bubble img { width: 1.2em; height: 1.2em; vertical-align: -.2em; }
.b-gcard .gcard-note { margin-top: 12px; }
.gd-note { margin-top: 12px; }

/* ===== v6: finished call — a card with an icon ===== */
.mrow.call-row .bubble.call-bubble { padding: 10px 12px 8px !important; min-width: 230px; }
.cend-card { display: flex; align-items: center; gap: 12px; }
.cend-card .cc-ico { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #34c759; }
.cend-card .cc-ico.bad { background: #ff3b30; }
.cend-card .cc-dir { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--panel, #141416); color: currentColor; box-shadow: 0 0 0 2px var(--panel, #141416); }
.cend-card .cc-ico.ok .cc-dir { color: #34c759; } .cend-card .cc-ico.bad .cc-dir { color: #ff3b30; }
.cend-card .cc-dir.o svg { transform: rotate(135deg); } .cend-card .cc-dir.i svg { transform: rotate(-45deg); }
.cend-card .cc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cend-card .cc-txt b { font-size: .95rem; font-weight: 700; }
.cend-card .cc-txt small { font-size: .8rem; opacity: .75; }
.cend-card .cc-back { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(255, 255, 255, .12); border: 0; cursor: pointer; }
.cend-card .cc-back:hover { background: rgba(255, 255, 255, .2); }
.mrow.in .cend-card .cc-back { background: var(--hover, rgba(255,255,255,.08)); }
.mrow.call-row .b-meta { display: flex; justify-content: flex-end; margin-top: 4px; float: none; }

/* ===== v6: reactions inside the message, in one row with the time ===== */
.bubble .reactions.in-bubble { display: inline-flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 1px; vertical-align: bottom; max-width: 100%; justify-content: flex-start !important; }
.bubble.channel-post .reactions.in-bubble { margin: 8px 0 2px; }
.bubble .reactions.in-bubble .rx { height: 28px; padding: 0 8px 0 6px; gap: 4px; }
.bubble .reactions.in-bubble .rx.has-ava { padding-right: 4px; }
.rx .rx-avas { display: inline-flex; align-items: center; }
.rx .rx-avas .ava { --s: 20px; width: 20px; height: 20px; font-size: .55rem; box-shadow: 0 0 0 1.5px var(--rx-ring, var(--graphite, #2a2a2e)); }
.rx .rx-avas .ava + .ava { margin-left: -6px; }
.mrow.in .bubble .reactions.in-bubble .rx { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; color: var(--accent); --rx-ring: var(--bubble-in, #1c1c20); }
.mrow.in .bubble .reactions.in-bubble .rx.mine { background: var(--accent) !important; color: #fff; --rx-ring: var(--accent); }
.mrow.out .bubble .reactions.in-bubble .rx { background: rgba(255, 255, 255, .18) !important; color: #fff; --rx-ring: var(--bubble-out-1); }
.mrow.out .bubble .reactions.in-bubble .rx.mine { background: #fff !important; color: var(--bubble-out-1); --rx-ring: #fff; }
.bubble.channel-post .reactions.in-bubble .rx { background: var(--graphite, #2a2a2e) !important; color: var(--text); }
.bubble.channel-post .reactions.in-bubble .rx.mine { background: var(--accent) !important; color: #fff; }
.bubble.has-rx > .b-meta { margin-top: 12px; }