/* ATLAS BEATS — v13.0 Telegram-grade account & admin styles (hero, info card, tabs, settings, sheets, passcode lock, admin control center) */
.tgx { --c1: #7c3aed; --c2: #c084fc; --c3: #c084fc; }
.tgx .ac-in { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.tgx .ac-in.in, .tgx.ac-in.in .ac-in { opacity: 1; transform: none; }
body.tg-nomotion *, body.tg-nomotion *::before, body.tg-nomotion *::after { animation-duration: 0s !important; transition-duration: .01s !important; }

/* ── hero ── */
.tg-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .1); padding: 14px 16px 18px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2) 60%, var(--c3)); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--c1) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); }
.tg-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8, 6, 16, .08), rgba(8, 6, 16, .55) 70%, rgba(8, 6, 16, .72)); pointer-events: none; }
.tg-hero > * { position: relative; z-index: 2; }
.tg-hero .tg-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tg-hero-bg .ac-pbg, .tg-hero-bg .ac-fx { position: absolute; inset: 0; }
.tg-hero-bg .ac-pbg.bg-gifts { opacity: .85; }
.tg-wall { position: absolute; inset: -10%; width: 120%; height: 120%; opacity: .22; animation: tgWallDrift 40s linear infinite; }
@keyframes tgWallDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3%, 2%, 0); } }
.tg-hero-photo { position: absolute; inset: -6%; background-size: cover; background-position: center 30%; filter: blur(26px) saturate(1.3); opacity: .55; transform: scale(1.08); }
.tg-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.tg-hero-top-r { display: inline-flex; gap: 6px; }
.tg-hero-chips { display: none; }
.tg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-style: normal; color: #fff; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); white-space: nowrap; }
.tg-chip.gold { color: #fde68a; border-color: rgba(253, 230, 138, .4); } .tg-chip.red { color: #fecaca; border-color: rgba(252, 165, 165, .4); }
.tg-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .28); color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: transform .2s ease, background .2s ease; }
.tg-ib:hover { background: rgba(0, 0, 0, .42); transform: translateY(-1px); }
.tg-ava-wrap { position: relative; display: inline-block; margin: 6px auto 0; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.tg-ava-wrap .ac-ava.xl { width: 128px; height: 128px; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .7), 0 0 0 4px rgba(255, 255, 255, .22); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.tg-ava-wrap:hover .ac-ava.xl { transform: scale(1.03); }
.tg-ava-wrap.on::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(10, 8, 20, .9); z-index: 3; }
.tg-ava-cam { position: absolute; left: 4px; bottom: 4px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 8, 20, .85); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
[dir="rtl"] .tg-ava-cam { left: auto; right: 4px; } [dir="rtl"] .tg-ava-wrap.on::after { right: auto; left: 8px; }
.tg-name { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.tg-name .ac-name { font-size: inherit; }
.tg-wear { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .25); padding: 2px; cursor: pointer; animation: tgWear 3.2s ease-in-out infinite; }
@keyframes tgWear { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
.tg-sub { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.tg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); vertical-align: middle; }
.tg-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: tgPulse 2.2s ease-in-out infinite; }
@keyframes tgPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .08); } }
.tg-bday { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 700; }
.tg-hero .ac-ptitle { margin-top: 8px; }
.tg-acts { display: flex; justify-content: center; align-items: stretch; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tg-act { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 76px; padding: 10px 8px 9px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .28); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; backdrop-filter: blur(10px); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.tg-act .tg-act-ic { display: grid; place-items: center; width: 30px; height: 30px; } .tg-act .i { width: 22px; height: 22px; }
.tg-act:hover { background: rgba(0, 0, 0, .42); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.tg-act:active { transform: scale(.96); }

/* mini bar (shows when the hero scrolls away) */
.tg-minibar { position: fixed; top: 8px; left: 50%; transform: translate(-50%, -16px); z-index: 20; display: flex; align-items: center; gap: 10px; width: min(100% - 32px, 520px); padding: 6px 8px 6px 10px; border-radius: 999px; border: 1px solid var(--ab-line2); background: rgba(12, 10, 20, .86); backdrop-filter: blur(14px); opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.tg-minibar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tg-minibar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.tg-minibar .ac-ava.sm { width: 32px; height: 32px; } .tg-minibar .tg-ib { width: 32px; height: 32px; }
[dir="rtl"] .tg-set-head .tg-ib[data-act=home] .i, [dir="rtl"] .tg-hero-top .tg-ib[data-act=home] .i, [dir="rtl"] .tg-pad button.del .i { transform: scaleX(-1); }

/* ── info card ── */
.tg-info { margin-top: 14px; border: 1px solid var(--ab-line); border-radius: 20px; background: var(--ab-card); overflow: hidden; }
.tg-irow { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 12px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
.tg-irow + .tg-irow { border-top: 1px solid var(--ab-line); }
button.tg-irow { cursor: pointer; } button.tg-irow:hover { background: var(--ab-card2); }
.tg-ival { font-size: 15px; line-height: 1.5; color: var(--ab-ink); word-break: break-word; }
.tg-irow.user .tg-ival { color: #93c5fd; font-weight: 600; }
.tg-ilbl { font-size: 12px; color: var(--ab-ink3); }
.tg-muted { color: var(--ab-ink3); font-style: normal; }
.tg-soon { color: #fde68a; font-size: 12px; margin-inline-start: 6px; }
.tg-info .ac-plinks { margin: 0; justify-content: flex-start; } .tg-info .ac-badges { justify-content: flex-start; margin: 0; }

/* ── tiles ── */
.tg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.tg-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 18px; border: 1px solid var(--ab-line); background: var(--ab-card); color: var(--ab-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.tg-tile .i { width: 24px; height: 24px; color: #c4b5fd; }
.tg-tile:hover { transform: translateY(-2px); border-color: rgba(167, 139, 250, .45); background: var(--ab-card2); }
.tg-tile i { position: absolute; top: 8px; inset-inline-end: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-style: normal; background: rgba(255, 255, 255, .1); }
.tg-tile i.hot { background: #ef4444; color: #fff; } .tg-tile i.gold { background: rgba(231, 201, 138, .18); color: #fde68a; }

/* ── tabs ── */
.tg-tabs { position: relative; display: flex; gap: 2px; margin-top: 16px; padding: 4px; border-radius: 999px; border: 1px solid var(--ab-line); background: var(--ab-card); overflow-x: auto; scrollbar-width: none; }
.tg-tabs::-webkit-scrollbar { display: none; }
.tg-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: max-content; padding: 10px 14px; border-radius: 999px; border: 0; background: none; color: var(--ab-ink2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .25s ease, color .25s ease; }
.tg-tab i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.tg-tab.on { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 24px -10px var(--c1); }
.tg-tab.on i { background: rgba(0, 0, 0, .25); }
.tg-panel { margin-top: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--ab-line); background: var(--ab-card); }
.tg-panel.ac-in { transition-duration: .3s; }
.tg-ph { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12px; font-weight: 700; color: var(--ab-ink3); text-transform: uppercase; letter-spacing: .06em; }
.tg-ph + .tg-grid { margin-bottom: 14px; }
.tg-grid.ac-nft-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tg-panel-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.tg-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; text-align: center; color: var(--ab-ink2); }
.tg-empty > .i { width: 40px; height: 40px; color: var(--ab-ink3); } .tg-empty b { font-size: 14px; }
.tg-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.tg-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .03); font-size: 12.5px; text-align: center; }
.tg-badge > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bc, #a78bfa) 32%, transparent), rgba(255, 255, 255, .04) 72%); border: 1px solid color-mix(in srgb, var(--bc, #a78bfa) 55%, transparent); box-shadow: 0 0 18px -6px var(--bc, #a78bfa); }
.tg-badge > b { font-size: 12.5px; line-height: 1.3; }
.tg-level { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; padding: 6px 4px 14px; }
.tg-ring { width: 96px; height: 96px; transform: rotate(-90deg); grid-row: 1; grid-column: 1; }
.tg-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; } .tg-ring .bg { stroke: rgba(255, 255, 255, .08); } .tg-ring .fg { stroke: url(#tgRingGrad), #a78bfa; stroke: #a78bfa; transition: stroke-dashoffset 1s ease; }
.tg-level-tx { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .tg-level-tx small { font-size: 10px; color: var(--ab-ink3); text-transform: uppercase; letter-spacing: .08em; } .tg-level-tx b { font-size: 30px; }
.tg-level-meta { display: flex; flex-direction: column; gap: 4px; } .tg-level-meta b { font-size: 16px; } .tg-level-meta small { color: var(--ab-ink3); }
.tg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tg-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .03); }
.tg-stat .tg-stat-ic { color: #c4b5fd; } .tg-stat b { font-size: 18px; } .tg-stat small { color: var(--ab-ink3); font-size: 11.5px; }
.tg-stat.gold .tg-stat-ic, .tg-stat.gold b { color: #fde68a; }
.tg-activity .ac-ib-item { background: rgba(255, 255, 255, .03); }
.tg-admin-entry { margin-top: 14px; }

/* ── settings view ── */
.tg-set-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; }
.tg-set-head h1 { flex: 1; margin: 0; font-size: 22px; font-weight: 800; }
.tg-set-head .tg-ib { background: var(--ab-card); border-color: var(--ab-line2); color: var(--ab-ink); }
.tg-set-me { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 55%, #0d0b15), color-mix(in srgb, var(--c2) 35%, #0d0b15)); color: #fff; font: inherit; text-align: start; cursor: pointer; }
.tg-set-me-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .tg-set-me-tx b { font-size: 17px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tg-set-me-tx small { color: rgba(255, 255, 255, .72); font-size: 12.5px; }
.tg-set-me .chev { color: rgba(255, 255, 255, .6); } [dir="rtl"] .tg-set-me .chev { transform: scaleX(-1); }
.tg-settings .ac-group { margin-top: 12px; }
.tg-sw-mini { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.tg-emo { font-size: 18px; margin-inline-end: 6px; }
.tg-ver { text-align: center; color: var(--ab-ink3); font-size: 12px; margin: 18px 0 6px; }

/* ── colour sheet ── */
.tg-prev { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px 18px; border-radius: 20px; color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2) 60%, var(--c3)); transition: background .3s ease; text-align: center; }
.tg-prev .tg-prev-bg { position: absolute; inset: 0; z-index: 0; } .tg-prev > * { position: relative; z-index: 1; } .tg-prev .tg-prev-bg { z-index: 0; }
.tg-prev b { margin-top: 8px; font-size: 18px; } .tg-prev small { color: rgba(255, 255, 255, .75); }
.tg-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0 6px; }
.tg-swb { aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; background: linear-gradient(135deg, var(--c1), var(--c2) 60%, var(--c3)); cursor: pointer; transition: transform .2s ease, border-color .2s ease; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); }
.tg-swb:hover { transform: scale(1.06); } .tg-swb.on { border-color: #fff; transform: scale(1.1); }
.tg-pats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tg-patb { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--ab-ink2); font: inherit; font-size: 11.5px; cursor: pointer; }
.tg-patb-bg { position: relative; display: block; height: 56px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); border: 2px solid transparent; transition: border-color .2s ease; }
.tg-patb-bg .tg-wall { animation: none; opacity: .35; inset: 0; width: 100%; height: 100%; }
.tg-patb.on .tg-patb-bg { border-color: #fff; } .tg-patb.on { color: #fff; }

/* birthday / status / verify / share / passcode sheets */
.tg-bday-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.tg-premium-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(231, 201, 138, .3); background: rgba(231, 201, 138, .08); color: #fde68a; font-size: 13px; margin-bottom: 10px; }
.tg-premium-note span { flex: 1; } .ab-btn.sm { padding: 6px 12px; font-size: 12.5px; min-height: 34px; }
.tg-emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
.tg-emoji { aspect-ratio: 1; display: grid; place-items: center; font-size: 24px; border-radius: 14px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .04); color: var(--ab-ink2); cursor: pointer; transition: transform .15s ease, border-color .2s ease, background .2s ease; }
.tg-emoji:hover { transform: scale(1.06); } .tg-emoji.on { border-color: #a78bfa; background: rgba(167, 139, 250, .18); } .tg-emoji[disabled] { opacity: .45; cursor: not-allowed; }
.tg-wears { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tg-wearb { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .04); color: var(--ab-ink2); font: inherit; font-size: 11.5px; cursor: pointer; }
.tg-wearb span { display: grid; place-items: center; width: 52px; height: 52px; } .tg-wearb.on { border-color: #a78bfa; background: rgba(167, 139, 250, .18); color: #fff; } .tg-wearb[disabled] { opacity: .45; cursor: not-allowed; }
.tg-verify-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 16px; text-align: center; }
.tg-verify-hero b { font-size: 18px; } .tg-verify-hero p { margin: 0; color: var(--ab-ink2); font-size: 13.5px; line-height: 1.7; }
.tg-vstate { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .04); margin-bottom: 12px; }
.tg-vstate div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .tg-vstate small { color: var(--ab-ink3); }
.tg-vstate.pending { border-color: rgba(251, 191, 36, .35); color: #fde68a; } .tg-vstate.denied { border-color: rgba(248, 113, 113, .35); color: #fca5a5; }
.tg-vreq-tips { margin: 6px 0 0; padding: 0 18px; color: var(--ab-ink3); font-size: 12.5px; line-height: 1.8; }
.tg-share { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tg-share canvas { width: min(100%, 330px); height: auto; border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.tg-share code { font-size: 12px; color: var(--ab-ink3); word-break: break-all; text-align: center; }

/* avatar viewer */
.tg-viewer { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: rgba(5, 4, 10, .85); opacity: 0; transition: opacity .22s ease; }
.tg-viewer.in { opacity: 1; } .tg-viewer[hidden] { display: none; }
.tg-viewer-bg { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(40px) brightness(.5); }
.tg-viewer img { position: relative; max-width: min(92vw, 560px); max-height: 72vh; border-radius: 24px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); animation: tgPop .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes tgPop { from { transform: scale(.86); opacity: 0; } }
.tg-viewer-x { position: absolute; top: 18px; inset-inline-end: 18px; }
.tg-viewer-cap { position: absolute; bottom: 24px; display: flex; align-items: center; gap: 12px; color: #fff; } .tg-viewer-cap b { font-size: 16px; }

/* passcode lock */
.tg-lock { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #1b1530, #07060d 70%); transition: opacity .25s ease; }
.tg-lock.out { opacity: 0; } .tg-lock[hidden] { display: none; }
body.tg-locked { overflow: hidden; }
.tg-lock-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(92vw, 360px); text-align: center; }
.tg-lock-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .12em; font-size: 13px; color: var(--ab-ink2); margin-bottom: 6px; } .tg-lock-logo img { width: 30px; height: 30px; }
.tg-lock h2 { margin: 6px 0 0; font-size: 20px; } .tg-lock p { margin: 0 0 8px; color: var(--ab-ink3); font-size: 13px; }
.tg-pin-dots { display: flex; gap: 12px; margin: 8px 0 18px; }
.tg-pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); transition: background .15s ease, transform .15s ease; }
.tg-pin-dots i.on { background: #fff; border-color: #fff; transform: scale(1.1); }
.tg-pin-dots.wrong { animation: tgShake .5s ease; } .tg-pin-dots.wrong i { border-color: #ef4444; background: #ef4444; }
@keyframes tgShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.tg-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; direction: ltr; }
.tg-pad button { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 26px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.tg-pad button:hover { background: rgba(255, 255, 255, .12); } .tg-pad button:active { transform: scale(.94); } .tg-pad button.del { font-size: 18px; }
.tg-lock .ac-link { margin-top: 14px; }

/* inbox rows from admin / verification */
.ac-ib-item.tg-ib { cursor: default; } .ac-ib-item.tg-ib.adm .ac-ib-ic { background: rgba(167, 139, 250, .18); color: #c4b5fd; } .ac-ib-item.tg-ib.ok .ac-ib-ic { background: rgba(59, 130, 246, .18); } .ac-ib-item.tg-ib.warn .ac-ib-ic { background: rgba(248, 113, 113, .18); color: #fca5a5; }

/* ── admin: members ── */
.tg-tb { flex-wrap: wrap; align-items: center; gap: 10px; }
.tg-tb .ac-search { flex: 1 1 220px; }
.tg-sort { min-height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ab-line2); background: var(--ab-card); color: var(--ab-ink); font: inherit; font-size: 13px; }
.tg-chips { margin: 10px 0 0; flex-wrap: wrap; gap: 6px; }
.ac-chips.tg-chips button { white-space: nowrap; }
.tg-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .1); }
.tg-bulkbar b { flex: 1; font-size: 13px; }
.tg-members { margin-top: 10px; }
.tg-mrow { display: flex; align-items: center; gap: 8px; border-radius: 14px; transition: background .2s ease; }
.tg-mrow.sel { background: rgba(167, 139, 250, .1); } .tg-mrow.banned .ac-member { opacity: .6; }
.tg-mrow .ac-member { flex: 1; min-width: 0; }
.tg-ck { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-inline-start: 6px; cursor: pointer; }
.tg-ck input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.tg-ck i { width: 20px; height: 20px; border-radius: 7px; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; transition: background .15s ease, border-color .15s ease; }
.tg-ck input:checked + i { background: #a78bfa; border-color: #a78bfa; } .tg-ck input:checked + i::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.tg-mava { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); padding: 2px; }
.tg-mon { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #0d0b15; }
.ac-kpi.tg-k.on b { color: #86efac; } .ac-kpi small .tg-dot { margin-inline-end: 4px; }

/* ── admin: verification queue ── */
.tg-vlist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tg-vcard { padding: 12px 14px; border-radius: 18px; border: 1px solid var(--ab-line); background: var(--ab-card); }
.tg-vcard.st-approved { border-color: rgba(59, 130, 246, .35); } .tg-vcard.st-denied { border-color: rgba(248, 113, 113, .3); }
.tg-vtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tg-vtop .ac-member { flex: 1; min-width: 200px; padding: 0; background: none; border: 0; }
.tg-vreason { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }
.tg-vlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #93c5fd; word-break: break-all; }
.tg-vmeta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; color: var(--ab-ink3); font-size: 12px; }
.tg-vacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tg-vnote { flex: 1 1 200px; min-height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ab-line2); background: rgba(255, 255, 255, .04); color: var(--ab-ink); font: inherit; font-size: 13px; }
.tag.pending { color: #fde68a; } .tag.approved { color: #93c5fd; } .tag.denied { color: #fca5a5; }

/* ── admin: member card ── */
.ac-sheet.tg-mem { padding: 0; overflow: hidden; }
.tg-mem-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 16px 18px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2) 70%, var(--c3)); }
.tg-mem-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8, 6, 16, .1), rgba(8, 6, 16, .6)); }
.tg-mem-hero > * { position: relative; z-index: 1; } .tg-mem-hero .tg-hero-bg { z-index: 0; position: absolute; inset: 0; }
.tg-mem-hero h2 { margin: 8px 0 0; font-size: 20px; display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tg-mem-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; background: rgba(0, 0, 0, .3); color: #fff; }
.tg-mem-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.tg-mem-body { padding: 14px 18px 20px; }
.tg-mem-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.tg-mem-kpis span { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .03); font-size: 11.5px; color: var(--ab-ink3); }
.tg-mem-kpis b { font-size: 15px; color: var(--ab-ink); }
.tg-qas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tg-qa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .04); color: var(--ab-ink); font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.tg-qa:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.tg-qa span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.tg-qa.blue span { background: rgba(59, 130, 246, .25); color: #93c5fd; } .tg-qa.gold span { background: rgba(231, 201, 138, .2); color: #fde68a; } .tg-qa.red span { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.tg-mtabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--ab-line); background: rgba(255, 255, 255, .03); margin-bottom: 12px; }
.tg-mtabs button { flex: 1; padding: 8px 10px; border-radius: 999px; border: 0; background: none; color: var(--ab-ink2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tg-mtabs button.on { background: rgba(167, 139, 250, .22); color: #fff; }
.tg-mpane { display: none; } .tg-mpane.on { display: block; }
.tg-grants { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 6px; } .tg-grants .tag { cursor: pointer; }
.tg-txs, .tg-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tg-txs li { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 12.5px; }
.tg-txs .pos { color: #86efac; font-weight: 800; } .tg-txs .neg { color: #fca5a5; font-weight: 800; } .tg-txs small { color: var(--ab-ink3); }
.tg-msgs li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 13px; }
.tg-msgs li.verify { border-inline-start: 3px solid #3b82f6; } .tg-msgs small { color: var(--ab-ink3); font-size: 11px; }

/* ── responsive ── */
@media (max-width: 900px) { .tg-tiles { grid-template-columns: repeat(4, 1fr); } .tg-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .tg-hero { border-radius: 24px; padding: 12px 12px 16px; }
  .tg-ava-wrap .ac-ava.xl { width: 110px; height: 110px; }
  .tg-name { font-size: 22px; }
  .tg-acts { gap: 6px; } .tg-act { min-width: 0; flex: 1 1 0; padding: 9px 4px 8px; font-size: 11px; } .tg-act .i { width: 20px; height: 20px; }
  .tg-tiles { gap: 8px; } .tg-tile { padding: 12px 6px 10px; font-size: 11.5px; border-radius: 16px; }
  .tg-tab { padding: 9px 10px; font-size: 12.5px; }
  .tg-grid.ac-nft-grid { grid-template-columns: repeat(2, 1fr); }
  .tg-level { grid-template-columns: 84px 1fr; } .tg-ring { width: 84px; height: 84px; }
  .tg-sws { grid-template-columns: repeat(6, 1fr); gap: 8px; } .tg-emojis { grid-template-columns: repeat(5, 1fr); } .tg-wears { grid-template-columns: repeat(3, 1fr); }
  .tg-bday-row { grid-template-columns: 1fr 1fr; } .tg-bday-row .ac-field:nth-child(2) { grid-column: 1 / -1; }
  .tg-minibar { top: 6px; }
  .tg-pad { grid-template-columns: repeat(3, 64px); gap: 10px; } .tg-pad button { width: 64px; height: 64px; }
  .tg-txs li { grid-template-columns: 60px 1fr; } .tg-txs li small:last-child { grid-column: 2; }
  .tg-qas { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 360px) { .tg-act { font-size: 10px; } .tg-tiles { grid-template-columns: repeat(2, 1fr); } .tg-qas { grid-template-columns: repeat(2, 1fr); } }

/* ── v14: badges under the name, gift shelf, creator-only Obsidian ── */
.tg-hbadges { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 6px auto 0; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; max-width: 100%; }
.tg-hb { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bc, #a78bfa) 28%, rgba(0, 0, 0, .35)); border: 1px solid color-mix(in srgb, var(--bc, #a78bfa) 70%, transparent); box-shadow: 0 0 10px -2px var(--bc, #a78bfa); }
.tg-hb svg { width: 15px; height: 15px; }
.tg-hb.more { font-size: 11px; font-weight: 800; color: #fff; }
.tg-shelf { margin: 10px 0 0; padding: 12px 0 10px; border-radius: 22px; background: var(--card, rgba(255, 255, 255, .04)); border: 1px solid var(--line, rgba(255, 255, 255, .08)); overflow: hidden; }
.tg-shelf-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 8px; }
.tg-shelf-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.tg-shelf-head b i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(124, 58, 237, .22); color: #c4b5fd; }
.tg-shelf-all { appearance: none; border: 0; background: none; color: var(--accent, #a78bfa); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tg-shelf-row { display: flex; gap: 10px; padding: 4px 14px 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tg-shelf-row::-webkit-scrollbar { display: none; }
.tg-shelf-it { flex: none; width: 84px; height: 84px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc) 28%, transparent), rgba(0, 0, 0, .25) 72%); display: grid; place-items: center; cursor: pointer; scroll-snap-align: start; position: relative; box-shadow: 0 10px 24px -14px var(--tc), inset 0 0 24px -12px var(--tc); transition: transform .2s ease; }
.tg-shelf-it:hover { transform: translateY(-2px) scale(1.03); }
.tg-shelf-it svg { width: 60px; height: 60px; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--tc) 55%, transparent)); }
.tg-shelf-it.eq::after { content: '★'; position: absolute; top: 5px; inset-inline-end: 7px; font-size: 11px; color: #fde68a; text-shadow: 0 0 8px rgba(253, 230, 138, .8); }
.tg-swb.locked { opacity: .55; cursor: not-allowed; display: grid; place-items: center; color: #fff; }
.tg-swb.locked:hover { transform: none; }
.tg-swb.locked .i { width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.tg-sw-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; margin: 0 0 8px; }
.tg-hero.c-12 { border-color: rgba(167, 139, 250, .35); box-shadow: 0 30px 80px -30px rgba(109, 40, 217, .7), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.tg-hero.c-12 .tg-wall { opacity: .3; }
.tg-hero.c-12 .tg-chip { background: rgba(109, 40, 217, .35); border-color: rgba(167, 139, 250, .5); }
.tg-hero.c-12 .tg-act { background: rgba(255, 255, 255, .07); }
.tg-hero.c-12 .tg-ava-wrap .ac-ava { box-shadow: 0 0 0 3px #000, 0 0 0 5px #6d28d9, 0 0 40px rgba(109, 40, 217, .6); }
@media (max-width: 480px) { .tg-shelf-it { width: 72px; height: 72px; border-radius: 18px; } .tg-shelf-it svg { width: 50px; height: 50px; } .tg-hbadges { gap: 4px; padding: 4px 8px; } }

/* ══ v15.0 — collectibles exactly like Telegram gifts ══ */
/* the card: pure artwork, square, no text — number pill, bubbles, on-sale ribbon + price pill */
.ac-nft.tgg { padding: 0; gap: 0; border: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--b1, #2a2845), var(--b0, #14121f)); aspect-ratio: 1; isolation: isolate; }
.ac-nft.tgg .ac-nft-art { border-radius: 0; aspect-ratio: auto; position: absolute; inset: 0; }
.ac-nft.tgg .ac-nft-art svg { width: 100%; height: 100%; border-radius: 0; }
.ac-nft.tgg:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }
.ac-nft.tgg .tgg-num { position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 7px; border-radius: 8px; background: rgba(0, 0, 0, .45); color: #fff; font: 800 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .02em; backdrop-filter: blur(6px); font-style: normal; pointer-events: none; }
.ac-nft.tgg .tgg-bub { position: absolute; top: 8px; inset-inline-start: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(6px); font-style: normal; pointer-events: none; }
.ac-nft.tgg .tgg-bub .i { width: 13px; height: 13px; }
.ac-nft.tgg .tgg-bub.eq { background: rgba(231, 201, 138, .9); color: #2a1d05; }
.ac-nft.tgg .tgg-bub.gift { background: rgba(244, 63, 94, .92); }
.ac-nft.tgg .tgg-ribbon { position: absolute; top: 14px; inset-inline-end: -34px; width: 130px; transform: rotate(45deg); text-align: center; padding: 3px 0; background: #2f7fd6; color: #fff; font: 800 10.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .02em; font-style: normal; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); pointer-events: none; }
[dir="rtl"] .ac-nft.tgg .tgg-ribbon { transform: rotate(-45deg); }
.ac-nft.tgg.sale .tgg-num { display: none; }
.ac-nft.tgg .tgg-price { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 800 12px/1.2 Inter, system-ui, sans-serif; backdrop-filter: blur(6px); font-style: normal; white-space: nowrap; pointer-events: none; }
.ac-nft.tgg .tgg-price .i { width: 13px; height: 13px; color: #fbbf24; }
.ac-nft.tgg.eq { outline: 2px solid rgba(231, 201, 138, .8); outline-offset: -2px; }
.tg-grid.ac-nft-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ac-nft-grid.pick .ac-nft.tgg::after { content: ''; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
/* collection tabs above the grid */
.tg-gtabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 4px; scrollbar-width: none; }
.tg-gtabs::-webkit-scrollbar { display: none; }
.tg-gtab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--ab-line); background: var(--ab-card); color: var(--ab-ink2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tg-gtab svg { width: 18px; height: 18px; border-radius: 5px; }
.tg-gtab i { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ab-ink3); }
.tg-gtab.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #2f7fd6, #7c3aed); }
.tg-gtab.on i { background: rgba(255, 255, 255, .22); color: #fff; }
.tg-empty.sm { padding: 24px 12px; font-size: 13px; }

/* the gift sheet (Telegram's gift info layout) */
.ac-sheet.tgd-sheet .ac-sheet-body { padding: 0 0 22px; }
.tgd { display: grid; gap: 0; }
.tgd-hero { position: relative; width: 100%; height: clamp(190px, 57vw, 340px); aspect-ratio: auto; overflow: hidden; background: radial-gradient(circle at 50% 45%, var(--b1, #4f46e5), var(--b0, #1e1b4b) 80%); }
.tgd-hero svg.hero { width: 100%; height: 100%; display: block; }
.tgd-hero.plain { display: grid; place-items: center; height: 250px; aspect-ratio: auto; background: radial-gradient(circle at 50% 40%, var(--tg, rgba(124, 58, 237, .35)), #100d18 75%); }
.tgd-hero.plain > svg { width: 200px; height: 200px; border-radius: 28px; box-shadow: 0 30px 70px -30px var(--tg, rgba(0, 0, 0, .6)); }
.tgd-x, .tgd-more { position: absolute; top: 12px; background: rgba(0, 0, 0, .35) !important; color: #fff !important; backdrop-filter: blur(6px); border-color: transparent !important; }
.tgd-x { inset-inline-end: 12px; } .tgd-more { inset-inline-end: 56px; }
.tgd-title { text-align: center; padding: 16px 22px 6px; }
.tgd-title h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.2px; }
.tgd-title p { margin: 4px 0 0; color: var(--ab-ink3); font-size: 14px; font-weight: 600; }
.tgd-title .tgd-sale { color: #60a5fa; font-weight: 800; }
.tgd-table { margin: 14px 18px 0; border: 1px solid var(--ab-line); border-radius: 14px; overflow: hidden; background: var(--ab-card); }
.tgd-row { display: grid; grid-template-columns: 112px 1fr; min-height: 46px; border-top: 1px solid var(--ab-line); }
.tgd-row:first-child { border-top: 0; }
.tgd-k { display: flex; align-items: center; padding: 10px 14px; background: rgba(255, 255, 255, .035); color: var(--ab-ink2); font-size: 13.5px; font-weight: 700; border-inline-end: 1px solid var(--ab-line); }
.tgd-v { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ab-ink); min-width: 0; }
.tgd-pct { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 7px; background: rgba(47, 127, 214, .22); color: #8ec5ff; }
.tgd-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; }
.tgd-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 700; color: #60a5fa; text-decoration: none; letter-spacing: .01em; }
.tgd-tag:hover { text-decoration: underline; }
.tgd-user { display: inline-flex; align-items: center; gap: 8px; color: var(--ab-ink); text-decoration: none; min-width: 0; }
.tgd-user b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgd-user .ac-ava.xs { width: 26px; height: 26px; font-size: 11px; }
.tgd-prem { font-style: normal; color: #e7c98a; font-size: 12px; }
.tgd-msg { display: block; width: 100%; color: var(--ab-ink3); font-size: 12.5px; font-weight: 500; }
.tgd-learn { background: rgba(47, 127, 214, .18); border: 0; color: #8ec5ff; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; cursor: pointer; }
.tgd-ledger { margin: 12px 18px 0; text-align: center; color: var(--ab-ink3); font-size: 12.5px; font-weight: 600; }
.tgd-link { background: none; border: 0; color: #60a5fa; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 0 2px; }
.tgd-prov { margin: 12px 18px 0; }
.tgd-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 18px 0; }
.tgd-acts.one { grid-template-columns: 1fr; }
.tgd-act { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--ab-line); background: var(--ab-card); color: var(--ab-ink2); font: inherit; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.tgd-act span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(47, 127, 214, .18); color: #8ec5ff; }
.tgd-act span .i { width: 18px; height: 18px; }
.tgd-act small { font-size: 12px; font-weight: 700; }
.tgd-act:hover { color: var(--ab-ink); border-color: var(--ab-line2); transform: translateY(-1px); }
.tgd-act.on span { background: #2f7fd6; color: #fff; }
.tgd-act.gold span { background: rgba(231, 201, 138, .2); color: #e7c98a; }
.tgd .ac-form.ac-transfer { margin: 12px 18px 0; }
.tgd-ok { margin: 16px 18px 0; width: calc(100% - 36px); min-height: 48px; font-size: 15px; background: #2f7fd6 !important; border-color: transparent !important; }

/* collectible name under the profile name */
.tg-tag { display: inline-flex; align-items: center; gap: 6px; margin: 4px auto 0; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .25); color: #fff; font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.tg-tag .i { width: 13px; height: 13px; color: #8ec5ff; }
.tg-tag span i { font-style: normal; opacity: .6; }
.tg-tag:hover { background: rgba(0, 0, 0, .4); border-color: rgba(255, 255, 255, .3); }
.tg-tag.get { font-family: inherit; font-weight: 600; font-size: 12px; border-style: dashed; color: rgba(255, 255, 255, .8); }
.tg-tagpv { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 16px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(47, 127, 214, .2), rgba(124, 58, 237, .18)); border: 1px solid var(--ab-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; font-weight: 800; }
.tg-tagpv .i { color: #8ec5ff; } .tg-tagpv span { opacity: .55; }
.tg-tagcur { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ab-card); border: 1px solid var(--ab-line); margin-bottom: 6px; font-size: 13px; }
.tg-tagcur b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-inline-end: auto; }
.tg-tagin { display: flex; align-items: center; border: 1px solid var(--ab-line2); border-radius: 12px; background: rgba(0, 0, 0, .25); padding-inline-end: 12px; }
.tg-tagin input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-weight: 700; box-shadow: none !important; }
.tg-tagin span { color: var(--ab-ink3); font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tg-tagstate { display: block; margin-top: 6px; font-size: 12px; color: var(--ab-ink3); }
.tg-tagstate.ok { color: #4ade80; } .tg-tagstate.bad { color: #fb7185; }
.ac-muted.sm { font-size: 12px; margin: 6px 0 10px; }
.tg-tagrel { width: 100%; margin-top: 10px; }
.ac-pill.tg-tagpill { text-transform: none; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 767px) {
  .tg-grid.ac-nft-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ac-nft.tgg { border-radius: 14px; }
  .ac-nft.tgg .tgg-num { font-size: 10px; padding: 2px 6px; top: 6px; inset-inline-end: 6px; }
  .ac-nft.tgg .tgg-bub { width: 20px; height: 20px; top: 6px; inset-inline-start: 6px; }
  .ac-nft.tgg .tgg-price { font-size: 11px; padding: 3px 8px 3px 6px; bottom: 6px; }
  .ac-nft.tgg .tgg-ribbon { font-size: 9.5px; top: 10px; inset-inline-end: -38px; }
  .tgd-hero { height: clamp(180px, 57vw, 260px); }
  .tgd-row { grid-template-columns: 96px 1fr; }
  .tgd-k { padding: 10px 10px; font-size: 13px; }
  .tgd-v { padding: 8px 10px; font-size: 13.5px; }
  .tgd-table, .tgd-acts, .tgd-ledger, .tgd-prov, .tgd .ac-form.ac-transfer { margin-inline: 12px; }
  .tgd-ok { margin-inline: 12px; width: calc(100% - 24px); }
  .tgd-acts { gap: 6px; } .tgd-act { padding: 10px 4px 8px; }
}