/* ===== Новые функции AudioHub — в стиле проекта: чёрный, белые акценты, мягкие рамки ===== */

/* ---------- закреплённые беседы и каналы ---------- */
.dm-item .dm-pin { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.dm-item:hover .dm-pin { opacity: 1; }
.dm-item .dm-pin:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.dm-item.pinned .dm-pin { opacity: 1; color: #fff; }
.dm-item.pinned .dm-pin .ic { transform: rotate(-30deg); }
.dm-item.pinned { position: relative; }
.dm-item.pinned::before { content: ""; position: absolute; left: 2px; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.pins-cat span { display: inline-flex; align-items: center; gap: 5px; }
.pins-body { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); }

/* ---------- подтверждение звонка ---------- */
.call-ask-modal { width: min(380px, 92vw) !important; }
.call-ask { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 24px 20px; }
.ca-ring { position: relative; margin-bottom: 14px; }
.ca-ring .av, .ca-ring .grp-ic { position: relative; z-index: 1; }
.ca-ring i { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: caRing 1.8s ease-out infinite; }
.ca-ring i + i { animation-delay: .9s; }
@keyframes caRing { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.call-ask h2 { margin: 0 0 4px; font-size: 19px; }
.call-ask .check-row { margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.ca-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* ---------- голосовые сообщения ---------- */
.vmsg { display: flex; align-items: center; gap: 10px; width: min(340px, 100%); margin-top: 4px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--bg-input); box-shadow: inset 0 0 0 1px #24242a; }
.vm-play { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; transition: transform .15s; }
.vm-play:hover { transform: scale(1.06); }
.vm-play .ic { fill: currentColor; }
.vm-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; min-width: 0; }
.vm-wave i { flex: 1; min-width: 2px; height: var(--h); border-radius: 2px; background: rgba(255, 255, 255, .28); transition: background .1s; }
.vm-wave i.done { background: #fff; }
.vm-time { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 34px; text-align: right; }
.vmsg.on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 18px rgba(255, 255, 255, .08); }

.composer.recording .composer-row { visibility: hidden; }
.composer { position: relative; }
.vrec-bar { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px; border-radius: 22px; background: var(--bg-input); box-shadow: inset 0 0 0 1px #2a2a30, 0 10px 30px rgba(0, 0, 0, .45); animation: vrIn .2s ease; }
.vc-chat .vrec-bar { left: 12px; right: 12px; bottom: 12px; }
@keyframes vrIn { from { transform: translateY(6px); opacity: 0; } }
.vr-cancel { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; color: var(--muted); }
.vr-cancel:hover { background: rgba(239, 68, 68, .12); color: #f87171; }
.vr-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: vrBlink 1s ease-in-out infinite; }
@keyframes vrBlink { 50% { opacity: .3; } }
.vr-time { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; }
.vr-live { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2px; height: 30px; overflow: hidden; }
.vr-live i { flex: none; width: 3px; height: var(--h); border-radius: 2px; background: #fff; }
.vr-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
.vr-send { width: 40px; height: 40px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: #000; }
@media (max-width: 700px) { .vr-hint { display: none; } }

/* ---------- выбор времени, списки отложенного ---------- */
.tp-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.tp-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); text-align: left; transition: border-color .15s, background .15s; }
.tp-chip:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.tp-chip b { font-size: 14px; } .tp-chip small { font-size: 11.5px; color: var(--muted); }
.tp-modal input[type=datetime-local] { color-scheme: dark; }
.sl-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.sl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); }
.sl-row .grow { min-width: 0; display: flex; flex-direction: column; } .sl-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-row small { color: var(--muted); }
.sl-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #fff; color: #000; }
.sl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 10px; text-align: center; color: var(--muted); }

/* ---------- карточка напоминания ---------- */
.remind-card { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; align-items: center; gap: 12px; width: min(400px, calc(100vw - 36px)); padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--bg-input); box-shadow: inset 0 0 0 1px #2a2a30, 0 20px 50px rgba(0, 0, 0, .6); animation: rcIn .35s cubic-bezier(.2, .9, .3, 1.2); }
.remind-card.out { animation: rcOut .25s forwards; }
@keyframes rcIn { from { transform: translateY(20px) scale(.96); opacity: 0; } }
@keyframes rcOut { to { transform: translateY(12px); opacity: 0; } }
.rc-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: #fff; color: #000; animation: rcBell 1.2s ease-in-out 2; }
@keyframes rcBell { 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } 50% { transform: none; } }
.remind-card .grow { min-width: 0; display: flex; flex-direction: column; } .remind-card small { color: var(--muted); font-size: 12px; } .remind-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- альбом, спойлер, ALT ---------- */
.att-imgwrap { position: relative; display: inline-block; max-width: 100%; border-radius: 12px; overflow: hidden; vertical-align: top; }
.att-imgwrap .att-img { display: block; margin: 0; }
.att-imgwrap.spoiled .att-img { filter: blur(28px) brightness(.55); transform: scale(1.08); cursor: default; }
.att-spoil { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: auto; width: max-content; height: max-content; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .1em; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.att-alt { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.att-tools { position: absolute; top: 8px; right: 8px; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(0, 0, 0, .7); color: #fff; opacity: 0; transition: opacity .15s; }
.att-imgwrap:hover .att-tools { opacity: 1; }
.att-album { display: grid; gap: 4px; width: min(460px, 100%); border-radius: 14px; overflow: hidden; position: relative; }
.att-album .att-imgwrap { border-radius: 0; display: block; }
.att-album .att-img { width: 100%; height: 100%; max-height: none; max-width: none; object-fit: cover; border-radius: 0; }
.att-album.n2 { grid-template-columns: 1fr 1fr; } .att-album.n2 .att-imgwrap { aspect-ratio: 1; }
.att-album.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; } .att-album.n3 .att-imgwrap:first-child { grid-row: span 2; }
.att-album.n4 { grid-template-columns: 1fr 1fr; } .att-album.n4 .att-imgwrap { aspect-ratio: 4 / 3; }
.att-more { position: absolute; right: 0; bottom: 0; width: calc(50% - 2px); aspect-ratio: 4 / 3; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; font-size: 26px; font-weight: 900; cursor: pointer; backdrop-filter: blur(2px); }
.pf .pf-spoil { position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, .65); color: #fff; }
.pf .pf-spoil.on { background: #fff; color: #000; }
.pf { position: relative; }
.album-modal { width: min(900px, 94vw) !important; padding: 0 !important; overflow: hidden; }
.av-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; padding: 10px; max-height: 75vh; overflow-y: auto; }
.av-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: zoom-in; }

/* ---------- аватарка в полный размер ---------- */
[data-avzoom] { cursor: zoom-in; }
.av-lightbox .av-zoom img { width: min(520px, 80vw); height: min(520px, 80vw); object-fit: cover; border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.pc-dates { display: flex; gap: 22px; } .pc-dates > div { min-width: 0; }

/* ---------- обжалование бана ---------- */
.ban-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 24px 20px; }
.ban-box .field { width: 100%; text-align: left; margin-top: 14px; }
.bb-ic { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 22px; margin-bottom: 12px; background: rgba(239, 68, 68, .12); color: #f87171; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.ban-box h2 { margin: 0 0 6px; font-size: 19px; }
.appeals { margin: 6px 0 18px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ap-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ap-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.ap-row .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ap-row b small { color: var(--muted); font-weight: 600; }
.ap-row p { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.ap-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* ---------- сервер по образцу ---------- */
.clone-prev { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 14px; border-radius: 14px; background: var(--bg-input); border: 1px solid var(--border); }
.clone-prev > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .clone-prev small { color: var(--muted); }
.clone-prev .gh-icon, .clone-prev > span:first-child { flex: none; }
.cp-new { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; border: 1.5px dashed rgba(255, 255, 255, .4); }

/* ---------- данные и аккаунт ---------- */
.data-card { padding: 16px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border); max-width: 760px; }
.dc-head { display: flex; align-items: center; gap: 12px; } .dc-head > .ic { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: #fff; color: #000; }
.dc-head div { display: flex; flex-direction: column; } .dc-head small { color: var(--muted); }
.dc-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--text-2, #d4d4d8); }
.dc-list li { display: flex; gap: 8px; align-items: flex-start; } .dc-list .ic { flex: none; margin-top: 2px; }
.data-card .row-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- память ---------- */
.mem-meter { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border); max-width: 760px; }
.mem-meter > .ic { flex: none; }
.mem-meter > div:not(.mem-bar) { display: flex; flex-direction: column; min-width: 0; flex: 1; } .mem-meter small { color: var(--muted); }
.mem-bar { flex: none; width: 140px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mem-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: #fff; transition: width .5s; }
.mem-bar i.mid { background: #fbbf24; } .mem-bar i.hi { background: #f87171; }

/* ---------- клипы ---------- */
.tile-clip { position: absolute; right: 52px; top: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 72%, transparent); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transition: opacity .15s, background .15s; }
.tile:hover .tile-clip { opacity: 1; }
.tile-clip:hover { background: #fff; color: #000; }
.tile-clip.rec { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.tile-clip.rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: vrBlink 1s infinite; }

/* ---------- «Смотреть вместе» ---------- */
.watch-slot.on { flex: none; padding: 14px 16px 0; }
.watch-card { max-width: min(980px, calc(40vh * 16 / 9)); margin: 0 auto; border-radius: 20px; overflow: hidden; background: var(--bg-panel); box-shadow: inset 0 0 0 1px #222227, 0 20px 50px rgba(0, 0, 0, .45); }
.wc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--border); }
.wc-head > .ic:first-child { padding: 5px; width: 26px; height: 26px; border-radius: 8px; background: #fff; color: #000; fill: currentColor; }
.wc-head small { color: var(--muted); }
.wc-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.wc-player iframe, .wc-player #ytBox { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wc-note { padding: 8px 14px; margin: 0; }
.stage:has(.watch-slot.on) .tiles { max-height: 28vh; }
.hd-btn[data-wtogether] .ic { fill: currentColor; }

body.lite .ca-ring i, body.lite .vr-dot, body.lite .rc-ic { animation: none; }

/* громкость голосовых и шумодав при записи */
.vm-vol { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .15s, color .15s; }
.vm-vol:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.vm-vol.boost { color: #fff; }
.vr-ns { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--muted); background: rgba(255, 255, 255, .06); white-space: nowrap; }
.vr-ns.on { background: #fff; color: #000; }

/* ---------- Избранное ---------- */
.saved-ic { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: #fff; color: #000; vertical-align: middle; }
.saved-ic .ic { fill: currentColor; }
.saved-nav small { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--muted); opacity: .8; }
.saved-nav .ic { flex: none; }
.saved-nav.active .ic { fill: currentColor; }
.mh-title .saved-ic { margin-right: 4px; }
.saved-welcome .saved-ic { margin-bottom: 8px; box-shadow: 0 16px 40px rgba(255, 255, 255, .08); }
.saved-welcome .muted .ic { vertical-align: -2px; }

/* ---------- перетаскивание каналов ---------- */
[data-chitem] { position: relative; }
.ch[draggable="true"] { -webkit-user-drag: element; }
body.dragging-channel .ch-dragging { opacity: .35; }
body.dragging-channel .ch-dragging .ch { background: transparent; }
[data-chitem].drop-before::before, [data-chitem].drop-after::after { content: "" !important; position: absolute !important; left: 6px !important; right: 6px !important; width: auto !important; height: 2px !important; border-radius: 2px !important; background: #fff !important; box-shadow: 0 0 10px rgba(255, 255, 255, .55) !important; pointer-events: none; z-index: 3; }
[data-chitem].drop-before::before { top: -1px !important; bottom: auto !important; }
[data-chitem].drop-after::after { bottom: -1px !important; top: auto !important; }
[data-chitem].drop-before::before, [data-chitem].drop-after::after { animation: dropLine .18s ease-out; }
@keyframes dropLine { from { transform: scaleX(.6); opacity: 0; } }
.side-cat.cat-drop { color: #fff; }
.side-cat.cat-drop > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cat-body.cat-drop { min-height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
body.dragging-channel .cat-body { min-height: 10px; }
.saved-welcome .muted .ic, .mh-topic .ic { display: inline-block; vertical-align: -2px; margin: 0 2px; }
.mh-topic:has(.ic) { display: inline-flex; align-items: center; gap: 4px; }

/* «Смотреть вместе»: своя панель и полный экран */
.wc-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); }
.wc-pp { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; transition: transform .15s; }
.wc-pp:hover { transform: scale(1.07); }
.wc-pp .ic { fill: currentColor; }
.wc-time { flex: none; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 78px; }
.wc-prog { flex: 1; height: 5px; border-radius: 5px; background: #222228; overflow: hidden; position: relative; }
.wc-prog[data-wtseek] { cursor: pointer; }
.wc-prog[data-wtseek]:hover { height: 7px; }
.wc-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: inherit; transition: width .45s linear; }
.wc-who { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .07); color: var(--muted); white-space: nowrap; }
.wc-who .ic { fill: currentColor; }
.wc-bar.paused .wc-who { background: #fff; color: #000; }
.wc-fs { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); transition: background .15s, color .15s; }
.wc-fs:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.watch-card:fullscreen { max-width: none; width: 100vw; height: 100vh; margin: 0; border-radius: 0; display: flex; flex-direction: column; background: #000; box-shadow: none; }
.watch-card:fullscreen .wc-player { flex: 1; aspect-ratio: auto; }
.watch-card:fullscreen .wc-head, .watch-card:fullscreen .wc-bar { background: var(--bg-panel); }
.watch-card:fullscreen .wc-note { display: none; }

/* плеер без интерфейса YouTube: наш щит, обложка паузы, конец ролика */
.wc-player { overflow: hidden; }
.wc-player iframe { pointer-events: none; }
.wc-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.wc-mask { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 2; background: linear-gradient(#0b0b0e 0, #0b0b0e 38%, transparent); opacity: 0; transition: opacity .35s; pointer-events: none; }
.watch-card.w-start .wc-mask { opacity: 1; }
.wc-cover, .wc-endc { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.wc-cover { background: linear-gradient(rgba(6, 6, 8, .55), rgba(6, 6, 8, .75)), var(--thumb) center / cover no-repeat; }
.wc-cover::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(14px); z-index: -1; }
.watch-card.w-paused .wc-cover { display: flex; }
.wc-big { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); transition: transform .15s; }
button.wc-big:hover { transform: scale(1.07); }
.wc-big .ic { fill: currentColor; }
.wc-cover-t { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.wc-endc { background: var(--bg-panel); }
.watch-card.w-ended .wc-endc { display: flex; }
.watch-card.w-ended .wc-cover { display: none; }
.wc-endc > .ic { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: #fff; color: #000; }
.wc-rate { flex: none; height: 28px; min-width: 40px; padding: 0 8px; border-radius: 9px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .07); color: #fff; }
.wc-rate:hover { background: #fff; color: #000; }

/* ---------- выбор цвета (имя и фон сервера) ---------- */
.cp-card { padding: 14px; border-radius: 16px; background: var(--bg-input); box-shadow: inset 0 0 0 1px #24242a; display: flex; flex-direction: column; gap: 12px; }
.cp-top { display: flex; align-items: center; gap: 12px; }
.cp-big { flex: none; width: 76px; height: 52px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 22px rgba(0, 0, 0, .35); transition: background .2s, color .2s; }
.cp-big.bg { background: linear-gradient(160deg, color-mix(in srgb, var(--cv) 100%, #fff 6%), var(--cv)); }
.cp-big.bg i { position: absolute; left: 10px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.cp-big.bg i:nth-child(1) { top: 12px; width: 34px; } .cp-big.bg i:nth-child(2) { top: 23px; width: 52px; background: rgba(255, 255, 255, .16); } .cp-big.bg i:nth-child(3) { top: 34px; width: 26px; background: rgba(255, 255, 255, .16); }
.cp-big.name { display: grid; place-items: center; background: var(--bg-panel); color: var(--cv); font-size: 22px; }
.cp-card.empty .cp-big.bg { background: repeating-linear-gradient(45deg, #17171b 0 6px, #111114 6px 12px); }
.cp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-meta b { font-size: 14px; }
.cp-hex { font: 700 12px ui-monospace, Consolas, monospace; color: var(--muted); letter-spacing: .04em; }
.cp-top [data-cpreset]:disabled { opacity: .35; pointer-events: none; }
.cp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-sw { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.cp-sw:hover { transform: scale(1.1); }
.cp-sw.on { box-shadow: 0 0 0 2px #0b0b0e, 0 0 0 4px #fff; }
.cp-sw.on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translate(-50%, -65%) rotate(-45deg); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.cp-sw[data-cpc="#ffffff"].on::after { border-color: #000; filter: none; }
.cp-custom { display: grid; place-items: center; color: #fff; background: conic-gradient(from 0deg, #f87171, #fbbf24, #a3e635, #22d3ee, #a78bfa, #f472b6, #f87171); }
.cp-custom .ic { width: 16px; height: 16px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.cp-custom.on { background: var(--c); }
.cp-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* видео, скачанное сервером */
.wc-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.wc-prep { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; padding: 20px;
  background: linear-gradient(rgba(6, 6, 8, .72), rgba(6, 6, 8, .86)), var(--thumb) center / cover no-repeat; }
.wc-prep b { font-size: 16px; }
.wc-prep-p { font-weight: 800; font-variant-numeric: tabular-nums; }
.wc-prep-bar { width: min(320px, 70%); height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.wc-prep-bar i { display: block; height: 100%; background: #fff; border-radius: inherit; transition: width .5s; }
.wc-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: wcSpin .9s linear infinite; }
@keyframes wcSpin { to { transform: rotate(360deg); } }
.watch-card.w-wait .wc-cover, .watch-card.w-wait .wc-shield { display: none; }
.watch-card.w-wait .wc-pp { opacity: .4; pointer-events: none; }