/* Hols v3 — "matte vault". One solid two-pane instrument instead of floating cards; ruby (the app's own currency)
   is the only accent; icons are tone-on-tone; motion only where the user acts. Loaded last. */

/* =================================================================== tokens */
:root { --r-btn: 12px; --r-card: 18px; --sidebar-w: 372px; }
html[data-theme="dark"] {
  --void: #0c0c0e; --basalt: #141417; --graphite: #1c1c20; --graphite-2: #232328; --seam: #26262b;
  --bg: var(--void);
  --panel: var(--basalt); --panel-solid: var(--basalt);
  --panel-2: var(--graphite); --panel-3: var(--graphite-2);
  --hover: rgba(255, 255, 255, .04); --active: rgba(255, 255, 255, .07);
  --line: var(--seam); --line-2: #33333a;
  --text: #edebe8; --text-2: #8d8c93; --text-3: #5d5c63;
  --bubble-in: var(--graphite);
  --bubble-out-1: #5a1422; --bubble-out-2: #5a1422; --bubble-out-text: #fbecee;
  --input: var(--graphite);
  --shadow: 0 24px 64px rgba(0, 0, 0, .65); --shadow-sm: none;
  --overlay: rgba(4, 4, 6, .72);
}
html[data-theme="light"] {
  --void: #ececef; --basalt: #ffffff; --graphite: #f3f3f5; --graphite-2: #e9e9ed; --seam: #e3e3e8;
  --bg: var(--void);
  --panel: var(--basalt); --panel-solid: var(--basalt);
  --panel-2: var(--graphite); --panel-3: var(--graphite-2);
  --hover: rgba(20, 20, 30, .04); --active: rgba(20, 20, 30, .07);
  --line: var(--seam); --line-2: #d6d6dc;
  --text: #16161a; --text-2: #6b6a72; --text-3: #9b9aa2;
  --bubble-in: #ffffff;
  --bubble-out-1: #fbe3e7; --bubble-out-2: #fbe3e7; --bubble-out-text: #2a0910;
  --input: var(--graphite);
  --shadow: 0 24px 64px rgba(20, 20, 40, .18); --shadow-sm: none;
  --overlay: rgba(20, 20, 28, .38);
}
html { --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --brand-grad: var(--accent); }
body { background: var(--void) !important; letter-spacing: -.003em; }
body::before, body::after { display: none !important; }

/* glass becomes solid everywhere */
.glass, .glass-lite { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--basalt) !important; box-shadow: none !important; border-color: var(--seam) !important; }
.glass::before, .glass::after { display: none !important; }
.modal-back, .miniapp-back, .sendfx { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* =================================================================== shell: one solid surface */
#app { padding: 0 !important; gap: 0 !important; }
.main { gap: 0 !important; grid-template-columns: var(--sidebar-w) 1fr !important; }
.sidebar { border-radius: 0 !important; border: 0 !important; border-right: 1px solid var(--seam) !important; }
.chatview { border-radius: 0 !important; border: 0 !important; background: var(--void) !important; }
@media (max-width: 860px) { .main { grid-template-columns: 1fr !important; } .sidebar { border-right: 0 !important; } }

/* =================================================================== sidebar */
.sb-head { padding: 18px 16px 8px 20px; }
.sb-head h1 { font-size: 1.5rem !important; font-weight: 700; letter-spacing: -.025em !important; }
.seg-btns { border: 0; background: transparent; gap: 0; padding: 0; }
.seg-btns .icon-btn { width: 38px; height: 38px; color: var(--text-2); }
.seg-btns .icon-btn:hover { color: var(--text); background: var(--hover); }
.sb-search.with-menu { padding: 2px 14px 10px; gap: 6px; }
.sb-search.with-menu .menu-btn { width: 40px; height: 40px; background: transparent !important; border: 0 !important; color: var(--text-2); }
.sb-search.with-menu .menu-btn:hover { background: var(--hover) !important; color: var(--text); }
.sb-search .input { height: 40px; border-radius: var(--r-btn); background: var(--graphite) !important; border: 1px solid transparent; }
.sb-search .input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: none; }
.menu-btn .nbadge { background: var(--accent); top: 4px; right: 4px; }

