/* AudioHub Plus: значок, окна покупки и подарка, анимация активации */

/* ---------- значок «Искра»: у каждого уровня своя звезда (1 мес · 3 мес · 6 мес · год) ---------- */
.pl-badge { --s: 18px; --k: 1; --b1: #2b2b32; --b2: #09090b; --r1: #71717a; --r2: #26262c; --glow: 0;
  display: inline-flex; width: calc(var(--s) * var(--k)); height: calc(var(--s) * var(--k)); flex: none; position: relative;
  margin: calc(var(--s) * (1 - var(--k)) / 2) calc(var(--s) * (1 - var(--k)) / 4); vertical-align: calc(-0.2em - var(--s) * (var(--k) - 1) / 2);
  filter: drop-shadow(0 0 calc(var(--s) * .22) rgba(255, 255, 255, var(--glow))) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.pl-badge svg { display: block; overflow: visible; }
.pl-badge.t0 { --glow: 0; }
.pl-badge.t1 { --glow: .18; }
.pl-badge.t2 { --glow: .38; }
.pl-badge.t3 { --glow: .6; }
.pl-badge .pl-orb { transform-box: view-box; transform-origin: 12px 12px; animation: plOrb 4s linear infinite; }
@keyframes plOrb { to { transform: rotate(360deg); } }
body.no-anim .pl-badge .pl-orb { animation: none; }

.pc-body h2 .pl-badge { margin-left: 4px; }
.pl-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border-2); width: 100%; }
.pl-chip em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #a1a1aa; }
.pl-chip.t2 em { color: #d4d4d8; } .pl-chip.t3 em { color: #fff; }
.pl-chip div { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.pl-chip b { font-size: 13px; } .pl-chip small { color: var(--muted); font-size: 12px; }

/* ---------- закрытые поля ---------- */
.pl-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #1a1303; background: linear-gradient(135deg, #fde68a, #f5b942); vertical-align: 1px; }
.field.locked, .swatches.locked { position: relative; }
.field.locked > :not(span):not(.pl-tag), .swatches.locked > * { opacity: .45; }
.field.locked, .swatches.locked { cursor: pointer; }
.pl-promo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border-radius: 14px; border: 1px solid rgba(245, 185, 66, .35); background: linear-gradient(135deg, rgba(245, 185, 66, .12), rgba(244, 114, 182, .08)); }
.pl-promo > div:first-child { color: #f5b942; } .pl-promo > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pl-promo small { color: var(--muted); }

/* ---------- окно покупки ---------- */
.modal.pl-modal-box { max-width: 460px; width: calc(100vw - 24px); }
.pl-modal { display: flex; flex-direction: column; gap: 14px; padding: 8px 8px 14px; }
.pl-modal .pl-perks { grid-template-columns: 1fr 1fr; gap: 6px; }
.pl-modal .pl-perks li { padding: 7px 10px; gap: 9px; } .pl-modal .pl-perks li b { font-size: 13px; } .pl-modal .pl-perks li small { display: none; }
@media (max-width: 460px) { .pl-modal .pl-perks { grid-template-columns: 1fr; } }
.pl-hero { text-align: center; padding: 18px 12px 4px; background: radial-gradient(circle at 50% 0, rgba(245, 185, 66, .18), transparent 65%); border-radius: 16px; }
.pl-hero h2 { margin: 8px 0 2px; font-size: 24px; } .pl-hero p { margin: 0; color: var(--text-2); }
.pl-hero-badge { display: inline-flex; color: #f5b942; }
.pl-hero-badge .pl-badge { animation: plFloat 3.2s ease-in-out infinite; }
@keyframes plFloat { 50% { transform: translateY(-5px) rotate(-3deg); } }
.pl-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-perks li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--bg-input); }
.pl-perks li > .ic { color: #f5b942; flex: none; } .pl-perks li div { display: flex; flex-direction: column; line-height: 1.3; }
.pl-perks small { color: var(--muted); font-size: 12.5px; }
.pl-perks.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pl-active { padding: 10px 12px; border-radius: 12px; background: rgba(35, 165, 90, .12); color: #86efac; font-size: 14px; }
.pl-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pl-opt input, .pl-friend input { position: absolute; opacity: 0; pointer-events: none; }
.pl-opt-in { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg-input); cursor: pointer; transition: .15s; text-align: center; }
.pl-opt-in b { font-size: 14px; } .pl-opt-in small { color: var(--muted); }
.pl-opt input:checked + .pl-opt-in { border-color: #fff; background: #fff; color: #000; box-shadow: none; } .pl-opt input:checked + .pl-opt-in small { color: #52525b; }
.pl-friend input:checked + .pl-friend-in { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) inset; }
.pl-opt, .pl-friend { position: relative; display: block; }
.pl-friends { display: grid; gap: 6px; max-height: 190px; overflow: auto; }
.pl-friend-in { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg-input); cursor: pointer; }
.pl-friend-in span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .pl-friend-in small { color: var(--muted); }
.btn.primary.pl-buy { width: 100%; justify-content: center; background: #fff !important; color: #000 !important; font-weight: 800; box-shadow: none; }
.btn.primary.pl-buy:hover { background: #e4e4e7 !important; }
.pl-buy[disabled] { opacity: .5; }
.pl-legal { margin: 0; text-align: center; font-size: 12px; color: var(--faint); } .pl-legal a { color: var(--muted); }
.center { text-align: center; }

/* ---------- раздел настроек ---------- */
.pl-card { display: flex; gap: 18px; align-items: center; padding: 20px; border-radius: 18px; border: 1px solid var(--border-2); background: var(--bg-panel); margin-bottom: 8px; }
.pl-card.on { border-color: rgba(245, 185, 66, .5); background: radial-gradient(circle at 0 0, rgba(245, 185, 66, .16), transparent 60%), var(--bg-panel); }
.pl-card-main { flex: 1; min-width: 0; } .pl-card-main h2 { margin: 0 0 4px; } .pl-card-main p { margin: 0 0 6px; color: var(--text-2); }
.pl-card-main .row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.pl-tier-ic { height: 72px; display: grid; place-items: center; }
.pl-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; background: var(--bg-input); border: 1px solid transparent; text-align: center; }
.pl-tier.cur { border-color: #f5b942; } .pl-tier small { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .pl-card { flex-direction: column; text-align: center; } .pl-opts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- анимация активации: повышение ранга (тёмная, с бликами) ---------- */
/* ---------- окно активации Plus: «карта подписчика» ---------- */
.pl-cc { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; color: #fff; overflow-y: auto;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(10px); animation: plCcFade .35s ease both; }
.pl-cc.out { animation: plCcOut .4s ease both; }
@keyframes plCcFade { from { opacity: 0; } } @keyframes plCcOut { to { opacity: 0; } }
.pl-cc-in { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(520px, 100%); perspective: 1200px; margin: auto; }
.pl-cc-card { position: relative; width: min(420px, 100%); aspect-ratio: 1.6; border-radius: 24px; padding: 24px 26px; text-align: left; overflow: hidden;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 45%, #0b0b0d 100%); box-shadow: 0 0 0 1px var(--edge), 0 40px 100px rgba(0, 0, 0, .8);
  --c1: #2b2b31; --c2: #141417; --edge: rgba(255, 255, 255, .12);
  animation: plCcFlip 1.1s .1s cubic-bezier(.2, .8, .2, 1) both, plCcFloat 5s 1.4s ease-in-out infinite; transform-style: preserve-3d; }
.pl-cc-card.t1 { --c1: #3a3a42; --c2: #18181c; --edge: rgba(255, 255, 255, .18); }
.pl-cc-card.t2 { --c1: #4a4a54; --c2: #1d1d22; --edge: rgba(255, 255, 255, .26); }
.pl-cc-card.t3 { --c1: #5a5a66; --c2: #222228; --edge: rgba(255, 255, 255, .4); }
@keyframes plCcFlip { 0% { opacity: 0; transform: rotateY(-110deg) rotateX(14deg) scale(.7); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes plCcFloat { 50% { transform: translateY(-6px) rotateX(3deg) rotateY(-3deg); } }
.pl-cc-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px); }
.pl-cc-sheen { position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; transform: rotate(20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), rgba(180, 200, 255, .12), transparent); animation: plCcSheen 3.6s 1s ease-in-out infinite; }
@keyframes plCcSheen { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.pl-cc-row { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pl-cc-row .pl-badge { margin: 0; vertical-align: top; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.pl-cc-chip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #d4d4d8, #71717a); opacity: .85; position: relative; }
.pl-cc-chip::after { content: ''; position: absolute; inset: 8px 10px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 3px; }
.pl-cc-name { position: absolute; left: 26px; right: 26px; bottom: 56px; font: 700 clamp(18px, 5.5vw, 24px)/1.2 var(--display, 'Unbounded', sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cc-meta { position: absolute; left: 26px; right: 26px; bottom: 24px; display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; font-size: clamp(9.5px, 2.7vw, 12px); font-weight: 700; letter-spacing: clamp(.04em, .6vw, .12em); text-transform: uppercase; color: #a1a1aa; }
.pl-cc small { margin-top: 30px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8b8b95; animation: plCcUp .5s .9s both; }
.pl-cc h2 { margin: 8px 0 0; font: 700 clamp(20px, 5vw, 26px)/1.2 var(--display, 'Unbounded', sans-serif); animation: plCcUp .5s 1s both; }
.pl-cc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.pl-cc-chips li { font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 999px; background: #141418; box-shadow: inset 0 0 0 1px #24242a; color: #d4d4d8;
  animation: plCcUp .4s calc(1.1s + var(--i) * .04s) both; }
.pl-cc-go { margin-top: 22px; width: 240px; max-width: 100%; height: 46px; border: 0; border-radius: 14px; background: #fff; color: #000; font-weight: 800; font-size: 15px; font-family: inherit; cursor: pointer; animation: plCcUp .5s 1.4s both; }
.pl-cc-go:hover { background: #e4e4e7; }
@keyframes plCcUp { from { opacity: 0; transform: translateY(16px); } }
body.no-anim .pl-cc, body.no-anim .pl-cc * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
body.lite .pl-cc-sheen { display: none; }

/* ---------- лендинг: цена и ссылки ---------- */
.ld-plus { padding: 40px 24px; } .ld-plus-in { max-width: 820px; margin: 0 auto; text-align: center; padding: 40px 28px; border-radius: 28px; border: 1px solid rgba(245, 185, 66, .3); background: radial-gradient(circle at 50% 0, rgba(245, 185, 66, .16), transparent 70%), #0b0b0d; }
.ld-plus-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #1a1303; background: linear-gradient(135deg, #fde68a, #f5b942); }
.ld-plus-in h2 { margin: 14px 0 10px; font-size: clamp(24px, 4vw, 34px); } .ld-plus-in p { color: #a1a1aa; max-width: 640px; margin: 0 auto 14px; }
.ld-plus-price { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 18px 0 8px; } .ld-plus-price b { font-size: 44px; color: #fff; } .ld-plus-price span { color: #a1a1aa; }
.ld-plus-note { font-size: 13px; }
.ld-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; } .ld-legal a { margin: 0; font-weight: 500; color: #a1a1aa; }
.ld-foot .ld-legal + a { margin-left: 0; }
@media (max-width: 760px) { .ld-legal { margin-left: 0; width: 100%; } }

/* ---------- панель владельца ---------- */
.dn-admin-row select { width: 100%; height: 44px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--bg-input); color: var(--text); font: inherit; }

/* ---------- карточка значка Plus: «Подписчик с …» ---------- */
.pl-badge.clickable { cursor: pointer; transition: transform .15s var(--ease, ease); }
.pl-badge.clickable:hover { transform: scale(1.12); }
/* ---------- мини-карта подписчика по нажатию на значок ---------- */
.pl-info { position: fixed; z-index: 90; width: 300px; aspect-ratio: 1.6; padding: 18px 20px; border-radius: 18px; text-align: left; color: #fff;
  --c1: #2b2b31; --c2: #141417; --edge: rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 45%, #0b0b0d 100%); box-shadow: 0 0 0 1px var(--edge), 0 20px 60px rgba(0, 0, 0, .85);
  transform-origin: var(--ax, 50%) 100%; animation: plInfoIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.pl-info.below { transform-origin: var(--ax, 50%) 0; }
.pl-info.t1 { --c1: #3a3a42; --c2: #18181c; --edge: rgba(255, 255, 255, .18); }
.pl-info.t2 { --c1: #4a4a54; --c2: #1d1d22; --edge: rgba(255, 255, 255, .26); }
.pl-info.t3 { --c1: #5a5a66; --c2: #222228; --edge: rgba(255, 255, 255, .4); }
@keyframes plInfoIn { 0% { opacity: 0; transform: perspective(800px) rotateX(-55deg) translateY(10px) scale(.85); } 100% { opacity: 1; transform: none; } }
.pl-info.out { animation: popoutOut .15s forwards; }
.pl-info-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pl-info-clip::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px); }
.pl-info-clip i { position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), rgba(180, 200, 255, .12), transparent); animation: plCcSheen 3.6s .35s ease-in-out infinite; }
.pl-info-row { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pl-info-row .pl-badge { margin: 0; vertical-align: top; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.pl-info-brand { flex: 1; margin-left: 12px; font: 800 12px/1 var(--display, 'Unbounded', sans-serif); letter-spacing: .08em; color: #e4e4e7; }
.pl-info-row .pl-cc-chip { width: 34px; height: 25px; border-radius: 6px; }
.pl-info-row .pl-cc-chip::after { inset: 6px 8px; }
.pl-info-name { position: absolute; left: 20px; right: 20px; bottom: 42px; font: 700 18px/1.2 var(--display, 'Unbounded', sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-info-meta { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a1a1aa; }
.pl-info.t3 .pl-info-meta b { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .55); }
.pl-info-meta b { font-weight: 800; color: #d4d4d8; }
.pl-info-arrow { position: absolute; left: var(--ax, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: #0d0d10; box-shadow: 1px 1px 0 var(--edge); }
.pl-info.below .pl-info-arrow { bottom: auto; top: -6px; transform: rotate(225deg); background: var(--c1); }
body.lite .pl-info-clip i { display: none; }

/* ---------- значок «Поддержал проект»: белое сердце на тёмном квадрате ---------- */
.sup-heart, .sup-badge { display: inline-grid; place-items: center; flex: none; color: #fff !important; background: #141418; border: 1px solid #2e2e36; }
.sup-heart { width: 17px; height: 17px; border-radius: 5px; margin-left: 5px; vertical-align: -3px; }
.sup-badge { width: 26px; height: 26px; border-radius: 8px; }
.sup-heart svg, .sup-badge svg { fill: currentColor; }
.sup-heart svg { width: 11px; height: 11px; }
.role-glyph { display: inline-flex; margin-left: 5px; vertical-align: -2px; color: var(--rc); }
.role-glyph svg { fill: currentColor; fill-opacity: .25; }
.blk-ic { display: inline-flex; margin-left: 6px; vertical-align: -1px; color: var(--red, #ef4444); }

.vs-ic { display: inline-flex; color: var(--red, #ef4444); } .vs-ic.srv { color: #f59e0b; }
.rail-voice.mine { background: var(--green, #22c55e); color: #000; }

.pl-wait { padding: 24px; text-align: center; max-width: 420px; }
.pl-wait h2 { margin: 0 0 8px; } .pl-wait p { color: var(--muted, #8b8d96); margin: 0 0 18px; line-height: 1.5; }
.pl-wait-btns { display: grid; gap: 8px; }

/* ---------- уровни сервера ---------- */
.lv-card { display: flex; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--border, #26262c); border-radius: 14px; background: rgba(255,255,255,.03); margin: 16px 0; }
.lv-big { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; font-weight: 900; background: #fff; color: #000; flex: none; }
.lv-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); margin: 8px 0 6px; overflow: hidden; } .lv-bar i { display: block; height: 100%; background: #fff; border-radius: 6px; transition: width .4s; }
.lv-list { display: grid; gap: 8px; } .lv-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border, #26262c); border-radius: 12px; }
.lv-row small { display: block; } .lv-row.have { opacity: .75; } .lv-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); font-weight: 800; flex: none; }
.lv-ok { color: var(--green, #22c55e); font-size: 13px; font-weight: 600; }
.gs-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.gs-font { padding: 10px 8px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--border, #26262c); color: inherit; cursor: pointer; font-size: 15px; }
.gs-font.on { border-color: #fff; background: rgba(255,255,255,.12); }
.gs-color { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .gs-color input { width: 38px; height: 28px; border: 0; background: none; padding: 0; }
/* имя со стилем Plus */
.ns { font-weight: inherit; letter-spacing: normal; }
/* читаемость стилизованных имён: тонкая тень-обводка, рукописный шрифт крупнее */
.ns-none, .ns-highlight { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.ns-gradient, .ns-prism { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .65)); padding-right: .04em; }
.ns[style*="Caveat"] { font-size: 1.22em; line-height: 1; }
.ns[style*="Unbounded"] { font-size: .9em; }
.ns[style*="Mono"] { font-size: .95em; }
.ns-gradient, .ns-prism { background: linear-gradient(90deg, var(--g)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.ns-prism { background-size: 200% 100%; animation: nsPrism 6s linear infinite; }
@keyframes nsPrism { to { background-position: 200% 0; } }
.ns-neon { color: color-mix(in srgb, var(--c1) 35%, #fff) !important; text-shadow: 0 0 3px var(--c1), 0 0 10px var(--c1); }
.ns-cartoon { color: var(--c1) !important; text-shadow: 1.5px 1.5px 0 var(--c2), 0 0 2px rgba(0,0,0,.6); }
.ns-highlight { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c1) 55%, transparent) 62%); }
.ns-gummy { color: var(--c1) !important; text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 2px var(--c2); letter-spacing: .02em; }

/* фон сервера (5 уровень) */
body.has-gbg .side, body.has-gbg #side, body.has-gbg .main, body.has-gbg #main, body.has-gbg .chat, body.has-gbg .members {
  background: color-mix(in srgb, var(--gbg) 26%, #050506) !important; }

/* ---------- темы приложения ---------- */
button.theme-card { text-align: left; color: inherit; cursor: pointer; } .theme-cards { flex-wrap: wrap; }
.tc-prev { display: flex; gap: 4px; padding: 8px; border-radius: 8px; height: 46px; align-items: stretch; } .tc-prev i { flex: 1; border-radius: 4px; }


.gs-color { white-space: nowrap; }

/* ---------- демонстрация экрана ---------- */
.tile-eye { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.55); font-style: normal; font-size: 12px; }
.tile.off { display: grid; place-items: center; background: rgba(255,255,255,.04); }
.tile-offbox { display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--muted, #8b8d96); padding: 20px; }
.gs-fonts.seg { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; cursor: pointer; }
.toggle-row { justify-content: flex-start; border-bottom: 0; padding: 8px 0; }

/* ================= темы приложения ================= */
/* светлая тема — «перевёрнутая» тёмная; картинки, аватарки, баннеры и образцы цвета возвращаются в исходные цвета */
html.th-light { filter: invert(1) hue-rotate(180deg); }
html.th-light :is(img, video, canvas, picture, input[type=color]),
html.th-light [style*="background-image"],
html.th-light .av[style*="gradient"],
html.th-light [class*="banner"],
html.th-light :is(.th-sw:not(.create), .th-col, .th-chip, .th-sv, .th-hue, .th-def, .swatches button, .sw-custom, .tc-prev, .pl-badge, .th-promo-art) { filter: invert(1) hue-rotate(180deg); }
html.th-light :is([class*="banner"], [style*="background-image"], .av[style*="gradient"]) :is(img, video, canvas) { filter: none; }
html.th-light .av[style*="gradient"] > .st { filter: invert(1) hue-rotate(180deg); }
/* градиентные темы: градиент на фоне, основные панели полупрозрачные */
html.th-grad body, html.th-grad .app { background: var(--th-grad) !important; }
/* Цветная тема окрашивает фон всего приложения: панели полупрозрачные, сквозь них виден цвет/градиент темы */
html.th-grad :is(.side, .main, .aside) { background: color-mix(in srgb, var(--bg-side) 64%, transparent) !important; backdrop-filter: blur(18px) saturate(1.15); border-color: color-mix(in srgb, #fff 8%, transparent) !important; }
html.th-grad :is(.members, .chat, .side-content, .messages, .vc-stage-col, .stage, .dm-call) { background: transparent !important; }
html.th-grad :is(.titlebar, .rail) { background: transparent !important; }
html.th-grad :is(.settings-layer, .set-side, .set-main) { background: color-mix(in srgb, var(--bg) 70%, transparent) !important; }
html.th-grad .settings-layer { background: var(--th-grad) !important; }
html.th-grad .set-side { background: color-mix(in srgb, var(--bg-side) 55%, transparent) !important; }
html.th-grad .set-main { background: color-mix(in srgb, var(--bg) 58%, transparent) !important; }
/* читаемость на цветных темах: текст контрастнее, второстепенный текст не сливается с фоном (как в Discord) */
html.th-grad { --text: #ffffff; --text-2: #e6e6ec; --muted: #b9b9c4; --faint: #8e8e99; }
html.th-grad :is(.msg-time, .ch-name, .channel, .member small, .m-meta small, .muted, small) { text-shadow: 0 1px 1px color-mix(in srgb, var(--bg) 60%, transparent); }
html.th-grad .main-head { background: color-mix(in srgb, var(--bg) 40%, transparent) !important; }
.sec-sub { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.th-defaults { display: flex; gap: 12px; margin: 8px 0 20px; }
.th-def { width: 46px; height: 46px; border-radius: 12px; background: var(--c); border: 2px solid var(--border-2); display: grid; place-items: center; color: transparent; transition: transform .15s; }
.th-def:hover { transform: scale(1.06); } .th-def.on { border-color: var(--accent); } .th-def.on svg { color: #fff; mix-blend-mode: difference; }
.th-promo { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border); margin: 6px 0 20px; }
.th-promo small { display: block; color: var(--muted); margin-top: 4px; }
.th-promo-art { display: grid; grid-template-columns: repeat(3, 12px); gap: 4px; padding: 10px; border-radius: 10px; background: var(--bg-input); }
.th-promo-art i { height: 30px; border-radius: 4px; } .th-promo-art i:nth-child(1) { background: #7c5cff; } .th-promo-art i:nth-child(2) { background: #22d3ee; } .th-promo-art i:nth-child(3) { background: #f472b6; }
.th-colors { padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-panel); }
.th-colors-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 10px; }
.th-sw { height: 46px; border-radius: 12px; border: 2px solid transparent; display: grid; place-items: center; position: relative; color: transparent; transition: transform .15s; }
.th-sw:hover { transform: scale(1.05); } .th-sw.on { border-color: var(--accent); } .th-sw.on svg { color: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.th-sw.create { background: var(--bg-input); border-color: var(--border-2); color: var(--text); }
.th-sw.create em { position: absolute; top: -8px; left: -4px; font-size: 9px; font-style: normal; font-weight: 800; background: var(--accent); color: var(--bg); border-radius: 6px; padding: 1px 5px; }
/* панель «Настройте свою тему» */
.th-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100vw; z-index: 130; background: var(--bg-panel); border-left: 1px solid var(--border-2); box-shadow: -20px 0 60px rgba(0,0,0,.35); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .28s var(--ease); }
.th-drawer.in { transform: none; }
.th-dr-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 6px; font-size: 16px; }
.th-dr-body { flex: 1; overflow: auto; padding: 0 20px 16px; }
.th-dr-foot { display: grid; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--border); }
.th-lab { display: block; margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.th-mode { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-input); border-radius: 10px; padding: 3px; }
.th-mode button { padding: 9px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); } .th-mode button.on { background: var(--bg-active); color: var(--text); }
.th-sv { position: relative; height: 150px; border-radius: 10px; touch-action: none; cursor: crosshair; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h), 100%, 50%)); }
.th-hue { position: relative; height: 14px; border-radius: 8px; margin-top: 12px; touch-action: none; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.th-sv i, .th-hue i { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); transform: translate(-50%, -50%); pointer-events: none; } .th-hue i { top: 50%; }
.th-hexrow { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.th-chip { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-2); flex: none; }
.th-hexrow input { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, Consolas, monospace; }
.th-cols { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.th-col { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--border-2); position: relative; } .th-col.on { border-color: var(--accent); }
.th-col u { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-active); color: var(--text); display: grid; place-items: center; text-decoration: none; }
.th-rng { display: flex; justify-content: space-between; margin: 14px 0 6px; font-size: 14px; }
.th-drawer input[type=range] { width: 100%; }

/* ---------- компактный клантег: только текст, маленький ---------- */
.clan-tag:not(.big) { height: 14px; padding: 0 4px; margin-left: 4px; border-radius: 4px; gap: 0; font-size: 10px; line-height: 14px; vertical-align: 1px; }
.clan-tag:not(.big) .cb-svg, .clan-tag:not(.big) .cb-img { display: none; }
.clan-tag:not(.big) b { font-size: 10px; letter-spacing: .02em; }

.vm-line { display: flex; align-items: center; min-width: 0; white-space: nowrap; } .vm-line .clan-tag { flex: none; }
.main-head .tabs { min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .main-head .tabs::-webkit-scrollbar { display: none; } .main-head .tabs .tab { flex: none; }

/* ================= уровни серверов: значок уровня ================= */
.lv-emb { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; vertical-align: middle; filter: drop-shadow(0 0 calc(var(--s) * .14) color-mix(in srgb, var(--c1) 55%, transparent)); }
.lv-emb svg { width: 100%; height: 100%; display: block; }
.lv-emb::after { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 5%, 89% 27%, 89% 73%, 50% 95%, 11% 73%, 11% 27%); background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: lvShine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes lvShine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.lv-emb.l5 { animation: lvPulse 3s ease-in-out infinite; } @keyframes lvPulse { 50% { filter: drop-shadow(0 0 calc(var(--s) * .28) color-mix(in srgb, var(--c1) 80%, transparent)); } }
.adm-lv { display: inline-flex; align-items: center; }

/* ================= вкладка «Уровень сервера» ================= */
.lvx-hero { position: relative; display: flex; align-items: center; gap: 24px; padding: 26px; border-radius: 20px; margin: 16px 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hc) 40%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--hc) 20%, #07070a), #07070a 70%); }
.lvx-hero.l1 { --hc: #9ca3af; } .lvx-hero.l2 { --hc: #34d399; } .lvx-hero.l3 { --hc: #60a5fa; } .lvx-hero.l4 { --hc: #a78bfa; } .lvx-hero.l5 { --hc: #fbbf24; }
.lvx-glow { position: absolute; left: -60px; top: -80px; width: 340px; height: 340px; background: radial-gradient(circle, color-mix(in srgb, var(--hc) 45%, transparent), transparent 65%); filter: blur(10px); animation: lvxFloat 8s ease-in-out infinite; pointer-events: none; }
@keyframes lvxFloat { 50% { transform: translate(40px, 20px) scale(1.08); } }
.lvx-emb, .lvx-info { position: relative; } .lvx-info { flex: 1; min-width: 0; } .lvx-info small { color: var(--muted); } .lvx-info h2 { margin: 2px 0 14px; font-size: 24px; }
.lvx-prog { position: relative; height: 12px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.lvx-prog i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 70%, #fff), var(--hc)); box-shadow: 0 0 14px var(--hc); transition: width .8s cubic-bezier(.2,.8,.2,1); animation: lvxGrow 1s cubic-bezier(.2,.8,.2,1); }
@keyframes lvxGrow { from { width: 0 !important; } }
.lvx-prog-t { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.lvx-earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.lvx-earn > div { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border); }
.lvx-earn b { font-size: 15px; } .lvx-earn small { color: var(--muted); line-height: 1.35; }
.lvx-earn-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); margin-bottom: 4px; }
.lvx-ladder { display: grid; gap: 10px; }
.lvx-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border); animation: lvxIn .4s both; animation-delay: calc(var(--i) * 60ms); transition: transform .2s, border-color .2s; }
@keyframes lvxIn { from { opacity: 0; transform: translateY(8px); } }
.lvx-card:not(.have):hover { transform: translateY(-2px); border-color: var(--border-2); }
.lvx-card.have { opacity: .8; }
.lvx-card.next { border-color: color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 10px 40px -12px var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--bg-panel)), var(--bg-panel) 60%); }
.lvx-card.l1 { --c: #9ca3af; } .lvx-card.l2 { --c: #34d399; } .lvx-card.l3 { --c: #60a5fa; } .lvx-card.l4 { --c: #a78bfa; } .lvx-card.l5 { --c: #fbbf24; }
.lvx-card:not(.have) .lvx-card-emb { filter: saturate(.55) brightness(.85); } .lvx-card.next .lvx-card-emb { filter: none; }
.lvx-card-main { flex: 1; min-width: 0; } .lvx-card-main b { font-size: 16px; }
.lvx-card-main ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.lvx-card-main li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; } .lvx-card-main li.on { color: var(--text); } .lvx-card-main li.on svg { color: var(--green, #22c55e); }
.lvx-card-act { display: grid; gap: 6px; justify-items: end; text-align: right; } .lvx-card-act small { font-size: 12px; }
.lvx-buy { min-width: 96px; font-weight: 800; }
.lvx-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green, #22c55e); font-weight: 700; font-size: 14px; }
.lvx-ribbon { position: absolute; top: -9px; right: 16px; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--c); color: #000; }
.lvx-ribbon.deal { background: linear-gradient(90deg, #fde68a, #fb923c); }

/* ================= окно покупки уровня ================= */
.lvx-modal { width: min(460px, 94vw) !important; padding: 0 !important; overflow-x: hidden; overflow-y: auto; max-height: 94vh; }
.lvx-dlg { position: relative; --c: #9ca3af; } .lvx-dlg.l2 { --c: #34d399; } .lvx-dlg.l3 { --c: #60a5fa; } .lvx-dlg.l4 { --c: #a78bfa; } .lvx-dlg.l5 { --c: #fbbf24; }
.lvx-x { position: absolute; top: 14px; right: 14px; z-index: 3; }
.lvx-dlg-hero { position: relative; text-align: center; padding: 34px 20px 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%); }
.lvx-dlg-hero small { display: block; color: var(--muted); margin-top: 10px; } .lvx-dlg-hero h2 { margin: 4px 0 0; font-size: 24px; }
.lvx-dlg-emb { position: relative; display: grid; place-items: center; animation: lvxBob 3.6s ease-in-out infinite; } @keyframes lvxBob { 50% { transform: translateY(-6px); } }
.lvx-rays { position: absolute; left: 50%; top: 92px; width: 340px; height: 340px; margin: -170px 0 0 -170px; opacity: .5; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 68%); mask: radial-gradient(circle, #000 0, transparent 68%); animation: lvxSpin 28s linear infinite; pointer-events: none; }
@keyframes lvxSpin { to { transform: rotate(360deg); } }
.lvx-ring { position: absolute; left: 50%; top: 92px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); transform: translate(-50%, -50%); animation: lvxRing 3.2s ease-out infinite; pointer-events: none; }
.lvx-ring.r1 { width: 110px; height: 110px; } .lvx-ring.r2 { width: 110px; height: 110px; animation-delay: 1.6s; }
@keyframes lvxRing { from { opacity: .8; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
.lvx-pick { display: flex; gap: 8px; justify-content: center; padding: 4px 20px 6px; }
.lvx-pick button { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; padding: 8px 12px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); color: inherit; text-align: left; transition: transform .15s, border-color .15s; }
.lvx-pick button b { font-size: 15px; } .lvx-pick button small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.lvx-pick button:hover { transform: translateY(-1px); } .lvx-pick button.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg-input)); }
.lvx-dlg-body { padding: 8px 22px 4px; } .lvx-dlg-body h4 { margin: 12px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lvx-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lvx-perks li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); animation: lvxIn .35s both; }
.lvx-perk-t { flex: 1; min-width: 0; display: grid; } .lvx-perk-t small { color: var(--muted); } .lvx-perk-lv { font-size: 11px; font-weight: 800; color: var(--c); padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, transparent); }
.lvx-perk-pv { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.05); flex: none; overflow: hidden; }
.pv { display: block; font-style: normal; }
.pv-icon { width: 28px; height: 28px; border-radius: 9px; background: conic-gradient(from 0deg, #f472b6, #60a5fa, #34d399, #fbbf24, #f472b6); animation: lvxSpin 4s linear infinite; }
.pv-roles { display: flex; gap: 3px; } .pv-roles b { width: 9px; height: 11px; border-radius: 3px 3px 5px 5px; background: #a78bfa; } .pv-roles b:nth-child(2) { background: #34d399; } .pv-roles b:nth-child(3) { background: #fbbf24; }
.pv-banner { width: 36px; height: 20px; border-radius: 5px; background: linear-gradient(120deg, #6366f1, #ec4899, #f59e0b); background-size: 200% 100%; animation: lvxSlide 3s linear infinite; } @keyframes lvxSlide { to { background-position: 200% 0; } }
.pv-name { font-size: 19px; font-weight: 800; color: #f472b6; } .pv-font { font-size: 21px; font-family: Georgia, serif; font-weight: 700; color: #a78bfa; }
.pv-bg { width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(160deg, #3b0764, #0b0b14); border: 1px solid rgba(255,255,255,.2); }
.lvx-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .lvx-price b { font-size: 34px; letter-spacing: -.02em; } .lvx-price span { color: var(--muted); font-size: 13px; }
.lvx-save { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #fbbf24; font-size: 13px; font-weight: 600; min-height: 18px; }
.lvx-foot { display: grid; gap: 6px; padding: 14px 22px 20px; } .lvx-foot .lvx-go.btn { height: 48px; font-size: 16px; font-weight: 800; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c)) !important; color: #000 !important; box-shadow: 0 10px 30px -10px var(--c); }
.lvx-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }

/* ================= праздничное окно «сервер получил уровень» ================= */
.lvx-up { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.lvx-up.in { opacity: 1; } .lvx-up.l1 { --c: #9ca3af; } .lvx-up.l2 { --c: #34d399; } .lvx-up.l3 { --c: #60a5fa; } .lvx-up.l4 { --c: #a78bfa; } .lvx-up.l5 { --c: #fbbf24; }
.lvx-up-card { position: relative; width: min(400px, 92vw); padding: 36px 24px 24px; border-radius: 24px; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 34%, #0b0b10), #0b0b10 75%); border: 1px solid color-mix(in srgb, var(--c) 50%, var(--border)); transform: scale(.9); transition: transform .35s cubic-bezier(.2,1.2,.3,1); }
.lvx-up.in .lvx-up-card { transform: none; }
.lvx-up-card small { color: var(--muted); display: block; margin-top: 12px; } .lvx-up-card h2 { margin: 2px 0 12px; font-size: 26px; }
.lvx-up-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; } .lvx-up-card li { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); } .lvx-up-card li svg { color: var(--c); }
.lvx-up .lvx-rays { top: 100px; } .lvx-up .lvx-ring { top: 100px; width: 120px; height: 120px; }
.lvx-conf { position: absolute; left: 50%; top: 100px; width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; animation: lvxConf 1.4s ease-out var(--d) both; transform: rotate(var(--a)) translateY(0); }
.lvx-conf:nth-child(3n) { background: #fff; } .lvx-conf:nth-child(3n+1) { background: color-mix(in srgb, var(--c) 50%, #fff); }
@keyframes lvxConf { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(calc(var(--a) + 90deg)) translateY(-190px); } }
/* панель владельца */
.adm-lv-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; flex-wrap: wrap; } .adm-lv-row b { display: block; font-size: 16px; }
.adm-lv-pick { display: flex; gap: 8px; margin-bottom: 10px; } .adm-lv-pick button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); color: inherit; font-weight: 700; } .adm-lv-pick button.on { border-color: #fff; background: var(--bg-active); }
@media (max-width: 720px) { .lvx-earn { grid-template-columns: 1fr; } .lvx-hero { flex-direction: column; text-align: center; } }
.adm-level { margin-bottom: 16px; } .adm-level > small { display: block; margin-top: 4px; line-height: 1.45; }

/* ---------- кланы без Plus: напоминание сверху, содержимое неактивно ---------- */
.clan-plus-notice { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(167, 139, 250, .16), rgba(96, 165, 250, .08)); border: 1px solid rgba(167, 139, 250, .35); }
.clan-plus-notice > div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.clan-plus-notice small { color: var(--muted); line-height: 1.4; }
.cpn-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(167, 139, 250, .2); color: #c4b5fd; }
.clan-choice.plus-locked, .cc-card.plus-locked { opacity: .42; filter: grayscale(.4); pointer-events: none; user-select: none; }

/* ---------- окно покупки уровня: живой фон в цвет уровня, искры, «сейчас → станет» ---------- */
.lvx-dlg { isolation: isolate; overflow: hidden; transition: --c .4s; }
.lvx-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lvx-aurora i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .32; background: var(--c); animation: lvxDrift 14s ease-in-out infinite alternate; transition: background .5s; }
.lvx-aurora i:nth-child(1) { left: -20%; top: -18%; }
.lvx-aurora i:nth-child(2) { right: -25%; top: 22%; opacity: .2; animation-delay: -5s; background: color-mix(in srgb, var(--c) 60%, #fff); }
.lvx-aurora i:nth-child(3) { left: 10%; bottom: -35%; opacity: .16; animation-delay: -9s; }
@keyframes lvxDrift { to { transform: translate(14%, 10%) scale(1.15); } }
.lvx-sparks { position: absolute; inset: 0 0 45% 0; pointer-events: none; z-index: 0; }
.lvx-sparks b { position: absolute; left: var(--x); bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--c) 50%, #fff); box-shadow: 0 0 8px var(--c); opacity: 0; animation: lvxSpark var(--s) linear var(--d) infinite; }
@keyframes lvxSpark { 10% { opacity: .9; } 100% { transform: translateY(-260px) translateX(12px); opacity: 0; } }
.lvx-jump { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.lvx-jump > span:not(.lj-track) { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lvx-jump small { font-size: 10.5px !important; margin: 0 !important; color: var(--muted); }
.lj-track { display: flex; gap: 4px; align-items: center; }
.lj-track i { width: 22px; height: 6px; border-radius: 4px; background: #9ca3af; animation: ljPulse 1.6s ease-in-out infinite; }
.lj-track i.l2 { background: #34d399; } .lj-track i.l3 { background: #60a5fa; } .lj-track i.l4 { background: #a78bfa; } .lj-track i.l5 { background: #fbbf24; }
.lj-track i:nth-child(2) { animation-delay: .15s; } .lj-track i:nth-child(3) { animation-delay: .3s; } .lj-track i:nth-child(4) { animation-delay: .45s; }
@keyframes ljPulse { 50% { opacity: .45; transform: scaleX(.85); } }
.lvx-dlg-body h4 em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); text-transform: none; letter-spacing: 0; font-weight: 700; }
.lvx-perks.anim li { animation: lvxIn .45s var(--ease, ease) both; }
.lvx-perks.anim li:nth-child(2) { animation-delay: .06s; } .lvx-perks.anim li:nth-child(3) { animation-delay: .12s; } .lvx-perks.anim li:nth-child(4) { animation-delay: .18s; } .lvx-perks.anim li:nth-child(5) { animation-delay: .24s; } .lvx-perks.anim li:nth-child(n+6) { animation-delay: .3s; }
@keyframes lvxIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.lvx-perks li { transition: transform .2s, border-color .2s, background .2s; }
.lvx-perks li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, transparent) !important; background: color-mix(in srgb, var(--c) 8%, #121215) !important; }
.lvx-pick button { transition: transform .2s, box-shadow .2s, border-color .2s; }
.lvx-pick button:hover { transform: translateY(-2px); }
.lvx-pick button.on { box-shadow: 0 0 0 2px var(--c), 0 8px 24px -8px var(--c) !important; border-color: transparent !important; }
.lvx-foot .lvx-go.btn { position: relative; overflow: hidden; }
.lvx-foot .lvx-go.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); animation: lvxBtn 2.8s ease-in-out infinite; }
@keyframes lvxBtn { 60%, 100% { transform: translateX(120%); } }
.lvx-price b { background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--c) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.lite .lvx-aurora i, body.lite .lvx-sparks b, body.lite .lvx-go::after { animation: none; }

/* значки уровней: чёрные с белой подсветкой, сила свечения растёт с уровнем */
.lv-emb { --glow: .10; filter: drop-shadow(0 0 calc(var(--s) * var(--glow)) rgba(255, 255, 255, .55)) !important; }
.lv-emb.l2 { --glow: .13; } .lv-emb.l3 { --glow: .16; } .lv-emb.l4 { --glow: .2; } .lv-emb.l5 { --glow: .24; }
.lv-emb.l5 { animation: lvGlowW 3s ease-in-out infinite !important; }
@keyframes lvGlowW { 50% { filter: drop-shadow(0 0 calc(var(--s) * .34) rgba(255, 255, 255, .8)); } }
.lv-emb::after { clip-path: polygon(50% 14%, 84% 33%, 84% 67%, 50% 86%, 16% 67%, 16% 33%) !important; }
.sw-custom.locked { opacity: .55; } .sw-custom.locked input { pointer-events: none; }

/* нажатие на значок Plus: подпрыгивает, крутится и вспыхивает */
.pl-badge { position: relative; display: inline-block; }
.pl-badge.pop svg { animation: plPop .9s cubic-bezier(.2, .9, .3, 1.3); }
.pl-badge.pop::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 18%, transparent 19%), conic-gradient(from 0deg, transparent 0 8%, rgba(255, 255, 255, .7) 9% 11%, transparent 12% 33%, rgba(255, 255, 255, .7) 34% 36%, transparent 37% 58%, rgba(255, 255, 255, .7) 59% 61%, transparent 62% 83%, rgba(255, 255, 255, .7) 84% 86%, transparent 87%);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%); mask: radial-gradient(circle, transparent 30%, #000 31%);
  animation: plBurst .7s ease-out forwards; }
@keyframes plPop { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.55) rotate(-14deg); filter: drop-shadow(0 0 8px #fff); } 60% { transform: scale(.9) rotate(200deg); } 80% { transform: scale(1.12) rotate(350deg); } 100% { transform: scale(1) rotate(360deg); } }
@keyframes plBurst { 0% { transform: scale(.3) rotate(0); opacity: 1; } 100% { transform: scale(1.5) rotate(60deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pl-badge.pop svg, .pl-badge.pop::after { animation-duration: .01s; } }
/* значок Plus в такой же рамке, как сердечко поддержки */
.pl-frame-badge { cursor: pointer; }
.pl-frame-badge .pl-badge { display: grid; place-items: center; }

/* ---------- карта подписчика без анимации появления (окно покупки, настройки) ---------- */
.pl-mcard { position: relative; width: 100%; aspect-ratio: 1.6; border-radius: 20px; padding: 18px 20px; text-align: left; overflow: hidden; color: #fff;
  --c1: #2b2b31; --c2: #141417; --edge: rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 45%, #0b0b0d 100%); box-shadow: 0 0 0 1px var(--edge), 0 24px 60px rgba(0, 0, 0, .6); }
.pl-mcard.t1 { --c1: #3a3a42; --c2: #18181c; --edge: rgba(255, 255, 255, .18); }
.pl-mcard.t2 { --c1: #4a4a54; --c2: #1d1d22; --edge: rgba(255, 255, 255, .26); }
.pl-mcard.t3 { --c1: #5a5a66; --c2: #222228; --edge: rgba(255, 255, 255, .4); }
.pl-mcard::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px); }
.pl-mcard .pl-cc-name { left: 20px; right: 20px; bottom: 42px; font-size: 20px; }
.pl-mcard .pl-cc-meta { left: 20px; right: 20px; bottom: 18px; font-size: 10.5px; letter-spacing: .1em; }
.pl-mcard.off { filter: grayscale(1); opacity: .55; }
.pl-mcard.off .pl-cc-sheen { display: none; }
.pl-mcard.tilt { animation: plTilt 6s ease-in-out infinite; }
@keyframes plTilt { 50% { transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-4px); } }
body.no-anim .pl-mcard, body.no-anim .pl-mcard * { animation: none !important; }

/* окно покупки */
.modal.pl-buy-box { max-width: 560px; }
.pl-buy-m { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 6px 10px; }
.pl-buy-card { width: min(330px, 100%); margin-top: 16px; }
.pl-buy-m h2 { margin: 22px 0 0; font-size: 24px; }
.pl-buy-sub { margin: 6px 0 0; color: var(--text-2, #a1a1aa); font-size: 14px; }
.pl-buy-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; width: 100%; margin: 18px 0 0; padding: 0 12px 0 22px; list-style: none; text-align: left; }
.pl-buy-perks li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; font-weight: 700; }
.pl-buy-perks li .ic, .pl-buy-perks li svg { flex: none; color: #fff; }
.pl-buy-m .pl-active { width: 100%; margin-top: 14px; }
.pl-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 18px; }
.pl-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pl-plan span { display: block; padding: 12px 6px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px #24242a; cursor: pointer; transition: background .15s, color .15s; }
.pl-plan span b { display: block; font-size: 15px; } .pl-plan span small { display: block; margin-top: 4px; font-size: 12px; color: #8b8b95; font-weight: 600; }
.pl-plan:hover span { background: #1b1b20; }
.pl-plan input:checked + span { background: #fff; color: #000; box-shadow: none; } .pl-plan input:checked + span small { color: #52525b; }
.pl-plan input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.pl-buy-go { width: 100%; height: 50px; margin-top: 14px; border: 0; border-radius: 14px; background: #fff; color: #000; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.pl-buy-go:hover { background: #e4e4e7; } .pl-buy-go:disabled { opacity: .45; cursor: not-allowed; }
.pl-buy-go.loading { opacity: .6; pointer-events: none; }
.pl-buy-m .pl-legal { margin-top: 12px; }
@media (max-width: 520px) { .pl-buy-perks { grid-template-columns: 1fr; } .pl-plans { grid-template-columns: 1fr 1fr; } }

/* раздел в настройках */
.pl-set { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; padding: 22px; border-radius: 22px; background: var(--bg-panel, #0d0d10); border: 1px solid var(--border-2, rgba(255, 255, 255, .08)); margin-bottom: 8px; }
.pl-set-main h2 { margin: 0; font-size: 22px; } .pl-set-main p { margin: 8px 0 0; color: var(--text-2, #a1a1aa); font-size: 14px; line-height: 1.5; }
.pl-set-main .row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pl-track { grid-column: 1 / -1; margin: 4px 10px 0; }
.pl-track .ln { position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.pl-track .ln i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #71717a, #fff); }
.pl-track .ln span { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #18181c; box-shadow: inset 0 0 0 2px #3f3f46; }
.pl-track .ln span.on { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .6); }
.pl-track .lb { position: relative; height: 34px; margin-top: 12px; }
.pl-track .lb span { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b8b95; }
.pl-track .lb span:first-child { transform: none; text-align: left; } .pl-track .lb span:last-child { transform: translateX(-100%); text-align: right; }
.pl-track .lb span small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5f5f68; }
.pl-track .lb span.cur { color: #fff; }
@media (max-width: 760px) { .pl-set { grid-template-columns: 1fr; } .pl-set .pl-mcard { max-width: 340px; margin: 0 auto; } .pl-track .lb span small { display: none; } }

/* ---------- полученный подарок Plus: «нажмите, чтобы открыть» ---------- */
.pgf { position: fixed; inset: 0; z-index: 68; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 16px; color: #fff;
  background: rgba(0, 0, 0, .66); backdrop-filter: blur(10px); animation: plCcFade .35s both; }
.pgf.out { animation: plCcOut .35s both; }
.pgf-tap { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-align: center; animation: plCcUp .5s both; }
.pgf-orb { position: relative; width: 150px; height: 150px; margin-bottom: 10px; border-radius: 40px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #3f3f46, #0f0f12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 20px 60px rgba(255, 255, 255, .12); animation: pgfBob 1.6s ease-in-out infinite; }
.pgf-orb::before { content: ''; position: absolute; inset: -14px; border-radius: 52px; border: 2px solid rgba(255, 255, 255, .35); animation: pgfWave 1.6s ease-out infinite; }
.pgf-orb svg { filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)); }
@keyframes pgfBob { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes pgfWave { from { opacity: .8; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } }
.pgf-tap b { font: 700 20px var(--display, 'Unbounded', sans-serif); }
.pgf-tap small { color: #a1a1aa; font-size: 14px; }
.pgf-tap.open .pgf-orb { animation: pgfBoom .45s both; }
.pgf-tap.open b, .pgf-tap.open small { animation: plCcOut .25s both; }
@keyframes pgfBoom { 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(0); opacity: 0; } }
.pgf-later { position: absolute; bottom: 28px; border: 0; background: none; color: #8b8b95; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pgf-later:hover { color: #fff; }
.pgf-parts { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pgf-parts i { position: absolute; width: var(--s); height: var(--s); border-radius: 2px; background: var(--c); animation: pgfPart 1.4s cubic-bezier(.1, .7, .3, 1) both; }
@keyframes pgfPart { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
.pgf-card { width: min(420px, 100%); padding: 28px; border-radius: 28px; text-align: center; background: #0e0e11; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .7);
  animation: pgfRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.pgf-card[hidden] { display: none; }
@keyframes pgfRise { from { opacity: 0; transform: translateY(50px) scale(.92); } }
.pgf-who { display: flex; justify-content: center; }
.pgf-from { margin-top: 14px; font-size: 14px; color: #8b8b95; } .pgf-from b { color: #fff; }
.pgf-card h2 { margin: 6px 0 0; font-size: 24px; }
.pgf-term { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; height: 30px; padding: 0 12px; border-radius: 99px; background: #18181c; box-shadow: inset 0 0 0 1px #2a2a31; font-size: 13px; font-weight: 800; }
.pgf-term .pl-badge { margin: 0; }
.pgf-note { position: relative; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #16161a; text-align: left; font-size: 14px; line-height: 1.45; color: #e4e4e7; word-wrap: break-word; }
.pgf-acts { display: flex; gap: 10px; margin-top: 20px; }
.pgf-acts button { flex: 1; height: 46px; border: 0; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.pgf-ok { background: #fff; color: #000; } .pgf-ok:hover { background: #e4e4e7; } .pgf-ok:disabled { opacity: .6; }
.pgf-no { background: #1c1c21; color: #d4d4d8; box-shadow: inset 0 0 0 1px #2a2a31; } .pgf-no:hover { background: #24242a; }
.pgf-exp { display: block; margin-top: 12px; font-size: 12px; color: #71717a; }
body.no-anim .pgf *, body.no-anim .pgf { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
.pl-gifts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pl-grow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border-2); }
.pl-grow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pl-grow small { color: var(--muted); }
.pl-modal .pl-hero-badge { color: #fff !important; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }

/* ---------- окно «Подарить AudioHub Plus» ---------- */
.pl-gift-m .pg-search { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 16px; padding: 0 12px; height: 40px; border-radius: 12px; background: #141418; box-shadow: inset 0 0 0 1px #24242a; color: #8b8b95; }
.pl-gift-m .pg-search input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; outline: none; }
.pg-friends { width: 100%; max-height: 216px; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pg-friend { position: relative; display: block; }
.pg-friend[hidden] { display: none; }
.pg-friend input { position: absolute; opacity: 0; pointer-events: none; }
.pg-friend > span { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px #24242a; cursor: pointer; transition: background .15s, box-shadow .15s; }
.pg-friend:hover > span { background: #1a1a1f; }
.pg-friend input:checked + span { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px #fff; }
.pg-fn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-fn b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-fn small { color: #8b8b95; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-check { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #3f3f46; color: transparent; }
.pg-friend input:checked + span .pg-check { background: #fff; color: #000; box-shadow: none; }
.pg-credit-hint { display: flex; align-items: center; gap: 8px; width: 100%; margin: 12px 0 0; font-size: 13px; color: #d4d4d8; }
.pl-plans.five { grid-template-columns: repeat(5, 1fr); }
.pl-plan.credit span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.pg-note { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 0; resize: none; background: #141418; box-shadow: inset 0 0 0 1px #24242a; color: #fff; font: inherit; font-size: 14px; outline: none; }
.pg-note:focus { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
@media (max-width: 520px) { .pl-plans.five { grid-template-columns: repeat(3, 1fr); } }

/* ---------- «Что входит»: бенто ---------- */
.pl-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(118px, auto); gap: 10px; margin-bottom: 12px; }
.pl-bento > div { position: relative; overflow: hidden; padding: 16px; border-radius: 18px; background: var(--bg-panel); border: 1px solid var(--border-2); display: flex; flex-direction: column; justify-content: flex-end; }
.pl-bento > div > svg, .pl-bento .pb-spark { position: relative; flex: none; margin-bottom: auto; padding-bottom: 12px; color: var(--text); box-sizing: content-box; }
.pl-bento .pb-spark { display: block; line-height: 0; }
.pl-bento b { font-size: 15px; } .pl-bento small { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.35; }
.pl-bento .pb-big { grid-column: span 2; grid-row: span 2; min-height: 250px; background: linear-gradient(135deg, color-mix(in srgb, var(--bg-active) 80%, #fff 6%), var(--bg-panel) 55%); }
.pl-bento .pb-big::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 6px); pointer-events: none; }
.pl-bento .pb-big b { font: 700 21px var(--display, 'Unbounded', sans-serif); }
.pl-bento .pb-big small { font-size: 14px; max-width: 360px; }
.pl-bento .pb-card { position: absolute !important; right: 20px; top: 20px; width: 220px !important; transform: rotate(-6deg); }
.pl-bento .pb-card .pl-cc-name { font-size: 16px; bottom: 34px; left: 16px; right: 16px; } .pl-bento .pb-card .pl-cc-meta { font-size: 9px; bottom: 14px; left: 16px; right: 16px; }
.pl-bento .pb-card .pl-cc-row .pl-badge { --s: 32px !important; }
.pl-bento .pb-card { padding: 14px 16px; }
@media (max-width: 760px) { .pl-bento { grid-template-columns: 1fr 1fr; } .pl-bento > div:last-child { grid-column: span 2; } .pl-bento .pb-card { width: 160px !important; right: 12px; top: 12px; } }

/* ---------- плашки Plus «с мини-картой» (профиль, клан) ---------- */
.plp { padding: 14px 16px 14px 14px; margin: 16px 0 18px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border-2); box-shadow: none; }
.plp-mini { position: relative; flex: none; width: 92px; aspect-ratio: 1.6; border-radius: 10px; overflow: hidden; transform: rotate(-7deg);
  background: linear-gradient(135deg, #3a3a42, #141417 50%, #0b0b0d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .6); }
.plp-mini::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 5px); }
.plp-mini svg { position: absolute; left: 8px; top: 7px; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .6)); }
.plp-mini i { position: absolute; right: 8px; top: 8px; width: 14px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #d4d4d8, #71717a); }
.plp-mini u { position: absolute; left: 8px; bottom: 9px; width: 38px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .7); }
.plp-sh { position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: plpSheen 3.4s ease-in-out infinite; }
@keyframes plpSheen { 0% { left: -60%; } 50%, 100% { left: 140%; } }
.plp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plp-t b { font-size: 15px; line-height: 1.3; } .plp-t small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.plp .btn { flex: none; }
/* раскладка: карта · текст · кнопка; в узком месте (колонка профиля, телефон) кнопка уходит вниз на всю ширину */
.plp { display: block; container-type: inline-size; }
.plp-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
@container (max-width: 480px) { .plp-in { grid-template-columns: auto 1fr; } .plp-in .btn { grid-column: 1 / -1; width: 100%; justify-content: center; } .plp-mini { width: 76px; } }
body.no-anim .plp-sh, body.lite .plp-sh { display: none; }

/* значки уровней «Орбита» */
.lv-emb::after { display: none !important; }
.lv-emb svg { overflow: visible; }
.lv-emb { --glow: 0; } .lv-emb.l2 { --glow: .05; } .lv-emb.l3 { --glow: .1; } .lv-emb.l4 { --glow: .15; } .lv-emb.l5 { --glow: .2; }
.lv-emb .lv-orb { transform-box: view-box; transform-origin: 20px 20px; animation: lvOrb 10s linear infinite; }
@keyframes lvOrb { to { transform: rotate(360deg); } }
body.no-anim .lv-emb .lv-orb, body.lite .lv-emb .lv-orb { animation: none; }