@import url("../theme.css.php");
:root {
  --bg: #060b16;
  --bg-elevated: #0a1325;
  --panel: rgba(8, 15, 30, 0.88);
  --panel-strong: rgba(9, 17, 33, 0.96);
  --line: rgba(126, 153, 198, 0.18);
  --line-strong: rgba(126, 153, 198, 0.3);
  --text: #eef4ff;
  --muted: #aab8d4;
  --accent: #7aa5ff;
  --accent-2: #79e3d2;
  --danger: #df6f86;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  /* AUDIT 2026-06 — canonical responsive breakpoint scale. CSS @media
     conditions cannot read custom properties, so these mirror the px values
     used throughout the media queries — keep them in sync. Handy inside
     clamp()/calc() for fluid sizing. */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;
  --bp-2xl: 1920px;
  --bp-4k: 2560px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, rgba(53, 83, 170, 0.18), transparent 26%), radial-gradient(circle at bottom right, rgba(76, 173, 159, 0.18), transparent 28%), var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.page-shell { position: relative; min-height: 100vh; overflow-x: clip; }
.bg-orb, .bg-grid { position: fixed; inset: 0; pointer-events: none; }
.bg-orb-one { background: radial-gradient(circle at 15% 15%, rgba(122,165,255,.16), transparent 23%); }
.bg-orb-two { background: radial-gradient(circle at 85% 78%, rgba(121,227,210,.16), transparent 24%); }
.bg-grid { background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 36px 36px; opacity: .12; mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 85%); }
.container, .auth-wrap, .install-shell, .admin-wrap { width: min(1280px, calc(100vw - 48px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 40; padding: 24px 0 14px; backdrop-filter:none; }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(7, 13, 27, 0.84); box-shadow: var(--shadow); }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { width: 56px; height: 56px; border-radius: 18px; object-fit: cover; border: 0; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 28px; line-height: 1; letter-spacing: .12em; }
.brand-copy small { color: var(--muted); font-size: 16px; }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.site-nav a, .footer-links a, .admin-sidebar a { color: var(--muted); transition: .2s ease; }
.site-nav a:hover, .footer-links a:hover, .admin-sidebar a:hover { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-switcher { display: inline-flex; gap: 8px; }
.lang-pill, .header-icon-btn, .menu-toggle, .button, .site-btn, .player-btn { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.03); color: var(--text); transition: .2s ease; }
.lang-pill { padding: 10px 14px; font-size: 13px; letter-spacing: .08em; }
.lang-pill.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04111f; border-color: transparent; font-weight: 700; }
.header-icon-btn { width: 52px; height: 52px; display: grid; place-items: center; position: relative; }
.header-icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04111f; font-size: 11px; font-weight: 800; }
.menu-toggle { display: none; width: 52px; height: 52px; padding: 0; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 4px auto; background: currentColor; border-radius: 999px; }
main { padding-bottom: 120px; }
.section-block, .hero-section { padding: 32px 0; }
.hero-grid { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(320px,0.78fr); gap:22px; align-items:center; }
.hero-copy, .hero-visual, .surface-card, .person-card, .track-card, .premium-callout, .shop-card, .featured-card, .content-card, .gallery-card, .profile-sidebar, .messenger-sidebar, .messenger-main, .install-card, .auth-card, .track-admin-card, .gift-admin-card, .metric-card, .file-card, .media-library-card, .premium-order-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.hero-copy, .surface-card, .profile-sidebar, .messenger-sidebar, .messenger-main, .install-card, .auth-card { padding: 32px; }
.hero-copy { display: grid; gap: var(--space-4); }
.eyebrow { display: inline-flex; align-items: center; padding: 8px 14px; width: fit-content; border-radius: 999px; border: 1px solid rgba(121,227,210,.32); background: rgba(121,227,210,.08); color: var(--accent-2); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; }
.hero-copy h1, .section-head h2, .surface-card h2, .admin-topbar h1, .profile-sidebar h1, .messenger-sidebar h1 { margin: 0; line-height: .96; }
.hero-copy h1 { font-size: clamp(48px, 7vw, 88px); max-width: 10ch; }
.hero-copy p, .section-head p, .small, .profile-sidebar p, .messenger-main p, .surface-card p { color: var(--muted); line-height: 1.55; margin: 0; }
.hero-actions, .person-actions, .track-card-actions, .stack-links, .actions, .inline-actions, .footer-links { display: flex; gap: 12px; flex-wrap: wrap; }
.button, .site-btn, .player-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; min-height: 50px; font-weight: 700; }
.button:hover, .site-btn:hover, .player-btn:hover, .header-icon-btn:hover, .lang-pill:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.button, .site-btn.primary, .player-btn.is-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04111f; border-color: transparent; }
.button-secondary, .site-btn.secondary, .button.button-secondary { background: rgba(255,255,255,.04); color: var(--text); }
.button-ghost, .site-btn.ghost { background: transparent; }
.site-btn.danger { background: rgba(223,111,134,.12); border-color: rgba(223,111,134,.28); color: #ffd7df; }
.is-disabled { opacity: .55; cursor: not-allowed; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.hero-stat { padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.hero-stat strong { display: block; font-size: 28px; margin-bottom: 6px; }
.hero-visual { padding: 26px; display: grid; gap: 16px; }
.visual-main img { width: 100%; height: 420px; object-fit: cover; border-radius: 28px; }
.visual-stack { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.stack-card { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); min-height: 152px; }
.stack-card img { width: 100%; height: 152px; object-fit: cover; }
.stack-card span { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(7,13,27,.72); font-weight: 700; }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.section-head.split-head { align-items: start; }
.featured-grid, .shop-grid, .track-grid, .people-grid, .content-grid, .gallery-grid, .dashboard-grid, .track-admin-grid, .gift-grid, .gift-list, .file-library, .media-library-grid { display: grid; gap: 20px; }
.featured-grid, .shop-grid, .track-grid, .gallery-grid, .dashboard-grid, .media-library-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.people-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.content-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.featured-card, .shop-card, .track-card, .person-card, .content-card, .gallery-card { overflow: hidden; }
.featured-media img, .track-cover, .shop-visual img, .gallery-card img, .content-card img { width: 100%; object-fit: cover; }
.featured-media img, .track-cover { height: 300px; }
.featured-copy, .track-card-body, .person-card > div, .shop-copy, .content-card > div { padding: 22px; display: grid; gap: 14px; }
.track-card { display: grid; }
.track-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.track-card-head h3, .featured-copy h3, .person-card h3, .shop-copy h3, .content-card h3 { margin: 0; font-size: 20px; }
.track-card-body p, .featured-copy p, .shop-copy p, .person-card p, .content-card p { margin: 0; color: var(--muted); }
.track-card-actions { align-items: center; }
.track-hint { color: var(--muted); font-size: 14px; }
.person-card { grid-template-columns: 92px 1fr; padding: 22px; display: grid; gap: 18px; align-items: start; }
.person-card img { width: 92px; height: 92px; border-radius: 26px; object-fit: cover; border: 1px solid var(--line); }
.inline-badged-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-badge { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 999px; }
.status-badge svg { width: 16px; height: 16px; fill: currentColor; }
.verified-badge { background: rgba(122,165,255,.18); color: #8cd5ff; border: 1px solid rgba(122,165,255,.32); }
.premium-badge { background: rgba(255,210,91,.16); color: #ffd25b; border: 1px solid rgba(255,210,91,.28); }
.pill, .pill-row .pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13px; font-weight: 700; }
.pill.is-good { background: rgba(121,227,210,.1); border-color: rgba(121,227,210,.24); }
.compact-search { display: flex; gap: 12px; width: min(430px, 100%); }
.search-input, .admin-input, .admin-textarea, select.admin-input { width: 100%; min-height: 54px; padding: 14px 16px; color: var(--text); border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.03); outline: none; }
.admin-textarea { min-height: 140px; resize: vertical; }
.search-input:focus, .admin-input:focus, .admin-textarea:focus { border-color: rgba(122,165,255,.5); box-shadow: 0 0 0 4px rgba(122,165,255,.12); }
label { display: grid; gap: 10px; color: var(--text); font-weight: 600; }
form { margin: 0; }
.form-grid, .install-grid, .auth-grid, .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 20px; }
/* Don't stretch the login/2fa column to match the tall registration form —
   the cards (esp. the "resend code" card) used to balloon with empty space. */
.auth-grid { align-items: start; }
/* Compact, tidy 2fa block: smaller cards, inputs and buttons. */
.auth-2fa-stack,
.auth-recover-stack { display: grid; gap: 12px; align-self: start; max-width: 570px; }
.auth-recover-stack .surface-card { padding: 20px; }
.auth-recover-stack .stack-form { gap: 12px; }
.auth-recover-stack h2 { font-size: 1.25rem; margin: 0; }
.auth-recover-stack .admin-input { padding: 12px 14px; }
.auth-recover-stack .site-btn { padding: 12px 18px; }
.auth-recover-stack .small { margin: 0; }
.auth-2fa-stack .surface-card { padding: 20px; }
.auth-2fa-stack .stack-form { gap: 12px; }
.auth-2fa-stack h2 { font-size: 1.25rem; margin: 0; }
.auth-2fa-stack .admin-input { padding: 12px 14px; }
.auth-2fa-stack .site-btn { padding: 12px 18px; }
.auth-2fa-stack .small { margin: 0; }
.form-grid .span-2, .install-actions, .settings-grid .span-2 { grid-column: 1 / -1; }
.stack-form { display: grid; gap: 16px; }
.profile-layout, .messenger-layout, .admin-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; width: min(1320px, calc(100vw - 48px)); margin: 32px auto; }
.profile-sidebar, .messenger-sidebar { position: sticky; top: 116px; height: fit-content; display: grid; gap: 18px; }
.profile-avatar { width: 128px; height: 128px; object-fit: cover; border-radius: 34px; border: 1px solid var(--line); }
.back-link { color: #c9d7f5; }
.cover-card { overflow: hidden; min-height: 240px; background-size: cover; background-position: center; display: grid; align-items: end; }
.cover-overlay { padding: 28px; background: linear-gradient(180deg, rgba(7,13,27,.15), rgba(7,13,27,.85)); }
.dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.metric-card { padding: 22px; }
.metric-card strong { display: block; margin-top: 10px; font-size: 48px; }
.admin-wrap { padding: 28px 0 48px; }
.admin-topbar { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 22px; }
.admin-grid { grid-template-columns: 260px 1fr; }
.admin-sidebar { padding: 18px; position: sticky; top: 116px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.admin-sidebar a { display: block; padding: 12px 14px; border-radius: 14px; }
.admin-sidebar a:hover { background: rgba(255,255,255,.04); }
.admin-main { display: grid; gap: 22px; }
.admin-flash { padding: 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(121,227,210,.08); margin-bottom: 20px; }
.admin-flash.error { background: rgba(223,111,134,.12); border-color: rgba(223,111,134,.26); }
.track-admin-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.track-admin-card, .gift-admin-card, .media-library-card, .premium-order-card { padding: 20px; }
.admin-track-cover { width: 100%; height: 240px; border-radius: 22px; object-fit: cover; border: 1px solid var(--line); }
.premium-callout { padding: 28px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 28px; }
.premium-bank-box, .bank-card { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.premium-bank-box > div, .bank-card > div { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.03); display: grid; gap: 8px; }
.premium-bank-box span, .bank-card span { color: var(--muted); }
.site-footer { padding: 0 0 40px; }
.footer-row { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(7,13,27,.84); }
.global-player { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 60; display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 28px; background: rgba(5, 10, 20, 0.94); border: 0; box-shadow: var(--shadow); backdrop-filter:none; }
.global-player.is-hidden { display: none; }
.global-player__cover { width: 76px; height: 76px; border-radius: 22px; object-fit: cover; }
.global-player__meta { display: grid; gap: 12px; min-width: 0; }
.global-player__headline { display: grid; gap: 4px; }
.global-player__headline strong { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-player__headline span { color: var(--muted); }
.global-player__seek-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
#globalPlayerSeek { width: 100%; accent-color: #7fd9d3; }
.global-player__controls { display: flex; gap: 10px; }
.player-btn { width: 54px; height: 54px; padding: 0; font-size: 18px; }
.player-btn.is-primary { width: auto; min-width: 100px; padding: 0 18px; }
.user-list-item, .message-item, .gift-item { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.03); }
.user-list-item img, .message-avatar, .gift-item img { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; }
.user-list-item.is-active { border-color: rgba(122,165,255,.4); }
.message-thread { display: grid; gap: 12px; margin: 24px 0; }
.message-item.me { margin-left: 10%; }
.message-item.other { margin-right: 10%; }
.reply-preview { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); margin-bottom: 12px; }
.reply-preview.is-hidden { display: none; }
.install-body { min-height: 100vh; display: grid; align-items: center; }
.install-card { padding: 34px; margin: 24px 0; }
.install-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: start; margin-bottom: 22px; }
.install-tip.compact { padding: 20px; }
.content-grid > *,.gallery-grid > *,.shop-grid > * { min-width: 0; }
.news-card,.bio-card,.gallery-card,.shop-card { border-radius: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.03); overflow: hidden; }
.news-card > div,.bio-card > div,.gallery-card > div { padding: 22px; }
.shop-visual { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.shop-visual img { width: 100%; height: 100%; border-radius:40px;}
.media-preview { min-height: 200px; border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: grid; place-items: center; background: rgba(255,255,255,.03); }
.media-preview audio { width: 100%; }
.media-meta code { display: block; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-box, .receipt-box, .order-status-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.order-status-card.success { background: rgba(121,227,210,.1); border-color: rgba(121,227,210,.24); }
.receipt-preview { width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px; margin-top: 12px; }
@media (max-width: 1100px) {
  .hero-grid, .premium-callout, .profile-layout, .messenger-layout, .admin-grid, .install-head, .auth-grid, .install-grid, .settings-grid { grid-template-columns: 1fr; }
  .featured-grid, .shop-grid, .track-grid, .gallery-grid, .people-grid, .content-grid, .track-admin-grid, .dashboard-grid, .media-library-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-sidebar, .messenger-sidebar, .admin-sidebar { position: static; }
  .site-nav { display: none; position: fixed; top: 108px; left: 16px; right: 16px; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: rgba(6,12,24,.96); box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .menu-toggle { display: block; }
}
@media (max-width: 760px) {
  .container, .auth-wrap, .install-shell, .admin-wrap, .profile-layout, .messenger-layout { width: min(calc(100vw - 20px), 100%); }
  .header-inner, .hero-copy, .surface-card, .profile-sidebar, .messenger-sidebar, .messenger-main, .install-card, .auth-card, .track-card-body, .featured-copy, .shop-copy, .content-card > div, .person-card { padding: 20px; }
  .brand-copy strong { font-size: 22px; }
  .brand-copy small { font-size: 14px; }
  .hero-copy h1 { font-size: clamp(34px, 12vw, 56px); }
  .hero-stats, .premium-bank-box, .bank-card, .form-grid, .install-grid, .auth-grid, .settings-grid, .featured-grid, .shop-grid, .track-grid, .gallery-grid, .people-grid, .content-grid, .track-admin-grid, .dashboard-grid, .media-library-grid { grid-template-columns: 1fr; }
  .section-head, .admin-topbar, .footer-row, .header-inner { align-items: start; }
  .section-head, .footer-row, .admin-topbar { flex-direction: column; }
  .header-inner { grid-template-columns: 1fr; }
  .header-actions { width: 100%; justify-content: space-between; }
  .visual-main img, .featured-media img, .track-cover { height: 240px; }
  .global-player { left: 10px; right: 10px; bottom: 10px; grid-template-columns: 60px 1fr; }
  .global-player__controls { grid-column: 1 / -1; justify-content: space-between; }
}


.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:16px;top:16px;z-index:99;padding:12px 16px;background:var(--panel-strong);border:1px solid var(--line);border-radius:14px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease}.reveal.is-visible{opacity:1;transform:none}
.cookie-banner{position:fixed;right:16px;bottom:16px;z-index:60;max-width:380px;padding:18px;border-radius:22px;border:1px solid var(--line);background:var(--panel-strong);box-shadow:var(--shadow)}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.gallery-modal[hidden]{display:none}.gallery-modal{position:fixed;inset:0;z-index:80}.gallery-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.player{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}.player-button{width:48px;height:48px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04111f;font-weight:800}.player-range{width:100%}.player-times{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.streaming-panel,.site-footer .footer-inner{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow);padding:28px}.stream-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stream-link{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03)}.stream-link img{width:28px;height:28px;object-fit:contain}
.site-footer{padding:0 0 36px}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.footer-meta{display:grid;gap:8px}
@media (max-width:760px){.stream-links{grid-template-columns:1fr}.cookie-banner{left:10px;right:10px;max-width:none}}


.utility-main{width:min(1040px,calc(100vw - 48px));margin:0 auto;padding:32px 0 96px}
.utility-card{padding:32px;display:grid;gap:18px;max-width:100%}
.utility-card h1{margin:0;font-size:clamp(38px,5vw,62px);line-height:1.02}
.utility-actions{display:flex;gap:12px;flex-wrap:wrap}
.legal-list{margin:0;padding-left:24px;display:grid;gap:10px;color:var(--text)}
.legal-list li{line-height:1.6}
.profile-main,.auth-card,.surface-card,.media-library-card,.gift-admin-card,.track-admin-card,.premium-order-card{min-width:0}
.surface-card h2,.surface-card h3,.auth-card h2,.profile-main h2,.profile-main h3{margin:0 0 12px}
.surface-card form,.gift-admin-card form,.track-admin-card form{min-width:0}
.profile-main .surface-card,.profile-main .cover-card{overflow:hidden}
.info-list{display:grid;gap:14px}
.info-list > div{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)}
.gift-grid.compact-gifts{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.gift-card{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);min-width:0}
.gift-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.03)}
.gift-card>strong,.gift-card>span{display:block}
.gift-card .lsv-coin{display:inline-block}
.gift-card .admin-input{width:100%}
.admin-input,.admin-textarea{width:100%;max-width:100%}
.admin-textarea{min-height:140px;resize:vertical}
.stack-form{display:grid;gap:16px;min-width:0}
.stack-form label,.form-grid label,.settings-grid label{display:grid;gap:10px;min-width:0}
.auth-grid{align-items:start}
.auth-card .surface-card{padding:24px}
.auth-card .stack-form .site-btn{width:100%}
.auth-inline-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.checkbox-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted)}
.auth-modal[hidden]{display:none!important}
.auth-modal{position:fixed;inset:0;z-index:90}
.auth-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.auth-modal__dialog{position:relative;z-index:1;width:min(460px,calc(100vw - 24px));margin:8vh auto;padding:22px;border-radius:24px;border:1px solid var(--line);background:var(--panel-strong);box-shadow:var(--shadow);display:grid;gap:14px}
.auth-modal__head{display:flex;justify-content:space-between;gap:16px;align-items:start}
.auth-modal__close{width:48px;height:48px;padding:0}
.profile-sidebar,.profile-main,.auth-card,.media-library-card,.gift-admin-card,.track-admin-card,.premium-order-card{overflow-wrap:anywhere}
.media-library-card{padding:18px;display:grid;gap:14px;align-content:start}
.media-library-card .actions{align-items:stretch}
.media-library-card .actions > *{flex:1 1 150px}
.media-library-card .actions form{display:flex;flex:1 1 150px}
.media-library-card .actions form .button{width:100%}
.cover-overlay{padding:32px;display:grid;gap:12px;min-height:210px;align-content:end}
.cover-overlay h2{margin:0;font-size:clamp(30px,4vw,46px);line-height:1.04}
.cover-overlay p{max-width:72ch}
.profile-public-layout .cover-overlay,.profile-layout .cover-overlay{background:linear-gradient(180deg,rgba(4,8,18,.18),rgba(4,8,18,.9))}
@media (max-width:1100px){
  .gift-grid.compact-gifts{grid-template-columns:1fr}
  .utility-main{width:min(calc(100vw - 20px),100%)}
}
@media (max-width:760px){
  .utility-card{padding:20px}
  .auth-modal__dialog{margin:6vh auto;padding:20px}
  .auth-inline-meta{align-items:flex-start;flex-direction:column}
}
.messenger-main { display:grid; gap:18px; }
.message-thread { display:grid; gap:14px; max-height:58vh; overflow:auto; padding-right:6px; }
.message-bubble { max-width:min(680px, 100%); padding:16px 18px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.04); display:grid; gap:10px; }
.message-bubble.is-me { margin-left:auto; background:linear-gradient(180deg, rgba(92,168,255,.16), rgba(124,241,211,.08)); }
.message-meta,.message-actions-row { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.message-status { color:var(--muted); font-size:.82rem; }
.message-attachment img { display:block; width:min(280px,100%); border-radius:18px; border:1px solid var(--line); }
.message-sticker { width:132px; max-width:100%; display:block; }
.compose-box { display:grid; gap:14px; }
.compose-tools { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.upload-inline-btn input { display:none; }
.sticker-picker{
  display:block;
  width:100%;
  min-width:0;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.sticker-option { border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:16px; padding:8px; }
.sticker-option img { width:100%; aspect-ratio:1; object-fit:contain; }
.typing-indicator { padding:0 2px; }
.reply-snippet { padding:10px 12px; border-left:3px solid rgba(124,241,211,.55); background:rgba(255,255,255,.04); border-radius:12px; color:var(--muted); }
.gift-item { text-decoration:none; color:inherit; }
@media (max-width: 860px) {
  .message-bubble { max-width:100%; }
  .compose-tools > * { width:100%; }
}


.reply-link,
.site-chip-btn {
  appearance:none;
  border:1px solid rgba(124,241,211,.18);
  background:rgba(124,241,211,.08);
  color:#dffcf5;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  line-height:1;
}
.reply-link:hover,.site-chip-btn:hover { background:rgba(124,241,211,.14); }
.request-item { justify-content:space-between; align-items:center; gap:16px; }
.request-actions { display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.selected-sticker-badge {
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05);
}
.selected-sticker-badge img { width:32px; height:32px; object-fit:contain; }
.sticker-option { display:grid; gap:6px; justify-items:center; color:var(--text); }
.sticker-option span { font-size:.78rem; color:var(--muted); }
.upload-progress { display:grid; gap:8px; margin-top:8px; width:100%; }
.upload-progress__meta { display:flex; justify-content:space-between; gap:12px; font-size:.84rem; color:var(--muted); }
.upload-progress__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-progress__bar { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.upload-progress__bar span { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-2, #7cf1d3)); transition:width .22s ease; }
@media (max-width: 860px) { .request-item { align-items:flex-start; } .request-actions { margin-left:0; width:100%; } }


.upload-progress.is-complete .upload-progress__bar span { background:linear-gradient(90deg, var(--accent-2, #7cf1d3), var(--accent)); }
.upload-progress.is-error .upload-progress__bar span { background:linear-gradient(90deg, #ff7a92, #ffb199); }
.notifications-layout { width:min(1200px, calc(100vw - 24px)); margin:24px auto 60px; display:grid; gap:18px; }
.notifications-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.notifications-filters { display:flex; gap:10px; flex-wrap:wrap; }
.notification-section { display:grid; gap:14px; }
.notification-list { display:grid; gap:12px; }
.notification-card { display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.notification-card img { width:56px; height:56px; border-radius:18px; object-fit:cover; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.notification-card__copy { display:grid; gap:6px; min-width:0; flex:1; }
.notification-card__copy p, .notification-card__copy .small { margin:0; }
.notification-card__meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.84rem; }
.notification-pill { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); font-size:.78rem; font-weight:700; }
.notification-card__actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-left:auto; }
@media (max-width: 860px) {
  .notification-card { flex-direction:column; }
  .notification-card__actions { margin-left:0; width:100%; }
}

.notifications-actions-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.avatar-stack{position:relative;display:inline-block}.online-dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:999px;border:2px solid rgba(9,15,28,.95);background:#687792}.online-dot.is-online{background:#64e5ae;box-shadow:0 0 0 4px rgba(100,229,174,.16)}.toggle-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}.toggle-card input{margin-top:4px}.compact-settings-form{align-items:start}.sticker-pack{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px 12px;background:rgba(255,255,255,.03)}.sticker-pack summary{cursor:pointer;font-weight:700}.sticker-pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;padding-top:12px}.toast-host{position:fixed;top:18px;right:18px;z-index:120;display:grid;gap:10px;max-width:min(360px,calc(100vw - 24px))}.toast-notice{display:grid;gap:6px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(10,18,33,.95);backdrop-filter:none;color:#eef4ff;transform:translateY(-10px);opacity:0;transition:transform .26s ease,opacity .26s ease, box-shadow .26s ease;box-shadow:0 18px 38px rgba(0,0,0,.35)}.toast-notice.is-visible{transform:translateY(0);opacity:1}.toast-notice.is-messages{border-color:rgba(122,165,255,.35)}.toast-notice.is-friends{border-color:rgba(122,230,210,.35)}.toast-notice.is-gifts{border-color:rgba(255,212,122,.35)}.toast-badge{font-size:12px;font-weight:800;color:#79e3d2}.reply-link.site-chip-btn{padding:8px 12px;border-radius:999px;background:rgba(122,165,255,.12);border:1px solid rgba(122,165,255,.22)}


.header-notice-wrap{position:relative}
.header-notice-dropdown{position:absolute;right:0;top:calc(100% + 12px);width:min(380px,calc(100vw - 24px));padding:14px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(10,18,33,.98),rgba(5,11,22,.98));box-shadow:0 24px 56px rgba(0,0,0,.42);backdrop-filter:none;z-index:85}
.header-notice-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.header-notice-head small{color:#9eb3d7}
.header-notice-list{display:grid;gap:8px;max-height:min(52vh,420px);overflow:auto}.header-notice-list::-webkit-scrollbar{width:10px}.header-notice-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.header-notice-item,.header-notice-list a{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#eef4ff}
.header-notice-all{display:flex;justify-content:center;align-items:center;margin-top:10px;min-height:46px;border-radius:16px;background:rgba(122,165,255,.12);border:1px solid rgba(122,165,255,.24);color:#fff}
.header-player-close{display:flex;align-items:center;justify-content:center}
.header-player-dialog{max-width:min(1180px,calc(100vw - 24px));max-height:min(82vh,900px)}
.header-player-shell{grid-template-columns:minmax(0,1.35fr) minmax(280px,.72fr);gap:18px}.header-player-stage{padding:22px}.header-player-playlist{padding:18px}
.header-player-now{border-radius:26px;padding:18px;gap:18px;align-items:center}.header-player-cover{width:164px;height:164px;flex:0 0 164px}.header-player-now-copy strong{font-size:clamp(28px,3vw,42px)}.header-player-now-copy span{font-size:22px;color:#b8c8e6}
.header-player-control.is-play .icon-pause,.header-player-control.is-play .play-eq{display:none}.header-player-control.is-play.is-playing .icon-play{display:none}.header-player-control.is-play.is-playing .icon-pause,.header-player-control.is-play.is-playing .play-eq{display:inline-flex}
.play-eq{gap:3px;align-items:flex-end;height:16px}.play-eq i{display:block;width:3px;border-radius:99px;background:#7ae6d2;animation:playerEq 1s ease-in-out infinite}.play-eq i:nth-child(2){animation-delay:.15s}.play-eq i:nth-child(3){animation-delay:.3s}@keyframes playerEq{0%,100%{height:5px}50%{height:15px}}
.home-user-card .avatar-stack>img{width:72px;height:72px;border-radius:22px;object-fit:cover}.home-user-presence{display:block;margin-top:8px;color:#aab8d6;font-size:13px}.home-user-presence.is-online{color:#7ae6d2}
.upload-inline-btn{position:relative;overflow:hidden}.upload-inline-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
@media (max-width: 900px){.header-player-shell{grid-template-columns:1fr}.header-player-cover{width:112px;height:112px;flex-basis:112px}.header-player-now-copy strong{font-size:26px}.header-player-now-copy span{font-size:18px}}
@media (max-width: 680px){.header-notice-dropdown{right:-20px}.header-player-now{grid-template-columns:1fr;justify-items:start}.header-player-cover{width:96px;height:96px}.message-thread{min-height:240px}}

.header-notice-dropdown[hidden], .header-player-panel[hidden], .auth-modal[hidden]{display:none !important;}
body.header-player-open{overflow:hidden;}
body.header-player-open .site-header{filter:none;}
.header-icon-btn.is-playing,.header-player-btn.is-playing{border-color:rgba(122,230,210,.4);box-shadow:0 0 0 4px rgba(122,230,210,.12);}
.online-state-badge{width:18px;height:18px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.online-state-badge i{display:block;width:8px;height:8px;border-radius:999px;background:#7f8aa1}
.online-state-badge.is-online i{background:#64e5ae;box-shadow:0 0 0 4px rgba(100,229,174,.16)}
.header-notice-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.header-notice-head-actions{display:flex;align-items:center;gap:10px}.header-notice-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer}.header-notice-dropdown{display:grid;gap:12px}.header-notice-all{display:flex;align-items:center;justify-content:center}

.auth-wrap{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:40px 0 60px}.auth-card{display:grid;gap:24px}.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.auth-card .stack-form{display:grid;gap:14px}.auth-card .stack-form label{display:grid;gap:8px}.auth-inline-meta .button-ghost{padding:10px 14px;min-height:44px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);white-space:nowrap}.login-card{min-height:min(72vh,720px);align-content:center}.toggle-card,.checkbox-row,.auth-inline-meta,.profile-main .surface-card,.profile-sidebar,.messenger-main,.messenger-sidebar,.surface-card form,.settings-grid,.dashboard-grid,.gift-list,.gift-grid{min-width:0}.toggle-card strong,.toggle-card span,.admin-label,.small,.surface-card p,.surface-card h2,.surface-card h3{overflow-wrap:anywhere}.public-cover,.cover-card{overflow:hidden}@media(max-width:860px){.auth-grid{grid-template-columns:1fr}.auth-wrap{width:min(calc(100vw - 18px),1180px)}}


/* ===== hotfix 2026-04-14 ===== */
html,body{max-width:100%;overflow-x:hidden}
body.app-shell{min-height:100vh}
body.app-shell .surface-card,body.app-shell .profile-sidebar,body.app-shell .messenger-sidebar,body.app-shell .messenger-main,body.app-shell .auth-card,body.app-shell .install-card{backdrop-filter:blur(14px)}
form,label,.stack-form,.settings-grid,.form-grid,.auth-grid,.dashboard-grid,.gift-grid,.gift-list,.messenger-layout,.profile-layout,.profile-main,.messenger-main,.messenger-sidebar{min-width:0}
label{display:grid;gap:8px}
input,textarea,select,button{max-width:100%}
.admin-input,.admin-textarea,select.admin-input{width:100%;min-width:0}
.form-grid{align-items:start}
.form-grid>.span-2,.settings-grid>.span-2{grid-column:1/-1}
.profile-layout{align-items:start;grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
.profile-main,.messenger-main{display:grid;gap:22px;min-width:0}
.profile-sidebar{position:sticky;top:24px;align-self:start;display:grid;gap:16px}
.profile-sidebar .stack-links{display:grid;grid-template-columns:1fr;gap:10px}
.profile-sidebar .site-btn{width:100%}
.cover-card{background-position:center;background-size:cover;position:relative;overflow:hidden;min-height:280px;display:flex;align-items:flex-end}
.cover-overlay{width:100%;padding:32px;border-radius:24px;background:linear-gradient(180deg,rgba(3,8,18,.12),rgba(3,8,18,.82) 70%)}
.cover-overlay h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;max-width:12ch;margin:0 0 10px}
.cover-overlay p{max-width:62ch}
.bank-card,.colon-bank-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bank-card>div,.colon-bank-box>div,.info-list>div{padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.info-list{display:grid;gap:12px}
#profile-preferences .compact-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.toggle-card{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025))}
.toggle-card input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--accent)}
.toggle-card span{display:grid;gap:6px;min-width:0}
.toggle-card strong{display:block;font-size:1.05rem;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.toggle-card small{display:block;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
#profile-preferences .admin-label{display:grid;gap:10px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.025))}
#profile-preferences .site-btn{min-width:220px}
.auth-wrap{padding:32px 0 64px}
.auth-card{padding:32px}
.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.auth-card .surface-card,.auth-card .stack-form,.auth-grid>.surface-card{height:100%}
.auth-inline-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.checkbox-row{display:flex;align-items:center;gap:10px}
.checkbox-row input{width:18px;height:18px}
.messenger-layout{align-items:start;grid-template-columns:minmax(280px,340px) minmax(0,1fr)}
.messenger-sidebar{position:sticky;top:24px;display:grid;gap:14px;max-height:calc(100vh - 48px);overflow:auto}
.user-list-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:18px;border:1px solid transparent;background:rgba(255,255,255,.025)}
.user-list-item:hover,.user-list-item.is-active{border-color:rgba(122,165,255,.2);background:rgba(122,165,255,.08)}
.user-list-item img{width:52px;height:52px;border-radius:16px;object-fit:cover}
.message-thread{min-height:360px;max-height:60vh;overflow:auto;padding-right:4px}
.message-bubble{max-width:min(100%,720px)}
.compose-box{display:grid;gap:14px}
.compose-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.compose-tools>*{flex:1 1 180px}
.gift-list{grid-template-columns:1fr}
.gift-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.gift-item img{width:56px;height:56px;border-radius:16px;object-fit:cover}
.request-item{grid-template-columns:56px minmax(0,1fr) auto;align-items:center}
.request-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.notifications-layout .notification-list,.notifications-layout .notification-section{min-width:0}
body.utility-page .header-inner{grid-template-columns:auto 1fr auto}
@media (max-width:1100px){.profile-layout,.messenger-layout{grid-template-columns:1fr}.profile-sidebar,.messenger-sidebar{position:static;max-height:none}.cover-card{min-height:240px}.cover-overlay h2{max-width:none}}
@media (max-width:860px){.auth-grid,.dashboard-grid,.bank-card,.colon-bank-box,#profile-preferences .compact-settings-form,.request-item{grid-template-columns:1fr}.auth-card,.profile-sidebar,.messenger-sidebar,.messenger-main,.surface-card{padding:20px}.compose-tools>*{flex:1 1 100%}.request-actions{justify-content:stretch}.request-actions>*{flex:1 1 100%}.cover-overlay{padding:24px}}
@media (max-width:640px){.container,.auth-wrap,.install-shell,.admin-wrap,.profile-layout,.messenger-layout,.notifications-layout{width:min(calc(100vw - 16px),1320px)}.header-inner{padding:14px 16px}.profile-avatar{width:112px;height:112px}.cover-card{min-height:200px}.cover-overlay h2{font-size:clamp(1.7rem,9vw,2.4rem)}.toggle-card{grid-template-columns:20px minmax(0,1fr);padding:16px}.auth-inline-meta{align-items:stretch}.auth-inline-meta>*{width:100%}.button,.site-btn{width:100%}}

/* ===== fixes 2026-04-14 rev3 ===== */
input[type="range"]{accent-color:var(--accent)}
#profile-preferences input[type="range"]{appearance:none;-webkit-appearance:none;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--range-fill,70%),rgba(255,255,255,.12) var(--range-fill,70%),rgba(255,255,255,.12) 100%);outline:none}
#profile-preferences input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:999px;background:#1f7cff;border:2px solid #97fff1;box-shadow:0 0 0 4px rgba(31,124,255,.16)}
#profile-preferences input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:999px;background:#1f7cff;box-shadow:0 0 0 4px rgba(31,124,255,.16)}
.auth-modal__dialog{max-width:min(460px,calc(100vw - 24px))}
.auth-modal__dialog .stack-form,.auth-forgot-form{display:grid;gap:14px;align-content:start}
.auth-modal__dialog .site-btn{width:100%}
.compose-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.compose-tools>*{min-width:0}
.compose-tools .selected-sticker-badge{grid-column:1/-1;justify-self:start}
.improved-sticker-picker{padding:16px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.sticker-pack{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.03)}
.sticker-pack summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--text)}
.sticker-pack summary::-webkit-details-marker{display:none}
.sticker-pack-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.sticker-option{padding:12px;border-radius:18px;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.sticker-option:hover{transform:translateY(-2px);border-color:rgba(122,165,255,.24);background:rgba(122,165,255,.08)}
.notification-card__actions .pill,.section-head .pill,.sidebar-headline .pill,.stack-links .pill{display:none}
.notifications-filters .site-btn{min-width:140px;justify-content:center}
.notifications-actions-bar .site-btn{min-width:180px;justify-content:center}
.notification-card{position:relative}
.notification-card__actions{align-self:center}
.gift-item img[src=""],.notification-card img[src=""],.message-attachment img[src=""],.promo-player-cover img[src=""],.header-player-cover img[src=""]{display:none}
.gift-item,.notification-card,.message-bubble,.sticker-pack,.selected-sticker-badge{min-width:0}
.upload-inline-btn{justify-content:center}
.message-bubble p{margin:0;line-height:1.55}
.message-bubble .message-attachment img{max-height:220px;object-fit:cover}
.message-bubble .message-sticker{border-radius:18px;background:rgba(255,255,255,.03);padding:6px}
@media(max-width:980px){.compose-tools{grid-template-columns:1fr 1fr}.compose-tools .site-btn.primary{grid-column:1/-1}}
@media(max-width:640px){.compose-tools{grid-template-columns:1fr}.auth-modal__dialog{margin:8vh auto;padding:18px}}


/* 2026-04-14 fixes */
.site-header,.global-player,.toast-notice,.header-notice-dropdown,.surface-card,.profile-sidebar,.messenger-sidebar,.messenger-main,.auth-card,.install-card{backdrop-filter:none !important;}
body.header-player-open .site-header{filter:none !important;}
.header-player-btn{overflow:hidden;}
.header-player-btn .header-player-mini-eq{display:none;align-items:flex-end;gap:2px;height:16px;}
.header-player-btn .header-player-mini-eq i{display:block;width:3px;height:6px;border-radius:999px;background:currentColor;animation:playerEq 1s ease-in-out infinite;}
.header-player-btn .header-player-mini-eq i:nth-child(2){animation-delay:.15s}
.header-player-btn .header-player-mini-eq i:nth-child(3){animation-delay:.3s}
.header-player-btn.is-playing .header-player-icon{display:none;}
.header-player-btn.is-playing .header-player-mini-eq{display:inline-flex;}
.compose-tools{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));align-items:start;}
.compose-tools .site-btn{max-width:100%;}
.compose-box .upload-progress,.compose-box .sticker-picker,.compose-box .selected-sticker-badge{grid-column:1/-1;}
.compose-box .upload-progress{margin-top:0;}
#messageComposer .upload-inline-btn{white-space:normal;text-align:center;justify-content:center;min-height:52px;display:inline-flex;align-items:center;}
#messageComposer .admin-textarea{min-height:120px;}
@media (max-width: 860px){.compose-tools{grid-template-columns:1fr;}.compose-tools > *{width:100%;}}


.messenger-layout { align-items:start; }
.messenger-main { min-width:0; min-height:calc(100vh - 150px); grid-template-rows:auto auto minmax(280px, 1fr) auto auto; }
.message-thread { display:flex; flex-direction:column; align-items:stretch; min-height:320px; max-height:62vh; overflow:auto; overscroll-behavior:contain; padding-right:8px; }
.message-thread > .small { margin:auto 0; }
.message-bubble { width:min(680px, 100%); box-sizing:border-box; }
.compose-box { min-width:0; }
.compose-box .admin-textarea { min-height:132px; }
.compose-tools { display:grid; grid-template-columns:repeat(3, minmax(0, max-content)); align-items:start; justify-content:start; }
.compose-tools > * { min-width:0; }
.compose-tools .selected-sticker-badge { align-self:center; }
.auth-grid > .surface-card, .auth-card .stack-form { min-width:0; }
.auth-card input, .auth-card textarea, .auth-card button { position:relative; z-index:1; }
.form-grid > label, .form-grid > .span-2, .dashboard-grid > .surface-card { min-width:0; }
.form-grid > label input[type="file"], .stack-form input[type="file"] { width:100%; min-width:0; }
.home-users-section .admin-flash { margin:0 0 18px; }
.home-user-card { min-width:0; }
.home-user-meta { display:grid; gap:14px; min-width:0; }
.home-user-copy { min-width:0; display:grid; gap:8px; }
.home-user-copy > p { overflow-wrap:anywhere; }
.home-user-status { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.9rem; }
.home-user-status .pill { color:var(--text); }
.home-user-actions form { flex:1 1 180px; min-width:0; }
.home-user-actions form .button, .home-user-actions form .button-secondary, .home-user-actions .pill { width:100%; }
.home-user-actions .pill { justify-content:center; min-height:42px; box-sizing:border-box; }
@media (max-width:980px){ .messenger-main { min-height:auto; grid-template-rows:auto auto minmax(240px, 1fr) auto auto; } .compose-tools{grid-template-columns:repeat(2,minmax(0,1fr));} .compose-tools .site-btn.primary{grid-column:1/-1;} }
@media (max-width:640px){ .message-thread{max-height:none; min-height:260px;} .compose-tools{grid-template-columns:1fr;} }

.header-player-controls,.promo-player-controls{display:flex;align-items:center;gap:10px}
.header-player-control,.promo-player-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);padding:0;font-size:1.2rem;line-height:1;box-shadow:none;-webkit-appearance:none;appearance:none;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.header-player-control:hover,.promo-player-btn:hover{transform:translateY(-1px);border-color:rgba(121,227,210,.36);background:rgba(255,255,255,.1)}
.header-player-control.is-play,.promo-player-btn.is-play{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent-2,#79e3d2));color:#07111f;border-color:transparent;font-weight:800}
.header-player-control.is-play .icon-pause,.header-player-control.is-play .play-eq,.promo-player-btn.is-play .icon-pause,.promo-player-btn.is-play .play-eq{display:none}
.header-player-control.is-play.is-playing .icon-play,.promo-player-btn.is-play.is-playing .icon-play{display:none}
.header-player-control.is-play.is-playing .icon-pause,.header-player-control.is-play.is-playing .play-eq,.promo-player-btn.is-play.is-playing .icon-pause,.promo-player-btn.is-play.is-playing .play-eq{display:inline-flex}
.play-eq{gap:2px;align-items:flex-end}
.play-eq i{display:block;width:3px;height:10px;border-radius:999px;background:currentColor;animation:eqWave 1s ease-in-out infinite}
.play-eq i:nth-child(2){animation-delay:.16s}.play-eq i:nth-child(3){animation-delay:.32s}
@keyframes eqWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}
.profile-status-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.profile-player-fab{position:fixed;right:22px;bottom:22px;z-index:65;border:1px solid var(--line);border-radius:999px;padding:14px 18px;background:linear-gradient(135deg,var(--accent),var(--accent-2,#79e3d2));color:#07111f;font-weight:800;box-shadow:var(--shadow);cursor:pointer;transition:transform .22s ease,opacity .22s ease,background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;transform:none}.profile-player-fab:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(121,227,210,.18),var(--shadow)}.profile-player-fab:active{transform:translateY(0)}.message-file-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}@media(max-width:860px){.profile-status-columns{grid-template-columns:1fr}.profile-player-fab{right:14px;bottom:14px}}

/* r6 targeted fixes */
#edit-profile .profile-edit-grid{margin-top:18px}
.profile-status-columns .pill,.profile-sidebar .pill-row.compact-pill-row .pill{font-size:11px;line-height:1.15;padding:10px 12px}
#friend-requests h2{position:relative;display:inline-flex;align-items:center;padding-right:28px}
#friend-requests h2 .icon-badge{right:0;top:-4px}
.sticker-pack-grid{display:grid}


/* 2026-04-14 r7 profile + messages hotfix */
.messenger-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.messenger-head>.user-list-item{flex:1 1 320px;min-width:0}
.messenger-head>form{display:flex;margin-top:8px}
.messenger-head>form .site-btn{min-width:220px}
.profile-main .dashboard-grid>.surface-card{display:grid;gap:16px;align-content:start}
.profile-main .dashboard-grid>.surface-card>strong{display:block;font-size:1.25rem;line-height:1.28;overflow-wrap:anywhere}
.profile-main .dashboard-grid>.surface-card>p,.profile-main .dashboard-grid>.surface-card .small{overflow-wrap:anywhere}
.bank-card,.colon-bank-box{margin-top:2px}
.bank-card>div,.colon-bank-box>div,.order-status-card{min-width:0;align-content:start}
.bank-card>div strong,.colon-bank-box>div strong,.order-status-card strong,.order-status-card p{overflow-wrap:anywhere;word-break:break-word;line-height:1.35}
.order-status-card{display:grid;gap:6px}
.surface-card .stack-form>label,.surface-card .form-grid>label{display:grid;gap:8px;min-width:0}
.notification-list{display:grid;gap:14px}
.profile-player-fab.is-playing{box-shadow:0 0 0 4px rgba(121,227,210,.18),var(--shadow)}
.profile-sidebar .stack-links [data-live-message-count],.profile-sidebar .stack-links [data-live-notice-count]{display:inline-flex}
@media (max-width:860px){
  .messenger-head{gap:14px}
  .messenger-head>form{margin-top:0;width:100%}
  .messenger-head>form .site-btn{width:100%;min-width:0}
}





/* 2026-04-14 r12 exact shared player sync */
.header-player-dialog{position:relative;z-index:1;width:min(1240px,calc(100vw - 32px));margin:112px auto 24px;max-height:calc(100vh - 120px);overflow:auto}
.header-player-shell{width:100%;position:relative}
.header-player-close{position:absolute;top:18px;right:18px;z-index:3}
.header-player-playlist{min-height:100%;box-sizing:border-box}
@media (max-width:840px){.header-player-dialog{width:calc(100vw - 20px);margin-top:96px}}


/* 2026-04-14 r13 unified premium player final */
.header-player-panel{position:fixed;inset:0;z-index:80}
.header-player-backdrop{position:absolute;inset:0;background:rgba(2,6,15,.68);backdrop-filter:blur(10px) saturate(1.02)}
.header-player-dialog{position:relative;z-index:1;width:min(1220px,calc(100vw - 32px));margin:96px auto 24px;max-height:calc(100vh - 120px);overflow:visible}
.header-player-shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;width:100%;min-height:min(58vh,620px);overflow:hidden;border-radius:36px;border:1px solid rgba(130,170,255,.2);background:linear-gradient(140deg,rgba(10,19,38,.96),rgba(5,10,22,.97));box-shadow:0 40px 120px rgba(0,0,0,.48)}
.header-player-shell::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(103,164,255,.22),transparent 36%),radial-gradient(circle at bottom right,rgba(124,241,211,.14),transparent 28%);pointer-events:none}
.header-player-close{position:absolute;top:16px;right:16px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--text);font-size:1.35rem;line-height:1}
.header-player-stage,.header-player-playlist,.header-player-now{position:relative;min-width:0}
.header-player-stage{display:grid;align-content:start;gap:14px;padding:24px}
.header-player-stage h3{margin:0;font-size:clamp(1.55rem,3.2vw,2.45rem)}
.header-player-stage p{margin:0;color:var(--muted);max-width:56ch}
.header-player-now{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:'cover copy' 'controls controls' 'progress progress';gap:16px;max-width:760px;padding:22px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}
.header-player-cover{grid-area:cover;width:96px;height:96px;aspect-ratio:1;border-radius:26px;overflow:hidden;background:rgba(255,255,255,.04)}
.header-player-cover img{display:block;width:100%;height:100%;object-fit:cover}
.header-player-now-copy{grid-area:copy;display:grid;gap:6px;min-width:0;align-content:center}
.header-player-now-copy strong{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.12;overflow-wrap:anywhere}
.header-player-now-copy span{font-size:1rem;color:#bcc9df;overflow-wrap:anywhere}
.header-player-controls{grid-area:controls;display:flex;align-items:center;gap:10px}
.header-player-progress{grid-area:progress;display:grid;gap:8px;min-width:0}
.header-player-progress input{width:100%}
.header-player-playlist{display:grid;align-content:start;gap:14px;padding:24px 20px;border-left:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));box-sizing:border-box}
.header-player-playlist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:52px}
.header-player-track{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:14px;border-radius:22px;border:1px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));text-align:left;color:var(--text);box-sizing:border-box}
.header-player-track img{display:block;width:64px;height:64px;border-radius:18px;object-fit:cover;background:rgba(255,255,255,.04)}
.header-player-track-copy{display:grid;gap:4px;min-width:0}
.header-player-track-copy strong,.header-player-track-copy small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-player-track-copy strong{font-size:1rem;line-height:1.2}
.header-player-track-copy small{font-size:.92rem;color:var(--muted)}
.header-player-index,.header-player-lock{justify-self:end}
@media (max-width:1100px){.header-player-shell{grid-template-columns:1fr}.header-player-playlist{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.header-player-playlist-head{padding-right:52px}}
@media (max-width:760px){.header-player-dialog{width:calc(100vw - 14px);margin-top:74px}.header-player-stage{padding:18px}.header-player-now{grid-template-columns:1fr;grid-template-areas:'cover' 'copy' 'controls' 'progress';padding:18px}.header-player-cover{width:84px;height:84px}.header-player-track{grid-template-columns:56px minmax(0,1fr) auto;gap:12px}.header-player-track img{width:56px;height:56px;border-radius:16px}}

/* 2026-04-15 v12 social/profile/media polish */
html{scroll-behavior:smooth}
body{opacity:1;transition:opacity .18s ease,transform .18s ease}
body.is-page-leaving{opacity:.86;transform:translateY(2px)}
.sticky-col{position:sticky;top:18px;align-self:start}
.profile-layout-extended .profile-topbar{grid-column:1/-1}.profile-layout-extended .profile-main{display:grid;gap:18px}
.profile-quick-nav{display:grid;gap:8px;margin:14px 0 6px}
.profile-quick-nav a{display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);color:var(--text);text-decoration:none}
.two-col-equal{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 2026-08-20. Класс .surface-card--full стоял в разметке в четырёх местах
   (видео-кружки, звонки, истории, страница пользователя) и означал
   «карточка на всю ширину». Но правила для него не было НИ ОДНОГО —
   класс не делал ничего. Родитель у этих карточек — .two-col-equal,
   то есть сетка из двух колонок, и единственный ребёнок оставался
   в левой колонке: контент занимал половину экрана, справа зияла
   пустота. Особенно заметно это было на видео-кружках. */
.surface-card--full{grid-column:1/-1}
.inline-form-grid,.search-row,.message-submit-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.feed-stack{display:grid;gap:16px;min-width:0}
.feed-card{display:grid;gap:14px}
.feed-head,.feed-author,.comment-row{display:flex;gap:12px;align-items:flex-start}
.feed-head{justify-content:space-between;flex-wrap:wrap}
.feed-author > img,.comment-row > img{width:46px;height:46px;border-radius:14px;object-fit:cover}
.feed-content{font-size:1rem;line-height:1.6;color:var(--text)}
.feed-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:start}
.feed-media,.gallery-tile img,.gallery-tile video{display:block;width:100%;height:240px;object-fit:cover;border-radius:20px;background:rgba(255,255,255,.04)}
.feed-audio{width:100%}
.feed-actions{display:flex;gap:10px;flex-wrap:wrap}
.feed-comments{display:grid;gap:10px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08)}
.comment-row{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.03)}
.comment-row p{margin:.3rem 0 .35rem}
.comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.gallery-grid.profile-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.gallery-tile{margin:0;display:grid;gap:8px}
.gallery-tile figcaption{font-size:.92rem;color:var(--muted);margin-top:2px}
.music-list{display:grid;gap:14px}
.music-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.music-card img{width:92px;height:92px;border-radius:18px;object-fit:cover;background:rgba(255,255,255,.05)}
.music-card h3{margin:0 0 6px}
.music-card p{margin:0 0 10px}
.compact-music-list .music-card{grid-template-columns:76px minmax(0,1fr)}
.compact-music-list .music-card img{width:76px;height:76px;border-radius:16px}
.compact-comment{min-height:96px}
.public-message-form .message-submit-row{margin-top:12px}
.empty-state{padding:18px;border:1px dashed rgba(255,255,255,.14);border-radius:18px;color:var(--muted);background:rgba(255,255,255,.02)}
button.is-loading, .site-btn.is-loading{opacity:.72;pointer-events:none}
button.is-loading::after, .site-btn.is-loading::after{content:'…';margin-left:6px}

/* Admin table avatar images */
.admin-table td img[width="32"]{width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle;display:inline-block;margin-right:8px;background:rgba(126,153,198,.18)}
@media (max-width:1100px){.sticky-col{position:static}.two-col-equal{grid-template-columns:1fr}}
@media (max-width:760px){
  .profile-layout-extended{display:block}
  .profile-layout-extended .profile-sidebar{margin-bottom:16px}
  .feed-media,.gallery-tile img,.gallery-tile video{height:200px}
  .music-card{grid-template-columns:1fr}
  .music-card img{width:100%;height:220px}
  .comment-form{grid-template-columns:1fr}
  .inline-form-grid,.search-row,.message-submit-row{align-items:stretch}
  .inline-form-grid > *, .search-row > *, .message-submit-row > *{flex:1 1 100%}
}
@media (orientation:portrait) and (max-width:540px){
  .feed-media-grid,.gallery-grid.profile-gallery-grid{grid-template-columns:1fr}
}

.feed-compose-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end}.feed-upload-field{min-width:0;white-space:normal;overflow-wrap:break-word;word-break:normal;writing-mode:horizontal-tb;text-orientation:mixed}.feed-submit-wrap{padding-bottom:2px}.feed-author-copy{display:grid;gap:8px}.feed-date{display:block;margin-top:2px}.track-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.compact-track-card{grid-template-columns:84px minmax(0,1fr);align-items:center}.compact-track-card img{width:84px;height:84px;border-radius:20px;object-fit:cover}.music-search-results .music-card{padding:16px 18px}.public-message-form .message-submit-row{margin-top:18px}.header-player-search{display:block}.header-player-search .admin-input{width:100%}.auth-modal__dialog{max-width:min(460px,calc(100vw - 28px));padding:20px 20px 18px}.auth-modal__head h2{font-size:clamp(1.35rem,2vw,1.8rem)}.auth-forgot-form{gap:14px}.profile-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.music-search-row{margin-bottom:18px}.inline-form{display:inline-flex}.feed-card .feed-head{gap:16px;align-items:flex-start;min-width:0}.feed-card .pill{white-space:nowrap}@media(max-width:980px){.feed-compose-row,.profile-edit-grid{grid-template-columns:1fr}.feed-card .feed-head{display:grid}}@media(max-width:720px){.compact-track-card{grid-template-columns:64px minmax(0,1fr)}.compact-track-card img{width:64px;height:64px;border-radius:16px}.track-action-row,.music-search-row{display:grid;grid-template-columns:1fr}.profile-player-fab{padding:12px 16px}.auth-modal__dialog{max-width:min(400px,calc(100vw - 20px));padding:16px}}


/* 2026-04-15 final patch */
.profile-meta-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.public-track-audio{width:min(100%,320px)}
.feed-compose-shell{display:grid;gap:14px;padding:18px 20px;margin-bottom:20px;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:rgba(255,255,255,.02)}
.feed-compose-shell h3{margin:0}
.password-change-form{padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.header-player-playlist{scrollbar-width:none;-ms-overflow-style:none;overflow:auto}
.header-player-playlist::-webkit-scrollbar{width:0;height:0}
.header-player-search .admin-input{padding-right:48px}
.auth-wrap{padding:24px 0 42px}
.login-card{min-height:auto;align-content:start}
.auth-card .surface-card{padding:22px}
.auth-card .site-btn{min-height:50px}
.auth-card .admin-input,.auth-card .admin-textarea,.auth-card select.admin-input{min-height:48px;padding:12px 14px}
.auth-modal__dialog{width:min(380px,calc(100vw - 20px));margin:5vh auto;padding:18px 18px 16px;border-radius:22px}
.auth-modal__close{width:42px;height:42px}
.auth-modal__dialog .admin-input{min-height:46px}
@media(max-width:860px){.auth-card .surface-card{padding:18px}.auth-card .site-btn{width:100%}}

/* 2026-04-15 v15 final ui fixes */
.auth-wrap{width:min(1040px,calc(100vw - 28px));padding:26px 0 42px}.auth-grid{gap:18px}.auth-grid>.surface-card{padding:18px}.auth-card .stack-form{gap:12px}.auth-card .stack-form label{gap:6px}.auth-card .admin-input{min-height:48px}.auth-card .site-btn{min-height:48px;max-width:320px;width:100%;justify-self:start}.auth-inline-meta{margin-top:2px}.auth-inline-meta .button-ghost{min-height:40px;padding:8px 12px}.auth-modal__dialog{width:min(330px,calc(100vw - 18px));margin:4vh auto;padding:14px 14px 12px;border-radius:20px}.auth-modal__head h2{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.05}.auth-modal__dialog .admin-input{min-height:42px}.auth-modal__close{width:38px;height:38px}.header-player-search .admin-input,.header-player-search input[type=search]{-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);color:var(--text);min-height:44px;border-radius:16px}.header-player-search input[type=search]::-webkit-search-decoration,.header-player-search input[type=search]::-webkit-search-cancel-button,.header-player-search input[type=search]::-webkit-search-results-button,.header-player-search input[type=search]::-webkit-search-results-decoration{display:none}.header-player-playlist{scrollbar-width:none}.header-player-playlist::-webkit-scrollbar{width:0;height:0}.site-btn.is-static{pointer-events:none;opacity:.85}.public-track-audio{width:min(100%,300px)}.track-action-row{align-items:center}.profile-meta-list{display:none} @media(max-width:860px){.auth-card .site-btn{max-width:none;width:100%}}

/* ===== css audit fixes 2026-04-15 ===== */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
a,button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],label[for],summary,.site-btn,.button,.player-btn,.header-icon-btn,.menu-toggle,.header-player-track,.profile-player-fab{touch-action:manipulation}
[hidden]{display:none !important}
.bg-orb,.bg-grid,.stack-card::after,.header-player-shell::before,.header-player-shell::after,.track-cover::after{pointer-events:none}
.site-header,.header-inner,.surface-card,.profile-sidebar,.messenger-sidebar,.messenger-main,.auth-card,.install-card,.header-player-dialog,.header-player-shell,.header-player-stage,.header-player-playlist,.header-notice-dropdown{isolation:isolate}
.auth-modal,.header-player-panel{pointer-events:auto}
.auth-modal[hidden],.header-player-panel[hidden],.header-notice-dropdown[hidden]{opacity:0;visibility:hidden;pointer-events:none}
.auth-modal__backdrop,.header-player-backdrop,.gallery-backdrop{pointer-events:auto}
.header-player-dialog,.auth-modal__dialog,.header-notice-dropdown{pointer-events:auto}
.header-player-track,.header-icon-btn,.site-btn,.button,.player-btn,.profile-player-fab{position:relative}
.profile-player-fab{z-index:79}
.header-player-panel{z-index:90}
.header-notice-dropdown{z-index:86;max-width:min(380px,calc(100vw - 24px))}
.header-player-dialog{overflow:auto;-webkit-overflow-scrolling:touch}
@media (max-width: 980px){
  .site-nav{pointer-events:none;visibility:hidden}
  body.menu-open .site-nav{pointer-events:auto;visibility:visible}
}


/* 2026-04-15 auth modal + shared premium player hard-fix */
body.auth-page .auth-wrap{width:min(1240px,calc(100vw - 28px));padding:34px 0 56px}
body.auth-page .auth-card{padding:28px;gap:22px;border-radius:34px;background:linear-gradient(180deg,rgba(3,10,24,.96),rgba(2,8,20,.98));border:1px solid rgba(112,150,233,.18);box-shadow:0 28px 90px rgba(0,0,0,.34)}
body.auth-page .auth-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
body.auth-page .auth-grid>.surface-card{display:grid;align-content:start;gap:14px;min-height:100%;padding:26px;border-radius:30px;background:linear-gradient(180deg,rgba(7,16,35,.96),rgba(5,11,24,.98));border:1px solid rgba(120,160,240,.16)}
body.auth-page .auth-grid>.surface-card h2{font-size:clamp(2rem,3.3vw,3rem);margin:0 0 10px;line-height:.96}
body.auth-page .auth-grid>.surface-card label{font-size:1.02rem;font-weight:700;color:#eaf2ff}
body.auth-page .auth-card .admin-input,body.auth-page .auth-card select.admin-input{min-height:58px;padding:16px 18px;border-radius:22px;background:rgba(13,24,48,.88);border:1px solid rgba(126,164,240,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
body.auth-page .auth-card .admin-input::placeholder{color:rgba(214,227,255,.34)}
body.auth-page .auth-inline-meta{margin-top:8px;padding-top:4px}
body.auth-page .auth-inline-meta .checkbox-row{font-size:1rem}
body.auth-page .auth-inline-meta .button-ghost{border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);padding:12px 16px;font-weight:700}
body.auth-page .auth-card .site-btn{min-height:64px;max-width:none;border-radius:24px;font-size:1.1rem;font-weight:800}
body.auth-page .auth-modal{display:grid;place-items:center;padding:18px}
body.auth-page .auth-modal__backdrop{background:rgba(2,7,18,.8);backdrop-filter:blur(12px)}
body.auth-page .auth-modal__dialog{width:min(520px,calc(100vw - 30px));margin:0;padding:24px 24px 22px;border-radius:30px;border:1px solid rgba(121,165,255,.22);background:linear-gradient(180deg,rgba(6,18,42,.98),rgba(4,12,28,.99));box-shadow:0 30px 90px rgba(0,0,0,.55);display:grid;align-content:start;gap:18px}
body.auth-page .auth-modal__dialog.surface-card{min-height:auto}
body.auth-page .auth-modal__dialog .stack-form,body.auth-page .auth-modal__dialog .auth-forgot-form{height:auto!important;min-height:0!important;display:grid;align-content:start;gap:14px}
body.auth-page .auth-modal__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px}
body.auth-page .auth-modal__head h2{margin:0;font-size:clamp(2rem,3vw,2.6rem);line-height:.95}
body.auth-page .auth-modal__head p.small{margin-top:8px;font-size:1rem;line-height:1.55;color:#c2d0e8}
body.auth-page .auth-modal__close{width:44px;height:44px;border-radius:16px;font-size:1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
body.auth-page .auth-modal__dialog label{display:grid;gap:8px;font-size:1rem;font-weight:700;color:#eef4ff}
body.auth-page .auth-modal__dialog .admin-input{min-height:56px;border-radius:20px;padding:15px 16px;background:rgba(14,25,51,.92);border:1px solid rgba(122,165,255,.22)}
body.auth-page .auth-modal__dialog .site-btn{width:100%;min-height:56px;border-radius:20px;font-size:1.02rem}
.header-player-track[hidden]{display:none!important}
.header-player-panel[data-search-empty='1'] .header-player-playlist::after{content:'Ничего не найдено';display:block;padding:14px 16px;border-radius:18px;border:1px dashed rgba(255,255,255,.12);color:var(--muted);background:rgba(255,255,255,.02)}
html[lang='et'] .header-player-panel[data-search-empty='1'] .header-player-playlist::after{content:'Midagi ei leitud'}
@media(max-width:860px){body.auth-page .auth-wrap{width:min(calc(100vw - 16px),1240px);padding:18px 0 32px}body.auth-page .auth-card{padding:18px;border-radius:24px}body.auth-page .auth-grid{grid-template-columns:1fr}body.auth-page .auth-grid>.surface-card{padding:18px;border-radius:24px}body.auth-page .auth-grid>.surface-card h2{font-size:clamp(1.8rem,8vw,2.4rem)}body.auth-page .auth-card .site-btn{min-height:56px}body.auth-page .auth-modal__dialog{width:min(460px,calc(100vw - 16px));padding:18px 18px 16px;border-radius:24px}body.auth-page .auth-modal__head h2{font-size:clamp(1.6rem,7vw,2.2rem)}}

.profile-player-fab.is-promo{background:linear-gradient(135deg,rgba(122,165,255,.96),rgba(121,227,210,.92));color:#07111f}
.profile-player-fab.is-active{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(121,227,210,.18),var(--shadow)}
.premium-upsell-card{display:grid;gap:16px}
.premium-upsell-inline{display:grid;gap:12px;align-items:start}
label.is-disabled[data-notification-volume],.admin-label.is-disabled{opacity:.7}
.admin-label.is-disabled input[type="range"]{cursor:not-allowed;filter:saturate(.7)}


input[type="range"]{appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,var(--accent) 0,var(--accent) var(--range-fill,0%),rgba(255,255,255,.14) var(--range-fill,0%),rgba(255,255,255,.14) 100%)!important;border-radius:999px;height:8px;padding:0;overflow:visible}
input[type="range"]::-webkit-slider-runnable-track{height:8px;background:transparent;border-radius:999px}
input[type="range"]::-moz-range-track{height:8px;background:rgba(255,255,255,.14);border-radius:999px}
input[type="range"]::-moz-range-progress{height:8px;background:var(--accent);border-radius:999px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#74a8ff;border:0;margin-top:-5px}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#74a8ff;border:0}
.message-thread{scrollbar-width:none;-ms-overflow-style:none}
.message-thread::-webkit-scrollbar{width:0;height:0}
.message-voice,.message-bubble audio{width:min(100%,320px)}
.voice-recorder-status{padding:8px 12px;border-radius:14px;border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.profile-player-fab{position:fixed!important;right:18px;bottom:22px;left:auto;top:auto;z-index:79;padding:10px 16px;min-height:46px;font-size:1rem;border-radius:18px;max-width:calc(100vw - 16px);white-space:nowrap}
.profile-player-fab.is-promo{padding:10px 14px}
.profile-player-fab.is-draggable{cursor:grab;user-select:none;touch-action:none}
.profile-player-fab.is-draggable:active{cursor:grabbing}
.feed-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.feed-edit-box{margin-top:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025)}
.feed-edit-box summary{cursor:pointer;font-weight:700}
.feed-edit-box form{margin-top:12px}
.feed-media,.gallery-tile img,.gallery-tile video{height:auto;max-height:min(72vh,720px);object-fit:contain;background:#08101d}
.gallery-tile{position:relative}
.gallery-tile-actions{display:flex;justify-content:flex-end}
.gallery-modal[hidden]{display:none}
.gallery-modal{position:fixed;inset:0;z-index:95}
.gallery-modal__dialog{position:relative;z-index:1;width:min(1240px,calc(100vw - 24px));margin:3vh auto;display:grid;grid-template-columns:56px minmax(0,1fr) 56px;grid-template-rows:minmax(0,1fr) auto;gap:12px;align-items:center}
.gallery-modal__stage{display:grid;place-items:center;min-height:0;max-height:min(86vh,920px);background:transparent;border:none;border-radius:28px;overflow:visible}
.gallery-modal__stage img,.gallery-modal__stage video{display:block;max-width:100%;max-height:min(86vh,920px);width:auto;height:auto;object-fit:contain;border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.gallery-modal__close,.gallery-modal__nav{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(5,12,25,.82);color:#fff;font-size:1.75rem;line-height:1;backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.28);cursor:pointer}
.gallery-modal__close{position:absolute;top:14px;right:14px;z-index:3;font-weight:600}
.gallery-modal__caption{grid-column:2;color:#dbe5f7;text-align:center;padding:8px 12px;min-height:1.5em}.gallery-modal__caption:empty{display:none}
.gift-item{align-items:flex-start}
.gift-item p.small{overflow-wrap:anywhere;word-break:break-word}
body.auth-page .section-head.split-head{grid-template-columns:1fr!important}
body.auth-page .section-head.split-head>p{display:none!important}
body.auth-page .auth-modal__dialog{transform:translateY(-4vh)}
body.auth-page .auth-wrap:has(form input[name="token"]){padding-top:18px}
body.auth-page .auth-wrap:has(form input[name="token"]) .section-head.split-head{margin-bottom:8px}
body.auth-page .auth-wrap:has(form input[name="token"]) .auth-card{padding-top:22px}
.track-action-row .inline-form{display:inline-flex}
@media (max-width: 860px){.profile-player-fab{right:10px;bottom:12px;padding:9px 13px;font-size:.95rem}.gallery-modal__dialog{width:calc(100vw - 10px);margin:2vh auto;grid-template-columns:42px minmax(0,1fr) 42px}.gallery-modal__nav,.gallery-modal__close{width:42px;height:42px;font-size:1.4rem}}


/* 2026-04-16 upload, auth, user player fixes */
.required-field{position:relative}
.required-field>span,.required-field>strong{display:inline-flex;align-items:center;gap:6px}
.required-field::after{content:" *";color:#ff5d73;font-weight:800}
body.auth-page .auth-modal{align-items:center!important;justify-items:center!important;padding:18px}
body.auth-page .auth-modal__dialog{transform:none!important;margin:0!important}
body.public-user-page .promo-player-collapse{display:none}
body.public-user-page #headerPlayerPanel .header-player-close{display:inline-flex;visibility:visible;opacity:1}
.upload-progress__bar{position:relative}
.upload-progress__bar span{position:relative;min-width:0;transition:width .12s linear}


/* 2026-04-16 stability/button/required-label fixes */
.required-field{display:grid;gap:8px}
.required-field::after{content:none!important}
.field-label-text{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:inherit;line-height:1.2}
.required-star{display:inline-block;color:#ff5d73;font-weight:900;line-height:1}
body.public-user-page .profile-player-fab{position:fixed!important;right:18px!important;left:auto!important;top:auto!important;bottom:22px!important;transform:none!important;max-width:min(calc(100vw - 20px),220px);overflow:hidden;text-overflow:ellipsis}
body.public-user-page .profile-player-fab.is-promo{max-width:min(calc(100vw - 20px),180px)}
@media (max-width:860px){body.public-user-page .profile-player-fab{right:10px;bottom:12px;max-width:calc(100vw - 14px)}}
.site-btn[disabled],.button[disabled],.player-btn[disabled]{cursor:not-allowed;opacity:.7}
html{scroll-behavior:smooth}


/* 2026-04-17 stability fixes */
.upload-progress__percent{white-space:nowrap}
.upload-progress[hidden]{display:none!important}
body.public-user-page .profile-player-fab{
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  left:auto!important;
  top:auto!important;
  width:auto;
  min-width:0;
  max-width:min(calc(100vw - 24px),210px);
}
body.public-user-page .profile-player-fab.is-promo{max-width:min(calc(100vw - 24px),170px)}
body.public-user-page .track-action-row .site-btn{max-width:100%}
@media (max-width:860px){
  body.public-user-page .profile-player-fab{right:max(8px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important;max-width:calc(100vw - 16px)}
}


.error-page .utility-main{padding-top:40px;padding-bottom:80px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.error-card{width:min(760px,100%);margin:0 auto;justify-items:start;text-align:left}
.error-logo-wrap{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto 6px}
.error-logo{display:block;width:min(100%,420px);max-width:420px;height:auto;max-height:320px;object-fit:contain;filter:drop-shadow(0 22px 44px rgba(0,0,0,.28))}
.error-card p{max-width:58ch;font-size:clamp(16px,1.8vw,20px);line-height:1.65}
@media (max-width:760px){
  .error-page .utility-main{padding-top:20px;padding-bottom:48px}
  .error-card{padding:20px;gap:14px}
  .error-logo{max-width:260px;max-height:220px}
}

.cover-overlay:empty{display:none}.bio-story-rich a{color:var(--theme-accent,#7aa5ff);text-decoration:underline}.bio-story-rich p{margin:0 0 1em}

.cover-overlay.is-clean{min-height:220px;padding:0;background:transparent}


/* responsive pass 2026-04-18 */
@media (max-width: 1200px){
  .home-users-grid,.news-grid,.gallery-grid,.featured-grid,.content-grid,.profile-grid,.profile-overview,.profile-sections{grid-template-columns:1fr 1fr;}
  .streaming-panel,.home-premium-panel,.header-player-shell,.profile-hero,.public-profile-hero{grid-template-columns:1fr;}
}
@media (max-width: 980px){
  .home-users-grid,.news-grid,.gallery-grid,.featured-grid,.content-grid,.profile-grid,.profile-overview,.profile-sections,.messages-layout,.notification-layout{grid-template-columns:1fr;}
  .stream-links{grid-template-columns:1fr 1fr;}
  .home-users-search{grid-template-columns:1fr;}
  .header-player-dialog{width:min(100vw - 20px,1220px);margin:74px auto 16px;max-height:calc(100vh - 88px);overflow:auto;}
  .header-player-shell{grid-template-columns:1fr;gap:18px;}
  .header-player-stage,.header-player-playlist{min-width:0;}
  .profile-layout,.profile-shell,.profile-main-shell{grid-template-columns:1fr;}
  .profile-sidebar,.profile-main{position:static;top:auto;}
}
@media (max-width: 720px){
  .stream-links,.footer-inner,.music-toolbar,.track-action-row,.profile-status-columns,.profile-edit-grid,.settings-grid,.notification-card,.home-user-meta,.home-user-actions{grid-template-columns:1fr;display:grid;}
  .stream-link,.button,.site-btn,.home-users-search .button,.compose-tools .site-btn{width:100%;}
  .section-head,.section-head.is-compact,.home-users-search,.compose-tools{gap:12px;}
  .container{width:min(100% - 20px, var(--container, 1200px));}
  .surface-card,.streaming-panel,.home-premium-panel,.header-player-shell,.home-user-card,.track-card,.notification-card{padding:16px;border-radius:20px;}
  .header-player-now{grid-template-columns:1fr;text-align:left;}
  .header-player-controls{justify-content:flex-start;flex-wrap:wrap;}
  .profile-player-fab{left:10px;right:10px;bottom:12px;max-width:none;width:auto;text-align:center;justify-content:center;}
}
@media (max-width: 560px){
  h1{font-size:clamp(2rem,10vw,3rem)}
  h2{font-size:clamp(1.6rem,8vw,2.4rem)}
  .stream-links,.home-users-grid,.news-grid,.gallery-grid,.featured-grid,.content-grid{grid-template-columns:1fr;}
  .header-player-close{top:10px;right:10px;}
  .header-player-panel .header-player-dialog{width:calc(100vw - 12px);margin:60px auto 10px;}
  .header-player-playlist-head,.footer-meta,.profile-sidebar .actions,.home-user-actions,.compose-tools{display:grid;grid-template-columns:1fr;}
  .header-player-track,.stream-link,.toggle-card,.gift-card,.sticker-option{min-width:0;}
  .message-bubble audio,.message-voice,.public-track-audio{width:100%;max-width:100%;}
}


.split-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.split-head > div{display:grid;gap:4px}.gift-list-preview{grid-template-columns:1fr}.gift-list-full{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-height:min(70vh,720px);overflow:auto;padding-right:4px}.gift-list-full::-webkit-scrollbar{width:10px}.gift-list-full::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}.gifts-modal__dialog{width:min(960px,calc(100vw - 24px));max-height:min(84vh,860px)}.gifts-modal__dialog .auth-modal__head{align-items:flex-start}.gifts-modal__dialog .gift-item{min-height:100%}.gifts-modal__dialog .gift-item img{width:64px;height:64px}.lsv-history-list{grid-template-columns:1fr}.lsv-history-item{align-items:center;gap:16px}.lsv-history-sign{display:grid;place-items:center;width:42px;height:42px;border-radius:16px;font-size:1.35rem;font-weight:800;flex:0 0 42px}.lsv-history-item.is-incoming .lsv-history-sign{background:rgba(121,227,210,.14);color:#79e3d2}.lsv-history-item.is-outgoing .lsv-history-sign{background:rgba(122,165,255,.16);color:#7aa5ff}.lsv-history-copy{display:grid;gap:4px;min-width:0}.notifications-filters{padding:8px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.notifications-filters .site-btn{min-width:120px;border-radius:18px}.notification-card{transition:transform .18s ease,border-color .18s ease,background .18s ease}.notification-card:hover{transform:translateY(-1px);border-color:rgba(122,165,255,.24);background:rgba(255,255,255,.055)}.user-list-item strong.inline-badged-name,.messenger-head .inline-badged-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.message-attachment{display:inline-flex;align-items:center;justify-content:center;max-width:min(100%,680px);background:transparent;border:none;padding:0}.message-attachment img{display:block;max-width:100%;max-height:min(72vh,820px);width:auto;height:auto;object-fit:contain;border-radius:24px;box-shadow:0 18px 48px rgba(0,0,0,.28)}@media (max-width:860px){.notifications-filters{width:100%}.notifications-filters .site-btn{flex:1 1 calc(50% - 10px);min-width:unset}.gifts-modal__dialog{width:min(calc(100vw - 14px),960px)}}


/* 2026-04-18 notification badge + gifts modal + dialogs alignment fix */
.header-icon-btn{overflow:visible}
.icon-badge,[data-notice-badge]{position:absolute;top:-7px;right:-7px;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8bc8ff 0%, #7ce7d6 100%);color:#04111f;font-size:11px;font-weight:900;line-height:1;border:2px solid rgba(5,11,24,.92);box-shadow:0 10px 22px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08)}
[data-notice-badge]{letter-spacing:.01em}

#received-gifts h2 .icon-badge,#allReceivedGiftsModal h2 .icon-badge,[id="received-gifts"] h2 .icon-badge,.gifts-modal h2 .icon-badge{display:none}

.gifts-modal__dialog{width:min(960px,calc(100vw - 32px));max-height:min(84vh,860px);padding:24px;border-radius:30px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;overflow:hidden}
.gifts-modal__dialog .auth-modal__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding-right:0;margin:0}
.gifts-modal__dialog .auth-modal__head h2{margin:0;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1}
.gifts-modal__dialog .auth-modal__head p.small{margin-top:8px}
.gifts-modal__dialog .auth-modal__close{position:static;flex:0 0 auto;width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.gifts-modal__dialog .gift-list-full{grid-template-columns:1fr;align-content:start;max-height:60vh;overflow-y:auto;padding-right:8px;padding-bottom:4px;min-height:0}
.gifts-modal__dialog .gift-item{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:16px;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.035)}
.gifts-modal__dialog .gift-item img{width:64px;height:64px;border-radius:18px;object-fit:cover}
.gifts-modal__dialog .gift-item strong,.gifts-modal__dialog .gift-item p.small{overflow-wrap:anywhere;word-break:break-word}
@media (min-width:900px){.gifts-modal__dialog .gift-list-full{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.gifts-modal__dialog{width:min(calc(100vw - 16px),960px);max-height:min(88vh,860px);padding:18px;border-radius:24px}.gifts-modal__dialog .auth-modal__head{gap:12px}.gifts-modal__dialog .auth-modal__head h2{font-size:clamp(1.55rem,7vw,2rem)}.gifts-modal__dialog .auth-modal__close{width:42px;height:42px;border-radius:14px}}

.user-list-item strong.inline-badged-name,.messenger-head .inline-badged-name{display:inline-flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;max-width:100%}
.user-list-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-list-badges{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.user-list-badges .status-badge{width:28px;height:28px;flex:0 0 28px}

/* 2026-04-18 profile/user badge placement + gifts modal stacking fix */
.profile-sidebar .inline-badged-name{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;max-width:100%}
.profile-sidebar .inline-badged-name .user-list-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-sidebar .inline-badged-name .user-list-badges{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.profile-sidebar .inline-badged-name .user-list-badges:empty{display:none}
.gifts-modal__dialog .gift-list-full{display:grid;grid-template-columns:1fr;gap:14px;align-content:start;max-height:60vh;overflow-y:auto;min-height:0;padding-right:8px}
.gifts-modal__dialog .gift-item{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:14px;padding:14px 16px;border-radius:20px;min-height:auto}
.gifts-modal__dialog .gift-item__body{display:grid;gap:6px;min-width:0;align-content:start}
.gifts-modal__dialog .gift-item__title{display:block;margin:0;font-size:1.05rem;line-height:1.2;word-break:break-word}
.gifts-modal__dialog .gift-item__meta,.gifts-modal__dialog .gift-item__message{display:block;margin:0;line-height:1.45;word-break:break-word;overflow-wrap:anywhere}
.gifts-modal__dialog .gift-item__message{color:#c7d4e8}
@media (max-width:860px){.profile-sidebar .inline-badged-name{gap:8px}.profile-sidebar .inline-badged-name .user-list-name{white-space:normal}}


/* 2026-04-18 stickers categories modal */
.sticker-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sticker-category-card{display:grid;gap:6px;padding:16px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);text-align:left;color:var(--text);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.sticker-category-card:hover{transform:translateY(-2px);border-color:rgba(122,165,255,.24);background:rgba(122,165,255,.08)}
.sticker-category-card__title{font-weight:800;font-size:1rem}
.sticker-category-card__meta{font-size:.92rem;color:var(--muted)}
.sticker-category-modal__dialog{width:min(920px,calc(100vw - 24px));max-height:min(84vh,860px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;overflow:hidden}
.sticker-pack-grid--modal{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;align-content:start;overflow:auto;padding-right:6px;min-height:0}
.sticker-pack-grid--modal::-webkit-scrollbar{width:10px}.sticker-pack-grid--modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
@media (max-width:720px){.sticker-category-grid{grid-template-columns:1fr 1fr}.sticker-category-modal__dialog{width:min(calc(100vw - 14px),920px);padding:18px}.sticker-pack-grid--modal{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@media (max-width:520px){.sticker-category-grid{grid-template-columns:1fr}.sticker-pack-grid--modal{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* sticker packs storefront */
.sticker-category-row{display:flex;gap:14px;overflow:auto;padding-bottom:6px;scrollbar-width:thin}
.sticker-category-row::-webkit-scrollbar{height:10px}
.sticker-category-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.sticker-category-card{flex:0 0 210px;display:grid;gap:10px;align-content:start;text-align:left;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));color:var(--text);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.sticker-category-card:hover{transform:translateY(-2px);border-color:rgba(122,165,255,.28);background:rgba(122,165,255,.08)}
.sticker-category-card.is-locked{border-color:rgba(255,208,122,.22);background:linear-gradient(180deg,rgba(255,208,122,.08),rgba(255,255,255,.03))}
.sticker-category-card__preview{width:72px;height:72px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.sticker-category-card__preview img{width:58px;height:58px;object-fit:contain}
.sticker-category-card__title{font-size:1rem;font-weight:800}
.sticker-category-card__meta{font-size:.84rem;color:var(--muted)}
.sticker-category-card__lock{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,208,122,.24);background:rgba(255,208,122,.08);font-size:.8rem;font-weight:800;color:#ffe7ac;width:max-content}
.sticker-category-card__lock.is-open{border-color:rgba(122,165,255,.22);background:rgba(122,165,255,.08);color:#dcecff}
.sticker-category-modal__dialog{max-width:min(760px,calc(100vw - 24px))}
.sticker-pack-grid--modal{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.sticker-pack-purchase{display:grid;gap:18px;padding-top:8px}
.sticker-pack-purchase__hero{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.sticker-pack-purchase__hero img{width:84px;height:84px;object-fit:contain;border-radius:20px;background:rgba(255,255,255,.04)}
.sticker-pack-purchase__form{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.sticker-pack-price{font-size:1.3rem;font-weight:900}
@media (max-width:640px){.sticker-category-card{flex-basis:180px}.sticker-pack-purchase__hero{grid-template-columns:1fr}.sticker-pack-purchase__form>*{width:100%}}


/* 2026-04-18 sticker picker horizontal layout fix */
.sticker-store-panel{display:grid;gap:14px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));min-width:0;overflow:hidden}
.sticker-store-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sticker-store-panel__copy{display:grid;gap:4px;min-width:0}
.sticker-store-panel__copy strong{font-size:1rem;line-height:1.15}
.sticker-balance-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(122,165,255,.22);background:rgba(122,165,255,.08);color:#dcecff;font-weight:700;white-space:nowrap;flex:0 0 auto}
.sticker-balance-chip b{font-weight:900;color:#fff}
.sticker-pack-scroller{display:flex;align-items:stretch;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:thin;min-width:0}
.sticker-pack-scroller::-webkit-scrollbar{height:10px}
.sticker-pack-scroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.sticker-pack-tile{appearance:none;-webkit-appearance:none;flex:0 0 220px;width:220px;min-width:220px;max-width:220px;display:grid;grid-template-rows:auto auto auto auto;align-content:start;justify-items:start;gap:10px;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));color:var(--text);text-align:left;box-sizing:border-box;transition:transform .2s ease,border-color .2s ease,background .2s ease;overflow:hidden}
.sticker-pack-tile:hover{transform:translateY(-2px);border-color:rgba(122,165,255,.28);background:rgba(122,165,255,.08)}
.sticker-pack-tile.is-locked{border-color:rgba(255,208,122,.22);background:linear-gradient(180deg,rgba(255,208,122,.08),rgba(255,255,255,.03))}
.sticker-pack-tile__preview{width:72px;height:72px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.sticker-pack-tile__preview img{width:58px;height:58px;object-fit:contain;display:block}
.sticker-pack-tile__preview span{font-size:2rem;line-height:1}
.sticker-pack-tile__title{display:block;width:100%;font-size:1rem;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticker-pack-tile__meta{display:block;width:100%;font-size:.88rem;line-height:1.35;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
.sticker-pack-tile__action{display:inline-flex;align-items:center;justify-content:center;min-height:36px;max-width:100%;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,208,122,.24);background:rgba(255,208,122,.08);font-size:.8rem;font-weight:800;color:#ffe7ac;white-space:normal;overflow-wrap:anywhere}
.sticker-pack-tile__action.is-open{border-color:rgba(122,165,255,.22);background:rgba(122,165,255,.08);color:#dcecff}
@media (max-width:640px){.sticker-store-panel{padding:14px}.sticker-balance-chip{width:100%;justify-content:center}.sticker-pack-tile{flex-basis:176px;width:176px;min-width:176px;max-width:176px}}



/* 2026-04-19 custom media players + maintenance ui */
.custom-media-player{position:relative;display:grid;gap:10px;padding:12px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden}
.custom-media-player__media{display:block;width:100%;border-radius:18px;background:#000}
.custom-media-player.is-video .custom-media-player__media{aspect-ratio:16/9;object-fit:cover}
.custom-media-player__overlay{position:absolute;inset:12px 12px auto 12px;bottom:74px;display:grid;place-items:center;border:0;border-radius:18px;background:linear-gradient(180deg,rgba(2,6,16,.02),rgba(2,6,16,.32));color:#fff;cursor:pointer}
.custom-media-player.is-audio .custom-media-player__overlay{display:none}
.custom-media-player__overlay-icon,.custom-media-player__cover{display:inline-flex;align-items:center;justify-content:center}
.custom-media-player__overlay-icon{width:74px;height:74px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);font-size:1.6rem}
.custom-media-player__controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.custom-media-player__timeline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;flex:1 1 240px;min-width:0}
.custom-media-player__timeline span{font-size:.86rem;color:var(--muted);font-weight:700}
.custom-media-player__timeline input[type=range]{width:100%;accent-color:var(--accent)}
.custom-media-player__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.custom-media-player__caption{color:var(--muted);font-size:.9rem;line-height:1.5}
.custom-media-player__audio-shell{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center}
.custom-media-player__cover{width:64px;height:64px;border-radius:20px;border:1px solid rgba(122,165,255,.2);background:radial-gradient(circle at top left,rgba(122,165,255,.22),rgba(121,227,210,.14));color:#fff;font-size:1.25rem}
.custom-media-player__audio-copy{display:grid;gap:8px;min-width:0}.custom-media-player__audio-copy strong{font-size:1rem;overflow-wrap:anywhere}
.custom-media-player__wave{display:flex;align-items:flex-end;gap:5px;height:20px}.custom-media-player__wave span{display:block;width:5px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--accent-2));height:30%;opacity:.72;transform-origin:bottom center}
.custom-media-player.is-playing .custom-media-player__wave span:nth-child(1){animation:mediaWave .9s ease-in-out infinite}.custom-media-player.is-playing .custom-media-player__wave span:nth-child(2){animation:mediaWave 1.1s ease-in-out infinite .12s}.custom-media-player.is-playing .custom-media-player__wave span:nth-child(3){animation:mediaWave .8s ease-in-out infinite .2s}.custom-media-player.is-playing .custom-media-player__wave span:nth-child(4){animation:mediaWave 1s ease-in-out infinite .08s}
.custom-media-player .site-chip-btn{min-height:40px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text)}
.custom-media-player.is-audio .custom-media-player__media{display:none}

.custom-media-player__cover--static{cursor:default;pointer-events:none}
.custom-media-player__cover--static .custom-media-player__overlay-icon{width:auto;height:auto;border:0;background:transparent;backdrop-filter:none;font-size:1.4rem}
.custom-media-player.is-audio .custom-media-player__audio-shell{grid-template-columns:56px minmax(0,1fr);gap:12px}
.custom-media-player.is-audio .custom-media-player__controls{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.custom-media-player.is-audio .custom-media-player__actions{margin-left:0}
.feed-card .custom-media-player.is-audio,.message-bubble .custom-media-player.is-audio{overflow:hidden}
.message-bubble .custom-media-player{margin-top:8px}
.gallery-tile .custom-media-player{padding:10px;background:transparent;border-color:rgba(255,255,255,.06)}
.gift-delete-form{margin-left:auto;display:flex;align-items:center}
@keyframes mediaWave{0%,100%{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}
@media (max-width:640px){.custom-media-player{padding:10px;border-radius:20px}.custom-media-player__controls{gap:8px}.custom-media-player__timeline{grid-template-columns:1fr;gap:6px}.custom-media-player__actions{width:100%;margin-left:0}.custom-media-player__overlay{bottom:96px}}


/* Media player refinements */
.custom-media-player__overlay{opacity:1;visibility:visible;transition:opacity .22s ease,visibility .22s ease,transform .22s ease;background:linear-gradient(180deg,rgba(2,6,16,.06),rgba(2,6,16,.34))}
.custom-media-player.is-playing .custom-media-player__overlay{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.96)}
.custom-media-player:not(.is-playing) .custom-media-player__overlay:hover .custom-media-player__overlay-icon,.custom-media-player__cover:hover{transform:scale(1.04)}
.custom-media-player__overlay-icon,.custom-media-player__cover,.custom-media-player [data-media-toggle],.custom-media-player [data-media-mute],.custom-media-player [data-media-fullscreen]{transition:transform .18s ease,opacity .18s ease,background .18s ease,border-color .18s ease}
.gallery-tile{align-content:start}
.gallery-tile .custom-media-player{gap:8px;padding:8px;border-radius:22px;background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.05)}
.gallery-tile .custom-media-player.is-video .custom-media-player__media{border-radius:16px;aspect-ratio:4/5;object-fit:cover;max-height:232px}
.gallery-tile .custom-media-player__controls{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center}
.gallery-tile .custom-media-player__timeline{grid-template-columns:42px minmax(0,1fr) 42px;gap:8px}
.gallery-tile .custom-media-player__timeline span{font-size:.8rem}
.gallery-tile .custom-media-player .site-chip-btn{min-width:40px;min-height:40px;padding:0;font-size:1rem}
.gallery-tile .custom-media-player__actions{margin-left:0;gap:6px}
.gallery-tile .custom-media-player__overlay{inset:8px 8px auto 8px;bottom:56px;border-radius:16px}
.gallery-tile .custom-media-player__overlay-icon{width:58px;height:58px;font-size:1.25rem}
.gallery-tile .custom-media-player.is-audio .custom-media-player__audio-shell{grid-template-columns:1fr;gap:8px}
.gallery-tile .custom-media-player.is-audio .custom-media-player__cover{display:none}
.gallery-tile .custom-media-player.is-audio .custom-media-player__audio-copy strong{display:none}
.gallery-tile .custom-media-player.is-audio .custom-media-player__wave{display:none}
.gallery-tile .custom-media-player.is-audio .custom-media-player__controls{grid-template-columns:36px minmax(0,1fr) auto;gap:6px;align-items:center}
.gallery-tile .custom-media-player.is-audio .custom-media-player__actions{justify-self:end;gap:6px}
.message-bubble .custom-media-player.is-audio{padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));max-width:min(100%,640px)}
.message-bubble .custom-media-player.is-audio .custom-media-player__audio-shell{grid-template-columns:1fr;gap:10px;align-items:start}
.message-bubble .custom-media-player.is-audio .custom-media-player__cover{display:none}
.message-bubble .custom-media-player.is-audio .custom-media-player__audio-copy{gap:6px}
.message-bubble .custom-media-player.is-audio .custom-media-player__audio-copy strong{font-size:1.12rem;line-height:1.15}
.message-bubble .custom-media-player.is-audio .custom-media-player__controls{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.message-bubble .custom-media-player.is-audio .custom-media-player__timeline{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;min-width:0}
.message-bubble .custom-media-player.is-audio .custom-media-player__timeline input[type=range]{min-width:0}
.message-bubble .custom-media-player.is-audio .custom-media-player__actions{margin-left:0}
.message-bubble .custom-media-player.is-audio .site-chip-btn{min-width:40px;min-height:40px;padding:0}
.gift-delete-form{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;align-self:center;flex:0 0 auto}
.gift-delete-form .site-btn{min-width:118px;white-space:nowrap;padding:10px 18px;border-radius:16px;writing-mode:horizontal-tb;text-orientation:mixed}
.gift-item{grid-template-columns:56px minmax(0,1fr) auto}
.gift-list-preview .gift-item,.gift-list-full .gift-item{align-items:center}
@media (max-width:640px){
  .gallery-tile .custom-media-player.is-video .custom-media-player__media{max-height:190px}
  .gallery-tile .custom-media-player__controls,.message-bubble .custom-media-player.is-audio .custom-media-player__controls{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
  .gallery-tile .custom-media-player__actions,.message-bubble .custom-media-player.is-audio .custom-media-player__actions{width:100%;justify-content:flex-end}
  .gift-item{grid-template-columns:56px minmax(0,1fr)}
  .gift-delete-form{grid-column:1/-1;margin-left:0;justify-content:stretch}
  .gift-delete-form .site-btn{width:100%}
}


/* 2026-04-19 follow-up fixes */
.custom-media-player.is-audio .custom-media-player__audio-shell{grid-template-columns:minmax(0,1fr)!important;gap:8px}
.custom-media-player.is-audio .custom-media-player__cover{display:none!important}
.gallery-tile .custom-media-player__timeline{display:none!important}
.gallery-tile .custom-media-player__controls{display:flex!important;justify-content:space-between;align-items:center;gap:8px}
.gallery-tile .custom-media-player__actions{margin-left:auto;display:flex!important;gap:6px;justify-content:flex-end}
.gallery-tile .custom-media-player [data-media-toggle]{min-width:40px;min-height:40px;padding:0}
.gallery-tile .custom-media-player.is-video .custom-media-player__controls{position:relative;z-index:2}
.message-bubble .custom-media-player.is-audio .custom-media-player__audio-copy strong{display:block;padding-top:0}


.profile-cover-card{position:relative;overflow:hidden;min-height:220px}
.profile-cover-upload-form{position:absolute;right:18px;bottom:18px;z-index:2}
.profile-cover-upload-trigger,.profile-avatar-edit__badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(6,14,30,.74);backdrop-filter:blur(12px);color:#eef4ff;font-weight:700;cursor:pointer;box-shadow:0 18px 32px rgba(0,0,0,.24)}
.profile-avatar-upload-form{display:grid;justify-items:center}
.profile-avatar-edit{position:relative;display:inline-grid;cursor:pointer}
.profile-avatar-edit__badge{position:absolute;left:50%;right:auto;bottom:8px;transform:translateX(-50%);min-height:36px;padding:0 14px;border-radius:999px;font-size:.86rem;white-space:nowrap;width:max-content;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
.profile-avatar-edit:hover .profile-avatar,.profile-cover-upload-trigger:hover,.profile-avatar-edit__badge:hover{filter:brightness(1.06)}
.custom-media-player.is-audio{padding:14px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.custom-media-player.is-audio .custom-media-player__audio-copy{margin-top:10px;display:grid;gap:6px}
.custom-media-player.is-audio .custom-media-player__audio-copy strong{font-size:1.05rem;color:#eef4ff}
.custom-media-player.is-audio .custom-media-player__controls{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.custom-media-player.is-video.is-compact .custom-media-player__controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding-top:12px}
.custom-media-player.is-video.is-compact .custom-media-player__actions{display:flex;justify-content:flex-end;gap:10px}
.custom-media-player.is-video.is-compact .custom-media-player__timeline{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;min-width:0}
.custom-media-player.is-video.is-compact .custom-media-player__timeline span{font-size:.84rem;color:rgba(239,244,255,.82)}
.custom-media-player.is-video.is-compact .custom-media-player__timeline input[type=range]{width:100%;min-width:0;accent-color:var(--accent)}
.profile-gallery-grid .custom-media-player.is-video.is-compact{padding:10px;border-radius:20px}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__media{max-height:220px;border-radius:18px}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__overlay{width:74px;height:74px}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__controls .site-chip-btn{min-width:46px;min-height:46px;border-radius:999px}
@media (max-width:760px){.profile-cover-upload-form{right:12px;bottom:12px}.profile-cover-upload-trigger{padding:0 12px;font-size:.9rem}.profile-avatar-edit__badge{font-size:.78rem}}


.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__overlay{display:none!important}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__controls{grid-template-columns:auto 1fr!important;gap:12px;align-items:center}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__controls [data-media-toggle]{justify-self:start}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__timeline{display:none!important}
.profile-gallery-grid .custom-media-player.is-video.is-compact .custom-media-player__actions{justify-self:end}

.custom-media-player.is-video .custom-media-player__media::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.custom-media-player.is-video.is-fullscreen-active .custom-media-player__controls,.custom-media-player.is-video.is-fullscreen-active .custom-media-player__overlay{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

.message-voice-native{padding:14px 16px;border-radius:22px;border:1px solid rgba(126,153,198,.16);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));display:grid;gap:10px}.message-voice-native__label{font-weight:800;color:#eef4ff}.message-voice-native__audio{width:100%;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}.message-voice-native__audio::-webkit-media-controls-enclosure{border-radius:16px;background:rgba(10,19,37,.92)}


/* Voice messages: standalone site-styled player */
.message-voice-shell{margin-top:8px;max-width:min(100%,640px)}
.message-voice-shell .custom-media-player.is-audio.is-voice-message{padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(124,164,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__audio-copy{order:-1;margin-top:0;gap:8px}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__audio-copy strong{font-size:1.06rem;font-weight:800;color:#eef4ff}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__wave span{background:linear-gradient(180deg,var(--accent),var(--accent-strong));opacity:.95}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__controls{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__timeline{grid-template-columns:42px minmax(0,1fr) 42px;gap:8px}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__timeline span{font-size:.84rem;color:rgba(239,244,255,.82)}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn{min-width:44px;min-height:44px;padding:0;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn:hover{background:rgba(103,164,255,.12);border-color:rgba(103,164,255,.28)}
.message-voice-shell .custom-media-player.is-audio.is-voice-message input[type=range]{accent-color:var(--accent)}
@media (max-width:640px){.message-voice-shell .custom-media-player.is-audio.is-voice-message{padding:12px 14px}.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__controls{grid-template-columns:40px minmax(0,1fr) auto}}


.gallery-video-cover-field{display:grid;gap:8px}
.gallery-video-cover-field[hidden]{display:none!important}
.gallery-video-cover-field .small{margin:0;color:rgba(232,240,255,.72)}
.message-voice-shell.is-native{margin-top:8px;max-width:min(100%,640px)}
.message-voice-shell.is-native .message-voice-native{padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(124,164,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.message-voice-shell.is-native .message-voice-native__label{font-size:1.06rem;font-weight:800;color:#eef4ff;margin-bottom:8px}
.message-voice-shell.is-native .message-voice-native__audio{width:100%;display:block;border-radius:18px;overflow:hidden;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-panel{background:linear-gradient(180deg,rgba(11,20,37,.96),rgba(8,15,30,.92))}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-enclosure{border-radius:18px;background:rgba(10,19,37,.92);border:1px solid rgba(255,255,255,.06)}
@media (max-width:640px){.message-voice-shell.is-native .message-voice-native{padding:12px 14px}}


.gallery-video-cover-field[hidden]{display:none!important}
.gallery-video-cover-field{display:grid;gap:8px;margin-top:4px}
.gallery-video-cover-field .small{margin:0;color:rgba(239,244,255,.72)}

.message-voice-shell.is-native .message-voice-native__audio{
  width:100%;
  display:block;
  border-radius:18px;
  overflow:hidden;
  filter:brightness(1.18) contrast(1.08) invert(1) hue-rotate(180deg);
  background:rgba(8,15,30,.92);
}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-panel{
  background:linear-gradient(180deg,rgba(11,20,37,.96),rgba(8,15,30,.92));
}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-enclosure{
  border-radius:18px;
  background:rgba(10,19,37,.92);
  border:1px solid rgba(255,255,255,.08);
}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-current-time-display,
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-time-remaining-display{
  color:#fff;
}

.custom-media-player.is-audio .custom-media-player__media{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;display:block!important}
.message-voice-shell .custom-media-player.is-audio.is-voice-message{margin-top:8px;max-width:min(100%,640px)}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn,.message-voice-shell .custom-media-player.is-audio.is-voice-message [data-media-current],.message-voice-shell .custom-media-player.is-audio.is-voice-message [data-media-duration]{color:#fff!important}
.message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__timeline input[type=range]{accent-color:#7aa5ff}
.message-voice-shell.is-native{display:none!important}


.native-audio-player{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid rgba(140,190,255,.18);border-radius:24px;background:linear-gradient(180deg,rgba(42,60,88,.42),rgba(22,34,54,.56));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.native-audio-player__label{font-weight:800;font-size:28px;line-height:1.2;color:#f4f8ff}
.native-audio-player__audio{width:100%;min-height:54px}
.message-voice-shell .native-audio-player{padding:14px 16px;border-radius:22px}
.message-voice-shell .native-audio-player__label{font-size:18px}
@media (max-width: 720px){.native-audio-player__label{font-size:18px}}


/* White native player for messages.php voice messages */
.message-voice-shell.is-native{display:block!important;margin-top:8px;max-width:min(100%,640px)}
.message-voice-shell.is-native .message-voice-native{padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.message-voice-shell.is-native .message-voice-native__label{font-size:1.06rem;font-weight:800;color:#eef4ff;margin-bottom:8px}
.message-voice-shell.is-native .message-voice-native__audio{width:100%;display:block;border-radius:18px;overflow:hidden;filter:brightness(1.18) contrast(1.08) invert(1) hue-rotate(180deg);background:#fff}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-enclosure{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.06)}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-panel{background:#fff}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-current-time-display,
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-time-remaining-display{color:#111}


.message-video-shell.is-native{margin-top:8px;max-width:min(100%,640px);padding:12px;border-radius:24px;background:linear-gradient(180deg,rgba(42,60,88,.42),rgba(22,34,54,.56));border:1px solid rgba(140,190,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.message-video-shell__player{display:block;width:100%;max-height:520px;border-radius:18px;background:#000}
.message-video-shell__player::-webkit-media-controls-panel{opacity:1}


/* Separate UI blocks for uploaded audio and recorded voice messages */
.message-audio-shell.is-native{display:block!important;margin-top:8px;max-width:min(100%,640px)}
.message-audio-shell.is-native .message-audio-native{padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(74,132,255,.14),rgba(53,198,185,.10));border:1px solid rgba(111,211,255,.20);box-shadow:0 18px 40px rgba(0,0,0,.16)}
.message-audio-shell.is-native .message-audio-native__label{font-size:1.02rem;font-weight:800;color:#9fe7ff;margin-bottom:8px;letter-spacing:.01em;text-transform:uppercase}
.message-audio-shell.is-native .message-audio-native__audio{width:100%;display:block;border-radius:18px;overflow:hidden;background:#dff8ff;filter:none}
.message-audio-shell.is-native .message-audio-native__audio::-webkit-media-controls-enclosure{background:#dff8ff;border-radius:18px;border:1px solid rgba(18,68,94,.12)}
.message-audio-shell.is-native .message-audio-native__audio::-webkit-media-controls-panel{background:#dff8ff}
.message-audio-shell.is-native .message-audio-native__audio::-webkit-media-controls-current-time-display,
.message-audio-shell.is-native .message-audio-native__audio::-webkit-media-controls-time-remaining-display{color:#12384e}

.message-voice-shell.is-native{display:block!important;margin-top:8px;max-width:min(100%,640px)}
.message-voice-shell.is-native .message-voice-native{padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.message-voice-shell.is-native .message-voice-native__label{font-size:1.06rem;font-weight:800;color:#eef4ff;margin-bottom:8px}
.message-voice-shell.is-native .message-voice-native__audio{width:100%;display:block;border-radius:18px;overflow:hidden;filter:brightness(1.18) contrast(1.08) invert(1) hue-rotate(180deg);background:#fff}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-enclosure{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.06)}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-panel{background:#fff}
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-current-time-display,
.message-voice-shell.is-native .message-voice-native__audio::-webkit-media-controls-time-remaining-display{color:#111}

@media (max-width:640px){
  .message-audio-shell.is-native .message-audio-native,
  .message-voice-shell.is-native .message-voice-native{padding:12px 14px}
}
.message-content-tag{display:inline-flex;align-items:center;gap:6px;margin:8px 0 10px;padding:6px 12px;border-radius:999px;background:rgba(122,165,255,.12);border:1px solid rgba(140,190,255,.22);color:#dfeaff;font-size:.82rem;font-weight:700;letter-spacing:.01em}
.message-bubble.is-me .message-content-tag{background:rgba(121,227,210,.12);border-color:rgba(121,227,210,.24);color:#e3fff9}
.notification-card__copy p{color:#dfe7fb}

/* 2026-04-20 messaging reply targets + unified media skins */
.reply-snippet{
  display:grid;
  gap:4px;
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:16px;
  border-left:3px solid rgba(122,165,255,.75);
  background:linear-gradient(180deg,rgba(122,165,255,.10),rgba(121,227,210,.06));
  color:#eef4ff;
}
.reply-snippet[role="button"]{cursor:pointer;transition:transform .18s ease, border-color .18s ease, background .18s ease}
.reply-snippet[role="button"]:hover,.reply-snippet[role="button"]:focus-visible{outline:none;transform:translateY(-1px);border-left-color:rgba(121,227,210,.9);background:linear-gradient(180deg,rgba(122,165,255,.14),rgba(121,227,210,.10))}
.reply-snippet__meta,.reply-preview__meta{font-size:.78rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#9fe7ff}
.reply-snippet__text,.reply-preview__text{font-size:.96rem;line-height:1.42;color:#eef4ff;word-break:break-word}
.reply-preview{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 12px;
  align-items:start;
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(122,165,255,.24);
  background:linear-gradient(180deg,rgba(11,20,38,.88),rgba(9,16,31,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.reply-preview .reply-preview__meta,.reply-preview .reply-preview__text{grid-column:1}
.reply-preview .reply-cancel{grid-column:2;grid-row:1 / span 2;align-self:center}
.reply-preview.is-hidden{display:none!important}
.message-bubble.is-reply-target{box-shadow:0 0 0 1px rgba(121,227,210,.35),0 0 0 5px rgba(121,227,210,.12),0 20px 50px rgba(0,0,0,.24)}
.message-video-shell.is-native{padding:0;border:none;background:none;box-shadow:none;max-width:min(100%,640px)}
.message-video-shell.is-native .custom-media-player.is-video.is-compact{
  padding:12px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(42,60,88,.42),rgba(22,34,54,.56));
  border:1px solid rgba(140,190,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__controls{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__timeline{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:8px;
  align-items:center;
  min-width:0;
}
.message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__timeline span{
  font-size:.84rem;
  color:rgba(239,244,255,.82);
}
.message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__timeline input[type=range]{
  width:100%;
  min-width:0;
  accent-color:var(--accent);
}
.message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.message-video-shell.is-native .custom-media-player__media{max-height:520px;border-radius:18px;background:#000}
@media (max-width:640px){
  .message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__controls{
    grid-template-columns:40px minmax(0,1fr);
    gap:10px;
  }
  .message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__timeline{
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:6px;
  }
  .message-video-shell.is-native .custom-media-player.is-video.is-compact .custom-media-player__actions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
}
.message-audio-shell.is-native,
.message-voice-shell.is-native,
.profile-audio-shell{display:block!important;margin-top:8px;max-width:min(100%,640px)}
.profile-audio-shell{margin-top:0}
.profile-audio-shell .message-audio-native__label{font-size:1.1rem}
.profile-audio-shell .message-audio-native{padding:16px 18px}


.ui-clear-btn,.site-icon-btn{
  appearance:none;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  color:#eef4ff;border-radius:12px;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;box-shadow:0 10px 24px rgba(0,0,0,.18)
}
.ui-clear-btn:hover,.site-icon-btn:hover{transform:translateY(-1px);border-color:rgba(122,165,255,.34);background:rgba(122,165,255,.12)}
.ui-clear-btn span,.site-icon-btn{font-size:1rem;font-weight:900;line-height:1}
.reply-preview,.selected-sticker-badge,.selected-upload-badge{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reply-preview .reply-preview__text,.selected-upload-badge__name{min-width:0;flex:1 1 180px}
.selected-sticker-badge,.selected-upload-badge{
  padding:10px 12px;border-radius:18px;border:1px solid rgba(122,165,255,.18);background:linear-gradient(180deg,rgba(122,165,255,.1),rgba(255,255,255,.03));
}
.selected-upload-badge__label{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(122,165,255,.14);border:1px solid rgba(122,165,255,.2);font-size:.78rem;font-weight:800;color:#cfe0ff}
.selected-upload-badge__name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-actions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.message-inline-form{display:inline-flex;margin:0}
.site-icon-btn.subtle-danger{border-color:rgba(255,122,146,.24);background:linear-gradient(180deg,rgba(255,122,146,.14),rgba(255,255,255,.04));color:#ffdbe3}
.site-icon-btn.subtle-danger:hover{border-color:rgba(255,122,146,.4);background:rgba(255,122,146,.12)}

.message-delete-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;font-weight:800;line-height:1;box-shadow:0 12px 26px rgba(0,0,0,.18)}
.message-delete-btn span:first-child{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.08);font-size:1rem;line-height:1}
.message-delete-btn span:last-child{white-space:nowrap}
.message-delete-btn.site-btn.subtle-danger{border:1px solid rgba(255,122,146,.24);background:linear-gradient(180deg,rgba(255,122,146,.14),rgba(255,255,255,.04));color:#ffdbe3}
.message-delete-btn.site-btn.subtle-danger:hover{transform:translateY(-1px);border-color:rgba(255,122,146,.4);background:rgba(255,122,146,.12)}
@media (max-width:640px){.message-delete-btn span:last-child{display:none}.message-delete-btn{padding:9px 11px}.message-delete-btn span:first-child{width:22px;height:22px}}
.compose-box .selected-upload-badge{grid-column:1/-1}
.upload-inline-btn{position:relative;overflow:hidden}


.message-media-label{display:inline-flex;align-items:center;gap:8px;margin:8px 0 10px;padding:7px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(131,170,255,.18);color:#eef4ff;font-size:.9rem;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.message-media-label::before{content:'';width:10px;height:10px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--accent-strong));box-shadow:0 0 0 4px rgba(122,165,255,.12)}
.message-media-label--gift::before{background:linear-gradient(180deg,#ffd86e,#ff9f67);box-shadow:0 0 0 4px rgba(255,184,87,.14)}
.message-media-label--image::before{background:linear-gradient(180deg,#7de4ff,#63b3ff)}
.message-media-label--video::before{background:linear-gradient(180deg,#a78bfa,#6ea8ff)}
.message-media-label--sticker::before{background:linear-gradient(180deg,#79e3d2,#5ac1ff)}
.message-media-label--file::before{background:linear-gradient(180deg,#c7d2fe,#93a7ff)}
.message-content-tag{display:none!important}


.feed-media-grid .profile-audio-shell{max-width:100%;margin-top:0;display:block}
.feed-media-grid .profile-audio-shell .message-audio-native{padding:10px 12px;border-radius:18px;min-height:unset}
.feed-media-grid .profile-audio-shell .message-audio-native__label{font-size:.9rem;line-height:1.05;margin-bottom:6px}
.feed-media-grid .profile-audio-shell .message-audio-native__audio{border-radius:14px}
.feed-media-grid .profile-audio-shell.is-compact .message-audio-native{padding:8px 10px}
.feed-media-grid .profile-audio-shell.is-compact .message-audio-native__label{font-size:.82rem;margin-bottom:4px}
.feed-media-grid .profile-audio-shell.is-compact .message-audio-native__audio{min-height:52px}
.feed-media-grid > .message-audio-shell{align-self:start}

/* 2026-04-20 feed media editor and dense media fixes */
.feed-edit-form{gap:14px}.feed-edit-upload-field{display:grid;gap:8px}.feed-edit-actions{display:flex;align-items:center;justify-content:flex-start;padding-top:4px}
.feed-edit-media-list{display:grid;gap:10px}
.feed-edit-media-item{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025);transition:opacity .18s ease,border-color .18s ease,background .18s ease}.feed-edit-media-item.is-marked-for-delete{opacity:.6;border-color:rgba(255,122,146,.28);background:rgba(255,122,146,.07)}.feed-edit-remove-btn{min-width:160px;justify-content:center}
.feed-edit-media-item .message-media-label{margin:0}
.feed-media-grid.has-many-audio{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.feed-media-grid .custom-media-player.is-audio{padding:10px 12px;border-radius:18px;gap:8px;min-width:0;overflow:visible}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__audio-shell{grid-template-columns:1fr!important;gap:6px}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__audio-copy{margin-top:0;gap:4px}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__audio-copy strong{font-size:.9rem;line-height:1.1}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__wave{display:none}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__controls{grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__timeline{grid-template-columns:38px minmax(0,1fr) 38px;gap:6px;min-width:0}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__timeline span{font-size:.78rem}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__timeline input[type=range]{min-width:0;width:100%}
.feed-media-grid .custom-media-player.is-audio .custom-media-player__actions{display:flex;justify-content:flex-end}
.feed-media-grid .custom-media-player.is-audio .site-chip-btn{min-width:36px;min-height:36px;padding:0}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact{padding:10px;border-radius:18px}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__controls{grid-template-columns:auto 1fr!important;gap:10px;align-items:center}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__timeline{display:none!important}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__actions{margin-left:auto;justify-self:end}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__actions [data-media-mute]{display:inline-flex}
@media (max-width: 860px){
  .feed-media-grid.has-many-audio{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media (max-width: 640px){
  .feed-edit-media-item{align-items:flex-start}
  .feed-media-grid.has-many-audio{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .feed-media-grid.has-many-audio{grid-template-columns:1fr}
}


.feed-media-grid.has-many-audio{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feed-media-grid.has-many-audio .message-audio-shell{width:100%;min-width:0}
.feed-media-grid.has-many-audio .message-audio-native{padding:10px 12px;border-radius:18px}
.feed-media-grid.has-many-audio .message-audio-native__label{font-size:.86rem;line-height:1.05;margin-bottom:6px}
.feed-media-grid.has-many-audio .message-audio-native__audio{display:block;width:100%;min-width:0;max-width:100%;height:44px}
.feed-media-grid.has-many-audio .custom-media-player.is-audio{display:none}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__timeline,
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact [data-media-current],
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact [data-media-duration]{display:none!important}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__controls{grid-template-columns:auto auto!important;justify-content:space-between}
@media (max-width: 640px){
  .feed-edit-actions{padding-top:8px}
  .feed-edit-remove-btn{width:100%}
}


.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact [data-media-toggle]{font-size:0;position:relative}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact [data-media-toggle]::before{content:'▶';font-size:1rem;line-height:1}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact.is-playing [data-media-toggle]::before{content:'⏸';font-size:.95rem}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .custom-media-player__actions{display:flex;gap:8px;align-items:center}
.feed-media-grid.has-many-videos .custom-media-player.is-video.is-compact .site-chip-btn{min-width:40px;min-height:40px}

/* 2026-04-21 mobile polish pack */
.profile-mobile-cover{display:none}
.profile-cover-upload-form--mobile{display:none}
@media (max-width: 860px){
  .header-player-panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:14px 0 calc(92px + env(safe-area-inset-bottom));}
  .header-player-panel .header-player-dialog{position:relative;left:auto;right:auto;top:auto;margin:0 auto;width:min(calc(100vw - 16px),560px);max-height:none;}
  .header-player-panel .header-player-shell{width:100%;margin:0 auto;}
  .profile-player-fab{left:50%;right:auto;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom));max-width:min(calc(100vw - 24px),420px);width:min(calc(100vw - 24px),420px);justify-content:center;text-align:center;white-space:nowrap;}
  body.public-user-page .profile-player-fab{left:50%;right:auto;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom));max-width:min(calc(100vw - 24px),420px);}
  body.public-user-page .profile-player-fab.is-promo{max-width:min(calc(100vw - 24px),360px);width:min(calc(100vw - 24px),360px);}
  .profile-layout-extended>.profile-main>.profile-cover-card,
  .profile-layout-extended>.profile-main>.public-cover{display:none;}
  .profile-mobile-cover{display:block;position:relative;min-height:148px;border-radius:28px;border:1px solid rgba(122,165,255,.14);background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden;margin:6px 0 10px;}
  .profile-mobile-cover .cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,22,.14),rgba(5,10,22,.68));padding:0;min-height:100%;}
  .profile-cover-upload-form--mobile{display:block;position:absolute;right:12px;bottom:12px;z-index:2;}
}
@media (max-width: 720px){
  .profile-sidebar{overflow:visible;}
  .header-player-panel{align-items:flex-start;}
  .header-player-panel .header-player-dialog{margin:8px auto 0;}
  .header-player-panel .header-player-shell{border-radius:28px;}
  .header-player-stage,.header-player-playlist{padding:18px 16px;}
  .header-player-now{padding:18px 16px;}
  .header-player-controls{justify-content:center;}
  .header-player-progress{width:100%;}
}


/* 2026-04-21 round 3 mobile fixes */
#typingIndicator{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  max-width:100%;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(121,227,210,.22);
  background:linear-gradient(180deg,rgba(121,227,210,.12),rgba(122,165,255,.08));
  color:#defaf4;
  font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
#typingIndicator::before{content:'';width:8px;height:8px;border-radius:999px;background:#79e3d2;box-shadow:0 0 0 5px rgba(121,227,210,.12)}
#typingIndicator[hidden]{display:none!important}
.reply-preview,.selected-upload-badge,.selected-sticker-badge{width:100%;box-sizing:border-box}
.compose-box{min-width:0;overflow:hidden}
.compose-tools{width:100%;align-items:stretch}
.compose-tools > *{min-width:0}
#messageComposer .admin-textarea{width:100%;max-width:100%;box-sizing:border-box}
body.auth-page input[type="date"].admin-input,
body.auth-page .auth-card input[type="date"],
body.auth-page .auth-card input[name="birth_date"]{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  font-size:15px;
  line-height:1.2;
  padding-right:14px;
  appearance:none;
  -webkit-appearance:none;
}
body.auth-page .auth-card input[type="date"]::-webkit-date-and-time-value{text-align:left}
body.auth-page .auth-card input[type="date"]::-webkit-datetime-edit,
body.auth-page .auth-card input[type="date"]::-webkit-date-and-time-value{padding:0;font-size:inherit;line-height:inherit}
body.auth-page .auth-card input[type="date"]::-webkit-calendar-picker-indicator{opacity:.88;transform:scale(.96)}
@media (max-width: 860px){
  .messenger-main{gap:12px}
  .message-thread{max-height:none;padding-right:0}
  #typingIndicator{font-size:.9rem;padding:8px 12px}
  body.auth-page .auth-card input[type="date"],
  body.auth-page .auth-card input[name="birth_date"]{font-size:14px}
}


/* 2026-04-21 mobile fixes: notifications, messages, admin people, player positioning */
@media (max-width: 860px){
  .header-notice-wrap{position:static!important}
  .header-notice-dropdown{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:calc(84px + env(safe-area-inset-top))!important;
    transform:translateX(-50%)!important;
    width:min(calc(100vw - 16px), 420px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:min(68vh, 540px)!important;
    overflow:auto!important;
    padding:14px!important;
    border-radius:24px!important;
    z-index:120!important;
    box-sizing:border-box!important;
  }
  .header-notice-head,
  .header-notice-head-actions,
  .header-notice-list,
  .header-notice-item,
  .header-notice-copy{min-width:0}
  .header-notice-item{grid-template-columns:52px minmax(0,1fr)!important}
  .header-notice-item img{width:52px!important;height:52px!important;border-radius:14px!important}
  .header-notice-copy strong,
  .header-notice-copy span,
  .header-notice-copy small{word-break:break-word!important;overflow-wrap:anywhere!important}

  .header-player-panel{
    align-items:center!important;
    justify-content:center!important;
    padding:12px 0 calc(92px + env(safe-area-inset-bottom))!important;
  }
  .header-player-panel .header-player-dialog{
    margin:0 auto!important;
    width:min(calc(100vw - 18px), 560px)!important;
  }

  .profile-player-fab,
  body.public-user-page .profile-player-fab,
  body.profile-page .profile-player-fab{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    bottom:calc(86px + env(safe-area-inset-bottom))!important;
    width:min(calc(100vw - 34px), 360px)!important;
    max-width:min(calc(100vw - 34px), 360px)!important;
  }

  .messages-layout .profile-player-fab,
  .messenger-layout .profile-player-fab,
  body:has(.messenger-layout) .profile-player-fab{
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width: 680px){
  .header-notice-dropdown{
    top:calc(78px + env(safe-area-inset-top))!important;
    width:calc(100vw - 14px)!important;
    max-width:calc(100vw - 14px)!important;
  }
}


.profile-cover-card,.public-cover{position:relative;overflow:hidden}
.profile-cover-avatar-form{position:absolute;left:28px;bottom:18px;z-index:3;display:block}
.profile-cover-avatar-form--mobile{position:absolute;left:14px;bottom:12px;z-index:3;display:block}
.profile-cover-avatar-edit{position:relative;display:inline-grid;cursor:pointer;place-items:center;justify-items:center;align-items:center}
.profile-cover-avatar-edit.is-static{cursor:default}
.profile-cover-avatar{width:126px;height:126px;border-radius:34px;border:1px solid rgba(255,255,255,.16);background:rgba(8,16,32,.6);box-shadow:0 18px 36px rgba(0,0,0,.28);object-fit:cover}
.profile-cover-avatar-edit .profile-avatar-edit__badge {
    position: absolute;
    left: 10.5%;
    top: 65%;
    right: auto;
    bottom: auto;
    transform: translate(-50%,-50%);
    z-index: 2;
    max-width: calc(100% - 16px);
    white-space: nowrap
}
.profile-cover-card .profile-cover-avatar-form .profile-cover-avatar-edit,.public-cover .profile-cover-avatar-form .profile-cover-avatar-edit{display:inline-grid;place-items:center}
.profile-cover-card .profile-cover-upload-trigger,.public-cover .profile-cover-upload-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center}
.profile-sidebar .profile-avatar-upload-form,.profile-sidebar>.profile-avatar{display:none}
.profile-cover-card .profile-cover-upload-form,.public-cover .profile-cover-upload-form{right:18px;bottom:18px}
.public-cover{min-height:260px}
@media (max-width: 860px){
  .profile-cover-avatar-form{display:none}
  .profile-cover-avatar-form--mobile{display:block}
  .profile-cover-avatar{width:92px;height:92px;border-radius:26px}
  .profile-mobile-cover{min-height:170px;padding-bottom:8px}
}


.profile-sidebar .profile-cover-avatar-form,.profile-sidebar .profile-cover-upload-form,.profile-sidebar .profile-cover-info{display:none;}
.profile-cover-info{position:absolute;left:176px;right:210px;bottom:18px;top:auto;transform:none;z-index:4;display:flex;justify-content:flex-start;align-items:flex-end;min-width:0;pointer-events:none}
.profile-cover-panel{display:grid;gap:10px;max-width:min(680px,100%);padding:14px 18px;border-radius:22px;background:linear-gradient(180deg,rgba(5,11,24,.58),rgba(5,11,24,.82));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 44px rgba(0,0,0,.28);pointer-events:auto}
.profile-cover-panel--mobile{padding:16px 16px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(5,11,24,.70),rgba(5,11,24,.88));}
.profile-cover-name-row{display:flex;align-items:center;gap:10px;min-width:0}
.profile-cover-info .inline-badged-name,.profile-mobile-cover-info .inline-badged-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;margin:0}
.profile-cover-info .inline-badged-name .user-list-name,.profile-mobile-cover-info .inline-badged-name .user-list-name{font-size:clamp(1.75rem,3vw,2.8rem);font-weight:900;line-height:1;color:#f4f8ff;text-shadow:0 12px 28px rgba(0,0,0,.28)}
.profile-mobile-cover-info .inline-badged-name .user-list-name{font-size:clamp(1.2rem,6.2vw,1.9rem)}
.profile-cover-about{max-width:58ch;color:#dbe5f7;font-size:1rem;line-height:1.4}
.profile-cover-pills{display:flex;flex-wrap:wrap;gap:8px}
.profile-cover-pills--hero{margin-top:0}
.hero-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eef4ff;font-weight:800;line-height:1.1;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);font-size:.92rem}
.hero-pill.is-good{background:rgba(121,227,210,.14);border-color:rgba(121,227,210,.24);color:#92f0df}
.hero-pill.is-online{background:rgba(84,231,171,.14);border-color:rgba(84,231,171,.22);color:#8df3c3}
.hero-pill.is-offline{background:rgba(255,255,255,.05);color:#d7e1f2}
.hero-pill--role{background:rgba(122,165,255,.14);border-color:rgba(122,165,255,.22);color:#a7c4ff}
.profile-cover-card .profile-cover-avatar-form,.public-cover .profile-cover-avatar-form{left:28px;top:50%;bottom:auto;transform:translateY(-50%);z-index:6}
.profile-cover-card .profile-cover-upload-form,.public-cover .profile-cover-upload-form{z-index:8}
.profile-cover-card .profile-cover-upload-trigger,.profile-cover-card .profile-avatar-edit__badge,.public-cover .profile-cover-upload-trigger,.public-cover .profile-avatar-edit__badge{opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;transform:translateY(6px)}
.profile-cover-upload-trigger {
    left: 10px;
    top: 10px;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 6
}
.profile-cover-card:hover .profile-cover-upload-trigger,.profile-cover-card:hover .profile-avatar-edit__badge,.public-cover:hover .profile-cover-upload-trigger,.public-cover:hover .profile-avatar-edit__badge{opacity:1;visibility:visible;transform:translateY(0)}
.public-cover .profile-cover-upload-form{display:none!important}
.profile-mobile-cover-info{display:none}
@media (max-width: 1024px){
  .profile-cover-info{left:160px;right:170px}
  .profile-cover-panel{max-width:min(560px,100%)}
}
@media (max-width: 860px){
  .profile-cover-info{display:none!important}
  .profile-mobile-cover{display:block;min-height:248px;padding:0;overflow:hidden}
  .profile-mobile-cover .profile-cover-avatar-form--mobile{display:block!important;left:16px;top:50%;bottom:auto;transform:translateY(-50%);z-index:7}
  .profile-mobile-cover .profile-cover-avatar-edit{display:inline-grid!important;place-items:center}
  .profile-mobile-cover .profile-cover-avatar{display:block!important;width:92px;height:92px;border-radius:26px}
  .profile-mobile-cover-info{display:block;position:absolute;left:118px;right:12px;bottom:16px;top:auto;z-index:5}
  .profile-mobile-cover-info .profile-cover-panel{max-width:none;min-height:auto;align-content:start;padding:10px 12px;gap:7px;border-radius:18px;background:linear-gradient(180deg,rgba(5,11,24,.50),rgba(5,11,24,.76));backdrop-filter:blur(8px)}
  .profile-mobile-cover-info .profile-cover-name-row{justify-content:flex-start;text-align:left}
  .profile-mobile-cover-info .inline-badged-name{justify-content:flex-start;gap:5px}
  .profile-mobile-cover-info .inline-badged-name .user-list-name{font-size:clamp(1.2rem,5.8vw,1.8rem);line-height:1.02}
  .profile-mobile-cover-info .user-list-badges{gap:4px}
  .profile-mobile-cover-info .user-list-badges .verification-badge,.profile-mobile-cover-info .user-list-badges .premium-badge,.profile-mobile-cover-info .user-list-badges .online-dot{transform:scale(.9);transform-origin:left center}
  .profile-mobile-cover-info .profile-cover-about{font-size:.88rem;text-align:left;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .profile-mobile-cover-info .profile-cover-pills{justify-content:flex-start;gap:6px}
  .profile-mobile-cover-info .hero-pill{min-height:28px;padding:5px 9px;font-size:.74rem}
  .profile-sidebar .inline-badged-name,.profile-sidebar p.small,.profile-sidebar > p:not(.small),.profile-status-columns{display:none}
}
@media (max-width: 560px){
  .profile-mobile-cover{min-height:232px}
  .profile-mobile-cover .profile-cover-avatar-form--mobile{left:14px;display:block!important}
  .profile-mobile-cover .profile-cover-avatar{display:block!important;width:84px;height:84px;border-radius:24px}
  .profile-mobile-cover .profile-avatar-edit__badge{top:60%}
  .profile-mobile-cover-info{left:104px;right:10px;bottom:12px}
  .profile-mobile-cover-info .profile-cover-panel{padding:9px 11px;gap:6px;border-radius:17px}
  .profile-mobile-cover-info .inline-badged-name .user-list-name{font-size:clamp(1.08rem,5.6vw,1.55rem)}
  .profile-mobile-cover-info .profile-cover-about{font-size:.82rem;-webkit-line-clamp:2}
  .profile-mobile-cover-info .hero-pill{min-height:27px;padding:4px 8px;font-size:.71rem}
}
@media (max-width: 420px){
  .profile-mobile-cover{min-height:216px}
  .profile-mobile-cover .profile-cover-avatar-form--mobile{left:12px;display:block!important}
  .profile-mobile-cover .profile-cover-avatar{display:block!important;width:72px;height:72px;border-radius:22px}
  .profile-mobile-cover .profile-avatar-edit__badge{top:61%}
  .profile-mobile-cover-info{left:90px;right:8px;bottom:10px}
  .profile-mobile-cover-info .profile-cover-panel{padding:8px 9px;gap:5px;border-radius:15px}
  .profile-mobile-cover-info .inline-badged-name .user-list-name{font-size:clamp(1rem,5.1vw,1.32rem)}
  .profile-mobile-cover-info .profile-cover-about{font-size:.78rem;-webkit-line-clamp:2}
  .profile-mobile-cover-info .hero-pill{min-height:24px;padding:4px 7px;font-size:.66rem}
}


@media (min-width: 861px){
  .profile-cover-avatar-edit:hover .profile-avatar-edit__badge,.profile-cover-card:hover .profile-avatar-edit__badge,.public-cover:hover .profile-avatar-edit__badge{opacity:1;visibility:visible}
}
@media (max-width: 860px){
  .profile-cover-card .profile-cover-upload-trigger,.profile-cover-card .profile-avatar-edit__badge,.public-cover .profile-cover-upload-trigger,.public-cover .profile-avatar-edit__badge{opacity:1;visibility:visible}
  .profile-cover-upload-form{right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:8}
  .profile-cover-upload-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center}
  .profile-mobile-cover .profile-avatar-edit__badge{top:58%;transform:translate(-50%,-50%);max-width:calc(100% - 10px)}
}

.profile-cover-avatar-edit .profile-avatar-edit__badge{pointer-events:none}


/* 2026-04-22 responsive hardening */
html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100dvh; }
.page-shell { min-height: 100dvh; }
img, video, iframe, canvas, svg, audio { max-width: 100%; }
.header-inner, .site-nav, .header-actions, .section-head, .split-head, .messenger-head, .message-submit-row, .feed-compose-row, .track-action-row, .music-search-row { min-width: 0; }
.hero-copy h1, .section-head h2, .brand-copy strong, .featured-copy h3, .track-card-head h3, .shop-copy h3, .content-card h3, .messenger-head h1, .profile-sidebar h1 { overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .header-inner { grid-template-columns: minmax(0,1fr) auto; }
  .site-nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .site-header { position: relative; }
  .section-block, .hero-section { padding: 20px 0; }
  .header-player-dialog, .auth-modal__dialog, .gifts-modal__dialog, .gallery-modal__dialog, .sticker-category-modal__dialog { margin: 8px auto; max-height: calc(100dvh - 16px); }
  .header-player-shell { min-height: auto; }
}


/* 2026-04-22 profile upload + mail visual fixes */
.profile-cover-card .admin-flash{
  margin:14px 0 0;
}
.admin-flash{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(121,227,210,.18);
  background:linear-gradient(180deg,rgba(15,30,52,.92),rgba(9,18,33,.96));
  color:#eef4ff;
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.admin-flash::before{
  content:'';
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:999px;
  background:#79e3d2;
  box-shadow:0 0 0 6px rgba(121,227,210,.12);
}
.admin-flash.error{
  background:linear-gradient(180deg,rgba(58,20,33,.94),rgba(35,12,22,.98));
  border-color:rgba(223,111,134,.26);
}
.admin-flash.error::before{
  background:#df6f86;
  box-shadow:0 0 0 6px rgba(223,111,134,.12);
}
.profile-cover-avatar-edit .profile-avatar-edit__badge{
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:calc(100% - 14px);
  max-width:calc(100% - 14px);
  padding:0 12px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}
.profile-cover-upload-form{right:18px !important;bottom:18px !important;top:auto !important;left:auto !important;z-index:8 !important;}
.profile-cover-upload-trigger{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
}
@media (max-width: 860px){
  .profile-mobile-cover{
    padding-top:54px;
  }
  .profile-mobile-cover .profile-cover-avatar-form--mobile{
    left:16px !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    z-index:8 !important;
  }
  .profile-mobile-cover .profile-avatar-edit__badge{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    min-width:calc(100% - 12px);
    max-width:calc(100% - 12px);
  }
  .profile-cover-upload-form--mobile{
    display:block !important;
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:10 !important;
  }
  .profile-mobile-cover .profile-cover-upload-trigger{
    display:inline-flex !important;
    min-height:40px;
    padding:0 14px;
    font-size:.85rem;
    border-radius:14px;
    white-space:nowrap;
  }
  .admin-flash{
    min-height:52px;
    padding:14px 16px;
    border-radius:18px;
  }
}
@media (max-width: 560px){
  .profile-mobile-cover{padding-top:52px;}
  .profile-mobile-cover .profile-cover-avatar-form--mobile{left:14px !important;}
}
@media (max-width: 420px){
  .profile-mobile-cover{padding-top:50px;}
  .profile-mobile-cover .profile-cover-avatar-form--mobile{left:12px !important;}
  .profile-mobile-cover .profile-cover-upload-form--mobile{top:10px !important;right:10px !important;}
  .profile-mobile-cover .profile-cover-upload-trigger{min-height:38px;padding:0 12px;font-size:.8rem;}
}


/* 2026-04-22 mobile cover edit button visibility fix */
@media (max-width: 860px){
  .profile-mobile-cover .profile-cover-upload-form--mobile{
    display:block !important;
    position:absolute;
    top:12px;
    right:12px;
    left:auto;
    bottom:auto;
    z-index:12;
  }
  .profile-mobile-cover .profile-cover-upload-trigger{
    position:relative;
    left:auto;
    top:auto;
    bottom:auto;
    transform:none;
    display:inline-flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto;
    max-width:calc(100vw - 32px);
  }
}
@media (max-width: 420px){
  .profile-mobile-cover .profile-cover-upload-form--mobile{
    top:10px;
    right:10px;
  }
  .profile-mobile-cover .profile-cover-upload-trigger{
    max-width:calc(100vw - 24px);
  }
}

.messenger-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.call-status-chip{margin-top:6px;display:inline-flex;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
/* 2026-08-20 — круглое превью записи кружка в поле ввода сообщения.
   Было: прижато к левому краю формы, а подпись «Live preview записи»
   лежала ПОВЕРХ лица широкой полосой, у которой в круге срезались края.
   Стало: превью по центру, подпись под ним. */
.video-circle-preview{position:relative;width:140px;height:140px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.18);margin:0 auto 30px;background:#000}
.video-circle-preview video{width:100%;height:100%;object-fit:cover;border-radius:50%}
.video-circle-preview__label{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);
  bottom:auto;right:auto;white-space:nowrap;padding:0;background:none;
  font-size:12px;color:var(--muted);text-align:center;
}
.video-recorder-status{margin-top:8px}
.call-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.call-overlay__backdrop{position:absolute;inset:0;background:rgba(5,7,15,.72);backdrop-filter:blur(6px)}
.call-overlay__card{position:relative;z-index:1;width:min(980px,100%);padding:18px;border-radius:24px;max-height:min(94vh,980px);overflow:auto}
.call-overlay__state{font-weight:700;margin-bottom:14px}
.call-overlay__peer{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.call-overlay__peer img,.incoming-call-modal__avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.call-video-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:stretch}
.call-video-grid video{width:100%;min-height:220px;max-height:62vh;border-radius:20px;background:#02030a;object-fit:cover;display:block}
.call-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.call-controls .site-btn{flex:0 1 auto}
.incoming-call-modal__dialog{text-align:center;max-width:420px}
.incoming-call-modal__avatar{display:flex;justify-content:center;margin-bottom:16px}
.incoming-call-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.message-video-shell.is-native video{border-radius:20px}
@media (max-width: 820px){.call-overlay{padding:14px}.call-overlay__card{padding:16px;border-radius:22px}.call-video-grid{grid-template-columns:1fr}.call-video-grid video:first-child{min-height:240px;max-height:52vh}.call-video-grid video:last-child{max-width:220px;max-height:180px;justify-self:end}.call-controls .site-btn{flex:1 1 calc(50% - 8px)}}
@media (max-width: 640px){.call-overlay{padding:8px;align-items:stretch}.call-overlay__card{width:100%;padding:14px;border-radius:20px;display:flex;flex-direction:column;justify-content:flex-start}.call-overlay__peer{gap:12px;margin-bottom:12px}.call-overlay__peer img,.incoming-call-modal__avatar img{width:60px;height:60px}.call-video-grid{gap:10px}.call-video-grid video:first-child{min-height:220px;max-height:46vh}.call-video-grid video:last-child{width:min(42vw,150px);max-width:min(42vw,150px);min-height:unset;max-height:120px;border-radius:16px}.call-controls{gap:8px}.call-controls .site-btn{min-height:50px;padding:11px 12px;border-radius:16px;flex:1 1 calc(50% - 8px)}.call-controls .site-btn span:last-child{font-size:.92rem}.incoming-call-modal__dialog{width:min(calc(100vw - 16px),420px);padding:18px;border-radius:22px}.incoming-call-modal__actions .site-btn{width:100%}}
@media (max-width: 420px){.call-overlay__card{padding:12px}.call-video-grid video:first-child{min-height:190px;max-height:42vh}.call-video-grid video:last-child{width:min(44vw,132px);max-width:min(44vw,132px);max-height:108px}.call-controls .site-btn{flex:1 1 100%}}


/* 2026-04-22 messages video-circle ui refinements */
.media-action-btn{display:inline-flex;align-items:center;gap:10px}
.media-action-btn .btn-glyph{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px}
.media-action-btn .btn-glyph svg{width:18px;height:18px;display:block}
.message-video-shell.is-native.is-circle{max-width:220px}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{padding:10px 10px 12px;border-radius:28px}
.message-video-shell.is-native.is-circle .custom-media-player__media{width:200px;height:200px;max-width:100%;max-height:none;aspect-ratio:1/1;border-radius:999px;object-fit:cover;display:block;margin:0 auto}
.message-video-shell.is-native.is-circle .custom-media-player__controls{padding-top:10px}
.message-video-shell.is-native.is-circle .custom-media-player__timeline{grid-template-columns:38px minmax(0,1fr) 38px}
.message-video-shell.is-native.is-circle .custom-media-player__timeline span{font-size:.78rem}
.message-video-shell.is-native.is-circle .custom-media-player__actions{gap:8px}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle{max-width:180px}
  .message-video-shell.is-native.is-circle .custom-media-player__media{width:160px;height:160px}
}


/* messages.php premium action buttons */
.media-action-btn{
  position:relative;
  gap:12px;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(122,165,255,.18);
  background:linear-gradient(180deg,rgba(18,31,55,.96),rgba(10,19,36,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 24px rgba(0,0,0,.18);
}
.media-action-btn:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 30px rgba(4,10,24,.28);
}
.media-action-btn .btn-glyph{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:12px;
  background:radial-gradient(circle at 30% 30%,rgba(147,194,255,.35),rgba(88,138,255,.18) 45%,rgba(16,27,48,.4) 100%);
  border:1px solid rgba(145,186,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(7,13,30,.24);
}
.media-action-btn .btn-glyph svg{width:19px;height:19px}
.call-controls .media-action-btn{min-width:152px;justify-content:center}
#endCallBtn.media-action-btn .btn-glyph{background:radial-gradient(circle at 30% 30%,rgba(255,170,193,.35),rgba(255,82,124,.22) 45%,rgba(46,16,25,.45) 100%);border-color:rgba(255,128,159,.22)}

/* force video-circle rendering in messages */
.message-video-shell.is-native.is-circle{
  max-width:228px!important;
  width:228px;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  padding:8px!important;
  border-radius:999px!important;
  background:radial-gradient(circle at 30% 30%,rgba(33,58,92,.96),rgba(12,22,40,.98));
  border:1px solid rgba(132,182,255,.2);
  box-shadow:0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  width:210px!important;
  height:210px!important;
  aspect-ratio:1/1!important;
  max-width:210px!important;
  max-height:210px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  overflow:hidden;
  display:block;
  margin:0 auto;
  background:#000;
}
.message-video-shell.is-native.is-circle .custom-media-player__overlay{
  inset:8px!important;
  border-radius:50%!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__controls{
  padding:10px 10px 2px!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__timeline{
  grid-template-columns:40px minmax(0,1fr) 40px!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__timeline span{
  font-size:.78rem!important;
}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle{max-width:188px!important;width:188px}
  .message-video-shell.is-native.is-circle .custom-media-player__media,
  .message-video-shell.is-native.is-circle video.custom-media-player__media{
    width:170px!important;height:170px!important;max-width:170px!important;max-height:170px!important;
  }
  .call-controls .media-action-btn{min-width:132px}
}


/* 2026-04-22 video-circle simplified center control */
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  position:relative;
}
.message-video-shell.is-native.is-circle .custom-media-player__controls{
  display:none!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__overlay{
  inset:0!important;
  bottom:auto!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:none;
}
.message-video-shell.is-native.is-circle .custom-media-player__overlay .custom-media-player__overlay-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(6,12,24,.54);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  pointer-events:auto;
  font-size:1.35rem;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .custom-media-player__overlay{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  transform:none!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .custom-media-player__overlay .custom-media-player__overlay-icon{
  background:rgba(6,12,24,.42);
}
@media (hover:hover){
  .message-video-shell.is-native.is-circle .custom-media-player__overlay .custom-media-player__overlay-icon:hover{
    transform:scale(1.06);
  }
}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle .custom-media-player__overlay .custom-media-player__overlay-icon{
    width:58px;
    height:58px;
    font-size:1.2rem;
  }
}


/* 2026-04-23 telegram-like video circle timeline */
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  position:relative;
  width:228px;
  height:228px;
  overflow:visible;
}
.message-video-shell.is-native.is-circle .video-circle-timeline{
  position:absolute;
  inset:-6px;
  z-index:3;
  pointer-events:none;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  transform:rotate(0deg);
  pointer-events:auto;
  cursor:grab;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.22));
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg:active{cursor:grabbing}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{
  fill:none;
  stroke-width:4;
  transform-origin:120px 120px;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__track{
  stroke:rgba(164,190,230,.22);
}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{
  stroke:#5ea7ff;
  stroke-linecap:round;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{
  fill:#ffffff;
  stroke:rgba(94,167,255,.95);
  stroke-width:2;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  box-shadow:0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid;
  place-items:center;
  color:#fff;
  pointer-events:auto;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon{
  font-size:1.25rem;
  line-height:1;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{
  position:absolute;
  font-size:.82rem;
  color:#eaf2ff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  letter-spacing:.01em;
  background:rgba(7,14,28,.42);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:4px 9px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:6px;top:72px}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:6px;bottom:26px}
.message-video-shell.is-native.is-circle .custom-media-player__overlay{display:none!important}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:188px;height:188px}
  .message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:58px;height:58px}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time{font-size:.76rem;padding:3px 8px}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:2px;top:56px}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:2px;bottom:18px}
}

/* 2026-04-24 final fix: stable video-circle player layout */
.message-video-shell.is-native.is-circle{
  width:240px!important;
  max-width:240px!important;
  padding:0!important;
  margin-top:12px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  position:relative!important;
  width:240px!important;
  height:240px!important;
  padding:0!important;
  overflow:visible!important;
  border-radius:50%!important;
  background:#000!important;
  border:4px solid rgba(92,143,255,.34)!important;
  box-shadow:0 0 0 5px rgba(92,143,255,.13),0 16px 38px rgba(0,0,0,.25)!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  border-radius:50%!important;
  background:#000!important;
  z-index:1!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__controls{
  display:none!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__overlay{
  display:none!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline{
  position:absolute!important;
  inset:-10px!important;
  width:auto!important;
  height:auto!important;
  pointer-events:none!important;
  z-index:5!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:auto!important;
  transform:rotate(-90deg)!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{
  fill:none!important;
  stroke-width:5!important;
  vector-effect:non-scaling-stroke!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__track{stroke:rgba(85,128,210,.34)!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{stroke:#79aaff!important;stroke-linecap:round!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{fill:#fff!important;stroke:#65a2ff!important;stroke-width:3!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:70px!important;
  height:70px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.3)!important;
  background:rgba(40,40,44,.64)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  backdrop-filter:blur(8px)!important;
  z-index:7!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon{
  width:auto!important;
  height:auto!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:24px!important;
  line-height:1!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{
  opacity:0!important;
  pointer-events:none!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{
  position:absolute!important;
  z-index:8!important;
  display:inline-flex!important;
  min-width:42px!important;
  justify-content:center!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:rgba(2,7,18,.82)!important;
  color:#fff!important;
  font-size:.78rem!important;
  line-height:1!important;
  pointer-events:none!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:-4px!important;top:76px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:-4px!important;bottom:48px!important}
@media(max-width:640px){
  .message-video-shell.is-native.is-circle{width:206px!important;max-width:206px!important}
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:206px!important;height:206px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:62px!important;height:62px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:-6px!important;top:62px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:-6px!important;bottom:36px!important}
}

/* 2026-04-24 hard fix: video-circle playback-safe Telegram layout */
.message-video-shell.is-native.is-circle{
  width:236px!important;max-width:236px!important;min-width:236px!important;padding:0!important;margin:12px 0 0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  position:relative!important;display:block!important;width:236px!important;height:236px!important;padding:0!important;border-radius:50%!important;overflow:visible!important;background:#000!important;border:0!important;box-shadow:none!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  position:absolute!important;inset:10px!important;width:calc(100% - 20px)!important;height:calc(100% - 20px)!important;max-width:none!important;max-height:none!important;aspect-ratio:1/1!important;border-radius:50%!important;object-fit:cover!important;background:#000!important;display:block!important;z-index:1!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__controls,
.message-video-shell.is-native.is-circle .custom-media-player__overlay{display:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline{position:absolute!important;inset:0!important;z-index:5!important;pointer-events:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;transform:none!important;pointer-events:auto!important;cursor:pointer!important;filter:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{fill:none!important;stroke-width:5!important;vector-effect:non-scaling-stroke!important;transform:none!important;transform-origin:120px 120px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__track{stroke:rgba(96,132,198,.42)!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{stroke:#6fa8ff!important;stroke-linecap:round!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{fill:#fff!important;stroke:#5f9fff!important;stroke-width:2.5!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:66px!important;height:66px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.24)!important;background:rgba(44,45,49,.72)!important;color:#fff!important;display:grid!important;place-items:center!important;cursor:pointer!important;pointer-events:auto!important;z-index:8!important;box-shadow:0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon{width:auto!important;height:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:23px!important;line-height:1!important;padding-left:2px!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:0!important;pointer-events:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{position:absolute!important;z-index:9!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:40px!important;padding:4px 8px!important;border-radius:999px!important;background:rgba(2,7,18,.86)!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff!important;font-size:.78rem!important;font-weight:700!important;line-height:1!important;pointer-events:none!important;text-shadow:none!important;backdrop-filter:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:0!important;top:72px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:0!important;bottom:44px!important}
@media(max-width:640px){
  .message-video-shell.is-native.is-circle{width:204px!important;max-width:204px!important;min-width:204px!important}
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:204px!important;height:204px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:60px!important;height:60px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--current{top:60px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{bottom:34px!important}
}

/* 2026-04-24 stable override: video-circle click/play must win over timeline CSS */
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  pointer-events:auto!important;
  z-index:20!important;
  touch-action:manipulation!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{
  z-index:6!important;
  touch-action:none!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{
  opacity:0!important;
  pointer-events:none!important;
}

/* v6 final: Telegram-like video-circle control behavior */
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  width:240px!important;height:240px!important;max-width:240px!important;min-width:240px!important;position:relative!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;background:#000!important;display:block!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline{pointer-events:none!important;inset:0!important;position:absolute!important;z-index:6!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{pointer-events:auto!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;touch-action:none!important;cursor:pointer!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{opacity:1!important;pointer-events:auto!important;z-index:10!important;touch-action:manipulation!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:.72!important;pointer-events:auto!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing:hover .video-circle-timeline__center-btn{opacity:1!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{stroke-width:5!important;fill:none!important;vector-effect:non-scaling-stroke!important;transform-origin:120px 120px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{pointer-events:none!important;user-select:none!important}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:204px!important;height:204px!important;min-width:204px!important;max-width:204px!important}
}

/* v6 final: robust WebRTC call video layout */
.call-video-grid video#remoteCallVideo,
.call-video-grid video#localCallVideo{background:#02030a!important;object-fit:cover!important;display:block!important;visibility:visible!important;opacity:1!important}
.call-video-grid video#remoteCallVideo{min-height:260px!important}
.call-video-grid video#localCallVideo{min-height:220px!important}

/* v6 final: Telegram-like video-circle control behavior */
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  width:240px!important;height:240px!important;max-width:240px!important;min-width:240px!important;position:relative!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;background:#000!important;display:block!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline{pointer-events:none!important;inset:0!important;position:absolute!important;z-index:6!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{pointer-events:auto!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;touch-action:none!important;cursor:pointer!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{opacity:1!important;pointer-events:auto!important;z-index:10!important;touch-action:manipulation!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:.72!important;pointer-events:auto!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing:hover .video-circle-timeline__center-btn{opacity:1!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{stroke-width:5!important;fill:none!important;vector-effect:non-scaling-stroke!important;transform-origin:120px 120px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{pointer-events:none!important;user-select:none!important}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:204px!important;height:204px!important;min-width:204px!important;max-width:204px!important}
}

/* v6 final: robust WebRTC call video layout */
.call-video-grid video#remoteCallVideo,
.call-video-grid video#localCallVideo{background:#02030a!important;object-fit:cover!important;display:block!important;visibility:visible!important;opacity:1!important}
.call-video-grid video#remoteCallVideo{min-height:260px!important}
.call-video-grid video#localCallVideo{min-height:220px!important}

/* v7 hard override: stable Telegram-like video circle */
.message-video-shell.is-native.is-circle{
  --circle-size:236px;
  width:var(--circle-size)!important;
  min-width:var(--circle-size)!important;
  max-width:var(--circle-size)!important;
  margin:12px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  position:relative!important;
  width:var(--circle-size)!important;
  height:var(--circle-size)!important;
  min-width:var(--circle-size)!important;
  max-width:var(--circle-size)!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#000!important;
  box-shadow:none!important;
  overflow:visible!important;
  line-height:0!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  position:absolute!important;
  inset:9px!important;
  width:calc(100% - 18px)!important;
  height:calc(100% - 18px)!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:50%!important;
  background:#000!important;
  z-index:1!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__controls,
.message-video-shell.is-native.is-circle .custom-media-player__overlay{display:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline{
  position:absolute!important;
  inset:0!important;
  width:var(--circle-size)!important;
  height:var(--circle-size)!important;
  pointer-events:none!important;
  z-index:10!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  transform:none!important;
  pointer-events:auto!important;
  touch-action:none!important;
  cursor:pointer!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{
  fill:none!important;
  stroke-width:5!important;
  vector-effect:non-scaling-stroke!important;
  transform-origin:120px 120px!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__track{stroke:rgba(96,132,198,.42)!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{stroke:#6fa8ff!important;stroke-linecap:round!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{fill:#fff!important;stroke:#5f9fff!important;stroke-width:2.7!important;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:rgba(44,45,49,.68)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  z-index:30!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon{
  display:block!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:22px!important;
  line-height:1!important;
  padding:0!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:.72!important;pointer-events:auto!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{
  position:absolute!important;
  z-index:35!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:38px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:rgba(2,7,18,.86)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
  pointer-events:none!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:0!important;top:74px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:0!important;bottom:43px!important}
@media(max-width:640px){
  .message-video-shell.is-native.is-circle{--circle-size:204px}
  .message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--current{top:62px!important;left:-2px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{bottom:35px!important;right:-2px!important}
}

/* v7 override — 2026-07-09 NEUTRALIZED: forced `.call-video-grid` to a 2-col
   GRID and applied a bare "#localCallVideo{transform}" + shared "video" sizing.
   This fought the current flex side-by-side self-view (authoritative block at end
   of homepage.css) and contributed to the flicker cascade. Left blank on purpose. */


/* 2026-04-24 v8: final video-circle timeline/button sync */
.message-video-shell.is-native.is-circle{--circle-size:236px!important;width:var(--circle-size)!important;min-width:var(--circle-size)!important;max-width:var(--circle-size)!important;overflow:visible!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:var(--circle-size)!important;height:var(--circle-size)!important;position:relative!important;overflow:visible!important;border-radius:50%!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;transform:none!important;pointer-events:auto!important;touch-action:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,.message-video-shell.is-native.is-circle .video-circle-timeline__progress{fill:none!important;stroke-width:5!important;transform:none!important;transform-origin:120px 120px!important;vector-effect:non-scaling-stroke!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{stroke-linecap:round!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{fill:#fff!important;stroke:#69a4ff!important;stroke-width:2.7!important;filter:drop-shadow(0 2px 5px rgba(0,0,0,.42))!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;border-radius:50%!important;background:rgba(24,28,34,.58)!important;border:1px solid rgba(255,255,255,.20)!important;color:#fff!important;opacity:1!important;pointer-events:auto!important;transition:opacity .16s ease,transform .16s ease,background .16s ease!important;transform:translate(-50%,-50%) scale(1)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon,.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn svg{width:34px!important;height:34px!important;display:block!important;color:#fff!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:0!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(.92)!important}
@media (hover:hover) and (pointer:fine){.message-video-shell.is-native.is-circle .custom-media-player.is-playing:hover .video-circle-timeline__center-btn,.message-video-shell.is-native.is-circle .custom-media-player.is-playing:focus-within .video-circle-timeline__center-btn{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:640px){.message-video-shell.is-native.is-circle{--circle-size:204px}.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:54px;height:54px;min-width:54px;min-height:54px;background:rgba(24,28,34,.50)}.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon,.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn svg{width:29px;height:29px}.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:0;pointer-events:none}}
@media (hover:hover) and (pointer:fine){.message-video-shell.is-native.is-circle .custom-media-player.is-playing:hover .video-circle-timeline__center-btn,.message-video-shell.is-native.is-circle .custom-media-player.is-playing:focus-within .video-circle-timeline__center-btn{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}}
@media (hover:none), (pointer:coarse){.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:0;pointer-events:none}.message-video-shell.is-native.is-circle .custom-media-player.show-mobile-controls .video-circle-timeline__center-btn,.message-video-shell.is-native.is-circle .custom-media-player:active .video-circle-timeline__center-btn{opacity:1;pointer-events:auto}}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress,.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{transition:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{transform-box:fill-box!important;transform-origin:center!important}

/* v10 final: video-circle glass UI + exact thumb/progress sync */
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{transform:none!important;pointer-events:auto!important;touch-action:none!important;z-index:12!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__track,.message-video-shell.is-native.is-circle .video-circle-timeline__progress{transform:none!important;transform-origin:120px 120px!important;transition:none!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{transform:none!important;transition:none!important;will-change:cx,cy!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.045))!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -10px 24px rgba(0,0,0,.10)!important;backdrop-filter:blur(18px) saturate(155%)!important;-webkit-backdrop-filter:blur(18px) saturate(155%)!important;opacity:1!important;pointer-events:auto!important;transition:opacity .18s ease,transform .18s ease,background .18s ease!important;}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:0!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(.90)!important;}
@media (hover:hover) and (pointer:fine){.message-video-shell.is-native.is-circle .custom-media-player.is-playing:hover .video-circle-timeline__center-btn,.message-video-shell.is-native.is-circle .custom-media-player.is-playing:focus-within .video-circle-timeline__center-btn{opacity:.94;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}}
@media (hover:none),(pointer:coarse){.message-video-shell.is-native.is-circle .custom-media-player.is-playing .video-circle-timeline__center-btn{opacity:0;pointer-events:none}.message-video-shell.is-native.is-circle .custom-media-player.show-mobile-controls.is-playing .video-circle-timeline__center-btn,.message-video-shell.is-native.is-circle .custom-media-player:active.is-playing .video-circle-timeline__center-btn{opacity:.94;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}}


/* 2026-04-24 v12: TURN-only remote video recovery + exact video-circle sync */
.call-video-grid video#remoteCallVideo,.call-video-grid video#localCallVideo{background:#020712!important;object-fit:cover!important;display:block!important;opacity:1!important;visibility:visible!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{transform:none!important;transition:none!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{transition:none!important;transform:none!important;will-change:auto!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline{pointer-events:none!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{pointer-events:auto!important;touch-action:none!important;}

/* v13: video-circle UX - no chasing thumb, no play/pause overlay */
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb{display:none!important;opacity:0!important;visibility:hidden!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.message-video-shell.is-native.is-circle .video-circle-timeline__progress{transition:none!important;animation:none!important;}

/* 2026-04-25 v14: call UI, mobile video-circle alignment, authenticated mobile header
   2026-07-09: NEUTRALIZED — this old block forced `.call-video-grid` to `display:grid`
   and HID `#localCallVideo` (width:1px;opacity:0;clip) because the self-view used to
   be suppressed. That fights the current side-by-side self-view and was part of the
   flicker cascade. Authoritative layout now lives at the end of homepage.css. Only
   the harmless remote-video background is kept. */
.call-video-grid video#remoteCallVideo{object-fit:cover!important;background:radial-gradient(circle at 50% 45%, rgba(122,165,255,.10), transparent 44%), #020712!important}
@media(max-width:760px){.call-video-grid video#remoteCallVideo{border-radius:20px}}
.message-video-shell.is-native.is-circle{position:relative!important;display:block!important;width:var(--circle-size)!important;height:var(--circle-size)!important;min-width:var(--circle-size)!important;max-width:var(--circle-size)!important;margin:12px 0 0!important;padding:0!important;overflow:visible!important;line-height:0!important}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact,.message-video-shell.is-native.is-circle [data-media-player]{position:relative!important;width:var(--circle-size)!important;height:var(--circle-size)!important;margin:0!important;padding:0!important;overflow:visible!important;border-radius:50%!important}
.message-video-shell.is-native.is-circle .video-circle-timeline{position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:var(--circle-size)!important;height:var(--circle-size)!important;transform:none!important;margin:0!important;padding:0!important;overflow:visible!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{position:absolute!important;left:0!important;top:0!important;width:var(--circle-size)!important;height:var(--circle-size)!important;transform:none!important;margin:0!important;overflow:visible!important}
@media(max-width:640px){.message-video-shell.is-native.is-circle{--circle-size:204px}body.app-shell .site-header .brand img{display:none}body.app-shell .site-header .brand{gap:0;min-width:0}}

/* 2026-04-25 merch modal and mobile header/video-circle fixes */
.merch-modal[hidden]{display:none!important}
.merch-modal{position:fixed;inset:0;z-index:120;background:rgba(3,8,18,.72);display:grid;place-items:center;padding:18px;backdrop-filter:blur(10px)}
.merch-modal__card{position:relative;width:min(560px,100%);padding:24px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(13,24,44,.98),rgba(8,15,30,.98));box-shadow:0 24px 80px rgba(0,0,0,.45)}
.merch-modal__close{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font-size:24px;cursor:pointer}
.merch-modal__product{display:flex;gap:14px;align-items:center;margin:12px 0 18px;padding:12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.merch-modal__product img{width:74px;height:74px;border-radius:16px;object-fit:cover;border:1px solid var(--line)}
.merch-order-thumb{max-height:120px;object-fit:cover;border-radius:16px}
@media(max-width:700px){body[data-user-auth="1"] .site-header .brand{display:none}body[data-user-auth="1"] .header-inner{grid-template-columns:1fr;gap:10px}.message-video-shell.is-native.is-circle{--circle-size:min(204px,58vw);width:var(--circle-size);min-width:var(--circle-size);max-width:var(--circle-size);margin:8px auto 12px;align-self:center}.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact,.message-video-shell.is-native.is-circle .video-circle-timeline{width:var(--circle-size);height:var(--circle-size);min-width:var(--circle-size);max-width:var(--circle-size)}.message-video-shell.is-native.is-circle .custom-media-player__media,.message-video-shell.is-native.is-circle video.custom-media-player__media{width:calc(var(--circle-size) - 28px);height:calc(var(--circle-size) - 28px);left:14px;top:14px}.message-bubble .message-video-shell.is-native.is-circle{margin-left:auto;margin-right:auto}}
.merch-modal__balance{margin:10px 0 12px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted)}
.merch-modal [data-merch-modal-warning]{color:#ff9fb2;margin:6px 0 0}
.merch-modal [data-merch-submit]:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.7)}


/* ===== 2026-04-25 fix pack: video-circle mobile timeline, dialogs, blacklist ===== */
.gift-item{min-width:0}
.gift-item-link{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;flex:1 1 auto}
.site-btn.small,.button.small{min-height:38px;padding:8px 12px;border-radius:14px;font-size:.86rem}
.header-notice-head-actions [data-notice-summary]{display:none!important}

.message-video-shell.is-native.is-circle{
  width:min(240px,100%)!important;
  max-width:240px!important;
  margin:8px auto 10px!important;
  overflow:visible!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  position:relative!important;
  width:220px!important;
  height:220px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  border-radius:999px!important;
  background:transparent!important;
  border:0!important;
  display:block!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  position:absolute!important;
  inset:10px!important;
  width:calc(100% - 20px)!important;
  height:calc(100% - 20px)!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:999px!important;
  background:#020817!important;
  border:0!important;
  z-index:1!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  overflow:visible!important;
  z-index:3!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  pointer-events:auto!important;
  overflow:visible!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:58px!important;
  height:58px!important;
  z-index:5!important;
  pointer-events:auto!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time{
  position:absolute!important;
  z-index:6!important;
  pointer-events:none!important;
  font-size:.78rem!important;
  line-height:1!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:rgba(4,10,22,.86)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(0,0,0,.25)!important;
  white-space:nowrap!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:2px!important;top:72px!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:2px!important;bottom:52px!important}
.message-video-shell.is-native.is-circle .custom-media-player__controls{display:none!important}
@media (max-width:640px){
  .message-video-shell.is-native.is-circle{width:210px!important;max-width:210px!important;margin:6px auto 8px!important}
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:200px!important;height:200px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:54px!important;height:54px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time{font-size:.74rem!important;padding:4px 7px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--current{left:0!important;top:64px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{right:0!important;bottom:44px!important}
}
@media (max-width:420px){
  .message-video-shell.is-native.is-circle{width:196px!important;max-width:196px!important}
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:188px!important;height:188px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--current{top:58px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__time--duration{bottom:38px!important}
}

.call-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.call-overlay[hidden],.incoming-call-modal[hidden],.auth-modal[hidden]{display:none!important}
.call-overlay__backdrop,.auth-modal__backdrop{position:absolute;inset:0;background:rgba(5,7,15,.72);backdrop-filter:blur(6px)}
.call-overlay__card{position:relative;z-index:1;width:min(980px,100%);padding:18px;border-radius:24px;max-height:min(94vh,980px);overflow:auto}
.call-overlay__state{font-weight:800;margin-bottom:14px}
.call-overlay__peer{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.call-overlay__peer img,.incoming-call-modal__avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.call-video-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start}
.call-video-grid video{width:100%;min-height:220px;border-radius:22px;background:#020817;object-fit:cover}
.call-video-grid video:last-child{min-height:180px}
.call-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.incoming-call-modal{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:20px}
.incoming-call-modal__dialog{position:relative;z-index:1;text-align:center;width:min(420px,100%);padding:24px;border-radius:24px}
.incoming-call-modal__avatar{display:flex;justify-content:center;margin-bottom:16px}
.incoming-call-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media (max-width:820px){
  .call-overlay{padding:14px}
  .call-video-grid{grid-template-columns:1fr}
  .call-video-grid video:first-child{min-height:240px;max-height:52vh}
  .call-video-grid video:last-child{width:min(42vw,220px);min-height:140px;justify-self:end}
  .call-controls .site-btn{flex:1 1 calc(50% - 8px)}
}
@media (max-width:640px){
  .call-overlay{padding:8px;align-items:stretch}
  .call-overlay__card{width:100%;padding:14px;border-radius:20px}
  .call-video-grid video:first-child{min-height:220px;max-height:46vh}
  .call-video-grid video:last-child{width:min(44vw,150px);max-height:120px;border-radius:16px}
  .call-controls .site-btn{min-height:50px;padding:11px 12px;border-radius:16px;flex:1 1 calc(50% - 8px)}
  .incoming-call-modal__dialog{width:min(calc(100vw - 16px),420px);padding:18px;border-radius:22px}
  .incoming-call-modal__actions .site-btn{width:100%}
}

/* ===== 2026-04-25 hotfix: users presence dot + cookie banner ===== */
.home-user-status{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin-top:10px!important;color:var(--muted)!important;font-size:.9rem!important;}
.home-user-status .online-dot{position:static!important;right:auto!important;bottom:auto!important;flex:0 0 10px!important;width:10px!important;height:10px!important;border:0!important;border-radius:999px!important;background:#8da0c2!important;box-shadow:none!important;transform:none!important;}
.home-user-status .online-dot.is-online{background:#52d17c!important;box-shadow:0 0 0 4px rgba(82,209,124,.14)!important;}
.home-user-card .home-user-meta,.home-user-card .home-user-copy{min-width:0!important;}
.cookie-banner{position:fixed;left:50%;right:auto;bottom:max(18px, env(safe-area-inset-bottom));transform:translateX(-50%);width:min(760px, calc(100vw - 28px));max-width:calc(100vw - 28px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;border-radius:26px;z-index:1000;pointer-events:auto;}
.cookie-banner p{margin:0;line-height:1.35;max-width:none;}
.cookie-actions{display:flex!important;gap:10px!important;align-items:center!important;flex-wrap:nowrap!important;margin:0!important;}
.cookie-actions .button,.cookie-actions .button-secondary{width:auto!important;white-space:nowrap!important;min-height:48px!important;padding:12px 18px!important;}
@media (max-width:640px){.home-user-card{grid-template-columns:72px minmax(0,1fr);gap:14px}.home-user-card img{width:72px;height:72px;border-radius:20px}.home-user-actions{display:grid;grid-template-columns:1fr}.cookie-banner{left:10px;right:10px;bottom:max(10px, env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;grid-template-columns:1fr;padding:16px}.cookie-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.cookie-actions .button,.cookie-actions .button-secondary{width:100%;justify-content:center}}

/* 2026-04-25 requested hotfix: video-circle without timeline */
.message-video-shell.is-native.is-circle{
  width:240px!important;max-width:240px!important;min-width:240px!important;
  margin:12px auto 0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  width:240px!important;height:240px!important;min-width:240px!important;max-width:240px!important;
  position:relative!important;border-radius:50%!important;overflow:visible!important;background:transparent!important;padding:0!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  position:relative!important;inset:auto!important;width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important;background:#000!important;display:block!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__controls,
.message-video-shell.is-native.is-circle .custom-media-player__overlay,
.message-video-shell.is-native.is-circle .video-circle-timeline__svg,
.message-video-shell.is-native.is-circle .video-circle-timeline__track,
.message-video-shell.is-native.is-circle .video-circle-timeline__progress,
.message-video-shell.is-native.is-circle .video-circle-timeline__thumb,
.message-video-shell.is-native.is-circle .video-circle-timeline__time{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.message-video-shell.is-native.is-circle .video-circle-timeline{position:absolute!important;inset:0!important;z-index:9!important;pointer-events:none!important;display:block!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:58px!important;height:58px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.20)!important;background:rgba(7,12,23,.58)!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.34)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
  opacity:0!important;pointer-events:auto!important;z-index:12!important;transition:opacity .18s ease,transform .18s ease!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn .custom-media-player__overlay-icon{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;background:transparent!important;border:0!important;color:inherit!important}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn svg{width:34px!important;height:34px!important;display:block!important}
.message-video-shell.is-native.is-circle .custom-media-player:not(.is-playing) .video-circle-timeline__center-btn,
.message-video-shell.is-native.is-circle .custom-media-player.show-mobile-controls .video-circle-timeline__center-btn,
.message-video-shell.is-native.is-circle .custom-media-player:hover .video-circle-timeline__center-btn,
.message-video-shell.is-native.is-circle .custom-media-player:focus-within .video-circle-timeline__center-btn{opacity:.92!important}
@media(max-width:640px){
  .message-video-shell.is-native.is-circle{width:204px!important;max-width:204px!important;min-width:204px!important;margin-left:auto!important;margin-right:auto!important}
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:204px!important;height:204px!important;min-width:204px!important;max-width:204px!important}
  .message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{width:54px!important;height:54px!important}
}

/* 2026-04-25 fix4: mobile overlays + desktop video-circle geometry */
.message-video-shell.is-native.is-circle,
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact,
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  box-sizing:border-box!important;
  aspect-ratio:1/1!important;
  min-width:0!important;
  min-height:0!important;
  flex:0 0 auto!important;
  transform:none!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{
  border-radius:999px!important;
  contain:layout paint!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  border-radius:999px!important;
  clip-path:circle(50% at 50% 50%)!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__svg{
  preserveAspectRatio:xMidYMid meet!important;
}
@media (min-width:641px){
  .message-video-shell.is-native.is-circle{width:240px!important;max-width:240px!important;min-width:240px!important;}
  .message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{width:240px!important;height:240px!important;min-width:240px!important;min-height:240px!important;}
}
@media (max-width:860px){
  .header-notice-dropdown{
    top:calc(env(safe-area-inset-top) + 104px)!important;
    z-index:260!important;
  }
  .header-player-panel{
    z-index:320!important;
    background:rgba(5,8,17,.82)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  body:has(.header-player-panel:not([hidden])) .site-header,
  body:has(.header-player-panel:not([hidden])) .mobile-bottom-nav,
  body:has(.header-player-panel:not([hidden])) .profile-player-fab{
    visibility:hidden!important;
    pointer-events:none!important;
  }
}
.call-overlay{z-index:360!important;}
.call-overlay__backdrop{position:absolute;inset:0;background:rgba(5,7,15,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.call-overlay__state{font-weight:800;margin-bottom:14px;color:var(--text);}
.call-overlay__peer p{margin:4px 0 0;}

/* 2026-04-25 fix5: privacy mobile/tablet + call/video-circle/private upload polish */
body.utility-page{overflow-x:hidden;}
body.utility-page .utility-main{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:44px 0 70px;}
body.utility-page .utility-card{max-width:100%;overflow:hidden;}
body.utility-page .utility-card h1{overflow-wrap:anywhere;hyphens:auto;max-width:100%;font-size:clamp(2.25rem,9vw,5.2rem);line-height:.98;}
body.utility-page .utility-card p,body.utility-page .legal-list{max-width:100%;overflow-wrap:anywhere;}
body.utility-page .legal-list{padding-left:1.15em;}
@media (min-width:641px) and (max-width:1180px){
  .container,.notifications-layout,.profile-layout,.messenger-layout,.auth-wrap,.install-shell{width:min(calc(100vw - 40px),1180px)!important;}
  .header-inner{gap:14px;padding:16px 18px;}
  body.utility-page .utility-card{padding:clamp(24px,4vw,42px);}
  .notifications-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;}
  .notifications-filters .site-btn{min-width:0;}
  .call-overlay__card{width:min(980px,calc(100vw - 36px));}
  .call-video-grid{min-height:clamp(340px,52vw,560px);}
}
@media (max-width:640px){
  body.utility-page .page-shell{min-width:0;overflow:hidden;}
  body.utility-page .site-header{position:relative;z-index:5;padding:22px 0 0;}
  body.utility-page .container.header-inner{width:calc(100vw - 20px)!important;margin:0 auto;padding:14px 16px;border-radius:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;}
  body.utility-page .brand{min-width:0;gap:12px;}
  body.utility-page .brand img{width:62px;height:62px;flex:0 0 62px;}
  body.utility-page .brand-copy{min-width:0;}
  body.utility-page .brand-copy strong{font-size:clamp(1.65rem,9vw,2.2rem);letter-spacing:.14em;white-space:nowrap;}
  body.utility-page .brand-copy small{font-size:1rem;}
  body.utility-page .language-switcher{gap:10px;}
  body.utility-page .lang-pill{width:76px;min-width:76px;height:76px;padding:0;border-radius:24px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;}
  body.utility-page .utility-main{width:100%;padding:88px 0 72px;margin:0;overflow:hidden;}
  body.utility-page .utility-card{width:100%;padding:0 22px;border:0;background:transparent;box-shadow:none;overflow:visible;}
  body.utility-page .utility-card h1{font-size:clamp(2.65rem,13.2vw,4.35rem);line-height:.98;letter-spacing:-.045em;max-width:calc(100vw - 44px);}
  body.utility-page .utility-card>p{font-size:1.15rem;line-height:1.45;max-width:calc(100vw - 44px);}
  body.utility-page .legal-list{display:grid;gap:20px;margin-top:24px;padding-left:1.2em;max-width:calc(100vw - 44px);font-size:1.08rem;line-height:1.55;}
  body.utility-page .utility-actions .button{width:100%;}
}
@media (max-width:390px){body.utility-page .lang-pill{width:66px;min-width:66px;height:66px}body.utility-page .brand-copy strong{letter-spacing:.1em}}
.message-video-shell.is-native.is-circle,.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact{border-radius:999px!important;aspect-ratio:1/1!important;overflow:hidden!important;}
.message-video-shell.is-native.is-circle .custom-media-player__media,.message-video-shell.is-native.is-circle video.custom-media-player__media{border-radius:50%!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;}

/* 2026-04-25 fix6: tablet/mobile header, privacy pages and call modal restore */
.incoming-call-modal:not([hidden]){display:grid!important;place-items:center!important;position:fixed!important;inset:0!important;z-index:220!important;padding:18px!important;}
.incoming-call-modal .auth-modal__backdrop{position:absolute!important;inset:0!important;background:rgba(2,7,18,.78)!important;}
.incoming-call-modal__dialog{position:relative!important;z-index:1!important;width:min(430px,calc(100vw - 28px))!important;text-align:center!important;display:grid!important;gap:14px!important;justify-items:center!important;}
.incoming-call-modal__avatar img{width:86px!important;height:86px!important;border-radius:26px!important;object-fit:cover!important;border:1px solid var(--line-strong)!important;}
.incoming-call-modal__actions{display:flex!important;gap:12px!important;justify-content:center!important;flex-wrap:wrap!important;width:100%!important;}
.incoming-call-modal__actions .site-btn{min-width:138px!important;}

@media (min-width:761px) and (max-width:1180px){
  .site-header{overflow:visible!important;}
  .header-inner{grid-template-columns:auto 1fr auto!important;align-items:center!important;overflow:visible!important;}
  .menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;}
  .site-nav{display:none!important;position:fixed!important;left:24px!important;right:24px!important;top:calc(env(safe-area-inset-top) + 116px)!important;width:auto!important;max-height:min(58vh,520px)!important;overflow:auto!important;padding:18px!important;border-radius:26px!important;border:1px solid var(--line)!important;background:rgba(6,12,24,.97)!important;box-shadow:var(--shadow)!important;z-index:140!important;}
  .site-nav.is-open,body.menu-open .site-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;visibility:visible!important;pointer-events:auto!important;}
  .site-nav a{padding:12px 14px!important;border-radius:16px!important;background:rgba(255,255,255,.025)!important;}
}
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .site-nav.is-open,body.menu-open .site-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (min-width:1181px){
  .site-nav{display:flex!important;position:static!important;visibility:visible!important;pointer-events:auto!important;}
  .menu-toggle{display:none!important;}
}

@media (max-width:760px){
  body.utility-page .site-header{padding:18px 0 10px!important;overflow:visible!important;}
  body.utility-page .container.header-inner{width:min(calc(100vw - 20px),100%)!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;justify-items:stretch!important;gap:10px!important;padding:14px!important;border-radius:28px!important;}
  body.utility-page .brand{min-width:0!important;max-width:100%!important;gap:12px!important;justify-content:flex-start!important;overflow:hidden!important;}
  body.utility-page .brand img{width:64px!important;height:64px!important;min-width:64px!important;border-radius:20px!important;}
  body.utility-page .brand-copy{display:grid!important;min-width:0!important;gap:2px!important;}
  body.utility-page .brand-copy strong{font-size:clamp(24px,7.5vw,38px)!important;line-height:.96!important;letter-spacing:.16em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;}
  body.utility-page .brand-copy small{font-size:clamp(14px,4vw,18px)!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  body.utility-page .header-actions{width:auto!important;justify-self:end!important;display:flex!important;gap:8px!important;}
  body.utility-page .language-switcher{display:flex!important;gap:8px!important;}
  body.utility-page .lang-pill{width:58px!important;height:58px!important;min-width:58px!important;padding:0!important;border-radius:22px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;font-weight:800!important;}
  body.utility-page .utility-main{width:min(calc(100vw - 28px),100%)!important;padding:34px 0 96px!important;overflow:hidden!important;}
  body.utility-page .utility-card{padding:22px 16px!important;border-radius:28px!important;overflow:hidden!important;}
  body.utility-page .utility-card h1{font-size:clamp(42px,12vw,58px)!important;line-height:.98!important;overflow-wrap:anywhere!important;hyphens:auto!important;}
  body.utility-page .utility-card p,body.utility-page .legal-list li{font-size:clamp(18px,5.2vw,26px)!important;line-height:1.55!important;}
}
@media (max-width:430px){
  body.utility-page .container.header-inner{grid-template-columns:minmax(0,1fr) auto!important;padding:12px!important;}
  body.utility-page .brand img{width:56px!important;height:56px!important;min-width:56px!important;}
  body.utility-page .brand-copy strong{font-size:clamp(22px,7vw,30px)!important;letter-spacing:.13em!important;}
  body.utility-page .lang-pill{width:50px!important;height:50px!important;min-width:50px!important;border-radius:18px!important;font-size:14px!important;}
}

/* 2026-04-26: remove logo outline/border on desktop, tablet and mobile */
.brand img,
.site-header .brand img,
body.utility-page .brand img,
.header-inner .brand img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.brand:focus, .brand:focus-visible, .brand img:focus, .brand img:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}


/* 2026-04-26 upload/media/tablet final fixes */
.upload-progress{
  box-sizing:border-box!important;
  position:relative!important;
  z-index:5!important;
  max-width:100%!important;
  padding:8px 10px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:rgba(8,14,28,.92)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
}
.upload-progress__meta{align-items:center!important;min-width:0!important}
.upload-progress__name{min-width:0!important;max-width:100%!important}
.upload-progress__percent{flex:0 0 auto!important}
.upload-progress__bar{width:100%!important;min-width:0!important}
.profile-cover-avatar-form .upload-progress,
.profile-cover-upload-form .upload-progress,
.upload-progress--floating{
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  width:min(360px,calc(100vw - 36px))!important;
  pointer-events:none!important;
}
.profile-cover-avatar-edit .upload-progress,
.profile-cover-upload-trigger .upload-progress{display:none!important}
.upload-progress--compact{padding:7px 9px!important;border-radius:12px!important}
.upload-progress--compact .upload-progress__bar{height:5px!important}
.feed-upload-field .upload-progress,
.feed-edit-upload-field .upload-progress,
.compose-box .upload-progress{margin-top:10px!important;grid-column:1/-1!important}

@media (min-width:768px) and (max-width:1180px) and (orientation:landscape){
  .promo-player-bar{
    left:50%!important;
    right:auto!important;
    bottom:12px!important;
    transform:translateX(-50%)!important;
    width:min(620px,calc(100vw - 160px))!important;
    grid-template-columns:48px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:10px 12px!important;
    border-radius:20px!important;
  }
  .promo-player-cover{width:48px!important;height:48px!important;border-radius:14px!important}
  .promo-player-copy strong{font-size:.95rem!important}
  .promo-player-copy span{font-size:.78rem!important}
  .promo-player-progress{grid-column:1/-1!important;padding-top:0!important}
  .promo-player-controls{gap:6px!important}
  .promo-player-btn{width:38px!important;height:38px!important;min-width:38px!important}
  .menu-toggle{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }
  .menu-toggle span{
    position:absolute!important;
    left:50%!important;
    width:22px!important;
    height:2px!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    transform-origin:center!important;
  }
  .menu-toggle span:nth-child(1){top:calc(50% - 7px)!important}
  .menu-toggle span:nth-child(2){top:50%!important;transform:translate(-50%,-50%)!important}
  .menu-toggle span:nth-child(3){top:calc(50% + 7px)!important}
  .menu-toggle.is-open span:nth-child(1){top:50%!important;transform:translate(-50%,-50%) rotate(45deg)!important}
  .menu-toggle.is-open span:nth-child(2){top:50%!important;transform:translate(-50%,-50%)!important;opacity:0!important}
  .menu-toggle.is-open span:nth-child(3){top:50%!important;transform:translate(-50%,-50%) rotate(-45deg)!important}
  .header-notice-dropdown{
    position:fixed!important;
    top:calc(var(--header-height, 86px) + 18px)!important;
    right:18px!important;
    left:auto!important;
    width:min(420px,calc(100vw - 36px))!important;
    max-height:calc(100vh - var(--header-height, 86px) - 36px)!important;
    overflow:auto!important;
    z-index:999!important;
  }
}

/* 2026-04-26: restore incoming call accept/decline modal above every layout */
.incoming-call-modal:not([hidden]),
.incoming-call-modal.is-visible{
  display:grid!important;
  place-items:center!important;
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  padding:clamp(14px,2vw,24px)!important;
  pointer-events:auto!important;
  opacity:1!important;
  visibility:visible!important;
}
.incoming-call-modal .auth-modal__backdrop{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:rgba(2,7,18,.82)!important;
}
.incoming-call-modal__dialog{
  position:relative!important;
  z-index:1!important;
  width:min(430px,calc(100vw - 28px))!important;
  max-width:430px!important;
  margin:0 auto!important;
  text-align:center!important;
  display:grid!important;
  gap:14px!important;
  justify-items:center!important;
}
.incoming-call-modal__actions{
  display:flex!important;
  gap:12px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  width:100%!important;
}
.incoming-call-modal__actions .site-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:138px!important;
  visibility:visible!important;
  opacity:1!important;
}
@media (max-width:640px){
  .incoming-call-modal__actions .site-btn{width:100%!important;}
}

/* 2026-04-26: tablet landscape premium player compact centered */
@media (orientation:landscape) and (min-width:768px) and (max-width:1180px) and (max-height:900px){
  .header-player-panel:not([hidden]){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:12px!important;
    overflow:auto!important;
  }
  .header-player-panel .header-player-dialog{
    width:min(760px,calc(100vw - 32px))!important;
    max-height:calc(100dvh - 32px)!important;
    margin:0 auto!important;
    overflow:auto!important;
  }
  .header-player-panel .header-player-shell{
    grid-template-columns:minmax(0,1fr) minmax(220px,300px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 40px)!important;
    border-radius:24px!important;
  }
  .header-player-panel .header-player-stage,
  .header-player-panel .header-player-playlist{
    padding:16px!important;
  }
  .header-player-panel .header-player-now{
    grid-template-columns:70px minmax(0,1fr)!important;
    grid-template-areas:'cover copy' 'controls controls' 'progress progress'!important;
    gap:12px!important;
    padding:14px!important;
    border-radius:20px!important;
  }
  .header-player-panel .header-player-cover{width:70px!important;height:70px!important;border-radius:18px!important;}
  .header-player-panel .header-player-now-copy strong{font-size:1.15rem!important;}
  .header-player-panel .header-player-control{width:38px!important;height:38px!important;min-width:38px!important;}
  .header-player-panel .header-player-control.is-play{width:46px!important;height:46px!important;min-width:46px!important;}
  .header-player-panel .header-player-track{grid-template-columns:48px minmax(0,1fr) auto!important;padding:10px!important;border-radius:16px!important;gap:10px!important;}
  .header-player-panel .header-player-track img{width:48px!important;height:48px!important;border-radius:14px!important;}
  .header-player-panel .header-player-playlist{max-height:calc(100dvh - 72px)!important;overflow:auto!important;}
}

/* 2026-04-27 mobile player/header + compact video controls fix */
@media (max-width:860px){body:has(.header-player-panel:not([hidden])) .site-header,body:has(.header-player-panel:not([hidden])) .mobile-bottom-nav{visibility:visible;opacity:1;pointer-events:auto}body:has(.header-player-panel:not([hidden])) .profile-player-fab{visibility:hidden;pointer-events:none}.header-player-panel:not([hidden]){display:flex;align-items:flex-start;justify-content:center;padding:calc(92px + env(safe-area-inset-top)) 10px calc(96px + env(safe-area-inset-bottom));overflow:auto;z-index:78;background:rgba(5,8,17,.86)}.header-player-panel .header-player-dialog{margin:0 auto;width:min(calc(100vw - 18px),560px);max-height:none}.header-player-panel .header-player-shell{max-height:none}}
.header-player-control.is-play,.promo-player-btn.is-play{overflow:hidden;position:relative;gap:0}.header-player-control.is-play .play-eq,.promo-player-btn.is-play .play-eq{position:absolute;right:7px;bottom:8px;margin:0;gap:2px;max-width:18px;overflow:hidden;transform:scale(.78);transform-origin:center}.header-player-control.is-play .icon-pause,.promo-player-btn.is-play .icon-pause{font-size:.9em;line-height:1}
.custom-media-player.is-video .custom-media-player__controls .site-chip-btn[data-media-toggle]{width:44px!important;height:44px!important;min-width:44px!important;border-radius:999px!important;font-size:0!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}.custom-media-player.is-video .custom-media-player__controls .site-chip-btn[data-media-toggle]::before{content:'▶';font-size:18px!important;line-height:1!important;transform:translateX(1px)}.custom-media-player.is-video.is-playing .custom-media-player__controls .site-chip-btn[data-media-toggle]::before{content:'Ⅱ';font-size:20px!important;font-weight:900!important;transform:none}@media(max-width:700px){.custom-media-player.is-video.is-compact .custom-media-player__controls{gap:10px;align-items:center}.custom-media-player.is-video.is-compact .custom-media-player__timeline{min-width:0}.message-bubble .custom-media-player.is-video.is-compact{max-width:100%}}
@media(max-width:640px){body.utility-page .site-header .brand{display:flex;gap:12px;min-width:0;overflow:visible}body.utility-page .site-header .brand img{display:block;width:64px;height:64px;min-width:64px;flex:0 0 64px;object-fit:cover;border-radius:20px}body.utility-page .site-header .brand-copy{display:grid;min-width:0;overflow:visible}}@media(max-width:390px){body.utility-page .site-header .brand img{width:58px;height:58px;min-width:58px}}

/* FINAL FIX: unified compact play/pause/equalizer buttons across desktop, tablet and mobile */
.header-player-btn,
.header-icon-btn.header-player-btn,
.header-player-control.is-play,
.promo-player-btn.is-play,
.player-button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  overflow:hidden!important;
  gap:0!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
.header-player-btn *,
.header-player-control.is-play *,
.promo-player-btn.is-play *,
.player-button *{box-sizing:border-box!important;}
.header-player-control.is-play .icon-play,
.promo-player-btn.is-play .icon-play{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(1px)!important;
  font-size:18px!important;
  line-height:1!important;
}
.header-player-control.is-play.is-playing .icon-play,
.promo-player-btn.is-play.is-playing .icon-play{display:none!important;}
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-pause{display:none!important;}
.header-player-control.is-play.is-playing .icon-pause,
.promo-player-btn.is-play.is-playing .icon-pause{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  font-size:18px!important;
  line-height:1!important;
  letter-spacing:-2px!important;
}
.header-player-control.is-play .play-eq,
.promo-player-btn.is-play .play-eq{
  display:none!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:8px!important;
  width:18px!important;
  height:9px!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:2px!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.header-player-control.is-play.is-playing .play-eq,
.promo-player-btn.is-play.is-playing .play-eq{display:inline-flex!important;}
.header-player-control.is-play .play-eq i,
.promo-player-btn.is-play .play-eq i,
.header-player-mini-eq i{
  display:block!important;
  width:3px!important;
  min-width:3px!important;
  max-width:3px!important;
  height:5px!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform-origin:bottom center!important;
  animation:leskovPlayerEq .9s ease-in-out infinite!important;
}
.header-player-control.is-play .play-eq i:nth-child(2),
.promo-player-btn.is-play .play-eq i:nth-child(2),
.header-player-mini-eq i:nth-child(2){animation-delay:.14s!important;}
.header-player-control.is-play .play-eq i:nth-child(3),
.promo-player-btn.is-play .play-eq i:nth-child(3),
.header-player-mini-eq i:nth-child(3){animation-delay:.28s!important;}
@keyframes leskovPlayerEq{0%,100%{height:4px;opacity:.72}50%{height:9px;opacity:1}}
.header-player-btn .header-player-icon{display:block!important;width:20px!important;height:20px!important;margin:0!important;transform:none!important;animation:none!important;}
.header-player-btn .header-player-mini-eq{
  display:none!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:22px!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:3px!important;
  overflow:hidden!important;
}
.header-player-btn.is-playing .header-player-icon{display:none!important;}
.header-player-btn.is-playing .header-player-mini-eq{display:inline-flex!important;}
.header-player-btn.is-playing,
.header-icon-btn.is-playing{box-shadow:0 0 0 4px rgba(122,230,210,.10)!important;}
.header-player-btn.is-playing svg,
.header-icon-btn.is-playing svg{animation:none!important;}
.player-button.is-playing{
  font-size:0!important;
  color:#07111f!important;
}
.player-button.is-playing::before{
  content:'Ⅱ';
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:18px!important;
  font-weight:900!important;
  letter-spacing:-2px!important;
  line-height:1!important;
}
.player-button.is-playing::after{
  content:'';
  position:absolute!important;
  left:50%!important;
  bottom:8px!important;
  width:18px!important;
  height:9px!important;
  transform:translateX(-50%)!important;
  background:linear-gradient(currentColor,currentColor) left bottom/3px 5px no-repeat,linear-gradient(currentColor,currentColor) center bottom/3px 9px no-repeat,linear-gradient(currentColor,currentColor) right bottom/3px 6px no-repeat;
  opacity:.9;
  animation:leskovPlayerEqFade .9s ease-in-out infinite!important;
  border-radius:999px;
}
@keyframes leskovPlayerEqFade{0%,100%{opacity:.55}50%{opacity:1}}
@media (max-width:760px){
  .header-player-control.is-play,.promo-player-btn.is-play{width:56px!important;height:56px!important;min-width:56px!important;}
  .header-player-control.is-play .play-eq,.promo-player-btn.is-play .play-eq,.player-button.is-playing::after{bottom:9px!important;}
  .header-player-control.is-play.is-playing .icon-pause,.promo-player-btn.is-play.is-playing .icon-pause{font-size:20px!important;}
}
@media (min-width:761px) and (max-width:1180px){
  .header-player-control.is-play,.promo-player-btn.is-play{width:50px!important;height:50px!important;min-width:50px!important;}
  .header-player-control.is-play .play-eq,.promo-player-btn.is-play .play-eq{bottom:8px!important;}
}

/* 2026-04-27 FINAL PREMIUM DESIGN: unified music player buttons */
.header-player-btn,
.header-icon-btn.header-player-btn,
.header-player-control,
.promo-player-btn,
.player-button{
  --leskov-btn-size:52px;
  position:relative!important;
  isolation:isolate!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:var(--leskov-btn-size)!important;
  height:var(--leskov-btn-size)!important;
  min-width:var(--leskov-btn-size)!important;
  min-height:var(--leskov-btn-size)!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid rgba(135,160,205,.28)!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg, rgba(28,37,61,.96), rgba(11,16,30,.96))!important;
  color:#eef5ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
  line-height:1!important;
  text-align:center!important;
  cursor:pointer!important;
  transform:translateZ(0)!important;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease!important;
}
.header-player-btn:hover,
.header-player-control:hover,
.promo-player-btn:hover,
.player-button:hover{
  transform:translateY(-1px) translateZ(0)!important;
  border-color:rgba(126,241,217,.54)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 32px rgba(0,0,0,.34), 0 0 0 4px rgba(126,241,217,.08)!important;
}
@media (hover: none) and (pointer: coarse){
  .player-button:active,
  .player-button:focus-visible,
  .header-player-btn:active,
  .header-player-control:active,
  .promo-player-btn:active{
    transform:translateY(-1px) translateZ(0)!important;
    border-color:rgba(126,241,217,.54)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 32px rgba(0,0,0,.34), 0 0 0 4px rgba(126,241,217,.08)!important;
  }
}
.header-player-control.is-play,
.promo-player-btn.is-play,
.player-button{
  --leskov-btn-size:58px;
  border:none!important;
  color:#061120!important;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(135deg, #77a9ff 0%, #7cf1d4 100%)!important;
  box-shadow:0 12px 30px rgba(91,166,255,.24), 0 0 0 1px rgba(126,241,217,.25), inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.header-player-control.is-play::before,
.promo-player-btn.is-play::before,
.player-button::before{
  content:'';
  position:absolute!important;
  inset:5px!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%)!important;
  opacity:.85!important;
  z-index:-1!important;
  pointer-events:none!important;
}
.header-player-control.is-play.is-playing,
.promo-player-btn.is-play.is-playing,
.player-button.is-playing,
.header-player-btn.is-playing{
  border-color:rgba(126,241,217,.58)!important;
  box-shadow:0 0 0 5px rgba(126,241,217,.10), 0 16px 36px rgba(91,166,255,.26), inset 0 1px 0 rgba(255,255,255,.35)!important;
  animation:leskovBtnBreath 1.8s ease-in-out infinite!important;
}
@keyframes leskovBtnBreath{0%,100%{filter:saturate(1);transform:translateZ(0) scale(1)}50%{filter:saturate(1.12);transform:translateZ(0) scale(1.025)}}
.header-player-control.is-play .icon-play,
.promo-player-btn.is-play .icon-play{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  transform:translateX(2px)!important;
  font-size:20px!important;
  line-height:1!important;
  text-shadow:none!important;
}
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-pause{
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0 0 7px 0!important;
  font-size:0!important;
  line-height:1!important;
}
.header-player-control.is-play.is-playing .icon-play,
.promo-player-btn.is-play.is-playing .icon-play{display:none!important;}
.header-player-control.is-play.is-playing .icon-pause,
.promo-player-btn.is-play.is-playing .icon-pause{display:inline-flex!important;}
.header-player-control.is-play.is-playing .icon-pause::before,
.promo-player-btn.is-play.is-playing .icon-pause::before{
  content:'';
  width:16px!important;
  height:20px!important;
  background:linear-gradient(currentColor,currentColor) left center/5px 18px no-repeat,linear-gradient(currentColor,currentColor) right center/5px 18px no-repeat!important;
  border-radius:3px!important;
}
.header-player-control.is-play .play-eq,
.promo-player-btn.is-play .play-eq{
  display:none!important;
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  width:22px!important;
  height:11px!important;
  transform:translateX(-50%)!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:3px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.header-player-control.is-play.is-playing .play-eq,
.promo-player-btn.is-play.is-playing .play-eq{display:inline-flex!important;}
.header-player-control.is-play .play-eq i,
.promo-player-btn.is-play .play-eq i,
.header-player-mini-eq i{
  display:block!important;
  width:4px!important;
  min-width:4px!important;
  height:5px!important;
  border-radius:999px!important;
  background:currentColor!important;
  opacity:.92!important;
  transform-origin:bottom center!important;
  animation:leskovEqWave .82s ease-in-out infinite!important;
}
.header-player-control.is-play .play-eq i:nth-child(2),
.promo-player-btn.is-play .play-eq i:nth-child(2),
.header-player-mini-eq i:nth-child(2){animation-delay:.13s!important;}
.header-player-control.is-play .play-eq i:nth-child(3),
.promo-player-btn.is-play .play-eq i:nth-child(3),
.header-player-mini-eq i:nth-child(3){animation-delay:.26s!important;}
@keyframes leskovEqWave{0%,100%{height:4px;opacity:.62}35%{height:11px;opacity:1}70%{height:7px;opacity:.86}}
.player-button{font-size:0!important;}
.player-button::after{
  content:'▶';
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  transform:translateX(2px)!important;
  font-size:20px!important;
  font-weight:900!important;
  line-height:1!important;
  color:currentColor!important;
  background:none!important;
  position:static!important;
  opacity:1!important;
  animation:none!important;
}
.player-button.is-playing::before{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:43%!important;
  width:16px!important;
  height:19px!important;
  transform:translate(-50%,-50%)!important;
  background:linear-gradient(currentColor,currentColor) left center/5px 18px no-repeat,linear-gradient(currentColor,currentColor) right center/5px 18px no-repeat!important;
  border-radius:3px!important;
  z-index:1!important;
}
.player-button.is-playing::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  width:22px!important;
  height:11px!important;
  transform:translateX(-50%)!important;
  background:
    linear-gradient(currentColor,currentColor) 0 100%/4px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 9px 100%/4px 11px no-repeat,
    linear-gradient(currentColor,currentColor) 18px 100%/4px 7px no-repeat!important;
  border-radius:999px!important;
  opacity:.92!important;
  animation:leskovEqGlow .82s ease-in-out infinite!important;
  z-index:1!important;
}
@keyframes leskovEqGlow{0%,100%{opacity:.58;filter:drop-shadow(0 0 0 rgba(6,17,32,0))}50%{opacity:1;filter:drop-shadow(0 0 5px rgba(6,17,32,.35))}}
.header-player-btn .header-player-icon{
  display:block!important;
  width:21px!important;
  height:21px!important;
  margin:0!important;
  transform:translateX(1px)!important;
  animation:none!important;
}
.header-player-btn .header-player-mini-eq{
  display:none!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:25px!important;
  height:22px!important;
  transform:translate(-50%,-50%)!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:4px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
.header-player-btn.is-playing .header-player-icon{display:none!important;}
.header-player-btn.is-playing .header-player-mini-eq{display:inline-flex!important;}
.header-player-btn.is-playing .header-player-mini-eq i{height:9px!important;box-shadow:0 0 8px rgba(126,241,217,.42)!important;}
@media (max-width:760px){
  .header-player-btn,.header-icon-btn.header-player-btn{--leskov-btn-size:84px!important;}
  .header-player-control.is-play,.promo-player-btn.is-play,.player-button{--leskov-btn-size:64px!important;}
  .header-player-control:not(.is-play),.promo-player-btn:not(.is-play){--leskov-btn-size:54px!important;}
  .header-player-control.is-play .play-eq,.promo-player-btn.is-play .play-eq,.player-button.is-playing::after{bottom:11px!important;}
}
@media (min-width:761px) and (max-width:1180px){
  .header-player-control.is-play,.promo-player-btn.is-play,.player-button{--leskov-btn-size:54px!important;}
  .header-player-control:not(.is-play),.promo-player-btn:not(.is-play){--leskov-btn-size:44px!important;}
}
@media (prefers-reduced-motion:reduce){
  .header-player-control.is-play.is-playing,
  .promo-player-btn.is-play.is-playing,
  .player-button.is-playing,
  .header-player-btn.is-playing,
  .header-player-control.is-play .play-eq i,
  .promo-player-btn.is-play .play-eq i,
  .header-player-mini-eq i,
  .player-button.is-playing::after{animation:none!important;}
}

/* ===== FINAL FIX 2026-04-27: stable unified player animation ===== */
.header-player-control.is-play,
.promo-player-btn.is-play,
.player-button,
.header-player-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:0;line-height:1;}
.header-player-control.is-play .icon-play,.header-player-control.is-play .icon-pause,.promo-player-btn.is-play .icon-play,.promo-player-btn.is-play .icon-pause,.header-player-btn .header-player-icon,.header-player-control.is-play::before,.header-player-control.is-play::after,.promo-player-btn.is-play::before,.promo-player-btn.is-play::after,.player-button::before,.player-button::after{display:none;content:none;opacity:0;}
.header-player-control.is-play .play-eq,.promo-player-btn.is-play .play-eq,.header-player-btn .header-player-mini-eq,.player-button .player-activity{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:28px;height:24px;margin:0;padding:0;display:inline-flex;align-items:flex-end;justify-content:center;gap:4px;overflow:visible;pointer-events:none;}
.header-player-control.is-play .play-eq i,.promo-player-btn.is-play .play-eq i,.header-player-btn .header-player-mini-eq i,.player-button .player-activity i{display:block;flex:0 0 4px;width:4px;min-width:4px;border-radius:999px;background:currentColor;opacity:.86;transform-origin:bottom center;animation:none;box-shadow:0 0 10px rgba(124,241,211,.22);}
.header-player-control.is-play .play-eq i:nth-child(1),.promo-player-btn.is-play .play-eq i:nth-child(1),.header-player-btn .header-player-mini-eq i:nth-child(1),.player-button .player-activity i:nth-child(1){height:9px;transform:scaleY(.72);}
.header-player-control.is-play .play-eq i:nth-child(2),.promo-player-btn.is-play .play-eq i:nth-child(2),.header-player-btn .header-player-mini-eq i:nth-child(2),.player-button .player-activity i:nth-child(2){height:16px;transform:scaleY(.72);}
.header-player-control.is-play .play-eq i:nth-child(3),.promo-player-btn.is-play .play-eq i:nth-child(3),.header-player-btn .header-player-mini-eq i:nth-child(3),.player-button .player-activity i:nth-child(3){height:12px;transform:scaleY(.72);}
.header-player-control.is-play.is-playing .play-eq i,.promo-player-btn.is-play.is-playing .play-eq i,.header-player-btn.is-playing .header-player-mini-eq i,.player-button.is-playing .player-activity i{animation:leskovPlayerBarsStable .74s ease-in-out infinite;}
.header-player-control.is-play.is-playing .play-eq i:nth-child(2),.promo-player-btn.is-play.is-playing .play-eq i:nth-child(2),.header-player-btn.is-playing .header-player-mini-eq i:nth-child(2),.player-button.is-playing .player-activity i:nth-child(2){animation-delay:.12s;}
.header-player-control.is-play.is-playing .play-eq i:nth-child(3),.promo-player-btn.is-play.is-playing .play-eq i:nth-child(3),.header-player-btn.is-playing .header-player-mini-eq i:nth-child(3),.player-button.is-playing .player-activity i:nth-child(3){animation-delay:.24s;}
.header-player-control.is-play.is-playing,.promo-player-btn.is-play.is-playing,.player-button.is-playing,.header-player-btn.is-playing{border-color:rgba(124,241,211,.54);box-shadow:0 0 0 5px rgba(124,241,211,.12),0 18px 34px rgba(0,0,0,.26);}
@keyframes leskovPlayerBarsStable{0%,100%{transform:scaleY(.42);opacity:.68;}45%{transform:scaleY(1);opacity:1;}72%{transform:scaleY(.62);opacity:.9;}}
@media (prefers-reduced-motion:reduce){.header-player-control.is-play.is-playing .play-eq i,.promo-player-btn.is-play.is-playing .play-eq i,.header-player-btn.is-playing .header-player-mini-eq i,.player-button.is-playing .player-activity i{animation:none;}}
.language-pref-card span{display:grid!important;gap:10px;width:100%;min-width:0}.language-pref-card small{max-width:100%;white-space:normal}.language-pref-select{width:100%;max-width:420px;margin-top:6px}

/* 2026-04-28 mobile centered merch modal + premium player */
@media (max-width:860px){
  .merch-modal{display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));overflow:auto;}
  .merch-modal[hidden]{display:none!important}
  .merch-modal__card{width:min(92vw,420px);max-height:min(86svh,86vh);overflow:auto;margin:auto;padding:18px;border-radius:24px;}
  .merch-modal__card h2{font-size:clamp(2rem,9vw,3rem);line-height:.98;padding-right:46px;}
  .merch-modal .actions{display:grid;grid-template-columns:1fr;}
  .header-player-panel:not([hidden]){display:flex;align-items:center;justify-content:center;min-height:100svh;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));overflow:auto;z-index:120;background:rgba(5,8,17,.88);}
  .header-player-panel .header-player-dialog{width:min(92vw,420px);max-height:min(86svh,86vh);overflow:auto;margin:auto;}
  .header-player-panel .header-player-shell{max-height:none;overflow:visible;padding:18px;border-radius:24px;}
}

/* Final language preference layout repair */
.language-pref-card{display:block!important;padding:18px!important;overflow:visible!important;min-height:0!important}
.language-pref-card>span{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;max-width:520px!important;white-space:normal!important;overflow:visible!important;word-break:normal!important;overflow-wrap:normal!important}
.language-pref-card strong,.language-pref-card small{display:block!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;max-width:none!important}
.language-pref-card .language-pref-select{display:block!important;width:100%!important;max-width:260px!important;min-width:160px!important;height:52px!important;padding:0 16px!important;font-size:1rem!important}
@media(max-width:640px){.language-pref-card{padding:16px}.language-pref-card>span{max-width:100%}.language-pref-card .language-pref-select{max-width:100%}}
/* 2026-04-28 hard fix: preferred language card layout */
.language-pref-card{display:block!important;width:100%!important;min-height:auto!important;align-items:initial!important;grid-template-columns:1fr!important;padding:18px!important;overflow:visible!important;}
.language-pref-card::before,.language-pref-card::after{display:none!important;content:none!important;}
.language-pref-card .language-pref-content{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important;max-width:520px!important;min-width:0!important;white-space:normal!important;}
.language-pref-card .language-pref-content strong,.language-pref-card .language-pref-content small{display:block!important;width:auto!important;max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;line-height:1.35!important;}
.language-pref-card .language-pref-select{display:block!important;width:min(100%,280px)!important;max-width:280px!important;min-width:180px!important;height:52px!important;line-height:52px!important;padding:0 16px!important;font-size:1rem!important;}
@media(max-width:640px){.language-pref-card{padding:16px}.language-pref-card .language-pref-content{max-width:100%}.language-pref-card .language-pref-select{width:100%;max-width:100%;}}


/* 2026-04-30 tablet/phone orientation hardening */
html,body{max-width:100%;overflow-x:hidden;}
.site-header{overflow:visible!important;}
.header-inner,.header-actions,.header-notice-wrap{overflow:visible!important;}
.header-notice-dropdown{box-sizing:border-box;max-width:calc(100vw - 24px);}
@media (min-width: 700px) and (max-width: 1180px) and (orientation: landscape){
  .site-header{padding-top:max(12px,env(safe-area-inset-top))!important;}
  .header-notice-dropdown{top:calc(100% + 24px)!important;right:0!important;width:min(420px,calc(100vw - 48px))!important;max-height:calc(100vh - 132px)!important;overflow:auto!important;}
  .header-notice-list{max-height:calc(100vh - 260px)!important;}
}
@media (max-width: 699px), (max-height: 520px) and (orientation: landscape){
  .container,.auth-wrap,.install-shell,.profile-layout,.messenger-layout,.notifications-layout{width:calc(100vw - 16px)!important;max-width:100%!important;}
  .site-header{position:relative!important;padding-top:max(8px,env(safe-area-inset-top))!important;overflow:visible!important;}
  .header-inner{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;padding:12px!important;border-radius:22px!important;}
  .header-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:8px!important;min-width:0!important;}
  .header-notice-dropdown{position:fixed!important;left:8px!important;right:8px!important;top:calc(env(safe-area-inset-top) + 78px)!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 96px - env(safe-area-inset-top))!important;overflow:auto!important;z-index:2147482000!important;}
  .header-notice-list{max-height:calc(100vh - 230px)!important;}
  .section-head,.split-head{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;}
  .featured-grid,.shop-grid,.track-grid,.people-grid,.content-grid,.gallery-grid,.dashboard-grid,.media-library-grid{grid-template-columns:1fr!important;}
}
@media (orientation: landscape) and (max-height: 520px){
  .hero,.section{padding-top:22px!important;padding-bottom:22px!important;}
  .surface-card,.featured-card,.shop-card,.track-card,.content-card,.gallery-card{border-radius:20px!important;}
  .header-notice-dropdown{top:calc(env(safe-area-inset-top) + 64px)!important;max-height:calc(100vh - 78px - env(safe-area-inset-top))!important;}
}

/* 2026-05-23 production social upgrade */
input[type="file"].custom-file-native,.custom-file-native{display:none!important;position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important}
.custom-file-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;min-width:0}
.custom-file-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid rgba(122,165,255,.34);background:linear-gradient(135deg,rgba(122,165,255,.2),rgba(121,227,210,.12));color:var(--text);font-weight:800;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.18);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.custom-file-button:hover,.custom-file-button:focus-visible{transform:translateY(-1px);border-color:rgba(121,227,210,.55);outline:none;background:linear-gradient(135deg,rgba(122,165,255,.28),rgba(121,227,210,.18))}
.custom-file-name{display:block;min-width:0;max-width:100%;color:var(--muted);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-file-control.has-file .custom-file-name{color:#dce8ff}
.header-player-modes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.header-player-mode{min-height:38px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:var(--muted);font-weight:800;cursor:pointer}
.header-player-mode.is-active{color:#06111f;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:transparent;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.header-player-empty{border:1px dashed rgba(122,165,255,.24);background:rgba(122,165,255,.06)}
.status-badge.custom-user-badge{background:linear-gradient(135deg,color-mix(in srgb,var(--badge-color) 78%,#fff 12%),var(--badge-color));border-color:color-mix(in srgb,var(--badge-color) 62%,#fff 14%);box-shadow:0 0 0 3px color-mix(in srgb,var(--badge-color) 16%,transparent),0 12px 26px rgba(0,0,0,.24);overflow:hidden}
.status-badge.custom-user-badge img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.status-badge.custom-user-badge span{font-size:.78rem;font-weight:900;color:#06111f}
.badge-showcase{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.badge-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.badge-card .status-badge{flex:0 0 auto}
.badge-card strong{display:block}.badge-card small{display:block;color:var(--muted);line-height:1.4}
.stories-shell{display:grid;gap:14px}
.stories-bar{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.story-bubble{flex:0 0 auto;width:86px;display:grid;gap:8px;justify-items:center;border:0;background:transparent;color:var(--text);cursor:pointer;scroll-snap-align:start}
.story-ring{width:76px;height:76px;border-radius:999px;padding:3px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));box-shadow:0 16px 34px rgba(0,0,0,.22)}
.story-ring img,.story-ring video{width:100%;height:100%;border-radius:999px;object-fit:cover;border:3px solid rgba(6,11,22,.95);background:#050914}
.story-bubble span{width:100%;font-size:.78rem;font-weight:800;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-create-card{display:grid;gap:12px;padding:16px;border-radius:22px;border:1px solid rgba(122,165,255,.14);background:rgba(255,255,255,.035)}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.story-card{position:relative;display:grid;gap:10px;padding:10px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);box-shadow:0 8px 24px rgba(0,0,0,.15);overflow:hidden}
.story-card .custom-media-player,.story-card>img,.story-card>video{width:100%;border-radius:18px;overflow:hidden}
.story-card>img,.story-card>video{aspect-ratio:4/5;object-fit:cover;background:#050914}
.story-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:.85rem}
.story-viewer{position:fixed;inset:0;z-index:2147482500;display:grid;place-items:center;padding:20px;background:rgba(3,7,16,.86);backdrop-filter:blur(18px)}
.story-viewer[hidden]{display:none!important}
.story-viewer__dialog{position:relative;width:min(94vw,520px);max-height:92svh;display:grid;gap:12px;padding:16px;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(12,20,38,.96),rgba(5,10,20,.96));box-shadow:0 34px 80px rgba(0,0,0,.46)}
.story-viewer__stage{display:grid;place-items:center;min-height:min(72svh,720px);border-radius:22px;overflow:hidden;background:#02050c}
.story-viewer__stage img,.story-viewer__stage video{width:100%;max-height:min(72svh,720px);object-fit:contain;display:block}
.story-viewer__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-viewer__meta{font-weight:900}.story-viewer__caption{color:var(--muted);line-height:1.45}
.story-viewer__close,.story-viewer__nav{border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer}
.story-viewer__close{width:42px;height:42px;font-size:1.4rem}
.story-viewer__nav{position:absolute;top:50%;width:44px;height:44px;transform:translateY(-50%);font-size:1.8rem}
.story-viewer__nav.is-prev{left:-18px}.story-viewer__nav.is-next{right:-18px}
/* 2026-07-09: NEUTRALIZED a second overlay-era call block here (it set
   .call-video-grid{display:block} and re-declared a bare "#localCallVideo"
   absolute overlay). Authoritative self-view layout lives at the end of
   homepage.css. Story-viewer mobile rules below are preserved. */
#remoteCallVideo{object-fit:cover!important;background:#02050b!important}
@media(max-width:700px){.custom-file-control{display:grid;grid-template-columns:1fr}.custom-file-name{white-space:normal}.story-grid{grid-template-columns:1fr}.story-viewer{padding:10px}.story-viewer__dialog{width:min(96vw,440px);padding:12px;border-radius:22px}.story-viewer__nav{top:auto;bottom:18px;transform:none}.story-viewer__nav.is-prev{left:22px}.story-viewer__nav.is-next{right:22px}}
.profile-quick-nav a.is-active{background:linear-gradient(135deg,rgba(122,165,255,.24),rgba(121,227,210,.14));border-color:rgba(121,227,210,.34);color:var(--text)}
/* 2026-08-19 — блок «Семья и контакты» (#family) показывается на вкладке
   «Обзор» вместе с профилем, историями и лентой. */
body[data-profile-section="overview"] .profile-main>section:not(#overview):not(#stories):not(#feed):not(#family),
body[data-profile-section="edit"] .profile-main>section:not(#edit-profile),
body[data-profile-section="gallery"] .profile-main>section:not(#gallery),
body[data-profile-section="friends"] .profile-main>section:not(#friends):not(#blacklist):not(#friend-requests),
body[data-profile-section="music"] .profile-main>section:not(#music):not(#music-library),
body[data-profile-section="premium"] .profile-main>section:not(#premium),
body[data-profile-section="badges"] .profile-main>section:not(#badges),
/* 2026-08-19 — «Настройки» показывали ТОЛЬКО легаси-блок #preferences.
   Современная панель настроек (#settings) и блок управления аккаунтом
   (#account-management) не были в списке исключений НИ для одного
   раздела профиля, поэтому строка ниже прятала их всегда. Из-за этого
   «Опасная зона» — экспорт данных, деактивация и удаление аккаунта —
   была физически недоступна пользователю ни по одной ссылке. */
body[data-profile-section="settings"] .profile-main>section:not(#preferences):not(#settings):not(#account-management),
body[data-profile-section="privacy"] .profile-main>section:not(#preferences):not(#settings):not(#account-management),
body[data-profile-section="wallet"] .profile-main>section:not(#wallet),
body[data-profile-section="stories"] .profile-main>section:not(#stories),
/* 2026-08-20 — «Видео-кружки». Секция #video-circles не была указана
   в исключениях НИ для одного раздела профиля, поэтому строка ниже
   прятала её всегда: раздел существовал в разметке, но открыть его
   было нельзя. Теперь у него своя вкладка. */
body[data-profile-section="circles"] .profile-main>section:not(#video-circles),
body[data-profile-section="drafts"] .profile-main>section:not(#drafts),
body[data-profile-section="bookmarks"] .profile-main>section:not(#bookmarks),
body[data-profile-section="verification"] .profile-main>section:not(#verification){display:none!important}
body[data-profile-section="gallery"] #gallery,
body[data-profile-section="circles"] #video-circles,
body[data-profile-section="wallet"] #wallet{display:grid!important}
/* 2026-08-19 — раздел «Настройки» показывал ДВА набора одних и тех же
   полей: старый блок #preferences и современную панель #settings.
   Сверка полей: современная панель покрывает все 26 полей старой формы
   (включая preferred_lang / email_lang / смену почты и пароля), поэтому
   старый блок скрывается, когда новая панель на странице есть. Разметка
   #preferences намеренно оставлена в DOM: якорь profile.php#preferences
   из старых писем и закладок продолжает работать. */
.profile-main:has(> section#settings) > section#preferences{display:none!important}

/* Final hardening: site-styled native file picker button fallback */
input[type="file"]::file-selector-button{margin-right:12px;border:0;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#041022;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(122,165,255,.24);transition:transform .18s ease,filter .18s ease}
input[type="file"]::file-selector-button:hover{transform:translateY(-1px);filter:brightness(1.05)}
input[type="file"]::-webkit-file-upload-button{margin-right:12px;border:0;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#041022;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(122,165,255,.24)}


/* 2026-05-23 final media, stories, gallery, and comment fixes */
.profile-gallery-grid .gallery-tile{cursor:pointer}
.profile-gallery-grid .gallery-tile .custom-media-player.is-video.is-compact{cursor:pointer}
.profile-gallery-grid .gallery-tile .custom-media-player.is-video.is-compact .custom-media-player__media{width:100%;height:260px;max-height:260px;object-fit:cover;background:#030711}
.profile-gallery-grid .gallery-tile .custom-media-player.is-video.is-compact .custom-media-player__controls{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding-top:8px!important}
.profile-gallery-grid .gallery-tile .custom-media-player.is-video.is-compact .custom-media-player__timeline{display:none!important}
.story-card{overflow:hidden}
.story-card .custom-media-player{padding:10px;border-radius:22px}
.story-card .custom-media-player.is-video.is-compact .custom-media-player__media,.story-card>video{width:100%;aspect-ratio:9/16;max-height:360px;object-fit:cover;border-radius:18px;background:#030711}
.story-card .custom-media-player.is-video.is-compact .custom-media-player__overlay,.story-card .custom-media-player.is-video.is-compact .custom-media-player__timeline{display:none!important}
.story-card .custom-media-player.is-video.is-compact .custom-media-player__controls{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding-top:8px!important}
.story-card .custom-media-player.is-video.is-compact .custom-media-player__actions{margin-left:auto!important;display:flex!important;gap:6px!important}
.story-card .custom-media-player .site-chip-btn{min-width:40px!important;min-height:40px!important;padding:0 10px!important}
.gallery-modal{z-index:2147482400}
.gallery-modal__dialog{width:min(1120px,calc(100vw - 160px));grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;margin:3vh auto;min-height:min(88vh,920px)}
.gallery-modal__stage{min-height:min(80vh,820px);max-height:min(82vh,860px)}
.gallery-modal__stage img,.gallery-modal__stage video,.gallery-modal__stage .custom-media-player{max-width:100%;max-height:min(82vh,860px)}
.gallery-modal__stage .custom-media-player{width:min(100%,980px)}
.gallery-modal__stage .custom-media-player__media{max-height:min(72vh,760px);object-fit:contain}
.gallery-modal__close{top:-18px;right:-18px;width:54px;height:54px;z-index:8;background:rgba(9,17,33,.94)}
.gallery-modal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:58px;height:58px}
.gallery-modal__nav.is-prev{left:-78px}
.gallery-modal__nav.is-next{right:-78px}
.gallery-modal__caption{grid-column:1}
.story-viewer__nav{width:54px;height:54px;background:rgba(9,17,33,.9);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.32)}
.story-viewer__nav.is-prev{left:-86px}
.story-viewer__nav.is-next{right:-86px}
.comment-row__body{min-width:0;display:grid;gap:6px}
.comment-row__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.comment-reply-btn{appearance:none;border:0;background:transparent;color:var(--accent);font-weight:800;cursor:pointer;width:max-content;padding:0;margin-top:2px}
.comment-reply-btn.is-active,.comment-reply-btn:hover{color:var(--accent-2)}
.comment-replies{display:grid;gap:10px;margin-top:10px;padding-left:18px;border-left:1px solid rgba(122,165,255,.22)}
.comment-row--level-1,.comment-row--level-2{padding-top:8px}
.comment-reply-form{margin-top:8px;grid-template-columns:minmax(0,1fr) auto}
@media(max-width:860px){.gallery-modal__dialog{width:calc(100vw - 24px);min-height:auto;margin:5vh auto}.gallery-modal__nav{top:auto;bottom:18px;transform:none;width:48px;height:48px}.gallery-modal__nav.is-prev{left:18px}.gallery-modal__nav.is-next{right:18px}.gallery-modal__close{top:10px;right:10px}.gallery-modal__stage{min-height:55vh;max-height:72vh}.story-viewer__nav.is-prev{left:18px}.story-viewer__nav.is-next{right:18px}.comment-reply-form{grid-template-columns:1fr}}
@media(min-width:701px){.story-viewer__dialog{width:min(88vw,620px)}}

/* 2026-05-23 final UX fixes */
.admin-flash{position:relative;transition:opacity .32s ease, transform .32s ease, max-height .38s ease, margin .32s ease, padding .32s ease;cursor:pointer}
.admin-flash.is-dismissing{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;overflow:hidden!important;border-width:0!important}
.post-translate-row{display:flex;align-items:center;gap:10px;margin:10px 0 6px;flex-wrap:wrap}.post-translate-btn{font-weight:900}.post-translation-box{margin:10px 0 4px;padding:14px 16px;border-radius:18px;border:1px solid rgba(121,227,210,.22);background:rgba(121,227,210,.075);box-shadow:0 16px 34px rgba(0,0,0,.16)}.post-translation-box strong{display:block;margin-bottom:6px;color:#9ff4e9}.post-translation-box p{margin:0;line-height:1.55}.post-translation-box.is-error{border-color:rgba(223,111,134,.36);background:rgba(223,111,134,.10);color:#ffd7df}
.comment-reply-form.is-open{display:grid!important}.comment-replies{display:grid;gap:10px;margin-top:10px}.comment-row--level-1,.comment-row--level-2{margin-left:24px;border-left:2px solid rgba(121,227,210,.18);padding-left:12px}.comment-reply-btn{min-height:34px;padding:6px 10px!important;border-radius:999px!important;background:rgba(122,165,255,.10)!important;border:1px solid rgba(122,165,255,.18)!important;text-decoration:none!important}.comment-reply-btn.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-2,#79e3d2))!important;color:#07111f!important}
.header-player-modes{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;flex-wrap:wrap!important;width:100%;margin:8px 0 2px}.header-player-mode{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:42px!important;padding:9px 14px!important;border-radius:999px!important;line-height:1!important;white-space:nowrap}.header-player-mode::before{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.10);font-size:14px}.header-player-mode[data-header-mode="repeat"]::before{content:'↻'}.header-player-mode[data-header-mode="shuffle"]::before{content:'⇄'}.header-player-mode[data-header-mode="sequential"]::before{content:'☰'}.header-player-mode.is-active::before{background:rgba(7,17,31,.18)}.header-player-control.is-play .play-eq,.player-button .player-activity{animation:leskovEqPulse 1s ease-in-out infinite}.header-player-control.is-play:not(.is-playing) .play-eq{opacity:.36;animation:leskovEqIdle 1.4s ease-in-out infinite}.header-player-control.is-play.is-playing .play-eq i,.player-button.is-playing .player-activity i{animation:leskovEqBars .75s ease-in-out infinite;transform-origin:bottom}.header-player-control.is-play.is-playing .play-eq i:nth-child(2),.player-button.is-playing .player-activity i:nth-child(2){animation-delay:.12s}.header-player-control.is-play.is-playing .play-eq i:nth-child(3),.player-button.is-playing .player-activity i:nth-child(3){animation-delay:.24s}@keyframes leskovEqBars{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.18)}}@keyframes leskovEqIdle{0%,100%{transform:scale(.98);opacity:.32}50%{transform:scale(1.05);opacity:.72}}@keyframes leskovEqPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(121,227,210,0))}50%{filter:drop-shadow(0 0 12px rgba(121,227,210,.45))}}
.story-ring video{display:block}.story-ring video.has-frame{background:#050914}.story-viewer__dialog{isolation:isolate}.story-viewer__nav{z-index:3}.story-viewer__nav.is-prev{left:-120px}.story-viewer__nav.is-next{right:-120px}.story-viewer__stage video{background:#02050c;border-radius:20px}.story-card .custom-media-player__media{object-fit:cover}.story-card .custom-media-player.is-video .custom-media-player__media{background:#030711}.gallery-modal__close{top:-18px;right:-18px;z-index:4;box-shadow:0 16px 38px rgba(0,0,0,.35)}.gallery-modal__nav{z-index:4}.gallery-modal__nav.is-prev{left:-76px}.gallery-modal__nav.is-next{right:-76px}
@media(max-width:860px){.story-viewer__nav.is-prev{left:14px}.story-viewer__nav.is-next{right:14px}.gallery-modal__nav.is-prev{left:14px}.gallery-modal__nav.is-next{right:14px}.header-player-modes{justify-content:center}.header-player-mode{flex:1 1 auto;min-width:110px}}

/* 2026-05-23 final hotfix: stable player buttons, ET file controls */
html[lang="et"] .custom-file-button::before{content:''}
html[lang="et"] input[type="file"].custom-file-native + .custom-file-control .custom-file-button{font-size:0!important}
html[lang="et"] input[type="file"].custom-file-native + .custom-file-control .custom-file-button::after{content:'Vali fail';font-size:1rem!important}
html[lang="et"] input[type="file"].custom-file-native[multiple] + .custom-file-control .custom-file-button::after{content:'Vali failid'}
html[lang="et"] input[type="file"].custom-file-native + .custom-file-control .custom-file-name{font-size:0!important}
html[lang="et"] input[type="file"].custom-file-native + .custom-file-control:not(.has-file) .custom-file-name::after{content:'Faili pole valitud';font-size:.9rem!important}
html[lang="et"] input[type="file"].custom-file-native + .custom-file-control.has-file .custom-file-name{font-size:.9rem!important}
.header-player-now{grid-template-areas:'cover copy' 'controls controls' 'modes modes' 'progress progress'!important}
.header-player-modes{grid-area:modes!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;justify-content:stretch!important;gap:10px!important;width:100%!important;margin:6px 0 2px!important;flex-wrap:nowrap!important}
.header-player-mode{width:100%!important;min-width:0!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:9px 12px!important;border-radius:999px!important;white-space:nowrap!important;text-align:center!important}
.header-player-mode[data-header-mode="repeat"]::before{content:'↻'!important}.header-player-mode[data-header-mode="shuffle"]::before{content:'⇄'!important}.header-player-mode[data-header-mode="sequential"]::before{content:'☰'!important}.header-player-mode::before{display:inline-grid!important;place-items:center!important;width:22px!important;height:22px!important;border-radius:999px!important;background:rgba(255,255,255,.10)!important;flex:0 0 22px!important}
.header-player-control.is-play.is-playing,.promo-player-btn.is-play.is-playing,.player-button.is-playing,.header-player-btn.is-playing{animation:none}
.header-player-control.is-play .play-eq,.promo-player-btn.is-play .play-eq,.header-player-btn .header-player-mini-eq,.player-button .player-activity,.player-button.is-playing::after{display:none;animation:none}
.header-player-control.is-play.is-playing .icon-play,.promo-player-btn.is-play.is-playing .icon-play{display:none}
.header-player-control.is-play.is-playing .icon-pause,.promo-player-btn.is-play.is-playing .icon-pause{display:inline-flex}
.header-player-btn.is-playing .header-player-icon{display:block}
.story-ring video:not(.has-frame){background:radial-gradient(circle at 35% 28%,rgba(124,241,211,.2),transparent 34%),linear-gradient(135deg,rgba(122,165,255,.22),rgba(8,16,34,.95))!important}
.story-ring video:not(.has-frame)::before{content:'▶'}
@media(max-width:760px){.header-player-now{grid-template-areas:'cover' 'copy' 'controls' 'modes' 'progress'}.header-player-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.header-player-mode{font-size:.9rem;padding:8px 8px}.header-player-mode::before{width:20px;height:20px}}

/* 2026-05-23 final fixes: premium player icon, call self-preview, badges, media smoothness */
.header-player-btn .header-player-icon{display:block;width:20px;height:20px;opacity:1;visibility:visible;fill:currentColor;transform:none;animation:none;content:normal;}
.header-player-btn:not(.is-playing) .header-player-mini-eq{display:none;opacity:0;visibility:hidden;}
.header-player-btn.is-playing .header-player-icon{display:none;opacity:0;visibility:hidden;}
.header-player-btn.is-playing .header-player-mini-eq{display:flex;opacity:1;visibility:visible;}
.header-player-control.is-play .icon-play,.promo-player-btn.is-play .icon-play{display:inline-flex;opacity:1;visibility:visible;align-items:center;justify-content:center;}
.header-player-control.is-play .icon-pause,.header-player-control.is-play .play-eq,.promo-player-btn.is-play .icon-pause,.promo-player-btn.is-play .play-eq{display:none;opacity:0;visibility:hidden;}
.header-player-control.is-play.is-playing .icon-play,.promo-player-btn.is-play.is-playing .icon-play{display:none;opacity:0;visibility:hidden;}
.header-player-control.is-play.is-playing .icon-pause,.promo-player-btn.is-play.is-playing .icon-pause{display:inline-flex;opacity:1;visibility:visible;}
.header-player-control.is-play.is-playing .play-eq,.promo-player-btn.is-play.is-playing .play-eq{display:flex;opacity:1;visibility:visible;}

/* NOTE: the call self-view layout was rewritten as a SIDE-BY-SIDE flex layout
   (see ".call-self" / ".call-video-grid" block lower in this file). The old
   OVERLAY rules that used to live here — .call-video-grid{display:block} plus an
   absolutely-positioned, globally-scoped "#localCallVideo" overlay with its own
   transform/border/box-shadow — fought the new rules on the SAME live <video>
   element. Every time the call JS toggled a state class the browser had to
   re-resolve two competing !important declarations for position/display/
   transform, which forced a recomposite of the live stream and showed up as the
   self-view flicker / stutter. Those rules are intentionally removed. Do not add
   a bare "#localCallVideo" selector here again — always scope call video styling
   under ".call-self" / ".call-video-grid" so there is a single source of truth. */
.call-video-grid{position:relative!important;background:#020712!important;}
.call-video-grid video#remoteCallVideo{display:block!important;object-fit:cover!important;background:radial-gradient(circle at 50% 45%, rgba(122,165,255,.12), transparent 44%),#020712!important;opacity:1!important;visibility:visible!important;}

.custom-user-badge{background:linear-gradient(135deg,var(--badge-color),rgba(255,255,255,.18))!important;color:#fff!important;border:1px solid color-mix(in srgb,var(--badge-color) 74%,#fff 26%)!important;box-shadow:0 8px 22px color-mix(in srgb,var(--badge-color) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.32)!important;}
.custom-user-badge--premium{outline:2px solid rgba(122,255,226,.18)!important;}
.custom-user-badge--soft{background:color-mix(in srgb,var(--badge-color) 24%,rgba(9,16,32,.94))!important;color:color-mix(in srgb,var(--badge-color) 72%,#fff 28%)!important;}
.custom-user-badge--solid{background:var(--badge-color)!important;color:#fff!important;}
.badge-showcase{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.admin-table .custom-user-badge,.person-card .custom-user-badge{width:34px;height:34px;}

img{image-rendering:auto;}
.custom-media-player__media,video{backface-visibility:hidden;transform:translateZ(0);}

/* 2026-05-23 final player icon alignment patch */
.header-player-btn,
.header-icon-btn.header-player-btn,
.header-player-control.is-play,
.promo-player-btn.is-play,
.player-button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  line-height:1!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.header-player-control.is-play .play-eq,
.promo-player-btn.is-play .play-eq,
.header-player-btn .header-player-mini-eq,
.player-button .player-activity{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  animation:none!important;
}
.header-player-control.is-play::before,
.header-player-control.is-play::after,
.promo-player-btn.is-play::before,
.promo-player-btn.is-play::after,
.player-button::before,
.player-button::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
}
.header-player-control.is-play .icon-play,
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-play,
.promo-player-btn.is-play .icon-pause,
.player-button .icon-play,
.player-button .icon-pause,
.header-player-btn .header-player-icon{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
  color:currentColor!important;
}
.header-player-control.is-play .icon-play svg,
.header-player-control.is-play .icon-pause svg,
.promo-player-btn.is-play .icon-play svg,
.promo-player-btn.is-play .icon-pause svg,
.player-button .icon-play svg,
.player-button .icon-pause svg,
.header-player-btn .header-player-icon svg{
  display:block!important;
  width:23px!important;
  height:23px!important;
  fill:currentColor!important;
  transform:none!important;
  animation:none!important;
}
.header-player-btn .header-player-icon svg{width:21px;height:21px;}
.header-player-control.is-play .icon-play svg,
.promo-player-btn.is-play .icon-play svg,
.player-button .icon-play svg,
.header-player-btn .header-player-icon--play svg{transform:translateX(1.5px);}
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-pause,
.player-button .icon-pause,
.header-player-btn .header-player-icon--pause{display:none;}
.header-player-control.is-play.is-playing .icon-play,
.promo-player-btn.is-play.is-playing .icon-play,
.player-button.is-playing .icon-play,
.header-player-btn.is-playing .header-player-icon--play{display:none;}
.header-player-control.is-play.is-playing .icon-pause,
.promo-player-btn.is-play.is-playing .icon-pause,
.player-button.is-playing .icon-pause,
.header-player-btn.is-playing .header-player-icon--pause{display:flex;}
.header-player-btn.is-playing .header-player-icon{display:none;}
.header-player-btn.is-playing .header-player-icon--pause{display:flex;}
.player-button{font-size:0;}

/* 2026-05-23 absolute final: clean pause icons and invisible scrollbars */
html,
body,
*{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
*::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
  background:transparent!important;
}
.header-player-control.is-play .play-eq,
.promo-player-btn.is-play .play-eq,
.header-player-btn .header-player-mini-eq,
.player-button .player-activity,
.player-button.is-playing::before,
.player-button.is-playing::after,
.header-player-control.is-play .icon-pause::before,
.promo-player-btn.is-play .icon-pause::before,
.player-button .icon-pause::before,
.header-player-btn .header-player-icon--pause::before{
  content:none!important;
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}
.header-player-btn,
.header-player-control.is-play,
.promo-player-btn.is-play,
.player-button{
  position:relative!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
.header-player-control.is-play .icon-play,
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-play,
.promo-player-btn.is-play .icon-pause,
.player-button .icon-play,
.player-button .icon-pause,
.header-player-btn .header-player-icon{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  color:currentColor!important;
  font-size:0!important;
  transform:none!important;
}
.header-player-control.is-play .icon-play svg,
.header-player-control.is-play .icon-pause svg,
.promo-player-btn.is-play .icon-play svg,
.promo-player-btn.is-play .icon-pause svg,
.player-button .icon-play svg,
.player-button .icon-pause svg,
.header-player-btn .header-player-icon svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  fill:currentColor!important;
  transform:none!important;
  animation:none!important;
}
.header-player-btn .header-player-icon svg{width:20px;height:20px;}
.header-player-control.is-play .icon-play svg,
.promo-player-btn.is-play .icon-play svg,
.player-button .icon-play svg,
.header-player-btn .header-player-icon--play svg{transform:translateX(1.4px);}
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-pause,
.player-button .icon-pause,
.header-player-btn .header-player-icon--pause,
.header-player-control.is-play.is-playing .icon-play,
.promo-player-btn.is-play.is-playing .icon-play,
.player-button.is-playing .icon-play,
.header-player-btn.is-playing .header-player-icon--play{
  display:none;
}
.header-player-control.is-play.is-playing .icon-pause,
.promo-player-btn.is-play.is-playing .icon-pause,
.player-button.is-playing .icon-pause,
.header-player-btn.is-playing .header-player-icon--pause{
  display:flex;
}
.header-player-btn.is-playing .header-player-icon{display:none;}
.header-player-btn.is-playing .header-player-icon--pause{display:flex;}
.player-button{font-size:0;}


/* 2026-05-23 final override: visible pause icon, no equalizer bars, hidden scrollbars keep scrolling */
html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important;}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important;}
.header-player-control.is-play,
.promo-player-btn.is-play,
.player-button,
.header-player-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.header-player-control.is-play .play-eq,
.promo-player-btn.is-play .play-eq,
.header-player-btn .header-player-mini-eq,
.player-button .player-activity{display:none;visibility:hidden;opacity:0;animation:none;}
.header-player-control.is-play::before,
.promo-player-btn.is-play::before,
.player-button::before,
.header-player-btn::before{content:none;display:none;}
.header-player-control.is-play:not(.is-playing)::after,
.promo-player-btn.is-play:not(.is-playing)::after,
.player-button:not(.is-playing)::after,
.header-player-btn:not(.is-playing)::after{content:none;display:none;}
.header-player-control.is-play .icon-play,
.promo-player-btn.is-play .icon-play,
.player-button .icon-play,
.header-player-btn .header-player-icon--play{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;color:currentColor;opacity:1;visibility:visible;pointer-events:none;}
.header-player-control.is-play .icon-play svg,
.promo-player-btn.is-play .icon-play svg,
.player-button .icon-play svg,
.header-player-btn .header-player-icon--play svg{display:block;width:22px;height:22px;fill:currentColor;transform:translateX(1.4px);animation:none;}
.header-player-btn .header-player-icon--play svg{width:20px;height:20px;}
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-pause,
.player-button .icon-pause,
.header-player-btn .header-player-icon--pause{display:none;visibility:hidden;opacity:0;}
.header-player-control.is-play.is-playing .icon-play,
.promo-player-btn.is-play.is-playing .icon-play,
.player-button.is-playing .icon-play,
.header-player-btn.is-playing .header-player-icon--play,
.header-player-control.is-play.is-playing .icon-pause,
.promo-player-btn.is-play.is-playing .icon-pause,
.player-button.is-playing .icon-pause,
.header-player-btn.is-playing .header-player-icon--pause{display:none;visibility:hidden;opacity:0;}
.header-player-control.is-play.is-playing::after,
.promo-player-btn.is-play.is-playing::after,
.player-button.is-playing::after{content:"";display:block;position:absolute;left:50%;top:50%;width:17px;height:22px;transform:translate(-50%,-50%);border-radius:2px;background:linear-gradient(90deg,#07111f 0 35%,transparent 35% 65%,#07111f 65% 100%);box-shadow:0 0 0 1px rgba(7,17,31,.02);z-index:9;opacity:1;visibility:visible;pointer-events:none;animation:none;}
.header-player-btn.is-playing::after{content:"";display:block;position:absolute;left:50%;top:50%;width:15px;height:20px;transform:translate(-50%,-50%);border-radius:2px;background:linear-gradient(90deg,#f3f8ff 0 35%,transparent 35% 65%,#f3f8ff 65% 100%);box-shadow:0 0 14px rgba(124,241,211,.22);z-index:9;opacity:1;visibility:visible;pointer-events:none;animation:none;}
.header-player-control.is-play.is-playing,
.promo-player-btn.is-play.is-playing,
.player-button.is-playing,
.header-player-btn.is-playing{animation:none;border-color:rgba(124,241,211,.55);box-shadow:0 0 0 5px rgba(124,241,211,.11),0 18px 34px rgba(0,0,0,.26);}

/* 2026-05-24 mobile call/player final fix.
   2026-07-09: removed the stale OVERLAY self-view overrides that used to live
   here (bare "#localCallVideo" background + an absolutely-positioned
   "#localCallVideo" / ".call-self-label" inside @media(max-width:700px)). They
   contradicted the side-by-side ".call-self" layout further down and were a
   cause of the self-view flicker. Mobile self-view sizing now lives ONLY in the
   ".call-self" block (see @media(max-width:760px) there). Only the harmless
   overlay-card padding rules are kept below. */
@media(max-width:700px){
  .call-overlay{align-items:stretch!important;padding:10px 8px calc(10px + env(safe-area-inset-bottom))!important;}
  .call-overlay__card{width:100%!important;max-height:calc(100svh - 20px)!important;overflow:auto!important;padding:16px!important;border-radius:24px!important;}
  .call-video-grid{min-height:clamp(420px,64svh,620px)!important;border-radius:24px!important;background:transparent!important;}
  .call-video-grid video#remoteCallVideo{border-radius:24px!important;object-fit:cover!important;background:#020712!important;}
}
@media(max-width:860px){
  .profile-player-fab,
  body.public-user-page .profile-player-fab,
  body.profile-page .profile-player-fab,
  body:has(.messenger-layout) .profile-player-fab{
    left:auto!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 24px)!important;
    min-height:42px!important;
    padding:9px 13px!important;
    border-radius:999px!important;
    font-size:.92rem!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  .profile-player-fab.is-promo,
  body.public-user-page .profile-player-fab.is-promo{width:auto!important;max-width:calc(100vw - 24px)!important;}
  body.has-promo-player .profile-player-fab.is-promo{display:none!important;visibility:hidden!important;pointer-events:none!important;}
}
@media(max-width:560px){
  .header-player-now{grid-template-areas:'cover' 'copy' 'controls' 'modes' 'progress'!important;}
  .header-player-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%!important;min-width:0!important;}
  .header-player-mode{min-width:0!important;width:100%!important;min-height:40px!important;padding:8px 4px!important;gap:0!important;font-size:clamp(.68rem,2.65vw,.8rem)!important;letter-spacing:-.02em!important;line-height:1.05!important;overflow:hidden!important;text-overflow:clip!important;white-space:nowrap!important;}
  .header-player-mode::before{display:none!important;content:none!important;}
  .header-player-mode[data-header-mode="sequential"]{font-size:clamp(.64rem,2.45vw,.76rem)!important;}
}

/* 2026-05-24 video/gifts/profile lists fix.
   IMPORTANT: no `contain:paint` on the self-view <video>. `contain:paint` gives
   the live element its own isolated paint context; together with the mirror
   transform that made Chrome/iOS Safari repaint the decoded frame on every
   state-class toggle → the mini-window flicker. Leave the video to paint into
   its parent .call-self layer. backface-visibility is a cheap, safe hint. */
.call-video-grid video#localCallVideo,#localCallVideo{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:auto!important;
  contain:none!important;
}
.call-video-grid video#remoteCallVideo,#remoteCallVideo{will-change:auto!important;}
.call-status-chip{transition:opacity .22s ease,transform .22s ease;}

/* Smaller gift cards + hidden functional scrolling */
.messages-page .gift-grid.compact-gifts,
.public-user-page .gift-grid.compact-gifts{
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))!important;
  gap:12px!important;
  max-height:min(50vh,430px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding:2px!important;
  scrollbar-width:none!important;
}
.messages-page .gift-grid.compact-gifts::-webkit-scrollbar,
.public-user-page .gift-grid.compact-gifts::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
.messages-page .gift-card,
.public-user-page .gift-card{
  gap:8px!important;
  padding:12px!important;
  border-radius:18px!important;
}
.messages-page .gift-card img,
.public-user-page .gift-card img{
  max-height:138px!important;
  object-fit:contain!important;
  border-radius:15px!important;
}
.messages-page .gift-card .admin-input,
.public-user-page .gift-card .admin-input{min-height:42px!important;padding:10px 12px!important;font-size:.92rem!important;}
.messages-page .gift-card .site-btn,
.public-user-page .gift-card .site-btn{min-height:40px!important;padding:9px 12px!important;font-size:.92rem!important;}
@media(max-width:720px){
  .messages-page .gift-grid.compact-gifts,
  .public-user-page .gift-grid.compact-gifts{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:44vh!important;}
  .messages-page .gift-card img,
  .public-user-page .gift-card img{max-height:112px!important;}
}

/* Scrollable profile modules without visible scrollbars */
.profile-gallery-grid,
.music-search-results,
#music-library .music-list,
#friends .gift-list,
#friend-requests .gift-list,
#blacklist .gift-list,
.story-grid,
.stories-bar{
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:none!important;
}
.profile-gallery-grid::-webkit-scrollbar,
.music-search-results::-webkit-scrollbar,
#music-library .music-list::-webkit-scrollbar,
#friends .gift-list::-webkit-scrollbar,
#friend-requests .gift-list::-webkit-scrollbar,
#blacklist .gift-list::-webkit-scrollbar,
.story-grid::-webkit-scrollbar,
.stories-bar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
.profile-gallery-grid{max-height:min(72vh,760px)!important;padding:2px!important;}
.music-search-results{max-height:min(50vh,460px)!important;padding:2px!important;}
#music-library .music-list{max-height:min(52vh,520px)!important;padding:2px!important;}
#friends .gift-list,#friend-requests .gift-list,#blacklist .gift-list{max-height:min(52vh,520px)!important;padding:2px!important;}
.story-grid{max-height:min(58vh,620px)!important;padding:2px!important;}
.stories-bar{padding-bottom:8px!important;}
.profile-friends-search{margin:12px 0 16px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:10px!important;align-items:center!important;}
.friends-subtitle{margin:18px 0 10px!important;font-size:1.05rem!important;}
.friend-search-results{margin-bottom:16px!important;}
.friend-search-card .gift-item-link{width:100%;}
@media(max-width:720px){.profile-friends-search{grid-template-columns:1fr}.profile-friends-search .site-btn{width:100%}.profile-gallery-grid,.music-search-results,#music-library .music-list,#friends .gift-list,#friend-requests .gift-list,#blacklist .gift-list,.story-grid{max-height:54vh}}

/* 2026-05-24 reports/events/friends/stories polish */
.report-button-form{display:inline-flex;margin:0!important;vertical-align:middle}.report-action{border:1px solid rgba(223,111,134,.32)!important;background:rgba(223,111,134,.10)!important;color:#ffd1da!important;border-radius:999px!important;min-height:34px!important;padding:0 12px!important;font-weight:800!important}.report-action:hover{background:rgba(223,111,134,.18)!important;color:#fff!important}.comment-actions{display:flex;align-items:center;gap:8px;margin-top:8px}.feed-actions{display:flex!important;align-items:center;gap:10px;flex-wrap:wrap}.message-actions-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.friend-search-results{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:14px!important;max-height:420px;overflow:auto;scrollbar-width:none}.friend-search-results::-webkit-scrollbar{display:none}.friend-search-card{min-width:0!important;width:100%!important;display:block!important;overflow:hidden}.friend-search-card .gift-item-link{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;width:100%!important;text-decoration:none!important;color:var(--text)!important}.friend-search-card .avatar-stack{width:58px!important;height:58px!important;min-width:58px!important}.friend-search-card strong{display:block!important;white-space:normal!important;overflow:visible!important;word-break:normal!important;line-height:1.15!important}.friend-search-card .small{white-space:normal!important;word-break:normal!important;overflow:visible!important;line-height:1.35!important}
.story-strip,.story-grid,.profile-gallery-grid,.gallery-grid,.music-list,.friend-list,.gift-list,.friend-search-results,.profile-music-search-results,.profile-uploaded-tracks,.profile-playlist-tracks,.profile-stories-list,.friends-list,.blacklist-list{overflow:auto;scrollbar-width:none}.story-strip::-webkit-scrollbar,.story-grid::-webkit-scrollbar,.profile-gallery-grid::-webkit-scrollbar,.gallery-grid::-webkit-scrollbar,.music-list::-webkit-scrollbar,.friend-list::-webkit-scrollbar,.gift-list::-webkit-scrollbar,.friend-search-results::-webkit-scrollbar,.profile-music-search-results::-webkit-scrollbar,.profile-uploaded-tracks::-webkit-scrollbar,.profile-playlist-tracks::-webkit-scrollbar,.profile-stories-list::-webkit-scrollbar,.friends-list::-webkit-scrollbar,.blacklist-list::-webkit-scrollbar{display:none}.story-grid{max-height:620px}.story-card,.story-item,.story-tile{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.story-card:hover,.story-item:hover,.story-tile:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.25)}.story-card .small,.story-card figcaption,.story-tile .small,.story-tile figcaption,.story-item .small{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.9);font-weight:800}.story-card form button,.story-tile form button,.story-item form button,.story-delete-btn{background:rgba(8,15,30,.78)!important;border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important;border-radius:999px!important}.story-card:after,.story-tile:after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,0,0,.58))}
.home-event-modal[hidden]{display:none!important}.home-event-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}.home-event-backdrop{position:absolute;inset:0;background:rgba(3,8,18,.72);backdrop-filter:blur(16px)}.home-event-card{position:relative;z-index:1;width:min(560px,calc(100vw - 28px));padding:32px;border-radius:34px;border:1px solid rgba(121,227,210,.28);background:radial-gradient(circle at 20% 0,rgba(122,165,255,.25),transparent 34%),radial-gradient(circle at 88% 18%,rgba(121,227,210,.22),transparent 34%),linear-gradient(180deg,rgba(10,20,38,.98),rgba(7,13,26,.96));box-shadow:0 32px 100px rgba(0,0,0,.58);overflow:hidden}.home-event-card:before{content:'✦ ✧ ✦ ✧ ✦';position:absolute;top:18px;right:64px;color:rgba(121,227,210,.7);letter-spacing:12px;animation:eventSpark 3.6s ease-in-out infinite}.home-event-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:28px;font-weight:800}.home-event-eyebrow{display:inline-flex;padding:8px 13px;border-radius:999px;border:1px solid rgba(121,227,210,.35);background:rgba(121,227,210,.10);color:#dffff9;font-weight:900;letter-spacing:.08em;font-size:.78rem}.home-event-card h2{margin:16px 0 10px;font-size:clamp(2rem,7vw,4rem);line-height:.96}.home-event-card p{color:var(--muted);font-size:1.05rem;line-height:1.55}.home-event-stats{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}.home-event-stats strong{font-size:2rem}.home-event-timer{min-height:24px;color:#d8fff7;font-weight:800}.home-event-button{display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:18px;border-radius:20px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#071122;text-decoration:none;font-weight:950}.home-event-button:hover{transform:translateY(-1px)}@keyframes eventSpark{50%{transform:translateY(8px);opacity:.35}}
@media(max-width:700px){.friend-search-results{grid-template-columns:1fr}.home-event-card{padding:24px;border-radius:26px}.profile-player-fab,.global-player-fab,[data-open-floating-player]{font-size:.9rem;min-height:44px;padding:0 16px;border-radius:16px}}


/* 2026-05-24 final promo/cookie fixes */
.home-event-card{isolation:isolate}.home-event-card:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 18% 18%,rgba(255,214,102,.20),transparent 8%),radial-gradient(circle at 82% 28%,rgba(255,116,146,.18),transparent 7%),radial-gradient(circle at 78% 78%,rgba(121,227,210,.16),transparent 9%);animation:eventFireworks 4.8s ease-in-out infinite}.home-event-form{margin:0}.home-event-button{position:relative;z-index:3;width:100%;min-height:58px;border:0;cursor:pointer;font-size:1.02rem;letter-spacing:.01em;color:#061121!important;text-shadow:none!important;opacity:1!important;background:linear-gradient(100deg,#6ea8ff 0%,#79e3d2 100%)!important;box-shadow:0 18px 44px rgba(121,227,210,.20),inset 0 1px 0 rgba(255,255,255,.42)!important}.home-event-button:hover{filter:saturate(1.08) brightness(1.03)}.home-event-lang{position:absolute;top:16px;right:68px;z-index:4;display:flex;gap:6px}.home-event-lang button{min-width:42px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#dce8ff;font-weight:900;cursor:pointer}.home-event-lang button.is-active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#061121;border-color:transparent}.cookie-banner{z-index:10050!important}.cookie-banner[hidden]{display:none!important}@keyframes eventFireworks{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@media(max-width:640px){.home-event-lang{top:14px;right:62px}.home-event-button{min-height:52px;font-size:.95rem}.home-event-card p{font-size:.98rem}}

.home-event-reopen{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:9998;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;max-width:min(360px,calc(100vw - 36px));padding:0 18px;border:1px solid rgba(121,227,210,.35);border-radius:999px;background:linear-gradient(135deg,rgba(12,25,48,.96),rgba(18,48,58,.94));color:#eef4ff;font-weight:900;box-shadow:0 18px 48px rgba(0,0,0,.38);cursor:pointer}.home-event-reopen[hidden]{display:none!important}@media(max-width:640px){.home-event-reopen{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none}}

/* 2026-05-24 premium event/cookie/player final polish */
.cookie-banner .button-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 18px;border-radius:16px;
  border:1px solid rgba(126,153,198,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  color:#eef4ff;text-decoration:none;font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);opacity:1;
}
.cookie-banner .button-secondary:hover{border-color:rgba(121,227,210,.4);background:rgba(121,227,210,.09);}
.home-event-card{isolation:isolate!important;overflow:hidden!important;}
.home-event-card::before{z-index:0!important;pointer-events:none!important;right:148px!important;top:24px!important;opacity:.55!important;}
.home-event-card::after{z-index:0!important;pointer-events:none!important;}
.home-event-card > *{position:relative;z-index:1;}
.home-event-lang,.home-event-close{z-index:20!important;}
.home-event-lang{top:18px!important;right:74px!important;padding:3px!important;border-radius:999px;background:rgba(5,11,24,.48)!important;backdrop-filter:blur(8px);}
.home-event-button[disabled],.home-event-button[aria-disabled="true"]{cursor:not-allowed!important;filter:grayscale(.35)!important;opacity:.68!important;box-shadow:none!important;}
.public-user-page .promo-player-collapse,.promo-player-bar .promo-player-collapse{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  position:absolute!important;top:10px!important;right:10px!important;z-index:12!important;
  width:36px!important;height:36px!important;min-width:36px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.14)!important;background:rgba(18,28,52,.92)!important;
  color:#eef4ff!important;font-size:20px!important;font-weight:900!important;line-height:1!important;
}
@media(max-width:640px){
  .cookie-actions{gap:10px!important;}
  .home-event-lang{top:14px!important;right:62px!important;transform:scale(.92);transform-origin:top right;}
  .home-event-card::before{right:132px!important;top:22px!important;letter-spacing:8px!important;font-size:.78rem!important;}
  .home-event-card h2{padding-right:0!important;}
  .public-user-page .promo-player-collapse,.promo-player-bar .promo-player-collapse{top:8px!important;right:8px!important;width:34px!important;height:34px!important;min-width:34px!important;}
}

/* 2026-05-24 message/call/music final fix */
.message-media-label--sticker + .message-sticker ~ .message-actions-row .report-button-form,
.message-media-label--gift ~ .message-actions-row .report-button-form,
.message-media-label--audio ~ .message-actions-row .report-button-form,
.message-media-label--video ~ .message-actions-row .report-button-form,
.message-voice-shell ~ .message-actions-row .report-button-form,
.message-audio-shell ~ .message-actions-row .report-button-form,
.message-video-shell ~ .message-actions-row .report-button-form{display:none!important}

.home-event-card::before{
  top:24px!important;right:152px!important;z-index:0!important;opacity:.45!important;pointer-events:none!important;
  letter-spacing:10px!important;white-space:nowrap!important;max-width:210px!important;overflow:hidden!important;
}
.home-event-lang{
  position:absolute!important;top:18px!important;right:74px!important;left:auto!important;z-index:30!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px!important;
  width:auto!important;min-width:0!important;height:auto!important;border-radius:999px!important;
  background:rgba(5,11,24,.72)!important;border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.28)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
}
.home-event-lang button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:42px!important;height:34px!important;padding:0 12px!important;margin:0!important;
  border-radius:999px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.055)!important;
  color:#dfeaff!important;font-size:.82rem!important;font-weight:950!important;line-height:1!important;letter-spacing:.03em!important;
  box-shadow:none!important;transform:none!important;position:relative!important;inset:auto!important;
}
.home-event-lang button.is-active{background:linear-gradient(100deg,#6ea8ff,#79e3d2)!important;color:#061121!important;border-color:transparent!important;box-shadow:0 10px 24px rgba(121,227,210,.18)!important;}
.home-event-close{z-index:35!important;}
@media(max-width:640px){
  .home-event-card{padding-top:68px!important;}
  .home-event-lang{top:18px!important;right:62px!important;transform:none!important;}
  .home-event-lang button{min-width:38px!important;height:32px!important;padding:0 10px!important;font-size:.78rem!important;}
  .home-event-card::before{top:24px!important;right:128px!important;max-width:130px!important;letter-spacing:7px!important;opacity:.35!important;}
}

body.home-music-expanded .track-grid.is-collapsed .home-track-card.is-extra-track,
.track-grid.is-expanded .home-track-card.is-extra-track,
.track-grid.is-searching .home-track-card.is-extra-track{display:grid!important;}
.track-grid.is-collapsed:not(.is-expanded):not(.is-searching) .home-track-card.is-extra-track{display:none!important;}
.music-collapse-actions{display:flex;justify-content:center;margin-top:22px;}
.music-collapse-actions .button{min-width:min(280px,100%);}
.home-scroll-top{
  position:fixed;right:22px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:90;
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;
  border:1px solid rgba(121,227,210,.32);background:linear-gradient(135deg,rgba(16,30,58,.94),rgba(19,62,68,.92));
  color:#ecf5ff;font-size:1.45rem;font-weight:950;box-shadow:0 18px 46px rgba(0,0,0,.35),0 0 0 6px rgba(121,227,210,.08);
  cursor:pointer;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .2s ease,transform .2s ease,border-color .2s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.home-scroll-top.is-visible{opacity:1;transform:translateY(0) scale(1);}
.home-scroll-top:hover{border-color:rgba(121,227,210,.55);transform:translateY(-2px) scale(1.02);}
.home-scroll-top[hidden]{display:none!important;}
@media(max-width:640px){.home-scroll-top{right:14px;bottom:calc(76px + env(safe-area-inset-bottom));width:46px;height:46px;font-size:1.25rem}}

.public-user-page .promo-player-bar,
.promo-player-bar[data-promo-player]{padding-right:64px!important;}
.public-user-page .promo-player-collapse,
.promo-player-bar .promo-player-collapse{
  display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  position:absolute!important;top:12px!important;right:12px!important;z-index:40!important;
  width:38px!important;height:38px!important;min-width:38px!important;border-radius:999px!important;
  align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;
  color:#fff!important;background:rgba(9,16,31,.92)!important;border:1px solid rgba(255,255,255,.18)!important;
  font-size:23px!important;font-weight:950!important;line-height:1!important;text-indent:0!important;overflow:visible!important;
}
@media(max-width:720px){
  .public-user-page .promo-player-bar,.promo-player-bar[data-promo-player]{padding-right:58px!important;}
  .public-user-page .promo-player-collapse,.promo-player-bar .promo-player-collapse{top:10px!important;right:10px!important;width:40px!important;height:40px!important;min-width:40px!important;}
}

/* 2026-05-24 final mobile lower-player close override */
body.public-user-page .promo-player-bar .promo-player-collapse,
body.public-user-page .promo-player-bar[data-promo-player] .promo-player-collapse{
  display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  position:absolute!important;top:12px!important;right:12px!important;z-index:60!important;
  width:38px!important;height:38px!important;min-width:38px!important;border-radius:999px!important;
  align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;
  color:#fff!important;background:rgba(9,16,31,.94)!important;border:1px solid rgba(255,255,255,.18)!important;
  font-size:23px!important;font-weight:950!important;line-height:1!important;text-indent:0!important;overflow:visible!important;
}
@media(max-width:720px){
  body.public-user-page .promo-player-bar .promo-player-collapse,
  body.public-user-page .promo-player-bar[data-promo-player] .promo-player-collapse{top:10px!important;right:10px!important;width:40px!important;height:40px!important;min-width:40px!important;}
}

/* 2026-05-24 social music/posts/stories polish */
.track-social-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 10px;color:var(--muted);font-weight:800;font-size:.88rem}.track-premium-actions,.track-action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.track-mini-form{display:inline-flex;margin:0}.tiny-action.is-active,.site-btn.is-active{border-color:rgba(126,231,218,.65)!important;background:linear-gradient(135deg,rgba(104,166,255,.35),rgba(111,229,210,.28))!important;color:#fff!important}.like-details{display:inline-flex;position:relative;align-items:center;max-width:100%}.like-details>summary{cursor:pointer;list-style:none;border:1px solid rgba(151,174,214,.24);border-radius:999px;padding:8px 12px;font-size:.86rem;font-weight:800;color:var(--text);background:rgba(255,255,255,.04)}.like-details>summary::-webkit-details-marker{display:none}.like-details[open]>summary{border-color:rgba(126,231,218,.45);background:rgba(126,231,218,.11)}.likers-list{display:grid;gap:8px;min-width:220px;max-width:min(320px,80vw);padding:10px;margin-top:8px;border:1px solid rgba(151,174,214,.22);border-radius:18px;background:rgba(8,14,28,.98);box-shadow:0 24px 55px rgba(0,0,0,.35);position:absolute;z-index:30}.likers-list a{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;color:var(--text);text-decoration:none;font-weight:800}.likers-list img{width:30px;height:30px;border-radius:999px;object-fit:cover}.repost-preview{border:1px solid rgba(126,231,218,.22);border-radius:18px;background:rgba(126,231,218,.08);padding:12px 14px;margin:10px 0;color:var(--text);font-weight:800}.story-social-panel{display:grid;gap:10px;margin-top:12px;padding:12px;border:1px solid rgba(151,174,214,.16);border-radius:18px;background:rgba(255,255,255,.035)}.story-comment-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.story-comment-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(151,174,214,.14);padding-top:8px;color:var(--muted)}.header-player-save-form{display:flex;justify-content:center;margin-top:10px}.home-event-lang{position:relative;z-index:5;display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:0 46px 12px 0}.home-event-lang button{min-width:42px;height:36px;border-radius:999px;border:1px solid rgba(151,174,214,.25);background:rgba(8,14,28,.72);color:var(--text);font-weight:900}.home-event-lang button.is-active{background:linear-gradient(135deg,#6aa7ff,#70e3d5);color:#08111f}.home-event-modal .home-event-close{z-index:6}.profile-player-fab,.home-event-reopen,.scroll-top-btn{transition:opacity .18s ease, transform .18s ease}.header-player-open .home-event-reopen,.header-player-open .scroll-top-btn,.has-promo-player .home-event-reopen,.has-promo-player .scroll-top-btn{opacity:0!important;pointer-events:none!important;transform:translateY(12px) scale(.96)!important}.track-grid.is-collapsed .home-track-card.is-extra-track{display:none}.track-grid.is-expanded .home-track-card.is-extra-track{display:flex}.track-grid.is-searching .home-track-card.is-extra-track{display:flex}
@media (max-width: 640px){.home-event-reopen{font-size:.82rem;padding:8px 12px;border-radius:999px;left:12px;bottom:84px;max-width:calc(100vw - 24px)}.scroll-top-btn{right:12px;bottom:84px}.story-comment-form{grid-template-columns:1fr}.like-details{display:flex}.likers-list{position:static;min-width:0;width:100%}.header-player-save-form .site-btn{width:100%}.track-premium-actions,.track-action-row{gap:6px}.home-event-lang{justify-content:flex-start;margin:0 48px 10px 0}.home-event-card{overflow:hidden}.home-event-card:before,.home-event-card:after{pointer-events:none}}

/* 2026-05-24 final social/music request overrides */
.home-event-card{padding-top:76px!important;}
.home-event-card::before{top:28px!important;right:168px!important;z-index:0!important;pointer-events:none!important;opacity:.38!important;max-width:170px!important;overflow:hidden!important;}
.home-event-lang{
  position:absolute!important;top:20px!important;right:70px!important;left:auto!important;margin:0!important;z-index:45!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  width:auto!important;max-width:none!important;min-width:0!important;padding:4px!important;border-radius:999px!important;
  background:rgba(5,11,24,.78)!important;border:1px solid rgba(151,174,214,.18)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.30)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
}
.home-event-lang button{position:static!important;inset:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:40px!important;height:32px!important;margin:0!important;padding:0 11px!important;border-radius:999px!important;font-size:.8rem!important;font-weight:950!important;line-height:1!important;letter-spacing:.03em!important;}
.home-event-close{z-index:50!important;}
.header-player-open .home-event-reopen,.header-player-open .home-scroll-top,.header-player-open .scroll-top-btn,
.has-promo-player .home-event-reopen,.has-promo-player .home-scroll-top,.has-promo-player .scroll-top-btn{
  opacity:0!important;pointer-events:none!important;transform:translateY(12px) scale(.96)!important;
}
@media(max-width:640px){
  .home-event-reopen{font-size:.74rem!important;min-height:34px!important;padding:7px 10px!important;border-radius:999px!important;max-width:calc(100vw - 22px)!important;}
  .home-event-card{padding-top:72px!important;}
  .home-event-lang{top:18px!important;right:62px!important;gap:4px!important;padding:3px!important;}
  .home-event-lang button{min-width:36px!important;height:30px!important;padding:0 9px!important;font-size:.76rem!important;}
  .home-event-card::before{right:126px!important;top:26px!important;max-width:112px!important;letter-spacing:7px!important;opacity:.26!important;}
}

/* 2026-05-24 deep social/player fixes */
.comment-actions,.story-social-actions,.gallery-social-actions,.track-action-row,.track-premium-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%;}
.comment-actions form,.story-social-actions form,.gallery-social-actions form,.track-action-row form,.track-premium-actions form{margin:0;display:inline-flex;}
.tiny-action,.track-premium-actions .tiny-action,.track-mini-form .tiny-action{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:0!important;width:auto!important;max-width:100%!important;min-height:34px!important;padding:7px 12px!important;border-radius:999px!important;border:1px solid rgba(126,153,198,.32)!important;background:rgba(12,22,40,.88)!important;color:var(--text,#eef4ff)!important;font-weight:900!important;line-height:1.1!important;white-space:nowrap!important;box-shadow:none!important;}
.tiny-action.is-active{background:linear-gradient(135deg,rgba(122,165,255,.25),rgba(121,227,210,.22))!important;border-color:rgba(121,227,210,.52)!important;color:#dffef8!important;}
.tiny-action.is-static{opacity:.82;pointer-events:none;}
.like-details{position:relative;display:inline-flex;max-width:100%;}
.like-details>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 12px;border-radius:999px;border:1px solid rgba(126,153,198,.25);background:rgba(11,19,35,.82);font-weight:900;white-space:nowrap;}
.like-details>summary::-webkit-details-marker{display:none;}
.like-details[open] .likers-list,.like-details[open] .likers-summary{position:absolute;z-index:80;top:calc(100% + 8px);left:0;width:min(320px,86vw);max-height:260px;overflow:auto;background:rgba(8,15,30,.98);border:1px solid rgba(126,153,198,.28);border-radius:18px;padding:10px;box-shadow:0 24px 70px rgba(0,0,0,.45);}
.comment-row{min-width:0;}
.comment-row__body{min-width:0;overflow:visible;}
.comment-row p{overflow-wrap:anywhere;}
.feed-card[data-post-id]{content-visibility:auto;contain-intrinsic-size:420px;}
.story-card,.story-tile,.profile-story-card{position:relative;overflow:hidden;border-radius:26px;background:rgba(8,15,30,.88);}
.story-social-panel,.gallery-social-panel{position:relative;z-index:4;width:100%;max-width:100%;margin-top:10px;padding:10px;border-radius:18px;background:rgba(7,13,26,.72);border:1px solid rgba(126,153,198,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.story-comment-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;max-width:100%;padding:8px;border-radius:14px;background:rgba(255,255,255,.035);}
.story-comment-row>span{min-width:0;overflow-wrap:anywhere;}
.story-comment-row .comment-actions{justify-content:flex-end;}
.story-card .like-details[open] .likers-list,.story-card .like-details[open] .likers-summary,.gallery-social-panel .like-details[open] .likers-list,.gallery-social-panel .like-details[open] .likers-summary{right:0;left:auto;}
.gallery-tile--social{display:flex;flex-direction:column;gap:10px;overflow:visible!important;}
.profile-gallery-grid{align-items:start;}
.gallery-comments-mini{display:grid;gap:8px;max-height:220px;overflow:auto;scrollbar-width:none;}
.gallery-comments-mini::-webkit-scrollbar{display:none;}
.gallery-comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px;}

.gallery-modal__social{width:min(860px,92vw);max-height:34vh;overflow:auto;margin:10px auto 0;padding:10px;border-radius:18px;background:rgba(8,15,30,.82);border:1px solid rgba(126,153,198,.25);scrollbar-width:none;}
.gallery-modal__social::-webkit-scrollbar{display:none;}
.track-card .track-premium-actions,.track-card .track-mini-form{margin-top:10px;}
.track-card .tiny-action{min-height:32px!important;font-size:.92rem!important;}
.track-card .site-btn,.music-card .site-btn{white-space:normal;}
.header-player-save-form .site-btn{min-width:128px;border-color:rgba(121,227,210,.45)!important;background:linear-gradient(135deg,rgba(122,165,255,.18),rgba(121,227,210,.2))!important;}
.profile-player-fab.is-hidden-by-player,.home-event-reopen.is-hidden-by-player,.home-scroll-top.is-hidden-by-player{opacity:0!important;pointer-events:none!important;transform:translateY(12px) scale(.96)!important;}
.verification-requirements{padding:14px;border-radius:20px;background:rgba(12,22,40,.7);border:1px solid rgba(126,153,198,.18);margin-bottom:14px;}
.verification-requirements ul{margin:8px 0 0 20px;padding:0;}
@media(max-width:720px){
  .comment-actions,.story-social-actions,.gallery-social-actions,.track-action-row,.track-premium-actions{gap:6px;}
  .tiny-action,.like-details>summary{min-height:30px!important;padding:6px 10px!important;font-size:.82rem!important;}
  .story-comment-row{grid-template-columns:1fr;}
  .story-comment-row .comment-actions{justify-content:flex-start;}
  .gallery-comment-form{grid-template-columns:1fr;}
  .like-details[open] .likers-list,.like-details[open] .likers-summary{position:fixed;left:12px!important;right:12px!important;top:auto!important;bottom:90px!important;width:auto;max-height:45vh;}
  .profile-player-fab{font-size:.78rem!important;min-height:34px!important;padding:8px 12px!important;border-radius:999px!important;}
}

/* 2026-05-25 media stability + modern gallery/stories refresh */
body.header-player-open{overflow:auto!important;}
.header-player-panel[hidden],.gallery-modal[hidden]{display:none!important;}
.header-player-panel{overscroll-behavior:contain;}
.header-player-backdrop,.gallery-backdrop{backdrop-filter:blur(14px) saturate(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.05);}
.profile-player-fab.is-playing,[data-open-promo-player].is-playing,.promo-player-btn.is-playing,.header-player-btn.is-playing{box-shadow:0 0 0 4px rgba(121,227,210,.18),0 18px 42px rgba(0,0,0,.35)!important;}
.has-promo-player .cookie-banner{bottom:max(116px,calc(env(safe-area-inset-bottom) + 116px))!important;}
@media(max-width:700px){.has-promo-player .cookie-banner{bottom:max(180px,calc(env(safe-area-inset-bottom) + 180px))!important;}}

.profile-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-height:none;padding:0;overflow:visible;align-items:start;}
.gallery-tile--social{position:relative;display:grid;gap:10px;padding:14px;border-radius:30px;border:1px solid rgba(126,153,198,.20);background:linear-gradient(180deg,rgba(10,18,35,.96),rgba(6,12,25,.92));box-shadow:0 22px 60px rgba(0,0,0,.26);overflow:hidden;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.gallery-tile--social:hover{transform:translateY(-3px);border-color:rgba(121,227,210,.34);box-shadow:0 30px 78px rgba(0,0,0,.35);}
.gallery-tile__preview{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#030711;isolation:isolate;}
.gallery-tile__media{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .28s ease,filter .28s ease;}
.gallery-tile--social:hover .gallery-tile__media{transform:scale(1.025);filter:saturate(1.05) contrast(1.02);}
.gallery-tile__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:999px;background:linear-gradient(135deg,rgba(106,168,255,.86),rgba(121,227,210,.88));color:#061121;font-size:1.25rem;font-weight:950;box-shadow:0 18px 44px rgba(0,0,0,.34);pointer-events:none;}
.gallery-tile figcaption{margin:0;color:#dce7fb;font-weight:800;line-height:1.35;overflow-wrap:anywhere;}
.profile-gallery-grid .gallery-social-panel{display:none;}
.gallery-tile-actions{position:absolute;right:18px;bottom:18px;z-index:3;margin:0;opacity:.96;}
.gallery-tile-actions .site-btn{min-height:38px;padding:8px 13px;border-radius:999px;background:rgba(5,10,22,.72);border-color:rgba(255,255,255,.20);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.gallery-tile__preview + figcaption + .gallery-social-panel + .gallery-tile-actions,.gallery-tile__preview + .gallery-social-panel + .gallery-tile-actions{bottom:18px;}

.gallery-modal{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:22px;background:rgba(1,4,12,.70);}
.gallery-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(28,45,82,.58),rgba(1,4,12,.88) 58%);}
.gallery-modal__dialog{position:relative;z-index:1;width:min(1160px,calc(100vw - 52px));max-height:calc(100dvh - 44px);margin:0 auto;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto) auto auto;gap:12px;align-items:center;padding:18px 20px 20px;border-radius:34px;border:1px solid rgba(126,153,198,.25);background:linear-gradient(180deg,rgba(8,15,31,.98),rgba(4,9,20,.96));box-shadow:0 44px 140px rgba(0,0,0,.62);overflow:visible;}
.gallery-modal__stage{display:grid;place-items:center;width:100%;min-height:0;max-height:calc(100dvh - 250px);padding:0;border:0;background:transparent;overflow:visible;}
.gallery-modal__stage>img{display:block;width:auto;max-width:100%;max-height:min(68dvh,700px);object-fit:contain;border-radius:28px;box-shadow:0 24px 70px rgba(0,0,0,.38);}
.gallery-modal__stage .custom-media-player.gallery-modal-player{width:min(100%,1000px);max-width:100%;max-height:none;padding:12px;border-radius:30px;background:rgba(3,7,17,.74);border:1px solid rgba(126,153,198,.24);box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:visible;}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__media{width:100%;max-height:min(58dvh,610px);object-fit:contain;border-radius:24px;background:#000;}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__controls{position:relative;z-index:4;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 2px 0;background:transparent;}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__timeline{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;min-width:0;}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__timeline input{min-width:0;width:100%;}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__actions{display:flex;gap:8px;margin-left:0;}
.gallery-modal__stage .custom-media-player.gallery-modal-player .site-chip-btn{min-width:44px;min-height:44px;border-radius:999px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#eff6ff;}
.gallery-modal__caption{width:min(920px,100%);margin:0 auto;padding:0 8px;color:#f1f6ff;text-align:center;font-weight:900;line-height:1.35;min-height:0;}
.gallery-modal__social{display:block;width:min(920px,100%);max-height:min(26dvh,240px);overflow:auto;margin:0 auto;padding:12px;border-radius:24px;background:rgba(8,15,30,.82);border:1px solid rgba(126,153,198,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);scrollbar-width:none;}
.gallery-modal__social .gallery-social-panel{display:grid;margin:0;padding:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
.gallery-modal__social .gallery-comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;}
.gallery-modal__social .gallery-comment-form .admin-input{min-height:52px;border-radius:18px;}
.gallery-modal__close{position:absolute;top:-18px;right:-18px;width:56px;height:56px;z-index:8;border-radius:999px;background:rgba(8,15,30,.96);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:1.8rem;box-shadow:0 18px 52px rgba(0,0,0,.42);}
.gallery-modal__nav{position:absolute;top:50%;transform:translateY(-50%);width:58px;height:58px;z-index:7;border-radius:999px;background:rgba(8,15,30,.88);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:2rem;box-shadow:0 18px 52px rgba(0,0,0,.38);}
.gallery-modal__nav.is-prev{left:-76px;}
.gallery-modal__nav.is-next{right:-76px;}

.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;max-height:none;padding:0;overflow:visible;}
.story-card{display:grid;gap:12px;padding:14px;border-radius:30px;border:1px solid rgba(126,153,198,.20);background:linear-gradient(180deg,rgba(10,18,35,.95),rgba(6,12,25,.92));box-shadow:0 22px 60px rgba(0,0,0,.24);overflow:hidden;}
.story-card:after,.story-tile:after{display:none;content:none;}
.story-card .custom-media-player{padding:0;border:0;background:transparent;border-radius:24px;overflow:hidden;}
.story-card .custom-media-player.is-video.is-compact .custom-media-player__media,.story-card>video,.story-card>img{display:block;width:100%;aspect-ratio:16/9;max-height:420px;object-fit:cover;border-radius:24px;background:#030711;}
.story-card .custom-media-player__controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;}
.story-card .custom-media-player__actions{margin-left:auto;display:flex;gap:8px;}
.story-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#cbd7ee;font-weight:800;text-shadow:none;}
.story-social-panel{display:grid;gap:10px;margin:0;padding:12px;border-radius:22px;background:rgba(8,15,30,.72);border:1px solid rgba(126,153,198,.22);backdrop-filter:none;-webkit-backdrop-filter:none;}
.story-comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;}
.story-comment-form .admin-input{min-height:52px;border-radius:18px;}
.story-card form:not(.story-comment-form):last-child{margin:0;}
.story-card form:not(.story-comment-form):last-child .site-btn{min-height:38px;padding:8px 13px;border-radius:999px;background:rgba(5,10,22,.72);border-color:rgba(255,255,255,.20);color:#fff;}
.stories-bar{display:flex;gap:14px;overflow:auto;padding:4px 2px 12px;scrollbar-width:none;}
.story-bubble{transition:transform .2s ease,filter .2s ease;}
.story-bubble:hover{transform:translateY(-2px);filter:saturate(1.08);}

@media(max-width:980px){
  .gallery-modal{padding:14px;}
  .gallery-modal__dialog{width:calc(100vw - 28px);max-height:calc(100dvh - 28px);border-radius:28px;padding:14px;}
  .gallery-modal__stage{max-height:calc(100dvh - 260px);}
  .gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__media{max-height:min(50dvh,520px);}
  .gallery-modal__nav{top:auto;bottom:14px;transform:none;width:48px;height:48px;}
  .gallery-modal__nav.is-prev{left:16px;}
  .gallery-modal__nav.is-next{right:16px;}
  .gallery-modal__close{top:10px;right:10px;width:46px;height:46px;}
}
@media(max-width:720px){
  .profile-gallery-grid,.story-grid{grid-template-columns:1fr;gap:14px;}
  .gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__controls{grid-template-columns:44px minmax(0,1fr);}
  .gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__actions{grid-column:1/-1;justify-content:flex-end;}
  .gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__timeline{grid-template-columns:42px minmax(0,1fr) 42px;}
  .gallery-modal__social .gallery-comment-form,.story-comment-form{grid-template-columns:1fr;}
}

/* Global feed / received gifts pages */
.page-hero-card{display:grid;gap:10px;margin-bottom:18px;}
.page-hero-card h1{margin:0;font-size:clamp(2.1rem,4vw,4.2rem);line-height:.98;letter-spacing:-.05em;}
.global-feed-page .feed-stack,.gifts-page .gift-list-full{display:grid;gap:18px;}
.global-feed-page .feed-head{align-items:center;}
.global-feed-page .feed-author{text-decoration:none;color:inherit;}
.global-feed-page .feed-actions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.received-gifts-page-list .gift-item{align-items:center;padding:16px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(126,153,198,.18);}
.received-gifts-page-list .gift-item img{width:72px;height:72px;object-fit:cover;border-radius:18px;}
.received-gifts-page-list .gift-item__body{min-width:0;}
.received-gifts-page-list .gift-delete-form{margin-left:auto;}
@media(max-width:720px){
  .received-gifts-page-list .gift-item{grid-template-columns:auto minmax(0,1fr);}
  .received-gifts-page-list .gift-delete-form{grid-column:1/-1;margin-left:0;}
}

/* 2026-05-25 emergency final fixes from live screenshots: profile gallery, modal, persistent audio */
.profile-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
  align-items:start;
}
.profile-gallery-grid .gallery-tile,
.profile-gallery-grid .gallery-tile--social{
  position:relative;
  display:grid;
  gap:10px;
  align-content:start;
  min-width:0;
  margin:0;
  padding:14px;
  border-radius:28px;
  border:1px solid rgba(126,153,198,.20);
  background:linear-gradient(180deg,rgba(10,18,35,.92),rgba(5,10,22,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.profile-gallery-grid .gallery-tile__preview{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#030711;
  aspect-ratio:4/3;
}
.profile-gallery-grid .gallery-tile__media,
.profile-gallery-grid .gallery-tile img,
.profile-gallery-grid .gallery-tile video{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:22px;
  background:#030711;
  transition:transform .25s ease,filter .25s ease;
}
.profile-gallery-grid .gallery-tile:hover .gallery-tile__media{transform:scale(1.035);filter:saturate(1.05)}
.profile-gallery-grid .gallery-tile__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin:auto;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(103,164,255,.92),rgba(121,227,210,.92));
  color:#031023;
  font-weight:900;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.profile-gallery-grid .gallery-social-panel{display:none}
.profile-gallery-grid figcaption{font-weight:800;color:#eef4ff;margin:0;line-height:1.35}
.profile-gallery-grid .gallery-tile-actions{position:absolute;right:14px;bottom:14px;margin:0;z-index:3}
.profile-gallery-grid .gallery-tile-actions .site-btn{min-height:38px;padding:8px 14px;border-radius:999px;background:rgba(4,8,18,.78);border-color:rgba(255,255,255,.20);color:#fff}
.gallery-modal{align-items:start;overflow:auto;-webkit-overflow-scrolling:touch;padding:clamp(12px,2vw,24px)}
.gallery-modal__dialog{
  width:min(1040px,calc(100vw - 44px));
  max-height:none;
  margin:0 auto 24px;
  padding:18px;
  border-radius:30px;
  overflow:visible;
}
.gallery-modal__stage{max-height:none;overflow:visible}
.gallery-modal__stage>img{max-height:min(62dvh,620px)}
.gallery-modal__stage .custom-media-player.gallery-modal-player{width:min(100%,960px);padding:12px;border-radius:28px;overflow:hidden}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__media{max-height:min(54dvh,560px);object-fit:contain}
.gallery-modal__social{max-height:min(28dvh,260px);overflow:auto}
.header-player-volume{
  display:grid;
  grid-template-columns:auto minmax(130px,1fr);
  align-items:center;
  gap:12px;
  width:min(100%,320px);
  max-width:320px;
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}
.header-player-volume input{min-width:130px;width:100%}
@media(max-width:720px){
  .profile-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .profile-gallery-grid .gallery-tile{padding:10px;border-radius:22px}
  .profile-gallery-grid .gallery-tile__preview,.profile-gallery-grid .gallery-tile__media{border-radius:18px}
  .gallery-modal{padding:10px}
  .gallery-modal__dialog{width:calc(100vw - 20px);padding:12px;border-radius:24px}
  .gallery-modal__stage>img{max-height:52dvh;border-radius:20px}
  .gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__media{max-height:46dvh}
  .gallery-modal__social{max-height:30dvh}
  .header-player-volume{grid-template-columns:1fr;gap:8px;width:100%;max-width:none}
}

/* ===== 2026-05-25 FINAL BUG FIX: Gallery + Premium Player ===== */

/* FIX 1: Gallery modal dialog min-height was stuck at 88vh from an earlier rule.
   The dialog should size to its content, not force a huge empty box. */
.gallery-modal__dialog {
  min-height: 0 !important;
}

/* FIX 2: Gallery modal stage — earlier rules left min-height:80vh in some cascade paths.
   Ensure the stage always sizes to content. */
.gallery-modal__stage {
  min-height: 0 !important;
}

/* FIX 3: Gallery grid — earlier rule used auto-fit (single item stretches full width).
   Enforce auto-fill at tablet+ so items stay compact. Mobile stays 1 column. */
@media (min-width: 721px) {
  .gallery-grid.profile-gallery-grid,
  .profile-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
}

/* FIX 4: Premium Player — header-player-now is a 2-col grid
   ('cover copy' / 'controls controls' / 'progress progress').
   The modes row has grid-area:modes which doesn't exist at >760px, so CSS falls back
   to auto-placement, putting modes in column 1 only (96px wide) instead of spanning both.
   Volume label auto-places in column 2 instead of a full row.
   Fix: force both to span all columns. */
.header-player-now .header-player-modes {
  grid-column: 1 / -1 !important;
  grid-area: unset !important;
}
.header-player-now .header-player-volume {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* FIX 5: Volume label text — the <label> is a grid container.
   Its text node child "Громкость" is an anonymous grid item in column 1 (auto).
   Ensure the text stays on one line and the slider gets remaining space. */
@media (min-width: 721px) {
  .header-player-volume {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 14px !important;
    white-space: nowrap !important;
  }
  .header-player-volume input[type="range"] {
    min-width: 100px !important;
    width: 100% !important;
    grid-column: 2 !important;
  }
}
.header-player-volume .header-player-volume-label,
.header-player-volume > span:first-child {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}

/* FIX 6: Premium player modes — at >760px the modes grid-area:modes falls back
   to auto-placement in first available cell (col 1 = 96px only).
   Ensure modes is visible and full-width. Already addressed above, but also reset grid-area
   for the modes container so it doesn't collide with named areas. */
.header-player-now .header-player-modes {
  width: 100% !important;
  min-width: 0 !important;
}

/* FIX 7: Gallery tile — ensure gallery-tile--social overflow allows
   the absolute-positioned gallery-tile-actions button to be visible.
   The delete button uses position:absolute and may clip at border-radius. */
.profile-gallery-grid .gallery-tile--social,
.profile-gallery-grid .gallery-tile {
  overflow: visible !important;
}
/* But keep the preview image clipped to its border-radius */
.profile-gallery-grid .gallery-tile__preview {
  overflow: hidden !important;
}

/* FIX 8: Gallery modal backdrop must stay behind the dialog close button
   which is position:absolute top:-18px right:-18px (outside the dialog).
   Ensure the backdrop doesn't intercept those clicks. */
.gallery-backdrop {
  z-index: 0 !important;
}
.gallery-modal__dialog {
  z-index: 1 !important;
}
.gallery-modal__close {
  z-index: 8 !important;
}
.gallery-modal__nav {
  z-index: 7 !important;
}

/* FIX 9: At >980px, nav buttons are at left:-76px which can go off-screen
   at medium viewport widths. Use a safer offset based on viewport. */
@media (min-width: 981px) {
  .gallery-modal__dialog {
    position: relative;
  }
  .gallery-modal__nav.is-prev {
    left: -68px;
  }
  .gallery-modal__nav.is-next {
    right: -68px;
  }
}

/* FIX 10: Premium player — update grid-template-areas at desktop to include modes+volume rows */
@media (min-width: 761px) {
  .header-player-now {
    grid-template-areas:
      'cover copy'
      'controls controls'
      'modes modes'
      'progress progress'
      'volume volume' !important;
  }
  .header-player-modes {
    grid-area: modes !important;
  }
  .header-player-volume {
    grid-area: volume !important;
  }
}

/* ===== END 2026-05-25 FINAL BUG FIX ===== */

/* ===== 2026-05-25 FINAL 10/10: header, premium player, gallery/social responsive layer ===== */
.site-header .container.header-inner,
.site-header .header-inner{
  box-sizing:border-box!important;
  /* 2026-08-19: было calc(100vw - 220px) — на 1280px шапка сжималась до
     1060px, то есть УЖЕ основного контейнера контента (1232px), и всё
     содержимое шапки толкалось в слишком узкую полосу. Поля теперь
     растут вместе с экраном: 40px на ноутбуках, 220px на широких. */
  width:min(1600px,calc(100vw - clamp(40px,8vw,220px)))!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(220px,.8fr) minmax(360px,1.35fr) auto!important;
  align-items:center!important;
  gap:clamp(16px,2.1vw,34px)!important;
  overflow:visible!important;
}
.site-header .brand{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  overflow:visible!important;
}
.site-header .brand img{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  border-radius:20px!important;
  object-fit:cover!important;
}
.site-header .brand-copy{display:grid!important;gap:3px!important;min-width:0!important;overflow:visible!important;}
.site-header .brand-copy strong{
  max-width:100%!important;
  font-size:clamp(18px,1.35vw,28px)!important;
  line-height:.98!important;
  letter-spacing:.14em!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.site-header .brand-copy small{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.site-header .site-nav{
  min-width:0!important;
  display:flex!important;
  position:static!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,1.8vw,28px)!important;
  width:auto!important;
  max-width:100%!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.site-header .site-nav a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:4px 6px!important;
  border-radius:12px!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.site-header .header-actions{
  justify-self:end!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  min-width:max-content!important;
  width:auto!important;
  overflow:visible!important;
}
.header-profile-btn{padding:0!important;overflow:hidden!important;}
.header-profile-avatar{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.header-player-now{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  grid-template-areas:
    "cover copy"
    "controls controls"
    "modes modes"
    "progress progress"
    "volume volume"
    "save save"!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  max-width:820px!important;
  min-width:0!important;
  overflow:hidden!important;
}
.header-player-cover{grid-area:cover!important;width:112px!important;height:112px!important;min-width:112px!important;}
.header-player-now-copy{grid-area:copy!important;min-width:0!important;overflow:hidden!important;}
.header-player-now-copy strong,
.header-player-now-copy span{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.header-player-controls{
  grid-area:controls!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  min-width:0!important;
}
.header-player-control{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  flex:0 0 56px!important;
  padding:0!important;
  overflow:hidden!important;
}
.header-player-modes{
  grid-area:modes!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.header-player-mode{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  padding:8px 10px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:#eef4ff!important;
}
.header-player-mode::before{flex:0 0 auto!important;}
.header-player-progress{grid-area:progress!important;width:100%!important;min-width:0!important;margin:0!important;}
.header-player-progress input{width:100%!important;min-width:0!important;}
.header-player-volume{
  grid-area:volume!important;
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.header-player-volume input{grid-column:auto!important;width:100%!important;min-width:120px!important;}
.header-player-save-form{grid-area:save!important;width:100%!important;margin:0!important;justify-content:flex-start!important;}
.header-player-control.is-play .play-eq,
.header-player-btn .header-player-mini-eq,
.player-button .player-activity{display:none!important;visibility:hidden!important;opacity:0!important;}
.profile-layout,
.profile-layout-extended,
.messenger-layout,
.notifications-layout{
  box-sizing:border-box!important;
  width:min(1500px,calc(100vw - 48px))!important;
  max-width:100%!important;
  margin-inline:auto!important;
}
.profile-layout,
.profile-layout-extended{
  display:grid!important;
  grid-template-columns:minmax(250px,330px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:24px!important;
}
.profile-sidebar{min-width:0!important;max-width:100%!important;overflow:auto!important;}
.profile-main{min-width:0!important;width:100%!important;}
.feed-compose-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,280px) auto!important;
  align-items:end!important;
  gap:14px!important;
}

.feed-upload-field{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;min-width:0!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;}
.feed-submit-wrap{min-width:0!important;}
.feed-submit-wrap .site-btn{white-space:nowrap!important;writing-mode:horizontal-tb!important;}
.feed-head,
.feed-head-actions,
.feed-actions-row,
.comment-actions,
.story-social-actions,
.gallery-social-actions,
.track-action-row,
.track-premium-actions{
  min-width:0!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
}
.like-details{max-width:100%!important;min-width:0!important;z-index:20!important;}
.like-details>summary{
  max-width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.like-details[open] .likers-list,
.like-details[open] .likers-summary{
  box-sizing:border-box!important;
  min-width:min(240px,86vw)!important;
  max-width:min(360px,86vw)!important;
  overflow:auto!important;
}
.gallery-modal[hidden]{display:none!important;}
.gallery-modal:not([hidden]){
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:clamp(10px,2vw,24px)!important;
}
.gallery-modal__dialog{
  box-sizing:border-box!important;
  width:min(1080px,calc(100vw - 32px))!important;
  max-width:100%!important;
  max-height:none!important;
  overflow:visible!important;
}
.gallery-modal__stage,
.gallery-modal__stage .custom-media-player,
.gallery-modal__stage img,
.gallery-modal__stage video{
  max-width:100%!important;
  min-width:0!important;
}
.gallery-modal__social,
.gallery-social-panel{
  box-sizing:border-box!important;
  max-width:100%!important;
  overflow:auto!important;
}
@media (max-width:1200px){
  .site-header .container.header-inner,
  .site-header .header-inner{width:min(100%,calc(100vw - 36px))!important;grid-template-columns:minmax(190px,.7fr) minmax(300px,1fr) auto!important;gap:14px!important;}
  .site-header .site-nav{gap:10px!important;}
}
@media (max-width:980px){
  .site-header .container.header-inner,
  .site-header .header-inner{width:calc(100vw - 20px)!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;}
  .site-header .site-nav{display:none!important;position:fixed!important;left:14px!important;right:14px!important;top:calc(env(safe-area-inset-top) + 102px)!important;grid-column:auto!important;width:auto!important;max-height:min(58vh,520px)!important;overflow:auto!important;padding:14px!important;border:1px solid rgba(126,153,198,.24)!important;border-radius:22px!important;background:rgba(6,12,24,.98)!important;box-shadow:0 24px 70px rgba(0,0,0,.42)!important;z-index:150!important;}
  .site-header .site-nav.is-open,
  body.menu-open .site-header .site-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .site-header .site-nav a{justify-content:flex-start!important;background:rgba(255,255,255,.035)!important;padding:11px 12px!important;}
  .site-header .header-actions{min-width:0!important;flex-wrap:wrap!important;gap:8px!important;}
  .profile-layout,.profile-layout-extended,.messenger-layout{width:calc(100vw - 20px)!important;grid-template-columns:1fr!important;gap:16px!important;}
  .profile-sidebar{position:static!important;max-height:none!important;}
  .feed-compose-row{grid-template-columns:1fr!important;}
}
@media (max-width:640px){
  .site-header .brand{grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important;}
  .site-header .brand img{width:52px!important;height:52px!important;min-width:52px!important;border-radius:16px!important;}
  .site-header .brand-copy strong{font-size:20px!important;letter-spacing:.1em!important;}
  .site-header .brand-copy small{display:none!important;}
  .site-header .header-actions{justify-content:flex-end!important;}
  .site-header .site-nav.is-open,
  body.menu-open .site-header .site-nav{grid-template-columns:1fr!important;}
  .header-player-now{grid-template-columns:1fr!important;grid-template-areas:"cover" "copy" "controls" "modes" "progress" "volume" "save"!important;justify-items:stretch!important;}
  .header-player-cover{width:92px!important;height:92px!important;min-width:92px!important;justify-self:start!important;}
  .header-player-controls{justify-content:flex-start!important;}
  .header-player-control{width:50px!important;height:50px!important;min-width:50px!important;flex-basis:50px!important;}
  .header-player-modes{grid-template-columns:1fr!important;}
  .header-player-mode{white-space:normal!important;line-height:1.15!important;}
  .header-player-volume{grid-template-columns:1fr!important;}
  .header-player-volume input{min-width:0!important;}
  .gallery-comment-form,.story-comment-form,.comment-form{grid-template-columns:1fr!important;}
  .like-details[open] .likers-list,
  .like-details[open] .likers-summary{position:fixed!important;left:10px!important;right:10px!important;bottom:84px!important;top:auto!important;width:auto!important;max-width:none!important;max-height:45vh!important;}
}
@media (max-width:420px){
  .site-header .brand-copy{display:none!important;}
  .site-header .brand{grid-template-columns:52px!important;}
}
/* ===== END 2026-05-25 FINAL 10/10 ===== */

/* ===== 2026-05-26 screenshot fixes: player, gallery, stories, likers ===== */
.header-player-control.is-play::before,
.header-player-control.is-play::after,
.promo-player-btn.is-play::before,
.promo-player-btn.is-play::after,
.header-player-btn::before,
.header-player-btn::after,
.player-button::before,
.player-button::after{content:none!important;display:none!important;opacity:0!important;visibility:hidden!important;}
.header-player-control.is-play .play-eq,
.promo-player-btn.is-play .play-eq,
.header-player-btn .header-player-mini-eq,
.player-button .player-activity{display:none!important;opacity:0!important;visibility:hidden!important;}
.header-player-control.is-play .icon-play,
.promo-player-btn.is-play .icon-play,
.header-player-btn .header-player-icon--play{display:flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;visibility:visible!important;}
.header-player-control.is-play .icon-pause,
.promo-player-btn.is-play .icon-pause,
.header-player-btn .header-player-icon--pause{display:none!important;opacity:0!important;visibility:hidden!important;}
.header-player-control.is-play.is-playing .icon-play,
.promo-player-btn.is-play.is-playing .icon-play,
.header-player-btn.is-playing .header-player-icon--play{display:none!important;opacity:0!important;visibility:hidden!important;}
.header-player-control.is-play.is-playing .icon-pause,
.promo-player-btn.is-play.is-playing .icon-pause,
.header-player-btn.is-playing .header-player-icon--pause{display:flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;visibility:visible!important;}
.header-player-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important;min-width:0!important;}
.header-player-mode{min-width:0!important;white-space:normal!important;line-height:1.12!important;text-align:center!important;overflow:hidden!important;}
.header-player-volume{max-width:100%!important;}
.header-player-volume input[type="range"]{width:100%!important;min-width:0!important;}
.gallery-modal:not([hidden]){z-index:220!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:clamp(12px,3vw,34px)!important;overflow:auto!important;background:rgba(2,7,18,.72)!important;}
.gallery-modal__dialog{position:relative!important;display:grid!important;gap:14px!important;width:min(1180px,calc(100vw - 34px))!important;max-height:none!important;padding:clamp(16px,2vw,28px)!important;border-radius:32px!important;overflow:visible!important;background:linear-gradient(180deg,rgba(8,15,30,.98),rgba(4,9,20,.98))!important;}
.gallery-modal__stage{display:grid!important;place-items:center!important;min-width:0!important;width:100%!important;}
.gallery-modal__stage>img{display:block!important;max-width:100%!important;max-height:min(72vh,820px)!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:24px!important;background:#02050d!important;}
.gallery-modal__stage .custom-media-player{width:min(980px,100%)!important;max-width:100%!important;}
.gallery-modal__stage video{max-width:100%!important;max-height:68vh!important;background:#000!important;}
.gallery-modal__caption{min-height:0!important;text-align:center!important;font-weight:900!important;}
.gallery-modal__social{width:min(860px,100%)!important;margin-inline:auto!important;padding:14px!important;border:1px solid rgba(126,153,198,.24)!important;border-radius:24px!important;background:rgba(10,17,32,.88)!important;overflow:visible!important;}
.gallery-comment-form,
.story-comment-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;width:100%!important;}
.gallery-comment-form .admin-input,
.story-comment-form .admin-input{min-height:52px!important;border-radius:18px!important;background:rgba(255,255,255,.045)!important;}
.admin-input.is-invalid{border-color:rgba(255,105,132,.78)!important;box-shadow:0 0 0 4px rgba(255,105,132,.12)!important;}
.gallery-comments-mini,
.story-social-panel{display:grid!important;gap:10px!important;}
.story-social-panel{position:relative!important;margin-top:12px!important;padding:14px!important;border:1px solid rgba(126,153,198,.22)!important;border-radius:22px!important;background:rgba(8,15,30,.82)!important;overflow:visible!important;}
.story-card .story-social-panel{position:relative!important;inset:auto!important;margin:12px!important;width:auto!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.story-comment-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;min-width:0!important;padding:10px 12px!important;border:1px solid rgba(126,153,198,.14)!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;color:var(--muted)!important;}
.story-comment-row>span{display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;}
.story-comment-row .comment-actions{justify-content:flex-end!important;min-width:max-content!important;}
.like-details{position:relative!important;display:inline-flex!important;align-items:center!important;max-width:100%!important;vertical-align:middle!important;}
.like-details>summary{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;max-width:100%!important;padding:8px 13px!important;list-style:none!important;border-radius:999px!important;white-space:nowrap!important;}
.like-details[open]{z-index:320!important;}
.like-details[open] .likers-list,
.like-details[open] .likers-summary,
.like-details[open]>span.small{position:absolute!important;right:0!important;left:auto!important;top:calc(100% + 8px)!important;z-index:330!important;display:grid!important;gap:8px!important;width:max-content!important;min-width:min(230px,84vw)!important;max-width:min(340px,84vw)!important;max-height:min(320px,55vh)!important;overflow:auto!important;padding:12px!important;border:1px solid rgba(126,153,198,.28)!important;border-radius:18px!important;background:rgba(7,13,27,.98)!important;box-shadow:0 28px 80px rgba(0,0,0,.52)!important;color:var(--text)!important;}
.like-details[open]>span.small{display:block!important;font-weight:800!important;}
.likers-list a{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;min-width:0!important;color:var(--text)!important;text-decoration:none!important;}
.likers-list img{width:34px!important;height:34px!important;border-radius:999px!important;object-fit:cover!important;}
.public-info-grid{grid-template-columns:minmax(0,1fr)!important;}
@media (max-width:980px){
  .site-header .container.header-inner,
  .site-header .header-inner{width:calc(100vw - 24px)!important;grid-template-columns:minmax(0,1fr)!important;padding:18px!important;border-radius:30px!important;overflow:hidden!important;}
  .site-header .brand{width:100%!important;grid-template-columns:58px minmax(0,1fr)!important;}
  .site-header .brand-copy{min-width:0!important;overflow:hidden!important;}
  .site-header .brand-copy strong{font-size:clamp(20px,7vw,28px)!important;letter-spacing:.08em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .site-header .header-actions{width:100%!important;min-width:0!important;justify-content:flex-end!important;flex-wrap:wrap!important;}
}
@media (max-width:760px){
  .header-player-now{grid-template-areas:"cover" "copy" "controls" "modes" "progress" "save"!important;}
  .header-player-volume{display:none!important;}
  .header-player-modes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
  .header-player-mode{min-height:38px!important;padding:7px 6px!important;font-size:.82rem!important;}
  .gallery-modal:not([hidden]){padding:12px 8px 90px!important;}
  .gallery-modal__dialog{width:calc(100vw - 16px)!important;padding:14px!important;border-radius:24px!important;}
  .gallery-modal__close{top:10px!important;right:10px!important;z-index:5!important;}
  .gallery-modal__stage>img{max-height:64vh!important;border-radius:18px!important;}
  .gallery-modal__stage video{max-height:44vh!important;}
  .gallery-modal__nav{position:fixed!important;top:50vh!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:230!important;}
  .gallery-modal__nav.is-prev{left:10px!important;}
  .gallery-modal__nav.is-next{right:10px!important;}
  .gallery-modal__social{padding:12px!important;border-radius:20px!important;overflow:visible!important;}
  .gallery-comment-form,
  .story-comment-form{grid-template-columns:1fr!important;}
  .story-comment-row{grid-template-columns:1fr!important;}
  .story-comment-row .comment-actions{justify-content:flex-start!important;min-width:0!important;}
  .like-details[open] .likers-list,
  .like-details[open] .likers-summary,
  .like-details[open]>span.small{position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:92px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:46vh!important;}
}
@media (max-width:520px){
  .site-header .header-actions :is(.header-icon-btn,.header-action-btn,.lang-btn,.lang-pill,.site-menu-toggle,.menu-toggle){width:54px!important;height:54px!important;min-width:54px!important;}
  .site-header .brand{grid-template-columns:50px minmax(0,1fr)!important;}
  .site-header .brand img{width:50px!important;height:50px!important;min-width:50px!important;}
}

/* ===== 2026-05-26 FINAL SCREENSHOT PASS ===== */
.site-header .site-nav a[href*="feed.php"],
.site-header .site-nav a[href*="gifts.php"]{display:none!important;}

/* Premium player mode buttons: one stable desktop/mobile layout on every page */
.header-player-now{
  grid-template-areas:"cover copy" "controls controls" "modes modes" "progress progress" "volume volume" "save save"!important;
  align-items:start!important;
}
.header-player-modes{
  grid-area:modes!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  margin:8px 0 4px!important;
  justify-self:start!important;
  align-items:stretch!important;
}
.header-player-mode{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:9px 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,153,198,.26)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  color:#dbe7ff!important;
  font-size:.92rem!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.16)!important;
}
.header-player-mode::before{
  display:inline-grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  color:currentColor!important;
  font-size:13px!important;
  line-height:1!important;
  content:'';
}
.header-player-mode[data-header-mode="repeat"]::before{content:'↻'!important;}
.header-player-mode[data-header-mode="shuffle"]::before{content:'⇄'!important;}
.header-player-mode[data-header-mode="sequential"]::before{content:'☰'!important;}
.header-player-mode.is-active{
  color:#06111f!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong))!important;
  box-shadow:0 16px 34px rgba(82,203,232,.22)!important;
}
.header-player-mode.is-active::before{background:rgba(7,17,31,.18)!important;}

/* Stories: background for metadata/social areas, scrollable comments, unclipped likers popup */
.story-grid{overflow:visible!important;align-items:start!important;}
.story-card{overflow:visible!important;isolation:isolate!important;}
.story-card .custom-media-player,
.story-card>img,
.story-card>video{overflow:hidden!important;}
.story-card__meta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:2px!important;
  padding:10px 12px!important;
  border:1px solid rgba(126,153,198,.24)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(10,18,35,.88),rgba(6,12,25,.82))!important;
  color:#edf5ff!important;
  font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.story-card__meta span{
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  white-space:nowrap!important;
}
.story-social-panel{
  display:grid!important;
  gap:10px!important;
  padding:14px!important;
  border:1px solid rgba(126,153,198,.24)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(10,18,35,.86),rgba(5,10,22,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:visible!important;
}
.story-comments-list,
.gallery-comments-mini{
  display:grid!important;
  gap:10px!important;
  max-height:min(230px,30dvh)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
}
.story-comment-row{
  min-width:0!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028))!important;
  border-color:rgba(126,153,198,.20)!important;
}
.story-comment-row>span{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;writing-mode:horizontal-tb!important;}
.story-card .like-details[open] .likers-list,
.story-card .like-details[open] .likers-summary,
.story-card .like-details[open]>span.small,
.gallery-modal .like-details[open] .likers-list,
.gallery-modal .like-details[open] .likers-summary,
.gallery-modal .like-details[open]>span.small{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:2147483600!important;
  width:min(360px,calc(100vw - 36px))!important;
  max-width:min(360px,calc(100vw - 36px))!important;
  min-width:0!important;
  max-height:min(420px,70dvh)!important;
  overflow:auto!important;
  padding:14px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(8,15,30,.98),rgba(4,9,20,.98))!important;
  border:1px solid rgba(126,153,198,.32)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.62)!important;
  color:#eef5ff!important;
}

/* Gallery grid: video tiles show a centered image-like play mark; modal keeps the real player */
.profile-gallery-grid .gallery-tile,
.gallery-grid .gallery-card{overflow:visible!important;}
.profile-gallery-grid .gallery-tile__preview,
.gallery-card[data-gallery-type="video"]{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#02050d!important;
}
.profile-gallery-grid .gallery-tile__preview.is-video .gallery-tile__media,
.profile-gallery-grid .gallery-tile__preview.is-video video,
.gallery-card[data-gallery-type="video"] video{
  pointer-events:none!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.profile-gallery-grid .gallery-tile__play,
.gallery-card[data-gallery-type="video"] .gallery-tile__play{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  place-items:center!important;
  width:70px!important;
  height:70px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(111,184,255,.88),rgba(121,227,210,.88))!important;
  color:#07111f!important;
  font-size:26px!important;
  font-weight:900!important;
  line-height:1!important;
  z-index:4!important;
  box-shadow:0 18px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35)!important;
  pointer-events:none!important;
}
.gallery-modal:not([hidden]){
  z-index:2147483000!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:clamp(12px,2.5vw,28px)!important;
  background:rgba(1,5,14,.78)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.gallery-modal__dialog{
  width:min(1120px,calc(100vw - 44px))!important;
  max-height:calc(100dvh - 34px)!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(0,auto)!important;
  align-content:start!important;
  gap:12px!important;
  padding:clamp(14px,2vw,24px)!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,rgba(8,15,30,.98),rgba(4,9,20,.98))!important;
}
.gallery-modal__stage{
  min-height:0!important;
  max-height:min(60dvh,650px)!important;
  overflow:hidden!important;
  border-radius:26px!important;
}
.gallery-modal__stage>img,
.gallery-modal__stage video,
.gallery-modal__stage .custom-media-player__media{
  max-height:min(58dvh,620px)!important;
  object-fit:contain!important;
}
.gallery-modal__stage .custom-media-player.gallery-modal-player{
  width:min(100%,980px)!important;
  max-width:100%!important;
  padding:12px!important;
  border-radius:26px!important;
}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__overlay{
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
}
.gallery-modal__stage .custom-media-player.gallery-modal-player .custom-media-player__overlay-icon{
  display:grid!important;
  place-items:center!important;
}
.gallery-modal__social{
  width:min(880px,100%)!important;
  max-height:min(30dvh,280px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin-inline:auto!important;
  overscroll-behavior:contain!important;
}

/* Biography videos are visually inside the Biography card, not as a separate outside row */
.biography-grid{grid-template-columns:minmax(0,1fr)!important;}
.bio-copy{max-width:min(1040px,100%)!important;width:100%!important;}
.bio-copy .bio-media{
  margin-top:24px!important;
  padding-top:22px!important;
  border-top:1px solid rgba(126,153,198,.20)!important;
}
.bio-copy .bio-media .video-grid,
.biography-grid .bio-media .video-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:16px!important;
  margin-top:0!important;
}
.bio-copy .bio-media .video-card,
.biography-grid .bio-media .video-card{
  margin:0!important;
  padding:10px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(10,18,35,.92),rgba(5,10,22,.94))!important;
  border:1px solid rgba(126,153,198,.18)!important;
}

@media (max-width:760px){
  .header-player-now{grid-template-columns:1fr!important;grid-template-areas:"cover" "copy" "controls" "modes" "progress" "save"!important;}
  .header-player-modes{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:none!important;gap:6px!important;}
  .header-player-mode{min-height:38px!important;padding:7px 5px!important;font-size:clamp(.68rem,2.7vw,.82rem)!important;gap:0!important;}
  .header-player-mode::before{display:none!important;content:none!important;}
  .header-player-volume{display:none!important;}
  .story-card__meta{align-items:flex-start!important;flex-wrap:wrap!important;}
  .story-comments-list,.gallery-comments-mini{max-height:min(210px,34dvh)!important;}
  .gallery-modal:not([hidden]){padding:10px 8px 86px!important;}
  .gallery-modal__dialog{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 96px)!important;border-radius:24px!important;padding:12px!important;}
  .gallery-modal__stage{max-height:48dvh!important;}
  .gallery-modal__stage>img,.gallery-modal__stage video,.gallery-modal__stage .custom-media-player__media{max-height:46dvh!important;}
  .gallery-modal__social{max-height:32dvh!important;}
}
/* ===== END 2026-05-26 FINAL SCREENSHOT PASS ===== */

/* ===== 2026-05-26 PROFILE MEDIA/MODAL STABILIZATION ===== */
.header-player-now .header-player-modes,
.header-player-modes {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 10px 0 6px !important;
  overflow: visible !important;
}

.header-player-now .header-player-mode,
.header-player-mode {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 132px !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

.header-player-mode::before {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: .98em !important;
  line-height: 1 !important;
}

.header-player-mode span {
  display: inline-block !important;
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body.story-viewer-open {
  overflow: hidden !important;
}

.story-grid,
.stories-grid,
.profile-section-stories .story-grid,
.profile-section-stories .stories-grid {
  max-height: none !important;
  overflow: visible !important;
}

.story-card .custom-media-player,
.story-card .story-video-shell,
.story-viewer__stage {
  position: relative !important;
}

.story-card .custom-media-player.is-video {
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #020617 !important;
}

.story-card .custom-media-player.is-video .custom-media-player__media {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  max-height: 360px !important;
  object-fit: cover !important;
  border-radius: 24px !important;
}

.story-card .custom-media-player.is-video .custom-media-player__overlay,
.story-video-overlay {
  position: absolute !important;
  inset: 0 0 54px 0 !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.28)) !important;
  color: #fff !important;
  cursor: pointer !important;
}

.story-card .custom-media-player.is-video .custom-media-player__overlay::before,
.story-video-overlay__icon,
.gallery-modal-player .custom-media-player__overlay::before {
  width: 66px !important;
  height: 66px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.72) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(12px) !important;
}

.story-video-overlay__icon {
  font-size: 0 !important;
}

.story-video-overlay__icon::before {
  content: "▶";
  margin-left: 4px;
  font-size: 1.4rem;
  line-height: 1;
}

.story-card .custom-media-player.is-playing .custom-media-player__overlay,
.story-viewer__stage.is-playing .story-video-overlay,
.story-video-overlay.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.story-viewer:not([hidden]) {
  overflow: hidden !important;
}

.story-viewer__dialog {
  max-height: calc(100dvh - 32px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.story-viewer__stage {
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 24px !important;
}

.story-viewer__stage video,
.story-viewer__stage img {
  width: 100% !important;
  max-height: calc(100dvh - 170px) !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  background: #020617 !important;
}

.gallery-modal[hidden],
.story-viewer[hidden] {
  display: none !important;
}

.gallery-modal:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 2vw, 24px) !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
}

.gallery-modal__dialog {
  position: relative !important;
  width: min(1160px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 !important;
  padding: clamp(18px, 2vw, 30px) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, auto) !important;
  gap: 14px !important;
  overflow: hidden !important;
  align-content: stretch !important;
}

.gallery-modal__stage {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.gallery-modal__stage > img,
.gallery-modal__stage .gallery-modal-player {
  width: min(100%, 980px) !important;
  max-height: min(58dvh, 650px) !important;
  object-fit: contain !important;
  border-radius: 24px !important;
}

.gallery-modal__stage .gallery-modal-player {
  position: relative !important;
  overflow: hidden !important;
  background: #020617 !important;
}

.gallery-modal__stage .gallery-modal-player .custom-media-player__media {
  width: 100% !important;
  max-height: min(58dvh, 650px) !important;
  object-fit: contain !important;
  border-radius: 24px !important;
  background: #020617 !important;
}

.gallery-modal__stage .gallery-modal-player .custom-media-player__overlay {
  position: absolute !important;
  inset: 12px 12px 86px 12px !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(2,6,23,.06), rgba(2,6,23,.26)) !important;
  color: #fff !important;
  cursor: pointer !important;
}

.gallery-modal__stage .gallery-modal-player.is-playing .custom-media-player__overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

.gallery-modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 12 !important;
  transform: none !important;
}

.gallery-modal__social {
  width: min(100%, 860px) !important;
  min-height: 0 !important;
  max-height: min(29dvh, 300px) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 24px !important;
}

.gallery-modal__social .gallery-social-panel {
  display: grid !important;
  gap: 14px !important;
  overflow: visible !important;
}

.gallery-modal__social .gallery-comment-form,
.gallery-comment-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.gallery-modal__social .gallery-comment-form input,
.gallery-comment-form input {
  min-width: 0 !important;
  width: 100% !important;
}

.gallery-modal__social .gallery-comments-mini,
.gallery-comments-mini {
  display: grid !important;
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
}

.gallery-modal__social .gallery-comment,
.gallery-comments-mini .gallery-comment {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 18px !important;
  background: rgba(15,23,42,.74) !important;
}

.like-details[open] .likers-list,
.like-details[open] .gallery-likers-list,
.like-details[open] .story-likers-list {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 430px) !important;
  max-height: min(70dvh, 460px) !important;
  overflow-y: auto !important;
  z-index: 2147483500 !important;
  padding: 18px 52px 18px 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  background: rgba(15,23,42,.98) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.48) !important;
}

.like-details[open] summary {
  position: relative !important;
  z-index: 2 !important;
}

.likers-popover-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  border-radius: 999px !important;
  background: rgba(30,41,59,.86) !important;
  color: #e5e7eb !important;
  cursor: pointer !important;
}

.likers-list__empty,
.gallery-likers-list__empty,
.story-likers-list__empty {
  display: block !important;
  color: #e5e7eb !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  .header-player-now .header-player-modes,
  .header-player-modes {
    justify-content: center !important;
    gap: 8px !important;
  }

  .header-player-now .header-player-mode,
  .header-player-mode {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: min(148px, 100%) !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    gap: 7px !important;
    font-size: .88rem !important;
  }

  .gallery-modal:not([hidden]) {
    padding: 10px !important;
    align-items: stretch !important;
  }

  .gallery-modal__dialog {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 14px !important;
    gap: 10px !important;
  }

  .gallery-modal__stage > img,
  .gallery-modal__stage .gallery-modal-player,
  .gallery-modal__stage .gallery-modal-player .custom-media-player__media {
    max-height: 46dvh !important;
  }

  .gallery-modal__social {
    max-height: 36dvh !important;
    padding: 12px !important;
  }

  .gallery-modal__social .gallery-comment-form,
  .gallery-comment-form {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .header-player-now .header-player-mode,
  .header-player-mode {
    flex-basis: 100% !important;
    min-width: 0 !important;
  }
}
/* ===== END 2026-05-26 PROFILE MEDIA/MODAL STABILIZATION ===== */

/* Keep generated play controls single-layered when older overlays already contain an icon. */
.story-card .custom-media-player.is-video .custom-media-player__overlay::before,
.gallery-modal__stage .gallery-modal-player .custom-media-player__overlay::before {
  content: none !important;
  display: none !important;
}

.story-card .custom-media-player.is-video .custom-media-player__overlay-icon,
.gallery-modal__stage .gallery-modal-player .custom-media-player__overlay-icon,
.story-video-overlay__icon {
  width: 66px !important;
  height: 66px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.72) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(12px) !important;
}

/* ===== 2026-05-26 FINAL INTERACTION FIXES ===== */
.header-player-now .header-player-modes,
.header-player-modes {
  grid-area: modes !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
  margin: 10px 0 6px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: visible !important;
}

.header-player-now .header-player-mode,
.header-player-mode {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(126,153,198,.30) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  color: #dbe7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.16) !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.header-player-mode::before {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.11) !important;
  color: currentColor !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.header-player-mode:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(126,231,218,.52) !important;
  background: linear-gradient(180deg, rgba(126,231,218,.14), rgba(122,165,255,.08)) !important;
  color: #f5fbff !important;
}

.header-player-mode:active {
  transform: translateY(0) scale(.98) !important;
}

.header-player-mode:focus-visible {
  outline: 3px solid rgba(126,231,218,.34) !important;
  outline-offset: 3px !important;
}

.header-player-mode.is-active {
  color: #06111f !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  box-shadow: 0 16px 34px rgba(82,203,232,.24) !important;
}

.header-player-mode.is-active::before {
  background: rgba(7,17,31,.18) !important;
}

.gallery-social-panel,
.story-social-panel,
.story-public-social-panel {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(126,153,198,.24) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(10,18,35,.88), rgba(5,10,22,.84)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
  overflow: visible !important;
}

.gallery-social-actions,
.story-social-actions,
.comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.gallery-comment-form,
.story-comment-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

.gallery-comment-form .admin-input,
.story-comment-form .admin-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 11px 14px !important;
  border-radius: 16px !important;
  line-height: 1.35 !important;
}

.story-comments-list,
.gallery-comments-mini,
.gallery-modal__social .gallery-comments-mini {
  display: grid !important;
  gap: 10px !important;
  max-height: min(236px, 32dvh) !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 2px 2px 0 !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.story-comments-list::-webkit-scrollbar,
.gallery-comments-mini::-webkit-scrollbar,
.gallery-modal__social::-webkit-scrollbar,
.likers-list::-webkit-scrollbar,
.gallery-likers-list::-webkit-scrollbar,
.story-likers-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.story-comment-row,
.gallery-comments-mini .story-comment-row,
.story-comments-list .story-comment-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(126,153,198,.18) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026)) !important;
  color: #d7e2f4 !important;
  font-size: .93rem !important;
  line-height: 1.4 !important;
}

.story-comment-row > span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.story-comment-row > span strong {
  color: #f3f8ff !important;
  font-weight: 900 !important;
}

.story-comment-row .comment-actions {
  justify-content: flex-end !important;
  min-width: max-content !important;
}

.gallery-modal__social {
  scrollbar-width: none !important;
}

.like-details {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  vertical-align: middle !important;
}

.like-details > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  max-width: 100% !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(126,153,198,.28) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  color: #e8f0ff !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  list-style: none !important;
  cursor: pointer !important;
}

.like-details > summary::-webkit-details-marker {
  display: none !important;
}

.like-details[open] {
  z-index: 2147483500 !important;
}

.like-details[open]::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483498 !important;
  background: rgba(1,5,14,.34) !important;
  pointer-events: none !important;
}

.like-details[open] .likers-list,
.like-details[open] .gallery-likers-list,
.like-details[open] .story-likers-list {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483501 !important;
  display: grid !important;
  gap: 10px !important;
  width: min(430px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(460px, 72dvh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 54px 18px 18px !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(10,18,35,.99), rgba(4,9,20,.99)) !important;
  color: #edf5ff !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.62) !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

.likers-list a,
.gallery-likers-list a,
.story-likers-list a {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 8px !important;
  border-radius: 14px !important;
  color: #edf5ff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.likers-list a:hover,
.gallery-likers-list a:hover,
.story-likers-list a:hover {
  background: rgba(126,231,218,.10) !important;
}

.likers-list img,
.gallery-likers-list img,
.story-likers-list img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

.likers-list a span,
.gallery-likers-list a span,
.story-likers-list a span,
.likers-list__empty {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.likers-popover-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(148,163,184,.26) !important;
  border-radius: 999px !important;
  background: rgba(30,41,59,.88) !important;
  color: #e5e7eb !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.story-viewer:not([hidden]) {
  display: grid !important;
  place-items: center !important;
  padding: clamp(10px, 2.4vw, 22px) !important;
  overflow: hidden !important;
}

.story-viewer__dialog {
  width: min(620px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.story-viewer__stage {
  min-height: 0 !important;
  max-height: calc(100dvh - 156px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #020617 !important;
}

.story-viewer__stage video,
.story-viewer__stage img {
  display: block !important;
  width: 100% !important;
  max-height: calc(100dvh - 172px) !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  .header-player-now .header-player-modes,
  .header-player-modes {
    max-width: none !important;
    gap: 6px !important;
  }

  .header-player-now .header-player-mode,
  .header-player-mode {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    font-size: .8rem !important;
  }

  .header-player-mode::before {
    flex-basis: 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 12px !important;
  }

  .gallery-comment-form,
  .story-comment-form {
    grid-template-columns: 1fr !important;
  }

  .gallery-comment-form .site-btn,
  .story-comment-form .site-btn {
    width: 100% !important;
  }

  .story-comment-row,
  .gallery-comments-mini .story-comment-row,
  .story-comments-list .story-comment-row {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    font-size: .9rem !important;
  }

  .story-comment-row .comment-actions {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .story-comments-list,
  .gallery-comments-mini,
  .gallery-modal__social .gallery-comments-mini {
    max-height: min(220px, 34dvh) !important;
  }

  .like-details[open] .likers-list,
  .like-details[open] .gallery-likers-list,
  .like-details[open] .story-likers-list {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(460px, 74dvh) !important;
    padding: 16px 50px 16px 14px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 390px) {
  .header-player-now .header-player-mode,
  .header-player-mode {
    padding: 0 6px !important;
    gap: 4px !important;
    font-size: .74rem !important;
  }
}
/* ===== END 2026-05-26 FINAL INTERACTION FIXES ===== */

/* ===== LESKOV v14 targeted layout fixes ===== */
.site-header,
.site-header .header-inner,
.site-header .header-actions,
.site-header .header-notice-wrap {
  overflow: visible !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2147481200 !important;
}

.site-header .header-inner {
  display: grid !important;
  grid-template-columns: minmax(178px, auto) minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: clamp(10px, 1.4vw, 22px) !important;
}

.site-header .brand {
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.site-header .brand img {
  flex: 0 0 auto !important;
}

.site-header .site-nav {
  /* 2026-08-19: `display:flex !important` жил здесь БЕЗ медиазапроса и
     стоял ПОЗЖЕ правила @media (max-width:980px){...display:none}. В
     результате на ширине ≤980px мобильное выпадающее меню
     (position:fixed) показывалось всегда — пункты «Главная/Мерч/…»
     висели поверх строки поиска даже при закрытом бургере.
     Объявление display убрано: видимостью управляют мобильные
     медиазапросы, а на десктопе .site-header .site-nav выше уже
     задаёт display:flex. */
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(3px, .55vw, 10px) !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.site-header .site-nav a {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
  padding-inline: clamp(7px, .72vw, 13px) !important;
  font-size: clamp(.82rem, .88vw, .98rem) !important;
  line-height: 1.1 !important;
}

.site-header .header-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: clamp(6px, .65vw, 10px) !important;
  width: auto !important;
  min-width: max-content !important;
}

.site-header .language-switcher {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(5px, .5vw, 8px) !important;
}

.site-header :is(.header-icon-btn, .lang-pill, .menu-toggle) {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.site-header .menu-toggle {
  display: none !important;
}

.header-notice-dropdown {
  box-sizing: border-box !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(70dvh, 560px) !important;
  overflow: auto !important;
  z-index: 2147481500 !important;
  scrollbar-width: none !important;
}

.header-notice-dropdown::-webkit-scrollbar {
  display: none !important;
}

body.header-player-open .site-header,
body:has(.header-player-panel:not([hidden])) .site-header {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.header-player-panel:not([hidden]),
body.header-player-open .header-player-panel {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147481000 !important;
  padding: calc(118px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)) !important;
  overflow: auto !important;
  background: rgba(5, 8, 17, .86) !important;
}

.header-player-panel:not([hidden]) .header-player-dialog {
  width: min(1120px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 142px - env(safe-area-inset-top)) !important;
  margin: 0 auto !important;
  overflow: auto !important;
}

.story-grid,
.profile-section-stories .story-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-height: none !important;
  overflow: visible !important;
}

.story-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.story-comments-list,
.story-social-panel .story-comments-list {
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.story-comments-list::-webkit-scrollbar,
.story-social-panel .story-comments-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.story-comment-form,
.gallery-modal__social .gallery-comment-form {
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.profile-gallery-grid .gallery-social-panel--modal-source,
.profile-gallery-grid .gallery-tile > .gallery-social-panel[hidden],
.profile-gallery-grid .gallery-tile > [data-gallery-social] {
  display: none !important;
}

.profile-gallery-grid .gallery-tile__preview {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
}

.profile-gallery-grid .gallery-tile__play,
.gallery-card[data-gallery-type="video"] .gallery-tile__play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.gallery-modal-native-video {
  display: block !important;
  width: min(100%, 980px) !important;
  max-height: min(68dvh, 700px) !important;
  margin-inline: auto !important;
  object-fit: contain !important;
  background: #000 !important;
  border-radius: clamp(16px, 2vw, 28px) !important;
}

.gallery-modal__social {
  display: grid !important;
  gap: 14px !important;
  width: min(920px, 100%) !important;
  max-height: min(34dvh, 340px) !important;
  overflow: auto !important;
  margin: 12px auto 0 !important;
  scrollbar-width: none !important;
}

.gallery-modal__social::-webkit-scrollbar,
.gallery-modal__social .gallery-comments-mini::-webkit-scrollbar {
  display: none !important;
}

.gallery-modal__social .gallery-social-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.gallery-modal__social .gallery-comments-mini {
  display: grid !important;
  gap: 12px !important;
  max-height: min(230px, 28dvh) !important;
  overflow: auto !important;
  margin-top: 2px !important;
  scrollbar-width: none !important;
}

.like-details[open] {
  z-index: 2147481800 !important;
}

.like-details[open]::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147481800 !important;
  /* 2026-06-14 — drop the full-screen backdrop-filter: a fixed blur scrim
     re-computes on every repaint (card hovers, the cover equalizer, etc.),
     which made the open "Кто лайкнул" popover flicker as the cursor moved.
     A solid dim layer reads the same and never repaints. */
  background: rgba(3, 7, 16, .82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.like-details[open] .likers-list,
.like-details[open] .gallery-likers-list,
.like-details[open] .story-likers-list {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147481801 !important;
  width: min(430px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(70dvh, 480px) !important;
  overflow: auto !important;
  margin: 0 !important;
  scrollbar-width: none !important;
}

.like-details[open] .likers-list::-webkit-scrollbar,
.like-details[open] .gallery-likers-list::-webkit-scrollbar,
.like-details[open] .story-likers-list::-webkit-scrollbar {
  display: none !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .site-header .header-inner {
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) max-content !important;
    gap: 8px !important;
  }

  .site-header .brand-copy strong {
    font-size: 20px !important;
    letter-spacing: .1em !important;
  }

  .site-header .brand-copy small {
    display: none !important;
  }

  .site-header :is(.header-icon-btn, .lang-pill) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 920px) {
  .site-header {
    z-index: 2147481200 !important;
  }

  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .site-header .brand {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .site-header .brand-copy {
    display: grid !important;
    min-width: 0 !important;
  }

  .site-header .brand-copy strong {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(24px, 7.2vw, 34px) !important;
    letter-spacing: .12em !important;
  }

  .site-header .brand-copy small {
    display: none !important;
  }

  .site-header .site-nav {
    display: none !important;
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: calc(154px + env(safe-area-inset-top)) !important;
    z-index: 2147481300 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid rgba(126, 153, 198, .28) !important;
    border-radius: 24px !important;
    background: rgba(6, 12, 26, .96) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .46) !important;
  }

  .site-header .site-nav.is-open,
  body.menu-open .site-header .site-nav {
    display: grid !important;
  }

  .site-header .site-nav a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-header .header-actions {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(36px, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .site-header .language-switcher {
    display: contents !important;
  }

  .site-header :is(.header-icon-btn, .lang-pill, .menu-toggle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(54px, 12vw) !important;
    height: min(54px, 12vw) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: clamp(.74rem, 3vw, .96rem) !important;
  }

  .site-header .header-player-btn {
    --leskov-btn-size: min(54px, 12vw) !important;
  }

  .site-header .menu-toggle {
    position: relative !important;
    margin: 0 !important;
  }

  .header-notice-wrap {
    position: static !important;
  }

  .header-notice-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(132px + env(safe-area-inset-top)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 154px - env(safe-area-inset-top)) !important;
  }

  .header-player-panel:not([hidden]),
  body.header-player-open .header-player-panel {
    padding: calc(188px + env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom)) !important;
    z-index: 2147481000 !important;
  }

  .header-player-panel:not([hidden]) .header-player-dialog {
    width: min(560px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 206px - env(safe-area-inset-top)) !important;
  }

  .story-grid,
  .profile-section-stories .story-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .gallery-modal-native-video {
    max-height: 46dvh !important;
    border-radius: 18px !important;
  }

  .gallery-modal__social {
    max-height: 34dvh !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .gallery-modal__social .gallery-comment-form,
  .story-comment-form {
    grid-template-columns: 1fr !important;
  }

  .home-event-reopen {
    left: 12px !important;
    right: 86px !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: clamp(.78rem, 3.6vw, .92rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 9998 !important;
  }

  .home-scroll-top,
  .scroll-top-btn {
    right: 16px !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 390px) {
  .site-header .header-actions {
    gap: 6px !important;
  }

  .site-header :is(.header-icon-btn, .lang-pill, .menu-toggle) {
    width: min(48px, 12vw) !important;
    height: min(48px, 12vw) !important;
  }
}
/* ===== END LESKOV v14 targeted layout fixes ===== */

/* ===== LESKOV v15 final mobile/modal fixes ===== */
@media (max-width: 920px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  .site-header .header-inner {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "brand" "actions" !important;
    gap: 12px !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  .site-header .brand {
    grid-area: brand !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 12px !important;
  }

  .site-header .brand img {
    width: clamp(50px, 13vw, 58px) !important;
    height: clamp(50px, 13vw, 58px) !important;
  }

  .site-header .brand-copy strong {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(28px, 8.8vw, 42px) !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
  }

  .site-header .brand-copy small {
    display: none !important;
  }

  .site-header .header-actions {
    --leskov-mobile-header-btn: clamp(40px, 10.2vw, 46px);
    grid-area: actions !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: clamp(4px, 1.2vw, 7px) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .site-header .language-switcher {
    display: contents !important;
  }

  .site-header .header-notice-wrap {
    position: static !important;
    width: var(--leskov-mobile-header-btn) !important;
    height: var(--leskov-mobile-header-btn) !important;
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .site-header :is(.header-icon-btn, .lang-pill, .menu-toggle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--leskov-mobile-header-btn) !important;
    height: var(--leskov-mobile-header-btn) !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    font-size: clamp(.72rem, 3vw, .92rem) !important;
  }

  .site-header .header-player-btn {
    --leskov-btn-size: var(--leskov-mobile-header-btn) !important;
  }

  .site-header :is(.header-icon-btn, .menu-toggle) svg {
    width: 46% !important;
    height: 46% !important;
  }

  .site-header .menu-toggle {
    position: relative !important;
    display: inline-flex !important;
  }

  .site-header .menu-toggle span {
    position: absolute !important;
    left: 50% !important;
    width: 22px !important;
    height: 2px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: center !important;
  }

  .site-header .menu-toggle span:nth-child(1) { top: calc(50% - 7px) !important; }
  .site-header .menu-toggle span:nth-child(2) { top: 50% !important; transform: translate(-50%, -50%) !important; }
  .site-header .menu-toggle span:nth-child(3) { top: calc(50% + 7px) !important; }
  .site-header .menu-toggle.is-open span:nth-child(1) { top: 50% !important; transform: translate(-50%, -50%) rotate(45deg) !important; }
  .site-header .menu-toggle.is-open span:nth-child(2) { top: 50% !important; transform: translate(-50%, -50%) !important; opacity: 0 !important; }
  .site-header .menu-toggle.is-open span:nth-child(3) { top: 50% !important; transform: translate(-50%, -50%) rotate(-45deg) !important; }

  .site-header .site-nav {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: calc(150px + env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - 170px - env(safe-area-inset-top)) !important;
  }

  .header-notice-dropdown {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: calc(146px + env(safe-area-inset-top)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 166px - env(safe-area-inset-top)) !important;
    box-sizing: border-box !important;
  }

  .header-player-panel:not([hidden]),
  body.header-player-open .header-player-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(126px + env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    z-index: 2147481000 !important;
  }

  .header-player-panel:not([hidden]) .header-player-dialog {
    width: min(560px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: auto !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  .header-player-panel:not([hidden]) .header-player-shell {
    max-height: inherit !important;
    overflow: auto !important;
  }
}

@media (max-width: 430px) {
  .site-header .header-inner {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 14px 12px !important;
    gap: 11px !important;
  }

  .site-header .brand {
    gap: 10px !important;
  }

  .site-header .header-actions {
    --leskov-mobile-header-btn: clamp(38px, 10.4vw, 43px);
    gap: 4px !important;
  }

  .site-header .brand-copy strong {
    font-size: clamp(27px, 8.6vw, 38px) !important;
    letter-spacing: .12em !important;
  }
}

@media (max-width: 370px) {
  .site-header .header-actions {
    --leskov-mobile-header-btn: 38px;
    gap: 3px !important;
  }

  .site-header .brand-copy strong {
    font-size: 26px !important;
  }
}

.story-viewer__dialog,
.gallery-modal__dialog {
  position: relative !important;
}

.story-viewer__nav {
  top: var(--story-nav-top, 50%) !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 16 !important;
}

.gallery-modal__nav {
  top: var(--gallery-nav-top, 50%) !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 16 !important;
}

.story-viewer__stage .story-video-overlay {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .story-viewer__nav {
    top: var(--story-nav-top, calc(52px + min(32dvh, 270px))) !important;
    width: 56px !important;
    height: 56px !important;
  }

  .story-viewer__nav.is-prev { left: 12px !important; }
  .story-viewer__nav.is-next { right: 12px !important; }

  .gallery-modal__nav {
    top: var(--gallery-nav-top, calc(16px + min(25dvh, 230px))) !important;
    width: 56px !important;
    height: 56px !important;
  }

  .gallery-modal__nav.is-prev { left: 10px !important; }
  .gallery-modal__nav.is-next { right: 10px !important; }
}

.like-details[open]::before {
  pointer-events: auto !important;
}

.like-details[open] .likers-list,
.like-details[open] .gallery-likers-list,
.like-details[open] .story-likers-list {
  box-sizing: border-box !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(72dvh, 480px) !important;
  padding: 18px 54px 18px 18px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  z-index: 2147483600 !important;
}

@media (max-width: 640px) {
  .like-details[open] .likers-list,
  .like-details[open] .gallery-likers-list,
  .like-details[open] .story-likers-list {
    top: 50% !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }
}
/* ===== END LESKOV v15 final mobile/modal fixes ===== */

/* ===== LESKOV v16 final stability fixes ===== */
#verification .verification-history{
  display:grid!important;
  gap:12px!important;
  width:100%!important;
  margin-top:16px!important;
}
#verification .verification-status-card{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding:16px 18px!important;
  border:1px solid rgba(126,153,198,.18)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;
}
#verification .verification-status-main{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px 14px!important;
  min-width:0!important;
}
#verification .verification-status-badge{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  line-height:1.22!important;
  font-weight:950!important;
  color:var(--text)!important;
}
#verification .verification-status-date{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  white-space:nowrap!important;
  word-break:normal!important;
  color:var(--muted)!important;
  font-weight:800!important;
}
#verification .verification-status-note{
  margin:0!important;
  max-width:100%!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  line-height:1.45!important;
}

@media(max-width:920px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  .site-header{overflow:visible!important;}
  .site-header .header-inner{
    width:min(100%,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "actions"!important;
    justify-items:stretch!important;
    align-items:center!important;
    gap:12px!important;
    padding:14px clamp(12px,3vw,18px) 16px!important;
    box-sizing:border-box!important;
    border-radius:clamp(24px,7vw,34px)!important;
  }
  .site-header .brand{
    grid-area:brand!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:clamp(10px,2.4vw,14px)!important;
  }
  body[data-user-auth="1"] .site-header .brand,
  body.app-shell .site-header .brand{
    display:flex!important;
    gap:clamp(10px,2.4vw,14px)!important;
    min-width:0!important;
  }
  .site-header .brand img{
    display:block!important;
    flex:0 0 auto!important;
    width:clamp(46px,11vw,58px)!important;
    height:clamp(46px,11vw,58px)!important;
    max-width:none!important;
  }
  body.app-shell .site-header .brand img,
  body[data-user-auth="1"] .site-header .brand img{display:block!important;}
  .site-header .brand-copy{display:block!important;min-width:0!important;max-width:calc(100vw - 104px)!important;}
  .site-header .brand-copy strong{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:clamp(30px,9.4vw,46px)!important;
    line-height:1!important;
    letter-spacing:.12em!important;
  }
  .site-header .brand-copy small{display:none!important;}
  .site-header .header-actions{
    --leskov-mobile-header-btn:clamp(38px,9.5vw,46px);
    grid-area:actions!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:clamp(6px,1.6vw,10px)!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .site-header .language-switcher{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    gap:inherit!important;
    min-width:0!important;
  }
  .site-header .header-notice-wrap{
    position:static!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 var(--leskov-mobile-header-btn)!important;
    width:var(--leskov-mobile-header-btn)!important;
    height:var(--leskov-mobile-header-btn)!important;
    min-width:0!important;
  }
  .site-header :is(.header-icon-btn,.lang-pill,.menu-toggle){
    flex:0 0 var(--leskov-mobile-header-btn)!important;
    width:var(--leskov-mobile-header-btn)!important;
    height:var(--leskov-mobile-header-btn)!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    font-size:clamp(.72rem,2.8vw,.9rem)!important;
  }
  .site-header .header-player-btn{--leskov-btn-size:var(--leskov-mobile-header-btn)!important;}
  .site-header :is(.header-icon-btn,.menu-toggle) svg{
    width:42%!important;
    height:42%!important;
    max-width:24px!important;
    max-height:24px!important;
  }
  .site-header .menu-toggle{position:relative!important;}
  .site-header .menu-toggle span{
    position:absolute!important;
    left:50%!important;
    width:42%!important;
    max-width:22px!important;
    height:2px!important;
    margin:0!important;
    transform:translateX(-50%)!important;
  }
  .site-header .menu-toggle span:nth-child(1){top:calc(50% - 7px)!important;}
  .site-header .menu-toggle span:nth-child(2){top:50%!important;transform:translate(-50%,-50%)!important;}
  .site-header .menu-toggle span:nth-child(3){top:calc(50% + 7px)!important;}
  .site-header .menu-toggle.is-open span:nth-child(1){top:50%!important;transform:translate(-50%,-50%) rotate(45deg)!important;}
  .site-header .menu-toggle.is-open span:nth-child(2){opacity:0!important;}
  .site-header .menu-toggle.is-open span:nth-child(3){top:50%!important;transform:translate(-50%,-50%) rotate(-45deg)!important;}
  .site-header .header-notice-badge{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    font-size:.68rem!important;
    top:-3px!important;
    right:-3px!important;
  }
  .site-header .site-nav{
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    top:calc(148px + env(safe-area-inset-top))!important;
    max-height:calc(100dvh - 168px - env(safe-area-inset-top))!important;
  }
  .header-notice-dropdown{
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    top:calc(146px + env(safe-area-inset-top))!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 166px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
  }
  .header-player-panel:not([hidden]),
  body.header-player-open .header-player-panel{
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:calc(18px + env(safe-area-inset-top)) 10px calc(78px + env(safe-area-inset-bottom))!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    z-index:2147481000!important;
  }
  .header-player-panel:not([hidden]) .header-player-dialog{
    width:min(560px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:auto!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    transform:none!important;
  }
}
@media(max-width:430px){
  .site-header .header-inner{
    width:min(100%,calc(100vw - 14px))!important;
    max-width:calc(100vw - 14px)!important;
    padding:13px 11px 15px!important;
    gap:11px!important;
  }
  .site-header .brand-copy strong{font-size:clamp(28px,9vw,38px)!important;letter-spacing:.105em!important;}
  .site-header .header-actions{--leskov-mobile-header-btn:clamp(38px,9.8vw,42px);gap:6px!important;}
}
@media(max-width:370px){
  .site-header .header-inner{padding-inline:10px!important;}
  .site-header .brand img{width:44px!important;height:44px!important;}
  .site-header .brand-copy strong{font-size:28px!important;letter-spacing:.09em!important;}
  .site-header .header-actions{--leskov-mobile-header-btn:36px;gap:5px!important;}
}

.home-event-modal[hidden]{display:none!important;}
.home-event-modal:not([hidden]){
  position:fixed!important;
  inset:0!important;
  z-index:2147480900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:calc(20px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  box-sizing:border-box!important;
}
.home-event-backdrop{position:fixed!important;inset:0!important;}
.home-event-card{
  position:relative!important;
  width:min(620px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px)!important;
  max-height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  margin:auto!important;
  padding:74px clamp(24px,4vw,42px) 30px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  box-sizing:border-box!important;
  border-radius:30px!important;
}
.home-event-close{
  position:absolute!important;
  top:18px!important;
  left:18px!important;
  right:auto!important;
  z-index:40!important;
}
.home-event-lang{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  z-index:39!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
}
.home-event-card::before{top:28px!important;right:154px!important;max-width:170px!important;overflow:hidden!important;}
.home-event-card h2{
  max-width:100%!important;
  margin:16px 0 12px!important;
  font-size:clamp(2.4rem,5.4vw,4.9rem)!important;
  line-height:.95!important;
  letter-spacing:0!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.home-event-card p{max-width:100%!important;line-height:1.5!important;}
.home-event-stats{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  max-width:100%!important;
}
.home-event-stats strong{white-space:nowrap!important;}
.home-event-button{width:100%!important;max-width:100%!important;text-align:center!important;}
.home-event-reopen{
  width:auto!important;
  max-width:min(380px,calc(100vw - 36px))!important;
  box-sizing:border-box!important;
  white-space:normal!important;
}
.home-event-modal:not([hidden]) + .home-event-reopen{display:none!important;}
body.header-player-open .home-event-reopen,
body.header-player-open .scroll-top-btn,
body.header-player-open .home-scroll-top{display:none!important;}
@media(max-width:640px){
  .home-event-modal:not([hidden]){
    align-items:flex-start!important;
    padding:calc(14px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(92px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))!important;
  }
  .home-event-card{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    padding:86px 18px 22px!important;
    border-radius:28px!important;
  }
  .home-event-close{top:18px!important;left:18px!important;width:46px!important;height:46px!important;}
  .home-event-lang{top:18px!important;right:16px!important;gap:4px!important;transform:none!important;}
  .home-event-lang button{min-width:36px!important;height:30px!important;padding:0 9px!important;font-size:.76rem!important;}
  .home-event-card::before{top:28px!important;right:120px!important;max-width:108px!important;letter-spacing:6px!important;opacity:.25!important;}
  .home-event-eyebrow{max-width:100%!important;}
  .home-event-card h2{font-size:clamp(2rem,11.2vw,3.25rem)!important;line-height:.98!important;}
  .home-event-stats{padding:14px!important;border-radius:20px!important;}
  .home-event-stats strong{font-size:clamp(2rem,11vw,3rem)!important;}
  .home-event-reopen{
    left:14px!important;
    right:auto!important;
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:min(280px,calc(100vw - 28px))!important;
    min-height:42px!important;
    padding:7px 12px!important;
    font-size:.82rem!important;
    z-index:160!important;
  }
}

.message-video-shell.is-native.is-circle{
  --circle-size:clamp(176px,42vw,236px)!important;
  width:var(--circle-size)!important;
  height:var(--circle-size)!important;
  min-width:0!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  border-radius:999px!important;
  margin-inline:auto!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-video.is-compact,
.message-video-shell.is-native.is-circle [data-media-player]{
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  border-radius:999px!important;
}
.message-video-shell.is-native.is-circle .custom-media-player__media,
.message-video-shell.is-native.is-circle video.custom-media-player__media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:999px!important;
}
.message-video-shell.is-native.is-circle .video-circle-timeline__center-btn{
  display:grid!important;
  place-items:center!important;
  opacity:.92!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.message-video-shell.is-native.is-circle .custom-media-player.is-playing:not(:hover):not(:focus-within):not(.show-mobile-controls) .video-circle-timeline__center-btn{
  opacity:0!important;
  pointer-events:none!important;
}
/* 2026-08-20: здесь стояло overflow:hidden!important на самой обёртке.
   Из-за него обрезалось всё, что выходит за круг, — а именно так и
   задумано кольцо записи (::after с inset:-6px) и подпись под кружком.
   Кольцо не появлялось вовсе, подпись была невидима. Скругление даёт
   само видео, обрезка обёртке не нужна. */
.video-circle-preview,
.video-circle-preview video{
  aspect-ratio:1/1!important;
  border-radius:999px!important;
  object-fit:cover!important;
}
.video-circle-preview video{ overflow:hidden!important; }
.call-overlay:not([hidden]){
  position:fixed!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  z-index:2147480800!important;
}
.call-overlay__card{
  width:min(980px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}
.call-video-grid{position:relative!important;overflow:hidden!important;}
.call-video-grid video{max-width:100%!important;object-fit:cover!important;}
@media(max-width:640px){
  .message-video-shell.is-native.is-circle{--circle-size:min(204px,58vw)!important;}
  .call-overlay:not([hidden]){align-items:center!important;padding:calc(10px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom))!important;}
  .call-overlay__card{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;border-radius:24px!important;}
  .call-controls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .call-controls .media-action-btn{width:100%!important;min-width:0!important;}
}
/* ===== END LESKOV v16 final stability fixes ===== */

/* ===== LESKOV v17 final targeted fixes ===== */
@media(max-width:920px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  .site-header{position:relative!important;z-index:260!important;overflow:visible!important;}
  .site-header .header-inner{
    width:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "actions"!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:26px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .site-header .brand{grid-area:brand!important;gap:10px!important;min-width:0!important;max-width:100%!important;}
  body[data-user-auth="1"] .site-header .brand,
  body.app-shell .site-header .brand{display:flex!important;}
  .site-header .brand img{width:40px!important;height:40px!important;flex:0 0 40px!important;}
  .site-header .brand-copy{display:block!important;min-width:0!important;max-width:calc(100vw - 82px)!important;}
  .site-header .brand-copy strong{font-size:clamp(24px,7.2vw,34px)!important;line-height:1!important;letter-spacing:.11em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .site-header .brand-copy small{display:none!important;}
  .site-header .header-actions{
    --leskov-mobile-header-btn:38px;
    grid-area:actions!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .site-header .header-notice-wrap,
  .site-header .language-switcher{display:flex!important;gap:7px!important;min-width:0!important;}
  .site-header .header-notice-wrap{position:static!important;flex:0 0 var(--leskov-mobile-header-btn)!important;width:var(--leskov-mobile-header-btn)!important;height:var(--leskov-mobile-header-btn)!important;}
  .site-header :is(.header-icon-btn,.lang-pill,.menu-toggle){
    flex:0 0 var(--leskov-mobile-header-btn)!important;
    width:var(--leskov-mobile-header-btn)!important;
    height:var(--leskov-mobile-header-btn)!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    font-size:.76rem!important;
    line-height:1!important;
  }
  .site-header .header-player-btn{--leskov-btn-size:var(--leskov-mobile-header-btn)!important;}
  .site-header :is(.header-icon-btn,.menu-toggle) svg{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;}
  .site-header .menu-toggle{position:relative!important;}
  .site-header .menu-toggle span{position:absolute!important;left:50%!important;width:18px!important;height:2px!important;margin:0!important;transform:translateX(-50%)!important;}
  .site-header .menu-toggle span:nth-child(1){top:calc(50% - 6px)!important;}
  .site-header .menu-toggle span:nth-child(2){top:50%!important;transform:translate(-50%,-50%)!important;}
  .site-header .menu-toggle span:nth-child(3){top:calc(50% + 6px)!important;}
  .site-header .header-notice-badge{width:16px!important;height:16px!important;min-width:16px!important;font-size:.62rem!important;top:-3px!important;right:-3px!important;}
  .site-header .site-nav,
  .header-notice-dropdown{top:calc(108px + env(safe-area-inset-top))!important;}
  .site-header .site-nav{max-height:calc(100dvh - 126px - env(safe-area-inset-top))!important;}
  .header-notice-dropdown{max-height:calc(100dvh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;}
  .header-player-panel:not([hidden]),
  body.header-player-open .header-player-panel{z-index:2147483400!important;}
}
@media(max-width:430px){
  .site-header .header-inner{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:11px!important;gap:9px!important;border-radius:24px!important;}
  .site-header .brand img{width:38px!important;height:38px!important;flex-basis:38px!important;}
  .site-header .brand-copy strong{font-size:clamp(23px,7.5vw,31px)!important;letter-spacing:.095em!important;}
  .site-header .header-actions{--leskov-mobile-header-btn:36px;gap:7px!important;}
  .site-header :is(.header-icon-btn,.menu-toggle) svg{width:17px!important;height:17px!important;}
}
@media(max-width:370px){
  .site-header .brand img{width:34px!important;height:34px!important;flex-basis:34px!important;}
  .site-header .brand-copy strong{font-size:22px!important;letter-spacing:.08em!important;}
  .site-header .header-actions{--leskov-mobile-header-btn:34px;gap:6px!important;}
}

.home-event-modal:not([hidden]){
  z-index:2147483600!important;
  align-items:center!important;
  padding:calc(18px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))!important;
}
.home-event-card{
  max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  transform:none!important;
}
@media(max-width:640px){
  .home-event-modal:not([hidden]){
    align-items:center!important;
    padding:calc(12px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(78px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))!important;
  }
  .home-event-card{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    padding:76px 18px 22px!important;
  }
}

.gallery-modal__dialog{
  grid-template-rows:minmax(0,auto) auto minmax(176px,32dvh)!important;
}
.gallery-modal__stage{
  max-height:min(56dvh,620px)!important;
}
.gallery-modal-native-video{
  cursor:pointer!important;
}
.gallery-modal__social{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  min-height:176px!important;
  max-height:min(34dvh,340px)!important;
  overflow:hidden!important;
}
.gallery-modal__social .gallery-social-panel{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  min-height:0!important;
  height:100%!important;
}
.gallery-modal__social .gallery-social-actions,
.story-social-panel .story-social-actions{
  flex:0 0 auto!important;
}
.gallery-modal__social .gallery-comment-form,
.story-comment-form{
  flex:0 0 auto!important;
}
.gallery-modal__social .gallery-comments-mini,
.story-comments-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:none!important;
}
.gallery-modal__social .gallery-comments-mini::-webkit-scrollbar,
.story-comments-list::-webkit-scrollbar{width:0!important;height:0!important;}
@media(max-width:760px){
  .gallery-modal__dialog{
    grid-template-rows:minmax(0,auto) auto minmax(220px,38dvh)!important;
  }
  .gallery-modal__stage{max-height:42dvh!important;}
  .gallery-modal__stage > img,
  .gallery-modal__stage video,
  .gallery-modal__stage .gallery-modal-player,
  .gallery-modal__stage .gallery-modal-player .custom-media-player__media{max-height:42dvh!important;}
  .gallery-modal__social{min-height:220px!important;max-height:38dvh!important;}
}

.like-details:not([open])::before{display:none!important;content:none!important;}
.like-details:not([open]) .likers-list,
.like-details:not([open]) .gallery-likers-list,
.like-details:not([open]) .story-likers-list{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.like-details:hover:not([open]) .likers-list,
.like-details:hover:not([open]) .gallery-likers-list,
.like-details:hover:not([open]) .story-likers-list{
  display:none!important;
}

.story-viewer__stage video,
.story-viewer__stage img{
  object-fit:contain!important;
  max-width:100%!important;
  max-height:min(62dvh,640px)!important;
}
.story-viewer__stage video{cursor:pointer!important;}
.story-viewer__nav,
.gallery-modal__nav{
  top:var(--story-nav-top,var(--gallery-nav-top,50%))!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
}
.gallery-modal__nav{top:var(--gallery-nav-top,50%)!important;}
@media(max-width:760px){
  .story-viewer__nav,
  .gallery-modal__nav{
    width:48px!important;
    height:48px!important;
  }
}

input[type="date"].admin-input{
  color-scheme:dark;
  min-width:0!important;
}

.gallery-modal:not([hidden]),
.story-viewer:not([hidden]){
  z-index:2147483000!important;
}
body.header-player-open .site-header,
body:has(.header-player-panel:not([hidden])) .site-header{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  filter:none!important;
}
.header-player-panel[hidden]{
  display:none!important;
}
/* ===== END LESKOV v17 final targeted fixes ===== */

/* ===== LESKOV v19 final shared responsive/modal safeguards ===== */
html,body{max-width:100%;overflow-x:hidden!important;}
@media(max-width:860px){
  body.header-player-open .site-header,
  body:has(.header-player-panel:not([hidden])) .site-header{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;position:sticky!important;top:0!important;z-index:2147483500!important;}
  .site-header .brand img{width:56px!important;height:56px!important;flex:0 0 56px!important;}
  .site-header .header-icon-btn,.site-header .header-player-btn,.site-header .menu-toggle{width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;}
  .site-header .header-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important;max-width:100%!important;overflow:visible!important;}
  .header-player-panel:not([hidden]),body.header-player-open .header-player-panel{z-index:2147483400!important;}
}
@media(max-width:430px){.site-header .brand img{width:52px!important;height:52px!important;flex-basis:52px!important}.site-header .header-icon-btn,.site-header .header-player-btn,.site-header .menu-toggle{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important}}
.gallery-tile__play{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;}
.gallery-tile > .gallery-social-panel[data-gallery-social]{display:none!important;}
.gallery-modal__social .gallery-social-panel[data-gallery-social]{display:flex!important;}
.like-details:not([open]) .likers-list,.like-details:not([open]) .gallery-likers-list,.like-details:not([open]) .story-likers-list,.like-details:not([open]) .likers-summary,.like-details:hover:not([open]) .likers-list,.like-details:hover:not([open]) .gallery-likers-list,.like-details:hover:not([open]) .story-likers-list,.like-details:hover:not([open]) .likers-summary{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;animation:none!important;transform:none!important;}
/* ===== END LESKOV v19 final shared safeguards ===== */

/* ===== LESKOV v20: all screenshot fixes ===== */

/* 1. HEADER MOBILE — иконки в одну строку без переноса */
@media(max-width:860px){
  .site-header .container.header-inner,
  .site-header .header-inner{
    display:grid!important;
    grid-template-rows:auto auto!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px 14px!important;
    border-radius:26px!important;
    width:calc(100vw - 20px)!important;
    overflow:hidden!important;
  }
  .site-header .brand{
    grid-row:1!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
  }
  .site-header .header-actions{
    grid-row:2!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    overflow:visible!important;
    min-width:0!important;
  }
  .site-header .header-actions .header-icon-btn,
  .site-header .header-actions .header-player-btn,
  .site-header .header-actions .header-notice-wrap,
  .site-header .header-actions .header-profile-btn,
  .site-header .header-actions .menu-toggle,
  .site-header .header-actions .lang-btn,
  .site-header .header-actions .lang-pill,
  .site-header .header-actions .site-menu-toggle{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    flex:0 0 42px!important;
    font-size:.9rem!important;
  }
  .site-header .brand img{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
  }
}
@media(max-width:520px){
  .site-header .header-actions .header-icon-btn,
  .site-header .header-actions .header-player-btn,
  .site-header .header-actions .header-notice-wrap,
  .site-header .header-actions .header-profile-btn,
  .site-header .header-actions .menu-toggle,
  .site-header .header-actions .lang-btn,
  .site-header .header-actions .lang-pill,
  .site-header .header-actions .site-menu-toggle{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    flex:0 0 38px!important;
  }
  .site-header .header-actions{gap:5px!important;}
}
@media(max-width:390px){
  .site-header .header-actions .header-icon-btn,
  .site-header .header-actions .header-player-btn,
  .site-header .header-actions .header-notice-wrap,
  .site-header .header-actions .header-profile-btn,
  .site-header .header-actions .menu-toggle,
  .site-header .header-actions .lang-btn,
  .site-header .header-actions .lang-pill,
  .site-header .header-actions .site-menu-toggle{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    flex:0 0 34px!important;
    font-size:.8rem!important;
  }
  .site-header .header-actions{gap:4px!important;}
}

/* 2. GALLERY MOBILE — стрелки внутри границ */
@media(max-width:760px){
  .gallery-modal:not([hidden]){
    padding:8px 8px 80px!important;
    align-items:flex-start!important;
  }
  .gallery-modal__dialog{
    position:relative!important;
    width:calc(100vw - 16px)!important;
    padding:52px 14px 14px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .gallery-modal__close{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    width:40px!important;
    height:40px!important;
    z-index:10!important;
  }
  .gallery-modal__nav{
    position:absolute!important;
    top:auto!important;
    bottom:14px!important;
    transform:none!important;
    width:44px!important;
    height:44px!important;
    z-index:10!important;
  }
  .gallery-modal__nav.is-prev{
    left:14px!important;
    right:auto!important;
  }
  .gallery-modal__nav.is-next{
    right:14px!important;
    left:auto!important;
  }
  .gallery-modal__stage>img{
    max-height:55vh!important;
    border-radius:14px!important;
  }
  .gallery-modal__stage video{
    max-height:45vh!important;
    border-radius:14px!important;
  }
}

/* 4. VIDEO CALL — крутой CSS */
.call-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483600!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
}
.call-overlay__backdrop{
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(135deg,rgba(3,8,22,.92) 0%,rgba(8,18,40,.96) 100%)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.call-overlay__card{
  position:relative!important;
  z-index:1!important;
  width:min(1000px,100%)!important;
  padding:28px!important;
  border-radius:36px!important;
  border:1px solid rgba(126,153,198,.22)!important;
  background:linear-gradient(160deg,rgba(10,20,44,.98) 0%,rgba(6,12,28,.99) 100%)!important;
  box-shadow:0 60px 160px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08)!important;
  max-height:min(96vh,980px)!important;
  overflow:auto!important;
}
.call-overlay__state{
  font-size:.85rem!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:rgba(160,190,255,.7)!important;
  margin-bottom:18px!important;
}
.call-overlay__peer{
  display:flex!important;
  gap:14px!important;
  align-items:center!important;
  margin-bottom:20px!important;
}
.call-overlay__peer img{
  width:56px!important;
  height:56px!important;
  border-radius:50%!important;
  border:2px solid rgba(126,153,198,.35)!important;
  object-fit:cover!important;
  box-shadow:0 0 0 4px rgba(100,150,255,.12)!important;
}
.call-overlay__peer strong{font-size:1.15rem!important;font-weight:900!important;}
.call-overlay__peer #callDurationLabel{
  font-size:.85rem!important;
  color:rgba(160,190,255,.65)!important;
  margin:0!important;
  font-variant-numeric:tabular-nums!important;
}
/* 2026-07-09 NEUTRALIZED overlay-era call grid (2-col grid + shared video
   border/shadow + bare "#localCallVideo" sizing). Fought the flex self-view and
   fed the flicker cascade. Authoritative layout is at the end of homepage.css.
   Only a neutral bottom margin + remote-video min-height are kept. */
.call-video-grid{
  margin-bottom:20px!important;
}
#remoteCallVideo{min-height:300px!important;max-height:62vh!important;}
.call-controls{
  display:flex!important;
  gap:10px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
}
.call-controls .media-action-btn{
  flex:1 1 auto!important;
  min-width:140px!important;
  max-width:200px!important;
  justify-content:center!important;
  border-radius:18px!important;
  font-weight:800!important;
  padding:13px 16px!important;
  transition:transform .12s,box-shadow .12s!important;
}
.call-controls .media-action-btn:hover{transform:translateY(-2px)!important;box-shadow:0 10px 28px rgba(0,0,0,.3)!important;}
.call-controls .site-btn.danger{
  background:linear-gradient(135deg,#e03050,#c01838)!important;
  border-color:#e03050!important;
  box-shadow:0 8px 24px rgba(192,24,56,.4)!important;
}
.incoming-call-modal__dialog{
  border-radius:32px!important;
  padding:28px!important;
  background:linear-gradient(160deg,rgba(10,20,44,.99),rgba(6,12,28,.99))!important;
  border:1px solid rgba(126,153,198,.2)!important;
  box-shadow:0 60px 140px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.incoming-call-modal__avatar img{
  width:80px!important;
  height:80px!important;
  border-radius:50%!important;
  border:3px solid rgba(100,150,255,.35)!important;
  box-shadow:0 0 0 6px rgba(80,120,255,.1)!important;
}
.incoming-call-modal__actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin-top:18px!important;
}
.incoming-call-modal__actions .site-btn{border-radius:16px!important;font-weight:900!important;}
@media(max-width:820px){
  /* self-view sizing removed 2026-07-09 (now in homepage.css flex block) */
  .call-controls .media-action-btn{min-width:calc(50% - 8px)!important;}
}
@media(max-width:640px){
  .call-overlay{padding:10px!important;align-items:stretch!important;}
  .call-overlay__card{padding:18px!important;border-radius:26px!important;display:flex!important;flex-direction:column!important;}
  #remoteCallVideo{min-height:220px!important;max-height:44vh!important;}
  #localCallVideo{max-width:min(42vw,140px)!important;max-height:110px!important;}
  .call-controls .media-action-btn{min-width:calc(50% - 6px)!important;padding:11px 10px!important;}
}

/* 6. GALLERY VIDEO MODAL — нормальный размер видео + комментарии */
.gallery-modal__stage .custom-media-player.gallery-modal-player{
  width:100%!important;
  max-width:100%!important;
}
.gallery-modal__stage video{
  max-width:100%!important;
  max-height:65vh!important;
  width:100%!important;
  border-radius:18px!important;
  background:#000!important;
  display:block!important;
  object-fit:contain!important;
}
.gallery-modal__social{
  display:block!important;
}
.gallery-modal__social:not([hidden]){
  display:block!important;
}
.gallery-modal__social .gallery-social-panel{
  display:grid!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.gallery-modal__social .gallery-comment-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
}
.gallery-modal__social .gallery-comments-mini{
  display:grid!important;
  gap:8px!important;
  margin-top:10px!important;
}

/* ===== END LESKOV v20 ===== */

/* 2026-06-10 — profile bookmarks */
.leskov-bookmarks-section{display:grid;gap:16px}
.leskov-bookmarks-list{display:grid;gap:12px}
.leskov-bookmark-card{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.035)}
.leskov-bookmark-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.leskov-bookmark-card__author{display:flex;align-items:center;gap:10px;min-width:0}
.leskov-bookmark-card__author img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--accent),var(--accent-strong))}
.leskov-bookmark-card__body{color:var(--text);line-height:1.5;word-break:break-word}
.leskov-bookmark-card__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* 2026-06-10 — unified notifications and draft heading */
.toast-host{
  pointer-events:none;
  z-index:2147482500;
}
.toast-notice{
  pointer-events:auto;
  border-color:rgba(126,153,198,.22);
}
.toast-notice.is-success,
.toast-notice.is-friends{
  border-color:rgba(121,227,210,.42);
  box-shadow:0 18px 42px rgba(121,227,210,.1),0 18px 38px rgba(0,0,0,.34);
}
.toast-notice.is-error{
  border-color:rgba(255,122,146,.48);
  box-shadow:0 18px 42px rgba(255,122,146,.1),0 18px 38px rgba(0,0,0,.34);
}
.toast-notice.is-warning{
  border-color:rgba(255,212,122,.46);
}
.toast-notice.is-info,
.toast-notice.is-default{
  border-color:rgba(122,165,255,.38);
}
.leskov-drafts-section .section-head h2{
  display:flex;
  align-items:center;
  gap:12px;
}
.drafts-title-icon{
  display:inline-grid;
  place-items:center;
  flex:0 0 58px;
  width:58px;
  height:58px;
  border-radius:18px;
  color:#94e6dc;
  background:linear-gradient(145deg,rgba(122,165,255,.18),rgba(121,227,210,.14));
  border:1px solid rgba(121,227,210,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 38px rgba(20,38,70,.22);
}
.drafts-title-icon svg{
  width:34px;
  height:34px;
  fill:currentColor;
}

/* 2026-06-10 — unified flash/toast styling and 7s dismissal */
.toast-host,[data-leskov-toast-host],[data-toast-host]{position:fixed;top:18px;right:18px;z-index:2147482500;display:grid;gap:10px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.toast-notice{pointer-events:auto;display:grid;gap:5px;padding:14px 16px;border-radius:18px;border:1px solid rgba(126,153,198,.24);background:rgba(9,17,33,.96);color:#eef4ff;text-decoration:none;box-shadow:0 20px 55px rgba(0,0,0,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translateY(-12px);opacity:0;transition:opacity .28s ease,transform .28s ease,border-color .28s ease}
.toast-notice.is-visible{opacity:1;transform:translateY(0)}
.flash{position:relative;display:block;margin:0 0 18px;padding:14px 18px;border:1px solid rgba(121,227,210,.35);border-radius:18px;background:linear-gradient(180deg,rgba(121,227,210,.12),rgba(121,227,210,.055));color:var(--text);box-shadow:0 16px 38px rgba(0,0,0,.18);transition:opacity .32s ease,transform .32s ease,max-height .38s ease,margin .32s ease,padding .32s ease;cursor:pointer}
.flash::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent-2);transform:translateY(-50%);box-shadow:0 0 0 5px rgba(121,227,210,.12)}
.flash{padding-left:34px}
.flash.error{border-color:rgba(255,122,146,.42);background:linear-gradient(180deg,rgba(255,122,146,.13),rgba(255,122,146,.055))}
.flash.error::before{background:#ff7a92;box-shadow:0 0 0 5px rgba(255,122,146,.12)}
.flash.is-dismissing{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;overflow:hidden!important;border-width:0!important}
@media (max-width:620px){.toast-host,[data-leskov-toast-host],[data-toast-host]{left:14px;right:14px;top:14px;width:auto}}

/* 2026-06-10 — custom video player fullscreen/click fixes */
.custom-media-player.is-video.is-fullscreen-active .custom-media-player__controls,.custom-media-player.is-video.is-fullscreen-active .custom-media-player__overlay{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.custom-media-player.is-video:fullscreen{width:100vw;height:100vh;max-width:none;max-height:none;background:#000;display:grid;place-items:center;padding:0!important;border-radius:0!important}
.custom-media-player.is-video:fullscreen .custom-media-player__media{width:100%;height:100%;max-height:none!important;object-fit:contain;border-radius:0!important}
.custom-media-player.is-video:fullscreen .custom-media-player__controls{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));}

/* 2026-06-10 profile/saved/global-feed layout fixes */
.profile-layout-single{
  grid-template-columns:minmax(0,1fr)!important;
  max-width:1280px!important;
  margin-inline:auto!important;
}
.profile-layout-single .profile-topbar,
.profile-layout-single .profile-main{
  grid-column:1/-1!important;
  width:min(1180px,100%)!important;
  margin-inline:auto!important;
  min-width:0!important;
}
.saved-layout .surface-card{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.saved-layout .section-head h1,
.saved-layout .section-head h2,
.saved-layout .page-hero-card h1{
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
.feed-comments{display:grid;gap:10px;margin:12px 0 10px;padding-top:10px;border-top:1px solid rgba(126,153,198,.16)}
.feed-comment{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(126,153,198,.12)}
.feed-comment.is-reply{margin-left:22px;background:rgba(126,231,218,.035)}
.feed-comment__avatar img{width:34px;height:34px;border-radius:999px;object-fit:cover;border:1px solid rgba(126,153,198,.28)}
.feed-comment__body{min-width:0;display:grid;gap:6px}
.feed-comment__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text)}
.feed-comment__head span{color:var(--muted);font-weight:700;font-size:.82rem}
.feed-comment__text{color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.feed-comment__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feed-comment__replies{display:grid;gap:8px;margin-top:8px}
@media(max-width:640px){.feed-comment.is-reply{margin-left:8px}.feed-comment{grid-template-columns:30px minmax(0,1fr);padding:9px}.feed-comment__avatar img{width:30px;height:30px}}

/* Empty public gallery should not render a giant broken placeholder */
#gallery-public .surface-card,
#gallery-public .leskov-gallery{overflow:hidden!important}
#gallery-public .leskov-empty-state,
#gallery-public .empty-state,
.public-gallery-card .leskov-empty-state,
.public-gallery-card .empty-state{
  min-height:220px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  padding:24px!important;
}
#gallery-public .leskov-empty-state__icon,
#gallery-public .empty-state__icon,
.public-gallery-card .leskov-empty-state__icon,
.public-gallery-card .empty-state__icon{
  width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important;
}
#gallery-public .leskov-empty-state svg,
#gallery-public .empty-state svg,
.public-gallery-card .leskov-empty-state svg,
.public-gallery-card .empty-state svg{
  background:#f5f7fb; width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;
}
.like-details{position:relative!important}
.like-details:not([open]) > :not(summary){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.like-details[open] > :not(summary){pointer-events:auto!important}

/* 2026-06-10 v3 — stable likers popup near trigger and no arbitrary media click side-effects */
.like-details[open] .likers-list,
.like-details[open] .gallery-likers-list,
.like-details[open] .story-likers-list,
.like-details[open] .likers-summary{
  position:fixed!important;
  left:var(--likers-left, 16px)!important;
  top:var(--likers-top, 80px)!important;
  right:auto!important;
  bottom:auto!important;
  width:min(340px, calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(360px, 52vh)!important;
  overflow:auto!important;
  z-index:2147483300!important;
  transform:none!important;
}
.like-details:hover:not([open]) .likers-list,
.like-details:hover:not([open]) .gallery-likers-list,
.like-details:hover:not([open]) .story-likers-list,
.like-details:hover:not([open]) .likers-summary{display:none!important;visibility:hidden!important;opacity:0!important;}
.public-user-page .profile-main,
.public-user-page .profile-section,
.public-user-page .surface-card{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
.public-user-page .feed-head,
.public-user-page .comment-actions,
.public-user-page .story-social-panel{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;}
.public-user-page .gallery-section,
.public-user-page .public-gallery-grid{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
.profile-sidebar .site-btn[aria-disabled="true"],
.messenger-head-actions .site-btn[aria-disabled="true"]{opacity:.72;}
.profile-sidebar .site-btn,
.profile-sidebar a.site-btn{white-space:normal!important;}

/* 2026-06-10 v3.1 — final media/call/profile guardrails */
.profile-sidebar a.site-btn[href*="messages.php"],
.profile-sidebar .site-btn[href*="messages.php"],
.messenger-head-actions #videoCallBtn{
  opacity:1!important;
  pointer-events:auto!important;
}
.profile-sidebar a.site-btn[href*="messages.php"]::before{content:none!important;}
.call-overlay:not([hidden]){
  position:fixed!important;inset:0!important;z-index:2147480800!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom))!important;
  overflow:auto!important;overscroll-behavior:contain!important;
}
.call-overlay__card{width:min(1120px,calc(100vw - 24px))!important;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow:auto!important;box-sizing:border-box!important;}
/* 2026-07-09 NEUTRALIZED overlay-era block: it set `.call-video-grid{display:block}`,
   absolutely-positioned the remote video to fill the grid and floated a bare
   "#localCallVideo" overlay on top (right/bottom, z-index 8). This was a primary
   flicker source. The grid height is kept (so the overlay-connecting avatar +
   ::before waiting layer below still size correctly); layout is otherwise owned by
   the authoritative flex block at the end of homepage.css. */
.call-video-grid{position:relative!important;min-height:clamp(420px,64svh,660px)!important;overflow:visible!important;background:transparent!important;}
.call-video-grid video#remoteCallVideo{object-fit:cover!important;background:#020712!important;opacity:1!important;visibility:visible!important;}
.call-overlay.is-remote-video-waiting .call-video-grid::before,.call-overlay.is-remote-video-absent .call-video-grid::before{content:"";position:absolute!important;inset:0!important;z-index:2!important;background:radial-gradient(circle at 50% 38%,rgba(122,165,255,.22),transparent 31%),linear-gradient(145deg,rgba(5,12,28,.96),rgba(8,20,42,.98))!important;pointer-events:none!important;}
/* 2026-07-06 — Аватар собеседника в звонке: реальный элемент вместо
   ::after (псевдоэлемент конфликтовал с меткой «Вы» и аватар не показывался). */
.call-remote-avatar{display:none;position:absolute!important;left:50%!important;top:44%!important;width:clamp(110px,18vw,170px)!important;height:clamp(110px,18vw,170px)!important;transform:translate(-50%,-50%)!important;z-index:3!important;border-radius:999px!important;background:#101a2e!important;border:4px solid rgba(255,255,255,.16)!important;box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 10px rgba(122,165,255,.09)!important;pointer-events:none!important;overflow:hidden!important;}
.call-remote-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:999px!important;display:block!important;}
.call-overlay.is-remote-video-waiting .call-remote-avatar,.call-overlay.is-remote-video-absent .call-remote-avatar{display:block;}
.call-overlay.is-remote-video-waiting .call-remote-avatar::after{content:"";position:absolute;inset:-14px;border-radius:999px;border:2px solid rgba(122,227,210,.4);animation:leskov-call-ring-pulse 1.9s ease-out infinite;}
@keyframes leskov-call-ring-pulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.14);opacity:0}100%{transform:scale(1.14);opacity:0}}
@media (prefers-reduced-motion: reduce){.call-overlay.is-remote-video-waiting .call-remote-avatar::after{animation:none;}}
.message-video-shell.is-native.is-circle{--circle-size:clamp(190px,40vw,260px)!important;width:var(--circle-size)!important;height:var(--circle-size)!important;max-width:100%!important;margin:8px auto!important;border-radius:999px!important;overflow:hidden!important;background:#000!important;}
.message-video-shell.is-native.is-circle .leskov-player{width:100%!important;height:100%!important;aspect-ratio:1/1!important;border-radius:999px!important;background:#000!important;overflow:hidden!important;padding:0!important;}
.message-video-shell.is-native.is-circle .leskov-player__media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;object-fit:cover!important;border-radius:999px!important;background:#000!important;}
.message-video-shell.is-native.is-circle .leskov-player__panel{position:absolute!important;left:0!important;right:0!important;bottom:0!important;border-radius:0!important;padding:10px 12px 14px!important;grid-template-columns:auto 1fr auto!important;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))!important;}
.message-video-shell.is-native.is-circle .leskov-player__center-btn{width:64px!important;height:64px!important;}
/* NOTE: the old mobile rule here forced #localCallVideo itself to
   right/bottom/116x92 — legacy absolute-overlay sizing from before the
   self-view became a flex .call-self panel. On phones it fought the panel's
   "video fills 100%" rule (video sized 116x92 inside a 132px panel), and the
   size mismatch made the mini window flicker. The self-view panel is now sized
   by .call-self in homepage.css; the video just fills it. */
@media(max-width:700px){.call-overlay:not([hidden]){align-items:stretch!important;padding:10px 8px calc(10px + env(safe-area-inset-bottom))!important}.call-overlay__card{width:100%!important;max-height:calc(100dvh - 20px)!important}.call-video-grid{height:54svh!important;min-height:280px!important;border-radius:22px!important}.call-video-grid .call-self-label{right:20px!important;bottom:76px!important;font-size:10px!important}.call-remote-avatar{width:clamp(96px,26vw,132px)!important;height:clamp(96px,26vw,132px)!important}.message-video-shell.is-native.is-circle{--circle-size:min(212px,62vw)!important}}

/* 2026-06-12 — кнопка перевода сообщений (RU↔ET) */
.message-translate-btn{white-space:nowrap}
.message-translate-btn.is-active{border-color:rgba(121,227,210,.5);background:rgba(121,227,210,.12);color:#9defe0}
.message-bubble [data-message-text].is-translated{position:relative;padding-left:10px;border-left:2px solid rgba(121,227,210,.55)}

/* 2026-06-12 v20 — cross-page mobile safety net */
@media(max-width:860px){
  html,body{max-width:100%;overflow-x:hidden!important;}
  .container,.app-main,.surface-card,.profile-layout,.profile-main,.profile-sidebar,.profile-section{min-width:0!important;max-width:100%!important;box-sizing:border-box;}
  .profile-edit-grid,.settings-grid,.form-grid{grid-template-columns:1fr!important;min-width:0!important;max-width:100%!important;}
  input,select,textarea,.admin-input,.admin-textarea{max-width:100%!important;box-sizing:border-box!important;}
  .gallery-grid.profile-gallery-grid,.profile-gallery-grid{grid-template-columns:1fr!important;max-height:none!important;overflow:visible!important;}
  .leskov-empty-state{max-width:100%!important;overflow:visible!important;white-space:normal!important;}
  .leskov-empty-state__title,.leskov-empty-state__hint{white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;max-width:100%!important;}
}

/* ============================================================
 * 2026-06-13 — Chat image lightbox modal (messages.php).
 * ============================================================ */
.message-image-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:24px}
.message-image-modal[hidden]{display:none}
.message-image-modal__backdrop{position:absolute;inset:0;background:rgba(3,6,14,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.message-image-modal__dialog{position:relative;z-index:1;max-width:min(92vw,1000px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px;animation:image-modal-in .22s ease}
.message-image-modal__img{max-width:100%;max-height:78vh;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6);object-fit:contain;background:#05080f}
.message-image-modal__close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(13,16,28,.96);color:#fff;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.message-image-modal__close:hover{background:rgba(40,46,64,.98)}
.message-image-modal__open{font-size:13px;color:rgba(255,255,255,.78);text-decoration:none;padding:8px 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.05)}
.message-image-modal__open:hover{color:#fff;border-color:rgba(255,255,255,.32)}
body.image-modal-open{overflow:hidden}
/* 2026-06-14 — message image hover: drop the magnifier (zoom-in) cursor,
   add a site-styled "expand" affordance: soft zoom + dark veil + accent
   expand badge in the corner. */
.message-attachment{cursor:pointer;position:relative;overflow:hidden;border-radius:24px;-webkit-tap-highlight-color:transparent}
.message-attachment img{transition:transform .4s cubic-bezier(.22,.61,.36,1),filter .35s ease}
.message-attachment::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(6,12,24,0) 45%,rgba(6,12,24,.42));opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}
.message-attachment::after{content:"";position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;z-index:2;pointer-events:none;background-color:transparent;background-image:linear-gradient(135deg,var(--accent),var(--accent-2)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2306121f'%3E%3Cpath d='M4 9V4h5v2H6v3H4zm14 0V6h-3V4h5v5h-2zM4 15h2v3h3v2H4v-5zm16 0v5h-5v-2h3v-3h2z'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:cover,18px 18px;box-shadow:0 8px 22px rgba(34,172,232,.4),inset 0 1px 0 rgba(255,255,255,.4);opacity:0;transform:scale(.7) translateY(-4px);transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1)}
.message-attachment:hover img,.message-attachment:focus-visible img{transform:scale(1.045);filter:brightness(.86) saturate(1.04)}
.message-attachment:hover::before,.message-attachment:focus-visible::before{opacity:1}
.message-attachment:hover::after,.message-attachment:focus-visible::after{opacity:1;transform:scale(1) translateY(0)}
@media (prefers-reduced-motion: reduce){.message-attachment img,.message-attachment::after,.message-attachment::before{transition:none}}
@media(max-width:600px){.message-image-modal{padding:14px}.message-image-modal__close{top:-8px;right:-8px;width:40px;height:40px;font-size:22px}}

/* 2026-06-13 — modern repost (retweet-style) icon button */
.tiny-action--repost{display:inline-flex;align-items:center;gap:6px}
.tiny-action__icon{flex:0 0 auto;display:inline-block;vertical-align:middle}
.tiny-action--repost span{line-height:1}

/* ============================================================
 * 2026-06-13 — Mobile form field overflow fix.
 * type="date"/"datetime-local"/"time"/"month" inputs have an intrinsic
 * min content width on iOS/WebKit that pushed them past the screen edge
 * (profile edit "Дата рождения", admin "С даты"). Force them to honour
 * their container width.
 * ============================================================ */
.form-grid input.admin-input,
.profile-edit-grid input.admin-input,
.form-grid select.admin-input{max-width:100%;min-width:0;box-sizing:border-box}
.admin-input[type="date"],
.admin-input[type="datetime-local"],
.admin-input[type="time"],
.admin-input[type="month"]{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.profile-edit-grid label,
.form-grid label{min-width:0;max-width:100%;box-sizing:border-box}
@media (max-width:640px){
  .admin-input[type="date"],
  .admin-input[type="datetime-local"],
  .admin-input[type="time"],
  .admin-input[type="month"]{font-size:16px}
}

/* ============================================================
 * 2026-06-13 — Utility-page mobile header (discover/search/notifications).
 * The brand, search field and language switcher were squeezed into a
 * 2-column grid and overlapped ("в кашу"). Lay them out cleanly:
 * row 1 = brand + language switcher, row 2 = full-width search.
 * ============================================================ */
@media (max-width: 640px) {
  body.utility-page .container.header-inner,
  body.notifications-page-shell .container.header-inner,
  body.discover-page .container.header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions" "search search" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
  }
  body.utility-page .header-inner > .brand,
  body.utility-page .header-inner > a.brand { grid-area: brand !important; min-width: 0 !important; }
  body.utility-page .header-inner > .header-actions { grid-area: actions !important; justify-self: end !important; }
  body.utility-page .header-inner > .site-header__search-wrap { grid-area: search !important; min-width: 0 !important; width: 100% !important; }
  body.utility-page .header-inner .brand-copy strong { font-size: 1.15rem !important; line-height: 1.1 !important; }
  body.utility-page .header-inner .brand-copy small { font-size: .72rem !important; }
  body.utility-page .header-inner .leskov-search-bar { width: 100% !important; min-width: 0 !important; }
}

/* ============================================================
 * 2026-06-14 — Active call overlay: always on top + flicker-free.
 *
 * (1) z-index: on index.php/index_et.php the sticky homepage header
 *     (which is bumped to high z-indexes in several rules, up to the
 *     header-player-open case) painted OVER the call. Pin the overlay
 *     and the incoming-call modal above every header layer and give
 *     them their own stacking context so nothing leaks through.
 * (2) flicker: promote both call <video> elements to their own GPU
 *     layer and stop layout/paint thrash on the small self-view.
 * ============================================================ */
.call-overlay:not([hidden]),
.incoming-call-modal:not([hidden]){
  z-index: 2147483600 !important;
  isolation: isolate !important;
}
/* Remote video: a single stable GPU layer is fine (it's the big element and
   never mirrored). NOTE: no `will-change`/`contain` on the LOCAL self-view —
   those pinned a permanent, separately-composited layer on the mini <video>
   which Chrome AND iOS Safari re-flattened every frame, i.e. the flicker/stutter
   users reported on both desktop and phone. */
.call-video-grid video#remoteCallVideo{
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Mirror the self-view with a plain 2D flip only — no translateZ / will-change /
   contain. The parent .call-self panel already owns one stable compositor layer;
   the video paints into it instead of onto a second, churning layer. */
.call-video-grid video#localCallVideo,
.call-video-grid video#localCallVideo.is-camera-off{
  transform: scaleX(-1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============================================================
 * 2026-06-14 final — mobile header language selector.
 * Desktop keeps RU/ET near the actions. On phones the language switcher
 * lives inside the slide-down menu, freeing the header for player/messages/
 * notifications/profile/menu icons.
 * ============================================================ */
.site-header .language-switcher--menu{display:none!important;}
.site-header .language-switcher--header{display:flex!important;}
@media(min-width:761px){
  .site-header .language-switcher--header{display:flex!important;}
  .site-header .site-nav .language-switcher--menu{display:none!important;}
}
@media(max-width:760px){
  .site-header .header-actions > .language-switcher--header{display:none!important;}
  .site-header .site-nav .language-switcher--menu{
    display:flex!important;
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px!important;
    margin:2px 0 0!important;
    border:1px solid rgba(129,160,219,.18)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.035)!important;
    box-sizing:border-box!important;
  }
  .site-header .site-nav .language-switcher--menu .lang-pill{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 12px!important;
    border-radius:14px!important;
    font-size:.9rem!important;
    font-weight:950!important;
  }
}

/* ============================================================
 * 2026-06-14 final — message image hover reset.
 * Remove the floating cyan expand bubble that was appearing at the far
 * edge of the message card; keep image preview behaviour clean and local.
 * ============================================================ */
.message-attachment{
  display:inline-block!important;
  width:auto!important;
  max-width:min(100%,420px)!important;
  overflow:hidden!important;
  border-radius:22px!important;
  cursor:pointer!important;
  vertical-align:top!important;
}
.message-attachment::before,
.message-attachment::after{display:none!important;content:none!important;}
.message-attachment img{
  display:block!important;
  max-width:100%!important;
  height:auto!important;
  border-radius:inherit!important;
  transition:transform .22s ease, filter .22s ease!important;
}
.message-attachment:hover img,
.message-attachment:focus-visible img{transform:scale(1.012)!important;filter:brightness(.96) saturate(1.02)!important;}
@media(max-width:640px){.message-attachment{max-width:min(100%,78vw)!important;border-radius:20px!important;}}

/* 2026-06-14 R2 — video call UI must always sit above the sticky header. */
.call-overlay:not([hidden]),
.incoming-call-modal:not([hidden]){
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  isolation:isolate!important;
}
body:has(.call-overlay:not([hidden])) .site-header,
body:has(.incoming-call-modal:not([hidden])) .site-header{z-index:2147481200!important;}

/* 2026-06-14 R2 — no intrusive hover/modal behavior for chat attachments/gifts. */
.message-attachment:hover img,
.message-attachment:focus-visible img,
.message-attachment.is-gift-attachment:hover img,
.message-attachment.is-gift-attachment:focus-visible img{transform:none!important;filter:none!important;}
.message-attachment.is-gift-attachment{cursor:default!important;}
.message-attachment.is-gift-attachment::before,
.message-attachment.is-gift-attachment::after{display:none!important;content:none!important;}

/* v9: safe file picker — only the visible button opens the file dialog */
.has-leskov-file-control{cursor:default!important;}
.leskov-file-control{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;margin-top:8px;max-width:100%;}
.leskov-file-control__input{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;}
.leskov-file-control__button{appearance:none;border:1px solid rgba(125,238,222,.42);border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--accent,#6fb7ff),var(--accent-2,#7cf1d3));color:#041020;font-weight:900;line-height:1;box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 0 4px rgba(124,241,211,.07);cursor:pointer;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
.leskov-file-control__button:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 18px 36px rgba(0,0,0,.28),0 0 0 5px rgba(124,241,211,.10);}
.leskov-file-control__button:focus-visible{outline:3px solid rgba(124,241,211,.52);outline-offset:3px;}
.leskov-file-control__name{display:inline-flex;align-items:center;min-width:0;max-width:min(100%,320px);min-height:34px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);color:var(--muted,#aeb8d6);font-size:.88rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;}
.leskov-file-control.has-file .leskov-file-control__name{color:var(--text,#eef3ff);border-color:rgba(124,241,211,.26);background:rgba(124,241,211,.08);}
.feed-upload-field.has-leskov-file-control,.feed-edit-upload-field.has-leskov-file-control{gap:8px!important;}
@media(max-width:640px){.leskov-file-control{display:grid;grid-template-columns:1fr;align-items:stretch}.leskov-file-control__button{width:fit-content}.leskov-file-control__name{max-width:100%;}}

/* LESKOV v10: festive popup — compact circular reopen FAB and strict ET copy */
.home-event-reopen{
  position:fixed!important;
  left:18px!important;
  right:auto!important;
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  border:1px solid rgba(121,227,210,.42)!important;
  background:linear-gradient(135deg,rgba(12,47,63,.96),rgba(14,73,86,.94))!important;
  color:#eef4ff!important;
  box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 0 7px rgba(121,227,210,.08),inset 0 1px 0 rgba(255,255,255,.14)!important;
  cursor:pointer!important;
  z-index:9998!important;
  font-size:0!important;
  line-height:1!important;
  transform:none!important;
}
.home-event-reopen:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(121,227,210,.70)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.42),0 0 0 8px rgba(121,227,210,.12),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.home-event-reopen:focus-visible{
  outline:3px solid rgba(121,227,210,.38)!important;
  outline-offset:4px!important;
}
.home-event-reopen__icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-size:1.28rem!important;
  line-height:1!important;
  color:#fff!important;
  text-shadow:0 0 18px rgba(121,227,210,.55)!important;
}
.home-event-reopen__label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.home-event-reopen[hidden]{display:none!important;}
@media(max-width:640px){
  .home-event-reopen{
    left:14px!important;
    right:auto!important;
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:0!important;
    font-size:0!important;
  }
}


/* 2026-06-15: strict file upload controls — native picker hidden, only custom button opens dialog */
input[type="file"].custom-file-native,
input[type="file"][data-native-file-hidden="1"]{
  display:none!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  max-width:1px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.custom-file-control{
  width:auto!important;
  max-width:100%!important;
  justify-self:start!important;
  align-self:start!important;
  cursor:default!important;
}
.custom-file-button{
  user-select:none!important;
  -webkit-user-select:none!important;
}
.custom-file-name{
  cursor:default!important;
  pointer-events:none!important;
}

/* LESKOV v12: one strict upload control and circular event reopen FAB on every viewport */
input[type="file"].custom-file-native,
input[type="file"].leskov-file-control__input,
input[type="file"][data-native-file-hidden="1"]{
  display:none!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:1px!important;
  max-height:1px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.custom-file-control{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  width:auto!important;
  max-width:100%!important;
  margin-top:8px!important;
  cursor:default!important;
}
.custom-file-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  min-height:44px!important;
  padding:10px 18px!important;
  border-radius:999px!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.custom-file-name{
  pointer-events:none!important;
  cursor:default!important;
}
.home-event-reopen{
  position:fixed!important;
  left:18px!important;
  right:auto!important;
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  z-index:9998!important;
  font-size:0!important;
  line-height:1!important;
}
.home-event-reopen__icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-size:1.28rem!important;
  line-height:1!important;
}
.home-event-reopen__label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}
.home-event-reopen[hidden]{display:none!important;}
@media(max-width:640px){
  .home-event-reopen{
    left:14px!important;
    right:auto!important;
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:0!important;
    border-radius:999px!important;
    font-size:0!important;
  }
}

/* ============================================================
 * Telegram-style recording UX (voice + video circles) — 2026-07-02
 * ============================================================ */
.compose-box.is-recording-voice .voice-recorder-status,
.compose-box.is-recording-video .video-recorder-status{
  display:inline-flex;align-items:center;gap:9px;
  color:#ffd3dc;font-weight:600;letter-spacing:.01em;
  border:1px solid rgba(255,84,112,.4);
  background:linear-gradient(135deg,rgba(255,84,112,.14),rgba(255,138,92,.08));
  border-radius:14px;padding:8px 14px;
  font-variant-numeric:tabular-nums;
}
.compose-box.is-recording-voice .voice-recorder-status::before,
.compose-box.is-recording-video .video-recorder-status::before{
  content:'';flex:none;width:10px;height:10px;border-radius:999px;background:#ff5470;
  box-shadow:0 0 0 0 rgba(255,84,112,.55);
  animation:leskovRecPulse 1.2s ease-out infinite;
}
@keyframes leskovRecPulse{
  0%{box-shadow:0 0 0 0 rgba(255,84,112,.55)}
  70%{box-shadow:0 0 0 11px rgba(255,84,112,0)}
  100%{box-shadow:0 0 0 0 rgba(255,84,112,0)}
}
.compose-box.is-recording-voice #voiceRecorderBtn,
.compose-box.is-recording-video #videoCircleBtn{
  background:linear-gradient(135deg,#ff5470,#ff8a5c)!important;
  color:#fff!important;border-color:transparent!important;
  animation:leskovRecGlow 1.6s ease-in-out infinite;
}
@keyframes leskovRecGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,84,112,0)}
  50%{box-shadow:0 0 16px 3px rgba(255,84,112,.45)}
}
/* Вращающееся кольцо записи вокруг круглого превью — как в Telegram */
/* Во время записи обёртка получала overflow:visible ради кольца, но
   вместе с ним «вылезал» и её собственный чёрный фон — за круглым
   видео проступал чёрный квадрат. Фон убираем: его роль выполняет
   само видео, оно круглое. */
.compose-box.is-recording-video .video-circle-preview{
  overflow:visible;border-color:transparent;background:transparent;
}
.compose-box.is-recording-video .video-circle-preview video{border-radius:50%}
.compose-box.is-recording-video .video-circle-preview::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:3px solid rgba(255,84,112,.9);border-top-color:transparent;
  animation:leskovRecSpin 1.25s linear infinite;pointer-events:none;
}
@keyframes leskovRecSpin{to{transform:rotate(360deg)}}
.compose-box.is-recording-video .video-circle-preview__label{
  color:#ffd3dc;font-weight:600;
}
@media (prefers-reduced-motion: reduce){
  .compose-box.is-recording-voice .voice-recorder-status::before,
  .compose-box.is-recording-video .video-recorder-status::before,
  .compose-box.is-recording-voice #voiceRecorderBtn,
  .compose-box.is-recording-video #videoCircleBtn,
  .compose-box.is-recording-video .video-circle-preview::after{animation:none}
}

/* ============================================================
 * auth.php — вкладки Вход/Регистрация + solo-2FA — 2026-07-03
 * ============================================================ */
.auth-tabs{display:flex;gap:6px;margin:18px 0 14px;padding:5px;border-radius:16px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);width:fit-content}
.auth-tabs__btn{appearance:none;border:none;cursor:pointer;padding:10px 22px;border-radius:12px;
  background:transparent;color:#aab8d4;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  transition:background .2s ease,color .2s ease}
.auth-tabs__btn:hover{color:#eef4ff}
.auth-tabs__btn.is-active{background:linear-gradient(135deg,#7aa5ff,#79e3d2);color:#07101d}
.auth-grid--tabs{display:block}
.auth-grid--tabs [data-auth-panel]{display:none;max-width:560px}
.auth-grid--tabs[data-auth-active="login"] [data-auth-panel="login"],
.auth-grid--tabs[data-auth-active="register"] [data-auth-panel="register"]{display:flex}
.auth-panel-lead{margin:-6px 0 4px;color:#9fb2d4}
.auth-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.auth-field-row{grid-template-columns:1fr}}
.auth-field-hint{display:block;margin-top:4px;color:#8fa3c4}
.auth-switch-note{margin-top:6px;color:#9fb2d4}
.auth-inline-link{appearance:none;border:none;background:none;cursor:pointer;padding:0;
  color:#9fd3ff;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.auth-inline-link:hover{color:#c4e4ff}
.auth-2fa-stack--solo{max-width:460px;margin:18px auto 0;display:flex;flex-direction:column;gap:12px}
.auth-2fa-stack--solo .auth-code-input{font-size:1.6rem;letter-spacing:.5em;text-align:center;
  font-variant-numeric:tabular-nums;padding:14px}
.auth-2fa-back{text-align:center;margin:2px 0 0}
.auth-2fa-back a{color:#9fd3ff;text-decoration:none}
.auth-2fa-back a:hover{text-decoration:underline}

/* auth tabs — защита от каскадных конфликтов (2026-07-03) */
.auth-grid--tabs [data-auth-panel]{display:none !important}
.auth-grid--tabs[data-auth-active="login"] [data-auth-panel="login"],
.auth-grid--tabs[data-auth-active="register"] [data-auth-panel="register"]{display:flex !important;flex-direction:column}
.auth-grid--tabs [data-auth-panel][hidden]{display:none !important}
.auth-modal[hidden]{display:none !important}

/* 2026-07-05 auth page 9:16 media panel */
body.auth-page .auth-card--with-media{
  display:grid!important;
  grid-template-columns:minmax(320px,560px) minmax(280px,420px)!important;
  align-items:start!important;
  gap:26px 44px!important;
}
body.auth-page .auth-main-panel{
  display:grid;
  gap:12px;
  min-width:0;
  align-content:start;
}
body.auth-page .auth-main-panel .section-head.split-head{
  margin-bottom:0!important;
}
body.auth-page .auth-main-panel .auth-tabs{
  margin:6px 0 10px!important;
}
body.auth-page .auth-card--with-media .section-head.split-head{
  margin-bottom:0!important;
}
body.auth-page .auth-card--with-media .auth-tabs{
  margin:6px 0 10px!important;
}
body.auth-page .auth-card--with-media .auth-grid--tabs{
  margin-top:0;
}
body.auth-page .auth-media-panel{
  min-width:0;
  display:grid;
  place-items:start center;
  align-self:start;
  /* Отступ адаптивный: на невысоких экранах постер не выталкивается за низ. */
  padding-top:clamp(24px,12vh,176px);
}
body.auth-page .auth-media-frame{
  position:relative;
  overflow:hidden;
  /* 2026-07-06 fix: ширина выводится из доступной высоты (68vh, ratio 9/16),
     иначе max-height обрезал рамку и медиа показывалось наполовину. */
  width:min(100%,386px,calc(min(68vh,686px) * 0.5625));
  aspect-ratio:9/16;
  border:1px solid rgba(126,153,198,.22);
  border-radius:32px;
  background:linear-gradient(180deg,rgba(11,22,44,.88),rgba(4,9,21,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.06);
}
body.auth-page .auth-media-frame video,
body.auth-page .auth-media-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* contain вместо cover: изображение/видео/анимация видны полностью,
     без урезания; поля сливаются с тёмным фоном рамки. */
  object-fit:contain;
  object-position:center;
}
body.auth-page .auth-media-frame__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(2,8,20,.1),rgba(2,8,20,.18) 45%,rgba(2,8,20,.62));
  pointer-events:none;
}
body.auth-page .auth-media-frame__caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:rgba(4,10,22,.62);
  color:#eef4ff;
  font-weight:900;
  line-height:1.2;
  backdrop-filter:blur(12px);
}
@media(max-width:900px){
  body.auth-page .auth-card--with-media{
    grid-template-columns:1fr!important;
  }
  body.auth-page .auth-media-panel{
    display:none!important;
  }
}

/* 2026-07-05 — unified modern "Кто лайкнул" modal for posts, stories, gallery and tracks */
.like-details{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  max-width:100%!important;
}
.like-details>summary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  padding:9px 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(151,174,214,.28)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;
  color:var(--text,#eef4ff)!important;
  font-weight:950!important;
  line-height:1!important;
  list-style:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
.like-details>summary::-webkit-details-marker{display:none!important}
.like-details[open]{z-index:2147482500!important}
.like-details[open]>summary{
  border-color:rgba(121,227,210,.58)!important;
  background:linear-gradient(135deg,rgba(122,165,255,.24),rgba(121,227,210,.18))!important;
}
.like-details[open]::before{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  z-index:2147482500!important;
  background:rgba(3,7,16,.78)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.like-details[open] .likers-list,
.like-details[open] .gallery-likers-list,
.like-details[open] .story-likers-list,
.like-details[open] .likers-summary{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:2147482501!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:0!important;
  width:min(470px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:min(72dvh,540px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(151,174,214,.22)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(122,165,255,.18),transparent 38%),
    linear-gradient(180deg,rgba(16,28,49,.98),rgba(6,12,24,.98))!important;
  box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08)!important;
}
.likers-list__head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:66px!important;
  padding:18px 20px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.035)!important;
}
.likers-list__head strong{
  color:var(--text,#eef4ff)!important;
  font-size:1.08rem!important;
  font-weight:950!important;
}
.likers-list__head span{
  display:inline-grid!important;
  place-items:center!important;
  min-width:34px!important;
  height:34px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--accent,#7aa5ff),var(--accent-2,#79e3d2))!important;
  color:#06101f!important;
  font-weight:950!important;
}
.likers-list__items{
  display:grid!important;
  gap:8px!important;
  padding:12px!important;
  max-height:min(58dvh,430px)!important;
  overflow:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(121,227,210,.45) transparent!important;
}
.likers-list a,
.gallery-likers-list a,
.story-likers-list a{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  padding:10px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.045)!important;
  color:var(--text,#eef4ff)!important;
  text-decoration:none!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
.likers-list a:hover,
.gallery-likers-list a:hover,
.story-likers-list a:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(121,227,210,.28)!important;
  background:rgba(121,227,210,.09)!important;
}
.likers-list img,
.gallery-likers-list img,
.story-likers-list img{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
  object-fit:cover!important;
  background:rgba(255,255,255,.08)!important;
}
.likers-list__user{
  display:grid!important;
  gap:3px!important;
  min-width:0!important;
}
.likers-list__user strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text,#eef4ff)!important;
  font-weight:950!important;
}
.likers-list__user small{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--muted,#aab8d4)!important;
  font-weight:800!important;
}
.likers-list__empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:120px!important;
  padding:22px!important;
  color:var(--muted,#aab8d4)!important;
  text-align:center!important;
  font-weight:850!important;
}
@media(max-width:640px){
  .like-details[open] .likers-list,
  .like-details[open] .gallery-likers-list,
  .like-details[open] .story-likers-list,
  .like-details[open] .likers-summary{
    top:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:72dvh!important;
    border-radius:26px!important;
  }
  .likers-list__head{min-height:62px!important;padding:16px!important}
  .likers-list__items{max-height:56dvh!important;padding:10px!important}
  .likers-list a,.gallery-likers-list a,.story-likers-list a{grid-template-columns:44px minmax(0,1fr)!important;border-radius:18px!important}
  .likers-list img,.gallery-likers-list img,.story-likers-list img{width:44px!important;height:44px!important;border-radius:15px!important}
}

/* 2026-07-05 — persistent, manually dismissible notification toasts. */
.toast-notice{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
}
.toast-notice__link,
.toast-notice__body{
  display:grid!important;
  gap:5px!important;
  min-width:0!important;
  color:inherit!important;
  text-decoration:none!important;
}
.toast-notice__close{
  appearance:none!important;
  display:inline-grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  margin:-4px -4px 0 8px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:inherit!important;
  font:900 18px/1 system-ui,sans-serif!important;
  cursor:pointer!important;
}
.toast-notice__close:hover{background:rgba(255,255,255,.13)!important}

/* 2026-07-05 — notification preferences open as a modal from the top Settings button. */
.notifications-prefs-modal-shell[hidden]{display:none!important}
.notifications-prefs-modal-shell{
  position:fixed!important;
  inset:0!important;
  z-index:2147482800!important;
  display:grid!important;
  place-items:center!important;
  padding:clamp(14px,3vw,34px)!important;
}
.notifications-prefs-backdrop{
  position:absolute!important;
  inset:0!important;
  border:0!important;
  padding:0!important;
  background:rgba(3,7,16,.72)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  cursor:pointer!important;
}
.notifications-prefs-modal{
  position:relative!important;
  z-index:1!important;
  width:min(980px,calc(100vw - 28px))!important;
  max-height:min(86dvh,820px)!important;
  overflow:auto!important;
  border-radius:28px!important;
  box-shadow:0 32px 110px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08)!important;
}
.notifications-prefs-close{
  position:sticky!important;
  top:0!important;
  float:right!important;
  z-index:3!important;
  display:inline-grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin:-4px -4px 8px 14px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:var(--text,#eef4ff)!important;
  font:950 24px/1 system-ui,sans-serif!important;
  cursor:pointer!important;
}
.notifications-prefs-close:hover{background:rgba(255,255,255,.13)!important}
.notifications-prefs-modal__head{padding-right:54px!important}
.notifications-prefs-open{overflow:hidden!important}
@media(max-width:760px){
  .notifications-prefs-modal-shell{align-items:end!important;padding:10px!important}
  .notifications-prefs-modal{
    width:100%!important;
    max-height:84dvh!important;
    border-radius:24px 24px 18px 18px!important;
  }
  .notifications-prefs-modal .leskov-notif-prefs__table-wrap{overflow:auto!important}
  .notifications-prefs-modal .leskov-notif-prefs__table{min-width:640px!important}
}

/* ============================================================
 * 2026-07-06 — Fix: поля «Текущий пароль» и «Новый пароль» слипались.
 * .profile-edit-grid не имел display:grid на десктопе, поэтому подписи
 * и инпуты формы смены пароля стояли вплотную. Форме задана собственная
 * сетка с явными отступами между полями.
 * ============================================================ */
.password-change-form .password-fields-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:6px;
}
.password-change-form .password-field{
  display:grid;
  gap:10px;
  font-weight:600;
  min-width:0;
}
.password-change-form .password-field .admin-input{
  width:100%;
  box-sizing:border-box;
}
@media (min-width: 981px){
  .password-change-form .password-fields-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;}
}

/* ============================================================
 * 2026-07-06 — Сворачивание длинного текста постов («Показать полностью»).
 * ============================================================ */
.feed-content--collapsible.is-collapsed{
  max-height:var(--feed-collapse-max,380px);
  overflow:hidden;
  position:relative;
}
.feed-content--collapsible.is-collapsed::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:96px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,15,28,0),var(--card-bg,#0b1526) 92%);
}
.feed-content-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:8px 0 2px;
  padding:8px 16px;
  border:1px solid var(--card-border,rgba(148,184,226,.22));
  border-radius:999px;
  background:rgba(122,214,255,.08);
  color:var(--accent,#79e3d2);
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.feed-content-toggle:hover{background:rgba(122,214,255,.16);border-color:rgba(122,227,210,.45)}
.feed-content-toggle svg{width:15px;height:15px;transition:transform .2s ease}
.feed-content-toggle.is-open svg{transform:rotate(180deg)}

/* ============================================================
 * 2026-07-06 — Fix: сломанная карточка в «Мои друзья».
 * .gift-item задаёт grid 56px/1fr, но в списке друзей первый ребёнок —
 * <a.gift-item-link> (аватар + имя), которую вжимало в колонку 56px:
 * имя рассыпалось по буквам, кнопка «Заблокировать» прилипала сбоку.
 * Карточке друга задана собственная раскладка.
 * ============================================================ */
.friends-list-scroll .gift-item{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.friends-list-scroll .gift-item .gift-item-link{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:14px;
  flex:1 1 auto;
  min-width:0;
  text-decoration:none;
  color:var(--text,inherit);
}
.friends-list-scroll .gift-item .avatar-stack{
  width:56px;
  height:56px;
  min-width:56px;
  position:relative;
}
.friends-list-scroll .gift-item .avatar-stack img{
  width:56px;
  height:56px;
  border-radius:16px;
  object-fit:cover;
  display:block;
}
.friends-list-scroll .gift-item strong{
  display:block;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.2;
}
.friends-list-scroll .gift-item p.small{
  margin:4px 0 0;
  white-space:normal;
  line-height:1.35;
}
.friends-list-scroll .gift-item .inline-form{
  flex:0 0 auto;
  margin-left:auto;
}
@media (max-width:560px){
  .friends-list-scroll .gift-item{flex-wrap:wrap;}
  .friends-list-scroll .gift-item .inline-form{margin-left:70px;}
}

/* 2026-07-06 — Полноэкранный режим звонка (dblclick по видео собеседника). */
.call-video-grid:fullscreen{border-radius:0!important;height:100%!important;min-height:100%!important;background:#000!important;}
.call-video-grid:fullscreen video#remoteCallVideo{height:100%!important;border-radius:0!important;}

/* ============================================================
 * 2026-07-06 — Гостевой баннер на публичных страницах
 * (user.php / search.php / discover.php).
 * ============================================================ */
.leskov-guest-banner{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:13px 16px;
  border-radius:18px;
  border:1px solid rgba(122,227,210,.28);
  background:linear-gradient(120deg,rgba(122,227,210,.1),rgba(122,165,255,.08));
}
.leskov-guest-banner__icon{font-size:1.3rem;flex:0 0 auto;}
.leskov-guest-banner__text{margin:0;flex:1 1 260px;min-width:0;color:var(--text,#eef4ff);line-height:1.45;font-size:.95rem;}
.leskov-guest-banner__actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;}
@media (max-width:560px){
  .leskov-guest-banner{align-items:flex-start;}
  .leskov-guest-banner__actions{width:100%;}
  .leskov-guest-banner__actions .site-btn{flex:1 1 calc(50% - 8px);}
}
/* Поисковая строка в шапке главной: не даём ей схлопнуть навигацию. */
.site-header__search-wrap--home{flex:1 1 260px;min-width:0;max-width:430px;margin:0 14px;}
@media (max-width:900px){.site-header__search-wrap--home{order:10;flex:1 1 100%;max-width:none;margin:10px 0 0;}}

/* 2026-07-06 — header polish: 28px radius + modern glass surface. */
:root{--leskov-header-radius:28px;}
.site-header{isolation:isolate;}
.header-inner{
  position:relative!important;
  overflow:visible!important;
  border-radius:var(--leskov-header-radius)!important;
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(10,18,36,.86),rgba(6,12,25,.76)) padding-box,
    linear-gradient(135deg,rgba(122,165,255,.34),rgba(121,227,210,.18),rgba(255,255,255,.08)) border-box!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px) saturate(132%);
  -webkit-backdrop-filter:blur(18px) saturate(132%);
}
.header-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 12% 0%,rgba(122,165,255,.16),transparent 38%),
    radial-gradient(circle at 88% 10%,rgba(121,227,210,.12),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 44%);
}
.header-inner>*{position:relative;z-index:1;}
@media(max-width:640px){
  .header-inner{border-radius:var(--leskov-header-radius)!important;}
}

/* ===================================================================
   Video call: self-view (local preview) removed (2026-07-08).
   The grid used to be `remote | 260px local`. With the self-view gone the
   remote video must fill the whole stage. Loaded last → authoritative.
=================================================================== */
.call-video-grid{grid-template-columns:1fr!important;}
.call-video-grid video#remoteCallVideo,
.call-video-grid video:first-child,
.call-video-grid video:last-child{
  width:100%!important;
  max-width:100%!important;
  min-height:min(60vh,420px)!important;
  max-height:74vh!important;
  justify-self:stretch!important;
  border-radius:20px!important;
  object-fit:cover!important;
  transform:none!important;
}
@media (max-width:640px){
  .call-video-grid video#remoteCallVideo,
  .call-video-grid video:first-child,
  .call-video-grid video:last-child{
    min-height:min(56vh,380px)!important;
    max-height:64vh!important;
  }
}

/* ===== Messenger name + badges: clean rounded layout (no squished icons) =====
   In the narrow dialog list the name and the awarded-badge icons used to be
   crammed onto one nowrap line, so the name wrapped and the badges got
   flattened. Put the name on its own truncated line and render the badges as a
   tidy, evenly-spaced, wrapping row of round chips below it. */
.messenger-sidebar .user-list-item strong.inline-badged-name,
.messenger-head .user-list-item strong.inline-badged-name{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0;max-width:100%;
}
.messenger-sidebar .user-list-item .user-list-name,
.messenger-head .user-list-item .user-list-name{
  flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:800;line-height:1.15;
}
.messenger-sidebar .user-list-item .user-list-badges,
.messenger-head .user-list-item .user-list-badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:0 0 100%;margin-top:4px;
}
.messenger-sidebar .user-list-item .user-list-badges:empty,
.messenger-head .user-list-item .user-list-badges:empty{display:none;margin:0;}
.messenger-sidebar .user-list-item .user-list-badges .status-badge,
.messenger-head .user-list-item .user-list-badges .status-badge{
  width:30px;height:30px;flex:0 0 30px;border-radius:999px;
}
.messenger-sidebar .user-list-item .user-list-badges .status-badge svg,
.messenger-head .user-list-item .user-list-badges .status-badge svg{width:17px;height:17px;}
/* Round the whole dialog card a touch more so it reads as a soft pill. */
.messenger-sidebar .user-list-item{border-radius:22px;}

/* Awarded badges next to a post author's name (feeds on profile/user/news). */
.feed-author-copy .inline-badged-name{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;min-width:0;margin:0;}
.feed-author-copy .inline-badged-name .user-list-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;}
.feed-author-badges{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;}
.feed-author-badges:empty{display:none;}
.feed-author-badges .status-badge{width:24px;height:24px;flex:0 0 24px;border-radius:999px;}
.feed-author-badges .status-badge svg{width:14px;height:14px;}
.feed-author-badges .online-state-badge{width:24px;height:24px;flex:0 0 24px;}

/* ===== Flash / toast smooth fade-out (auto-dismiss after 6s via site.js) ===== */
.admin-flash,.flash{transition:opacity .34s ease, transform .34s ease;}
.admin-flash.is-dismissing,.flash.is-dismissing{opacity:0;transform:translateY(-6px);pointer-events:none;}

/* ===== Video-call self-view (side panel, collapse / expand) =====
   IMPORTANT: the self-view is laid out BESIDE the remote video, never on top of
   it. Overlaying a second <video> (plus backdrop-filter blur) over the live
   remote stream forced a full-region recomposite every frame, which made the
   remote video stutter and the audio crackle. So: side-by-side flex layout and
   NO backdrop-filter anywhere here. */
.call-video-grid{position:relative!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:12px!important;align-items:flex-start!important;grid-template-columns:none!important;}
.call-video-grid>video#remoteCallVideo{flex:1 1 auto!important;min-width:0!important;width:auto!important;align-self:stretch!important;}
.call-self{flex:0 0 auto!important;position:relative!important;z-index:5!important;width:200px!important;aspect-ratio:4/3!important;height:auto!important;min-height:0!important;align-self:flex-start!important;margin:0!important;border-radius:16px!important;overflow:hidden!important;border:1.5px solid rgba(255,255,255,.26)!important;box-shadow:0 8px 22px rgba(0,0,0,.4)!important;background:#02030a!important;transition:width .22s ease,aspect-ratio .22s ease,border-radius .22s ease!important;}
.call-self.is-collapsed{width:60px!important;aspect-ratio:1/1!important;border-radius:50%!important;}
.call-self__bar{display:contents;}
.call-self video#localCallVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:cover!important;border-radius:0!important;background:#02030a!important;display:block!important;}
.call-self[data-facing="user"] video#localCallVideo{transform:scaleX(-1)!important;}
.call-self[data-facing="environment"] video#localCallVideo{transform:none!important;}
/* camera-mode chip, bottom-left, only when expanded */
.call-self__mode{position:absolute;left:7px;bottom:7px;z-index:2;max-width:calc(100% - 42px);padding:3px 8px;border-radius:999px;background:rgba(4,9,18,.74);color:#eef4ff;font-size:.64rem;font-weight:700;letter-spacing:.01em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
.call-self.is-collapsed .call-self__mode{display:none;}
/* collapse / expand button, top-right inside the frame */
.call-self__toggle{position:absolute;top:6px;right:6px;z-index:3;width:24px;height:24px;border:0;border-radius:50%;background:rgba(4,9,18,.72);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .18s ease;}
.call-self__toggle:hover{background:rgba(22,36,64,.9);}
.call-self__toggle::before{content:"";width:10px;height:2.5px;border-radius:2px;background:currentColor;}
.call-self.is-collapsed .call-self__toggle{inset:0;width:100%;height:100%;border-radius:50%;background:rgba(2,6,15,.2);top:auto;right:auto;}
.call-self.is-collapsed .call-self__toggle:hover{background:rgba(2,6,15,.36);}
.call-self.is-collapsed .call-self__toggle::before{width:10px;height:10px;border:2.5px solid #fff;border-left:0;border-bottom:0;border-radius:1px;background:transparent;transform:rotate(-135deg);}
/* camera-off overlay */
.call-self__off{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-size:.68rem;font-weight:700;color:#9fb0d0;background:#070c16;}
.call-self video#localCallVideo.has-local-frame ~ .call-self__off{display:none;}
.call-self video#localCallVideo.is-camera-off ~ .call-self__off{display:flex;}
.call-self.is-collapsed .call-self__off{font-size:0;padding:0;}
@media (max-width:760px){
  .call-video-grid{flex-direction:column!important;align-items:stretch!important;}
  .call-video-grid>video#remoteCallVideo{width:100%!important;align-self:stretch!important;}
  .call-self{align-self:flex-end!important;width:132px!important;}
  .call-self.is-collapsed{width:56px!important;}
}

/* ===== Message edit: "изменено" mark + inline editor (2026-07-09) ===== */
.message-edited-mark{margin-left:6px;font-size:.72em;opacity:.6;font-style:italic;user-select:none;white-space:nowrap;}
.message-edit-box{margin:6px 0 4px;display:flex;flex-direction:column;gap:8px;}
.message-edit-textarea{width:100%;min-height:64px;resize:vertical;line-height:1.4;}
.message-edit-actions{display:flex;gap:8px;flex-wrap:wrap;}
.message-edit-actions .site-btn{min-height:34px;padding:0 14px;}
.message-edit-btn{cursor:pointer;}

/* ===== 2026-07-10: file-name overflow guard (project-wide) =====
   A selected file's name is written verbatim into the label span. Long,
   space-less names (e.g. copy_56D240E1-B1AB-4562-B46E-BA…) have a large
   intrinsic width; as a flex item with the default min-width:auto they refuse
   to shrink, so ellipsis/max-width are ignored and the name overflows and
   stretches the upload form on mobile. The rules below (last in the cascade)
   let every file-name display shrink and break, and let its flex parent
   shrink too. Kept purely presentational — no markup/JS change needed. */
.custom-file-control{min-width:0!important;max-width:100%!important;}
.custom-file-name{
  flex:1 1 0!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
@media (max-width:700px){
  /* On phones the control stacks; allow the name to wrap onto up to two lines
     instead of a single truncated line, but still never spill out of the box. */
  .custom-file-name{
    white-space:normal!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }
}
/* Story composer file-name rows share the same guard on every viewport. */
.leskov-story-composer__filename,
.leskov-story-composer__cover-file{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* ===== 2026-07-10: LSV currency coin icon (project-wide) =====
   A gold coin with a dog-paw print, shown next to every LSV amount. The icon
   is a self-contained SVG data URI so it needs no extra request and scales
   with the surrounding font-size (1em). Markup is produced by app_lsv_amount()
   / app_lsv_coin() but the classes can also be used by hand. The word "LSV"
   is kept as a text label after the coin. */
.lsv-amount{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;line-height:1}
/* The auto-decorator inserts .lsv-coin as a bare sibling right before the
   amount text (no flex gap available there), so the coin carries its own right
   margin to keep a visible space in every context. Inside .lsv-amount the flex
   gap adds to this, which is fine. */
.lsv-coin{
  display:inline-block;
  width:1.05em;
  height:1.05em;
  flex:0 0 auto;
  margin-right:.35em;
  vertical-align:-.16em;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22lsvFace%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFE79A%22%2F%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23F7C948%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23E8A317%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22lsvRim%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23F9D66B%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23C97F0A%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23lsvRim%29%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2224.5%22%20fill%3D%22url%28%23lsvFace%29%22%20stroke%3D%22%23B9740A%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2224.5%22%20fill%3D%22none%22%20stroke%3D%22%23FFF3C7%22%20stroke-width%3D%221%22%20opacity%3D%220.55%22%2F%3E%3Cg%20fill%3D%22%238A560B%22%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2240.5%22%20rx%3D%229%22%20ry%3D%227.4%22%2F%3E%3Cellipse%20cx%3D%2221.5%22%20cy%3D%2231%22%20rx%3D%223.7%22%20ry%3D%224.8%22%2F%3E%3Cellipse%20cx%3D%2242.5%22%20cy%3D%2231%22%20rx%3D%223.7%22%20ry%3D%224.8%22%2F%3E%3Cellipse%20cx%3D%2226.5%22%20cy%3D%2224%22%20rx%3D%223.2%22%20ry%3D%224.2%22%2F%3E%3Cellipse%20cx%3D%2237.5%22%20cy%3D%2224%22%20rx%3D%223.2%22%20ry%3D%224.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* ===== 2026-07-10: Settings info notice (replaces old email checkboxes) =====
   Full-width informational block inside the compact settings grid. It must NOT
   use .toggle-card, whose 24px+1fr checkbox grid squeezes checkbox-less content
   into the first 24px column (text then wraps one letter per line). */
.settings-notice-card{
  display:block;
  width:100%;
  min-width:0;
  padding:16px 18px;
  border-radius:18px;
  border:1px dashed rgba(122,165,255,.32);
  background:rgba(122,165,255,.06);
}
.settings-notice-card strong{display:block;margin:0 0 4px;font-size:1.02rem;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.settings-notice-card small{display:block;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.settings-notice-card a{color:var(--accent);text-decoration:underline}

/* ============================================================
 * 2026-08-19 — ШАПКА (общий случай): одна строка, без наложений.
 *
 * .header-inner был объявлен на ТРИ колонки
 *   (minmax(220px,.8fr) minmax(360px,1.35fr) auto),
 * а детей у него ЧЕТЫРЕ: .brand, .site-header__search-wrap,
 * .site-nav, .header-actions. Grid дорисовывал неявную 4-ю колонку
 * и ужимал колонку меню ниже её содержимого — при
 * white-space:nowrap пункты выходили за свою колонку и наезжали на
 * соседний блок.
 *
 * Правило включается ТОЛЬКО когда в шапке реально есть и меню, и
 * поиск (:has). Страницы discover/search/notifications, где меню
 * нет, сохраняют свою трёхколоночную раскладку без изменений.
 * ============================================================ */
@media (min-width:1150px){
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap){
    grid-template-columns:
      minmax(0,auto)                /* brand   — по содержимому   */
      minmax(0,1fr)                 /* search  — сжимается первым */
      max-content                   /* nav     — никогда не уже текста */
      max-content !important;       /* actions — по содержимому   */
    grid-template-areas:"brand search nav actions"!important;
    column-gap:clamp(10px,1.3vw,26px)!important;
    row-gap:0!important;
    align-items:center!important;
  }
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) > .brand,
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) > a.brand{grid-area:brand!important;}
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) > .site-header__search-wrap{
    grid-area:search!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;
  }
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) > .site-nav{
    grid-area:nav!important;flex-wrap:nowrap!important;justify-content:flex-end!important;min-width:0!important;
    column-gap:clamp(2px,.5vw,14px)!important;
  }
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) > .header-actions{grid-area:actions!important;justify-self:end!important;}
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) .site-nav a{
    padding:4px clamp(5px,.6vw,11px)!important;font-size:clamp(13px,.83vw,16px)!important;white-space:nowrap!important;
  }
  .site-header .header-inner:has(> .site-nav) .site-nav .language-switcher--menu{display:none!important;}
  .site-header .leskov-search-bar{width:100%!important;max-width:none!important;margin:0!important;}
  .site-header .leskov-search-bar__form,
  .site-header .leskov-search-bar__input{min-width:0!important;}
}
@media (min-width:981px) and (max-width:1500px){
  .site-header .header-inner:has(> .site-nav) .leskov-search-bar__discover{display:none!important;}
}
@media (min-width:981px) and (max-width:1200px){
  .site-header .header-inner:has(> .site-nav) .leskov-search-bar__form{padding-left:9px!important;gap:5px!important;}
  .site-header .header-inner:has(> .site-nav) .leskov-search-bar__submit{min-width:64px!important;padding:0 11px!important;}
  .site-header .header-inner:has(> .site-nav) .brand-copy small{display:none!important;}
}

/* 981–1500px: одной строки хватает только если ужать всё, кроме меню.
   Порядок жертв (от наименее важного): кнопка «Найти» (Enter в поле
   работает), пилюля Discover, подпись под логотипом, размер логотипа,
   плотность языковых пилюль. Меню остаётся полнотекстовым — именно это
   и просил заказчик. */
@media (min-width:981px) and (max-width:1700px){
  .site-header .header-inner:has(> .site-nav) .leskov-search-bar__submit,
  .site-header .header-inner:has(.site-header__search-wrap--home) .leskov-search-bar__submit{display:none!important;}
  .site-header .header-inner:has(> .site-nav) .leskov-search-bar__form,
  .site-header .header-inner:has(.site-header__search-wrap--home) .leskov-search-bar__form{padding:5px 12px 5px 11px!important;gap:5px!important;}
  .site-header .header-inner:has(> .site-nav) .brand-copy small,
  .site-header .header-inner:has(.site-header__search-wrap--home) .brand-copy small{display:none!important;}
  .site-header .header-inner:has(> .site-nav) .brand img,
  .site-header .header-inner:has(.site-header__search-wrap--home) .brand img{width:50px!important;height:50px!important;min-width:50px!important;border-radius:16px!important;}
  .site-header .header-inner:has(> .site-nav) .brand,
  .site-header .header-inner:has(.site-header__search-wrap--home) .brand{grid-template-columns:50px minmax(0,1fr)!important;gap:10px!important;}
  .site-header .header-inner:has(> .site-nav) .header-actions,
  .site-header .header-inner:has(.site-header__search-wrap--home) .header-actions{gap:7px!important;}
  .site-header .header-inner:has(> .site-nav) .language-switcher--header,
  .site-header .header-inner:has(.site-header__search-wrap--home) .language-switcher--header{gap:4px!important;}
  .site-header .header-inner:has(> .site-nav) .language-switcher--header .lang-pill,
  .site-header .header-inner:has(.site-header__search-wrap--home) .language-switcher--header .lang-pill{
    min-width:0!important;padding:6px 9px!important;font-size:12px!important;
  }
}

/* 981–1149px: одна строка физически не влезает — поиск ужимался бы до
   ~90px и становился бесполезным. На этой полосе возвращаем аккуратную
   двухрядную шапку: бренд · поиск · действия, меню — второй строкой по
   центру. Это НЕ откат: наложения нет, меню целиком читаемо. */
@media (min-width:981px) and (max-width:1149px){
  .site-header .header-inner:has(.site-header__search-wrap--home){
    grid-template-columns:auto minmax(180px,1fr) max-content!important;
    grid-template-areas:"brand search actions" "nav nav nav"!important;
    gap:10px clamp(12px,1.5vw,22px)!important;
  }
  .site-header .header-inner:has(.site-header__search-wrap--home) .site-nav{
    justify-content:center!important;
    flex-wrap:wrap!important;
    padding-top:4px!important;
    border-top:1px solid rgba(148,184,226,.1)!important;
  }
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap){
    grid-template-columns:auto minmax(180px,1fr) max-content!important;
    grid-template-areas:"brand search actions" "nav nav nav"!important;
    gap:10px clamp(12px,1.5vw,22px)!important;
  }
  .site-header .header-inner:has(> .site-nav):has(> .site-header__search-wrap) > .site-nav{
    grid-area:nav!important;justify-content:center!important;flex-wrap:wrap!important;
  }
}

/* ============================================================
 * 2026-08-19 — блок «Семья и контакты» на странице профиля.
 * Рисуется app_relations_profile_html() (includes/relations.php)
 * и показывается на profile.php (вкладка «Обзор») и на user.php.
 * ============================================================ */
.leskov-relations__grid{
  display:grid;
  grid-template-columns:minmax(140px,auto) minmax(0,1fr);
  gap:10px 18px;
  align-items:baseline;
  margin:0;
}
.leskov-relations__label{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  font-weight:800;
}
.leskov-relations__value{
  margin:0;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--text);
  font-weight:700;
}
.leskov-relations__sep{color:var(--muted);font-weight:600;}
.leskov-relations__link{
  color:var(--accent);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.leskov-relations__link:hover{text-decoration:underline;}
.leskov-person-chip--inline{font-size:.86rem;}
@media (max-width:640px){
  .leskov-relations__grid{grid-template-columns:1fr;gap:4px 0;}
  .leskov-relations__label{margin-top:10px;}
}

/* ============================================================
 * 2026-08-20 — ВЫПАДАЮЩИЕ СПИСКИ <select>: читаемые варианты.
 *
 * ЧТО БЫЛО СЛОМАНО
 * Само поле select оформлено тёмным (.admin-input: фон rgba(255,255,255,.03),
 * текст var(--text) ≈ #eef4ff), а вот вариантам <option> во всём проекте
 * не было задано НИ ОДНОГО правила. Нативный список ОС рисуется белым,
 * а цвет текста наследуется от select — почти белый по белому. В итоге
 * пункты было видно только под курсором, когда браузер подсвечивал строку
 * своим синим выделением.
 *
 * ЧТО СДЕЛАНО
 *   1) color-scheme:dark на самих select — Chrome/Edge/Firefox после этого
 *      рисуют весь нативный список в тёмной палитре, включая полосу
 *      прокрутки. Это основное лекарство.
 *   2) Явные background/color для option и optgroup — на случай браузеров,
 *      где color-scheme игнорируется, и чтобы задать свой фон, а не
 *      «системный тёмный».
 *   3) Отдельная подсветка выбранного пункта: акцентная заливка с тёмным
 *      текстом, чтобы текущий выбор читался сразу, а не только по наведению.
 *
 * Правило намеренно глобальное (select, а не конкретные классы): списки
 * есть в настройках, в профиле, в форме поста, в админке и на страницах
 * заказов — чинить нужно везде сразу.
 * ============================================================ */
select,
select.admin-input,
.leskov-settings__select,
.admin-input[multiple],
select.leskov-settings__input {
  color-scheme: dark;
}

select option,
select optgroup {
  background-color: #0d1626;
  color: #eef4ff;
}

/* Заголовок группы вариантов — приглушённый, чтобы отличался от пунктов. */
select optgroup {
  color: #aab8d4;
  font-style: normal;
  font-weight: 800;
}

/* Пункт-подсказка со значением "" («Не указано», «Все роли») — тусклее,
   но всё ещё читаемый: раньше он полностью сливался с фоном. */
select option[value=""] {
  color: #9fb0d0;
}

/* Текущий выбор виден без наведения.
 *
 * 2026-08-20 (2): отсюда убран селектор option[selected] — из-за него
 * подсвечивались СРАЗУ ДВА варианта. :checked — это то, что выбрано
 * в браузере прямо сейчас; [selected] — атрибут, который проставил
 * сервер при отрисовке страницы. Пока пользователь не нажал «Сохранить»,
 * это разные варианты: подсвечивался и новый выбор, и старое значение
 * из базы. Оставляем только :checked, а «залипший» атрибут гасим явно —
 * иначе он бы всё равно наследовал оформление от прошлого правила. */
select option:checked {
  background: #7aa5ff linear-gradient(0deg, #7aa5ff, #7aa5ff);
  color: #04111f;
  font-weight: 700;
}
select option[selected]:not(:checked) {
  background-color: #0d1626;
  color: #eef4ff;
  font-weight: 400;
}
select option[value=""][selected]:not(:checked) {
  color: #9fb0d0;
}

/* Отключённые варианты — явно недоступны, а не «невидимы». */
select option:disabled {
  color: #63708c;
  background-color: #0a1120;
}

/* Поле, у которого выбран пустой вариант, показывает подсказку тусклее —
   так select визуально ведёт себя как input с placeholder. */
select.admin-input:has(option[value=""]:checked),
select.leskov-settings__select:has(option[value=""]:checked) {
  color: #9fb0d0;
}

/* ============================================================
 * 2026-08-20 — ПОЛЗУНКИ (громкость, перемотка, все input[type=range]).
 *
 * ЧТО БЫЛО: бегунок — плоский кружок 18px сплошного цвета #74a8ff.
 * Ни transition, ни :hover, ни :active, ни кольца фокуса — ползунок
 * никак не реагировал ни на курсор, ни на перетаскивание и выглядел
 * нарисованным, а не живым.
 *
 * ЧТО СТАЛО:
 *   покой        — объёмный бегунок с бликом и мягкой тенью;
 *   наведение    — вырастает и загорается ореолом;
 *   перетаскивание — вырастает сильнее, ореол плотнее, дорожка ярче;
 *   фокус с клавиатуры — отдельное кольцо (раньше его не было совсем).
 *
 * Заливка дорожки берётся из --range-fill, который проставляет JS
 * плеера и настроек, — механику не трогаем, только оформление.
 *
 * Всё оформлено через transition на transform/box-shadow: это
 * композиторные свойства, поэтому анимация не вызывает пересчёт
 * раскладки даже на длинной дорожке перемотки.
 * ============================================================ */

input[type="range"] {
  cursor: pointer;
  transition: filter .22s ease;
}
input[type="range"]:hover  { filter: saturate(1.08) brightness(1.04); }
input[type="range"]:active { filter: saturate(1.14) brightness(1.07); }

/* ---------- бегунок: WebKit / Blink ---------- */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  /* блик сверху делает кружок объёмным, а не плоским пятном */
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #8fb8ff, #6a9bff);
  box-shadow:
    0 2px 8px rgba(4,11,26,.55),
    0 0 0 0 rgba(122,165,255,.34);
  transition:
    transform .18s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s ease,
    background .22s ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.22);
  box-shadow:
    0 4px 14px rgba(4,11,26,.6),
    0 0 0 7px rgba(122,165,255,.20);
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.34);
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,1), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #a6c8ff, #7aa5ff);
  box-shadow:
    0 6px 18px rgba(4,11,26,.66),
    0 0 0 11px rgba(122,165,255,.26);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 4px 14px rgba(4,11,26,.6),
    0 0 0 4px rgba(121,227,210,.85),
    0 0 0 10px rgba(122,165,255,.22);
}

/* ---------- бегунок: Firefox ---------- */
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #8fb8ff, #6a9bff);
  box-shadow: 0 2px 8px rgba(4,11,26,.55);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.22);
  box-shadow: 0 4px 14px rgba(4,11,26,.6), 0 0 0 7px rgba(122,165,255,.20);
}
input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.34);
  box-shadow: 0 6px 18px rgba(4,11,26,.66), 0 0 0 11px rgba(122,165,255,.26);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(121,227,210,.85), 0 0 0 10px rgba(122,165,255,.22);
}

/* Дорожка чуть подрастает под курсором — ползунок ощущается «живым»
   целиком, а не только кружком. */
input[type="range"]::-webkit-slider-runnable-track { transition: height .18s ease; }
input[type="range"]:hover  { --range-glow: 0 0 14px rgba(122,165,255,.28); }
input[type="range"]:active { --range-glow: 0 0 20px rgba(122,165,255,.42); }
input[type="range"]:hover,
input[type="range"]:active { box-shadow: var(--range-glow, none); }

/* Отключённый ползунок не должен «оживать». */
input[type="range"]:disabled { cursor: not-allowed; filter: saturate(.6) opacity(.7); }
input[type="range"]:disabled::-webkit-slider-thumb,
input[type="range"]:disabled:hover::-webkit-slider-thumb,
input[type="range"]:disabled:active::-webkit-slider-thumb { transform: none; box-shadow: 0 2px 6px rgba(4,11,26,.4); }
input[type="range"]:disabled::-moz-range-thumb,
input[type="range"]:disabled:hover::-moz-range-thumb { transform: none; }

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  input[type="range"],
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb,
  input[type="range"]::-webkit-slider-runnable-track { transition: none !important; }
  input[type="range"]:hover::-webkit-slider-thumb,
  input[type="range"]:active::-webkit-slider-thumb,
  input[type="range"]:hover::-moz-range-thumb,
  input[type="range"]:active::-moz-range-thumb { transform: none !important; }
}

/* ============================================================
 * 2026-08-20 — Ссылка «Вернуться ко входу» под кнопкой.
 *
 * ЧТО БЫЛО: под крупной градиентной кнопкой («Прислать ссылку»,
 * «Подтвердить вход») шла голая текстовая ссылка 16px без отступа —
 * замер показал, что она даже наезжала на нижний край карточки на 6px.
 * Рядом с оформленной кнопкой это читалось как сбитый, недоделанный
 * элемент.
 *
 * ЧТО СТАЛО: вторая кнопка того же семейства — та же ширина, та же
 * скруглённость и высота, но «призрачная» (контур вместо заливки).
 * Пара «основное действие + возврат» теперь выглядит как один блок,
 * а иерархия сохранена: заливка притягивает взгляд, контур — нет.
 * ============================================================ */
.auth-2fa-back {
  /* 2026-08-20 (2): было 4px — кнопка возврата вплотную примыкала к
     карточке и читалась как её нижний край. Даём воздух, чтобы она
     стала отдельным действием «под окном», а не частью окна. */
  margin: 18px 0 0 !important;
  text-align: center;
}
.auth-2fa-back a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #cfe0ff;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .18s ease;
}
.auth-2fa-back a:hover,
.auth-2fa-back a:focus-visible {
  border-color: rgba(122, 165, 255, .5);
  background: rgba(122, 165, 255, .1);
  color: #eef4ff;
  text-decoration: none;
  transform: translateY(-1px);
}
.auth-2fa-back a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(122, 165, 255, .18);
}
.auth-2fa-back a:active { transform: translateY(0); }

/* Внутри карточек восстановления и 2FA ссылка — отдельная строка сетки.
   У самой сетки уже есть gap:12px, поэтому здесь добавляем ровно столько,
   чтобы суммарный отступ вышел ~26px: этого хватает, чтобы кнопка
   визуально отделилась от карточки, и при этом пара не развалилась. */
.auth-recover-stack .auth-2fa-back,
.auth-2fa-stack .auth-2fa-back { margin-top: 14px !important; }

/* Тонкая линия-разделитель над кнопкой: подсказывает, что действие
   относится ко всей странице, а не к форме внутри карточки. */
.auth-recover-stack .auth-2fa-back::before,
.auth-2fa-stack .auth-2fa-back::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 auto 14px;
  width: min(180px, 46%);
  /* var(--line) — 18% прозрачности, на тёмном фоне такую линию не видно.
     Берём чуть плотнее, чтобы разделитель читался как задуманный элемент,
     а не как артефакт отрисовки. */
  background: linear-gradient(90deg, transparent, rgba(126, 153, 198, .42), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .auth-2fa-back a { transition: none !important; }
  .auth-2fa-back a:hover { transform: none !important; }
}

/* ============================================================
 * 2026-08-20 (2) — ЗАЛИВКА ПОЛЗУНКОВ: полоса не ехала за кружком.
 *
 * ЧТО БЫЛО
 *   Дорожка красится градиентом с остановкой в --range-fill. JS
 *   проставлял туда голый процент («66%»), считая его от ВСЕЙ ширины.
 *   Но центр кружка физически ходит не по всей ширине, а по отрезку
 *   (ширина − диаметр кружка): в нуле он не в точке 0, а на 9px правее,
 *   в максимуме — на 9px левее правого края. Из-за этого край синей
 *   заливки и кружок расходились, и тем заметнее, чем ближе к краям.
 *
 *   Вдобавок в Firefox дорожку рисовал ещё и ::-moz-range-progress —
 *   получались две разные заливки поверх друг друга, каждая по своей
 *   геометрии.
 *
 * ЧТО СТАЛО
 *   --range-fill теперь не процент, а выражение
 *       calc(кружок/2 + (100% − кружок) * доля)
 *   то есть ровно координата центра кружка. JS (scripts/site.js)
 *   пересчитывает её на каждый input/change и на медиасобытия плеера.
 *   У Firefox своя заливка выключена — обе системы рисуют одно и то же.
 * ============================================================ */

input[type="range"] {
  --range-thumb: 18px;
  background-repeat: no-repeat;
}

/* Firefox: гасим вторую, «родную» заливку — рисуем только своим градиентом. */
input[type="range"]::-moz-range-track    { background: transparent; border: 0; }
input[type="range"]::-moz-range-progress { background: transparent; height: 8px; }

/* Ползунок в шапке плеера чуть тоньше — кружок тот же, но дорожка ниже. */
.header-player-volume input[type="range"] { --range-thumb: 18px; }

/* ============================================================
 * 2026-08-20 — СВЕТЛАЯ ТЕМА.
 *
 * Тёмное оформление остаётся основным и НЕ МЕНЯЕТСЯ ни на пиксель:
 * весь блок ниже действует только внутри [data-theme="light"], а
 * вариант «как в системе» — внутри [data-theme="auto"] и только при
 * системной светлой теме. Атрибут data-theme ставит сервер на <html>
 * (app_theme_html_attrs), поэтому светлая страница не «моргает»
 * тёмной перед загрузкой стилей.
 *
 * Почему не просто инверсия цветов: интерфейс построен на «подсветках»
 * rgba(255,255,255,.03…​.14) — светлых плёнках поверх тёмного фона. На
 * белом фоне такая плёнка невидима, поэтому для светлой темы заведены
 * парные переменные --tint-* (затемняющие плёнки) и переопределены
 * семейства селекторов, где эти плёнки использовались напрямую.
 * ============================================================ */

:root {
  /* Плёнки поверхностей. В тёмной теме — светлые, как и было. */
  --tint-1: rgba(255,255,255,.03);
  --tint-2: rgba(255,255,255,.05);
  --tint-3: rgba(255,255,255,.08);
  --tint-4: rgba(255,255,255,.12);
  --tint-5: rgba(255,255,255,.18);
  --on-accent: #04111f;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] { color-scheme: light; }
}
html[data-theme="light"] { color-scheme: light; }

/* Общая палитра светлой темы. Оба селектора ведут к одному набору
   значений: явный выбор и «как в системе». */
html[data-theme="light"],
html[data-theme="auto"] {
  --light-bg: #eef2fa;
  --light-bg-elevated: #ffffff;
  --light-panel: rgba(255,255,255,.92);
  --light-panel-strong: #ffffff;
  --light-line: rgba(23,38,74,.14);
  --light-line-strong: rgba(23,38,74,.26);
  --light-text: #101a2e;
  --light-muted: #55658a;
  --light-accent: #2f6bff;
  --light-accent-2: #0f9d8f;
  --light-danger: #d23f5c;
  --light-shadow: 0 18px 44px rgba(23,38,74,.10);
  --light-tint-1: rgba(23,38,74,.035);
  --light-tint-2: rgba(23,38,74,.055);
  --light-tint-3: rgba(23,38,74,.085);
  --light-tint-4: rgba(23,38,74,.12);
  --light-tint-5: rgba(23,38,74,.18);
}

html[data-theme="light"] {
  --bg: var(--light-bg);
  --bg-elevated: var(--light-bg-elevated);
  --panel: var(--light-panel);
  --panel-strong: var(--light-panel-strong);
  --line: var(--light-line);
  --line-strong: var(--light-line-strong);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --accent: var(--light-accent);
  --accent-2: var(--light-accent-2);
  --danger: var(--light-danger);
  --shadow: var(--light-shadow);
  --tint-1: var(--light-tint-1);
  --tint-2: var(--light-tint-2);
  --tint-3: var(--light-tint-3);
  --tint-4: var(--light-tint-4);
  --tint-5: var(--light-tint-5);
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --bg: var(--light-bg);
    --bg-elevated: var(--light-bg-elevated);
    --panel: var(--light-panel);
    --panel-strong: var(--light-panel-strong);
    --line: var(--light-line);
    --line-strong: var(--light-line-strong);
    --text: var(--light-text);
    --muted: var(--light-muted);
    --accent: var(--light-accent);
    --accent-2: var(--light-accent-2);
    --danger: var(--light-danger);
    --shadow: var(--light-shadow);
    --tint-1: var(--light-tint-1);
    --tint-2: var(--light-tint-2);
    --tint-3: var(--light-tint-3);
    --tint-4: var(--light-tint-4);
    --tint-5: var(--light-tint-5);
    --on-accent: #ffffff;
  }
}

/* ------------------------------------------------------------
 * Светлая тема: точечные правки для мест, где цвет задан не
 * переменной, а прямо в правиле. Перечень получен не на глаз:
 * страницы прогонялись скриптом, который ищет элементы с тёмным
 * фоном или тёмным градиентом при светлой теме. Ниже — всё, что
 * он нашёл, кроме подписей ПОВЕРХ фотографий и видео: там тёмная
 * подложка нужна и в светлой теме, иначе текст не читается.
 *
 * Селекторы начинаются с html[data-theme=...] — это выше по
 * специфичности любого правила с классом, поэтому порядок
 * подключения файлов роли не играет.
 * ------------------------------------------------------------ */

/* Фон страницы: убираем тёмные «дымки» из радиальных градиентов. */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(47, 107, 255, .10), transparent 26%),
    radial-gradient(circle at bottom right, rgba(15, 157, 143, .10), transparent 28%),
    var(--bg);
}

/* Шапка и строка поиска. */
html[data-theme="light"] .site-header,
html[data-theme="light"] .header-inner {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,253,.92));
  border-color: var(--line);
}
html[data-theme="light"] .leskov-search-bar__form,
html[data-theme="light"] .site-header .site-header__search-wrap--home .leskov-search-bar__form {
  background: #ffffff !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(23,38,74,.07) !important;
}
html[data-theme="light"] .leskov-search-bar__form:focus-within,
html[data-theme="light"] .site-header .site-header__search-wrap--home .leskov-search-bar__form:focus-within {
  background: #ffffff !important;
  border-color: rgba(47,107,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(47,107,255,.12), 0 12px 30px rgba(23,38,74,.10) !important;
}
html[data-theme="light"] .leskov-search-bar__input { color: var(--text); }
html[data-theme="light"] .site-nav { background: var(--panel-strong); }

/* Карточки главной: общий тёмный градиент -> светлый. */
html[data-theme="light"] .hero-copy,
html[data-theme="light"] .hero-visual,
html[data-theme="light"] .featured-card,
html[data-theme="light"] .shop-card,
html[data-theme="light"] .track-card,
html[data-theme="light"] .news-card,
html[data-theme="light"] .video-card,
html[data-theme="light"] .streaming-panel,
html[data-theme="light"] .utility-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .gallery-card,
html[data-theme="light"] .home-user-card,
html[data-theme="light"] .stack-card {
  background: linear-gradient(180deg, #ffffff, #f7f9fe);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* Панель с именем поверх обложки профиля. Оставляем «стеклянной»,
   но светлой — тёмная плашка на светлой странице выглядела заплаткой. */
html[data-theme="light"] .profile-cover-panel,
html[data-theme="light"] .profile-cover-panel--mobile {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.94));
  border-color: rgba(23,38,74,.12);
  box-shadow: 0 18px 44px rgba(23,38,74,.14);
  color: var(--text);
}
html[data-theme="light"] .profile-cover-panel * { color: inherit; }

/* Мелкие кнопки-действия под постами. */
html[data-theme="light"] .tiny-action,
html[data-theme="light"] .track-premium-actions .tiny-action,
html[data-theme="light"] .track-mini-form .tiny-action {
  background: #ffffff !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .tiny-action.is-active {
  background: linear-gradient(135deg, rgba(47,107,255,.14), rgba(15,157,143,.12)) !important;
  border-color: rgba(15,157,143,.45) !important;
  color: #0b4f49 !important;
}

/* Плёнки-поверхности: то, что в тёмной теме было «светлее фона»,
   в светлой должно быть «темнее фона». */
html[data-theme="light"] .site-btn,
html[data-theme="light"] .button,
html[data-theme="light"] .player-btn,
html[data-theme="light"] .lang-pill,
html[data-theme="light"] .header-icon-btn,
html[data-theme="light"] .menu-toggle,
html[data-theme="light"] .search-input,
html[data-theme="light"] .admin-input,
html[data-theme="light"] .admin-textarea,
html[data-theme="light"] select.admin-input,
html[data-theme="light"] .info-list > div,
html[data-theme="light"] .hero-stat,
html[data-theme="light"] .toggle-card,
html[data-theme="light"] .leskov-settings__card,
html[data-theme="light"] .leskov-settings__input,
html[data-theme="light"] .leskov-settings__select {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .site-btn:hover,
html[data-theme="light"] .button:hover,
html[data-theme="light"] .player-btn:hover { background: #f3f6fd; }

/* Основная кнопка и «призрачная» — сохраняем иерархию. */
html[data-theme="light"] .site-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .site-btn.danger {
  background: rgba(210,63,92,.10);
  border-color: rgba(210,63,92,.35);
  color: #a31530;
}

/* Всплывающее окно про cookie. */
html[data-theme="light"] .cookie-banner {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* Плеер и док: панели светлые, но обложка и видео остаются тёмными. */
html[data-theme="light"] .leskov-player__panel,
html[data-theme="light"] .leskov-dock,
html[data-theme="light"] .header-player-now,
html[data-theme="light"] .header-notice-dropdown,
html[data-theme="light"] .promo-player-bar {
  background: linear-gradient(180deg, #ffffff, #f5f8fe);
  border-color: var(--line);
  color: var(--text);
}

/* Тени по всему макету рассчитаны на тёмный фон: на светлом чёрный
   «дым» выглядит грязно. Делаем их синеватыми и легче. */
html[data-theme="light"] .surface-card,
html[data-theme="light"] .profile-sidebar,
html[data-theme="light"] .messenger-sidebar,
html[data-theme="light"] .messenger-main,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .install-card { box-shadow: var(--shadow); }

/* Полосы прокрутки и нативные элементы следуют светлой теме
   благодаря color-scheme выше; здесь только выпадающие списки,
   которым в тёмной теме мы задавали свои цвета вручную. */
html[data-theme="light"] select,
html[data-theme="light"] select.admin-input,
html[data-theme="light"] .leskov-settings__select,
html[data-theme="light"] .admin-input[multiple],
html[data-theme="light"] select.leskov-settings__input { color-scheme: light; }
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup { background-color: #ffffff; color: var(--text); }
html[data-theme="light"] select optgroup { color: var(--muted); }
html[data-theme="light"] select option[value=""] { color: #7b89a6; }
html[data-theme="light"] select option:checked {
  background: var(--accent) linear-gradient(0deg, var(--accent), var(--accent));
  color: #ffffff;
}
html[data-theme="light"] select option[selected]:not(:checked) { background-color: #ffffff; color: var(--text); font-weight: 400; }
html[data-theme="light"] select option:disabled { color: #9aa6bd; background-color: #f2f4f9; }

/* Дозачистка после повторного прогона сканера. */
html[data-theme="light"] .bio-copy,
html[data-theme="light"] .biography-grid .bio-media .video-card {
  background: linear-gradient(180deg, #ffffff, #f7f9fe);
  border-color: var(--line);
}
html[data-theme="light"] .header-inner {
  background: rgba(255,255,255,.86);
}
html[data-theme="light"] .leskov-player--featured,
html[data-theme="light"] .leskov-player:not(.leskov-player--video) {
  background: linear-gradient(180deg, #ffffff, #f5f8fe);
  border-color: var(--line);
  color: var(--text);
}
/* Обложка трека и само видео остаются тёмными — это подложка под
   картинку, на светлом фоне она смотрится рамкой, а не «дырой». */

/* Разное, что заметно на светлом: полупрозрачные плашки-«стёкла». */
html[data-theme="light"] .pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .small-note {
  background: rgba(23,38,74,.04);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="light"] .leskov-toggle__track { background: rgba(23,38,74,.16); }
html[data-theme="light"] .leskov-settings__nav-link.is-active,
html[data-theme="light"] .profile-nav a.is-active {
  background: rgba(47,107,255,.10);
  color: var(--text);
}
html[data-theme="light"] input[type="range"] {
  background: linear-gradient(90deg, var(--accent) 0, var(--accent) var(--range-fill,0%), rgba(23,38,74,.14) var(--range-fill,0%), rgba(23,38,74,.14) 100%) !important;
}

/* Панель настроек и оставшиеся тёмные плашки. */
html[data-theme="light"] .leskov-settings__section {
  background: rgba(255,255,255,.86);
  border-color: var(--line);
}
html[data-theme="light"] .leskov-settings__nav {
  background: rgba(255,255,255,.92);
  border-color: var(--line);
}
html[data-theme="light"] .biography-grid .bio-media .video-card {
  background: linear-gradient(180deg, #ffffff, #f7f9fe) !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] .auth-media-frame__caption {
  background: rgba(255,255,255,.92);
  color: var(--text);
}
html[data-theme="light"] .admin-input,
html[data-theme="light"] .admin-textarea,
html[data-theme="light"] .search-input,
html[data-theme="light"] select.admin-input {
  background: #ffffff !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .admin-input::placeholder,
html[data-theme="light"] .admin-textarea::placeholder,
html[data-theme="light"] .leskov-settings__input::placeholder { color: #8b98b4; }

/* Шапка со «стеклом»: у неё двойной фон (padding-box + border-box)
   и !important, поэтому переопределяем целиком, сохранив приём
   с градиентной рамкой. */
html[data-theme="light"] .header-inner {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,254,.86)) padding-box,
    linear-gradient(135deg, rgba(47,107,255,.34), rgba(15,157,143,.22), rgba(23,38,74,.08)) border-box !important;
  box-shadow:
    0 20px 46px rgba(23,38,74,.10),
    0 1px 0 rgba(255,255,255,.9),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ============================================================
 * 2026-08-20 (часть 2) — ДОВОДКА СВЕТЛОЙ ТЕМЫ.
 *
 * Первая часть светлой темы закрывала только site.css. Оказалось,
 * что интерфейс собран из 19 таблиц стилей, и в 17 из них цвета
 * заданы жёстко, тёмными. Отсюда всё, что было видно на скринах:
 * страница светлая, а внутри неё — тёмные коробки Discover, поиска,
 * входа, выпадающих списков, модальных окон.
 *
 * Проверка теперь другая. Старый сканер смотрел на цвет ФОНА и
 * поэтому пропускал бледный текст на белом — фон-то светлый. Новый
 * (t5/contrast.cjs) считает настоящий контраст WCAG между цветом
 * текста и цветом, который реально лежит под элементом, с учётом
 * прозрачности и всех родителей. Всё ниже — устранение того, что
 * он нашёл, до отношения 4.5:1 (3:1 для крупного текста).
 *
 * Что НАМЕРЕННО остаётся тёмным и в светлой теме: подложки под
 * видео и фотографии (просмотр историй, лайтбокс галереи, сцена
 * звонка, кружок видео). Там тёмный фон — часть кадра, а подписи
 * поверх него рассчитаны на тёмное. Светлая заливка сделала бы их
 * нечитаемыми, а не наоборот.
 *
 * Тёмная тема по-прежнему не затронута: каждый селектор ниже
 * начинается с html[data-theme="light"] либо с [data-theme="auto"]
 * внутри @media (prefers-color-scheme: light).
 * ============================================================ */

html[data-theme="light"] {
  /* Отдельная, более глубокая пара для градиентных кнопок. Исходная
     (#2f6bff → #0f9d8f) на белом тексте давала 4.05:1 и 2.5:1 —
     ниже нормы. Эта даёт 6.1:1 и 5.3:1 и остаётся тем же
     сине-бирюзовым переходом. */
  --accent-btn-1: #2358d8;
  --accent-btn-2: #0b7a70;
  --accent-grad: linear-gradient(135deg, var(--accent-btn-1), var(--accent-btn-2));
}

/* ------------------------------------------------------------
 * 1. ПОИСК: строка, выпадающая подсказка, страницы Discover,
 *    результатов и ленты хэштега (styles/search.css).
 * ------------------------------------------------------------ */

/* Выпадающий список подсказок под строкой поиска. */
html[data-theme="light"] .leskov-search-bar__dropdown {
  border-color: var(--line);
  background:
    radial-gradient(circle at 16% 0%, rgba(47, 107, 255, .07), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7f9fe);
  box-shadow:
    0 28px 80px rgba(23, 38, 74, .16),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  scrollbar-color: rgba(47, 107, 255, .38) transparent;
}
html[data-theme="light"] .leskov-search-bar__dropdown::-webkit-scrollbar-thumb { background: rgba(47, 107, 255, .38); }
html[data-theme="light"] .leskov-search-bar__group + .leskov-search-bar__group { border-top-color: var(--line); }
html[data-theme="light"] .leskov-search-bar__group-title { color: #4a5a7d; }
html[data-theme="light"] .leskov-search-bar__item { background: rgba(23, 38, 74, .035); border-color: var(--line); color: var(--text); }
html[data-theme="light"] .leskov-search-bar__item:hover,
html[data-theme="light"] .leskov-search-bar__item.is-active { background: rgba(47, 107, 255, .10); border-color: rgba(47, 107, 255, .38); }
html[data-theme="light"] .leskov-search-bar__item-name { color: var(--text); }
html[data-theme="light"] .leskov-search-bar__item-meta,
html[data-theme="light"] .leskov-search-bar__empty,
html[data-theme="light"] .leskov-search-bar__loading { color: var(--muted); }
html[data-theme="light"] .leskov-search-bar__footer { border-top-color: var(--line); color: var(--muted); }
html[data-theme="light"] .leskov-search-bar__input::placeholder { color: #7b89a6; }

/* Страницы Discover / результаты поиска / лента хэштега — общая
   «коробка». Была тёмно-синей плитой посреди светлой страницы. */
html[data-theme="light"] .leskov-search-results,
html[data-theme="light"] .leskov-discover,
html[data-theme="light"] .leskov-hashtag-feed {
  border-color: var(--line);
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 107, 255, .07), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(15, 157, 143, .06), transparent 32%),
    linear-gradient(180deg, #ffffff, #f6f9fe);
  box-shadow: 0 24px 62px rgba(23, 38, 74, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Панель вкладок и сами вкладки. */
html[data-theme="light"] .leskov-search-tabs {
  border-color: var(--line);
  background: rgba(23, 38, 74, .045);
}
html[data-theme="light"] .leskov-search-tab {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .leskov-search-tab:hover { border-color: rgba(47, 107, 255, .45); }
html[data-theme="light"] .leskov-search-tab.is-active {
  background: var(--accent-grad);
  color: #ffffff;
  border-color: transparent;
}
html[data-theme="light"] .leskov-search-tab__count,
html[data-theme="light"] .leskov-search-tab .pill {
  background: rgba(23, 38, 74, .10);
  color: var(--text);
}
html[data-theme="light"] .leskov-search-tab.is-active .leskov-search-tab__count,
html[data-theme="light"] .leskov-search-tab.is-active .pill {
  background: rgba(255, 255, 255, .28);
  color: #ffffff;
}

/* Строки, карточки людей, постов и треков внутри. */
html[data-theme="light"] .leskov-discover__row,
html[data-theme="light"] .leskov-discover__post,
html[data-theme="light"] .leskov-discover__track,
html[data-theme="light"] .leskov-hashtag-feed__post,
html[data-theme="light"] .leskov-discover__col {
  border-color: var(--line);
  background: rgba(23, 38, 74, .035);
  color: var(--text);
}
html[data-theme="light"] .leskov-discover__row:hover,
html[data-theme="light"] .leskov-discover__post:hover,
html[data-theme="light"] .leskov-discover__track:hover,
html[data-theme="light"] .leskov-hashtag-feed__post:hover {
  border-color: rgba(47, 107, 255, .40);
  background: rgba(47, 107, 255, .07);
}
html[data-theme="light"] .leskov-discover__title,
html[data-theme="light"] .leskov-discover__row-body strong,
html[data-theme="light"] .leskov-discover__track-title,
html[data-theme="light"] .inline-badged-name,
html[data-theme="light"] .inline-badged-name strong { color: var(--text); }
html[data-theme="light"] .leskov-discover__track-meta,
html[data-theme="light"] .leskov-discover__empty,
html[data-theme="light"] .leskov-search-results .small,
html[data-theme="light"] .leskov-discover .small { color: var(--muted); }

/* Кнопка «Discover» в шапке и подпись-кикер над заголовком. */
html[data-theme="light"] .leskov-search-bar__discover {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .leskov-search-bar__discover.is-active,
html[data-theme="light"] .leskov-search-bar__submit {
  background: var(--accent-grad);
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .leskov-search-kicker {
  background: rgba(15, 157, 143, .10);
  border-color: rgba(15, 157, 143, .34);
  color: #0a6c62;
}
html[data-theme="light"] .leskov-hashtag-chip__count { background: rgba(23, 38, 74, .12); color: var(--text); }

/* ------------------------------------------------------------
 * 2. СТРАНИЦА ВХОДА И РЕГИСТРАЦИИ.
 *    Здесь фон карточек задан прямо в правиле, тёмным, поэтому
 *    светлая тема их не касалась и вся страница оставалась тёмной
 *    коробкой с тёмным же текстом — заголовки «Вход», «Создание
 *    аккаунта», «Восстановление пароля» просто не читались.
 * ------------------------------------------------------------ */
html[data-theme="light"] body.auth-page .auth-card {
  background: linear-gradient(180deg, #ffffff, #f5f8fe);
  border-color: var(--line);
  box-shadow: 0 28px 74px rgba(23, 38, 74, .12);
}
html[data-theme="light"] body.auth-page .auth-grid > .surface-card {
  background: linear-gradient(180deg, #ffffff, #f7f9fe);
  border-color: var(--line);
}
html[data-theme="light"] body.auth-page .auth-grid > .surface-card label,
html[data-theme="light"] body.auth-page .auth-modal__dialog label { color: var(--text); }
html[data-theme="light"] body.auth-page .auth-card .admin-input,
html[data-theme="light"] body.auth-page .auth-card select.admin-input,
html[data-theme="light"] body.auth-page .auth-modal__dialog .admin-input {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--text);
}
html[data-theme="light"] body.auth-page .auth-card .admin-input::placeholder { color: #8b98b4; }
html[data-theme="light"] body.auth-page .auth-inline-meta .button-ghost {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] body.auth-page .auth-modal__backdrop { background: rgba(23, 38, 74, .40); }
html[data-theme="light"] body.auth-page .auth-modal__dialog {
  background: linear-gradient(180deg, #ffffff, #f6f9fe);
  border-color: var(--line);
  box-shadow: 0 30px 84px rgba(23, 38, 74, .22);
}
html[data-theme="light"] body.auth-page .auth-modal__head h2 { color: var(--text); }
html[data-theme="light"] body.auth-page .auth-modal__head p.small { color: var(--muted); }
html[data-theme="light"] body.auth-page .auth-modal__close {
  background: rgba(23, 38, 74, .06);
  border-color: var(--line);
  color: var(--text);
}
/* Правая колонка-«витрина»: остаётся тёмной — это стилизованный
   экран телефона с подсветкой, светлым он выглядит выцветшим. Но
   рамку и тень приводим к светлой странице, чтобы не висел
   чёрный прямоугольник без опоры. */
html[data-theme="light"] body.auth-page .auth-media-frame {
  border-color: rgba(23, 38, 74, .16);
  box-shadow: 0 26px 66px rgba(23, 38, 74, .18);
}
/* Вкладки «Вход | Регистрация». */
html[data-theme="light"] body.auth-page .auth-tabs { background: rgba(23, 38, 74, .05); border-color: var(--line); }
html[data-theme="light"] body.auth-page .auth-tabs a,
html[data-theme="light"] body.auth-page .auth-tabs button { color: var(--text); }

/* ------------------------------------------------------------
 * 3. ССЫЛКИ-ВОЗВРАТЫ И ВСПОМОГАТЕЛЬНЫЕ ССЫЛКИ.
 *    «← На сайт» был задан цветом #c9d7f5 — светло-голубым для
 *    тёмного фона. На белом это 1.4:1, то есть почти невидимо.
 *    Именно про него написано «выбор меню не работает».
 * ------------------------------------------------------------ */
html[data-theme="light"] .back-link { color: #33456b; }
html[data-theme="light"] .back-link:hover,
html[data-theme="light"] .back-link:focus-visible { color: var(--accent); }
html[data-theme="light"] .leskov-relations__link,
html[data-theme="light"] .leskov-hashtag,
html[data-theme="light"] a.leskov-hashtag { color: #1f56c8; }
html[data-theme="light"] .leskov-hashtag:hover { color: #17408f; }
html[data-theme="light"] .leskov-skip-link { background: #1c4fd0; color: #ffffff; }

/* ------------------------------------------------------------
 * 4. КНОПКИ.
 *    .button-secondary наследовал светлый цвет текста для тёмного
 *    фона (#eef4ff) и на белой кнопке пропадал совсем.
 * ------------------------------------------------------------ */
html[data-theme="light"] .button-secondary {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--text);
}
html[data-theme="light"] .button-secondary:hover { background: #f1f5fd; border-color: rgba(47, 107, 255, .45); }
/* Градиентные кнопки: тот же переход, но глубже — ради контраста
   с белым текстом. Ниже перечислены все места, где этот градиент
   используется как фон под светлым текстом. */
html[data-theme="light"] .site-btn.primary,
html[data-theme="light"] a.site-btn.primary,
html[data-theme="light"] button.site-btn.primary,
html[data-theme="light"] .button.button-primary,
html[data-theme="light"] .button:not(.button-secondary):not(.button-ghost),
html[data-theme="light"] .leskov-poll-vote-btn,
html[data-theme="light"] .home-event-button,
html[data-theme="light"] .leskov-settings__submit {
  background: var(--accent-grad);
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .site-btn.primary:hover,
html[data-theme="light"] .button:not(.button-secondary):not(.button-ghost):hover {
  background: linear-gradient(135deg, #1c4bc0, #096961);
}
html[data-theme="light"] .site-chip-btn {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

/* ------------------------------------------------------------
 * 5. ПОСТЫ: перевод, опросы, реакции, «показать полностью».
 * ------------------------------------------------------------ */
/* Кнопка «Перевести на эстонский»: мятный текст на мятном фоне. */
html[data-theme="light"] .post-translate-btn,
html[data-theme="light"] .site-chip-btn.post-translate-btn {
  background: rgba(15, 157, 143, .10) !important;
  border-color: rgba(15, 157, 143, .38) !important;
  color: #0a6157 !important;
}
html[data-theme="light"] .post-translation-box {
  background: rgba(15, 157, 143, .07);
  border-color: rgba(15, 157, 143, .26);
  box-shadow: 0 12px 28px rgba(23, 38, 74, .08);
  color: var(--text);
}
html[data-theme="light"] .post-translation-box strong { color: #0a6157; }
html[data-theme="light"] .post-translation-box.is-error {
  background: rgba(210, 63, 92, .08);
  border-color: rgba(210, 63, 92, .30);
  color: #96182f;
}
/* Полоса «показать полностью»: под текстом лежал тёмный градиент,
   который на светлой карточке читался грязным пятном. */
html[data-theme="light"] .post-body-fade::after,
html[data-theme="light"] .post-text-clamp::after,
html[data-theme="light"] .post-body--clamped::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 78%) !important;
}
html[data-theme="light"] .post-more-toggle,
html[data-theme="light"] .post-more-toggle span { color: #1f56c8; }
/* Опросы. */
html[data-theme="light"] .leskov-poll-option__check {
  background: rgba(23, 38, 74, .06);
  border-color: var(--line-strong);
  color: #4a5a7d;
}
html[data-theme="light"] .leskov-poll-option.is-voted .leskov-poll-option__check {
  background: var(--accent-grad);
  color: #ffffff;
  border-color: transparent;
}
html[data-theme="light"] .leskov-poll-option { background: rgba(23, 38, 74, .035); border-color: var(--line); color: var(--text); }
html[data-theme="light"] .leskov-poll-option__bar { background: rgba(47, 107, 255, .16); }
html[data-theme="light"] .leskov-poll-edit { background: rgba(23, 38, 74, .04); border-color: var(--line); }
/* Всплывающая палитра реакций. */
html[data-theme="light"] .leskov-reaction-picker {
  background: #ffffff !important;
  border-color: var(--line) !important;
  box-shadow: 0 18px 44px rgba(23, 38, 74, .18) !important;
}
html[data-theme="light"] .leskov-reaction-picker-btn,
html[data-theme="light"] .leskov-reaction-picker-btn__icon { color: var(--text); }
html[data-theme="light"] .leskov-reaction-picker-btn:hover { background: rgba(47, 107, 255, .10); }
html[data-theme="light"] .leskov-reaction-chip {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .leskov-reaction-chip.is-mine {
  background: rgba(47, 107, 255, .12);
  border-color: rgba(47, 107, 255, .42);
  color: #17408f;
}

/* ------------------------------------------------------------
 * 6. ИСТОРИИ: композер и переключатель «Для всех / Только друзья».
 *    Сам просмотр истории остаётся тёмным — это полноэкранное
 *    фото или видео.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-story-composer__visibility {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
}
html[data-theme="light"] .leskov-story-composer__visibility button { color: #45557a; }
html[data-theme="light"] .leskov-story-composer__visibility button.is-active {
  background: var(--accent-grad);
  color: #ffffff;
}
html[data-theme="light"] .leskov-story-composer__caption,
html[data-theme="light"] .leskov-story-composer__drop {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--text);
}
html[data-theme="light"] .leskov-stories-strip,
html[data-theme="light"] .leskov-story-card { color: var(--text); }

/* ------------------------------------------------------------
 * 7. ЦЕНТР УВЕДОМЛЕНИЙ.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-notification__group { background: var(--bg-elevated); border-color: var(--line); }
html[data-theme="light"] .leskov-notifications__day-header {
  background: linear-gradient(0deg, transparent, var(--bg) 50%);
  color: var(--muted);
}
html[data-theme="light"] .leskov-notification {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .leskov-notification.is-unread { background: rgba(47, 107, 255, .07); border-color: rgba(47, 107, 255, .30); }

/* ------------------------------------------------------------
 * 8. ОБЩИЕ ЭЛЕМЕНТЫ ДИЗАЙН-СИСТЕМЫ: диалог подтверждения, тосты.
 *    Тост «Сохранено» был бледной плашкой без текста.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-confirm { background: rgba(23, 38, 74, .40); }
html[data-theme="light"] .leskov-confirm__dialog {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 28px 70px rgba(23, 38, 74, .22);
  color: var(--text);
}
html[data-theme="light"] .leskov-copy-toast,
html[data-theme="light"] .leskov-toast,
html[data-theme="light"] .leskov-ui-toast {
  background: #14213c;
  border-color: rgba(23, 38, 74, .30);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 38, 74, .28);
}

/* ------------------------------------------------------------
 * 9. ПЛЕЕР: премиум-окно и нижний док.
 *    Премиум-плеер открывался тёмным окном с тёмным заголовком.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-player--premium {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(47, 107, 255, .38), rgba(15, 157, 143, .26)) border-box;
  color: var(--text);
  box-shadow: 0 26px 66px rgba(23, 38, 74, .16);
}
html[data-theme="light"] .leskov-player--premium .leskov-player__title,
html[data-theme="light"] .leskov-player--premium h2,
html[data-theme="light"] .leskov-player--premium h3,
html[data-theme="light"] .leskov-player__title { color: var(--text); }
html[data-theme="light"] .leskov-player--premium .leskov-player__artist,
html[data-theme="light"] .leskov-player__artist,
html[data-theme="light"] .leskov-player__time { color: var(--muted); }
html[data-theme="light"] .leskov-player__playlist,
html[data-theme="light"] .leskov-player__playlist-item {
  background: rgba(23, 38, 74, .035);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .leskov-player__playlist-item.is-active {
  background: rgba(47, 107, 255, .12);
  border-color: rgba(47, 107, 255, .40);
}
html[data-theme="light"] .leskov-dock {
  background: linear-gradient(180deg, #ffffff, #f5f8fe);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 -10px 34px rgba(23, 38, 74, .10);
}
html[data-theme="light"] .leskov-dock__title { color: var(--text); }
html[data-theme="light"] .leskov-dock__artist { color: var(--muted); }
/* Кружки видео в сообщениях, обложки и кадр видео остаются тёмными:
   это подложка под картинку, а не поверхность интерфейса. */

/* ------------------------------------------------------------
 * 10. НАСТРОЙКИ: выбор людей (семейное положение, семья).
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-people-picker__results {
  background: #ffffff !important;
  border-color: var(--line) !important;
  box-shadow: 0 20px 48px rgba(23, 38, 74, .16) !important;
}
html[data-theme="light"] .leskov-people-picker__item { color: var(--text); }
html[data-theme="light"] .leskov-people-picker__item:hover,
html[data-theme="light"] .leskov-people-picker__item.is-active { background: rgba(47, 107, 255, .10); }
html[data-theme="light"] .leskov-people-picker__meta { color: var(--muted); }

/* ------------------------------------------------------------
 * 11. ЗВОНКИ: карточки друзей, тост, окно входящего.
 *     Сцена самого звонка (видео собеседника) остаётся чёрной.
 * ------------------------------------------------------------ */
html[data-theme="light"] .calls-friend {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .calls-toast,
html[data-theme="light"] .calls-incoming__card,
html[data-theme="light"] .leskov-call-toast {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 22px 54px rgba(23, 38, 74, .20);
}
html[data-theme="light"] .calls-incoming,
html[data-theme="light"] .leskov-call-incoming { background: rgba(23, 38, 74, .45); }

/* ------------------------------------------------------------
 * 12. ВИДЕО-КРУЖКИ: светлая сцена записи.
 *     Сам кадр (круг) и полноэкранный просмотр остаются тёмными.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-circle-recorder__stage {
  background: rgba(23, 38, 74, .035);
  border-color: var(--line);
}
html[data-theme="light"] .leskov-circle-recorder__hint,
html[data-theme="light"] .leskov-circle-empty__text { color: var(--muted); }
html[data-theme="light"] .leskov-circle-recorder__field span { color: var(--text); }
html[data-theme="light"] .leskov-circle-card {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .leskov-circle-recorder__upload-bar { background: rgba(23, 38, 74, .10); }

/* ------------------------------------------------------------
 * 13. PWA-БАННЕР «Установить LESKOV».
 *     У него был свой светлый режим, но привязанный к системной
 *     теме браузера. Если человек выбрал светлую тему в настройках,
 *     а система тёмная, баннер оставался чёрным. Привязываем его к
 *     выбору пользователя.
 * ------------------------------------------------------------ */
html[data-theme="light"] {
  --leskov-pwa-banner-bg: #ffffff;
  --leskov-pwa-banner-border: rgba(23, 38, 74, .14);
  --leskov-pwa-banner-text: #101a2e;
  --leskov-pwa-banner-hint: #55658a;
  --leskov-pwa-shadow: 0 12px 40px rgba(23, 38, 74, .16);
}
html[data-theme="light"] .leskov-pwa-install-banner__dismiss,
html[data-theme="light"] .leskov-pwa-update-banner__dismiss { background: rgba(23, 38, 74, .07); }
html[data-theme="light"] .leskov-pwa-install-banner__dismiss:hover { background: rgba(23, 38, 74, .14); }
/* Тёмная тема при светлой системе: возвращаем тёмные значения,
   иначе @media (prefers-color-scheme: light) в pwa-install.css
   сделает баннер белым на тёмном сайте. */
html[data-theme="dark"] {
  --leskov-pwa-banner-bg: rgba(13, 16, 28, .96);
  --leskov-pwa-banner-border: rgba(255, 255, 255, .1);
  --leskov-pwa-banner-text: #e8eaef;
  --leskov-pwa-banner-hint: rgba(255, 255, 255, .65);
  --leskov-pwa-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------
 * 14. ПРАЗДНИЧНОЕ ОКНО PREMIUM на главной.
 * ------------------------------------------------------------ */
html[data-theme="light"] .home-event-backdrop { background: rgba(23, 38, 74, .42); }
html[data-theme="light"] .home-event-card {
  background: linear-gradient(180deg, #ffffff, #f5f8fe);
  border-color: var(--line);
  box-shadow: 0 30px 80px rgba(23, 38, 74, .22);
  color: var(--text);
}
html[data-theme="light"] .home-event-card h2,
html[data-theme="light"] .home-event-card h3,
html[data-theme="light"] .home-event-card p { color: var(--text); }
html[data-theme="light"] .home-event-eyebrow {
  background: rgba(15, 157, 143, .10);
  border-color: rgba(15, 157, 143, .34);
  color: #0a6c62;
}
html[data-theme="light"] .home-event-stats,
html[data-theme="light"] .home-event-timer {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .home-event-close {
  background: rgba(23, 38, 74, .07);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .home-event-reopen {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------
 * 15. ОСТАТКИ, найденные сканером контраста.
 * ------------------------------------------------------------ */
/* Подпись-«кикер» над заголовками: мятный на почти белом. */
html[data-theme="light"] .eyebrow {
  background: rgba(15, 157, 143, .10);
  border-color: rgba(15, 157, 143, .34);
  color: #0a6c62;
}
/* «Количество: 0» в магазине. */
html[data-theme="light"] .shop-stock { color: var(--muted); border-color: var(--line); }
html[data-theme="light"] .shop-stock.is-empty {
  color: #a3182f;
  background: rgba(210, 63, 92, .09);
  border-color: rgba(210, 63, 92, .28);
}
html[data-theme="light"] .shop-badge.is-soon { background: rgba(23, 38, 74, .08); color: var(--text); }
/* Значки и счётчики поверх акцентной заливки. */
html[data-theme="light"] .pill.is-accent,
html[data-theme="light"] .badge.is-accent { background: var(--accent-grad); color: #ffffff; border-color: transparent; }
/* Разделители и подписи в таблицах/списках. */
html[data-theme="light"] .info-list > div { color: var(--text); }
html[data-theme="light"] .small,
html[data-theme="light"] .muted,
html[data-theme="light"] .text-muted { color: var(--muted); }

/* ------------------------------------------------------------
 * 16. «КАК В СИСТЕМЕ»: те же правила для data-theme="auto" при
 *     светлой системной теме. Дубль сделан селектором, а не
 *     копией кода: :is() позволяет добавить второй корень, не
 *     повторяя ни одного правила выше.
 * ------------------------------------------------------------ */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --accent-btn-1: #2358d8;
    --accent-btn-2: #0b7a70;
    --accent-grad: linear-gradient(135deg, var(--accent-btn-1), var(--accent-btn-2));
    --leskov-pwa-banner-bg: #ffffff;
    --leskov-pwa-banner-border: rgba(23, 38, 74, .14);
    --leskov-pwa-banner-text: #101a2e;
    --leskov-pwa-banner-hint: #55658a;
    --leskov-pwa-shadow: 0 12px 40px rgba(23, 38, 74, .16);
  }
}

/* Кнопка спуска в записи видео-кружка при светлой теме: кольцо
   тёмное, чтобы кнопка была видна на белой сцене. */
html[data-theme="light"] {
  --circle-rec-ring: rgba(23, 38, 74, .30);
  --circle-rec-bg: #ffffff;
  --circle-rec-bg-hover: #f1f5fd;
}
html[data-theme="light"] .leskov-circle-recorder__btn { box-shadow: 0 10px 24px rgba(23, 38, 74, .14); }
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --circle-rec-ring: rgba(23, 38, 74, .30);
    --circle-rec-bg: #ffffff;
    --circle-rec-bg-hover: #f1f5fd;
  }
}

/* ------------------------------------------------------------
 * 17. Остатки второго прогона сканера контраста.
 * ------------------------------------------------------------ */
/* Свёрнутый текст поста: затемняющая «дымка» и кнопка «Показать
   полностью». Дымка была рассчитана на тёмную карточку и на белой
   выглядела серым пятном поперёк текста. */
html[data-theme="light"] .feed-content--collapsible.is-collapsed::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 92%);
}
html[data-theme="light"] .feed-content-toggle {
  background: rgba(47, 107, 255, .09);
  border-color: rgba(47, 107, 255, .30);
  color: #1a4bbd;
}
html[data-theme="light"] .feed-content-toggle:hover {
  background: rgba(47, 107, 255, .16);
  border-color: rgba(47, 107, 255, .48);
}
/* Текст поста в карточке результатов поиска был почти белым. */
html[data-theme="light"] .leskov-discover__post-body { color: var(--text); }
html[data-theme="light"] .leskov-discover__post-body:empty::after,
html[data-theme="light"] .leskov-discover__post-meta a { color: var(--muted); }
html[data-theme="light"] .leskov-discover__post-meta a { color: var(--text); }
/* Чип хэштега. */
html[data-theme="light"] .leskov-hashtag-chip {
  background: rgba(47, 107, 255, .09);
  border-color: rgba(47, 107, 255, .30);
  color: #1a4bbd;
}
html[data-theme="light"] .leskov-hashtag-chip:hover {
  background: rgba(15, 157, 143, .11);
  border-color: rgba(15, 157, 143, .42);
  color: #0a6157;
}
/* Счётчик внутри выбранной вкладки поиска: белым по полупрозрачному
   белому поверх градиента получалось 3.3:1. Делаем плотную тёмную
   подложку — она читается на любом месте градиента. */
html[data-theme="light"] .leskov-search-tab.is-active .leskov-search-tab__count,
html[data-theme="light"] .leskov-search-tab.is-active .pill {
  background: rgba(6, 20, 48, .45);
  color: #ffffff;
}
/* Ссылки внутри текста на странице входа. */
html[data-theme="light"] .auth-inline-link { color: #1a4bbd; }
html[data-theme="light"] .auth-inline-link:hover { color: #12358c; }
/* Звёздочка «обязательное поле». */
html[data-theme="light"] .required-star { color: #c62740; }
/* Кнопка «В закладки» и другие подписи поверх акцентной заливки. */
html[data-theme="light"] .save-post-btn.is-saved,
html[data-theme="light"] .save-post-btn.is-active,
html[data-theme="light"] [data-save-post].is-saved {
  background: var(--accent-grad);
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .save-post-btn.is-saved span,
html[data-theme="light"] [data-save-post].is-saved span { color: #ffffff; }

/* ------------------------------------------------------------
 * 18. Всплывающие слои (проверены отдельным прогоном: слои
 *     принудительно раскрываются и меряются так же, как страницы).
 * ------------------------------------------------------------ */
/* Палитра реакций: подписи «Нравится / Огонь / …». */
html[data-theme="light"] .leskov-reaction-picker-item { color: var(--text); }
html[data-theme="light"] .leskov-reaction-picker-item__label { color: #45557a; }
html[data-theme="light"] .leskov-reaction-picker-item:hover { background: rgba(47, 107, 255, .10); }
/* Заглушка обложки в нижнем доке: тёмный знак ноты на акцентной
   заливке. Делаем белым — на глубоком градиенте это читается. */
html[data-theme="light"] .leskov-dock__cover-fallback,
html[data-theme="light"] .leskov-player__cover-fallback {
  background: var(--accent-grad);
  color: #ffffff;
}
html[data-theme="light"] .leskov-dock__cover { background: rgba(23, 38, 74, .05); box-shadow: 0 8px 20px rgba(23, 38, 74, .12); }

/* ============================================================
 * 2026-08-20 (часть 3) — ПОЛЯ И КНОПКИ РАЗВЕДЕНЫ.
 *
 * Проблема была не в цвете, а в том, что поле ввода и кнопка
 * выглядели одинаково: и то и другое — прямоугольник со скруглением,
 * той же заливкой и той же рамкой. На форме входа «Email», «Пароль»
 * и «Забыли пароль?» читались как три одинаковых элемента, и
 * непонятно, куда печатать, а куда нажимать.
 *
 * Разводим их по двум признакам сразу — так делают все крупные
 * интерфейсы, и это работает даже для человека, который не
 * приглядывается:
 *
 *   ПОЛЕ  — «вдавленное»: внутренняя тень сверху, рамка заметнее,
 *           внешней тени нет. Выглядит как углубление, куда пишут.
 *   КНОПКА — «выступающая»: заливка чуть светлее фона, внешняя
 *           тень снизу, при наведении приподнимается. Выглядит как
 *           то, на что нажимают.
 *
 * Плюс форма делится на две зоны: блок полей и блок действий,
 * между ними — увеличенный отступ и тонкая линия.
 *
 * Действует в обеих темах: в тёмной поля и кнопки различались так
 * же плохо (rgba(255,255,255,.03) против rgba(255,255,255,.04)),
 * просто на тёмном фоне это меньше бросалось в глаза.
 * ============================================================ */

/* ---------- 1. Поля: вдавленные ---------- */
.search-input,
.admin-input,
.admin-textarea,
select.admin-input,
.leskov-settings__input,
.leskov-settings__select,
.leskov-story-composer__caption,
input[type="text"].admin-input,
input[type="email"].admin-input,
input[type="password"].admin-input,
input[type="search"].admin-input,
input[type="url"].admin-input,
input[type="tel"].admin-input,
input[type="number"].admin-input,
input[type="date"].admin-input {
  background: var(--field-bg, rgba(3, 9, 20, .42));
  border-color: var(--field-line, rgba(126, 164, 240, .26));
  box-shadow: var(--field-shadow, inset 0 2px 6px rgba(0, 0, 0, .34));
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.search-input:hover,
.admin-input:hover,
.admin-textarea:hover,
select.admin-input:hover,
.leskov-settings__input:hover,
.leskov-settings__select:hover { border-color: var(--field-line-hover, rgba(126, 164, 240, .44)); }
.search-input:focus,
.admin-input:focus,
.admin-textarea:focus,
select.admin-input:focus,
.leskov-settings__input:focus,
.leskov-settings__select:focus {
  border-color: var(--field-line-focus, rgba(122, 165, 255, .70));
  box-shadow: var(--field-shadow, inset 0 2px 6px rgba(0, 0, 0, .34)), 0 0 0 4px var(--field-ring, rgba(122, 165, 255, .16));
}

/* ---------- 2. Кнопки: выступающие ---------- */
.site-btn,
.button,
.player-btn,
.site-btn.secondary,
.button-secondary,
.button.button-secondary {
  box-shadow: var(--btn-shadow, 0 6px 16px rgba(0, 0, 0, .30));
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.button-secondary,
.site-btn.secondary,
.button.button-secondary,
.site-btn:not(.primary):not(.danger):not(.ghost) {
  background: var(--btn-face, rgba(255, 255, 255, .085));
  border-color: var(--btn-line, rgba(160, 190, 240, .30));
}
.button-ghost,
.site-btn.ghost {
  background: var(--btn-ghost-face, rgba(255, 255, 255, .045));
  border-color: var(--btn-line, rgba(160, 190, 240, .26));
  box-shadow: none;
}
.site-btn:hover,
.button:hover,
.player-btn:hover { box-shadow: var(--btn-shadow-hover, 0 10px 24px rgba(0, 0, 0, .38)); }
.site-btn:active,
.button:active,
.player-btn:active { transform: translateY(1px); box-shadow: var(--btn-shadow, 0 4px 10px rgba(0, 0, 0, .26)); }
/* Кнопка внутри поля (например «Найти» в строке поиска) тень не
   получает — она лежит на поле, а не на фоне страницы. */
.leskov-search-bar__form .site-btn,
.leskov-search-bar__form .button,
.compact-search .site-btn { box-shadow: none; }

/* ---------- 3. Форма: зона полей и зона действий ---------- */
.stack-form,
.auth-card .stack-form { row-gap: 18px; }
/* Кнопка-действие, стоящая сразу за полями, отделяется отступом и
   волосяной линией — видно, что это уже другая часть формы. */
.stack-form > .site-btn,
.stack-form > .button,
.stack-form > .form-actions,
.stack-form > .actions,
.surface-card > form > .site-btn[type="submit"],
.leskov-settings__form > .form-actions {
  margin-top: 10px;
}
/* Линию-разделитель рисует последний элемент зоны полей, а не сама
   кнопка: у кнопки border-color задан её собственным правилом
   (у основной он прозрачный), и полоска на ней просто не появилась
   бы. Псевдоэлемент от этого не зависит. */
.stack-form > .site-btn::before,
.stack-form > .button::before { content: none; }
.stack-form > :not(.site-btn):not(.button):not(.form-actions):not(.actions):has(+ .site-btn),
.stack-form > :not(.site-btn):not(.button):not(.form-actions):not(.actions):has(+ .button),
.stack-form > :not(.site-btn):not(.button):has(+ .form-actions) {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
/* Строка с чекбоксом и вспомогательной кнопкой («Запомни меня» —
   «Забыли пароль?») тоже своя зона. */
.auth-inline-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}
/* .auth-card .stack-form label{display:grid} задирал и чекбокс: он
   вставал ОТДЕЛЬНОЙ строкой над подписью «Запомни меня». Чекбоксу
   нужна строка, а не сетка. */
.auth-card .stack-form label.checkbox-row,
.stack-form label.checkbox-row,
label.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
label.checkbox-row input[type="checkbox"] { flex: 0 0 18px; margin: 0; }

/* ---------- 4. Значения переменных для светлой темы ---------- */
html[data-theme="light"] {
  --field-bg: #ffffff;
  --field-line: rgba(23, 38, 74, .30);
  --field-line-hover: rgba(23, 38, 74, .42);
  --field-line-focus: rgba(47, 107, 255, .62);
  --field-shadow: inset 0 2px 5px rgba(23, 38, 74, .13);
  --field-ring: rgba(47, 107, 255, .14);
  --btn-face: linear-gradient(180deg, #edf2fc, #dee7f7);
  --btn-ghost-face: linear-gradient(180deg, #f4f7fd, #e9eff9);
  --btn-line: rgba(23, 38, 74, .20);
  --btn-shadow: 0 6px 16px rgba(23, 38, 74, .10);
  --btn-shadow-hover: 0 10px 22px rgba(23, 38, 74, .16);
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --field-bg: #ffffff;
    --field-line: rgba(23, 38, 74, .22);
    --field-line-hover: rgba(23, 38, 74, .34);
    --field-line-focus: rgba(47, 107, 255, .62);
    --field-shadow: inset 0 2px 5px rgba(23, 38, 74, .09);
    --field-ring: rgba(47, 107, 255, .14);
    --btn-face: linear-gradient(180deg, #ffffff, #eef2fa);
    --btn-ghost-face: linear-gradient(180deg, #fbfcff, #f2f5fc);
    --btn-line: rgba(23, 38, 74, .20);
    --btn-shadow: 0 6px 16px rgba(23, 38, 74, .10);
    --btn-shadow-hover: 0 10px 22px rgba(23, 38, 74, .16);
  }
}

/* Ранее светлая тема красила поля и кнопки в один и тот же чистый
   белый — из-за этого они и слились. Отменяем те правила: теперь
   цвет приходит из переменных выше. */
html[data-theme="light"] .site-btn,
html[data-theme="light"] .button,
html[data-theme="light"] .player-btn,
html[data-theme="light"] .search-input,
html[data-theme="light"] .admin-input,
html[data-theme="light"] .admin-textarea,
html[data-theme="light"] select.admin-input,
html[data-theme="light"] .leskov-settings__input,
html[data-theme="light"] .leskov-settings__select { background: unset; }
html[data-theme="light"] .search-input,
html[data-theme="light"] .admin-input,
html[data-theme="light"] .admin-textarea,
html[data-theme="light"] select.admin-input,
html[data-theme="light"] .leskov-settings__input,
html[data-theme="light"] .leskov-settings__select,
html[data-theme="light"] body.auth-page .auth-card .admin-input,
html[data-theme="light"] body.auth-page .auth-card select.admin-input,
html[data-theme="light"] body.auth-page .auth-modal__dialog .admin-input {
  background: var(--field-bg) !important;
  border-color: var(--field-line) !important;
  box-shadow: var(--field-shadow) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .search-input:focus,
html[data-theme="light"] .admin-input:focus,
html[data-theme="light"] .admin-textarea:focus,
html[data-theme="light"] select.admin-input:focus,
html[data-theme="light"] .leskov-settings__input:focus,
html[data-theme="light"] .leskov-settings__select:focus {
  border-color: var(--field-line-focus) !important;
  box-shadow: var(--field-shadow), 0 0 0 4px var(--field-ring) !important;
}
html[data-theme="light"] .site-btn:not(.primary):not(.danger),
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .button.button-secondary,
html[data-theme="light"] .player-btn,
html[data-theme="light"] .lang-pill,
html[data-theme="light"] .header-icon-btn,
html[data-theme="light"] .menu-toggle {
  background: var(--btn-face);
  border-color: var(--btn-line);
  color: var(--text);
  box-shadow: var(--btn-shadow);
}
html[data-theme="light"] .site-btn.ghost,
html[data-theme="light"] .button-ghost,
html[data-theme="light"] body.auth-page .auth-inline-meta .button-ghost {
  background: var(--btn-ghost-face);
  border-color: var(--btn-line);
  color: var(--text);
  box-shadow: none;
}
html[data-theme="light"] .site-btn:not(.primary):not(.danger):hover,
html[data-theme="light"] .button-secondary:hover { background: linear-gradient(180deg, #e4ecfa, #d2ddf2); }

/* ============================================================
 * 2026-08-20 (часть 4) — МЕНЮ РАЗДЕЛОВ В СВЕТЛОЙ ТЕМЕ.
 *
 * Про это было сказано прямо: «выбор меню не работает на световую
 * гамму». Причина: пункты бокового меню профиля нарисованы плёнкой
 * rgba(255,255,255,.03) с рамкой rgba(255,255,255,.08) — то есть
 * «чуть светлее фона». На тёмном это аккуратные кнопки-плашки, на
 * белом — белое на белом: ни рамки, ни плашки, ни наведения, ни
 * понятного выделения текущего раздела.
 * ============================================================ */
html[data-theme="light"] .profile-quick-nav a {
  background: #ffffff;
  border-color: var(--line);
  color: #2b3a5c;
  box-shadow: 0 2px 6px rgba(23, 38, 74, .05);
}
html[data-theme="light"] .profile-quick-nav a:hover {
  background: #f2f6fd;
  border-color: rgba(47, 107, 255, .34);
  color: var(--text);
}
html[data-theme="light"] .profile-quick-nav a.is-active {
  background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(15, 157, 143, .10));
  border-color: rgba(47, 107, 255, .42);
  color: #16336b;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Меню Центра управления. */
html[data-theme="light"] .leskov-settings__nav-link { color: #45557a; }
html[data-theme="light"] .leskov-settings__nav-link:hover { background: rgba(47, 107, 255, .08); color: var(--text); }
html[data-theme="light"] .leskov-settings__nav-link.is-active {
  background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(15, 157, 143, .10));
  color: #16336b;
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-theme="light"] .leskov-settings__nav-link svg { fill: currentColor; }
html[data-theme="light"] .leskov-settings__nav-count {
  background: rgba(23, 38, 74, .10);
  color: var(--text);
}
/* Меню-«таблетки» на других страницах, собранные тем же приёмом. */
html[data-theme="light"] .stack-links a,
html[data-theme="light"] .side-nav a,
html[data-theme="light"] .messenger-sidebar a {
  color: #2b3a5c;
}
html[data-theme="light"] .stack-links a:hover,
html[data-theme="light"] .side-nav a:hover { color: var(--text); }

/* «Как в системе» — те же значения. */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .profile-quick-nav a {
    background: #ffffff;
    border-color: var(--line);
    color: #2b3a5c;
    box-shadow: 0 2px 6px rgba(23, 38, 74, .05);
  }
  html[data-theme="auto"] .profile-quick-nav a.is-active {
    background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(15, 157, 143, .10));
    border-color: rgba(47, 107, 255, .42);
    color: #16336b;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent);
  }
  html[data-theme="auto"] .leskov-settings__nav-link { color: #45557a; }
  html[data-theme="auto"] .leskov-settings__nav-link.is-active {
    background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(15, 157, 143, .10));
    color: #16336b;
    box-shadow: inset 3px 0 0 var(--accent);
  }
}

/* ============================================================
 * 2026-08-31 (часть 8) — ПОЛНАЯ ДОВОДКА СВЕТЛОЙ ТЕМЫ.
 *
 * Прошлые заходы прошли по фону: искали тёмные коробки на светлой
 * странице. Осталось то, что фоном не ловится — светлый ТЕКСТ на
 * светлом фоне. Такой элемент присутствует в разметке, занимает
 * место, но его не видно: «Баланс: 0 LSV», «Открыть категорию»,
 * имя на обложке профиля, содержимое раздела «Черновики».
 *
 * Проверка: по всем 19 таблицам стилей собраны правила, которые
 * задают цвет текста светлее 55% яркости и при этом не находятся
 * под селектором светлой темы. Каждое сверено с тем, что под ним
 * реально лежит: если тёмная подложка (кадр видео, фото, сцена
 * звонка, просмотр истории) — оставлено как есть, там светлый
 * текст и нужен. Всё остальное — ниже.
 *
 * Тёмная тема не затронута: каждый селектор начинается с
 * html[data-theme="light"] либо html[data-theme="auto"] внутри
 * @media (prefers-color-scheme: light). Второй набор — точная
 * копия первого, собранная скриптом (scripts/build-light-theme.cjs),
 * поэтому «светлая» и «как в системе» не могут разойтись.
 *
 * АДМИН-ПАНЕЛЬ (/admin) здесь намеренно не трогается.
 * ============================================================ */
/* ------------------------------------------------------------
 * 1. PREMIUM-ПЛЕЕР (окно .header-player-panel).
 *    Открывался тёмно-синим окном поверх светлой страницы:
 *    заголовок «Premium плеер» — тёмный текст на тёмном фоне,
 *    плейлист справа тоже тёмный. Прошлый заход чинил классы
 *    .leskov-player__playlist*, но в разметке их нет: окно
 *    собрано из .header-player-*. Отсюда и остался тёмным.
 * ------------------------------------------------------------ */
html[data-theme="light"] .header-player-backdrop {
  background: radial-gradient(circle at top, rgba(23, 38, 74, .34), rgba(23, 38, 74, .52));
}
html[data-theme="light"] .header-player-shell {
  border-color: rgba(47, 107, 255, .18);
  background: linear-gradient(140deg, #ffffff, #f4f7fd);
  color: var(--text);
  box-shadow: 0 40px 110px rgba(23, 38, 74, .22);
}
/* Декоративные «сияния» в углах окна рассчитаны на тёмный фон —
   на белом они дают грязное пятно. Гасим до едва заметных. */
html[data-theme="light"] .header-player-shell::before {
  background: radial-gradient(circle at top left, rgba(47, 107, 255, .10), transparent 38%),
              radial-gradient(circle at bottom right, rgba(15, 157, 143, .08), transparent 30%);
}
html[data-theme="light"] .header-player-shell::after { opacity: .35; }
html[data-theme="light"] .header-player-stage h3,
html[data-theme="light"] .header-player-stage strong { color: var(--text); }
html[data-theme="light"] .header-player-stage p,
html[data-theme="light"] .header-player-stage .eyebrow { color: var(--muted); }
html[data-theme="light"] .header-player-now {
  border-color: var(--line);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(23, 38, 74, .10);
}
html[data-theme="light"] .header-player-now-copy strong { color: var(--text); }
html[data-theme="light"] .header-player-now-copy span { color: var(--muted); }
html[data-theme="light"] .header-player-playlist {
  border-left-color: var(--line);
  background: linear-gradient(180deg, #f7f9fe, #eef2fa);
}
html[data-theme="light"] .header-player-playlist-head,
html[data-theme="light"] .header-player-playlist-head span { color: var(--text); }
html[data-theme="light"] .header-player-playlist-head small { color: var(--muted); }
html[data-theme="light"] .header-player-track {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
}
html[data-theme="light"] .header-player-track strong { color: var(--text); }
html[data-theme="light"] .header-player-track small,
html[data-theme="light"] .header-player-track-copy small { color: var(--muted); }
html[data-theme="light"] .header-player-track:hover,
html[data-theme="light"] .header-player-track.is-current {
  background: linear-gradient(135deg, rgba(47, 107, 255, .12), rgba(15, 157, 143, .08));
  border-color: rgba(47, 107, 255, .38);
}
html[data-theme="light"] .header-player-track img { background: rgba(23, 38, 74, .06); }
html[data-theme="light"] .header-player-index {
  background: rgba(23, 38, 74, .07);
  color: var(--muted);
}
html[data-theme="light"] .header-player-lock {
  background: rgba(255, 190, 60, .16);
  border-color: rgba(184, 124, 0, .30);
  color: #7a5200;
}
html[data-theme="light"] .header-player-search input,
html[data-theme="light"] .header-player-playlist .admin-input {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .header-player-close {
  background: rgba(23, 38, 74, .07);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .header-player-close:hover { background: rgba(23, 38, 74, .14); }
html[data-theme="light"] .header-player-empty,
html[data-theme="light"] .header-player-playlist .empty-state {
  background: rgba(47, 107, 255, .06);
  border-color: rgba(47, 107, 255, .22);
  color: var(--muted);
}
html[data-theme="light"] .header-player-control {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(23, 38, 74, .10);
}
html[data-theme="light"] .header-player-control.is-play {
  background: var(--accent-grad, linear-gradient(135deg, #2358d8, #0b7a70));
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .header-player-mode {
  background: #ffffff;
  border-color: var(--line);
  color: #45557a;
}
html[data-theme="light"] .header-player-mode:hover { color: var(--text); background: #f2f6fd; }
html[data-theme="light"] .header-player-mode.is-active {
  background: linear-gradient(135deg, rgba(47, 107, 255, .16), rgba(15, 157, 143, .12));
  border-color: rgba(47, 107, 255, .42);
  color: #16336b;
}
html[data-theme="light"] .header-player-volume-label,
html[data-theme="light"] .header-player-progress span { color: var(--muted); }
html[data-theme="light"] .header-player-upsell p { color: var(--muted); }
/* Кнопка-«таблетка» открытия плеера. */
html[data-theme="light"] .profile-player-fab { color: #ffffff; }

/* ------------------------------------------------------------
 * 2. ОКНО «КТО ЛАЙКНУЛ».
 *    Тёмная плашка поверх светлой страницы. Все её правила
 *    написаны с !important, поэтому и здесь без него нельзя.
 * ------------------------------------------------------------ */
html[data-theme="light"] .like-details > summary {
  background: #ffffff !important;
  border-color: var(--line) !important;
  color: #2b3a5c !important;
  box-shadow: 0 2px 6px rgba(23, 38, 74, .06) !important;
}
html[data-theme="light"] .like-details[open]::before { background: rgba(23, 38, 74, .28) !important; }
html[data-theme="light"] .like-details[open] .likers-list,
html[data-theme="light"] .like-details[open] .gallery-likers-list,
html[data-theme="light"] .like-details[open] .story-likers-list {
  background: #ffffff !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 34px 90px rgba(23, 38, 74, .26) !important;
}
html[data-theme="light"] .likers-list a,
html[data-theme="light"] .gallery-likers-list a,
html[data-theme="light"] .story-likers-list a { color: var(--text) !important; }
html[data-theme="light"] .likers-list a:hover,
html[data-theme="light"] .gallery-likers-list a:hover,
html[data-theme="light"] .story-likers-list a:hover { background: rgba(47, 107, 255, .08) !important; }
html[data-theme="light"] .likers-list__empty,
html[data-theme="light"] .gallery-likers-list__empty,
html[data-theme="light"] .story-likers-list__empty { color: var(--muted) !important; }
html[data-theme="light"] .likers-popover-close {
  background: rgba(23, 38, 74, .07) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* ------------------------------------------------------------
 * 3. СТИКЕРЫ И БАЛАНС LSV.
 *    «Баланс: 0 LSV» и «Открыть категорию» были написаны почти
 *    белым по бледно-голубой плашке — на скрине от них остаётся
 *    только контур плашки.
 * ------------------------------------------------------------ */
html[data-theme="light"] .sticker-balance-chip {
  border-color: rgba(47, 107, 255, .30);
  background: rgba(47, 107, 255, .08);
  color: #1c3f8f;
}
html[data-theme="light"] .sticker-balance-chip b { color: #16336b; }
html[data-theme="light"] .sticker-pack-tile__action,
html[data-theme="light"] .sticker-category-card__lock {
  border-color: rgba(184, 124, 0, .34);
  background: rgba(255, 190, 60, .14);
  color: #7a5200;
}
html[data-theme="light"] .sticker-pack-tile__action.is-open,
html[data-theme="light"] .sticker-category-card__lock.is-open {
  border-color: rgba(47, 107, 255, .32);
  background: rgba(47, 107, 255, .10);
  color: #1c3f8f;
}
html[data-theme="light"] .sticker-store-panel {
  background: rgba(23, 38, 74, .03);
  border-color: var(--line);
}
html[data-theme="light"] .sticker-pack-tile {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .sticker-pack-tile__meta { color: var(--muted); }
html[data-theme="light"] .sticker-pack-price { color: var(--text); }

/* ------------------------------------------------------------
 * 4. СТРОКА ОТПРАВКИ СООБЩЕНИЯ.
 *    «Стикер выбран ✕», плашка выбранного файла, цитата в ответе
 *    и строка «Идёт запись кружка» — светлый текст по светлому.
 * ------------------------------------------------------------ */
html[data-theme="light"] .selected-sticker-badge,
html[data-theme="light"] .selected-upload-badge {
  border-color: rgba(47, 107, 255, .22);
  background: linear-gradient(180deg, rgba(47, 107, 255, .08), rgba(23, 38, 74, .03));
  color: var(--text);
}
html[data-theme="light"] .selected-upload-badge__label {
  background: rgba(47, 107, 255, .14);
  border-color: rgba(47, 107, 255, .28);
  color: #1c3f8f;
}
html[data-theme="light"] .selected-upload-badge__name { color: var(--text); }
html[data-theme="light"] .ui-clear-btn,
html[data-theme="light"] .site-icon-btn { color: #2b3a5c; }
html[data-theme="light"] .site-icon-btn.subtle-danger,
html[data-theme="light"] .message-delete-btn.site-btn.subtle-danger { color: #a4213c; }
html[data-theme="light"] .reply-snippet,
html[data-theme="light"] .reply-preview {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .reply-snippet__text,
html[data-theme="light"] .reply-preview__text { color: var(--text); }
html[data-theme="light"] .reply-snippet__meta,
html[data-theme="light"] .reply-preview__meta { color: #1c6f8f; }
html[data-theme="light"] .message-content-tag,
html[data-theme="light"] .message-bubble.is-me .message-content-tag { color: #2b3a5c; }
html[data-theme="light"] .message-media-label { color: var(--muted); }
html[data-theme="light"] .notification-card__copy p { color: var(--muted); }
html[data-theme="light"] #typingIndicator { color: #0b6f62; }
/* Полоса «Идёт запись…»: розовый текст на розовом фоне. */
html[data-theme="light"] .compose-box.is-recording-voice .voice-recorder-status,
html[data-theme="light"] .compose-box.is-recording-video .video-recorder-status {
  color: #a4213c;
  border-color: rgba(210, 63, 92, .42);
  background: linear-gradient(135deg, rgba(210, 63, 92, .12), rgba(255, 138, 92, .07));
}
html[data-theme="light"] .compose-box.is-recording-video .video-circle-preview__label { color: #a4213c; }
html[data-theme="light"] .voice-recorder-status {
  border-color: rgba(23, 38, 74, .18);
  background: rgba(23, 38, 74, .03);
}

/* ------------------------------------------------------------
 * 5. ГОЛОСОВЫЕ И АУДИО В ПЕРЕПИСКЕ.
 *    Имя исполнителя под «Голосовое сообщение» и кнопка скорости
 *    «1×» были почти белыми — на светлом пузыре их не видно.
 * ------------------------------------------------------------ */
html[data-theme="light"] .custom-media-player.is-audio .custom-media-player__audio-copy strong,
html[data-theme="light"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__audio-copy strong,
html[data-theme="light"] .message-voice-native__label,
html[data-theme="light"] .message-voice-shell.is-native .message-voice-native__label,
html[data-theme="light"] .native-audio-player__label { color: var(--text); }
html[data-theme="light"] .message-audio-shell.is-native .message-audio-native__label { color: #0f5d84; }
html[data-theme="light"] .custom-media-player.is-video.is-compact .custom-media-player__timeline span,
html[data-theme="light"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__timeline span { color: var(--muted); }
html[data-theme="light"] .leskov-player__btn--speed {
  color: #1c3f8f;
  border-color: rgba(47, 107, 255, .30);
  background: rgba(47, 107, 255, .08);
}
html[data-theme="light"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn { color: var(--text); }

/* ------------------------------------------------------------
 * 6. ПАНЕЛЬ ИМЕНИ НА ОБЛОЖКЕ ПРОФИЛЯ.
 *    Панель уже стала светлой, а имя осталось белым: правило
 *    .profile-cover-info .inline-badged-name .user-list-name —
 *    три класса, оно перебивало общее «* { color: inherit }».
 *    Поэтому «Igor Leskov» читался только по контуру.
 * ------------------------------------------------------------ */
html[data-theme="light"] .profile-cover-info .inline-badged-name .user-list-name,
html[data-theme="light"] .profile-mobile-cover-info .inline-badged-name .user-list-name {
  color: var(--text);
  text-shadow: none;
}
html[data-theme="light"] .profile-cover-panel .profile-cover-about { color: #45557a; }
html[data-theme="light"] .profile-cover-panel .hero-pill {
  border-color: var(--line);
  background: rgba(23, 38, 74, .05);
  color: #2b3a5c;
  box-shadow: none;
}
html[data-theme="light"] .profile-cover-panel .hero-pill.is-good {
  background: rgba(15, 157, 143, .12);
  border-color: rgba(15, 157, 143, .30);
  color: #0b6259;
}
html[data-theme="light"] .profile-cover-panel .hero-pill.is-online {
  background: rgba(20, 160, 110, .14);
  border-color: rgba(20, 160, 110, .30);
  color: #0a6b48;
}
html[data-theme="light"] .profile-cover-panel .hero-pill.is-offline {
  background: rgba(23, 38, 74, .05);
  color: #55658a;
}
html[data-theme="light"] .profile-cover-panel .hero-pill--role {
  background: rgba(47, 107, 255, .12);
  border-color: rgba(47, 107, 255, .28);
  color: #1c3f8f;
}
/* Значки «подтверждён» и «premium» рядом с именем. */
html[data-theme="light"] .verified-badge {
  background: rgba(47, 107, 255, .14);
  border-color: rgba(47, 107, 255, .34);
  color: #1c5a8f;
}
html[data-theme="light"] .premium-badge {
  background: rgba(255, 190, 60, .18);
  border-color: rgba(184, 124, 0, .34);
  color: #7a5200;
}
html[data-theme="light"] .custom-user-badge,
html[data-theme="light"] .custom-user-badge--solid { color: #ffffff; }

/* ------------------------------------------------------------
 * 7. ЧЕРНОВИКИ, ОПРОСЫ, РЕАКЦИИ (styles/posts-extras.css).
 *    Раздел «Черновики и расписание» открывался пустой белой
 *    карточкой: и текст черновика, и подпись «Черновиков нет»
 *    заданы белым с прозрачностью — на белом их просто нет.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-draft-card {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
}
html[data-theme="light"] .leskov-draft-card__preview { color: var(--text); }
html[data-theme="light"] .leskov-draft-card__meta { color: var(--muted); }
html[data-theme="light"] .leskov-drafts-empty {
  border-color: rgba(23, 38, 74, .20);
  color: var(--muted);
}
html[data-theme="light"] .leskov-reaction-pill.is-muted { color: var(--muted); }
html[data-theme="light"] .leskov-poll-option__pct,
html[data-theme="light"] .leskov-poll-option__count,
html[data-theme="light"] .leskov-poll-footer,
html[data-theme="light"] .leskov-poll-multi,
html[data-theme="light"] .leskov-poll-close,
html[data-theme="light"] .leskov-schedule-field { color: var(--muted); }
html[data-theme="light"] .leskov-poll-edit-warn { color: #7a5200; }
html[data-theme="light"] .leskov-poll-edit-warn__icon { color: #a06400; }
html[data-theme="light"] .leskov-poll-edit__icon,
html[data-theme="light"] .leskov-poll-edit[open] > summary .leskov-poll-edit__chevron,
html[data-theme="light"] .draft-revert-btn__icon { color: #0b7a70; }
html[data-theme="light"] .drafts-title-icon {
  color: #0b6259;
  background: linear-gradient(145deg, rgba(47, 107, 255, .12), rgba(15, 157, 143, .10));
  border-color: rgba(15, 157, 143, .28);
  box-shadow: 0 8px 20px rgba(23, 38, 74, .08);
}

/* ------------------------------------------------------------
 * 8. УПРАВЛЕНИЕ АККАУНТОМ И ПОДПИСИ ПОЛЕЙ (a11y.css,
 *    account-mgmt.css). Целые страницы деактивации и
 *    восстановления были написаны белым по белому.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-field-label { color: var(--text); }
html[data-theme="light"] .leskov-form-hint { color: var(--muted); }
html[data-theme="light"] .leskov-account-section h3,
html[data-theme="light"] .leskov-account-state h4 { color: var(--text); }
html[data-theme="light"] .leskov-account-state p,
html[data-theme="light"] .leskov-account-reason,
html[data-theme="light"] .leskov-account-confirm,
html[data-theme="light"] .leskov-account-collapse summary { color: #45557a; }
html[data-theme="light"] .leskov-account-collapse summary::before { color: var(--muted); }
html[data-theme="light"] .leskov-account-banner.is-deactivated {
  color: #7a5200;
  background: rgba(255, 190, 60, .14);
  border-color: rgba(184, 124, 0, .30);
}
html[data-theme="light"] .leskov-account-banner.is-deletion {
  color: #a4213c;
  background: rgba(210, 63, 92, .10);
  border-color: rgba(210, 63, 92, .30);
}
html[data-theme="light"] .leskov-settings__saved { color: #0b6259; }
html[data-theme="light"] .leskov-badge--warn {
  color: #7a5200;
  background: rgba(255, 190, 60, .16);
  border-color: rgba(184, 124, 0, .30);
}

/* ------------------------------------------------------------
 * 9. ЗВОНКИ: список друзей и история (styles/calls.css).
 *    Карточки лежат на светлой панели, а буква-заглушка аватара
 *    и подписи были белыми.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-calls__friend-avatar--placeholder,
html[data-theme="light"] .leskov-calls-history__avatar--placeholder { color: #ffffff; }
html[data-theme="light"] .calls-active__meta { color: var(--text); }

/* ------------------------------------------------------------
 * 10. СТРАНИЦА ПРОИЗВОДИТЕЛЬНОСТИ (observability.css, perf.css).
 *     Цифры KPI и подписи белые — на светлой карточке пусто.
 * ------------------------------------------------------------ */
html[data-theme="light"] .kpi-value { color: var(--text); }
html[data-theme="light"] .kpi-label,
html[data-theme="light"] .kpi-sub,
html[data-theme="light"] .leskov-heatmap__day-label,
html[data-theme="light"] .leskov-heatmap__day-total { color: var(--muted); }
html[data-theme="light"] .leskov-period-link { color: #45557a; }
html[data-theme="light"] .leskov-period-link:hover { color: var(--text); }
html[data-theme="light"] .leskov-perf-badge {
  color: #45557a;
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .leskov-perf-badge[data-rating="good"] { color: #0b6259; }

/* ------------------------------------------------------------
 * 11. ВЫПАДАЮЩИЕ СПИСКИ.
 *     Всем <select> принудительно выставлена тёмная схема и
 *     тёмный фон пунктов. В светлой теме раскрытый список
 *     оставался чёрным прямоугольником — и «Кто видит», и любой
 *     выбор в настройках.
 * ------------------------------------------------------------ */
html[data-theme="light"] select,
html[data-theme="light"] select.admin-input,
html[data-theme="light"] .leskov-settings__select,
html[data-theme="light"] .admin-input[multiple],
html[data-theme="light"] select.leskov-settings__input { color-scheme: light; }
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  background-color: #ffffff;
  color: #101a2e;
}
html[data-theme="light"] select optgroup { color: #55658a; }
html[data-theme="light"] select option[value=""] { color: #6b7a9c; }
html[data-theme="light"] select option:checked {
  background: #2f6bff linear-gradient(0deg, #2f6bff, #2f6bff);
  color: #ffffff;
}
html[data-theme="light"] select option[selected]:not(:checked) {
  background-color: #ffffff;
  color: #101a2e;
}

/* ------------------------------------------------------------
 * 12. ЗАГРУЗКА ФАЙЛОВ.
 *     Имя выбранного файла рядом с кнопкой «Выбрать файлы» —
 *     бледно-голубое: на белом читается едва-едва.
 * ------------------------------------------------------------ */
html[data-theme="light"] .custom-file-control.has-file .custom-file-name { color: var(--text); }
html[data-theme="light"] .custom-file-control:not(.has-file) .custom-file-name { color: var(--muted); }
html[data-theme="light"] .leskov-gallery__uploader textarea,
html[data-theme="light"] .leskov-gallery__uploader input[type="text"] {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .leskov-gallery__uploader-meta { color: var(--muted); }

/* ------------------------------------------------------------
 * 13. ВИДЕО-КРУЖКИ: новые элементы сцены записи.
 *     Сам кадр остаётся тёмным — это подложка под видео, а не
 *     поверхность интерфейса.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-circle-recorder {
  --circle-track: rgba(23, 38, 74, .14);
  --circle-shadow: 0 20px 46px rgba(23, 38, 74, .16);
  --circle-well: radial-gradient(circle at 50% 30%, #2b3b58, #17223c 72%);
  --circle-idle-text: rgba(255, 255, 255, .78);
}
html[data-theme="light"] .leskov-circle-recorder__stage {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(47, 107, 255, .05), transparent 70%),
    rgba(23, 38, 74, .03);
}
html[data-theme="light"] .leskov-circle-recorder__result-play {
  background: #ffffff;
  color: #101a2e;
  box-shadow: 0 12px 28px rgba(23, 38, 74, .26);
}
html[data-theme="light"] .leskov-circle-recorder__error {
  background: rgba(210, 63, 92, .10);
  color: #a4213c;
}
html[data-theme="light"] .leskov-circle-recorder__upload { background: rgba(23, 38, 74, .04); }
html[data-theme="light"] .leskov-circles__head-meta { color: var(--muted); }
html[data-theme="light"] .leskov-circle-card__name { color: var(--text); }
html[data-theme="light"] .leskov-circle-card__views,
html[data-theme="light"] .leskov-circle-card__caption { color: var(--muted); }

/* ------------------------------------------------------------
 * 14. ОСТАТКИ: точечные подписи, которые сканер контраста нашёл
 *     на светлых поверхностях.
 * ------------------------------------------------------------ */
html[data-theme="light"] .toast-notice {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 20px 50px rgba(23, 38, 74, .18);
}
html[data-theme="light"] .toast-badge { color: #0b6259; }
html[data-theme="light"] .header-notice-item,
html[data-theme="light"] .header-notice-list a { color: var(--text); }
html[data-theme="light"] .header-notice-all { color: #1c3f8f; }
html[data-theme="light"] .header-notice-close {
  border-color: var(--line);
  background: rgba(23, 38, 74, .06);
  color: var(--text);
}
html[data-theme="light"] .home-user-presence.is-online { color: #0b6259; }
html[data-theme="light"] .lsv-history-item.is-incoming .lsv-history-sign { color: #0b6259; }
html[data-theme="light"] .gifts-modal__dialog .gift-item__message { color: var(--muted); }
html[data-theme="light"] .admin-flash { color: var(--text); }
html[data-theme="light"] .auth-tabs__btn:hover { color: var(--text); }
html[data-theme="light"] .auth-2fa-back a { color: #1c3f8f; }
html[data-theme="light"] .auth-2fa-back a:hover,
html[data-theme="light"] .auth-2fa-back a:focus-visible { color: #16336b; }
html[data-theme="light"] .home-event-lang button { color: #2b3a5c; }
html[data-theme="light"] .home-scroll-top { color: #ffffff; }
html[data-theme="light"] .story-comment-row,
html[data-theme="light"] .gallery-comments-mini .story-comment-row,
html[data-theme="light"] .story-comments-list .story-comment-row { color: #2b3a5c; }
html[data-theme="light"] .story-comment-row > span strong { color: var(--text); }
html[data-theme="light"] .report-action { color: #a4213c; }
html[data-theme="light"] .report-action:hover { color: #ffffff; }
html[data-theme="light"] .notifications-prefs-summary:hover,
html[data-theme="light"] .notifications-prefs-summary:focus-visible { color: var(--text); }
html[data-theme="light"] .leskov-notification__count { color: #ffffff; }

/* ------------------------------------------------------------
 * 15. ПРАВИЛА С !important.
 *     Часть оформления в проекте написана с !important — обычным
 *     правилом её не перебить, каким бы точным ни был селектор.
 *     Здесь те же места, но со своим !important. Замер (стенд на
 *     headless Chromium, снимок реального фона под каждым словом)
 *     показал, что без этого «Повтор/Случайно» в плеере, строки
 *     комментариев и кнопка «Пожаловаться» остаются нечитаемыми.
 * ------------------------------------------------------------ */
html[data-theme="light"] .header-player-mode { color: #45557a !important; }
html[data-theme="light"] .header-player-mode:hover { color: var(--text) !important; }
html[data-theme="light"] .header-player-mode.is-active { color: #16336b !important; }
html[data-theme="light"] .header-player-mode::before { background: rgba(23, 38, 74, .10) !important; }
html[data-theme="light"] .header-player-btn,
html[data-theme="light"] .header-icon-btn.header-player-btn,
html[data-theme="light"] .header-player-control { color: var(--text) !important; }
html[data-theme="light"] .header-player-control.is-play { color: #ffffff !important; }
html[data-theme="light"] .story-comment-row,
html[data-theme="light"] .gallery-comments-mini .story-comment-row,
html[data-theme="light"] .story-comments-list .story-comment-row {
  background: rgba(23, 38, 74, .04) !important;
  border-color: var(--line) !important;
  color: #45557a !important;
}
html[data-theme="light"] .story-comment-row > span strong { color: var(--text) !important; }
html[data-theme="light"] .report-action {
  border-color: rgba(210, 63, 92, .34) !important;
  background: rgba(210, 63, 92, .09) !important;
  color: #a4213c !important;
}
html[data-theme="light"] .report-action:hover {
  background: rgba(210, 63, 92, .82) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .home-event-lang button { color: #2b3a5c !important; }
html[data-theme="light"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn { color: var(--text) !important; }
html[data-theme="light"] .draft-revert-btn__icon { color: #0b7a70 !important; }
/* Раскрытое мобильное меню: пункты были светло-голубыми, а панель
   в светлой теме белая — список пунктов исчезал целиком. */
html[data-theme="light"] .site-header .site-nav.is-open a,
html[data-theme="light"] body.menu-open .site-header .site-nav a,
html[data-theme="light"] body.menu-open .site-nav a { color: #2b3a5c !important; }

/* ------------------------------------------------------------
 * 16. ПЛАШКА СООБЩЕНИЯ (.admin-flash).
 *     У неё тёмно-синяя заливка градиентом — на светлой странице
 *     это чёрный прямоугольник с тёмным текстом внутри.
 * ------------------------------------------------------------ */
html[data-theme="light"] .admin-flash {
  background: linear-gradient(180deg, rgba(15, 157, 143, .10), rgba(15, 157, 143, .05));
  border-color: rgba(15, 157, 143, .26);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(23, 38, 74, .07);
}
html[data-theme="light"] .admin-flash.error {
  background: linear-gradient(180deg, rgba(210, 63, 92, .10), rgba(210, 63, 92, .05));
  border-color: rgba(210, 63, 92, .26);
}

/* ------------------------------------------------------------
 * 17. ВКЛАДКИ ВХОД/РЕГИСТРАЦИЯ.
 *     Неактивная вкладка была задана цветом для тёмного фона.
 * ------------------------------------------------------------ */
html[data-theme="light"] .auth-tabs {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
}
html[data-theme="light"] .auth-tabs__btn { color: #45557a; }

/* ------------------------------------------------------------
 * 18. ПОГРАНИЧНЫЙ КОНТРАСТ.
 *     Эти подписи давали 4.2–4.5 при норме 4.5 — формально почти,
 *     фактически бледно. Берём на тон темнее.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-circle-recorder__upload-row,
html[data-theme="light"] .gallery-video-cover-field .small { color: #45557a; }
html[data-theme="light"] .reply-snippet__meta,
html[data-theme="light"] .reply-preview__meta { color: #155e7a; }
html[data-theme="light"] .leskov-reaction-picker-btn__icon { color: #45557a; }
html[data-theme="light"] .leskov-reaction-picker {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

/* ------------------------------------------------------------
 * 19. КНОПКИ ПЕРЕМОТКИ В PREMIUM-ПЛЕЕРЕ.
 *     У них тёмная заливка градиентом, объявленная с !important
 *     сразу для пяти классов сразу — на белом окне это три
 *     чёрных кружка, и стрелки в них не видно. Плюс кнопка
 *     воспроизведения: светло-бирюзовая заливка с белым знаком
 *     давала 1.8:1. Берём глубокую пару из --accent-grad.
 * ------------------------------------------------------------ */
html[data-theme="light"] .header-player-btn,
html[data-theme="light"] .header-icon-btn.header-player-btn,
html[data-theme="light"] .header-player-control,
html[data-theme="light"] .promo-player-btn,
html[data-theme="light"] .player-button {
  background: #ffffff !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(23, 38, 74, .10) !important;
}
html[data-theme="light"] .header-player-btn:hover,
html[data-theme="light"] .header-player-control:hover,
html[data-theme="light"] .promo-player-btn:hover {
  background: #f2f6fd !important;
  border-color: rgba(47, 107, 255, .34) !important;
}
html[data-theme="light"] .header-player-control.is-play,
html[data-theme="light"] .promo-player-btn.is-play {
  background: var(--accent-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Затемнение под окном плеера и заливка «таблеток» режима: и то и
   другое объявлено с !important, поэтому повторяем с ним же. */
html[data-theme="light"] .header-player-panel:not([hidden]),
html[data-theme="light"] body.header-player-open .header-player-panel {
  background: rgba(23, 38, 74, .55) !important;
}
html[data-theme="light"] .header-player-now .header-player-mode,
html[data-theme="light"] .header-player-mode {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
}
html[data-theme="light"] .header-player-mode.is-active {
  background: var(--accent-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
html[data-theme="light"] .header-player-mode.is-active::before { background: rgba(255, 255, 255, .22) !important; }

/* ============================================================
 * ПРАВКИ ПО ВТОРОМУ КРУГУ СКРИНОВ (31.08.2026)
 * ============================================================ */

/* ------------------------------------------------------------
 * 20. ОКНО «КТО ЛАЙКНУЛ» — НАСТОЯЩЕЕ.
 *     Прошлый заход красил разметку внутри <details class="like-details">,
 *     и на глаз ничего не менялось. Причина: scripts/site.js переносит
 *     панель порталом в конец <body> и вешает класс .is-likers-portal —
 *     после переноса она уже НЕ находится внутри .like-details, и ни один
 *     из тех селекторов на неё не попадал. Красим панель по месту, где
 *     она реально живёт: body > .likers-list.is-likers-portal.
 *     Исходные правила написаны с !important — повторяем с ним же.
 * ------------------------------------------------------------ */
html[data-theme="light"] body > .likers-list.is-likers-portal,
html[data-theme="light"] body > .gallery-likers-list.is-likers-portal,
html[data-theme="light"] body > .story-likers-list.is-likers-portal,
html[data-theme="light"] body > .likers-summary.is-likers-portal {
  border-color: var(--line) !important;
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: 0 28px 80px rgba(23, 38, 74, .26), inset 0 1px rgba(255, 255, 255, .9) !important;
}
html[data-theme="light"] .likers-list__head,
html[data-theme="light"] .likers-list__head strong { color: var(--text); }
html[data-theme="light"] .likers-list__user strong { color: var(--text); }
html[data-theme="light"] .likers-list__user small { color: var(--muted); }
html[data-theme="light"] .likers-list.is-empty .likers-list__empty { color: var(--muted); }

/* ------------------------------------------------------------
 * 21. ОКНО ВИДЕОЗВОНКА.
 *     Карточка звонка залита тёмно-синим градиентом с !important и
 *     остаётся тёмной при светлой теме. Хуже того, имя собеседника
 *     цвета не имеет — берёт его от страницы; в светлой теме это
 *     тёмный текст, и на тёмной карточке имя пропадает совсем
 *     (на скрине «LESKOV» едва проступает).
 *
 *     Сам кадр видео (.call-video-grid) намеренно остаётся чёрным —
 *     это подложка под картинку с камеры, а не поверхность интерфейса.
 * ------------------------------------------------------------ */
html[data-theme="light"] .call-overlay__backdrop,
html[data-theme="light"] .auth-modal__backdrop {
  background: linear-gradient(135deg, rgba(23, 38, 74, .52) 0%, rgba(23, 38, 74, .62) 100%) !important;
}
html[data-theme="light"] .call-overlay__card {
  border-color: var(--line) !important;
  background: linear-gradient(160deg, #ffffff 0%, #f5f8fe 100%) !important;
  color: var(--text) !important;
  box-shadow: 0 50px 140px rgba(23, 38, 74, .28), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
html[data-theme="light"] .call-overlay__state { color: #45557a !important; }
html[data-theme="light"] .call-overlay__peer strong { color: var(--text) !important; }
html[data-theme="light"] .call-overlay__peer #callDurationLabel,
html[data-theme="light"] .call-overlay__peer p { color: #45557a !important; }
html[data-theme="light"] .call-overlay__peer img { border-color: rgba(23, 38, 74, .22) !important; }
html[data-theme="light"] .incoming-call-modal__dialog h2,
html[data-theme="light"] .incoming-call-modal__dialog p { color: var(--text); }
html[data-theme="light"] .call-controls .media-action-btn {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .call-controls .media-action-btn:hover { background: #f2f6fd; }
html[data-theme="light"] .call-controls .site-btn.danger,
html[data-theme="light"] .call-controls .media-action-btn.danger {
  background: var(--danger);
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .call-self__mode { color: #ffffff; }

/* ------------------------------------------------------------
 * 22. ПЛАШКА ЗАГРУЗКИ ФАЙЛА.
 *     Тёмно-синий прямоугольник поверх светлой формы: имя файла в нём
 *     не читалось, а сама плашка выглядела вырезкой из другой темы.
 * ------------------------------------------------------------ */
html[data-theme="light"] .upload-progress {
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 12px 30px rgba(23, 38, 74, .14) !important;
}
html[data-theme="light"] .upload-progress__name { color: var(--text); }
html[data-theme="light"] .upload-progress__meta,
html[data-theme="light"] .upload-progress__percent { color: #45557a; }
html[data-theme="light"] .upload-progress__bar { background: rgba(23, 38, 74, .10); }
html[data-theme="light"] .leskov-gallery__uploader-progress { background: rgba(23, 38, 74, .08); }

/* ------------------------------------------------------------
 * 23. ТЁМНЫЕ ПЛЁНКИ rgba(0,0,0,.18….30).
 *     В тёмной теме это «чуть темнее фона» — аккуратное углубление.
 *     На белом ровно та же плёнка даёт грязно-серый прямоугольник:
 *     именно он на скринах вокруг обложки трека, под очередью
 *     воспроизведения и под переключателем режимов.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-player--premium .leskov-player__queue,
html[data-theme="light"] .leskov-player--premium .leskov-player__modes,
html[data-theme="light"] .leskov-dock__drawer,
html[data-theme="light"] .leskov-story-composer__visibility,
html[data-theme="light"] .leskov-gallery__queue-item {
  background: rgba(47, 107, 255, .05);
  border-color: var(--line);
}
html[data-theme="light"] .leskov-player--premium .leskov-player__queue-title,
html[data-theme="light"] .leskov-player--premium .leskov-player__queue-count { color: #45557a; }
html[data-theme="light"] .leskov-player--premium .leskov-player__queue-search {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .leskov-player--premium .leskov-player__queue-name { color: var(--text); }
html[data-theme="light"] .leskov-player--premium .leskov-player__queue-meta { color: var(--muted); }
html[data-theme="light"] .leskov-player--premium [data-playlist-index] {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
}
html[data-theme="light"] .leskov-player--premium [data-playlist-index]:hover {
  background: #f4f7fd;
  border-color: rgba(47, 107, 255, .30);
}
html[data-theme="light"] .leskov-player--premium [data-playlist-index].is-current {
  background: linear-gradient(90deg, rgba(47, 107, 255, .14), rgba(15, 157, 143, .09)), #ffffff;
  border-color: rgba(47, 107, 255, .38);
  box-shadow: inset 3px 0 0 var(--accent), 0 10px 26px rgba(23, 38, 74, .10);
}
html[data-theme="light"] .leskov-player--premium .leskov-player__queue-index {
  background: rgba(23, 38, 74, .06);
  border-color: var(--line);
  color: #45557a;
}
html[data-theme="light"] .leskov-player--premium .leskov-player__mode { color: #45557a; }
html[data-theme="light"] .leskov-player--premium .leskov-player__mode:hover { color: var(--text); }
html[data-theme="light"] .leskov-player--premium .leskov-player__lsv { background: rgba(23, 38, 74, .04); }

/* ------------------------------------------------------------
 * 24. КНОПКА «ЗАПИСАТЬ ВИДЕО» В ПУСТОМ СОСТОЯНИИ И САМО ПУСТОЕ
 *     СОСТОЯНИЕ.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-empty-state {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .leskov-empty-state__title { color: var(--text); }
html[data-theme="light"] .leskov-empty-state__hint { color: var(--muted); }
html[data-theme="light"] .leskov-empty-state__icon { color: var(--accent); }

/* ------------------------------------------------------------
 * 25. ССЫЛКА «ОТКРЫТЬ ЦЕНТР УВЕДОМЛЕНИЙ».
 *     Она приклеена к низу выпадающего списка и в светлой теме
 *     сливалась с ним: бледная плашка без границы, непонятно, что
 *     на неё вообще можно нажать.
 * ------------------------------------------------------------ */
html[data-theme="light"] .header-notice-all {
  background: rgba(47, 107, 255, .10) !important;
  border-top: 1px solid var(--line) !important;
  color: #16336b !important;
  font-weight: 800 !important;
  box-shadow: 0 -10px 24px rgba(23, 38, 74, .07) !important;
}
html[data-theme="light"] .header-notice-all:hover { background: rgba(47, 107, 255, .16) !important; }

/* ------------------------------------------------------------
 * 26. ЧИПЫ КОМПОЗЕРА («Опрос», «Запланировать»).
 *     Активный чип был светло-голубым текстом по светло-голубой
 *     заливке — надпись пропадала ровно тогда, когда она нужнее
 *     всего: когда опрос включён.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-composer-chips .site-btn.is-active,
html[data-theme="light"] .leskov-composer-chip.is-active {
  background: rgba(47, 107, 255, .12);
  border-color: rgba(47, 107, 255, .48);
  color: #16336b;
}

/* ------------------------------------------------------------
 * 27. НАДПИСИ НА АКЦЕНТНОМ ГРАДИЕНТЕ.
 *
 *     По всему проекту «главная» кнопка — это переход accent → accent-2
 *     с ПОЧТИ ЧЁРНОЙ надписью (#04111f, #08121f и т.п.). В тёмной теме
 *     градиент светлый (#7aa5ff → #79e3d2), и тёмная надпись на нём —
 *     правильный ход. В светлой теме те же переменные становятся
 *     глубокими (#2f6bff → #0f9d8f), и почти чёрная надпись на них
 *     превращается в кашу: на скринах это «Найти», «Все», «01» в
 *     очереди, «0» в окне лайков.
 *
 *     Ровно для этого уже заведена пара --accent-btn-1/2 (глубже, ради
 *     белого текста) — она применялась только к .site-btn.primary и
 *     соседям. Здесь тот же приём распространён на ВСЕ места, где этот
 *     градиент лежит под надписью. Проверено: белым по --accent-grad
 *     это 6.1:1 и 5.3:1 при норме 4.5.
 * ------------------------------------------------------------ */
html[data-theme="light"] .leskov-search-bar__submit,
html[data-theme="light"] .leskov-search-bar__submit.site-btn,
html[data-theme="light"] .leskov-search-bar__submit.button,
html[data-theme="light"] .leskov-search-tab.is-active,
html[data-theme="light"] .leskov-search-bar__item-avatar,
html[data-theme="light"] .leskov-tabs__btn.is-active,
html[data-theme="light"] .leskov-pagination__page.is-active,
html[data-theme="light"] .lang-pill.is-active,
html[data-theme="light"] .icon-badge,
html[data-theme="light"] .header-icon-chip,
html[data-theme="light"] .shop-badge,
html[data-theme="light"] .player-button,
html[data-theme="light"] .promo-track-trigger span,
html[data-theme="light"] .premium-track-trigger span,
html[data-theme="light"] .leskov-file-control__button,
html[data-theme="light"] .leskov-player--video .leskov-player__btn--play,
html[data-theme="light"] .leskov-player--video .leskov-player__center-btn,
html[data-theme="light"] .leskov-player--premium .leskov-player__premium-badge,
html[data-theme="light"] .leskov-player--premium .leskov-player__mode.is-active,
html[data-theme="light"] .leskov-player--premium [data-playlist-index].is-current .leskov-player__queue-index,
html[data-theme="light"] .leskov-dock__btn--play,
html[data-theme="light"] .leskov-poll-option.is-voted .leskov-poll-option__check,
html[data-theme="light"] .leskov-wizard__step.is-active .leskov-wizard__num,
html[data-theme="light"] .leskov-session__badge,
html[data-theme="light"] .leskov-story-ring__plus,
html[data-theme="light"] .leskov-story-composer__visibility button.is-active,
html[data-theme="light"] .comment-reply-btn.is-active,
html[data-theme="light"] .home-event-lang button.is-active,
html[data-theme="light"] .auth-tabs__btn.is-active,
html[data-theme="light"] .likers-list__head span,
html[data-theme="light"] .profile-player-fab,
html[data-theme="light"] input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button {
  background: var(--accent-grad) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
/* Иконки внутри таких кнопок рисуются currentColor — подхватят белый
   сами; но у части задан свой fill, поэтому дублируем явно. */
html[data-theme="light"] .leskov-search-bar__submit svg,
html[data-theme="light"] .leskov-player--video .leskov-player__btn--play svg,
html[data-theme="light"] .leskov-player--video .leskov-player__center-btn svg,
html[data-theme="light"] .leskov-dock__btn--play svg,
html[data-theme="light"] .leskov-player--premium .leskov-player__premium-badge svg { fill: #ffffff !important; }
/* Счётчик внутри выбранной вкладки поиска лежит уже НА градиенте —
   ему нужна светлая плёнка, а не тёмная. */
html[data-theme="light"] .leskov-search-tab.is-active .leskov-search-tab__count,
html[data-theme="light"] .leskov-search-tab.is-active .pill {
  background: rgba(255, 255, 255, .24) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
 * 28. ДОБОР ПОСЛЕ ЗАМЕРА (стенд).
 * ------------------------------------------------------------ */
/* Чип «Опрос»: цвет надписи задан правилом .site-btn.is-active
   с !important — обычным правилом его не перебить. */
html[data-theme="light"] .leskov-composer-chips .site-btn.is-active,
html[data-theme="light"] .leskov-composer-chip.is-active {
  background: rgba(47, 107, 255, .12) !important;
  border-color: rgba(47, 107, 255, .50) !important;
  color: #16336b !important;
}
/* Счётчик внутри выбранной вкладки поиска: белая плёнка на градиенте
   давала 3.6:1 — берём тёмную, белые цифры на ней читаются. */
html[data-theme="light"] .leskov-search-tab.is-active .leskov-search-tab__count,
html[data-theme="light"] .leskov-search-tab.is-active .pill {
  background: rgba(6, 20, 46, .34) !important;
  color: #ffffff !important;
}
/* Кнопка «Завершить» в звонке. */
html[data-theme="light"] .call-controls .site-btn.danger,
html[data-theme="light"] .call-controls .media-action-btn.danger,
html[data-theme="light"] .call-controls #endCallBtn {
  background: #c62740 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
html[data-theme="light"] .call-controls .site-btn.danger .btn-glyph svg,
html[data-theme="light"] .call-controls #endCallBtn .btn-glyph svg { fill: #ffffff !important; }
/* Кнопка воспроизведения плеера: заливка идёт светлой парой
   accent → accent-2, белая иконка на её середине даёт 4.06:1.
   Ставим глубокую пару --accent-grad — 6.1:1 и 5.3:1. */
html[data-theme="light"] .leskov-player__btn--play,
html[data-theme="light"] .leskov-dock__btn--play {
  background: var(--accent-grad) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-theme="light"] .leskov-player__btn--play:hover {
  background: linear-gradient(135deg, #1c4bc0, #096961) !important;
  filter: none !important;
}
html[data-theme="light"] .leskov-player__btn--play svg,
html[data-theme="light"] .leskov-dock__btn--play svg { fill: #ffffff !important; }

/* ------------------------------------------------------------
 * 29. ПРОВЕРКА НА ЖИВЫХ ПУБЛИЧНЫХ СТРАНИЦАХ.
 *
 *     Отдельно прогнаны index.php, auth.php и user.php прямо в
 *     браузере со светлой темой. Нашлось три места, которых не было
 *     в стенде, — все с мятным #7cf1d3 (--accent-strong). На тёмном
 *     это фирменный акцент, на белом — 1.4:1, то есть подпись видно
 *     только под углом.
 *
 *     Переменную целиком не трогаем: она же служит второй точкой
 *     градиента в двух десятках мест, и её сдвиг перекрасил бы
 *     половину сайта. Правим ровно те правила, где она стоит
 *     цветом ТЕКСТА.
 * ------------------------------------------------------------ */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .bio-highlight span,
html[data-theme="light"] .news-copy time,
html[data-theme="light"] .header-notice-copy small { color: #0b6259; }
html[data-theme="light"] .pill { color: #45557a; }
html[data-theme="light"] .home-status-badge {
  border-color: rgba(23, 38, 74, .14);
}
html[data-theme="light"] .home-status-badge.verified {
  background: rgba(47, 107, 255, .14);
  color: #1c4c8f;
}
html[data-theme="light"] .home-status-badge.premium {
  background: rgba(15, 157, 143, .14);
  color: #0b6259;
}

/* ============================================================
 * МОБИЛЬНАЯ ВЕРСИЯ (31.08.2026, третий круг)
 * ============================================================ */

/* ------------------------------------------------------------
 * 30. РАСКРЫТОЕ МЕНЮ НА index.php / index_et.php.
 *
 *     На телефоне меню — это не строка в шапке, а отдельная
 *     фиксированная панель, и она залита тёмно-синим градиентом с
 *     !important (три разных блока в homepage.css, все под
 *     @media max-width). Прошлый заход перекрасил пункты в тёмный
 *     цвет, а панель оставил тёмной — получилось тёмное по тёмному,
 *     то есть стало хуже, чем было. Красим и панель, и плашки
 *     пунктов, и рамку языкового переключателя.
 * ------------------------------------------------------------ */
html[data-theme="light"] .site-header .site-nav.is-open,
html[data-theme="light"] body.menu-open .site-header .site-nav,
html[data-theme="light"] body.menu-open .site-nav {
  background: linear-gradient(180deg, #ffffff, #f5f8fe) !important;
  border-color: var(--line) !important;
  box-shadow: 0 34px 90px rgba(23, 38, 74, .26), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
html[data-theme="light"] .site-header .site-nav.is-open a,
html[data-theme="light"] body.menu-open .site-header .site-nav a,
html[data-theme="light"] body.menu-open .site-nav a {
  background: rgba(47, 107, 255, .07) !important;
  border-color: rgba(47, 107, 255, .20) !important;
  color: #2b3a5c !important;
}
html[data-theme="light"] .site-header .site-nav.is-open a:hover,
html[data-theme="light"] body.menu-open .site-nav a:hover {
  background: rgba(47, 107, 255, .14) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .site-header .site-nav.is-open .language-switcher--menu,
html[data-theme="light"] body.menu-open .site-header .site-nav .language-switcher--menu {
  background: rgba(23, 38, 74, .04) !important;
  border-color: var(--line) !important;
}

/* ------------------------------------------------------------
 * 31. ВЫПАДАЮЩИЕ УВЕДОМЛЕНИЯ.
 *     Панель залита тёмным градиентом. Прошлый заход покрасил в ней
 *     текст и нижнюю ссылку, а сам фон остался тёмным — заголовок
 *     «Уведомления» пропал совсем.
 * ------------------------------------------------------------ */
/* На телефоне у панели отдельный набор правил с !important
   (homepage.css, @media max-width:860px) — повторяем с ним же. */
html[data-theme="light"] .header-notice-dropdown {
  background: linear-gradient(180deg, #ffffff, #f7f9fe) !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 70px rgba(23, 38, 74, .24) !important;
}
html[data-theme="light"] .header-notice-head strong { color: var(--text); }
html[data-theme="light"] .header-notice-head small,
html[data-theme="light"] .header-notice-empty { color: var(--muted); }
html[data-theme="light"] .header-notice-close {
  background: rgba(23, 38, 74, .07);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .header-notice-close:hover { background: rgba(23, 38, 74, .14); }
html[data-theme="light"] .header-notice-item {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .header-notice-item.is-messages { background: linear-gradient(180deg, rgba(47, 107, 255, .09), rgba(47, 107, 255, .03)); }
html[data-theme="light"] .header-notice-item.is-friends  { background: linear-gradient(180deg, rgba(15, 157, 143, .09), rgba(15, 157, 143, .03)); }
html[data-theme="light"] .header-notice-item.is-gifts    { background: linear-gradient(180deg, rgba(255, 190, 60, .12), rgba(255, 190, 60, .04)); }
html[data-theme="light"] .header-notice-item img { background: rgba(23, 38, 74, .06); }
html[data-theme="light"] .header-notice-copy strong { color: var(--text); }

/* ------------------------------------------------------------
 * 32. ЛОГОТИПЫ ПЛОЩАДОК И ПЛАШКА PREMIUM.
 *
 *     Значки Spotify / YouTube / Apple Music / Deezer загружены
 *     БЕЛЫМИ картинками под тёмную тему. Перекрасить картинку из CSS
 *     нельзя, поэтому даём каждой тёмную подложку — приём, которым
 *     пользуются все, у кого один набор логотипов на две темы.
 *     Заодно: плашка «Premium уже активен» была мятным по мятному —
 *     1.26:1.
 * ------------------------------------------------------------ */
html[data-theme="light"] .stream-link img {
  box-sizing: content-box;
  padding: 5px;
  border-radius: 10px;
  background: #101a2e;
}
html[data-theme="light"] .stream-link {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
}
html[data-theme="light"] .stream-link:hover { background: #f4f7fd; border-color: rgba(47, 107, 255, .32); }
html[data-theme="light"] .streaming-panel__image {
  background: rgba(23, 38, 74, .05);
  border-color: var(--line);
}
html[data-theme="light"] .home-premium-status {
  background: rgba(15, 157, 143, .10);
  border-color: rgba(15, 157, 143, .32);
  color: #0b6259;
}

/* ------------------------------------------------------------
 * 33. КРЕСТИК ЗАКРЫТИЯ МЕНЮ.
 *     Он собран из трёх полосок .menu-toggle span, и цвет у них
 *     задан белым напрямую, а не currentColor — поэтому в светлой
 *     теме крестик белый на белой кнопке.
 * ------------------------------------------------------------ */
html[data-theme="light"] .menu-toggle,
html[data-theme="light"] .menu-toggle.is-open { color: #101a2e !important; }
html[data-theme="light"] .menu-toggle span { background: #101a2e !important; }
html[data-theme="light"] .menu-toggle {
  background: #ffffff !important;
  border-color: var(--line) !important;
}

/* ------------------------------------------------------------
 * 34. ОКНО ЗВОНКА: ПОДЛОЖКА И СВОЁ МАЛЕНЬКОЕ ОКНО.
 *
 *     Пункт 21 выше покрасил карточку звонка, но не контейнер
 *     кадра. У .call-video-grid залит фон #020712 с !important, и
 *     он остаётся тёмным при светлой теме. Пока идёт соединение,
 *     собственное видео меньше контейнера — и снизу выступает
 *     чёрная полоса, из-за которой окно выглядит «наполовину
 *     сбитым» (на скрине она обведена красным).
 *
 *     Отличаем ДВЕ вещи, которые раньше путались:
 *       • сам <video> — подложка под картинку с камеры, остаётся
 *         почти чёрной в любой теме, иначе при паузе кадра будет
 *         бликовать белым;
 *       • контейнер и заглушка «Камера выключена» — это
 *         поверхности интерфейса, они обязаны быть светлыми.
 * ------------------------------------------------------------ */
/* Фон и рамку контейнера кадра здесь больше не задаём: с 2026-09-01
   (часть 14 в site.css) кадр собеседника растянут на всю площадь через
   inset: 0, поверхность целиком закрыта им, а край рисует одна общая
   внутренняя тень. Светлая рамка поверх неё давала двойную линию. */
html[data-theme="light"] .call-self {
  border-color: rgba(23, 38, 74, .18) !important;
  box-shadow: 0 8px 22px rgba(23, 38, 74, .22) !important;
}
html[data-theme="light"] .call-self__off {
  background: #f2f5fc;
  color: #45557a;
}
html[data-theme="light"] .call-self__toggle { background: rgba(23, 38, 74, .78); color: #ffffff; }
html[data-theme="light"] .call-self__toggle:hover { background: rgba(23, 38, 74, .92); }
html[data-theme="light"] .call-self__mode { background: rgba(23, 38, 74, .78); color: #ffffff; }
html[data-theme="light"] .call-remote-avatar {
  background: #dfe6f4 !important;
  border-color: rgba(23, 38, 74, .14) !important;
  box-shadow: 0 24px 70px rgba(23, 38, 74, .22), 0 0 0 10px rgba(47, 107, 255, .07) !important;
}
html[data-theme="light"] .call-status-chip { background: rgba(47, 107, 255, .10); color: #24407e; }

/* Приём звонка: диалог собран из .auth-modal__dialog, а он в этой
 * теме уже светлый — но заголовок и подпись цвет берут от оверлея
 * и остаются светлыми, то есть белым по белому. */
html[data-theme="light"] .incoming-call-modal__dialog {
  background: linear-gradient(160deg, #ffffff 0%, #f5f8fe 100%) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .incoming-call-modal__dialog h2,
html[data-theme="light"] .incoming-call-modal__dialog p,
html[data-theme="light"] .incoming-call-modal__dialog #incomingCallText { color: var(--text) !important; }
html[data-theme="light"] .incoming-call-modal__avatar img { border-color: rgba(23, 38, 74, .18) !important; }

/* ------------------------------------------------------------
 * 35. ИНДИКАТОР «В СЕТИ» — ВИДИМОСТЬ В СВЕТЛОЙ ТЕМЕ.
 *
 *     Точка задумана для тёмного фона: мятный #64e5ae в тёмном
 *     кольце rgba(9,15,28,.95). На белой карточке мята почти
 *     сливается со светлым — 1.4:1 к фону, — а тёмное кольцо
 *     выглядит грязной обводкой вокруг аватара.
 *
 *     Меняем обе части сразу: цвет — на насыщенный зелёный
 *     (4.6:1 к белому), кольцо — на белое, и добавляем тонкую
 *     тёмную окантовку тенью. Получается «капля» с чётким краем,
 *     заметная и на белой карточке, и поверх светлого фото.
 *     Серый «не в сети» тоже темнеем, иначе он растворяется.
 * ------------------------------------------------------------ */
html[data-theme="light"] .online-dot {
  border-color: #ffffff !important;
  background: #7a8aa6 !important;
  box-shadow: 0 0 0 1px rgba(23, 38, 74, .28) !important;
}
html[data-theme="light"] .online-dot.is-online {
  background: #12a150 !important;
  box-shadow: 0 0 0 1px rgba(9, 92, 46, .55), 0 0 0 5px rgba(18, 161, 80, .20) !important;
}
html[data-theme="light"] .home-user-status .online-dot { background: #7a8aa6 !important; }
html[data-theme="light"] .home-user-status .online-dot.is-online {
  background: #12a150 !important;
  box-shadow: 0 0 0 4px rgba(18, 161, 80, .18) !important;
}

/* Значок-кружок в списках и подписях к постам. */
html[data-theme="light"] .online-state-badge {
  background: #ffffff;
  border-color: rgba(23, 38, 74, .18);
}
html[data-theme="light"] .online-state-badge i { background: #7a8aa6; }
html[data-theme="light"] .online-state-badge.is-online i {
  background: #12a150 !important;
  box-shadow: 0 0 0 4px rgba(18, 161, 80, .18) !important;
}

/* Текстовые варианты «Сейчас в сети». */
html[data-theme="light"] .home-user-presence.is-online { color: #0a7a3c !important; font-weight: 700; }
html[data-theme="light"] .hero-pill.is-online {
  background: rgba(18, 161, 80, .12) !important;
  border-color: rgba(18, 161, 80, .34) !important;
  color: #0a6f37 !important;
}


/* «Как в системе»: тот же набор правил для data-theme="auto",
   когда система просит светлую тему. Копия сгенерирована — править
   нужно блок ВЫШЕ и заново прогнать scripts/build-light-theme.cjs. */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .header-player-backdrop {
    background: radial-gradient(circle at top, rgba(23, 38, 74, .34), rgba(23, 38, 74, .52));
  }
  html[data-theme="auto"] .header-player-shell {
    border-color: rgba(47, 107, 255, .18);
    background: linear-gradient(140deg, #ffffff, #f4f7fd);
    color: var(--text);
    box-shadow: 0 40px 110px rgba(23, 38, 74, .22);
  }
  html[data-theme="auto"] .header-player-shell::before {
    background: radial-gradient(circle at top left, rgba(47, 107, 255, .10), transparent 38%),
                radial-gradient(circle at bottom right, rgba(15, 157, 143, .08), transparent 30%);
  }
  html[data-theme="auto"] .header-player-shell::after { opacity: .35; }
  html[data-theme="auto"] .header-player-stage h3,
  html[data-theme="auto"] .header-player-stage strong { color: var(--text); }
  html[data-theme="auto"] .header-player-stage p,
  html[data-theme="auto"] .header-player-stage .eyebrow { color: var(--muted); }
  html[data-theme="auto"] .header-player-now {
    border-color: var(--line);
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(23, 38, 74, .10);
  }
  html[data-theme="auto"] .header-player-now-copy strong { color: var(--text); }
  html[data-theme="auto"] .header-player-now-copy span { color: var(--muted); }
  html[data-theme="auto"] .header-player-playlist {
    border-left-color: var(--line);
    background: linear-gradient(180deg, #f7f9fe, #eef2fa);
  }
  html[data-theme="auto"] .header-player-playlist-head,
  html[data-theme="auto"] .header-player-playlist-head span { color: var(--text); }
  html[data-theme="auto"] .header-player-playlist-head small { color: var(--muted); }
  html[data-theme="auto"] .header-player-track {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
  }
  html[data-theme="auto"] .header-player-track strong { color: var(--text); }
  html[data-theme="auto"] .header-player-track small,
  html[data-theme="auto"] .header-player-track-copy small { color: var(--muted); }
  html[data-theme="auto"] .header-player-track:hover,
  html[data-theme="auto"] .header-player-track.is-current {
    background: linear-gradient(135deg, rgba(47, 107, 255, .12), rgba(15, 157, 143, .08));
    border-color: rgba(47, 107, 255, .38);
  }
  html[data-theme="auto"] .header-player-track img { background: rgba(23, 38, 74, .06); }
  html[data-theme="auto"] .header-player-index {
    background: rgba(23, 38, 74, .07);
    color: var(--muted);
  }
  html[data-theme="auto"] .header-player-lock {
    background: rgba(255, 190, 60, .16);
    border-color: rgba(184, 124, 0, .30);
    color: #7a5200;
  }
  html[data-theme="auto"] .header-player-search input,
  html[data-theme="auto"] .header-player-playlist .admin-input {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .header-player-close {
    background: rgba(23, 38, 74, .07);
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .header-player-close:hover { background: rgba(23, 38, 74, .14); }
  html[data-theme="auto"] .header-player-empty,
  html[data-theme="auto"] .header-player-playlist .empty-state {
    background: rgba(47, 107, 255, .06);
    border-color: rgba(47, 107, 255, .22);
    color: var(--muted);
  }
  html[data-theme="auto"] .header-player-control {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 4px 12px rgba(23, 38, 74, .10);
  }
  html[data-theme="auto"] .header-player-control.is-play {
    background: var(--accent-grad, linear-gradient(135deg, #2358d8, #0b7a70));
    border-color: transparent;
    color: #ffffff;
  }
  html[data-theme="auto"] .header-player-mode {
    background: #ffffff;
    border-color: var(--line);
    color: #45557a;
  }
  html[data-theme="auto"] .header-player-mode:hover { color: var(--text); background: #f2f6fd; }
  html[data-theme="auto"] .header-player-mode.is-active {
    background: linear-gradient(135deg, rgba(47, 107, 255, .16), rgba(15, 157, 143, .12));
    border-color: rgba(47, 107, 255, .42);
    color: #16336b;
  }
  html[data-theme="auto"] .header-player-volume-label,
  html[data-theme="auto"] .header-player-progress span { color: var(--muted); }
  html[data-theme="auto"] .header-player-upsell p { color: var(--muted); }
  html[data-theme="auto"] .profile-player-fab { color: #ffffff; }
  html[data-theme="auto"] .like-details > summary {
    background: #ffffff !important;
    border-color: var(--line) !important;
    color: #2b3a5c !important;
    box-shadow: 0 2px 6px rgba(23, 38, 74, .06) !important;
  }
  html[data-theme="auto"] .like-details[open]::before { background: rgba(23, 38, 74, .28) !important; }
  html[data-theme="auto"] .like-details[open] .likers-list,
  html[data-theme="auto"] .like-details[open] .gallery-likers-list,
  html[data-theme="auto"] .like-details[open] .story-likers-list {
    background: #ffffff !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
    box-shadow: 0 34px 90px rgba(23, 38, 74, .26) !important;
  }
  html[data-theme="auto"] .likers-list a,
  html[data-theme="auto"] .gallery-likers-list a,
  html[data-theme="auto"] .story-likers-list a { color: var(--text) !important; }
  html[data-theme="auto"] .likers-list a:hover,
  html[data-theme="auto"] .gallery-likers-list a:hover,
  html[data-theme="auto"] .story-likers-list a:hover { background: rgba(47, 107, 255, .08) !important; }
  html[data-theme="auto"] .likers-list__empty,
  html[data-theme="auto"] .gallery-likers-list__empty,
  html[data-theme="auto"] .story-likers-list__empty { color: var(--muted) !important; }
  html[data-theme="auto"] .likers-popover-close {
    background: rgba(23, 38, 74, .07) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
  }
  html[data-theme="auto"] .sticker-balance-chip {
    border-color: rgba(47, 107, 255, .30);
    background: rgba(47, 107, 255, .08);
    color: #1c3f8f;
  }
  html[data-theme="auto"] .sticker-balance-chip b { color: #16336b; }
  html[data-theme="auto"] .sticker-pack-tile__action,
  html[data-theme="auto"] .sticker-category-card__lock {
    border-color: rgba(184, 124, 0, .34);
    background: rgba(255, 190, 60, .14);
    color: #7a5200;
  }
  html[data-theme="auto"] .sticker-pack-tile__action.is-open,
  html[data-theme="auto"] .sticker-category-card__lock.is-open {
    border-color: rgba(47, 107, 255, .32);
    background: rgba(47, 107, 255, .10);
    color: #1c3f8f;
  }
  html[data-theme="auto"] .sticker-store-panel {
    background: rgba(23, 38, 74, .03);
    border-color: var(--line);
  }
  html[data-theme="auto"] .sticker-pack-tile {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .sticker-pack-tile__meta { color: var(--muted); }
  html[data-theme="auto"] .sticker-pack-price { color: var(--text); }
  html[data-theme="auto"] .selected-sticker-badge,
  html[data-theme="auto"] .selected-upload-badge {
    border-color: rgba(47, 107, 255, .22);
    background: linear-gradient(180deg, rgba(47, 107, 255, .08), rgba(23, 38, 74, .03));
    color: var(--text);
  }
  html[data-theme="auto"] .selected-upload-badge__label {
    background: rgba(47, 107, 255, .14);
    border-color: rgba(47, 107, 255, .28);
    color: #1c3f8f;
  }
  html[data-theme="auto"] .selected-upload-badge__name { color: var(--text); }
  html[data-theme="auto"] .ui-clear-btn,
  html[data-theme="auto"] .site-icon-btn { color: #2b3a5c; }
  html[data-theme="auto"] .site-icon-btn.subtle-danger,
  html[data-theme="auto"] .message-delete-btn.site-btn.subtle-danger { color: #a4213c; }
  html[data-theme="auto"] .reply-snippet,
  html[data-theme="auto"] .reply-preview {
    background: rgba(23, 38, 74, .05);
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .reply-snippet__text,
  html[data-theme="auto"] .reply-preview__text { color: var(--text); }
  html[data-theme="auto"] .reply-snippet__meta,
  html[data-theme="auto"] .reply-preview__meta { color: #1c6f8f; }
  html[data-theme="auto"] .message-content-tag,
  html[data-theme="auto"] .message-bubble.is-me .message-content-tag { color: #2b3a5c; }
  html[data-theme="auto"] .message-media-label { color: var(--muted); }
  html[data-theme="auto"] .notification-card__copy p { color: var(--muted); }
  html[data-theme="auto"] #typingIndicator { color: #0b6f62; }
  html[data-theme="auto"] .compose-box.is-recording-voice .voice-recorder-status,
  html[data-theme="auto"] .compose-box.is-recording-video .video-recorder-status {
    color: #a4213c;
    border-color: rgba(210, 63, 92, .42);
    background: linear-gradient(135deg, rgba(210, 63, 92, .12), rgba(255, 138, 92, .07));
  }
  html[data-theme="auto"] .compose-box.is-recording-video .video-circle-preview__label { color: #a4213c; }
  html[data-theme="auto"] .voice-recorder-status {
    border-color: rgba(23, 38, 74, .18);
    background: rgba(23, 38, 74, .03);
  }
  html[data-theme="auto"] .custom-media-player.is-audio .custom-media-player__audio-copy strong,
  html[data-theme="auto"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__audio-copy strong,
  html[data-theme="auto"] .message-voice-native__label,
  html[data-theme="auto"] .message-voice-shell.is-native .message-voice-native__label,
  html[data-theme="auto"] .native-audio-player__label { color: var(--text); }
  html[data-theme="auto"] .message-audio-shell.is-native .message-audio-native__label { color: #0f5d84; }
  html[data-theme="auto"] .custom-media-player.is-video.is-compact .custom-media-player__timeline span,
  html[data-theme="auto"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .custom-media-player__timeline span { color: var(--muted); }
  html[data-theme="auto"] .leskov-player__btn--speed {
    color: #1c3f8f;
    border-color: rgba(47, 107, 255, .30);
    background: rgba(47, 107, 255, .08);
  }
  html[data-theme="auto"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn { color: var(--text); }
  html[data-theme="auto"] .profile-cover-info .inline-badged-name .user-list-name,
  html[data-theme="auto"] .profile-mobile-cover-info .inline-badged-name .user-list-name {
    color: var(--text);
    text-shadow: none;
  }
  html[data-theme="auto"] .profile-cover-panel .profile-cover-about { color: #45557a; }
  html[data-theme="auto"] .profile-cover-panel .hero-pill {
    border-color: var(--line);
    background: rgba(23, 38, 74, .05);
    color: #2b3a5c;
    box-shadow: none;
  }
  html[data-theme="auto"] .profile-cover-panel .hero-pill.is-good {
    background: rgba(15, 157, 143, .12);
    border-color: rgba(15, 157, 143, .30);
    color: #0b6259;
  }
  html[data-theme="auto"] .profile-cover-panel .hero-pill.is-online {
    background: rgba(20, 160, 110, .14);
    border-color: rgba(20, 160, 110, .30);
    color: #0a6b48;
  }
  html[data-theme="auto"] .profile-cover-panel .hero-pill.is-offline {
    background: rgba(23, 38, 74, .05);
    color: #55658a;
  }
  html[data-theme="auto"] .profile-cover-panel .hero-pill--role {
    background: rgba(47, 107, 255, .12);
    border-color: rgba(47, 107, 255, .28);
    color: #1c3f8f;
  }
  html[data-theme="auto"] .verified-badge {
    background: rgba(47, 107, 255, .14);
    border-color: rgba(47, 107, 255, .34);
    color: #1c5a8f;
  }
  html[data-theme="auto"] .premium-badge {
    background: rgba(255, 190, 60, .18);
    border-color: rgba(184, 124, 0, .34);
    color: #7a5200;
  }
  html[data-theme="auto"] .custom-user-badge,
  html[data-theme="auto"] .custom-user-badge--solid { color: #ffffff; }
  html[data-theme="auto"] .leskov-draft-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
  }
  html[data-theme="auto"] .leskov-draft-card__preview { color: var(--text); }
  html[data-theme="auto"] .leskov-draft-card__meta { color: var(--muted); }
  html[data-theme="auto"] .leskov-drafts-empty {
    border-color: rgba(23, 38, 74, .20);
    color: var(--muted);
  }
  html[data-theme="auto"] .leskov-reaction-pill.is-muted { color: var(--muted); }
  html[data-theme="auto"] .leskov-poll-option__pct,
  html[data-theme="auto"] .leskov-poll-option__count,
  html[data-theme="auto"] .leskov-poll-footer,
  html[data-theme="auto"] .leskov-poll-multi,
  html[data-theme="auto"] .leskov-poll-close,
  html[data-theme="auto"] .leskov-schedule-field { color: var(--muted); }
  html[data-theme="auto"] .leskov-poll-edit-warn { color: #7a5200; }
  html[data-theme="auto"] .leskov-poll-edit-warn__icon { color: #a06400; }
  html[data-theme="auto"] .leskov-poll-edit__icon,
  html[data-theme="auto"] .leskov-poll-edit[open] > summary .leskov-poll-edit__chevron,
  html[data-theme="auto"] .draft-revert-btn__icon { color: #0b7a70; }
  html[data-theme="auto"] .drafts-title-icon {
    color: #0b6259;
    background: linear-gradient(145deg, rgba(47, 107, 255, .12), rgba(15, 157, 143, .10));
    border-color: rgba(15, 157, 143, .28);
    box-shadow: 0 8px 20px rgba(23, 38, 74, .08);
  }
  html[data-theme="auto"] .leskov-field-label { color: var(--text); }
  html[data-theme="auto"] .leskov-form-hint { color: var(--muted); }
  html[data-theme="auto"] .leskov-account-section h3,
  html[data-theme="auto"] .leskov-account-state h4 { color: var(--text); }
  html[data-theme="auto"] .leskov-account-state p,
  html[data-theme="auto"] .leskov-account-reason,
  html[data-theme="auto"] .leskov-account-confirm,
  html[data-theme="auto"] .leskov-account-collapse summary { color: #45557a; }
  html[data-theme="auto"] .leskov-account-collapse summary::before { color: var(--muted); }
  html[data-theme="auto"] .leskov-account-banner.is-deactivated {
    color: #7a5200;
    background: rgba(255, 190, 60, .14);
    border-color: rgba(184, 124, 0, .30);
  }
  html[data-theme="auto"] .leskov-account-banner.is-deletion {
    color: #a4213c;
    background: rgba(210, 63, 92, .10);
    border-color: rgba(210, 63, 92, .30);
  }
  html[data-theme="auto"] .leskov-settings__saved { color: #0b6259; }
  html[data-theme="auto"] .leskov-badge--warn {
    color: #7a5200;
    background: rgba(255, 190, 60, .16);
    border-color: rgba(184, 124, 0, .30);
  }
  html[data-theme="auto"] .leskov-calls__friend-avatar--placeholder,
  html[data-theme="auto"] .leskov-calls-history__avatar--placeholder { color: #ffffff; }
  html[data-theme="auto"] .calls-active__meta { color: var(--text); }
  html[data-theme="auto"] .kpi-value { color: var(--text); }
  html[data-theme="auto"] .kpi-label,
  html[data-theme="auto"] .kpi-sub,
  html[data-theme="auto"] .leskov-heatmap__day-label,
  html[data-theme="auto"] .leskov-heatmap__day-total { color: var(--muted); }
  html[data-theme="auto"] .leskov-period-link { color: #45557a; }
  html[data-theme="auto"] .leskov-period-link:hover { color: var(--text); }
  html[data-theme="auto"] .leskov-perf-badge {
    color: #45557a;
    background: #ffffff;
    border-color: var(--line);
  }
  html[data-theme="auto"] .leskov-perf-badge[data-rating="good"] { color: #0b6259; }
  html[data-theme="auto"] select,
  html[data-theme="auto"] select.admin-input,
  html[data-theme="auto"] .leskov-settings__select,
  html[data-theme="auto"] .admin-input[multiple],
  html[data-theme="auto"] select.leskov-settings__input { color-scheme: light; }
  html[data-theme="auto"] select option,
  html[data-theme="auto"] select optgroup {
    background-color: #ffffff;
    color: #101a2e;
  }
  html[data-theme="auto"] select optgroup { color: #55658a; }
  html[data-theme="auto"] select option[value=""] { color: #6b7a9c; }
  html[data-theme="auto"] select option:checked {
    background: #2f6bff linear-gradient(0deg, #2f6bff, #2f6bff);
    color: #ffffff;
  }
  html[data-theme="auto"] select option[selected]:not(:checked) {
    background-color: #ffffff;
    color: #101a2e;
  }
  html[data-theme="auto"] .custom-file-control.has-file .custom-file-name { color: var(--text); }
  html[data-theme="auto"] .custom-file-control:not(.has-file) .custom-file-name { color: var(--muted); }
  html[data-theme="auto"] .leskov-gallery__uploader textarea,
  html[data-theme="auto"] .leskov-gallery__uploader input[type="text"] {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .leskov-gallery__uploader-meta { color: var(--muted); }
  html[data-theme="auto"] .leskov-circle-recorder {
    --circle-track: rgba(23, 38, 74, .14);
    --circle-shadow: 0 20px 46px rgba(23, 38, 74, .16);
    --circle-well: radial-gradient(circle at 50% 30%, #2b3b58, #17223c 72%);
    --circle-idle-text: rgba(255, 255, 255, .78);
  }
  html[data-theme="auto"] .leskov-circle-recorder__stage {
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(47, 107, 255, .05), transparent 70%),
      rgba(23, 38, 74, .03);
  }
  html[data-theme="auto"] .leskov-circle-recorder__result-play {
    background: #ffffff;
    color: #101a2e;
    box-shadow: 0 12px 28px rgba(23, 38, 74, .26);
  }
  html[data-theme="auto"] .leskov-circle-recorder__error {
    background: rgba(210, 63, 92, .10);
    color: #a4213c;
  }
  html[data-theme="auto"] .leskov-circle-recorder__upload { background: rgba(23, 38, 74, .04); }
  html[data-theme="auto"] .leskov-circles__head-meta { color: var(--muted); }
  html[data-theme="auto"] .leskov-circle-card__name { color: var(--text); }
  html[data-theme="auto"] .leskov-circle-card__views,
  html[data-theme="auto"] .leskov-circle-card__caption { color: var(--muted); }
  html[data-theme="auto"] .toast-notice {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 20px 50px rgba(23, 38, 74, .18);
  }
  html[data-theme="auto"] .toast-badge { color: #0b6259; }
  html[data-theme="auto"] .header-notice-item,
  html[data-theme="auto"] .header-notice-list a { color: var(--text); }
  html[data-theme="auto"] .header-notice-all { color: #1c3f8f; }
  html[data-theme="auto"] .header-notice-close {
    border-color: var(--line);
    background: rgba(23, 38, 74, .06);
    color: var(--text);
  }
  html[data-theme="auto"] .home-user-presence.is-online { color: #0b6259; }
  html[data-theme="auto"] .lsv-history-item.is-incoming .lsv-history-sign { color: #0b6259; }
  html[data-theme="auto"] .gifts-modal__dialog .gift-item__message { color: var(--muted); }
  html[data-theme="auto"] .admin-flash { color: var(--text); }
  html[data-theme="auto"] .auth-tabs__btn:hover { color: var(--text); }
  html[data-theme="auto"] .auth-2fa-back a { color: #1c3f8f; }
  html[data-theme="auto"] .auth-2fa-back a:hover,
  html[data-theme="auto"] .auth-2fa-back a:focus-visible { color: #16336b; }
  html[data-theme="auto"] .home-event-lang button { color: #2b3a5c; }
  html[data-theme="auto"] .home-scroll-top { color: #ffffff; }
  html[data-theme="auto"] .story-comment-row,
  html[data-theme="auto"] .gallery-comments-mini .story-comment-row,
  html[data-theme="auto"] .story-comments-list .story-comment-row { color: #2b3a5c; }
  html[data-theme="auto"] .story-comment-row > span strong { color: var(--text); }
  html[data-theme="auto"] .report-action { color: #a4213c; }
  html[data-theme="auto"] .report-action:hover { color: #ffffff; }
  html[data-theme="auto"] .notifications-prefs-summary:hover,
  html[data-theme="auto"] .notifications-prefs-summary:focus-visible { color: var(--text); }
  html[data-theme="auto"] .leskov-notification__count { color: #ffffff; }
  html[data-theme="auto"] .header-player-mode { color: #45557a !important; }
  html[data-theme="auto"] .header-player-mode:hover { color: var(--text) !important; }
  html[data-theme="auto"] .header-player-mode.is-active { color: #16336b !important; }
  html[data-theme="auto"] .header-player-mode::before { background: rgba(23, 38, 74, .10) !important; }
  html[data-theme="auto"] .header-player-btn,
  html[data-theme="auto"] .header-icon-btn.header-player-btn,
  html[data-theme="auto"] .header-player-control { color: var(--text) !important; }
  html[data-theme="auto"] .header-player-control.is-play { color: #ffffff !important; }
  html[data-theme="auto"] .story-comment-row,
  html[data-theme="auto"] .gallery-comments-mini .story-comment-row,
  html[data-theme="auto"] .story-comments-list .story-comment-row {
    background: rgba(23, 38, 74, .04) !important;
    border-color: var(--line) !important;
    color: #45557a !important;
  }
  html[data-theme="auto"] .story-comment-row > span strong { color: var(--text) !important; }
  html[data-theme="auto"] .report-action {
    border-color: rgba(210, 63, 92, .34) !important;
    background: rgba(210, 63, 92, .09) !important;
    color: #a4213c !important;
  }
  html[data-theme="auto"] .report-action:hover {
    background: rgba(210, 63, 92, .82) !important;
    color: #ffffff !important;
  }
  html[data-theme="auto"] .home-event-lang button { color: #2b3a5c !important; }
  html[data-theme="auto"] .message-voice-shell .custom-media-player.is-audio.is-voice-message .site-chip-btn { color: var(--text) !important; }
  html[data-theme="auto"] .draft-revert-btn__icon { color: #0b7a70 !important; }
  html[data-theme="auto"] .site-header .site-nav.is-open a,
  html[data-theme="auto"] body.menu-open .site-header .site-nav a,
  html[data-theme="auto"] body.menu-open .site-nav a { color: #2b3a5c !important; }
  html[data-theme="auto"] .admin-flash {
    background: linear-gradient(180deg, rgba(15, 157, 143, .10), rgba(15, 157, 143, .05));
    border-color: rgba(15, 157, 143, .26);
    color: var(--text);
    box-shadow: 0 8px 22px rgba(23, 38, 74, .07);
  }
  html[data-theme="auto"] .admin-flash.error {
    background: linear-gradient(180deg, rgba(210, 63, 92, .10), rgba(210, 63, 92, .05));
    border-color: rgba(210, 63, 92, .26);
  }
  html[data-theme="auto"] .auth-tabs {
    background: rgba(23, 38, 74, .05);
    border-color: var(--line);
  }
  html[data-theme="auto"] .auth-tabs__btn { color: #45557a; }
  html[data-theme="auto"] .leskov-circle-recorder__upload-row,
  html[data-theme="auto"] .gallery-video-cover-field .small { color: #45557a; }
  html[data-theme="auto"] .reply-snippet__meta,
  html[data-theme="auto"] .reply-preview__meta { color: #155e7a; }
  html[data-theme="auto"] .leskov-reaction-picker-btn__icon { color: #45557a; }
  html[data-theme="auto"] .leskov-reaction-picker {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .header-player-btn,
  html[data-theme="auto"] .header-icon-btn.header-player-btn,
  html[data-theme="auto"] .header-player-control,
  html[data-theme="auto"] .promo-player-btn,
  html[data-theme="auto"] .player-button {
    background: #ffffff !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
    box-shadow: 0 4px 12px rgba(23, 38, 74, .10) !important;
  }
  html[data-theme="auto"] .header-player-btn:hover,
  html[data-theme="auto"] .header-player-control:hover,
  html[data-theme="auto"] .promo-player-btn:hover {
    background: #f2f6fd !important;
    border-color: rgba(47, 107, 255, .34) !important;
  }
  html[data-theme="auto"] .header-player-control.is-play,
  html[data-theme="auto"] .promo-player-btn.is-play {
    background: var(--accent-grad) !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }
  html[data-theme="auto"] .header-player-panel:not([hidden]),
  html[data-theme="auto"] body.header-player-open .header-player-panel {
    background: rgba(23, 38, 74, .55) !important;
  }
  html[data-theme="auto"] .header-player-now .header-player-mode,
  html[data-theme="auto"] .header-player-mode {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
  }
  html[data-theme="auto"] .header-player-mode.is-active {
    background: var(--accent-grad) !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }
  html[data-theme="auto"] .header-player-mode.is-active::before { background: rgba(255, 255, 255, .22) !important; }
  html[data-theme="auto"] body > .likers-list.is-likers-portal,
  html[data-theme="auto"] body > .gallery-likers-list.is-likers-portal,
  html[data-theme="auto"] body > .story-likers-list.is-likers-portal,
  html[data-theme="auto"] body > .likers-summary.is-likers-portal {
    border-color: var(--line) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    box-shadow: 0 28px 80px rgba(23, 38, 74, .26), inset 0 1px rgba(255, 255, 255, .9) !important;
  }
  html[data-theme="auto"] .likers-list__head,
  html[data-theme="auto"] .likers-list__head strong { color: var(--text); }
  html[data-theme="auto"] .likers-list__user strong { color: var(--text); }
  html[data-theme="auto"] .likers-list__user small { color: var(--muted); }
  html[data-theme="auto"] .likers-list.is-empty .likers-list__empty { color: var(--muted); }
  html[data-theme="auto"] .call-overlay__backdrop,
  html[data-theme="auto"] .auth-modal__backdrop {
    background: linear-gradient(135deg, rgba(23, 38, 74, .52) 0%, rgba(23, 38, 74, .62) 100%) !important;
  }
  html[data-theme="auto"] .call-overlay__card {
    border-color: var(--line) !important;
    background: linear-gradient(160deg, #ffffff 0%, #f5f8fe 100%) !important;
    color: var(--text) !important;
    box-shadow: 0 50px 140px rgba(23, 38, 74, .28), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  }
  html[data-theme="auto"] .call-overlay__state { color: #45557a !important; }
  html[data-theme="auto"] .call-overlay__peer strong { color: var(--text) !important; }
  html[data-theme="auto"] .call-overlay__peer #callDurationLabel,
  html[data-theme="auto"] .call-overlay__peer p { color: #45557a !important; }
  html[data-theme="auto"] .call-overlay__peer img { border-color: rgba(23, 38, 74, .22) !important; }
  html[data-theme="auto"] .incoming-call-modal__dialog h2,
  html[data-theme="auto"] .incoming-call-modal__dialog p { color: var(--text); }
  html[data-theme="auto"] .call-controls .media-action-btn {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .call-controls .media-action-btn:hover { background: #f2f6fd; }
  html[data-theme="auto"] .call-controls .site-btn.danger,
  html[data-theme="auto"] .call-controls .media-action-btn.danger {
    background: var(--danger);
    border-color: transparent;
    color: #ffffff;
  }
  html[data-theme="auto"] .call-self__mode { color: #ffffff; }
  html[data-theme="auto"] .upload-progress {
    border-color: var(--line) !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 12px 30px rgba(23, 38, 74, .14) !important;
  }
  html[data-theme="auto"] .upload-progress__name { color: var(--text); }
  html[data-theme="auto"] .upload-progress__meta,
  html[data-theme="auto"] .upload-progress__percent { color: #45557a; }
  html[data-theme="auto"] .upload-progress__bar { background: rgba(23, 38, 74, .10); }
  html[data-theme="auto"] .leskov-gallery__uploader-progress { background: rgba(23, 38, 74, .08); }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue,
  html[data-theme="auto"] .leskov-player--premium .leskov-player__modes,
  html[data-theme="auto"] .leskov-dock__drawer,
  html[data-theme="auto"] .leskov-story-composer__visibility,
  html[data-theme="auto"] .leskov-gallery__queue-item {
    background: rgba(47, 107, 255, .05);
    border-color: var(--line);
  }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue-title,
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue-count { color: #45557a; }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue-search {
    background: #ffffff;
    border-color: var(--line);
  }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue-name { color: var(--text); }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue-meta { color: var(--muted); }
  html[data-theme="auto"] .leskov-player--premium [data-playlist-index] {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
  }
  html[data-theme="auto"] .leskov-player--premium [data-playlist-index]:hover {
    background: #f4f7fd;
    border-color: rgba(47, 107, 255, .30);
  }
  html[data-theme="auto"] .leskov-player--premium [data-playlist-index].is-current {
    background: linear-gradient(90deg, rgba(47, 107, 255, .14), rgba(15, 157, 143, .09)), #ffffff;
    border-color: rgba(47, 107, 255, .38);
    box-shadow: inset 3px 0 0 var(--accent), 0 10px 26px rgba(23, 38, 74, .10);
  }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__queue-index {
    background: rgba(23, 38, 74, .06);
    border-color: var(--line);
    color: #45557a;
  }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__mode { color: #45557a; }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__mode:hover { color: var(--text); }
  html[data-theme="auto"] .leskov-player--premium .leskov-player__lsv { background: rgba(23, 38, 74, .04); }
  html[data-theme="auto"] .leskov-empty-state {
    background: #ffffff;
    border-color: var(--line);
  }
  html[data-theme="auto"] .leskov-empty-state__title { color: var(--text); }
  html[data-theme="auto"] .leskov-empty-state__hint { color: var(--muted); }
  html[data-theme="auto"] .leskov-empty-state__icon { color: var(--accent); }
  html[data-theme="auto"] .header-notice-all {
    background: rgba(47, 107, 255, .10) !important;
    border-top: 1px solid var(--line) !important;
    color: #16336b !important;
    font-weight: 800 !important;
    box-shadow: 0 -10px 24px rgba(23, 38, 74, .07) !important;
  }
  html[data-theme="auto"] .header-notice-all:hover { background: rgba(47, 107, 255, .16) !important; }
  html[data-theme="auto"] .leskov-composer-chips .site-btn.is-active,
  html[data-theme="auto"] .leskov-composer-chip.is-active {
    background: rgba(47, 107, 255, .12);
    border-color: rgba(47, 107, 255, .48);
    color: #16336b;
  }
  html[data-theme="auto"] .leskov-search-bar__submit,
  html[data-theme="auto"] .leskov-search-bar__submit.site-btn,
  html[data-theme="auto"] .leskov-search-bar__submit.button,
  html[data-theme="auto"] .leskov-search-tab.is-active,
  html[data-theme="auto"] .leskov-search-bar__item-avatar,
  html[data-theme="auto"] .leskov-tabs__btn.is-active,
  html[data-theme="auto"] .leskov-pagination__page.is-active,
  html[data-theme="auto"] .lang-pill.is-active,
  html[data-theme="auto"] .icon-badge,
  html[data-theme="auto"] .header-icon-chip,
  html[data-theme="auto"] .shop-badge,
  html[data-theme="auto"] .player-button,
  html[data-theme="auto"] .promo-track-trigger span,
  html[data-theme="auto"] .premium-track-trigger span,
  html[data-theme="auto"] .leskov-file-control__button,
  html[data-theme="auto"] .leskov-player--video .leskov-player__btn--play,
  html[data-theme="auto"] .leskov-player--video .leskov-player__center-btn,
  html[data-theme="auto"] .leskov-player--premium .leskov-player__premium-badge,
  html[data-theme="auto"] .leskov-player--premium .leskov-player__mode.is-active,
  html[data-theme="auto"] .leskov-player--premium [data-playlist-index].is-current .leskov-player__queue-index,
  html[data-theme="auto"] .leskov-dock__btn--play,
  html[data-theme="auto"] .leskov-poll-option.is-voted .leskov-poll-option__check,
  html[data-theme="auto"] .leskov-wizard__step.is-active .leskov-wizard__num,
  html[data-theme="auto"] .leskov-session__badge,
  html[data-theme="auto"] .leskov-story-ring__plus,
  html[data-theme="auto"] .leskov-story-composer__visibility button.is-active,
  html[data-theme="auto"] .comment-reply-btn.is-active,
  html[data-theme="auto"] .home-event-lang button.is-active,
  html[data-theme="auto"] .auth-tabs__btn.is-active,
  html[data-theme="auto"] .likers-list__head span,
  html[data-theme="auto"] .profile-player-fab,
  html[data-theme="auto"] input[type="file"]::file-selector-button,
  html[data-theme="auto"] input[type="file"]::-webkit-file-upload-button {
    background: var(--accent-grad) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  html[data-theme="auto"] .leskov-search-bar__submit svg,
  html[data-theme="auto"] .leskov-player--video .leskov-player__btn--play svg,
  html[data-theme="auto"] .leskov-player--video .leskov-player__center-btn svg,
  html[data-theme="auto"] .leskov-dock__btn--play svg,
  html[data-theme="auto"] .leskov-player--premium .leskov-player__premium-badge svg { fill: #ffffff !important; }
  html[data-theme="auto"] .leskov-search-tab.is-active .leskov-search-tab__count,
  html[data-theme="auto"] .leskov-search-tab.is-active .pill {
    background: rgba(255, 255, 255, .24) !important;
    color: #ffffff !important;
  }
  html[data-theme="auto"] .leskov-composer-chips .site-btn.is-active,
  html[data-theme="auto"] .leskov-composer-chip.is-active {
    background: rgba(47, 107, 255, .12) !important;
    border-color: rgba(47, 107, 255, .50) !important;
    color: #16336b !important;
  }
  html[data-theme="auto"] .leskov-search-tab.is-active .leskov-search-tab__count,
  html[data-theme="auto"] .leskov-search-tab.is-active .pill {
    background: rgba(6, 20, 46, .34) !important;
    color: #ffffff !important;
  }
  html[data-theme="auto"] .call-controls .site-btn.danger,
  html[data-theme="auto"] .call-controls .media-action-btn.danger,
  html[data-theme="auto"] .call-controls #endCallBtn {
    background: #c62740 !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }
  html[data-theme="auto"] .call-controls .site-btn.danger .btn-glyph svg,
  html[data-theme="auto"] .call-controls #endCallBtn .btn-glyph svg { fill: #ffffff !important; }
  html[data-theme="auto"] .leskov-player__btn--play,
  html[data-theme="auto"] .leskov-dock__btn--play {
    background: var(--accent-grad) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  html[data-theme="auto"] .leskov-player__btn--play:hover {
    background: linear-gradient(135deg, #1c4bc0, #096961) !important;
    filter: none !important;
  }
  html[data-theme="auto"] .leskov-player__btn--play svg,
  html[data-theme="auto"] .leskov-dock__btn--play svg { fill: #ffffff !important; }
  html[data-theme="auto"] .eyebrow,
  html[data-theme="auto"] .bio-highlight span,
  html[data-theme="auto"] .news-copy time,
  html[data-theme="auto"] .header-notice-copy small { color: #0b6259; }
  html[data-theme="auto"] .pill { color: #45557a; }
  html[data-theme="auto"] .home-status-badge {
    border-color: rgba(23, 38, 74, .14);
  }
  html[data-theme="auto"] .home-status-badge.verified {
    background: rgba(47, 107, 255, .14);
    color: #1c4c8f;
  }
  html[data-theme="auto"] .home-status-badge.premium {
    background: rgba(15, 157, 143, .14);
    color: #0b6259;
  }
  html[data-theme="auto"] .site-header .site-nav.is-open,
  html[data-theme="auto"] body.menu-open .site-header .site-nav,
  html[data-theme="auto"] body.menu-open .site-nav {
    background: linear-gradient(180deg, #ffffff, #f5f8fe) !important;
    border-color: var(--line) !important;
    box-shadow: 0 34px 90px rgba(23, 38, 74, .26), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  }
  html[data-theme="auto"] .site-header .site-nav.is-open a,
  html[data-theme="auto"] body.menu-open .site-header .site-nav a,
  html[data-theme="auto"] body.menu-open .site-nav a {
    background: rgba(47, 107, 255, .07) !important;
    border-color: rgba(47, 107, 255, .20) !important;
    color: #2b3a5c !important;
  }
  html[data-theme="auto"] .site-header .site-nav.is-open a:hover,
  html[data-theme="auto"] body.menu-open .site-nav a:hover {
    background: rgba(47, 107, 255, .14) !important;
    color: var(--text) !important;
  }
  html[data-theme="auto"] .site-header .site-nav.is-open .language-switcher--menu,
  html[data-theme="auto"] body.menu-open .site-header .site-nav .language-switcher--menu {
    background: rgba(23, 38, 74, .04) !important;
    border-color: var(--line) !important;
  }
  html[data-theme="auto"] .header-notice-dropdown {
    background: linear-gradient(180deg, #ffffff, #f7f9fe) !important;
    border-color: var(--line) !important;
    box-shadow: 0 24px 70px rgba(23, 38, 74, .24) !important;
  }
  html[data-theme="auto"] .header-notice-head strong { color: var(--text); }
  html[data-theme="auto"] .header-notice-head small,
  html[data-theme="auto"] .header-notice-empty { color: var(--muted); }
  html[data-theme="auto"] .header-notice-close {
    background: rgba(23, 38, 74, .07);
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .header-notice-close:hover { background: rgba(23, 38, 74, .14); }
  html[data-theme="auto"] .header-notice-item {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
  }
  html[data-theme="auto"] .header-notice-item.is-messages { background: linear-gradient(180deg, rgba(47, 107, 255, .09), rgba(47, 107, 255, .03)); }
  html[data-theme="auto"] .header-notice-item.is-friends  { background: linear-gradient(180deg, rgba(15, 157, 143, .09), rgba(15, 157, 143, .03)); }
  html[data-theme="auto"] .header-notice-item.is-gifts    { background: linear-gradient(180deg, rgba(255, 190, 60, .12), rgba(255, 190, 60, .04)); }
  html[data-theme="auto"] .header-notice-item img { background: rgba(23, 38, 74, .06); }
  html[data-theme="auto"] .header-notice-copy strong { color: var(--text); }
  html[data-theme="auto"] .stream-link img {
    box-sizing: content-box;
    padding: 5px;
    border-radius: 10px;
    background: #101a2e;
  }
  html[data-theme="auto"] .stream-link {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 2px 8px rgba(23, 38, 74, .05);
  }
  html[data-theme="auto"] .stream-link:hover { background: #f4f7fd; border-color: rgba(47, 107, 255, .32); }
  html[data-theme="auto"] .streaming-panel__image {
    background: rgba(23, 38, 74, .05);
    border-color: var(--line);
  }
  html[data-theme="auto"] .home-premium-status {
    background: rgba(15, 157, 143, .10);
    border-color: rgba(15, 157, 143, .32);
    color: #0b6259;
  }
  html[data-theme="auto"] .menu-toggle,
  html[data-theme="auto"] .menu-toggle.is-open { color: #101a2e !important; }
  html[data-theme="auto"] .menu-toggle span { background: #101a2e !important; }
  html[data-theme="auto"] .menu-toggle {
    background: #ffffff !important;
    border-color: var(--line) !important;
  }
  html[data-theme="auto"] .call-self {
    border-color: rgba(23, 38, 74, .18) !important;
    box-shadow: 0 8px 22px rgba(23, 38, 74, .22) !important;
  }
  html[data-theme="auto"] .call-self__off {
    background: #f2f5fc;
    color: #45557a;
  }
  html[data-theme="auto"] .call-self__toggle { background: rgba(23, 38, 74, .78); color: #ffffff; }
  html[data-theme="auto"] .call-self__toggle:hover { background: rgba(23, 38, 74, .92); }
  html[data-theme="auto"] .call-self__mode { background: rgba(23, 38, 74, .78); color: #ffffff; }
  html[data-theme="auto"] .call-remote-avatar {
    background: #dfe6f4 !important;
    border-color: rgba(23, 38, 74, .14) !important;
    box-shadow: 0 24px 70px rgba(23, 38, 74, .22), 0 0 0 10px rgba(47, 107, 255, .07) !important;
  }
  html[data-theme="auto"] .call-status-chip { background: rgba(47, 107, 255, .10); color: #24407e; }
  html[data-theme="auto"] .incoming-call-modal__dialog {
    background: linear-gradient(160deg, #ffffff 0%, #f5f8fe 100%) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
  }
  html[data-theme="auto"] .incoming-call-modal__dialog h2,
  html[data-theme="auto"] .incoming-call-modal__dialog p,
  html[data-theme="auto"] .incoming-call-modal__dialog #incomingCallText { color: var(--text) !important; }
  html[data-theme="auto"] .incoming-call-modal__avatar img { border-color: rgba(23, 38, 74, .18) !important; }
  html[data-theme="auto"] .online-dot {
    border-color: #ffffff !important;
    background: #7a8aa6 !important;
    box-shadow: 0 0 0 1px rgba(23, 38, 74, .28) !important;
  }
  html[data-theme="auto"] .online-dot.is-online {
    background: #12a150 !important;
    box-shadow: 0 0 0 1px rgba(9, 92, 46, .55), 0 0 0 5px rgba(18, 161, 80, .20) !important;
  }
  html[data-theme="auto"] .home-user-status .online-dot { background: #7a8aa6 !important; }
  html[data-theme="auto"] .home-user-status .online-dot.is-online {
    background: #12a150 !important;
    box-shadow: 0 0 0 4px rgba(18, 161, 80, .18) !important;
  }
  html[data-theme="auto"] .online-state-badge {
    background: #ffffff;
    border-color: rgba(23, 38, 74, .18);
  }
  html[data-theme="auto"] .online-state-badge i { background: #7a8aa6; }
  html[data-theme="auto"] .online-state-badge.is-online i {
    background: #12a150 !important;
    box-shadow: 0 0 0 4px rgba(18, 161, 80, .18) !important;
  }
  html[data-theme="auto"] .home-user-presence.is-online { color: #0a7a3c !important; font-weight: 700; }
  html[data-theme="auto"] .hero-pill.is-online {
    background: rgba(18, 161, 80, .12) !important;
    border-color: rgba(18, 161, 80, .34) !important;
    color: #0a6f37 !important;
  }
}

/* ============================================================
 * 2026-08-31 (часть 9) — ТЁМНАЯ ТЕМА ПРИ СВЕТЛОЙ СИСТЕМЕ.
 *
 * Отдельная поломка, найденная тем же стендом. В четырёх файлах
 * (a11y.css, account-mgmt.css, posts-extras.css, pwa-install.css)
 * есть блоки @media (prefers-color-scheme: light). Они смотрят на
 * тему ОПЕРАЦИОННОЙ СИСТЕМЫ и не знают про выбор пользователя в
 * настройках сайта. Поэтому у человека с тёмной темой сайта и
 * светлой системой подписи полей, заголовки в «Управлении
 * аккаунтом» и обе плашки состояния становились почти чёрными на
 * тёмном фоне: 1.03–2.4 при норме 4.5.
 *
 * Для баннера PWA это уже было починено (часть 2, пункт 13) —
 * здесь то же самое для остальных. Исходные файлы не трогаем:
 * возвращаем тёмные значения явным селектором html[data-theme="dark"],
 * который сильнее правил внутри @media.
 * ============================================================ */
@media (prefers-color-scheme: light) {
  html[data-theme="dark"] .leskov-field-label { color: rgba(255, 255, 255, .85); }
  html[data-theme="dark"] .leskov-form-hint { color: rgba(255, 255, 255, .60); }
  html[data-theme="dark"] .leskov-form-error { color: #ff9b9b; }
  html[data-theme="dark"] .leskov-account-state p { color: rgba(255, 255, 255, .78); }
  html[data-theme="dark"] .leskov-account-state h4 { color: rgba(255, 255, 255, .90); }
  html[data-theme="dark"] .leskov-account-banner.is-deactivated { color: #ffd9a0; }
  html[data-theme="dark"] .leskov-account-banner.is-deletion { color: #ffc0c0; }
  html[data-theme="dark"] {
    --leskov-account-bg: rgba(255, 255, 255, .03);
    --leskov-account-border: rgba(255, 255, 255, .10);
  }
  html[data-theme="dark"] .leskov-reaction-picker {
    background: rgba(20, 24, 36, .96);
    color: var(--text);
  }
  /* Обводка фокуса: в блоке @media она коричневая (#b45309) — это
     для светлого фона. На тёмном возвращаем прежнюю акцентную. */
  html[data-theme="dark"] a:focus-visible,
  html[data-theme="dark"] button:focus-visible,
  html[data-theme="dark"] input:focus-visible,
  html[data-theme="dark"] textarea:focus-visible,
  html[data-theme="dark"] select:focus-visible,
  html[data-theme="dark"] [tabindex]:focus-visible { outline-color: var(--accent); }
}

/* ============================================================
 * 2026-08-31 (часть 10) — ДВЕ ОШИБКИ КОНТРАСТА, ОБЩИЕ ДЛЯ ОБЕИХ ТЕМ.
 *
 * Нашлись при замере и видны на скринах пользователя. Правятся не
 * ради светлой темы — они одинаково мешают в обеих.
 *
 * 1. Кнопка воспроизведения плеера (.leskov-player__btn--play) залита
 *    светлым градиентом accent → accent-2 и подписана БЕЛЫМ. В тёмной
 *    теме это белая иконка на светло-голубом — 1.9:1 при норме 4.5,
 *    то есть «play» почти не виден (на скрине главной страницы кнопка
 *    выглядит пустым кружком). Все остальные градиентные кнопки в
 *    проекте подписаны тёмными чернилами (#07121f) — приводим к ним.
 *    Светлая тема получает свой вариант выше: глубокий градиент и
 *    белую иконку.
 *
 * 2. Кнопка «Завершить» в звонке: розовый #ffd7df по красному — 4.04:1.
 *    Белый даёт 5.1:1 и выглядит ровно так же.
 * ============================================================ */
html[data-theme="dark"] .leskov-player__btn--play,
html[data-theme="dark"] .leskov-player__btn--play svg { color: #07121f; fill: currentColor; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .leskov-player__btn--play,
  html[data-theme="auto"] .leskov-player__btn--play svg { color: #07121f; fill: currentColor; }
}
html[data-theme="dark"] .call-controls .site-btn.danger,
html[data-theme="dark"] .call-controls #endCallBtn { color: #ffffff; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .call-controls .site-btn.danger,
  html[data-theme="auto"] .call-controls #endCallBtn { color: #ffffff; }
}

/* ============================================================
 * 2026-08-31 (часть 11) — ТРИ ПОЛОМКИ РАСКЛАДКИ НА ТЕЛЕФОНЕ.
 *
 * Это не про цвет: ломается одинаково в обеих темах, просто на
 * светлом фоне заметнее. Поэтому правила без привязки к теме.
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. ВКЛАДКИ ЦЕНТРА УПРАВЛЕНИЯ НАЕЗЖАЛИ ДРУГ НА ДРУГА.
 *
 *    На узком экране рельс превращается в горизонтальную ленту:
 *        .leskov-settings__nav { display:flex; overflow-x:auto }
 *        .leskov-settings__nav-link { white-space:nowrap }
 *    Но у пунктов осталась заводская сжимаемость flex-shrink:1.
 *    Лента не прокручивалась, а СЖИМАЛА пункты: «Конфиденциальность»
 *    получала 68px вместо своих 200, а nowrap не давал тексту
 *    перенестись — надписи вылезали за свои плашки и ложились одна
 *    на другую. На скрине это одна строка-каша.
 *
 *    Запрещаем сжатие — лента начинает прокручиваться, как и
 *    задумано, а каждый пункт занимает свою ширину.
 * ------------------------------------------------------------ */
@media (max-width: 720px) {
  .leskov-settings__nav { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .leskov-settings__nav-link {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
  /* Полоса прокрутки не нужна — лента и так «уезжает» под край. */
  .leskov-settings__nav { scrollbar-width: none; }
  .leskov-settings__nav::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------
 * 2. ГАЛЕРЕЯ ПОКАЗЫВАЛА «Всего файлов: 2» И ПУСТОЕ МЕСТО.
 *
 *    Плитки галереи — это пустые ссылки: и картинка, и подпись, и
 *    кнопки внутри них позиционированы абсолютно, своей высоты у
 *    плитки нет. На широком экране высоту задаёт grid-auto-rows
 *    (180/220/260px), но в мобильном блоке стоит
 *        .leskov-gallery__grid { grid-auto-rows: auto !important }
 *    — и строка схлопывается в ноль. Фотографии есть в разметке, но
 *    занимают нулевую высоту.
 *
 *    Ровно это уже чинили для галереи чужого профиля (#gallery-public,
 *    2026-06-14 R4), но своя галерея в профиле осталась сломанной.
 *    Распространяем починку на все плитки.
 * ------------------------------------------------------------ */
@media (max-width: 640px) {
  .leskov-gallery__grid { gap: 14px !important; }
  .leskov-gallery__tile {
    display: block !important;
    position: relative !important;
    min-height: 240px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
  }
  /* Спаны рассчитаны на сетку с фиксированной высотой строки; в
     одноколоночной раскладке они только мешают. */
  .leskov-gallery__tile.is-portrait,
  .leskov-gallery__tile.is-wide,
  .leskov-gallery__tile.is-tall {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

/* ------------------------------------------------------------
 * 3. ЧЁРНОЕ КОЛЬЦО ВОКРУГ ВИДЕО-КРУЖКА В ПЕРЕПИСКЕ.
 *
 *    Размер кружка задают ДВА разных правила, и они не совпадают:
 *        .message-video-shell.is-native.is-circle
 *            width: clamp(190px,40vw,260px)   → 212px
 *        .message-video-shell.is-circle .leskov-player--message-circle
 *            width: 210px (на телефоне 206px)
 *    Обёртка получается на 6px больше вложенного кружка, а залита
 *    она сплошным #000. Эти 6px и проступают чёрным полумесяцем —
 *    снизу толще, потому что кружок прижат к верху обёртки.
 *
 *    Убираем у обёртки собственную заливку (кружок внутри и так
 *    круглый, со своим фоном) и центрируем содержимое.
 * ------------------------------------------------------------ */
.message-video-shell.is-native.is-circle {
  background: transparent !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ------------------------------------------------------------
 * 4. МОБИЛЬНОЕ МЕНЮ ОТКРЫВАЛОСЬ «УРЕЗАННЫМ».
 *
 *    В homepage.css есть правило для планшетной раскладки:
 *        @media (max-width:980px)
 *        .site-header .header-inner:has(.site-header__search-wrap--home) .site-nav{
 *            border-top:0!important; padding-top:0!important; }
 *    Там меню — строка внутри шапки, и верхний отступ ей не нужен.
 *    Но на телефоне тот же .header-inner по-прежнему содержит
 *    .site-header__search-wrap--home, поэтому правило попадает и в
 *    РАСКРЫТУЮ панель меню: первый пункт «Главная» оказывается
 *    вплотную к её краю, скруглением 28px ему срезает углы, а
 *    верхней границы у панели нет вовсе. Снизу отступ при этом
 *    остаётся — панель выглядит обрезанной сверху.
 *
 *    Возвращаем те же 12px и верхнюю границу, но только раскрытой
 *    панели: .is-open / body.menu-open добавляют пятый класс, этого
 *    хватает, чтобы перебить исходное правило.
 * ------------------------------------------------------------ */
@media (max-width: 980px) {
  .site-header .header-inner:has(.site-header__search-wrap--home) .site-nav.is-open,
  body.menu-open .site-header .header-inner:has(.site-header__search-wrap--home) .site-nav {
    padding-top: 12px !important;
    border-top-width: 1px !important;
    border-top-style: solid !important;
  }
}

/* ============================================================
 * 2026-08-31 (часть 12) — СВОЁ ОКНО В ЗВОНКЕ НА ТЕЛЕФОНЕ.
 *
 * Правило без привязки к теме: ломается одинаково в обеих.
 *
 * ЧТО БЫЛО. На ширине до 760px .call-video-grid переключался в
 * flex-direction:column, и своё видео вставало ПОД видео
 * собеседника — двумя этажами. Контейнеру при этом задана
 * фиксированная высота (height:54svh), поэтому пока собеседник не
 * подключился, его кадр занимает верх, своё окно — низ, а между
 * ними остаётся пустая заливка контейнера. Это и есть тёмная
 * полоса, обведённая красным на скрине: не «сбитый css», а
 * честно отрисованный второй этаж раскладки.
 *
 * ЧТО СТАЛО. На телефоне своё окно ложится ПОВЕРХ кадра
 * собеседника в правый нижний угол — так устроен видеозвонок в
 * любом мессенджере, и лишнему этажу просто неоткуда взяться.
 *
 * ПРО ПРОИЗВОДИТЕЛЬНОСТЬ. Выше в файле есть предупреждение: не
 * класть своё видео поверх чужого, потому что это заставляет
 * браузер перерисовывать всю область каждый кадр. Оно относится к
 * прежнему варианту с backdrop-filter — размытие под полупрозрачным
 * слоем действительно пересобирает регион целиком. Здесь размытия
 * нет, окно непрозрачное и вынесено на свой слой (will-change),
 * поэтому композитор рисует его отдельной плоскостью и кадр
 * собеседника не трогает. На широком экране раскладка прежняя,
 * бок о бок — там места хватает и городить наложение незачем.
 * ============================================================ */
/* ============================================================
 * 2026-09-01 (часть 13) — КАДР СОБЕСЕДНИКА НА ВСЮ ОБЛАСТЬ.
 *
 * ЧТО БЫЛО. Своё окно стояло флекс-соседом кадра собеседника, поэтому
 * забирало себе полосу справа (на широком экране) или снизу (на узком).
 * Пока собеседник не подключился, эта полоса оставалась пустой заливкой
 * — та самая «полоска» рядом с маленьким окном на скринах. И даже во
 * время разговора кадр собеседника был у́же области на ширину своего
 * окна плюс зазор.
 *
 * ЧТО СТАЛО. Своё окно вынесено из потока и лежит поверх правого нижнего
 * угла, а кадр собеседника занимает всю площадь целиком — как в любом
 * мессенджере. Правило общее для мобильной и компьютерной версии, чтобы
 * они не расходились: единственная разница — размер своего окна.
 *
 * ПРО ПРОИЗВОДИТЕЛЬНОСТЬ. Выше в файле есть предупреждение не класть
 * своё видео поверх чужого. Оно относится к варианту с backdrop-filter:
 * размытие под полупрозрачным слоем заставляет браузер пересобирать всю
 * область каждый кадр. Здесь размытия нет, окно непрозрачное и вынесено
 * на собственный слой (will-change: transform), поэтому композитор
 * рисует его отдельной плоскостью и кадра собеседника не касается.
 * ============================================================ */
/* Контейнер — система координат для всего, что лежит поверх кадра. */
.call-video-grid { position: relative !important; overflow: hidden !important; }

/* Кадр собеседника раскладываем АБСОЛЮТНО по всей площади контейнера.
 *
 * Почему не «flex: 1 + height: 100%», как было в первой попытке: у
 * контейнера задана min-height, но не height, поэтому процентная высота
 * элементу разрешиться не может — она считается от auto. Браузер честно
 * оставлял видео его собственную высоту (420px при контейнере 576px), и
 * снизу открывалась пустая подложка. Именно её и было видно как «полосу»
 * рядом с маленьким окном.
 *
 * inset: 0 от такой зависимости избавляет: элемент прижат ко всем четырём
 * сторонам, каким бы способом контейнер ни получил свой размер. */
.call-video-grid > video#remoteCallVideo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 1 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Своё окно — поверх правого ВЕРХНЕГО угла.
   Те же значения, что в авторитетном блоке styles/homepage.css: на
   странице «Сообщения» правит он, здесь — все остальные страницы, и
   расходиться им нельзя. */
.call-self {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  left: auto !important;
  bottom: auto !important;
  align-self: auto !important;
  z-index: 10 !important;
  width: 160px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important;
}
.call-self.is-collapsed { width: 60px !important; aspect-ratio: 1 / 1 !important; }

@media (max-width: 760px) {
  .call-self { top: 12px !important; right: 12px !important; width: 112px !important; }
  .call-self.is-collapsed { width: 54px !important; }
}

/* Заглушка «Камера выключена» показывалась даже тогда, когда своё
   видео ещё не получило первый кадр, — из-за этого в начале звонка
   в своём окне на секунду появлялась надпись вместо картинки. */
.call-self video#localCallVideo.has-local-frame ~ .call-self__off { display: none !important; }


/* ===== Кнопка отмены записи (телефон) — 2026-09-01 =====
   На компьютере отмена остаётся по Esc, поэтому кнопка там не нужна:
   скрываем её, чтобы не занимала место в панели композера. */
.recording-cancel-btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  min-height: 46px;
}
@media (min-width: 761px) {
  .recording-cancel-btn { display: none !important; }
}


/* ============================================================
 * 2026-09-01 (часть 14) — ОКНО ЗВОНКА: ЧИСТАЯ ГЕОМЕТРИЯ.
 *
 * Разбор того, что было видно на скринах как «сбитый край».
 *
 * 1. Кадру собеседника задавали то ширину, то высоту, то max-height —
 *    в семи разных местах файла, накопившихся за прошлые заходы. При
 *    любом расхождении между размером контейнера и размером <video>
 *    вылезала подложка: сбоку или снизу, смотря какое правило победило.
 *    Лечится не очередной поправкой размера, а тем, что размер видео
 *    вообще перестаёт вычисляться — inset: 0 прижимает его ко всем
 *    четырём сторонам (см. часть 13).
 *
 * 2. Скругление. Контейнер скруглён, видео — нет; на светлой теме на
 *    углах проступали четыре светлых треугольника. Теперь радиус живёт
 *    на контейнере, а overflow: hidden обрезает по нему всё содержимое.
 *
 * 3. Пропорции. Высота бралась из min-height в vw — на широком мониторе
 *    окно вытягивалось в узкую полосу. Ставим честное соотношение 16:9,
 *    с ограничением по высоте экрана, чтобы на ноутбуке кнопки не
 *    уезжали за нижний край.
 *
 * Оформление сознательно скромное: в звонке смотрят на собеседника,
 * а не на рамку. Ровный тёмный кадр, мягкая тень, аккуратное своё
 * окно в углу — как в мессенджерах, к которым люди привыкли.
 * ============================================================ */
.call-overlay__card {
  --call-radius: 26px;
}
.call-video-grid {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(62vh, 620px) !important;
  border-radius: var(--call-radius) !important;
  overflow: hidden !important;
  background: #05080f !important;
  border: 0 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
html[data-theme="light"] .call-video-grid,
html[data-theme="auto"] .call-video-grid {
  box-shadow: 0 18px 44px rgba(23, 38, 74, .18), inset 0 0 0 1px rgba(23, 38, 74, .10) !important;
}
.call-video-grid > video#remoteCallVideo { border-radius: 0 !important; }

/* Своё окно: мягкий угол, читаемая рамка в обеих темах. */
.call-self {
  border-radius: 18px !important;
  border: 2px solid rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38) !important;
}
.call-self.is-collapsed { border-radius: 999px !important; }

/* На телефоне окно вытянуто вертикально — 16:9 там оставляет полоску
   в пол-экрана. Даём почти квадрат и разрешаем занять больше высоты. */
@media (max-width: 760px) {
  .call-overlay__card { --call-radius: 22px; }
  .call-video-grid {
    aspect-ratio: 3 / 4 !important;
    max-height: min(58svh, 560px) !important;
  }
}

/* ===================== 02.09.2026 — правки по замечаниям ===================== */

/* Видео на главной: в светлой теме фон прозрачный, а не чёрный */
html[data-theme="light"] .leskov-player--video,
html[data-theme="light"] .leskov-player--video .leskov-player__media,
html[data-theme="light"] .leskov-player--video .leskov-player__cover{
    background: transparent;
}
html[data-theme="light"] .leskov-player--video .leskov-player__seek-track{
    background: rgba(16, 23, 40, .16);
}
html[data-theme="light"] .leskov-player--video .leskov-player__btn{
    background: rgba(16, 23, 40, .07);
    color: #101728;
}
html[data-theme="light"] .leskov-player--video .leskov-player__time{
    color: #3c4659;
}

/* Согласие с правилами при регистрации */
.auth-consent{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 6px;
    font-size: 14px;
    line-height: 1.45;
}
.auth-consent input[type="checkbox"]{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
}
.auth-consent a{ text-decoration: underline; }

/* ============================================================
 * 08.09.2026 Unified video player skin.
 * Applies to every video player in the project EXCEPT circles
 * (leskov-player--message-circle), which keep their own style.
 * ============================================================ */
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__center-btn{
  width:52px !important; height:52px !important;
  min-width:0 !important; padding:0 !important;
  box-shadow:0 8px 24px rgba(16,26,46,.28) !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__center-btn svg,
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__center-btn .icon-play,
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__center-btn .icon-pause{
  width:20px !important; height:20px !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel{
  background:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#ffffff !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__time{
  color:#ffffff !important; opacity:.9 !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__btn:not(.leskov-player__btn--play){
  color:#ffffff !important;
  background:rgba(255,255,255,.14) !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.38) !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__btn:not(.leskov-player__btn--play):hover{
  background:rgba(255,255,255,.26) !important;
  border-color:rgba(255,255,255,.55) !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__btn svg{
  fill:currentColor !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__seek-track{
  background:rgba(255,255,255,.28) !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__seek-buffer{
  background:rgba(255,255,255,.45) !important;
}
.leskov-player--video:not(.leskov-player--message-circle) .leskov-player__panel .leskov-player__seek-thumb{
  box-shadow:0 0 0 2px rgba(255,255,255,.7) !important;
}
/* ==== end unified video player skin ==== */

/* 2026-09-09: mobile Premium player - one authoritative single-column stack. */
@media (max-width: 720px) {
  .header-player-panel .header-player-dialog,
  .header-player-panel .header-player-shell,
  .header-player-panel .header-player-stage,
  .header-player-panel .header-player-playlist {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .header-player-panel .header-player-now {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "cover"
      "copy"
      "controls"
      "progress"
      "modes"
      "volume"
      "save" !important;
    gap: 14px !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .header-player-panel .header-player-now > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .header-player-panel .header-player-cover {
    width: min(210px, 62vw) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
  }
  .header-player-panel .header-player-now-copy { text-align: center !important; }
  .header-player-panel .header-player-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }
  .header-player-panel .header-player-progress {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .header-player-panel .header-player-progress input { width: 100% !important; min-width: 0 !important; }
  .header-player-panel .header-player-progress span {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .header-player-panel .header-player-modes {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .header-player-panel .header-player-volume {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .header-player-panel .header-player-playlist-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }
}

/* 2026-09-09: predictable, touch-friendly scrolling across the project. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scroll-padding-top: 84px;
  }
  * { -webkit-overflow-scrolling: touch; }
  a, button, label, summary, input[type="submit"], input[type="button"], .button, [role="button"] {
    touch-action: manipulation;
  }
}

/* 2026-09-09: birth-date picker (day / month / year). */
.bday-group {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1fr;
  gap: 8px;
  width: 100%;
}
.bday-group select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
@media (max-width: 480px) {
  .bday-group { grid-template-columns: 1fr 1fr; }
  .bday-group .bday-year { grid-column: 1 / -1; }
}
label:has(.bday-group) { grid-column: 1 / -1; }
.bday-group select { font-size: 15px; }

/* ============ 2026-09-09, round 3 ============ */

/* Reaction counter was invisible on the light theme. */
html .leskov-reaction-pill__count { color: #1f2a44; font-weight: 600; opacity: 1; }
html[data-theme="dark"] .leskov-reaction-pill__count { color: #e8edf7; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .leskov-reaction-pill__count { color: #e8edf7; }
}
html .leskov-reaction-pill.is-active .leskov-reaction-pill__count { color: inherit; }

/* Only one recording at a time: the other control is visibly locked. */
.is-rec-locked { opacity: .45; filter: grayscale(1); cursor: not-allowed; }

@media (max-width: 720px) {
  /* Merch colour dots must stay visible and tappable on phones. */
  .shop-color-dots {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 2px;
    position: relative;
    z-index: 5;
  }
  .shop-color-dots .color-dot { width: 34px; height: 34px; }
  .shop-color-dots .color-dot span { width: 20px; height: 20px; }
  .shop-visual { overflow: visible; }

  /* Player mode row must never spill outside the card. */
  .header-player-panel .header-player-modes > * {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-player-panel .header-player-volume { justify-content: flex-start; }
  .header-player-panel .header-player-volume input { flex: 1 1 auto; min-width: 0; }
}

/* 2026-09-09: Android scroll. In the browser keep pull-to-refresh working;
   contain the bounce only in the installed app, and use dynamic viewport units
   so a full-height screen is never taller than the visible area. */
@media (max-width: 900px) {
  html, body { overscroll-behavior-y: auto; }
  body { min-height: 100%; }
}
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: contain; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@supports (height: 100dvh) {
  @media (max-width: 900px) {
    .modal, .gallery-modal, .story-viewer, .header-player-panel,
    [class*="-viewer"], [class*="-overlay"], [class*="-sheet"] {
      max-height: 100dvh;
    }
  }
}
@media (max-width: 900px) {
  .modal, .gallery-modal, .story-viewer, [class*="-viewer"], [class*="-sheet"] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ============ 2026-09-09, round 4 ============ */

/* Reaction pill: the active state inherited #cfd9ff, which vanished on the
   light theme. Give every state an explicit colour per theme. */
html .leskov-reaction-pill,
html .leskov-reaction-pill__count { color: #1f2a44; }
html .leskov-reaction-pill.is-active,
html .leskov-reaction-pill.is-active .leskov-reaction-pill__count { color: #17347f; }
html .leskov-reaction-pill.is-muted { color: #45557a; }

html[data-theme="dark"] .leskov-reaction-pill,
html[data-theme="dark"] .leskov-reaction-pill__count { color: #e8edf7; }
html[data-theme="dark"] .leskov-reaction-pill.is-active,
html[data-theme="dark"] .leskov-reaction-pill.is-active .leskov-reaction-pill__count { color: #cfd9ff; }
html[data-theme="dark"] .leskov-reaction-pill.is-muted { color: rgba(255, 255, 255, .7); }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .leskov-reaction-pill,
  html[data-theme="auto"] .leskov-reaction-pill__count { color: #e8edf7; }
  html[data-theme="auto"] .leskov-reaction-pill.is-active,
  html[data-theme="auto"] .leskov-reaction-pill.is-active .leskov-reaction-pill__count { color: #cfd9ff; }
  html[data-theme="auto"] .leskov-reaction-pill.is-muted { color: rgba(255, 255, 255, .7); }
}

/* Merch front/back switch: 10px dots pinned into the corner of the photo are
   invisible and untappable on a phone. Put the switch under the image. */
@media (max-width: 720px) {
  .shop-visual { position: relative; overflow: visible; }
  .shop-view-toggle {
    position: static !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: max-content;
    margin: 12px auto 0;
    padding: 9px 14px;
    background: rgba(255, 255, 255, .92);
    z-index: 6;
  }
  html[data-theme="dark"] .shop-view-toggle { background: rgba(16, 23, 36, .82); }
  .shop-view-btn {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    position: relative;
  }
  .shop-view-btn::after {
    content: "";
    position: absolute;
    inset: -13px;
    border-radius: 999px;
  }
}

/* 2026-09-09: the Premium panel is a grid with named areas that several older
   rules keep redefining; on a phone the modes row and the volume control ended
   up sharing a line and ran past the card. Flex ignores grid-area entirely, so
   the column order below cannot be overridden by any of them. */
@media (max-width: 720px) {
  .header-player-panel .header-player-now {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .header-player-panel .header-player-now > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .header-player-panel .header-player-cover { order: 1; align-self: center; width: min(210px, 60vw) !important; }
  .header-player-panel .header-player-now-copy { order: 2; text-align: center !important; }
  .header-player-panel .header-player-progress { order: 3; }
  .header-player-panel .header-player-controls { order: 4; }
  .header-player-panel .header-player-modes { order: 5; }
  .header-player-panel .header-player-volume { order: 6; }
  .header-player-panel .header-player-save-form { order: 7; }
}

/* ============ 2026-09-09, round 6 ============ */

@media (max-width: 720px) {
  /* Premium panel: tighter, less air, nothing oversized. */
  .header-player-panel .header-player-now { gap: 10px !important; }
  .header-player-panel .header-player-stage,
  .header-player-panel .header-player-playlist { padding: 14px !important; }

  .header-player-panel .header-player-modes {
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 999px !important;
  }
  .header-player-panel .header-player-modes > * {
    padding: 7px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    min-height: 34px !important;
    height: auto !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header-player-panel .header-player-volume {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .header-player-panel .header-player-volume > button,
  .header-player-panel .header-player-volume > .header-player-control {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 auto !important;
  }
  .header-player-panel .header-player-volume input[type="range"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .header-player-panel .header-player-volume-label { flex: 0 0 auto !important; width: auto !important; }

  .header-player-panel .header-player-controls { gap: 14px !important; }
  .header-player-panel .header-player-cover { width: min(180px, 52vw) !important; }

  /* Legal pages: the card must sit in the middle and never outgrow the screen. */
  .legal-page-card,
  .utility-card {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
  .legal-page-card h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* === 2026-09-09 mobile: compact playback-mode switch + mini player polish === */
@media (max-width: 760px){
  body.utility-page .utility-main{margin-left:auto !important;margin-right:auto !important}
  .header-player-panel .header-player-now .header-player-modes{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:2px !important;width:100% !important;min-width:0 !important;margin:2px 0 0 !important;padding:3px !important;background:var(--surface,rgba(15,23,42,.05)) !important;border:1px solid var(--line,rgba(15,23,42,.08)) !important;border-radius:999px !important;box-shadow:none !important;overflow:hidden !important;min-height:0 !important}
  .header-player-panel .header-player-now .header-player-mode{display:flex !important;align-items:center !important;justify-content:center !important;min-width:0 !important;width:100% !important;min-height:30px !important;height:30px !important;padding:0 6px !important;gap:0 !important;border:0 !important;border-radius:999px !important;background:transparent !important;color:var(--muted,#64748b) !important;box-shadow:none !important;font-size:clamp(.66rem,2.9vw,.78rem) !important;font-weight:600 !important;line-height:1 !important;letter-spacing:-.01em !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;transition:background .18s ease,color .18s ease !important}
  .header-player-panel .header-player-now .header-player-mode::before,.header-player-panel .header-player-now .header-player-mode::after{content:none !important;display:none !important}
  .header-player-panel .header-player-now .header-player-mode.is-active{background:linear-gradient(135deg,var(--accent,#2563eb),var(--accent-2,#0ea5a4)) !important;color:var(--on-accent,#fff) !important;box-shadow:0 2px 8px rgba(15,23,42,.18) !important}
  .header-player-panel .header-player-now .header-player-mode[data-header-mode="sequential"]{order:1 !important}
  .header-player-panel .header-player-now .header-player-mode[data-header-mode="shuffle"]{order:2 !important}
  .header-player-panel .header-player-now .header-player-mode[data-header-mode="repeat"]{order:3 !important}
  .header-player-panel .header-player-now .header-player-progress{display:flex !important;flex-direction:column !important;gap:6px !important;width:100% !important}
  .header-player-panel .header-player-now .header-player-progress > span{display:flex !important;align-items:center !important;justify-content:space-between !important;width:100% !important;font-size:.7rem !important;line-height:1 !important;color:var(--muted,#64748b) !important}
  .header-player-panel .header-player-now .header-player-volume{display:flex !important;align-items:center !important;gap:10px !important;width:100% !important}
  .header-player-panel .header-player-now .header-player-volume-label{flex:0 0 auto !important;font-size:.7rem !important;font-weight:600 !important;color:var(--muted,#64748b) !important;white-space:nowrap !important}
  .header-player-panel .header-player-now .header-player-volume input{flex:1 1 auto !important;width:auto !important;min-width:0 !important}
  .header-player-panel .header-player-now{padding-bottom:16px !important}
}
@media (max-width: 760px){
  .header-player-panel .header-player-now .header-player-progress > span > span{flex:0 0 auto !important;display:block !important;width:auto !important;text-align:left !important}
  .header-player-panel .header-player-now .header-player-mode{min-height:34px !important;height:34px !important;font-size:clamp(.7rem,3.05vw,.82rem) !important}
  .header-player-panel .header-player-now .header-player-volume{margin-top:4px !important}
}

/* === 2026-09-09 mobile: homepage premium block (mini player) === */
@media (max-width: 760px){
  .leskov-player.leskov-player--premium .leskov-player__premium-badge{width:max-content !important;justify-self:start !important;align-self:start !important;padding:4px 10px !important;border-radius:999px !important;font-size:.6rem !important;letter-spacing:.08em !important}
  .leskov-player.leskov-player--premium .leskov-player__panel{gap:10px 10px !important;padding-top:10px !important}
  .leskov-player.leskov-player--premium .leskov-player__seek{display:grid !important;grid-template-columns:1fr auto !important;grid-template-areas:"trk trk" "cur dur" !important;align-items:center !important;gap:6px 8px !important;width:100% !important}
  .leskov-player.leskov-player--premium .leskov-player__seek-track{grid-area:trk !important;width:100% !important;height:6px !important;border-radius:999px !important}
  .leskov-player.leskov-player--premium .leskov-player__seek .leskov-player__time:nth-of-type(1){grid-area:cur !important;justify-self:start !important;font-size:.7rem !important}
  .leskov-player.leskov-player--premium .leskov-player__seek .leskov-player__time:nth-of-type(2){grid-area:dur !important;justify-self:end !important;font-size:.7rem !important}
  .leskov-player.leskov-player--premium .leskov-player__panel > .leskov-player__controls:last-child{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:8px !important;width:100% !important;flex-wrap:nowrap !important}
  .leskov-player.leskov-player--premium .leskov-player__modes{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:2px !important;flex:1 1 auto !important;width:auto !important;min-width:0 !important;margin:0 !important;padding:3px !important;background:var(--surface,rgba(15,23,42,.05)) !important;border:1px solid var(--line,rgba(15,23,42,.08)) !important;border-radius:999px !important;box-shadow:none !important;overflow:hidden !important}
  .leskov-player.leskov-player--premium .leskov-player__mode{display:flex !important;align-items:center !important;justify-content:center !important;min-width:0 !important;width:100% !important;height:32px !important;min-height:32px !important;padding:0 6px !important;border:0 !important;border-radius:999px !important;background:transparent !important;color:var(--muted,#64748b) !important;box-shadow:none !important;font-size:clamp(.68rem,2.95vw,.8rem) !important;font-weight:600 !important;line-height:1 !important;letter-spacing:-.01em !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;transition:background .18s ease,color .18s ease !important}
  .leskov-player.leskov-player--premium .leskov-player__mode.is-active{background:linear-gradient(135deg,var(--accent,#2563eb),var(--accent-2,#0ea5a4)) !important;color:var(--on-accent,#fff) !important;box-shadow:0 2px 8px rgba(15,23,42,.18) !important}
  .leskov-player.leskov-player--premium .leskov-player__panel > .leskov-player__controls:last-child > .leskov-player__btn{flex:0 0 auto !important;width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;margin:0 !important}
}
@media (max-width: 760px){
  .header-player-panel .header-player-now .header-player-modes,
  .leskov-player.leskov-player--premium .leskov-player__modes{background:rgba(120,134,166,.14) !important;border:1px solid rgba(120,134,166,.22) !important}
  .header-player-panel .header-player-now .header-player-modes{background:color-mix(in srgb, currentColor 9%, transparent) !important;border-color:color-mix(in srgb, currentColor 16%, transparent) !important}
  .leskov-player.leskov-player--premium .leskov-player__modes{background:color-mix(in srgb, currentColor 9%, transparent) !important;border-color:color-mix(in srgb, currentColor 16%, transparent) !important}
}

/* === 2026-09-09 mobile: merch front/back view toggle, visible in both themes === */
@media (max-width: 720px){
  .shop-card .shop-visual .shop-view-toggle{position:absolute !important;right:10px !important;bottom:10px !important;left:auto !important;top:auto !important;margin:0 !important;width:max-content !important;padding:7px 10px !important;gap:12px !important;z-index:6 !important;border-radius:999px !important;background:rgba(255,255,255,.94) !important;border:1px solid rgba(16,23,40,.10) !important;box-shadow:0 4px 14px rgba(16,23,40,.28) !important}
  html[data-theme="dark"] .shop-card .shop-visual .shop-view-toggle{background:rgba(10,16,28,.86) !important;border-color:rgba(255,255,255,.30) !important;box-shadow:0 4px 14px rgba(0,0,0,.55) !important}
  .shop-card .shop-visual .shop-view-btn{width:12px !important;height:12px !important;min-width:12px !important;background:rgba(16,23,40,.32) !important;box-shadow:none !important}
  html[data-theme="dark"] .shop-card .shop-visual .shop-view-btn{background:rgba(255,255,255,.55) !important}
  .shop-card .shop-visual .shop-view-btn.is-active{background:#1f4fd8 !important}
  html[data-theme="dark"] .shop-card .shop-visual .shop-view-btn.is-active{background:#7c9cff !important}
}


/* ============================================================
 * 10.09.2026 - fixes 1,2,3,5
 * ============================================================ */

/* (1) Registration consent checkbox: .auth-card .stack-form label{display:grid}
 *     was overriding .auth-consent{display:flex}, so the checkbox sat above
 *     the text instead of on the first line. */
.auth-card .stack-form label.auth-consent,
.stack-form label.auth-consent,
.form-grid label.auth-consent,
.settings-grid label.auth-consent,
label.auth-consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
}
label.auth-consent > input[type="checkbox"]{
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin-top:2px;
}
label.auth-consent > span{ flex:1 1 auto; min-width:0; }

/* (2) Blacklist unblock button: the form landed in the 56px avatar column of
 *     .gift-item, so the label broke one letter per line on phones. */
#blacklist .gift-item{ grid-template-columns:56px minmax(0,1fr) auto; }
#blacklist .gift-item > form.inline-form{ grid-column:3; align-self:center; justify-self:end; }
#blacklist .gift-item > form.inline-form .site-btn{ white-space:nowrap; }
@media (max-width:600px){
    #blacklist .gift-item{ grid-template-columns:56px minmax(0,1fr); }
    #blacklist .gift-item > form.inline-form{ grid-column:1 / -1; justify-self:stretch; }
    #blacklist .gift-item > form.inline-form .site-btn{ width:100%; }
}

/* (3) Custom user badge: .feed-card .feed-author img{width:58px!important}
 *     also hit the badge artwork nested inside .status-badge. */
.feed-author .status-badge img,
.feed-card .feed-author .status-badge img,
.status-badge.custom-user-badge img{
    width:100% !important;
    height:100% !important;
    aspect-ratio:1 / 1;
    min-width:0;
    min-height:0;
    border-radius:inherit !important;
    object-fit:cover;
    display:block;
}

/* (5) Friend search in the messenger sidebar. */
.messenger-search{ margin:0 0 12px; }
.messenger-search input{ width:100%; }
.messenger-search-empty{ margin:10px 2px 0; opacity:.75; }
.messenger-friends-head{ margin:14px 0 6px; }
.messenger-friends-head h2{ margin:0; font-size:15px; }

/* Family & contacts  relatives list spacing (2026-09-10) */
.profile-relations-list{line-height:1.7;margin-top:6px}
.profile-relations-list strong{margin-right:5px}
.profile-relations-list strong::after{content:":"}
.profile-relations-list a:not(:last-of-type)::after{content:",\00a0"}

/* Birthdate 3-select field (2026-09-10) */
.birthdate-field{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
.birthdate-field .birthdate-part{min-width:0}
.birthdate-field .birthdate-day{flex:0 0 20%}
.birthdate-field .birthdate-month{flex:1 1 auto}
.birthdate-field .birthdate-year{flex:0 0 30%}
@media (max-width:420px){.birthdate-field{gap:6px}}

/* profile-quick-nav icons (2026-09-10) — mask-image so the glyph inherits --text in every theme */
.profile-quick-nav a{display:flex;align-items:center;gap:10px}
.profile-quick-nav a::before{content:"";flex:0 0 18px;width:18px;height:18px;background:currentColor;opacity:.7;-webkit-mask:var(--qni) center/contain no-repeat;mask:var(--qni) center/contain no-repeat}
.profile-quick-nav a.is-active::before{opacity:1}
.profile-quick-nav a[href*="section=overview"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=edit"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=stories"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-2 14.5v-9l6 4.5z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=gallery"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=drafts"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm7 7V3.5L18.5 9z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=bookmarks"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 3H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="feed.php"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 5h16v6H4zm0 8h16v6H4z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="gifts.php"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 7h-2.2A3 3 0 0015 2.5 3 3 0 0012 4a3 3 0 00-3-1.5A3 3 0 006.2 7H4v4h16V7zM4 13v7h7v-7zm9 0v7h7v-7z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=friends"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 11a3 3 0 100-6 3 3 0 000 6zm-8 0a3 3 0 100-6 3 3 0 000 6zm0 2c-2.7 0-8 1.3-8 4v3h8v-3c0-1 .4-1.9 1-2.6-.3 0-.7-.4-1-.4zm8 0c-.3 0-.7 0-1 .1.9.9 1 1.6 1 2.9v3h8v-3c0-2.7-5.3-4-8-4z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=music"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3v10.6A4 4 0 1014 17V7h4V3z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=premium"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.3l6.2 3.7-1.6-7 5.4-4.7-7.1-.6L12 2 9.1 8.7 2 9.3l5.4 4.7-1.6 7z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=badges"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a5 5 0 00-2.5 9.3L8 22l4-2 4 2-1.5-10.7A5 5 0 0012 2z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=settings"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.4 13a7.8 7.8 0 000-2l2-1.6-2-3.4-2.4 1a7.5 7.5 0 00-1.7-1L14 3.5H10l-.4 2.5a7.5 7.5 0 00-1.7 1l-2.4-1-2 3.4L3.6 11a7.8 7.8 0 000 2l-2 1.6 2 3.4 2.4-1a7.5 7.5 0 001.7 1l.4 2.5h4l.4-2.5a7.5 7.5 0 001.7-1l2.4 1 2-3.4zM12 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=wallet"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 7H5a1 1 0 010-2h15V3H5a3 3 0 00-3 3v12a3 3 0 003 3h16V7zm-4 8a2 2 0 110-4 2 2 0 010 4z'/%3E%3C/svg%3E")}
.profile-quick-nav a[href*="section=verification"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1l2.6 2 3.3-.3 1 3.1L23 8.5l-1 3.1 1 3.1-4.1 1.7-1 3.1-3.3-.3L12 23l-2.6-2-3.3.3-1-3.1L1 15.7l1-3.1-1-3.1 4.1-1.7 1-3.1 3.3.3zm-1.2 13.4l5-5-1.4-1.4-3.6 3.6-1.6-1.6L7.8 12z'/%3E%3C/svg%3E")}

/* ===== 2026-09-11 UI fixes ===== */
/* Tabs / category chips: uniform pills (notifications page) */
.leskov-tabs{align-items:center}
.leskov-tabs__btn{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:36px;line-height:1.2}

/* Registration: birthdate + gender layout */
.birthdate-field{display:grid;grid-template-columns:minmax(62px,.8fr) minmax(92px,1.5fr) minmax(74px,1fr);gap:8px;align-items:center}
.birthdate-field .birthdate-part{min-width:0;width:100%}
.auth-field-row{display:grid;grid-template-columns:1fr;gap:14px;align-items:end}
@media (max-width:420px){.birthdate-field{gap:6px}}

/* Password-recovery modal: compact */
body.auth-page .auth-modal__dialog{height:auto;min-height:0;align-self:center;max-width:420px;padding:20px 20px 18px;gap:12px}
body.auth-page .auth-modal__head h2{font-size:1.35rem;line-height:1.2}
body.auth-page .auth-modal__dialog .admin-input{min-height:46px;padding:11px 14px}
body.auth-page .auth-modal__dialog .site-btn{min-height:46px}

/* Cleaner gear glyph for the profile quick-nav settings link (2026-09-11) */
.profile-quick-nav a[href*="section=settings"]{--qni:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill-rule='evenodd'%3E%3Cpath fill='%23000' d='M21.4 12c0-.6-.1-1.2-.2-1.8l2-1.5-2-3.4-2.3.9c-.9-.8-1.9-1.4-3-1.8L15.5 2h-4l-.4 2.4c-1.1.4-2.1 1-3 1.8l-2.3-.9-2 3.4 2 1.5c-.2 1.2-.2 2.4 0 3.6l-2 1.5 2 3.4 2.3-.9c.9.8 1.9 1.4 3 1.8L11.5 22h4l.4-2.4c1.1-.4 2.1-1 3-1.8l2.3.9 2-3.4-2-1.5c.1-.6.2-1.2.2-1.8zM12 8a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E")}

/* News video + biography card links (2026-09-11) */
.news-card .news-video,.news-card video{width:100%;display:block;border-radius:14px;background:#000;aspect-ratio:16/9;object-fit:cover}
.bio-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bio-links .bio-link{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:.85rem;text-decoration:none;border:1px solid rgba(122,165,255,.28);background:rgba(122,165,255,.10);color:inherit}
.bio-links .bio-link:hover{border-color:rgba(122,165,255,.55);background:rgba(122,165,255,.18)}

/* News video + biography card links (2026-09-11) */
.news-card .news-video,.news-card video{width:100%;display:block;border-radius:14px;background:#000;aspect-ratio:16/9;object-fit:cover}
.bio-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bio-links .bio-link{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:.85rem;text-decoration:none;border:1px solid rgba(122,165,255,.28);background:rgba(122,165,255,.10);color:inherit}
.bio-links .bio-link:hover{border-color:rgba(122,165,255,.55);background:rgba(122,165,255,.18)}

.leskov-settings__range:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1)}

/* Touch responsiveness (iphone/android) */
button,.site-btn,.secondary,.leskov-tabs__btn,a[role="button"],[data-action],input,textarea,select,label,.user-list-item,.msg-action,.message-action{touch-action:manipulation}
.message-thread{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* 2026-09-17 — legal pages on phones: text must never run past the screen edge. */
@media (max-width: 760px){
  html, body.utility-page{overflow-x:hidden !important;}
  body.utility-page .utility-main{width:100% !important;max-width:100vw !important;margin:0 auto !important;padding-left:14px !important;padding-right:14px !important;box-sizing:border-box !important;overflow:visible !important;}
  body.utility-page .utility-card,
  body.utility-page .legal-page-card{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;padding:22px 18px !important;margin:0 !important;overflow:hidden !important;transform:none !important;grid-template-columns:minmax(0,1fr) !important;}
  body.utility-page .utility-card > *{min-width:0 !important;max-width:100% !important;}
  body.utility-page .utility-card h1{max-width:100% !important;font-size:clamp(30px,9vw,44px) !important;overflow-wrap:break-word !important;hyphens:auto !important;}
  body.utility-page .legal-content{display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;}
  body.utility-page .legal-content p,
  body.utility-page .legal-content h2,
  body.utility-page .legal-content h3,
  body.utility-page .legal-list,
  body.utility-page .legal-list li,
  body.utility-page .utility-card > p{width:auto !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;font-size:clamp(16px,4.4vw,19px) !important;line-height:1.6 !important;overflow-wrap:break-word !important;word-break:normal !important;hyphens:auto !important;white-space:normal !important;}
  body.utility-page .legal-list{padding-left:1.15em !important;margin-left:0 !important;margin-right:0 !important;}
}

/* 2026-09-17 — единый вид обложек треков во всех плеерах и списках.
   Светлые обложки (белый фон) больше не «растворяются» в карточке. */
.music-card > img,
.compact-track-card > img,
.header-player-track img,
.header-player-cover img,
.promo-player-cover img,
.track-cover img,
.leskov-player__cover img,
.leskov-player__queue-cover{
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  background:rgba(127,140,170,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(127,140,170,.18), 0 4px 14px rgba(15,23,42,.10) !important;
  border:1px solid rgba(127,140,170,.22) !important;
  box-sizing:border-box !important;
  flex:0 0 auto;
}
.header-player-cover,.promo-player-cover,.leskov-player__cover{overflow:hidden;}

/* 2026-09-17 — подсветка блока, к которому привело уведомление */
.is-notice-target{animation:leskov-notice-target 1.8s ease both}
@keyframes leskov-notice-target{0%,35%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#7aa5ff) 70%,transparent),0 0 32px color-mix(in srgb,var(--accent,#7aa5ff) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* 2026-09-17 — окно покупки мерча: единые токены для тёмной и светлой темы */
.merch-modal{--mm-card:linear-gradient(180deg,rgba(13,24,44,.98),rgba(8,15,30,.98));--mm-panel:rgba(255,255,255,.04);--mm-text:#eef3ff;--mm-muted:#9fb0cc;--mm-line:rgba(148,163,184,.22);--mm-input:#0b1426;--mm-input-text:#eef3ff;--mm-backdrop:rgba(3,8,18,.72);--mm-warn:#ff9fb2;--mm-ok:#4ade80}
html[data-theme="light"] .merch-modal{--mm-card:#ffffff;--mm-panel:#f4f7fc;--mm-text:#0f1b33;--mm-muted:#5b6b86;--mm-line:rgba(23,38,74,.12);--mm-input:#ffffff;--mm-input-text:#0f1b33;--mm-backdrop:rgba(15,27,51,.45);--mm-warn:#b91c1c;--mm-ok:#15803d}
@media (prefers-color-scheme: light){html[data-theme="auto"] .merch-modal{--mm-card:#ffffff;--mm-panel:#f4f7fc;--mm-text:#0f1b33;--mm-muted:#5b6b86;--mm-line:rgba(23,38,74,.12);--mm-input:#ffffff;--mm-input-text:#0f1b33;--mm-backdrop:rgba(15,27,51,.45);--mm-warn:#b91c1c;--mm-ok:#15803d}}
.merch-modal{background:var(--mm-backdrop)!important;color:var(--mm-text)}
.merch-modal .merch-modal__card{background:var(--mm-card)!important;color:var(--mm-text)!important;border-color:var(--mm-line)!important;box-shadow:0 30px 80px rgba(0,0,0,.35)!important;max-height:calc(100svh - 36px);overflow:auto}
.merch-modal .merch-modal__card h2{color:var(--mm-text)!important;margin:0 48px 6px 0;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.05}
.merch-modal .merch-modal__close{background:var(--mm-panel)!important;color:var(--mm-text)!important;border-color:var(--mm-line)!important;display:grid;place-items:center;line-height:1}
.merch-modal .merch-modal__close:hover{border-color:var(--accent,#7aa5ff)!important}
.merch-modal .merch-modal__balance{background:var(--mm-panel)!important;border-color:var(--mm-line)!important;color:var(--mm-muted)!important}
.merch-modal .merch-modal__balance b{color:var(--mm-text)!important}
.merch-modal .merch-modal__product{background:var(--mm-panel)!important;border-color:var(--mm-line)!important}
.merch-modal .merch-modal__product img{background:#fff;flex:0 0 74px}
.merch-modal .merch-modal__product strong{display:block;color:var(--mm-text)!important;font-size:1.05rem}
.merch-modal .merch-modal__product p{margin:4px 0 0;color:var(--mm-muted)!important}
.merch-modal .merch-modal__product p b{color:var(--mm-text)!important}
.merch-modal .merch-modal__product p.merch-modal__after{color:var(--mm-ok)!important;font-weight:600}
.merch-modal .merch-modal__product p[data-merch-modal-warning]{color:var(--mm-warn)!important;font-weight:600}
.merch-modal .stack-form label{color:var(--mm-muted)!important;font-weight:600;display:grid;gap:6px}
.merch-modal .admin-input,.merch-modal .admin-textarea{background:var(--mm-input)!important;color:var(--mm-input-text)!important;border:1px solid var(--mm-line)!important;box-shadow:none!important}
.merch-modal .admin-input:focus,.merch-modal .admin-textarea:focus{border-color:var(--accent,#7aa5ff)!important;outline:3px solid color-mix(in srgb,var(--accent,#7aa5ff) 25%,transparent)!important;outline-offset:0}
.merch-modal .admin-input::placeholder,.merch-modal .admin-textarea::placeholder{color:var(--mm-muted);opacity:.8}
.merch-modal .admin-input:user-invalid,.merch-modal .admin-textarea:user-invalid{border-color:var(--mm-warn)!important}
.merch-modal .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.merch-modal [data-merch-submit].is-busy{opacity:.7;cursor:progress}
html.is-merch-open,html.is-merch-open body{overflow:hidden}

/* 2026-09-17 — оформление юридических страниц (Markdown-разметка) */
.legal-content{display:grid;gap:14px;line-height:1.65;color:var(--text)}
.legal-content > *{margin:0}
.legal-content h2{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.25;letter-spacing:-.01em;scroll-margin-top:90px}
.legal-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-content h3{margin-top:8px;font-size:clamp(1.02rem,1.6vw,1.15rem);line-height:1.3;scroll-margin-top:90px}
.legal-content h4{font-size:1rem;color:var(--muted)}
.legal-content strong{font-weight:700;color:var(--text)}
.legal-content a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;word-break:break-word}
.legal-content a:hover{text-decoration-thickness:2px}
.legal-content .legal-list{display:grid;gap:6px;margin:0;padding-left:1.3em}
.legal-content ol.legal-list{list-style:decimal}
.legal-content .legal-list li::marker{color:var(--accent)}
.legal-content h2 + p,.legal-content h3 + p{margin-top:-4px}
.legal-updated{color:var(--muted);font-size:.9rem}
@media (max-width:760px){
  body.utility-page .legal-content h2{font-size:clamp(1.15rem,5.4vw,1.4rem)!important;line-height:1.25!important;overflow-wrap:break-word!important}
  body.utility-page .legal-content h3{font-size:clamp(1rem,4.6vw,1.15rem)!important;line-height:1.3!important}
  body.utility-page .legal-content .legal-list,body.utility-page .legal-content .legal-list li{gap:6px!important;margin-top:0!important}
}

/* ==== 2026-09-17: «Семья и контакты» — карточки в стиле сайта ==== */
.surface-card.profile-relations{padding:clamp(18px,2.4vw,26px)}
.profile-relations .profile-rel__head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.profile-relations .profile-rel__head-icon{flex:0 0 42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#2563eb,#0d9488);box-shadow:0 10px 22px rgba(37,99,235,.25)}
.profile-relations h2.profile-rel__title{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.profile-rel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.profile-rel__item{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:14px 16px;border-radius:18px;
  background:color-mix(in srgb,var(--panel-strong) 70%,transparent);border:1px solid var(--line);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.profile-rel__item:hover{border-color:var(--line-strong);box-shadow:0 8px 22px rgba(15,30,60,.08)}
.profile-rel__item--wide{grid-column:1/-1}
.profile-rel__icon{flex:0 0 36px;height:36px;border-radius:12px;display:grid;place-items:center}
.profile-rel__icon--heart{color:#e11d48;background:rgba(225,29,72,.12)}
.profile-rel__icon--family{color:#d97706;background:rgba(217,119,6,.14)}
.profile-rel__icon--web{color:#2563eb;background:rgba(37,99,235,.13)}
.profile-rel__body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.profile-rel__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.profile-rel__count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;letter-spacing:0;
  background:var(--line);color:var(--text)}
.profile-rel__value{font-size:16px;font-weight:600;color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:8px;overflow-wrap:anywhere}
.profile-rel__people{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.profile-rel__person{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:5px 14px 5px 5px;border-radius:999px;text-decoration:none;
  color:var(--text);background:var(--bg-elevated);border:1px solid var(--line);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.profile-rel__person:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 6px 16px rgba(37,99,235,.14);text-decoration:none}
.profile-rel__person:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.profile-rel__person--inline{padding:3px 12px 3px 3px;font-size:14px}
.profile-rel__person--inline .profile-rel__ava{width:26px;height:26px;font-size:11px}
.profile-rel__ava{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--line)}
.profile-rel__ava--txt{display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#6366f1,#0ea5e9)}
.profile-rel__person-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.profile-rel__person-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-rel__person-role{font-size:12px;color:var(--muted)}
.profile-rel__link{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:16px;font-weight:600;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.profile-rel__link:hover{text-decoration:underline;text-underline-offset:3px}
.profile-rel__link svg{flex:0 0 auto;opacity:.7}
@media (max-width:560px){
  .profile-rel__grid{grid-template-columns:1fr}
  .profile-rel__item{padding:12px 14px}
  .profile-rel__people{gap:6px}
}

/* 2026-09-17: плавная смена языка */
html.lsv-lang-switching body{opacity:.55;transition:opacity .15s ease;pointer-events:none;cursor:progress}

/* ==== 2026-09-17: Premium за LSV (profile.php#premium) ==== */
.dashboard-grid.prem-grid{grid-template-columns:minmax(0,1fr);max-width:760px}
.prem-card{display:flex;flex-direction:column;gap:16px}
.prem-card__head{display:flex;gap:14px;align-items:flex-start}
.prem-card__badge{flex:0 0 48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#f59e0b,#ef4444 55%,#8b5cf6);box-shadow:0 12px 26px rgba(239,68,68,.25)}
.prem-card h2.prem-card__title{margin:0 0 4px;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em}
.prem-card__desc{margin:0;color:var(--muted);line-height:1.5}
.prem-status{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28)}
.prem-status strong{display:block}
.prem-status span{font-size:13px;color:var(--muted)}
.prem-status__dot{width:10px;height:10px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.2);flex:0 0 auto}
.prem-balance{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-radius:16px;background:var(--bg-elevated);border:1px solid var(--line)}
.prem-balance span{color:var(--muted);font-size:14px}
.prem-balance strong{font-size:18px;display:inline-flex;align-items:center;gap:6px}
.prem-balance__top{margin-left:auto;font-weight:700;font-size:14px;color:var(--accent);text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.prem-balance__top:hover{border-color:var(--accent)}
.prem-plans{display:flex;flex-direction:column;gap:12px;margin:0}
.prem-plans__grid{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;min-width:0}
.prem-plans__legend{padding:0;margin:0 0 10px;font-weight:800;font-size:15px}
.prem-plan{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;cursor:pointer;
  background:var(--panel-strong);border:2px solid var(--line);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.prem-plan:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.prem-plan input{position:absolute;opacity:0;pointer-events:none}
.prem-plan:has(input:checked){border-color:var(--accent);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 22%,transparent)}
.prem-plan:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.prem-plan.is-short{opacity:.72}
.prem-plan__term{font-weight:700;color:var(--muted);font-size:14px}
.prem-plan__price{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.prem-plan__price small{font-size:13px;font-weight:700;color:var(--muted)}
.prem-plan__per{font-size:12px;color:var(--muted)}
.prem-plan__save{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#10b981,#0d9488)}
.prem-plans__hint{margin:0;font-size:14px;color:var(--muted);min-height:1.4em}
.prem-plans__hint.is-short{color:var(--danger)}
.prem-plans__buy{align-self:flex-start;min-width:220px}
.prem-plans__buy[disabled]{opacity:.5;cursor:not-allowed}
.prem-plans__buy.is-loading{cursor:progress}
.prem-bank{border-top:1px solid var(--line);padding-top:12px}
.prem-bank summary{cursor:pointer;font-weight:700;color:var(--muted)}
.home-premium-facts--lsv strong{white-space:nowrap}
@media (max-width:560px){.prem-plans__grid{grid-template-columns:1fr}.prem-plans__buy{width:100%;min-width:0}.prem-plan{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}.prem-plan__per{width:100%}}

/* ==== 2026-09-17: прокрутка и окна ==== */
html{-webkit-text-size-adjust:100%}
html.lsv-modal-open,html.lsv-modal-open body{overflow:hidden!important;overscroll-behavior:none}
.lsv-dlg__box,.auth-modal__dialog,.merch-modal__card,.gallery-modal__dialog,.gifts-modal__dialog,.story-viewer__dialog,
.sticker-category-modal__dialog,.notifications-prefs-modal,.leskov-dock__drawer,[aria-modal="true"],
.auth-modal,.merch-modal,.gallery-modal,.home-event-modal,.call-overlay{overscroll-behavior:contain}
/* горизонтальные ленты и таблицы: плавная прокрутка пальцем без «рывков» страницы */
.stories-bar,.sms-admin-scroll,.admin-table-wrap,.table-scroll,[data-scroll-x]{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

/* Полоса прокрутки в стиле сайта — только мышь (класс ставит site.js). */
@media (hover:hover) and (pointer:fine){
  html.lsv-mouse{scrollbar-gutter:stable;--lsv-sb-track:transparent;--lsv-sb-thumb:rgba(122,165,255,.38);--lsv-sb-thumb-h:rgba(122,165,255,.62);--lsv-sb-thumb-a:#7aa5ff}
  html.lsv-mouse[data-theme="light"]{--lsv-sb-thumb:rgba(37,72,160,.28);--lsv-sb-thumb-h:rgba(37,72,160,.48);--lsv-sb-thumb-a:#2563eb}
  html.lsv-mouse,html.lsv-mouse *{scrollbar-width:thin;scrollbar-color:var(--lsv-sb-thumb) var(--lsv-sb-track)}
  @supports selector(::-webkit-scrollbar){
    html.lsv-mouse,html.lsv-mouse *{scrollbar-width:auto;scrollbar-color:auto}
    html.lsv-mouse ::-webkit-scrollbar{width:12px;height:12px;background:transparent}
    html.lsv-mouse ::-webkit-scrollbar-track{background:var(--lsv-sb-track)}
    html.lsv-mouse ::-webkit-scrollbar-thumb{border-radius:999px;border:3px solid transparent;background-clip:padding-box;background-color:var(--lsv-sb-thumb);min-height:40px}
    html.lsv-mouse ::-webkit-scrollbar-thumb:hover{background-color:var(--lsv-sb-thumb-h)}
    html.lsv-mouse ::-webkit-scrollbar-thumb:active{background-color:var(--lsv-sb-thumb-a)}
    html.lsv-mouse ::-webkit-scrollbar-corner{background:transparent}
    html.lsv-mouse ::-webkit-scrollbar-button{display:none;width:0;height:0}
    html.lsv-mouse body ::-webkit-scrollbar{width:10px;height:10px}
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-color-scheme:light){
  html.lsv-mouse[data-theme="auto"]{--lsv-sb-thumb:rgba(37,72,160,.28);--lsv-sb-thumb-h:rgba(37,72,160,.48);--lsv-sb-thumb-a:#2563eb}
}
/* сенсор и тачпад: системная тонкая полоса, без «ступенек» */
@media (pointer:coarse){html{scrollbar-width:auto}}

/* ==== 2026-09-17: «Верификация профиля» — заголовок и требования (обе темы) ==== */
#verification .section-head{display:block;margin-bottom:18px}
#verification .section-head > div{max-width:none}
#verification .section-head h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
#verification .section-head .small{max-width:720px;margin:0;line-height:1.6}
#verification .verification-requirements{position:relative;padding:16px 18px 16px 58px;border-radius:18px;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent) 9%,var(--panel-strong));border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);color:var(--text)}
#verification .verification-requirements::before{content:"✓";position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,#2563eb,#0d9488)}
#verification .verification-requirements strong{display:block;font-size:15px;color:var(--text)}
#verification .verification-requirements ul{margin:8px 0 0;padding:0 0 0 18px;display:grid;gap:4px}
#verification .verification-requirements li{color:var(--muted);line-height:1.5}
#verification .verification-requirements li::marker{color:var(--accent)}
#verification .verification-requirements.is-approved{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3)}
#verification .verification-requirements.is-approved::before{background:linear-gradient(135deg,#10b981,#0d9488)}
#verification .verification-requirements.is-approved p{margin:6px 0 0;color:var(--muted)}
html[data-theme="light"] #verification .verification-requirements{background:#eef4ff;border-color:rgba(37,99,235,.18)}
html[data-theme="light"] #verification .verification-requirements.is-approved{background:#ecfdf5;border-color:rgba(16,185,129,.28)}
@media (prefers-color-scheme:light){html[data-theme="auto"] #verification .verification-requirements{background:#eef4ff;border-color:rgba(37,99,235,.18)}}
@media (max-width:560px){#verification .verification-requirements{padding:14px 14px 14px 52px}#verification .verification-requirements::before{left:14px;top:14px}}

/* ==== 2026-09-17: Premium Access на главной — тарифы LSV (обе темы) ==== */
.home-premium-panel .home-premium-facts--lsv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-premium-panel .home-premium-facts--lsv[data-count="1"]{grid-template-columns:1fr}
.home-premium-panel .home-premium-facts--lsv[data-count="2"],.home-premium-panel .home-premium-facts--lsv[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-premium-panel .home-premium-facts--lsv>.hp-plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.home-premium-panel .hp-plan:hover{transform:translateY(-2px);border-color:rgba(122,165,255,.45)}
.home-premium-panel .hp-plan.is-best{border-color:rgba(124,241,211,.55);box-shadow:0 14px 34px rgba(13,148,136,.18)}
.home-premium-panel .hp-plan__flag{position:absolute;top:-10px;left:14px;padding:3px 10px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.02em;
  color:#fff;background:linear-gradient(135deg,#2563eb,#0d9488);box-shadow:0 6px 14px rgba(13,148,136,.3)}
.home-premium-panel .hp-plan__term{font-size:.84rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.home-premium-panel .hp-plan__price{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;color:var(--text)}
.home-premium-panel .hp-plan__price small{font-size:.8rem;font-weight:700;color:var(--muted)}
.home-premium-panel .hp-plan__per{font-size:.78rem;color:var(--muted)}
.home-premium-panel .hp-plan__per b{color:#10b981}
html[data-theme="light"] .home-premium-panel{background:linear-gradient(135deg,#ffffff 0%,#f3f7ff 55%,#ecfbf8 100%);border:1px solid rgba(37,72,160,.12);box-shadow:0 24px 60px rgba(23,38,74,.10)}
html[data-theme="light"] .home-premium-panel .hp-plan{background:#fff;border-color:rgba(23,38,74,.12);box-shadow:0 8px 22px rgba(23,38,74,.06)}
html[data-theme="light"] .home-premium-panel .hp-plan:hover{border-color:rgba(37,99,235,.45);box-shadow:0 14px 30px rgba(37,99,235,.12)}
html[data-theme="light"] .home-premium-panel .hp-plan.is-best{border-color:rgba(13,148,136,.55);background:linear-gradient(180deg,#f0fdfa,#fff);box-shadow:0 16px 34px rgba(13,148,136,.16)}
html[data-theme="light"] .home-premium-panel .hp-plan__per b{color:#059669}
html[data-theme="light"] .home-premium-panel .home-premium-facts>div{background:#fff;border-color:rgba(23,38,74,.12)}
@media (prefers-color-scheme:light){
  html[data-theme="auto"] .home-premium-panel{background:linear-gradient(135deg,#ffffff 0%,#f3f7ff 55%,#ecfbf8 100%);border:1px solid rgba(37,72,160,.12)}
  html[data-theme="auto"] .home-premium-panel .hp-plan,html[data-theme="auto"] .home-premium-panel .home-premium-facts>div{background:#fff;border-color:rgba(23,38,74,.12)}
}
@media (max-width:920px){.home-premium-panel .home-premium-facts--lsv{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.home-premium-panel .home-premium-facts--lsv{grid-template-columns:1fr;gap:14px}
  .home-premium-panel .hp-plan{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .home-premium-panel .hp-plan__per{width:100%}}
.profile-quick-nav a[hidden]{display:none!important}

/* ==== 2026-09-17: панель настроек — таблица каналов, громкость, ошибки ==== */
.leskov-settings .leskov-notif-prefs__table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.leskov-settings .leskov-notif-prefs__table{min-width:0;width:100%;table-layout:fixed;border-collapse:collapse}
.leskov-settings .leskov-notif-prefs__table th:first-child{width:40%;text-align:left}
.leskov-settings .leskov-notif-prefs__table thead th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:10px 6px;overflow-wrap:anywhere;hyphens:auto}
.leskov-settings .leskov-notif-prefs__table tbody th{font-size:13px;padding:8px 10px;overflow-wrap:anywhere}
.leskov-settings .leskov-notif-prefs__table td{padding:6px 4px}
.leskov-settings .leskov-settings__range + .small,.leskov-settings [data-strength-label]{white-space:nowrap}
.leskov-settings .leskov-settings__card-subtitle.is-error{color:var(--danger);margin-top:6px}
.leskov-settings .leskov-settings__input.is-invalid{border-color:var(--danger)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
@media (max-width:560px){
  .leskov-settings .leskov-notif-prefs__table{min-width:430px}
  .leskov-settings .leskov-notif-prefs__table th:first-child{position:sticky;left:0;z-index:1;background:var(--panel-strong)}
}

/* ==========================================================================
 * 2026-09-17 — мобильная версия: кнопки «Изменить» у аватара и обложки
 * скрыты по умолчанию и появляются только по тапу (JS: scripts/site.js,
 * классы .is-avatar-edit-revealed / .is-cover-edit-revealed).
 * ======================================================================== */
@media (hover: none), (max-width: 760px) {
  .profile-cover-avatar-edit:not(.is-static) .profile-avatar-edit__badge,
  .profile-cover-card .profile-cover-upload-trigger,
  .profile-mobile-cover .profile-cover-upload-trigger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease, visibility 0s linear .18s !important;
  }
  .profile-cover-avatar-edit.is-avatar-edit-revealed .profile-avatar-edit__badge,
  .is-cover-edit-revealed .profile-cover-upload-trigger {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .18s ease, visibility 0s !important;
  }
  .profile-cover-avatar-edit:not(.is-static) .profile-avatar,
  .profile-cover-avatar-edit:not(.is-static):hover .profile-avatar {
    filter: none !important;
  }
  .profile-cover-avatar-edit.is-avatar-edit-revealed .profile-avatar {
    filter: brightness(.82) !important;
  }
  .profile-cover-card,
  .profile-mobile-cover,
  .profile-cover-avatar-edit {
    -webkit-tap-highlight-color: transparent;
  }
}

/* 2026-09-18 post translation close button */
.post-translation-box { position: relative; }
.post-translation-box .post-translation-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; padding: 0; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(127,127,127,.16); color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: .6;
  transition: opacity .15s ease, background .15s ease;
}
.post-translation-box .post-translation-close:hover,
.post-translation-box .post-translation-close:focus-visible { opacity: 1; background: rgba(127,127,127,.28); }
.post-translation-box > strong, .post-translation-box > p { padding-right: 32px; }

/* 2026-09-18 hide empty status pill */
.hero-pill:empty { display: none; }

/* 2026-09-18 compact badges (desktop + mobile) */
.inline-badged-name{gap:7px}
.user-list-badges{gap:5px}
.status-badge{width:20px;height:20px}
.status-badge svg{width:12px;height:12px}
.user-list-badges .status-badge{width:20px;height:20px;flex:0 0 20px}
.user-list-badges .status-badge svg{width:12px;height:12px}
.feed-author-badges .status-badge{width:18px;height:18px;flex:0 0 18px}
.feed-author-badges .status-badge svg{width:11px;height:11px}
.profile-cover-info .inline-badged-name,.profile-mobile-cover-info .inline-badged-name{gap:6px}
.status-badge.custom-user-badge{box-shadow:0 6px 14px rgba(0,0,0,.24)}
@media (max-width:860px){
  .inline-badged-name{gap:5px}
  .user-list-badges{gap:4px}
  .status-badge{width:17px;height:17px}
  .status-badge svg{width:10px;height:10px}
  .user-list-badges .status-badge{width:17px;height:17px;flex:0 0 17px}
  .user-list-badges .status-badge svg{width:10px;height:10px}
  .feed-author-badges .status-badge{width:16px;height:16px;flex:0 0 16px}
  .feed-author-badges .status-badge svg{width:10px;height:10px}
  .profile-cover-info .inline-badged-name,.profile-mobile-cover-info .inline-badged-name{gap:4px}
}