/* folder tabs: text tabs with an underline, not pills */
.folder-tabs { gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--seam); }
.ftab { height: 40px; border-radius: 0 !important; padding: 0 10px; background: transparent !important; color: var(--text-2) !important; border: 0 !important; position: relative; font-weight: 600; }
.ftab:hover { color: var(--text) !important; }
.ftab.active { color: var(--text) !important; }
.ftab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.ftab .badge-count { background: var(--graphite-2) !important; color: var(--text-2); box-shadow: none; }
.ftab.active .badge-count { background: var(--accent) !important; color: #fff; }

.stories-bar { border-bottom: 1px solid var(--seam); padding: 12px 16px; }
.story-ring { background: var(--accent) !important; }
.story-ring.seen { background: var(--line-2) !important; }
.story-ring.none { background: transparent !important; }
.story-ring .ava { border-color: var(--basalt) !important; }
.story-name { color: var(--text-2); font-weight: 500; }

.cl-label { padding: 14px 20px 4px; font-size: .74rem; letter-spacing: .02em; text-transform: none; color: var(--text-3); font-weight: 600; }
.cl-item { margin: 0 !important; border-radius: 0 !important; padding: 9px 16px 9px 18px !important; gap: 12px; }
.cl-item:hover { background: var(--hover) !important; transform: none !important; }
.cl-item.active { background: var(--graphite) !important; box-shadow: none !important; }
.cl-item.active::before { content: ''; position: absolute; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; border-radius: 0 !important; background: var(--accent) !important; box-shadow: none !important; }
.cl-item .ava { --s: 52px; }
.cl-title { font-weight: 600; font-size: .97rem; }
.cl-time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.cl-preview { color: var(--text-2); }
.cl-preview b { color: var(--text); font-weight: 500; }
.badge-count { background: var(--accent) !important; box-shadow: none !important; font-variant-numeric: tabular-nums; }
.badge-count.muted { background: var(--graphite-2) !important; color: var(--text-2); }
.cl-sub { margin-left: 34px; border-left: 1px solid var(--seam); }
.cl-sub .cl-item { padding-left: 14px !important; }
.cm-tag { background: transparent; color: var(--text-3); padding: 0; font-weight: 600; }
.ava-wrap .dot { border-color: var(--basalt); background: #3ccf6e; }

/* =================================================================== chat */
.cv-bg { opacity: .22 !important; }
html[data-theme="light"] .cv-bg { opacity: .5 !important; }
.cv-bg::after { display: none; }
.cv-head { margin: 0 !important; height: 60px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--seam) !important; padding: 0 12px 0 16px !important; background: var(--basalt) !important; }
.cv-title { font-weight: 650; }
.cv-actions .icon-btn.glassy { background: transparent; border: 0; color: var(--text-2); }
.cv-actions .icon-btn.glassy:hover { background: var(--hover); color: var(--text); }
.cm-strip { padding: 8px 14px; border-bottom: 1px solid var(--seam); background: var(--basalt); }
.cm-strip .cm-title { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.cm-tab { background: var(--graphite) !important; border: 0 !important; height: 32px; }
.cm-tab.active { background: var(--accent) !important; color: #fff; }
.pinned-bar { margin: 0 !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--seam) !important; height: 48px; }
.msgs { padding: 16px 20px 10px; }
.date-sep { background: var(--graphite) !important; border: 0 !important; color: var(--text-2); font-weight: 600; }
.sys-pill { background: transparent !important; color: var(--text-3) !important; }
#unreadMark { background: var(--graphite) !important; color: var(--text-2) !important; }

.bubble { border: 0 !important; box-shadow: none !important; border-radius: 18px !important; padding: 8px 12px; }
html[data-theme="light"] .bubble { box-shadow: 0 1px 0 rgba(20, 20, 40, .06) !important; }
.mrow.in.tail .bubble { border-bottom-left-radius: 5px !important; }
.mrow.out.tail .bubble { border-bottom-right-radius: 5px !important; }
.mrow.in.cont .bubble { border-top-left-radius: 6px !important; }
.mrow.out.cont .bubble { border-top-right-radius: 6px !important; }
.mrow.out .bubble { background: var(--bubble-out-1) !important; color: var(--bubble-out-text); }
.mrow.out .bubble .b-meta { color: color-mix(in srgb, var(--bubble-out-text) 62%, transparent) !important; }
.mrow.out .b-meta .i-checks, .mrow.out .b-meta .i-check { color: color-mix(in srgb, var(--accent) 55%, #fff); }
html[data-theme="light"] .mrow.out .b-meta .i-checks, html[data-theme="light"] .mrow.out .b-meta .i-check { color: var(--accent); }
.mrow.out .bubble a { color: inherit; }
.mrow.out .b-reply { border-left-color: var(--accent); background: rgba(255, 255, 255, .06); }
.b-name { font-weight: 650; }
.b-text { font-size: .965rem; line-height: 1.45; }
.rx { background: var(--graphite) !important; border: 0 !important; }
.rx.mine { background: var(--accent) !important; }
.kb-btn { background: var(--graphite) !important; border: 0 !important; border-radius: 12px; }
.kb-btn:hover { background: var(--graphite-2) !important; }
.b-comments { border-top-color: var(--seam); }
.loose-meta { background: var(--graphite) !important; }

/* composer: flat field, the ruby send button is the one bold object */
.cv-foot { padding: 10px 16px 14px !important; max-width: 920px; }
.composer { border-radius: 16px !important; background: var(--graphite) !important; border: 1px solid var(--seam) !important; padding: 4px; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--seam)) !important; }
.comp-row .icon-btn { color: var(--text-2); }
.comp-row .icon-btn:hover { color: var(--text); background: var(--hover); }
.send-btn { background: var(--accent) !important; box-shadow: none !important; border-radius: 12px; width: 42px; height: 42px; }
.send-btn:hover { transform: none; filter: brightness(1.08); }
.cv-bigbtn { border-radius: 14px !important; background: var(--graphite) !important; border: 1px solid var(--seam) !important; }
.cv-bigbtn.primary { background: var(--accent) !important; border-color: transparent !important; }
.scroll-down { background: var(--graphite) !important; border: 1px solid var(--seam) !important; }
.cv-empty { background: none !important; }
.cv-empty .logo { animation: none; opacity: .9; }
.cv-empty h2 { font-weight: 700; letter-spacing: -.02em; }

/* =================================================================== controls */
.btn { border-radius: var(--r-btn); font-weight: 600; height: 42px; }
.btn::after { display: none !important; }
.btn-primary { background: var(--accent) !important; box-shadow: none !important; color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-green { background: #21a35a !important; box-shadow: none !important; }
.btn-light { background: var(--text) !important; color: var(--void) !important; box-shadow: none !important; }
.btn { background: var(--graphite-2); }
.btn:hover { background: color-mix(in srgb, var(--graphite-2) 80%, var(--text) 8%); }
.btn-ghost { background: transparent; }
.btn-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.btn-xl { height: 52px; border-radius: 14px; }
.btn-sm { height: 34px; border-radius: 10px; }
.btn-xs { height: 28px; border-radius: 8px; }
.chip { border-radius: 999px; background: var(--graphite) !important; border: 1px solid transparent !important; color: var(--text-2); }
.chip:hover { color: var(--text); }
.chip.active { background: var(--text) !important; color: var(--void) !important; }
.seg { background: var(--graphite) !important; border: 0 !important; border-radius: 12px; }
.seg button { border-radius: 9px; }
.seg button.active { background: var(--graphite-2) !important; color: var(--text) !important; box-shadow: none !important; }
html[data-theme="light"] .seg button.active { background: #fff !important; box-shadow: 0 1px 2px rgba(20, 20, 40, .12) !important; }
.input, .textarea { border-radius: var(--r-btn); background: var(--graphite) !important; border-color: transparent !important; }
.input:focus, .textarea:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; box-shadow: none !important; }
.switch input:checked + span { background: var(--accent); }
.icon-btn.glassy { background: var(--graphite); border-color: transparent; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* tone-on-tone icon tiles instead of a rainbow */
.ico-sq { box-shadow: none !important; border-radius: 10px; background: color-mix(in srgb, var(--h, #8d8c93) 16%, var(--graphite)) !important; color: var(--h, #8d8c93) !important; }
.ico-sq.c-blue { --h: #5b9bff; } .ico-sq.c-indigo { --h: #8f8bff; } .ico-sq.c-green { --h: #3ccf6e; } .ico-sq.c-orange { --h: #f5a524; }
.ico-sq.c-purple { --h: #b78cff; } .ico-sq.c-sky { --h: #38b6f0; } .ico-sq.c-gray { --h: #a3a2aa; } .ico-sq.c-gold { --h: #e8b931; }
.ico-sq.c-ruby { --h: #e0314b; } .ico-sq.c-pink { --h: #f0648a; } .ico-sq.c-teal { --h: #2cc6b0; } .ico-sq.c-red { --h: #f05050; } .ico-sq.c-slate { --h: #9aa3b2; }
html[data-theme="light"] .ico-sq { background: color-mix(in srgb, var(--h, #8d8c93) 13%, #fff) !important; }
.ico-sq .ruby svg, .ico-sq svg[class*="i-ruby"] { filter: none; }

/* grouped lists */
.lgroup { border-radius: var(--r-card); background: var(--graphite); border: 0; }
.li { border-bottom-color: var(--seam); min-height: 50px; }
.li .li-label { font-weight: 550; }
.fgroup { border-radius: var(--r-card); background: var(--graphite); border: 0; }
.fgroup .frow { border-bottom-color: var(--seam); }
.section-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.pick-item:hover { background: var(--hover); }
.pick-item.sel { background: var(--accent-soft); }

/* =================================================================== overlays */
.modal { background: var(--basalt) !important; border: 1px solid var(--seam) !important; border-radius: 22px !important; box-shadow: var(--shadow) !important; }
.modal-head { min-height: 56px; padding: 10px 12px 4px 18px; }
.modal-head .mh-title { text-align: left; font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; }
.modal-head .icon-btn.ph { display: none; }
.modal-head .icon-btn.glassy { background: var(--graphite); border: 0; color: var(--text-2); }
.modal-head .icon-btn.glassy:hover { color: var(--text); }
.profile-modal .modal-head .icon-btn.glassy { background: rgba(0, 0, 0, .32) !important; color: #fff; }
.modal-foot .btn { height: 46px; }
@media (max-width: 560px) { .modal { border-radius: 22px 22px 0 0 !important; border-bottom: 0 !important; } }
.ctx, .popover, .tip-pop, .toast { background: var(--graphite) !important; border: 1px solid var(--seam) !important; box-shadow: var(--shadow) !important; border-radius: 14px; }
.ctx-item { border-radius: 9px; padding: 9px 11px; }
.ctx-item:hover { background: var(--hover); }
.ctx-item .i { color: var(--text-2); }
.toast { border-radius: 12px; font-weight: 550; }
.toast.success .i { color: #3ccf6e; }

/* drawer: quiet monochrome menu, ruby only for the balance */
.drawer { left: 0 !important; top: 0 !important; bottom: 0 !important; width: 312px; border-radius: 0 !important; border: 0 !important; border-right: 1px solid var(--seam) !important; background: var(--basalt) !important; padding: 16px 12px; }
.drawer .me-card { background: transparent; border: 0; padding: 8px 8px 16px; border-bottom: 1px solid var(--seam); border-radius: 0; margin-bottom: 10px; }
.drawer .me-card b { font-size: 1.05rem; }
.drawer .lgroup { background: transparent; border-radius: 0; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--seam); }
.drawer .lgroup:last-of-type { border-bottom: 0; }
.drawer .li { border: 0; min-height: 44px; border-radius: 10px; padding: 6px 10px; }
.drawer .li:hover { background: var(--hover); }
.drawer .ico-sq { background: transparent !important; color: var(--text-2) !important; width: 26px; }
.drawer .li .li-chev { display: none; }
.drawer .li .li-label { font-weight: 550; }
.drawer .li[data-go="rubies"] .ico-sq { color: var(--accent) !important; }
.drawer .li[data-go="admin"] .ico-sq { color: #f5a524 !important; }

/* profile & channel */
.pf-card, .pf-channel { background: var(--graphite); border: 0; border-radius: var(--r-card); }
.pf-card .pf-row { border-bottom-color: var(--seam); }
.pf-cta .btn { height: 46px; }
.pf-act { background: var(--graphite); border: 0; border-radius: 14px; }
.pf-act .i { color: var(--accent); }
.tabs { background: transparent; border: 0; border-bottom: 1px solid var(--seam); border-radius: 0; margin: 14px 14px 0; padding: 0; }
.tab { border-radius: 0; height: 42px; }
.tab-ink { top: auto !important; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent) !important; box-shadow: none !important; }
.un-link { color: var(--accent) !important; }
html[data-theme="dark"] .un-link, html[data-theme="dark"] .num-link { color: color-mix(in srgb, var(--accent) 70%, #fff) !important; }
.status-pill { border-color: var(--seam); }

/* gifts & shop */
.gift-card { background: var(--graphite); border: 0; border-radius: 16px; }
.gift-card:hover { transform: translateY(-2px); box-shadow: none; }
.gift-card .gp { background: var(--graphite-2); }
.tb-balance { background: var(--graphite); border: 0; border-radius: 10px; }
.gsend-to, .gsend-anon { background: var(--graphite); border: 0; border-radius: 14px; }

/* wallet & rating: same matte surfaces instead of their own colour worlds */
.miniapp { background: var(--basalt) !important; border: 1px solid var(--seam) !important; color: var(--text) !important; border-radius: 22px; }
.ma-head .icon-btn { background: var(--graphite) !important; color: var(--text-2) !important; }
.ma-act { background: var(--graphite) !important; border: 0 !important; color: var(--text) !important; border-radius: 16px; }
.ma-act .c { background: color-mix(in srgb, var(--accent) 16%, var(--graphite-2)) !important; color: var(--accent) !important; }
.ma-note { background: var(--graphite) !important; color: var(--text-2) !important; }
.tx { border-bottom-color: var(--seam) !important; }
.tx .ti { background: var(--graphite) !important; }
.tx .ti .i { color: var(--text-2) !important; }
.tx .tb small { color: var(--text-3); opacity: 1; }
.ma-balance .val { letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.empty-note { color: var(--text-3); }
.rating-modal { background: var(--basalt) !important; color: var(--text) !important; }
.rt-bar { background: var(--graphite) !important; border: 0 !important; }
.rt-bar .fill { background: var(--accent) !important; }
.rt-item .ri { background: var(--graphite) !important; color: var(--text-2) !important; }
.rt-tag { background: var(--graphite-2) !important; color: var(--text-2) !important; }
.rating-modal .lgroup { background: var(--graphite) !important; border: 0 !important; }

/* admin */
.admin-banner { background: color-mix(in srgb, #f5a524 10%, var(--graphite)); }
.adm-row:hover { background: var(--hover); }
.adm-log { background: var(--graphite); }

/* auth */
.auth-screen { background: var(--void); }
.auth-card, .blocked-card { background: var(--basalt) !important; border: 1px solid var(--seam) !important; border-radius: 24px !important; }
.auth-logo { animation: none; filter: none; width: 64px; height: 64px; }
.auth-card h1 { font-size: 1.7rem; font-weight: 750; letter-spacing: -.03em; }
.ava-picker .cam { background: var(--accent); border-color: var(--basalt); }

/* small things */
.premium-star { filter: none !important; }
.verified { color: #5b9bff; }
.adm-pill.amber { background: color-mix(in srgb, #f5a524 16%, transparent); }
.paid-bar { background: color-mix(in srgb, var(--accent) 10%, var(--graphite)); border: 0; }
.date-sep, .sys-pill, .cl-time, .b-meta { font-feature-settings: "tnum"; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* fixes after review */
.cl-item { animation: none !important; }
.ce:focus-visible, [contenteditable]:focus-visible { outline: none; }
.st-online, .cv-sub.st-online { color: #4cc97a !important; }
html[data-theme="light"] .st-online { color: #1f9d55 !important; }
.status-pill.st-online { color: #4cc97a !important; }
.typing, .cl-preview .typing { color: #4cc97a !important; }

/* phones: nothing gets highlighted or selected by a long press — copying goes through the message menu */
html.touch body, html.touch .bubble, html.touch .b-text, html.touch button, html.touch .li, html.touch .cl-item, html.touch .ctx { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none; }
html.touch input, html.touch textarea, html.touch [contenteditable="true"] { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default; }
html.touch img { -webkit-user-drag: none; -webkit-touch-callout: none; }
button, .btn, .icon-btn, .chip, .tab, .ftab, .seg button, .ctx-item, .pf-act, .ma-act { -webkit-user-select: none; user-select: none; }
.hols-link { cursor: pointer; font-weight: 600; }
.auc-grid > .empty-note, .num-grid > .empty-note, .gift-grid > .empty-note { grid-column: 1 / -1; }

/* toasts: phones — full-width banner at the top; desktop — stack on the right side */
.toasts { left: auto !important; right: 20px; top: 20px; bottom: auto !important; transform: none !important; align-items: flex-end; width: min(380px, calc(100vw - 40px)); }
.toast { width: 100%; max-width: none; animation: toastSide .32s var(--ease) both; }
.toast.out { animation: toastSideOut .22s ease both; }
@keyframes toastSide { from { opacity: 0; transform: translateX(24px); } }
@keyframes toastSideOut { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 860px) {
  .toasts { left: 8px !important; right: 8px; top: max(8px, env(safe-area-inset-top)); width: auto; align-items: stretch; }
  .toast { border-radius: 14px; padding: 12px 14px; animation-name: toastDown; }
  .toast.out { animation-name: toastUp; }
  @keyframes toastDown { from { opacity: 0; transform: translateY(-110%); } }
  @keyframes toastUp { to { opacity: 0; transform: translateY(-110%); } }
}

/* premium: a glowing white star without a background */
.premium-star { color: #fff !important; display: inline-flex; vertical-align: -2px; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 0 8px rgba(255, 255, 255, .35)) !important; }
html[data-theme="light"] .premium-star { color: #1b1b20 !important; filter: drop-shadow(0 0 3px rgba(20, 20, 30, .25)) !important; }
.mrow.out .premium-star, .pf-hero .premium-star { color: #fff !important; }
.bdg.ico { display: inline-grid; place-items: center; }
.bdg.prem { color: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)) drop-shadow(0 0 10px rgba(255, 255, 255, .3)); }
html[data-theme="light"] .bdg.prem { color: #1b1b20; filter: drop-shadow(0 0 3px rgba(20, 20, 30, .2)); }
.bdg.prem svg { width: 26px; height: 26px; }
.gc-cur.prem, .premium-hero .star, .prem-fly { color: #fff; }
.gc-cur.prem svg, .prem-fly svg { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)) drop-shadow(0 0 28px rgba(255, 255, 255, .45)) !important; }
.premium-hero .star { background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%) !important; animation: none; }
.premium-hero .star svg { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)) drop-shadow(0 0 30px rgba(255, 255, 255, .4)); }
html[data-theme="light"] .premium-hero .star { color: #1b1b20; background: radial-gradient(circle, rgba(20, 20, 30, .08), transparent 68%) !important; }
html[data-theme="light"] .premium-hero .star svg { filter: none; }
.ico-sq.c-gold .i-premiumLine, .drawer [data-go="premium"] .ico-sq { color: var(--text) !important; }
/* moderator badge next to the name */
.mod-badge { display: inline-flex; vertical-align: -3px; margin-left: 1px; }
.mod-badge svg { width: 17px; height: 17px; }
.pf-badges .bdg, .pf-badges span.bdg { background: transparent !important; border-radius: 0 !important; }

/* pinned gifts around the avatar (Telegram style) */
.pf-ava-zone { position: relative; display: inline-block; }
.pf-hero .pf-ava-zone, .pf-top .pf-ava-zone { margin: 0 auto; }
.pf-pin { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; padding: 0; background: none; border: 0; cursor: pointer;
  transform: translate(var(--dx), var(--dy)); animation: pinFloat 4.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); z-index: 2; }
.pf-pin .gift-img { width: 58px; height: 58px; }
.pf-pin:hover { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)) brightness(1.08); }
@keyframes pinFloat { 0%, 100% { transform: translate(var(--dx), var(--dy)); } 50% { transform: translate(var(--dx), calc(var(--dy) - 5px)); } }
html.touch .pf-pin { animation: none; }
@media (max-width: 380px) { .pf-pin { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .pf-pin .gift-img { width: 48px; height: 48px; } }
/* a channel can wear an upgraded gift as its header background */
.pf-top.worn { position: relative; overflow: hidden; border-radius: 0 0 28px 28px; background: radial-gradient(90% 70% at 50% 35%, var(--c1), var(--c2)); padding-bottom: 18px; color: #fff; }
.pf-top.worn .nft-pattern { inset: -10%; }
.pf-top.worn .nft-pattern .sym { opacity: .22 !important; }
.pf-top.worn > *:not(.nft-pattern) { position: relative; }
.pf-top.worn .pf-name { color: #fff; }
.pf-top.worn .status-pill { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .22); color: #fff; }
.pf-top .pf-ava-zone .pf-ava { display: grid; }

/* pin picker («вокруг аватарки») */
.pin-prev { display: flex; justify-content: center; padding: 70px 0 64px; margin-bottom: 8px; border-radius: 20px; background: var(--bg-2, rgba(255,255,255,.04)); }
.pin-prev .pf-pin { pointer-events: none; }
.pin-cell { position: relative; cursor: pointer; border-radius: 18px; transition: transform .15s; }
.pin-cell .gift-card { pointer-events: none; }
.pin-cell.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-cell:active { transform: scale(.96); }
.pin-no { position: absolute; top: 6px; left: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/22px inherit; text-align: center; }
.pin-modal .modal-foot { display: flex; gap: 10px; }
.pin-modal .modal-foot .btn { flex: 1; }
.pin-cell .pin-mark { display: none; }