/* Hols — v1 visual layer: brand, aurora, refined glass, NFT gifts, collectible names, name styles,
   spheres currency, send animation, new profile. Loaded last, overrides earlier sheets. */

/* ---------- brand tokens ---------- */
:root { --accent: #6d5dfc; --accent-2: #2fb5ff; --brand-grad: linear-gradient(135deg, #8b5cf6 0%, #6d5dfc 40%, #2fb5ff 100%); --r-xl: 30px; }
html[data-theme="dark"] {
  --bg: #05050a;
  --panel: rgba(18, 18, 28, .58);
  --panel-solid: #0d0d16;
  --bubble-in: rgba(30, 31, 44, .86);
  --bubble-out-1: #7b61ff;
  --bubble-out-2: #3d8bff;
  --line: rgba(255, 255, 255, .075);
  --glass-hi: rgba(255, 255, 255, .16);
  --shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 255, 255, .03) inset;
}
html[data-theme="light"] { --bg: #eef0fb; --bubble-out-1: #7b61ff; --bubble-out-2: #3d8bff; }

/* ---------- aurora background + grain ---------- */
body::before {
  inset: -30%;
  background:
    radial-gradient(28% 26% at 18% 14%, color-mix(in srgb, #7c5cff 26%, transparent), transparent 70%),
    radial-gradient(30% 28% at 86% 82%, color-mix(in srgb, #2fb5ff 20%, transparent), transparent 70%),
    radial-gradient(24% 22% at 70% 18%, color-mix(in srgb, #ff4fa3 12%, transparent), transparent 70%),
    radial-gradient(26% 24% at 26% 86%, color-mix(in srgb, #17c3a0 10%, transparent), transparent 70%);
  animation: aurora 30s ease-in-out infinite alternate;
  filter: blur(10px);
}
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(3%, -3%, 0) rotate(6deg) scale(1.06); } 100% { transform: translate3d(-3%, 2%, 0) rotate(-4deg); } }
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- refined liquid glass ---------- */
.glass { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255, 255, 255, .02), inset 0 -18px 40px -30px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-sm); }
.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 15% -10%, rgba(255, 255, 255, .09), transparent 45%);
}
html[data-theme="light"] .glass::after { background: radial-gradient(120% 60% at 15% -10%, rgba(255, 255, 255, .7), transparent 45%); }
.glass > * { position: relative; z-index: 1; }
.glass > .cv-bg { position: absolute; z-index: 0; }
.modal.glass > *, .ctx.glass > *, .popover.glass > * { z-index: auto; }

.btn { letter-spacing: -.005em; position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); pointer-events: none; }
.btn:hover::after { left: 130%; }
.btn-primary { background: var(--brand-grad); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-primary:hover { background: var(--brand-grad); }
.send-btn { background: var(--brand-grad); }
.badge-count { background: var(--brand-grad); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 80%, transparent); }
.chip.active, .ftab.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: color-mix(in srgb, var(--accent) 60%, var(--text)); }
html[data-theme="dark"] .chip.active, html[data-theme="dark"] .ftab.active { color: #c7bfff; }

/* ---------- top bar wordmark ---------- */
.tb-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; padding: 0 6px 0 2px; }
.tb-logo img { width: 30px; height: 30px; filter: drop-shadow(0 4px 14px rgba(109, 93, 252, .55)); }
.tb-logo span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
@media (max-width: 860px) { .tb-logo span, .tb-sep { display: none; } }

/* ---------- sidebar & list polish ---------- */
.sb-head h1 { font-size: 1.6rem; letter-spacing: -.03em; }
.cl-item { border-radius: 18px; transition: background .2s, transform .2s var(--ease); }
.cl-item:hover { transform: translateX(2px); }
.cl-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.cl-item.active::before { content: ''; position: absolute; left: -8px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--brand-grad); box-shadow: 0 0 12px var(--accent); }
.story-ring { background: conic-gradient(from 200deg, #8b5cf6, #2fb5ff, #17c3a0, #ffcf1f, #ff4fa3, #8b5cf6); }

/* ---------- chat polish ---------- */
.bubble { border-radius: 20px; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px -14px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .04); }
html[data-theme="light"] .bubble { border-color: rgba(15, 23, 42, .05); }
.mrow.out .bubble { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -14px color-mix(in srgb, var(--bubble-out-1) 90%, transparent); }
.mrow.in.tail .bubble { border-bottom-left-radius: 6px; }
.mrow.out.tail .bubble { border-bottom-right-radius: 6px; }
.cv-head { height: 64px; border-radius: 22px; }
.cv-title { font-size: 1.02rem; letter-spacing: -.01em; }
.date-sep { background: color-mix(in srgb, var(--panel-solid) 55%, transparent); border: 1px solid var(--line); }
.composer { border-radius: 26px; }
.rx.mine { background: var(--brand-grad); }

/* ---------- name styles ---------- */
.nm { display: inline; }
.nm[class*="ns-"] { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ns-ruby { background: linear-gradient(90deg, #ff4d6d, #ff4d6d); }
.ns-gold { background: linear-gradient(90deg, #ffd166, #ffb703); }
.ns-mint { background: linear-gradient(90deg, #3ef0b3, #3ef0b3); }
.ns-sky { background: linear-gradient(90deg, #4cc9ff, #4cc9ff); }
.ns-violet { background: linear-gradient(90deg, #b18cff, #b18cff); }
.ns-sunset { background: linear-gradient(90deg, #ff7a18, #ff2e63, #a83cff); }
.ns-aurora { background: linear-gradient(90deg, #00f5a0, #00d9f5, #8b5cf6); }
.ns-candy { background: linear-gradient(90deg, #ff5f9e, #ffc371); }
.ns-ocean { background: linear-gradient(90deg, #2fb5ff, #6d5dfc); }
.ns-fire { background: linear-gradient(90deg, #ffd000, #ff5a1f, #ff1f4b); }
.ns-galaxy { background: linear-gradient(90deg, #a18cd1, #fbc2eb, #8fd3f4); }
.ns-shimmer-gold, .ns-shimmer-rainbow, .ns-shimmer-ice, .ns-holo { background-size: 250% 100% !important; animation: nameShimmer 3.2s linear infinite; }
.ns-shimmer-gold { background: linear-gradient(100deg, #b8860b 0%, #ffe680 25%, #fff8dc 32%, #ffd700 40%, #b8860b 60%, #ffe680 80%, #b8860b 100%); }
.ns-shimmer-rainbow { background: linear-gradient(90deg, #ff4d6d, #ffb703, #3ef0b3, #4cc9ff, #b18cff, #ff4d6d); }
.ns-shimmer-ice { background: linear-gradient(100deg, #7dd3fc 0%, #e0f7ff 20%, #ffffff 26%, #7dd3fc 40%, #a5b4fc 70%, #7dd3fc 100%); }
.ns-holo { background: linear-gradient(110deg, #ff9ff3, #feca57, #48dbfb, #1dd1a1, #ff9ff3, #feca57); }
@keyframes nameShimmer { to { background-position: -250% 0; } }
.ns-swatch { height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1rem; background: var(--panel-2); border: 2px solid transparent; transition: transform .2s var(--spring), border-color .2s; }
.ns-swatch:hover { transform: translateY(-2px); }
.ns-swatch.active { border-color: var(--accent); }
.ns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- gift art & NFT ---------- */
.gift-svg { display: block; overflow: visible; }
.gift-svg.fill { width: 100%; height: 100%; }
.gift-card .gart { width: 68px; height: 68px; margin: 0 auto; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.ga-bob { animation: gaBob 3s ease-in-out infinite; }
.ga-float { animation: gaFloat 3.6s ease-in-out infinite; }
.ga-sway { animation: gaSway 3.2s ease-in-out infinite; }
.ga-tilt { animation: gaTilt 3.4s ease-in-out infinite; }
.ga-spin { animation: gaSpin 6s linear infinite; }
.ga-pulse { animation: gaPulse 1.6s ease-in-out infinite; }
.ga-flick { animation: gaFlick .35s ease-in-out infinite alternate; }
.ga-blink { animation: gaBlink 4s infinite; }
.ga-twinkle { animation: gaTwinkle 1.8s ease-in-out infinite; }
.ga-bubble { animation: gaBubble 2.2s ease-in infinite; }
.ga-bubble.d2 { animation-delay: .7s; } .ga-bubble.d3 { animation-delay: 1.4s; }
.ga-shine { animation: gaShine 3.5s ease-in-out infinite; }
@keyframes gaBob { 50% { transform: translateY(-5px); } }
@keyframes gaFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes gaSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes gaTilt { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes gaSpin { to { transform: rotate(360deg); } }
@keyframes gaPulse { 50% { transform: scale(1.08); filter: brightness(1.25); } }
@keyframes gaFlick { from { transform: scale(1, 1); } to { transform: scale(1.06, 1.14); } }
@keyframes gaBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes gaTwinkle { 0%, 100% { transform: scale(.5) rotate(0); opacity: .3; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
@keyframes gaBubble { 0% { transform: translateY(16px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes gaShine { 0%, 55% { transform: translateX(-60px); } 100% { transform: translateX(80px); } }
html.no-anim .gift-svg * { animation: none !important; }

.nft-art { position: relative; aspect-ratio: 1; border-radius: inherit; overflow: hidden; background: radial-gradient(70% 70% at 50% 45%, var(--c1), var(--c2)); isolation: isolate; }
.nft-art .nft-pattern { position: absolute; inset: 0; width: 100%; height: 100%; animation: patSpin 60s linear infinite; }
.nft-art .nft-model { position: absolute; inset: 16%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.nft-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 30% 10%, rgba(255, 255, 255, .25), transparent 60%); pointer-events: none; }
@keyframes patSpin { to { transform: rotate(360deg); } }
.gift-card.is-nft { padding: 0 0 10px; background: var(--panel-2); }
.gift-card.is-nft .nft-art { border-radius: 18px 18px 12px 12px; margin-bottom: 8px; }
.gift-card .nft-no { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .66rem; font-weight: 800; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, .35); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gift-card .pin-mark { position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; }
.gift-card .worn-mark { position: absolute; top: 8px; right: 34px; z-index: 2; font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 8px; background: var(--brand-grad); color: #fff; }
.nft-big { width: min(260px, 70vw); margin: 0 auto 6px; border-radius: 30px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.nft-title { text-align: center; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; margin-top: 10px; }
.nft-sub { text-align: center; color: var(--text-2); font-size: .86rem; margin-top: 2px; }
.attr-table { margin-top: 14px; }
.attr-table .li .rar { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: color-mix(in srgb, var(--accent) 50%, var(--text)); }
.nft-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.nft-actions .pf-act { width: auto; }
.upgrade-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.upgrade-preview .nft-art { border-radius: 18px; }
.reveal-nft { animation: revealNft 1.1s var(--spring) both; }
@keyframes revealNft { 0% { transform: scale(.3) rotate(-25deg); filter: blur(10px) brightness(3); opacity: 0; } 60% { filter: blur(0) brightness(1.6); opacity: 1; } 100% { transform: none; filter: none; } }
.chat-nft { width: 230px; }
.chat-nft .nft-art { border-radius: 16px; }

/* ---------- collectible usernames ---------- */
.un-also { color: var(--text-2); font-size: .86rem; margin-top: 2px; line-height: 1.5; }
.un-link { color: var(--accent); cursor: pointer; font-weight: 600; }
html[data-theme="dark"] .un-link { color: #a99bff; }
.un-link:hover { text-decoration: underline; }
.un-sheet { text-align: center; padding: 10px 6px 0; }
.un-icon { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; font-size: 3rem; font-weight: 300; color: var(--text-2); background: var(--panel-3); }
.un-icon.coll { color: #fff; background: radial-gradient(circle at 30% 25%, #a99bff, #6d5dfc 55%, #2a1a8a); box-shadow: 0 16px 40px -12px rgba(109, 93, 252, .7); }
.un-sheet h3 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
.owner-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--panel-3); font-weight: 700; cursor: pointer; transition: background .2s, transform .2s var(--spring); }
.owner-chip:hover { background: var(--active); transform: scale(1.03); }
.un-meta { color: var(--text-2); font-size: .92rem; margin: 18px 4px 4px; line-height: 1.5; }
.btn-xl { height: 54px; font-size: 1.02rem; border-radius: 999px; }
.names-list .li .tag { font-size: .66rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--brand-grad); color: #fff; }

/* ---------- spheres currency ---------- */
.orb { display: inline-grid; place-items: center; vertical-align: -3px; }
.orb-svg { overflow: visible; }
.cur-card { width: 240px; text-align: center; padding: 16px 8px 6px; }
.cur-card .orb-big { width: 76px; height: 76px; margin: 0 auto; animation: gaFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(109, 93, 252, .6)); }
.cur-card .amt { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.amount-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.amount-input { font-size: 1.8rem; font-weight: 800; text-align: center; height: 64px; }
.bal-line { display: flex; justify-content: space-between; color: var(--text-2); font-size: .86rem; margin: 6px 4px; }
.bal-line.low { color: var(--danger); }

/* ---------- send animation ---------- */
.sendfx { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(20, 14, 50, .55), rgba(0, 0, 0, .78)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeIn .3s ease both; }
.sendfx.out { animation: fadeOut .35s ease both; }
.sendfx-stage { position: relative; width: min(560px, 92vw); height: 300px; }
.sendfx .who { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-weight: 700; width: 120px; text-align: center; }
.sendfx .who.from { left: 0; } .sendfx .who.to { right: 0; }
.sendfx .who .ava { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .5); }
.sendfx .who.to.hit .ava { animation: hit .6s var(--spring); box-shadow: 0 0 0 4px #a99bff, 0 0 40px #6d5dfc; }
@keyframes hit { 30% { transform: scale(1.18); } }
.sendfx .arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.sendfx .arc path { stroke: rgba(255, 255, 255, .25); stroke-width: 2; stroke-dasharray: 4 8; fill: none; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.sendfx .flyer { position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; filter: drop-shadow(0 10px 30px rgba(109, 93, 252, .8)); will-change: transform; }
.sendfx .flyer .lbl { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; color: #fff; font-weight: 800; font-size: .95rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.sendfx .spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff, #a99bff 50%, transparent 70%); pointer-events: none; }
.sendfx .ring { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #a99bff; transform: translate(-50%, -50%); animation: ringOut .7s ease-out forwards; }
@keyframes ringOut { to { width: 180px; height: 180px; opacity: 0; } }
.sendfx .done { position: absolute; left: 0; right: 0; bottom: -10px; text-align: center; color: #fff; font-weight: 800; font-size: 1.15rem; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--spring); }
.sendfx .done.show { opacity: 1; transform: none; }
.sendfx .done small { display: block; font-weight: 500; opacity: .7; font-size: .85rem; margin-top: 4px; }
.sendfx .check { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #22c55e; margin-right: 8px; vertical-align: -6px; }

/* ---------- profile v2 ---------- */
.profile-modal .modal-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; background: transparent; }
.profile-modal .modal-head .icon-btn.glassy { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-hero { position: relative; padding: 54px 18px 18px; text-align: center; overflow: hidden; border-radius: 0 0 30px 30px; background: radial-gradient(90% 70% at 50% 35%, var(--c1, color-mix(in srgb, var(--a2) 60%, #1b1b2e)), var(--c2, var(--panel-solid))); }
.pf-hero .nft-pattern { position: absolute; inset: -10% -10%; width: 120%; height: 120%; opacity: .9; animation: patSpin 90s linear infinite; pointer-events: none; }
.pf-hero.plain::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, rgba(255, 255, 255, .12), transparent 70%); }
.pf-hero > * { position: relative; }
.pf-hero .pf-ava { box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .45); }
.pf-hero .pf-name { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); font-size: 1.5rem; letter-spacing: -.02em; }
.pf-hero .status-pill { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pf-hero .status-pill.st-blocked { color: #ff8a95; }
.pf-hero .lvl-badge b { color: #111; }
.pf-hero .worn { display: inline-flex; width: 28px; height: 28px; margin-left: 4px; cursor: pointer; position: relative; }
.pf-hero .worn::after { content: '✦'; position: absolute; right: -6px; top: -6px; color: #fff; font-size: .7rem; animation: gaTwinkle 1.6s ease-in-out infinite; }
.pf-stars { position: absolute; inset: 0; pointer-events: none; }
.pf-stars i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: gaTwinkle 2.4s ease-in-out infinite; }
.pf-cta { display: flex; gap: 8px; padding: 14px 18px 4px; }
.pf-cta .btn { flex: 1; height: 48px; }
.pf-card { margin: 12px 14px 0; border-radius: 22px; background: var(--panel-2); border: 1px solid var(--line); padding: 4px 16px; }
.pf-card .pf-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.pf-card .pf-row:last-child { border-bottom: 0; }
.pf-card .pf-row .v { font-size: 1rem; }
.pf-stat { display: flex; gap: 8px; margin: 12px 14px 0; }
.pf-stat > div { flex: 1; text-align: center; padding: 12px 6px; border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.pf-stat > div:hover { background: var(--hover); }
.pf-stat b { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.pf-stat small { color: var(--text-2); font-size: .74rem; }
.pinned-label { font-size: .72rem; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin: 2px 2px 8px; }

/* ---------- animated sticker pack tabs ---------- */
.stk-packs { display: flex; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.stk-packs button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; transition: background .2s; }
.stk-packs button img { width: 30px; height: 30px; }
.stk-packs button.active { background: var(--active); }

/* ---------- light-theme contrast for name styles ---------- */
html[data-theme="light"] .ns-shimmer-gold { background-image: linear-gradient(100deg, #8a5a00 0%, #c98a00 25%, #f2b600 32%, #a86e00 45%, #8a5a00 60%, #c98a00 80%, #8a5a00 100%); }
html[data-theme="light"] .ns-shimmer-ice { background-image: linear-gradient(100deg, #0369a1 0%, #38bdf8 25%, #6366f1 45%, #0369a1 70%, #0ea5e9 100%); }
html[data-theme="light"] .ns-gold { background-image: linear-gradient(90deg, #b07800, #d99000); }
html[data-theme="light"] .ns-mint { background-image: linear-gradient(90deg, #059669, #059669); }
html[data-theme="light"] .ns-galaxy { background-image: linear-gradient(90deg, #7c3aed, #db2777, #0284c7); }
html[data-theme="light"] .ns-holo { background-image: linear-gradient(110deg, #c026d3, #d97706, #0284c7, #059669, #c026d3, #d97706); }

/* ---------- chat backdrop depth ---------- */
.cv-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 40%, transparent, color-mix(in srgb, var(--bg) 55%, transparent)); }
.cv-head .ava, .cl-item .ava { box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .5); }
.mrow .m-ava { align-self: flex-end; }
.mrow:not(.tail) .m-ava { visibility: hidden; }
.mrow.tail { margin-bottom: 4px; }
@media (max-width: 520px) { #tbLogout, .tb-me > div { display: none; } .tb-me { padding-right: 4px; } }

/* ---------- raster gift models ---------- */
.gift-img { position: relative; display: block; width: 100%; height: 100%; animation: gaFloat 3.6s ease-in-out infinite; }
.gift-img img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.gift-img .gsp { position: absolute; width: 10px; height: 10px; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(#fff, #fff) center/2px 100% no-repeat, linear-gradient(#fff, #fff) center/100% 2px no-repeat; border-radius: 50%; animation: gaTwinkle 1.8s ease-in-out infinite; opacity: .8; }
.gift-img .gsp.d2 { animation-delay: .6s; } .gift-img .gsp.d3 { animation-delay: 1.2s; }
.gift-card .gart .gift-img { width: 68px; height: 68px; margin: 0 auto; }
.hue-anim { animation: hueAnim 4s linear infinite; }
@keyframes hueAnim { to { filter: hue-rotate(360deg) saturate(1.6) drop-shadow(0 8px 14px rgba(0,0,0,.35)); } }

/* ---------- profile rows, SVG badges, personal channel ---------- */
.pf-row .v.txt { display: block; font-weight: 400; line-height: 1.45; }
.pf-row .v.txt a { display: inline; }
.pf-badges { gap: 8px; flex-wrap: wrap; }
.bdg { display: inline-grid; width: 30px; height: 30px; cursor: pointer; transition: transform .25s var(--spring); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.bdg:hover { transform: translateY(-2px) scale(1.12); }
.bdg svg { display: block; }
.tip-pop .bdg { width: 30px; height: 30px; }
.pf-channel { margin: 12px 14px 0; border-radius: 22px; background: var(--panel-2); border: 1px solid var(--line); padding: 12px 14px; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.pf-channel:hover { background: var(--hover); transform: translateY(-1px); }
.pf-channel .pc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pf-channel .pc-lbl { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
html[data-theme="dark"] .pf-channel .pc-lbl { color: #a99bff; }
.pf-channel .pc-sub { font-size: .78rem; color: var(--text-2); }
.pf-channel .pc-body { display: flex; gap: 12px; align-items: center; }
.pf-channel .pc-title { font-weight: 700; display: flex; align-items: center; gap: 5px; }
.pf-channel .pc-post { color: var(--text-2); font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.pf-channel .pc-time { align-self: flex-start; font-size: .72rem; color: var(--text-3); }

/* ---------- no top bar: menu button sits before search ---------- */
.sb-search.with-menu { display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.sb-search.with-menu .menu-btn { flex: none; width: 40px; height: 40px; position: relative; }
.sb-search.with-menu .srch { position: relative; flex: 1; }
.sb-search.with-menu .srch .i-search { position: absolute; left: 14px; top: 11px; color: var(--text-3); pointer-events: none; }
.sb-search.with-menu .srch .input { padding-left: 40px; }
.sb-search.with-menu .srch .clear { position: absolute; right: 4px; top: 4px; }
.menu-btn .nbadge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.sb-me { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; transition: background .2s; }
.sb-me:hover { background: var(--hover); }
.sb-me b { font-size: 1.05rem; display: block; line-height: 1.1; }
.sb-me small { color: var(--text-2); font-size: .78rem; }

/* ---------- server connection lost ---------- */
.sync-off { position: fixed; z-index: 500; left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(255, 77, 94, .92); color: #fff; font-size: .84rem; font-weight: 600; box-shadow: var(--shadow); animation: toastIn .3s var(--spring); }

/* ---------- audio call overlay ---------- */
.call-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toastIn .25s var(--spring);
}
.call-card {
  width: min(340px, calc(100vw - 32px));
  padding: 28px 24px 22px;
  border-radius: 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.call-ava { margin-bottom: 4px; }
.call-name { font-size: 1.25rem; font-weight: 700; }
.call-status { color: var(--text-2); font-size: .92rem; min-height: 1.3em; }
.call-actions { display: flex; gap: 22px; margin-top: 14px; }
.call-btn {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: transform .15s var(--spring), filter .15s;
}
.call-btn:active { transform: scale(.92); }
.call-btn.accept { background: #22c55e; }
.call-btn.decline { background: #ef4444; }
.call-btn.mute { background: #3b82f6; }
.call-btn.mute.on { background: #64748b; opacity: .9; }
.call-btn:hover { filter: brightness(1.08); }

.b-voice.no-audio { opacity: .7; }