:root {
  --bg: #0C0A09;
  --accent: #8b3dff;
  /* More saturated, neon violet/purple */
  --accent-rgb: 139, 61, 255;
  --accent-light: #ab61ff;
  --accent-deep: #6b2ce8;
  --chat-active-fg: #fcfcfc;
  --accent-fg: var(--chat-active-fg);
  --accent-chat-surface: color-mix(in srgb, var(--accent) 78%, #000000);
  --muted: #777;
  --btn: #1c1c1c;
  --glass: rgba(255, 255, 255, 0.03);

  /* [NEW] РџРµСЂРµРјРµРЅРЅС‹Рµ РґР»СЏ РґРёРЅР°РјРёС‡РµСЃРєРѕРіРѕ С„РѕРЅР° */

  --panel-bg-dynamic: #0C0A09;

  --text-primary: #fff;

  /* [FIX] РћСЃРЅРѕРІРЅРѕР№ С†РІРµС‚ С‚РµРєСЃС‚Р° РґР»СЏ С‚РµРјРЅРѕР№ С‚РµРјС‹ */

  --panel-blur-dynamic: 0px;

  --kzn-close-size: 30px;
  --kzn-close-icon: 14px;
  --kzn-close-radius: 10px;
  --kzn-close-inset: 20px;

}

html.is-cep {
  --kzn-close-size: 28px;
  --kzn-close-icon: 13px;
  --kzn-close-radius: 9px;
  --kzn-close-inset: 12px;
}

.admin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-inline-note {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.admin-stat-card {
  min-width: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-stat-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 6px;
}

.admin-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.admin-stat-sub {
  margin-top: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
}

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-toolbar .form-group {
  margin: 0;
}

.admin-grant-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
}

.admin-grant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-grant-row .ios-input {
  flex: 1 1 220px;
  margin: 0;
}

.admin-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-chip-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-chip-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-chip-btn.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.34);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.14);
}

.admin-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-list-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-list-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.admin-list-subtitle {
  color: rgba(255, 255, 255, 0.44);
  font-size: 12px;
  font-weight: 600;
}

.admin-text-btn {
  border: none;
  background: transparent;
  color: rgba(var(--accent-rgb), 0.92);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}

.admin-text-btn:hover {
  filter: brightness(1.08);
}

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

.admin-text-btn--danger {
  color: rgba(255, 107, 98, 0.96);
}

.admin-suggestion-panel {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.admin-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  border: 1px solid transparent;
}

.admin-suggestion-item:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.18);
}

.admin-suggestion-empty {
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 12px;
  font-weight: 600;
}

.ios-scroll-list.admin-scroll-list--tight {
  margin: 0;
  padding: 0;
}


/* === 1. Р“Р›РћР‘РђР›Р¬РќР«Р™ РЎР‘Р РћРЎ "РЎРђР™РўРћР’РћР“Рћ" Р’РР”Рђ === */


/* РЈР±РёСЂР°РµРј Р±РµР»СѓСЋ/СЃРёРЅСЋСЋ РѕР±РІРѕРґРєСѓ РїСЂРё РЅР°Р¶Р°С‚РёРё РЅР° Р›Р®Р‘РћР™ СЌР»РµРјРµРЅС‚ */

*:focus {

  outline: none !important;

  -webkit-tap-highlight-color: transparent;

}


.tg-voice-split-handle {

  display: none;

}


html.kzn-voice-layout-compact .tg-voice-split-handle {

  display: block;

  height: 16px;

  cursor: row-resize;

  touch-action: none;

  position: relative;

}


html.kzn-voice-layout-compact .tg-voice-split-handle::before {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 56px;

  height: 5px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.22);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

}


html.kzn-voice-layout-compact .tg-voice-split-handle.dragging::before,

html.kzn-voice-layout-compact .tg-voice-split-handle:hover::before {

  background: rgba(var(--accent-rgb), 0.55);

}


.tg-voice-callbar {

  flex-wrap: wrap;

  max-width: 100%;

}


html.kzn-voice-layout-compact #voiceOverlay .tg-voice-callbar {

  gap: 8px !important;

  padding: 12px 12px !important;

}


html.kzn-voice-layout-compact #voiceOverlay button[data-voice-audio-settings],

html.kzn-voice-layout-compact #voiceOverlay button[data-voice-mic],

html.kzn-voice-layout-compact #voiceOverlay button[data-voice-cam],

html.kzn-voice-layout-compact #voiceOverlay button[data-voice-screen] {

  width: 48px !important;

  height: 40px !important;

  border-radius: 12px !important;

}


html.kzn-voice-layout-compact #voiceOverlay button[data-voice-hangup] {

  width: 58px !important;

  height: 40px !important;

  border-radius: 14px !important;

}


/* DS Voice: iOS-like stage volume slider (screen viewer) */

#voiceOverlay input[type="range"][data-stage-vol],

#voiceOverlay input[type="range"].tg-voice-stage-vol {

  flex: 1;

  min-width: 120px;

  max-width: 260px;

  height: 12px;

  border-radius: 999px;

  --kzn-range-pct: 100%;

  -webkit-appearance: none;

  appearance: none;

  background: linear-gradient(90deg,

      rgba(var(--accent-rgb), 0.95) 0%,

      rgba(var(--accent-rgb), 0.95) var(--kzn-range-pct),

      rgba(255, 255, 255, 0.18) var(--kzn-range-pct),

      rgba(255, 255, 255, 0.18) 100%);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35);

  outline: none;

}


#voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-runnable-track,

#voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-runnable-track {

  height: 12px;

  border-radius: 999px;

  background: transparent;

}


#voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-thumb,

#voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 22px;

  height: 22px;

  border-radius: 999px;

  background: linear-gradient(180deg, #fff, #f0f0f0);

  border: 2px solid rgba(var(--accent-rgb), 0.85);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.50), 0 0 0 4px rgba(var(--accent-rgb), 0.15);

  margin-top: -6px;

}


html.kzn-voice-layout-compact #voiceOverlay input[type="range"][data-stage-vol],

html.kzn-voice-layout-compact #voiceOverlay input[type="range"].tg-voice-stage-vol {

  max-width: 200px;

  height: 10px;

}


html.kzn-voice-layout-compact #voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-runnable-track,

html.kzn-voice-layout-compact #voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-runnable-track {

  height: 10px;

}


html.kzn-voice-layout-compact #voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-thumb,

html.kzn-voice-layout-compact #voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-thumb {

  width: 20px;

  height: 20px;

  margin-top: -5px;

}


/* CEP/After Effects panel parity: CEF runtime differs from browser */

/* We mark CEP with html.is-cep/body.is-cep in main.js */


html.is-cep,

body.is-cep {

  background: #0C0A09 !important;

  color: #fff;

}


/* ===================================================================== */

/* CEP Modeless Screen window (com.kuzuno.tools.screen): show ONLY screen */

/* We add html/body class 'kzn-screen-window' from main.js when extId matches */

/* ===================================================================== */

html.kzn-screen-window,

body.kzn-screen-window {

  background: #000 !important;

}


/* Hide the main panel UI (Tools/Profile/Settings/etc). Screen share overlay is injected in JS and stays visible. */

body.kzn-screen-window #wallpaper-container,

body.kzn-screen-window .top-right-icons,

body.kzn-screen-window .avatar-wrap,

body.kzn-screen-window .tabs,

body.kzn-screen-window .content,

body.kzn-screen-window .bottom-left-controls,

body.kzn-screen-window .bottom-right-controls,

body.kzn-screen-window #settingsPanel,

body.kzn-screen-window #aiPanel,

body.kzn-screen-window .admin-panel,

body.kzn-screen-window .profile-name-wrapper,

body.kzn-screen-window .profile-bio-wrapper,

body.kzn-screen-window .profile-link-wrapper {

  display: none !important;

}


/* Make the host panel itself full-bleed so the injected fullscreen overlay matches the window size. */

body.kzn-screen-window #ui-content {

  padding: 0 !important;

  align-items: stretch !important;

  justify-content: stretch !important;

}


body.kzn-screen-window .panel {

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  padding: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  background: #000 !important;

  border: none !important;

}


/* In the Screen window we don't want to see DS UI at all; it should be screen share only. */

body.kzn-screen-window #voiceOverlay {

  opacity: 0 !important;

  pointer-events: none !important;

}


body.kzn-screen-window #messengerOverlay {

  opacity: 0 !important;

  pointer-events: none !important;

}


/* Force form controls to not use native (white) appearance inside CEP */

html.is-cep #voiceOverlay input,

html.is-cep #voiceOverlay button {

  -webkit-appearance: none;

  appearance: none;

}


/* Replace unsupported blur with solid glass-like backgrounds in Voice Mode */

html.is-cep .tg-voice-create-type-menu,

html.is-cep .tg-voice-server-search-popover,

html.is-cep .kzn-mini-toast,

html.is-cep .tg-voice-channel-panel,

html.is-cep .tg-voice-stage-card,

html.is-cep .tg-voice-left,

html.is-cep .tg-voice-create-backdrop,

html.is-cep .tg-voice-channel-header {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}


html.is-cep .tg-voice-server-search-popover>div {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}


/* Ensure DS text chat input row matches browser styling inside CEP */

html.is-cep #voiceOverlay .tg-voice-text-input input {

  background: rgba(255, 255, 255, 0.06) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  color: #fff !important;

}


html.is-cep #voiceOverlay .tg-voice-text-input button {

  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;

  border: none !important;

  color: var(--accent-fg) !important;

}


html.is-cep #voiceOverlay #tgVoiceTextAttach {

  background: rgba(255, 255, 255, 0.07) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;

}


#voiceOverlay .tg-voice-left-actions {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  box-sizing: border-box;

  padding: 12px 8px 20px 8px;

  overflow: visible;

}


#voiceOverlay .tg-voice-left-search {

  width: 44px;

  height: 44px;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 900;

  cursor: pointer;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);

  transition: transform 0.16s ease, background 0.16s ease;

}


#voiceOverlay .tg-voice-left-search:hover {

  transform: translateY(-2px) scale(1.03);

  background: rgba(255, 255, 255, 0.10);

}


#voiceOverlay .tg-voice-left-search:active {

  transform: translateY(0) scale(0.98);

}


/* iOS-like micro animations across DS Voice UI */

#voiceOverlay button {

  transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease, opacity 0.18s ease;

  will-change: transform;

}


#voiceOverlay button:hover {

  transform: translateY(-1px) scale(1.01);

}


#voiceOverlay button:active {

  transform: translateY(0) scale(0.97);

}


#voiceOverlay button:focus {

  outline: none;

}


/* One plus -> Text/Voice type menu */

.tg-voice-create-type-menu {

  position: fixed;

  width: 180px;

  display: none;

  flex-direction: column;

  gap: 8px;

  padding: 10px;

  border-radius: 16px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  z-index: 99999;

}


.tg-voice-create-type-menu button {

  height: 40px;

  padding: 0 12px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, .14);

  background: rgba(var(--accent-rgb), 0.18);

  color: rgba(255, 255, 255, .92);

  cursor: pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;

}


.tg-voice-create-type-menu button:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, 0.10);

  border-color: rgba(255, 255, 255, 0.18);

}


.tg-voice-create-type-menu button:active {

  transform: scale(0.98);

}


/* Voice Mode: animated show/hide for popovers & sheets (iOS-like) */

@keyframes tgVoicePopIn {

  from {

    opacity: 0;

    transform: translateY(-8px) scale(0.98);

  }


  to {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }

}


@keyframes tgVoicePopOut {

  from {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }


  to {

    opacity: 0;

    transform: translateY(-8px) scale(0.98);

  }

}


@keyframes tgVoiceFadeIn {

  from {

    opacity: 0;

  }


  to {

    opacity: 1;

  }

}


@keyframes tgVoiceFadeOut {

  from {

    opacity: 1;

  }


  to {

    opacity: 0;

  }

}


@keyframes tgVoiceSheetIn {

  from {

    opacity: 0;

    transform: translateY(18px) scale(0.98);

  }


  to {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }

}


@keyframes tgVoiceSheetOut {

  from {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }


  to {

    opacity: 0;

    transform: translateY(18px) scale(0.98);

  }

}


.tg-voice-create-type-menu,

.tg-voice-server-search-popover {

  will-change: transform, opacity;

}


.tg-voice-create-type-menu {

  transform-origin: 100% 0;

}


.tg-voice-server-search-popover {

  transform-origin: 50% 0;

}


.tg-voice-create-type-menu.tg-voice-anim-in,

.tg-voice-server-search-popover.tg-voice-anim-in {

  animation: tgVoicePopIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1) both;

}


.tg-voice-create-type-menu.tg-voice-anim-out,

.tg-voice-server-search-popover.tg-voice-anim-out {

  animation: tgVoicePopOut 0.18s cubic-bezier(0.4, 0.0, 0.2, 1) both;

  pointer-events: none;

}


/* Mini toast (non-blocking UX hint) */

.kzn-mini-toast {

  position: fixed;

  z-index: 1000002;

  max-width: 280px;

  padding: 10px 12px;

  border-radius: 16px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: #fff;

  font-weight: 900;

  font-size: 13px;

  letter-spacing: 0.2px;

  text-align: center;

  pointer-events: none;

  will-change: transform, opacity;

}


.kzn-mini-toast.kzn-show {

  animation: tgVoicePopIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1) both;

}


.kzn-mini-toast.kzn-hide {

  animation: tgVoicePopOut 0.18s cubic-bezier(0.4, 0.0, 0.2, 1) both;

}


.kzn-mini-toast.kzn-mini-toast--error {

  border-color: rgba(255, 77, 77, 0.35);

}


.kzn-mini-toast.kzn-mini-toast--ok {

  border-color: rgba(92, 255, 168, 0.25);

}


/* Stories upload progress (Telegram-like circle) */

.kzn-story-upload-backdrop {

  position: fixed;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1000003;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.35);

}


.kzn-story-upload-card {

  width: 240px;

  padding: 16px 16px 14px 16px;

  border-radius: 22px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(18, 18, 20, 0.78);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);

  text-align: center;

  color: #fff;

}


html.is-cep .kzn-story-upload-card {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}


.kzn-story-upload-ring {

  width: 74px;

  height: 74px;

  margin: 0 auto 10px auto;

  position: relative;

  --pct: 0;

}


.kzn-story-upload-ring svg {

  width: 74px;

  height: 74px;

  transform: rotate(-90deg);

}


.kzn-story-upload-track {

  fill: none;

  stroke: rgba(255, 255, 255, 0.14);

  stroke-width: 4.6;

}


.kzn-story-upload-bar {

  fill: none;

  stroke: rgba(var(--accent-rgb), 0.95);

  stroke-width: 4.6;

  stroke-linecap: round;

  stroke-dasharray: 113.097;

  /* 2*pi*18 */

  stroke-dashoffset: calc(113.097 - (113.097 * var(--pct) / 100));

  transition: stroke-dashoffset 0.18s ease;

  filter: drop-shadow(0 8px 18px rgba(var(--accent-rgb), 0.28));

}


.kzn-story-upload-pct {

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  font-size: 15px;

  letter-spacing: 0.2px;

}


.kzn-story-upload-title {

  font-weight: 900;

  font-size: 15px;

  letter-spacing: 0.2px;

  margin-bottom: 4px;

}


.kzn-story-upload-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.72);

}


.tg-voice-create-backdrop.tg-voice-anim-in,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-in {

  animation: tgVoiceFadeIn 0.18s ease-out both;

}


.tg-voice-create-backdrop.tg-voice-anim-out,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-out {

  animation: tgVoiceFadeOut 0.18s ease-in both;

  pointer-events: none;

}


.tg-voice-create-backdrop.tg-voice-anim-in .tg-voice-settings-shell,

.tg-voice-create-backdrop.tg-voice-anim-in .tg-voice-create-card,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-in .tg-voice-audio-sheet-card {

  animation: tgVoiceSheetIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1) both;

}


.tg-voice-create-backdrop.tg-voice-anim-out .tg-voice-settings-shell,

.tg-voice-create-backdrop.tg-voice-anim-out .tg-voice-create-card,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-out .tg-voice-audio-sheet-card {

  animation: tgVoiceSheetOut 0.18s cubic-bezier(0.4, 0.0, 0.2, 1) both;

}


.tg-voice-channel-row {

  display: flex;

  align-items: center;

  gap: 6px;

}


.tg-voice-channel-wrap {

  display: block;

}


/* Discord-like members shown under voice channels */

.tg-voice-chan-members {

  margin-left: 18px;

  margin-top: 6px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}


.tg-voice-chan-member {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 8px;

  border-radius: 14px;

  color: rgba(255, 255, 255, 0.82);

  font-weight: 900;

  font-size: 13px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;

}


.tg-voice-chan-member:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.10);

}


.tg-voice-chan-ava {

  width: 22px;

  height: 22px;

  border-radius: 10px;

  object-fit: cover;

  display: block;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  flex: 0 0 22px;

}


.tg-voice-chan-ava--ph {

  background: rgba(255, 255, 255, 0.08);

}


.tg-voice-chan-name {

  min-width: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


.tg-voice-channel-row .tg-voice-channel {

  flex: 1;

}


.tg-voice-channel-gear {

  width: 34px;

  height: 34px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;

  opacity: 0;

  transform: translateX(-4px);

  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;

}


.tg-voice-channel-row:hover .tg-voice-channel-gear {

  opacity: 1;

  transform: translateX(0);

}


.tg-voice-channel-gear:hover {

  background: rgba(255, 255, 255, 0.10);

}


.tg-voice-mini-gear {

  width: 34px;

  height: 34px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

}


.tg-voice-mini-gear:hover {

  transform: scale(1.06);

  background: rgba(255, 255, 255, 0.10);

}


.tg-voice-level-pill {

  display: inline-flex;

  align-items: center;

  height: 20px;

  padding: 0 8px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 900;

  margin-left: 8px;

  color: rgba(255, 255, 255, 0.90);

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.10);

}


.tg-voice-guild-ava {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: 14px;

}


/* Voice Mode: channel sections */

.tg-voice-section-title {

  font-weight: 900;

  letter-spacing: 0.8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

  padding: 4px 6px;

}


.tg-voice-section-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.tg-voice-text-channel {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.92);

  border-radius: 14px;

  padding: 12px 12px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}


.tg-voice-text-channel:hover {

  transform: scale(1.01);

  background: rgba(255, 255, 255, 0.08);

}


.tg-voice-text-channel.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}


/* Voice Mode: right column text chat */

.tg-voice-text-chat {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-height: 0;

  position: relative;

}


.tg-voice-text-messages {

  flex: 1;

  overflow: auto;

  padding: 10px;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.03);

}


.tg-voice-text-input {

  display: flex;

  gap: 10px;

}


.tg-voice-text-input input {

  flex: 1;

  height: 44px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  padding: 0 12px;

  outline: none;

}


.tg-voice-text-input button {

  width: 56px;

  height: 44px;

  border-radius: 14px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: var(--accent-fg);

  font-weight: 900;

  cursor: pointer;

  transition: transform 0.14s ease, filter 0.14s ease;

}


.tg-voice-text-input button:hover {

  transform: translateY(-1px);

  filter: brightness(1.05);

}


.tg-voice-text-input button:active {

  transform: translateY(0) scale(0.98);

}


/* DS text attach button (smaller, glassy) */

#tgVoiceTextAttach {

  width: 44px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.07);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);

}


#tgVoiceTextAttach:hover {

  background: rgba(var(--accent-rgb), 0.26);

  border-color: rgba(var(--accent-rgb), 0.45);

}


#tgVoiceTextAttach:disabled {

  opacity: 0.55;

  cursor: not-allowed;

  transform: none;

  filter: none;

}

.tg-voice-gif-btn {
  width: 44px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.tg-voice-gif-btn:hover {
  background: rgba(var(--accent-rgb), 0.26);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.tg-voice-gif-btn.active {
  background: rgba(var(--accent-rgb), 0.35);
  border-color: var(--accent);
}

.tg-voice-gif-picker {
  position: absolute;
  bottom: 56px;
  left: 0;
  right: 0;
  max-height: 320px;
  background: rgba(18, 18, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 120;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.tg-voice-gif-search {
  width: 100%;
  height: 38px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #fff;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}

.tg-voice-gif-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 120px;
}


.tg-voice-text-msg {

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  margin-bottom: 10px;

}


.tg-voice-text-from {

  font-size: 11px;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 4px;

}


.tg-voice-text-body {

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;

  line-height: 1.35;

  white-space: pre-wrap;

  word-break: break-word;

}


.tg-voice-text-sys {

  text-align: center;

  font-size: 12px;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.65);

  padding: 8px 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  margin: 10px auto;

  max-width: 92%;

}


/* Big + (create server) polish */

#voiceOverlay .tg-voice-plus {

  width: 64px;

  height: 64px;

  border-radius: 22px;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), 0 0 24px rgba(var(--accent-rgb), 0.18), 0 8px 32px rgba(var(--accent-rgb), 0.22);

  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.25s ease;

  animation: tgVoicePlusGlow 2.5s ease-in-out infinite;

}

@keyframes tgVoicePlusGlow {

  0% {
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), 0 0 24px rgba(var(--accent-rgb), 0.18), 0 8px 32px rgba(var(--accent-rgb), 0.22);
  }

  50% {
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.50), 0 0 36px rgba(var(--accent-rgb), 0.25), 0 8px 38px rgba(var(--accent-rgb), 0.28);
  }

  100% {
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), 0 0 24px rgba(var(--accent-rgb), 0.18), 0 8px 32px rgba(var(--accent-rgb), 0.22);
  }

}


#voiceOverlay .tg-voice-plus:hover {

  transform: translateY(-2px) scale(1.06);

  filter: brightness(1.08);

  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.6), 0 0 48px rgba(var(--accent-rgb), 0.3), 0 18px 60px rgba(var(--accent-rgb), 0.35);

  animation: none;

}


#voiceOverlay .tg-voice-plus:active {

  transform: translateY(0) scale(0.98);

}


/* Channel settings shell (Discord-like) */

.tg-voice-settings-shell {

  width: 92%;

  max-width: 880px;

  height: 72%;

  border-radius: 18px;

  background: rgba(18, 18, 20, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);

  display: flex;

  overflow: hidden;

}


.tg-voice-settings-left {

  width: 240px;

  padding: 16px;

  background: rgba(255, 255, 255, 0.04);

  border-right: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.tg-voice-settings-left-title {

  font-weight: 900;

  color: rgba(255, 255, 255, 0.86);

  margin-bottom: 6px;

}


.tg-voice-settings-nav {

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.90);

  border-radius: 14px;

  padding: 10px 12px;

  cursor: pointer;

  font-weight: 800;

}


.tg-voice-settings-nav.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

}


.tg-voice-settings-nav.danger {

  border-color: rgba(255, 77, 77, 0.30);

  color: #ff4d4d;

}


.tg-voice-settings-main {

  flex: 1;

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.tg-voice-settings-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.tg-voice-settings-title {

  font-weight: 900;

  font-size: 18px;

}


.tg-voice-settings-close {

  width: 44px;

  height: 44px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.90);

  font-size: 22px;

  cursor: pointer;

}


.tg-voice-settings-body {

  flex: 1;

  overflow: auto;

}


/* Chat settings: avatar button (iOS-like) */

#chatSettingsModal .settings-avatar-wrapper {

  flex-shrink: 0;

}

#chatSettingsModal .settings-avatar-button {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

}


#chatSettingsModal .settings-avatar-img {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);

}


#chatSettingsModal .settings-avatar-chip {

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translateX(-50%);

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.2px;

  color: #fff;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

  pointer-events: none;

  z-index: 12;

}


#chatSettingsModal .settings-avatar-button:active {

  transform: scale(0.98);

}


/* ===================================================================== */

/* Profile avatar video -> GIF picker (Telegram-like) */

/* ===================================================================== */

.tg-avatar-video-backdrop {

  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 17500;

  display: none;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.55);

  padding: 18px;

}


.tg-avatar-video-card {

  width: min(92vw, 380px);

  border-radius: 22px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;

}


html.is-cep .tg-avatar-video-card {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}


.tg-avatar-video-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 12px 10px 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}


.tg-avatar-video-title {

  font-weight: 900;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.92);

}


.tg-avatar-video-close {

  width: 36px;

  height: 36px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.90);

  font-size: 18px;

  font-weight: 900;

  cursor: pointer;

}


.tg-avatar-video-preview {

  width: 100%;

  aspect-ratio: 1 / 1;

  background: #000;

  object-fit: cover;

  object-position: 50% 50%;

  display: block;

}


/* CEP/compact panels: make the modal smaller and fit within narrow widths */

html.is-cep .tg-avatar-video-card {

  width: min(92vw, 320px);

  border-radius: 18px;

}


html.is-cep .tg-avatar-video-meta {

  padding: 10px 12px 12px 12px;

  gap: 8px;

}


html.is-cep .tg-avatar-video-preview {

  width: 100%;

  max-height: 240px;

}


html.is-cep .tg-avatar-video-btn {

  height: 42px;

  border-radius: 12px;

}


/* Small hint that preview is draggable (pan) */

.tg-avatar-video-preview.tg-avatar-video-preview--draggable {

  cursor: grab;

}


.tg-avatar-video-preview.tg-avatar-video-preview--draggable:active {

  cursor: grabbing;

}


.tg-avatar-video-meta {

  padding: 12px 14px 14px 14px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.tg-avatar-video-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}


.tg-avatar-video-label {

  font-weight: 800;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

}


.tg-avatar-video-time {

  font-weight: 900;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.92);

}


.tg-avatar-video-select {

  height: 34px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.92);

  font-weight: 900;

  padding: 0 10px;

  outline: none;

}


.tg-avatar-video-select:focus {

  border-color: rgba(var(--accent-rgb), 0.6);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);

}


.tg-avatar-video-range {

  width: 100%;

}


/* One timeline with two thumbs (Start/End) */

.tg-avatar-video-dual {

  position: relative;

  width: 100%;

  height: 30px;

  display: flex;

  align-items: center;

}


.tg-avatar-video-highlight {

  position: absolute;

  top: 50%;

  left: 0;

  width: 0;

  height: 10px;

  transform: translateY(-50%);

  border-radius: 999px;

  pointer-events: none;

  z-index: 1;

  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.85), rgba(var(--accent-rgb), 0.55));

  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.20);

}


.tg-avatar-video-dual .tg-avatar-video-range {

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;

  height: 30px;

  margin: 0;

  background: transparent;

  touch-action: none;

  pointer-events: none;

}


.tg-avatar-video-dual .tg-avatar-video-range[data-role="start"] {

  z-index: 3;

}


.tg-avatar-video-dual .tg-avatar-video-range[data-role="end"] {

  z-index: 4;

}


.tg-avatar-video-dual .tg-avatar-video-range::-moz-range-thumb {

  pointer-events: auto;

  width: 16px;

  height: 30px;

  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(235, 235, 235, 0.90));

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(var(--accent-rgb), 0.18), 0 0 16px rgba(var(--accent-rgb), 0.35);

}


.tg-avatar-video-dual::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  height: 10px;

  border-radius: 999px;

  z-index: 0;

  background: rgba(255, 255, 255, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

}


.tg-avatar-video-dual::after {

  display: none;

}


.tg-avatar-video-dual .tg-avatar-video-range {

  -webkit-appearance: none;

  appearance: none;

  outline: none;

}


.tg-avatar-video-dual .tg-avatar-video-range::-webkit-slider-runnable-track {

  height: 10px;

  background: transparent;

}


.tg-avatar-video-dual .tg-avatar-video-range::-webkit-slider-thumb {

  -webkit-appearance: none;

  pointer-events: auto;

  width: 16px;

  height: 30px;

  border-radius: 8px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(235, 235, 235, 0.90));

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(var(--accent-rgb), 0.18), 0 0 16px rgba(var(--accent-rgb), 0.35);

  margin-top: -10px;

}


/* Active thumb gets a stronger ring so it is easier to grab and visually clear */

.tg-avatar-video-dual .tg-avatar-video-range.tg-avatar-video-range--active::-webkit-slider-thumb {

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(var(--accent-rgb), 0.22), 0 0 18px rgba(var(--accent-rgb), 0.45);

}


.tg-avatar-video-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.60);

}


.tg-avatar-video-actions {

  display: flex;

  gap: 10px;

  margin-top: 4px;

}


.tg-avatar-video-btn {

  flex: 1;

  height: 44px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 900;

  cursor: pointer;

}


.tg-avatar-video-btn.tg-avatar-video-apply {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border: none;

}


.tg-avatar-video-btn:disabled {

  opacity: 0.55;

  cursor: not-allowed;

}


/* РЎРєСЂС‹РІР°РµРј СЃРєСЂРѕР»Р»Р±Р°СЂС‹ РІРµР·РґРµ (РЅРѕ СЃРєСЂРѕР»Р» СЂР°Р±РѕС‚Р°РµС‚) */

*::-webkit-scrollbar {

  display: none;

}


* {

  -ms-overflow-style: none;

  scrollbar-width: none;

}


/* Р—Р°РїСЂРµС‚ РІС‹РґРµР»РµРЅРёСЏ С‚РµРєСЃС‚Р° (С‡С‚РѕР±С‹ РЅРµ РІС‹РіР»СЏРґРµР»Рѕ РєР°Рє СЃР°Р№С‚), РєСЂРѕРјРµ РёРЅРїСѓС‚РѕРІ */

body {

  user-select: none;

  -webkit-user-select: none;

}


input,

textarea {

  user-select: text;

  -webkit-user-select: text;

}


* {

  box-sizing: border-box;

  font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


html,

body {

  height: 100%;

  margin: 0;

  background: var(--bg);

  color: var(--text-primary);

  overflow: hidden;

  transition: background 0.3s ease, color 0.3s ease;

}


/* [NEW] РЈР»СѓС‡С€РµРЅРЅР°СЏ СЃРІРµС‚Р»Р°СЏ С‚РµРјР° */

body.light-theme {

  --bg: #F4F2F7;

  --muted: #6B7280;

  --btn: #EEEDF3;

  --glass: rgba(255, 255, 255, 0.45);

  --panel-bg-dynamic: #FAFAFE;

  --text-primary: #1E1B2E;

  background: linear-gradient(145deg, #F8F7FC 0%, #EDE9F6 50%, #F0EDF8 100%);

}


body.light-theme .panel {

  border: none;

  box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.04);

  background: linear-gradient(180deg, #FEFEFE 0%, #FAF9FE 100%);

}


body.light-theme .tabs {

  background: rgba(238, 237, 243, 0.85) !important;

  border: 1px solid rgba(124, 58, 237, 0.08) !important;

  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06);

}


body.light-theme .tab {

  color: #6B7280;

  font-weight: 600;

}


body.light-theme .tab.active {

  color: var(--accent-fg);

  background: transparent;

}


body.light-theme .middle-static::before {

  background: rgba(0, 0, 0, 0.1);

}


body.light-theme .tools-list .big-btn {

  background: var(--btn);

  border: 1px solid #E5E7EB;

}


body.light-theme .tools-list .big-btn:hover {

  background: #E5E7EB;

}


body.light-theme .big-btn .label {

  color: var(--text-primary);

}


body.light-theme .login-input,

body.light-theme .form-group input,

body.light-theme .form-group select {

  background-color: rgba(124, 58, 237, 0.03);

  border-color: rgba(124, 58, 237, 0.1);

  color: var(--text-primary);

}


body.light-theme .login-input:focus {

  border-color: rgba(124, 58, 237, 0.35);

  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);

}

body.light-theme .login-input::placeholder {
  color: #B0AEC0;
}

body.light-theme .nickname-box {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: 0 2px 16px rgba(124, 58, 237, 0.04);
}

body.light-theme .nickname-box:focus-within {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.1);
}

body.light-theme .nickname-input-group #myNicknameInput {
  background: rgba(124, 58, 237, 0.03);
  border-color: rgba(124, 58, 237, 0.1);
  color: #1E1B2E;
}

body.light-theme .nickname-input-group #myNicknameInput:focus {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.3);
}

body.light-theme .nickname-box label {
  color: #6B7280;
}


body.light-theme .bottom-right-controls .icon-btn,

body.light-theme .text-icon-btn {

  background: var(--btn);

  border: 1px solid #E5E7EB;

}

/* ========================================================= */
/* === LIGHT THEME: comprehensive overrides               === */
/* ========================================================= */

/* Tool tiles */
body.light-theme .tool-tile {
  background: linear-gradient(160deg, #FFFFFF 0%, #F5F3FA 100%);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06), 0 0 0 1px rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.06);
}

body.light-theme .tool-tile:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #EDE5FF 100%);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.15);
}

body.light-theme .tool-tile .tile-label {
  color: #1F2937;
}

body.light-theme .tool-tile .tile-icon {
  background: rgba(124, 58, 237, 0.07);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.06);
}

body.light-theme .tool-tile .tile-icon-text {
  color: #6D28D9;
  box-shadow: none;
}

body.light-theme .tool-tile .tile-icon img {
  filter: brightness(0.3);
}

/* Profile text */
body.light-theme .profile-name {
  color: #1E1B2E;
  text-shadow: none;
}

body.light-theme .profile-bio {
  color: #4B5563;
}

body.light-theme .profile-link {
  color: var(--accent);
}

/* Logged in text */
body.light-theme .logged-in-as {
  color: #9CA3AF;
  font-size: 13px;
}

/* Logout button */
body.light-theme .logout-btn {
  background: rgba(239, 68, 68, 0.03);
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  color: #DC2626;
}

body.light-theme .logout-btn:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Login button */
body.light-theme .login-btn {
  background: var(--accent);
  color: var(--accent-fg);
}

/* Admin button */
body.light-theme .admin-btn {
  border-color: var(--accent);
  color: var(--accent);
}

body.light-theme #_mpBtn,
body.light-theme #btnSaveNickname {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED !important;
  border: 1.5px solid rgba(124, 58, 237, 0.25) !important;
  box-shadow: none;
}

body.light-theme #_mpBtn:hover,
body.light-theme #btnSaveNickname:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.4) !important;
  transform: translateY(-1px);
}

/* Top right icons */
body.light-theme .top-right-icons .icon-btn {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(124, 58, 237, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

body.light-theme .top-right-icons .icon-btn:hover {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

body.light-theme .top-right-icons .icon-btn img {
  filter: brightness(0.3);
}

/* Settings panel */
body.light-theme .settings-panel {
  background: #f5f5f7 !important;
}

body.light-theme .stg-scroll {
  background: transparent;
}

body.light-theme .stg-header {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95);
}

body.light-theme .stg-close-btn {
  color: #6B7280;
}

body.light-theme .stg-title {
  color: #1F2937;
}

body.light-theme .stg-section-label {
  color: #6B7280;
}

body.light-theme .stg-card {
  background: #F9FAFB;
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .stg-upload-btn {
  background: #F3F4F6;
  border-color: rgba(0, 0, 0, 0.08);
  color: #4B5563;
}

body.light-theme .stg-apply-mini {
  background: var(--accent);
  color: var(--accent-fg);
}

body.light-theme .stg-row-text {
  color: #374151;
}

body.light-theme .stg-row-icon {
  color: #6B7280;
}

body.light-theme .stg-slider-label {
  color: #6B7280;
}

body.light-theme .stg-gallery-label {
  color: #6B7280;
}

body.light-theme .stg-divider {
  background: rgba(0, 0, 0, 0.06);
}

body.light-theme .stg-danger-btn {
  color: #EF4444;
  border-color: #FCA5A5;
  background: rgba(239, 68, 68, 0.04);
}

/* Theme switcher segment */
body.light-theme .stg-seg {
  background: rgba(0, 0, 0, 0.06);
}

body.light-theme .theme-option {
  color: #6B7280;
}

body.light-theme .theme-option.active {
  color: #fff;
}

/* About Promo button text */
body.light-theme .text-icon-btn span {
  color: #4B5563;
}

body.light-theme .text-icon-btn img {
  filter: brightness(0.4);
}

body.light-theme .text-icon-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

body.light-theme .text-icon-btn:hover span {
  color: #fff;
}

body.light-theme .text-icon-btn:hover img {
  filter: brightness(0) invert(1);
}

/* Bottom icons */
body.light-theme .bottom-right-controls .icon-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(124, 58, 237, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .bottom-right-controls .icon-btn:hover {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

/* Light sweep on light theme вЂ” darker sweep */
body.light-theme .login-btn::after,
body.light-theme .logout-btn::after,
body.light-theme .admin-btn::after,
body.light-theme #_mpBtn::after,
body.light-theme #btnSaveNickname::after,
body.light-theme .tool-tile::after,
body.light-theme .stg-apply-mini::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

/* Panel background вЂ” handled above */

/* Avatar glow */
body.light-theme .avatar-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
}

/* Tab indicator on light theme */
body.light-theme .tabs .tab-indicator {
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}


body,

#app {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

}


/* [FIX] РЎС‚РёР»Рё РґР»СЏ РЅРѕРІРѕР№ РѕР±РµСЂС‚РєРё UI, С‡С‚РѕР±С‹ РїР°РЅРµР»СЊ Р±С‹Р»Р° РІРёРґРёРјРѕР№ */

#ui-content {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 3;

}


#wallpaper-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  background-size: cover;

  background-position: center;

}

#videoWallpaper {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}


/* Full-screen cover layer (РѕР±Р»РѕР¶РєР°) between wallpaper and UI */

#panel-cover-layer {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  pointer-events: none;

  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;

}

/* Bottom fade: always full viewport via cover layer, not the panel column */
.content::after {
  display: none !important;
}

#panel-cover-layer::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 140px;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 50%, var(--panel-bg-dynamic, rgba(12, 10, 9, 0.97)) 100%),
    linear-gradient(to bottom, transparent 65%, rgba(0, 0, 0, 0.97) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Wallpaper: opacity dim on full viewport, not the 480px panel column */
body.kzn-has-wallpaper .panel {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


#videoWallpaper {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transition: opacity 0.5s ease;

}


.panel {

  width: 100%;

  height: 100%;

  max-width: 480px;

  max-height: 100%;

  margin: 0 auto;

  /* РўРµРїРµСЂСЊ С„РѕРЅ Р±РµСЂРµС‚СЃСЏ РёР· РґРёРЅР°РјРёС‡РµСЃРєРѕР№ РїРµСЂРµРјРµРЅРЅРѕР№ */

  background-color: var(--panel-bg-dynamic);

  border-radius: 0;

  box-shadow: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  overflow: visible !important;

  padding: 8px;

  z-index: 1;

  /* Р”РёРЅР°РјРёС‡РµСЃРєРёР№ Р±Р»СЋСЂ */

  backdrop-filter: blur(var(--panel-blur-dynamic));

  -webkit-backdrop-filter: blur(var(--panel-blur-dynamic));

  /* [NEW] Р”РёРЅР°РјРёС‡РµСЃРєРѕРµ СЃРєСЂСѓРіР»РµРЅРёРµ */

  transition: border-radius 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;

  border: none;

}


/* [NEW] РљР»Р°СЃСЃ РґР»СЏ РѕС‚РєР»СЋС‡РµРЅРёСЏ СЃРєСЂСѓРіР»РµРЅРёСЏ */

.panel.no-rounding {

  border-radius: 0px;

}


/* РџР РћР¤РР›Р¬ */

.profile-name-wrapper,

.profile-bio-wrapper,

.profile-link-wrapper,

.profile-additional-bio-wrapper {

  position: absolute;

  text-align: left;

  top: 160px;

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  pointer-events: none;

  transition: all 0.4s ease-in-out;

  z-index: 999;

  width: auto;

  white-space: nowrap;

}


.profile-name-wrapper {

  display: flex;

  align-items: center;

  gap: 12px;

}


.profile-name {

  font-size: 20px;

  font-weight: 600;

  margin: 0;

}


.profile-bio {

  font-size: 14px;

  margin: 0;

  color: var(--muted);

  display: flex;

  align-items: center;

}


.profile-link {

  color: #58A6FF;

  text-decoration: none;

  font-size: 14px;

}


body.profile-view .profile-name-wrapper {

  display: flex;

  align-items: center;

  gap: 12px;

}


/* [Р’РћРЎРЎРўРђРќРћР’Р›Р•РќРћ] Р”Р»СЏ РёРєРѕРЅРєРё РјРµСЃСЃРµРЅРґР¶РµСЂР° */

body.profile-view .profile-name-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.1s;

  top: 47px;

  left: var(--profile-name-left, 135px);

}


/* Default profile position (A) */

body.profile-view .profile-bio-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.15s;

  top: 140px;

  left: var(--profile-bio-left, 48px);

}


body.profile-view .profile-link-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.2s;

  top: 160px;

  left: var(--profile-bio-left, 48px);

}


body.profile-view .profile-additional-bio-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.25s;

  top: 180px;

  left: var(--profile-bio-left, 48px);

  white-space: normal;

  max-width: 260px;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.4;

}


/* Peek mode (B): when wheel-peek shows dots under avatar */

body.profile-view.tg-profile-peek .profile-bio-wrapper {

  top: 148px;

}


body.profile-view.tg-profile-peek .profile-link-wrapper {

  top: 168px;

}


body.profile-view.tg-profile-peek .profile-additional-bio-wrapper {

  top: 188px;

}


body.profile-view.tg-profile-peek .profile-bio-wrapper,

body.profile-view.tg-profile-peek .profile-link-wrapper,

body.profile-view.tg-profile-peek .profile-additional-bio-wrapper {

  left: var(--profile-bio-left, 48px);

}


/* Bio micro-animation in peek (Apple-like small slide) */

body.profile-view.tg-profile-peek .profile-bio-wrapper,

body.profile-view.tg-profile-peek .profile-link-wrapper,

body.profile-view.tg-profile-peek .profile-additional-bio-wrapper {

  transform: translateY(6px);

}


/* Old circles (dots) under profile avatar during peek */

#tgProfileStoryDots .tg-profile-dot {

  width: 7px;

  height: 7px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.28);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

}


#tgProfileStoryDots .tg-profile-dot.active {

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.88), 0 0 14px rgba(var(--accent-rgb), 0.38);

}


.tiktok-icon {

  width: 16px;

  height: 16px;

  margin-right: 6px;

}


/* HIDE */

body.shame-mode .profile-name-wrapper,

body.shame-mode .profile-bio-wrapper,

body.shame-mode .profile-link-wrapper,

body.admin-mode .profile-name-wrapper,

body.admin-mode .profile-bio-wrapper,

body.admin-mode .profile-link-wrapper {

  opacity: 0 !important;

  pointer-events: none;

  transition: opacity 0.2s ease;

}


/* ICONS */

.top-right-icons {

  position: absolute;

  top: 20px;

  right: 16px;

  z-index: 50;

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.top-right-icons .icon-btn {

  position: static;

  width: 40px;

  height: 40px;

  border-radius: 10px;

  background: transparent;

  border: 2px solid rgba(255, 255, 255, 0.04);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform .28s ease, box-shadow .28s ease;

  padding: 0;

}


/* Profile header: chat/open button next to KUZUNO

   IMPORTANT: no separate show/hide state (prevents "jump then disappear" glitches).

   It inherits the parent `.profile-name-wrapper` transitions (position/opacity). */

.profile-name-wrapper .messenger-icon-btn {

  background: none;

  border: none;

  padding: 0;

  cursor: pointer;

  opacity: 0.72;

  transition: opacity 200ms ease, transform 200ms ease;

}


body.profile-view .profile-name-wrapper .messenger-icon-btn:hover {

  opacity: 1;

  transform: translateY(-1px) scale(1.06);

}


.profile-name-wrapper .messenger-icon-btn img {

  width: 24px;

  height: 24px;

}


.top-right-icons .icon-btn:hover {

  transform: rotate(10deg);

  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.16);

}


.top-right-icons .icon-btn img {

  width: 22px;

  height: 22px;

}


/* Make top-right icons readable on dark theme */

body:not(.light-theme) .top-right-icons .icon-btn img {

  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));

  opacity: 0.95;

}


/* Instagram icon is colorful; the monochrome filter above turns it into a white square. */

body:not(.light-theme) #btnInstagram img {

  filter: none;

  opacity: 1;

}


#btnNotifications {

  position: relative;

}


#btnNotifications .dot {

  position: absolute;

  top: 2px;

  right: 0;

  min-width: 19px;

  height: 19px;

  padding: 0 5px;

  display: none;

  align-items: center;

  justify-content: center;

  background: linear-gradient(180deg, #ff625d 0%, #ff3b30 100%);

  color: #fff;

  font-size: 10px;

  line-height: 1;

  font-weight: 900;

  border-radius: 999px;

  border: 2px solid #0C0A09;

  box-shadow: 0 8px 18px rgba(255, 59, 48, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2);

  transform: translate(22%, -18%);

  z-index: 3;

}


.avatar-wrap {

  margin-top: 40px;

  margin-bottom: 14px;

  z-index: 15;

  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  flex-shrink: 0;

  align-self: center;

}


body.profile-view .avatar-wrap {

  transform: translate(var(--avatar-shift-x, -105px), -42px) scale(0.6);

}


.avatar-ring {

  width: 144px;

  height: 144px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.56));

  padding: 3px;

  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;

  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);

}


.avatar-ring:hover {

  transform: scale(1.03)
}


.avatar-ring img {

  width: 138px;

  height: 138px;

  border-radius: 50%;

  display: block;

  object-fit: cover;

  border: 3px solid #0C0A09;

}


.avatar-glow {

  position: absolute;

  left: -8px;

  top: -8px;

  right: -8px;

  bottom: -8px;

  border-radius: 50%;

  box-shadow: 0 0 48px 14px rgba(var(--accent-rgb), 0.34), 0 0 88px 24px rgba(var(--accent-rgb), 0.16);

  opacity: 0;

  transition: opacity .4s ease;

  pointer-events: none;

}


.avatar-ring:hover .avatar-glow {

  opacity: 1
}


/* TABS & CONTENT */

/* === 3. РљРћР›Р¬Р¦Рћ MAIN STORY (Р”РРќРђРњРР§Р•РЎРљРћР•) === */

/* РўРµРїРµСЂСЊ С†РІРµС‚ Р·Р°РІРёСЃРёС‚ РѕС‚ РїРµСЂРµРјРµРЅРЅРѕР№ --accent */

.main-story-active {

  border: 3px solid var(--accent) !important;

  cursor: pointer !important;

  box-shadow: 0 0 15px var(--accent);

  /* Р”РѕР±Р°РІРёР» СЃРІРµС‡РµРЅРёРµ */

}


.tabs {
  width: 100%;
  max-width: 326px;
  background: linear-gradient(180deg, rgba(23, 21, 28, 0.96), rgba(16, 15, 21, 0.98));
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  z-index: 5;
  height: 50px;
  box-sizing: border-box;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


.tab {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  border-radius: 999px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.36s ease, opacity 0.36s ease, filter 0.36s ease, transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  letter-spacing: 0.2px;
  overflow: hidden;
  white-space: nowrap;
}


.tab.active {
  background: transparent;
  color: var(--accent-fg);
  font-weight: 700;
}

.tab.active img {
  opacity: 1;
}

.tab:not(.active) img {
  filter: brightness(0) invert(1);
  opacity: 0.72;
}

.tab:active {
  transform: none;
  transition-duration: 0s;
}

/* Sliding indicator behind active tab */
.tabs .tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.98), rgba(var(--accent-rgb), 0.84) 56%, rgba(92, 56, 214, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -10px 18px rgba(64, 38, 148, 0.24);
  transition: left 0.58s cubic-bezier(0.22, 1, 0.36, 1), width 0.58s cubic-bezier(0.22, 1, 0.36, 1), transform 0.58s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease;
  z-index: 1;
  pointer-events: none;
  transform-origin: center center;
  will-change: left, width, transform;
}

.tabs.is-animating .tab-indicator {
  animation: tabIndicatorMorph 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tabIndicatorMorph {
  0% {
    transform: scale(0.985, 0.96);
  }

  48% {
    transform: scale(1.022, 1.015);
  }

  100% {
    transform: scale(1, 1);
  }
}


.middle-static {
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 22px;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 6px;
  opacity: 1;
  cursor: default;
  pointer-events: none;
  position: relative;
  display: block;
  border-radius: 0.5px !important;
  align-self: center;
}


.middle-static::after {
  content: "";
  display: none;
}


.content {

  width: 100%;

  padding: 0 16px;

  position: relative;

  flex: 1;

  display: flex;

  overflow: visible;

  margin-bottom: 0;

  z-index: 10;

}


.content-pane {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.44s ease, transform 0.58s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.58s;

  transform: translateX(var(--pane-enter-x, 14px)) translateY(8px) scale(0.988);

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  scrollbar-width: none;

  padding-bottom: 60px;

  visibility: hidden;

  z-index: 0;

  will-change: opacity, transform;

}


.content-pane::-webkit-scrollbar {

  display: none;

}


.content-pane.active {

  opacity: 1;

  pointer-events: all;

  transform: translateX(0) translateY(0) scale(1);

  visibility: visible;

  z-index: 2;

  transition-delay: 0s;

}

.content-pane.is-exiting {

  opacity: 0;

  pointer-events: none;

  transform: translateX(var(--pane-exit-x, -14px)) translateY(4px) scale(0.986);

  visibility: visible;

  z-index: 1;

  transition-delay: 0s;

}

#profilePane .nickname-box,

#profilePane .logged-in-as,

#profilePane .profile-actions-row>* {

  opacity: 0;

  transform: translateY(18px) scale(0.985);

  transition: opacity 0.42s ease, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;

}

#profilePane.active .nickname-box,

#profilePane.active .logged-in-as,

#profilePane.active .profile-actions-row>* {

  opacity: 1;

  transform: translateY(0) scale(1);

}

#profilePane.active .nickname-box {

  transition-delay: 0.08s;

}

#profilePane.active .logged-in-as {

  transition-delay: 0.16s;

}

#profilePane.active .profile-actions-row>*:nth-child(1) {

  transition-delay: 0.24s;

}

#profilePane.active .profile-actions-row>*:nth-child(2) {

  transition-delay: 0.32s;

}

#profilePane.active .profile-actions-row>*:nth-child(3) {

  transition-delay: 0.4s;

}


/* TOOLS */

#toolsPane {

  display: flex;

  flex-direction: column;

}


.tools-list {

  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  transition: opacity 0.3s ease;

  padding: 10px 14px 14px;

}


/* Main menu tiles вЂ” Apple iOS dark style */

.tool-tile {

  width: 100%;

  height: 82px;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 18px;

  background: rgba(28, 28, 30, 0.85);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  transition: transform .22s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease;

}


.tool-tile:hover {

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09);

  background: rgba(38, 38, 42, 0.92);

  border-color: rgba(var(--accent-rgb), 0.2);

}


.tool-tile .tile-icon {

  width: 38px;

  height: 38px;

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;

  align-items: center;

  justify-content: center;

}


.tool-tile .tile-icon-text {

  font-weight: 900;

  color: #fff;

  font-size: 15px;

  letter-spacing: 0.5px;

}


.tool-tile .tile-label {

  font-size: 12px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.85);

  letter-spacing: 0.4px;

}


/* Premium lock badge on gated tool tiles */
.tile-premium-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 185, 0, 0.18);
  border: 1px solid rgba(255, 185, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.2s;
}

.tile-premium-lock::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb900' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tile-premium-lock.hidden {
  display: none;
}

/* Coming Soon ribbon badge on tool tiles */
.tile-coming-soon {
  position: absolute;
  top: 5px;
  left: 5px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 6;
  line-height: 1.3;
}

/* Tool tile info badge (!) */
.tile-info-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  z-index: 5;
  transition: background 0.2s, color 0.2s, opacity 0.22s;
  pointer-events: auto;
  line-height: 1;
  opacity: 0;
}

.tool-tile:hover .tile-info-badge {
  opacity: 1;
}

.tile-info-badge:hover {
  background: rgba(var(--accent-rgb), 0.25);
  color: rgba(255, 255, 255, 0.85);
}

/* Tool info tooltip popup */
.tile-info-popup {
  position: fixed;
  z-index: 1060;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  box-sizing: border-box;
  background: rgba(18, 18, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.tile-info-popup.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.kzn-title-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1065;
  max-width: min(260px, calc(100vw - 16px));
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(18, 18, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.96);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: normal;
}

.kzn-title-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.tile-info-popup-video {
  width: 100%;
  display: block;
  border-radius: 14px 14px 0 0;
  max-height: 240px;
  object-fit: contain;
  background: #000;
}

.tile-info-popup-text {
  padding: 12px 16px 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.tile-info-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

body.light-theme .tile-info-popup {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

body.light-theme .tile-info-popup-text {
  color: rgba(0, 0, 0, 0.72);
}

body.light-theme .tile-info-popup-title {
  color: #111;
}

body.light-theme .tile-info-badge {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.3);
}

body.light-theme .tile-info-badge:hover {
  background: rgba(124, 58, 237, 0.15);
  color: rgba(0, 0, 0, 0.7);
}

/* Wide button style (used in AI panel, admin, etc.) */

.big-btn {

  width: 100%;

  height: 64px;

  margin-bottom: 14px;

  border-radius: 12px;

  border: none;

  background: linear-gradient(180deg, var(--btn), #0f0f0f);

  display: flex;

  align-items: center;

  padding: 10px 14px;

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);

  transition: transform .28s ease, box-shadow .28s ease, background .25s ease;

  overflow: hidden;

  flex-shrink: 0;

}


.big-btn:hover {

  transform: translateY(-4px) scale(1.01);

  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.12);

  background: linear-gradient(180deg, #232323, #121212);

}


.big-btn .icon {

  width: 46px;

  height: 46px;

  border-radius: 10px;

  background: var(--glass);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 12px;

  font-size: 22px;

  flex-shrink: 0;

  transition: background .25s ease, transform .28s ease;

}


.big-btn:hover .icon {

  transform: scale(1.05);

  background: rgba(var(--accent-rgb), 0.06)
}


.big-btn .label {

  flex: 1;

  font-size: 20px;

  font-weight: 600;

  text-align: left;

  color: #fff;

}


.big-btn .hint {

  background: var(--glass);

  padding: 6px 8px;

  border-radius: 8px
}


/* BOTTOM CONTROLS */

.bottom-left-controls,

.bottom-right-controls {

  position: absolute;

  bottom: 16px;

  z-index: 50;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease-in-out;

}


body.profile-view .bottom-left-controls,

body.profile-view .bottom-right-controls {

  opacity: 1;

  pointer-events: all;

  transition-delay: 0.2s;

}


.bottom-left-controls {

  left: 20px;

}


.bottom-right-controls {

  right: 20px;

  display: flex;

  gap: 12px;

}


.bottom-right-controls .icon-btn {

  width: 40px;

  height: 40px;

  border-radius: 10px;

  border: none;

  background: var(--btn);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s;

}


.bottom-right-controls .icon-btn img {

  width: 20px;

  height: 20px;

}


.bottom-right-controls .icon-btn:hover {

  transform: scale(1.1);

  background: var(--accent);

}


.text-icon-btn {

  height: 40px;

  border-radius: 10px;

  border: none;

  background: var(--btn);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 12px;

  gap: 8px;

  transition: transform 0.2s, filter 0.2s, background 0.2s;
  transform-origin: center bottom;

}


.text-icon-btn img {

  width: 20px;

  height: 20px;

}


.text-icon-btn span {

  color: var(--muted);

  font-weight: 600;

  font-size: 14px;

}


.text-icon-btn:hover {

  background: var(--accent);
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));

}


.text-icon-btn:hover span {

  color: #fff;

}


/* LOGIN */

.login-container,

.logout-container {

  width: 100%;

  padding: 0 30px 48px 30px;

  position: relative;

  margin-top: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition: opacity 0.4s ease, transform 0.4s ease;

  z-index: 40;

  gap: 12px;

  flex-shrink: 0;

}


.login-input {

  width: 100%;

  height: 48px;

  background-color: var(--btn);

  border: 2px solid rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  padding: 0 16px;

  font-size: 18px;

  color: #fff;

  text-align: center;

  transition: border-color 0.2s, box-shadow 0.2s;

}


.login-input:focus {

  outline: none;

  border-color: var(--accent);

  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);

}


/* Profile actions row вЂ” responsive wrap for small windows */
.profile-actions-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.profile-actions-row .admin-btn,
.profile-actions-row .logout-btn {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-btn,
.logout-btn,
.admin-btn {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(39, 37, 46, 0.82), rgba(30, 29, 36, 0.88));
  backdrop-filter: blur(18px) saturate(1.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


.login-btn:hover,
.admin-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(139, 92, 246, 0.35);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
}

/* Compact inputs/button for redesigned login */
.login-input-sm {
  height: 38px !important;
  font-size: 13px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  text-align: left !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.login-btn-sm {
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  margin-top: 2px !important;
}

.login-container {
  margin-top: clamp(8px, 3vh, 20px);
  margin-bottom: auto;
  justify-content: flex-start;
  gap: 8px !important;
}

.logout-container {
  margin-top: clamp(8px, 3vh, 18px);
  gap: 10px;
}

.kzn-auth-card {
  width: min(100%, 398px);
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, #121118 0%, #0a090e 100%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.kzn-auth-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.kzn-auth-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.92);
}

.kzn-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.kzn-social-btn {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #1e1e22;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.kzn-social-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2);
}

.kzn-social-btn:active {
  transform: translateY(0);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 6px rgba(0, 0, 0, 0.22);
}

.kzn-social-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.kzn-social-btn__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.kzn-social-btn__title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.kzn-social-btn__meta {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

.kzn-social-btn__chevron {
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.kzn-social-btn--telegram {
  border-color: rgba(95, 210, 255, 0.24);
  background: rgba(34, 158, 217, 0.78);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 6px rgba(0, 0, 0, 0.14);
}

.kzn-social-btn--telegram .kzn-social-btn__icon {
  background: rgba(27, 142, 199, 0.62);
  border-color: rgba(130, 220, 255, 0.2);
}

.kzn-social-btn--telegram:hover {
  background: rgba(39, 170, 232, 0.86);
  border-color: rgba(130, 220, 255, 0.3);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 6px rgba(0, 0, 0, 0.16);
}

.kzn-social-btn--discord {
  border-color: rgba(160, 170, 255, 0.24);
  background: rgba(88, 101, 242, 0.78);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 6px rgba(0, 0, 0, 0.14);
}

.kzn-social-btn--discord .kzn-social-btn__icon {
  background: rgba(79, 91, 213, 0.62);
  border-color: rgba(190, 198, 255, 0.2);
}

.kzn-social-btn--discord:hover {
  background: rgba(101, 112, 244, 0.86);
  border-color: rgba(190, 198, 255, 0.3);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 6px rgba(0, 0, 0, 0.16);
}

@media (max-width: 640px) {
  .kzn-auth-card {
    padding: 14px;
    border-radius: 16px;
  }

  .kzn-social-btn {
    min-height: 54px;
    padding: 10px 12px;
  }

  .tabs {
    max-width: 290px;
  }

  .nickname-input-group {
    gap: 10px;
  }

  .nickname-input-group #btnSaveNickname {
    padding: 0 18px;
  }
}

.kzn-forgot-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 6px 0;
  transition: color 0.2s;
}

.kzn-forgot-link:hover {
  color: var(--accent);
}

#btnAccountManagement {
  background: linear-gradient(180deg, rgba(39, 37, 46, 0.82), rgba(30, 29, 36, 0.88)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  color: var(--accent-fg) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  height: 52px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
}

#btnAccountManagement:hover {
  background: linear-gradient(180deg, rgba(46, 43, 54, 0.88), rgba(35, 33, 42, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(139, 92, 246, 0.12);
}

#amAvatar {
  transition: box-shadow 0.2s, border-color 0.2s;
}

#amAvatarWrap {
  transition: transform 0.2s ease;
  transform-origin: center center;
}

#amAvatarWrap:hover {
  transform: scale(1.08);
}

#amAvatarWrap:hover #amAvatar {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.5) !important;
}

.am-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.logout-btn {
  background: rgba(58, 18, 27, 0.82);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #EF4444;
  margin-bottom: 0;
  height: 52px;
  border-radius: 16px;
}

.logout-btn:hover {
  background: linear-gradient(180deg, rgba(98, 28, 44, 0.94), rgba(73, 20, 32, 0.98));
  border-color: rgba(239, 68, 68, 0.58);
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(122, 17, 38, 0.28), 0 0 0 1px rgba(239, 68, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.admin-btn {
  background: linear-gradient(180deg, rgba(31, 29, 37, 0.84), rgba(22, 21, 28, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: #fff;
  border-radius: 16px;
  height: 52px;
  padding: 0;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-bottom: 0;
  letter-spacing: 0.3px;
}

.admin-btn:hover {
  background: linear-gradient(180deg, rgba(37, 34, 44, 0.9), rgba(26, 24, 33, 0.94));
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
}


#_mpBtn:hover,

#btnAccountManagement:hover {
  transform: translateY(-3px) scale(1.02) !important;
}


/* Main panel button visibility */

#_mpBtn {

  display: none;

}


body._mpv #_mpBtn {

  display: block;

}


body.logged-in .login-container {

  display: none;

}


.logout-container {

  display: none;

}


body.logged-in .logout-container {

  display: flex;

  transform: translateY(-12px);

}


body._mpv .admin-btn {

  display: block;

}


.logged-in-as {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 0;
}


.nickname-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.nickname-input-group #myNicknameInput {
  flex-grow: 1;
  height: 40px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  text-align: left;
  padding: 0 14px;
  color: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nickname-input-group #myNicknameInput:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: none;
}

.nickname-input-group #btnSaveNickname {
  flex-shrink: 0;
  padding: 0 18px;
  height: 36px;
  margin-top: 0;
  width: auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.35px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.98), rgba(var(--accent-rgb), 0.84) 52%, rgba(92, 56, 214, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.34), 0 4px 0 rgba(66, 38, 156, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -10px 16px rgba(74, 42, 176, 0.22);
  transition: all 0.2s ease;
}


.nickname-box {
  width: 100%;
  text-align: left;
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(20, 19, 25, 0.94), rgba(13, 12, 17, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nickname-box:focus-within {
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.1);
}

.nickname-box label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  margin-left: 2px;
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.logged-in-as__label {
  color: rgba(255, 255, 255, 0.42);
}

.profile-action-btn {
  padding: 0;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#btnAccountManagement .profile-action-btn__icon,
#_mpBtn .profile-action-btn__icon,
#btnAccountManagement .profile-action-btn__label,
#_mpBtn .profile-action-btn__label {
  color: var(--accent-fg) !important;
}

.profile-action-btn__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  flex: 0 0 20px;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.profile-action-btn__label {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  text-align: center;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  line-height: 1;
  margin: 0;
  padding: 0 44px;
}

.profile-action-btn__chevron {
  display: none;
}

.profile-action-btn--accent .profile-action-btn__icon {
  color: color-mix(in srgb, var(--accent-fg) 80%, transparent);
}

.profile-action-btn--logout {
  color: #EF4444;
}

.profile-action-btn--logout .profile-action-btn__chevron {
  color: rgba(239, 68, 68, 0.45);
}


.admin-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 14px 12px 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}


.admin-title {

  text-align: left;

  margin: 0;

  color: #fff;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 0.2px;

}


.close-btn {

  width: 32px;

  height: 32px;

  border: none;

  background: transparent;

  color: var(--muted);

  font-size: 24px;

  cursor: pointer;

}


.admin-content {

  display: flex;

  flex-direction: column;

  gap: 14px;

  padding: 16px;

  overflow-y: auto;

  flex-grow: 1;

  min-height: 300px;

}


.admin-section {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 18px;

  padding: 14px;

}


.admin-section-title {

  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.6px;

}


.admin-section-sub {

  margin: -6px 0 10px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;

}


.admin-content h4 {

  margin: 0 0 10px;

}


.form-group {

  margin-bottom: 12px;

}


.form-group label {

  display: block;

  margin-bottom: 6px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.65);

}


.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  padding: 10px 12px;

  color: #fff;

  font-size: 14px;

}


.admin-panel .admin-btn {

  display: block;

  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-rgb), 0.85) 100%);

  border: none;

  color: #fff;

  border-radius: 14px;

  height: 46px;

  font-size: 15px;

  font-weight: 800;

  margin-top: 10px;

  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.25);

}


.admin-panel .admin-btn:hover {

  transform: translateY(-1px);

}


.admin-panel .logout-btn {

  width: 100%;

  height: 46px;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(255, 77, 77, 0.9) 0%, rgba(255, 59, 48, 0.9) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: #fff;

  font-weight: 900;

}


.admin-panel .big-btn {

  height: 48px;

  font-size: 16px;

  margin-top: 8px;

}


.pos-group {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 8px;

}


.pos-group input {

  width: 100%;

}


/* SETTINGS */

.settings-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #080706;

  z-index: 10000;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

}


.settings-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #080706;

  z-index: 10000;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

}


.settings-panel.active {

  opacity: 1;

  pointer-events: all;

}


.settings-title {

  text-align: center;

  margin: 0;

  color: var(--accent);

  font-size: 24px;

  font-weight: 800;

}


.settings-content {

  display: flex;

  flex-direction: column;

  gap: 16px;

  padding: 0 20px;

  overflow-y: auto;

}


.ff-import-actions {

  position: absolute;

  left: 18px;

  bottom: 18px;

  z-index: 14;

  pointer-events: auto;

}


.ff-header>.ff-mini-menu-wrap {

  display: none !important;

}


.ff-import-actions .ff-mini-menu-wrap {

  position: relative;

}


.ff-import-actions .ff-mini-menu {

  left: 0;

  right: auto;

  top: auto;

  bottom: calc(100% + 10px);

}


.setting-group-box {

  background: rgba(255, 255, 255, 0.03);

  padding: 12px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.05);

}


.setting-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  font-size: 14px;

  color: #ccc;

}


.setting-item {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 8px;

}


.setting-item label {

  font-size: 12px;

  color: var(--muted);

}


.setting-item input[type="range"] {

  width: 100%;

  cursor: pointer;

}


.setting-item input[type="color"] {

  width: 100%;

  height: 35px;

  border: none;

  padding: 0;

  background: none;

  cursor: pointer;

}


/* [NEW] РЎС‚РёР»Рё РґР»СЏ РЅР°СЃС‚СЂРѕРµРє Р·РІСѓРєР° РІРёРґРµРѕРѕР±РѕРµРІ */

.wallpaper-sound-controls {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}


.wallpaper-sound-controls .setting-row {

  margin-bottom: 0;

}


.wallpaper-sound-controls .volume-slider-container {

  display: flex;

  align-items: center;

  gap: 10px;

}


.input-with-button {

  display: flex;

  align-items: center;

  gap: 10px;

}


.apply-btn {

  padding: 6px 12px;

  background: var(--accent);

  color: var(--accent-fg);

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  flex-shrink: 0;

  transition: background-color 0.2s;

}


.apply-btn:hover {

  background: #c07eff;

}


.wallpaper-gallery {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));

  gap: 12px;

}


.wallpaper-thumb-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  gap: 4px;

}


.wallpaper-thumb-img {

  width: 100%;

  height: 50px;

  object-fit: cover;

  border-radius: 8px;

  border: 2px solid transparent;

  transition: border-color 0.2s;

}


.wallpaper-thumb-item:hover .wallpaper-thumb-img {

  border-color: var(--accent);

}


.wallpaper-thumb-name {

  font-size: 10px;

  color: var(--muted);

  text-align: center;

  width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


body.light-theme .wallpaper-thumb-name {

  color: #6B7280;

}


.theme-switcher {

  display: flex;

  background: var(--btn);

  border-radius: 10px;

  padding: 4px;

}


.theme-option {

  flex: 1;

  text-align: center;

  padding: 8px;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  color: var(--muted);

  transition: all 0.2s ease;

}


.theme-option.active {

  background: var(--accent);

  color: #fff;

}


/* SWITCH TOGGLE */

.switch {

  position: relative;

  display: inline-block;

  width: 40px;

  height: 22px;

  min-width: 40px;

  flex-shrink: 0;

}


.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}


.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  transition: .4s;

}


.slider:before {

  position: absolute;

  content: "";

  height: 16px;

  width: 16px;

  left: 3px;

  bottom: 3px;

  background-color: white;

  transition: .4s;

}


input:checked+.slider {

  background-color: var(--accent);

}


input:checked+.slider:before {

  transform: translateX(18px);

  background-color: var(--accent-fg);

}


.slider.round {

  border-radius: 34px;

}


.slider.round:before {

  border-radius: 50%;

}


/* Gradient Color toggle вЂ” uses default .switch/.slider styles (same as Ultra Adapt) */


/* AI PANEL (glass submenu) */

.ai-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 10001;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  background: rgba(12, 10, 9, 0.92);

  -webkit-backdrop-filter: blur(16px);

  backdrop-filter: blur(16px);

  transition: opacity 0.25s ease;

}


.ai-panel.active {

  opacity: 1;

  pointer-events: all;

}


.ai-header {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}


.ai-title {

  text-align: center;

  margin: 0;

  color: var(--accent);

  font-size: 24px;

  font-weight: 800;

  letter-spacing: 0.5px;

}


.ai-header .close-btn {

  position: absolute;

  right: var(--kzn-close-inset);

  top: 50%;

  transform: translateY(-50%);

}


.ai-content {

  display: flex;

  flex-direction: column;

  gap: 14px;

  padding: 0 20px;

  overflow-y: auto;

  flex: 1;

  min-height: 0;

}


.ai-wide-btn {

  height: 72px;

}


/* AI scripts screen */

.ai-scripts-view {

  display: none;

}


.ai-scripts-view.active {

  display: block;

}


.ai-menu-home.hidden {

  display: none;

}


.ai-scripts-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 4px;

  margin-bottom: 12px;

}


.ai-scripts-title {

  color: #fff;

  font-weight: 800;

  letter-spacing: 0.5px;

  opacity: 0.95;

}


.ai-scripts-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}


#kznMangaBoostWrap {
  margin-top: 8px;
}

.kzn-manga-boost-hint {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
}

body.light-theme .kzn-manga-boost-hint {
  color: rgba(0, 0, 0, 0.45);
}

#scriptKznTrAi .ai-script-arrow-btn {
  display: none;
}

#scriptKznTrAi .ai-script-body {
  max-height: 700px;
  overflow-y: auto;
  padding: 14px;
  opacity: 1;
  transform: translateY(0);
}

.ai-script-item {

  border-radius: 18px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.035);

  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}


.ai-script-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 14px;

  cursor: pointer;

  user-select: none;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));

}


.ai-script-header:active {

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

}


.ai-script-icon {

  width: 46px;

  height: 46px;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.10);

  font-weight: 900;

  letter-spacing: 1px;

  color: #fff;

  flex-shrink: 0;

}


.ai-script-text {

  display: flex;

  flex-direction: column;

  gap: 2px;

  flex: 1;

  min-width: 0;

}


.ai-script-name {

  font-weight: 900;

  font-size: 18px;

  letter-spacing: 0.6px;

  color: #fff;

}


.ai-script-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


.ai-script-arrow-btn {

  width: 34px;

  height: 34px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(0, 0, 0, 0.22);

  color: rgba(255, 255, 255, 0.9);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;

}


.ai-script-arrow-btn:hover {

  background: rgba(0, 0, 0, 0.28);

}


.ai-script-arrow-btn:active {

  transform: scale(0.94);

}


.ai-script-arrow-btn svg {

  display: block;

}


.ai-script-item.expanded .ai-script-arrow-btn {

  transform: rotate(180deg);

}


.ai-script-item.expanded .ai-script-arrow-btn:active {

  transform: rotate(180deg) scale(0.94);

}


.ai-script-body {

  max-height: 0;

  overflow: hidden;

  padding: 0 14px;

  opacity: 0;

  transform: translateY(-4px);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  transition: max-height 0.28s ease, opacity 0.20s ease, transform 0.28s ease, padding 0.28s ease;

}


.ai-script-item.expanded .ai-script-body {

  max-height: 700px;

  overflow-y: auto;

  padding: 14px;

  opacity: 1;

  transform: translateY(0);

}


.ai-form-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;

}


.ai-label {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.70);

  font-weight: 800;

  letter-spacing: 0.2px;

}


.ai-select {

  width: 190px;

  height: 42px;

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.10);

  color: #fff;

  padding: 0 12px;

}


.ai-check {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 12px;

  border-radius: 16px;

  background: rgba(0, 0, 0, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.06);

  margin-bottom: 10px;

}


.ai-check input {

  transform: scale(1.25);

  accent-color: var(--accent);

}


.ai-check span {

  font-weight: 750;

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;

}


.ai-divider {

  height: 1px;

  background: rgba(255, 255, 255, 0.08);

  margin: 14px 0;

}


.ai-primary {
  width: 100%;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: #fff;
  font-weight: 950;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    /* РІРЅРµС€РЅСЏСЏ С‚РµРЅСЊ */
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    /* РІРµСЂС…РЅРёР№ Р±Р»РёРє */
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
  /* РЅРёР¶РЅСЏСЏ РІРЅСѓС‚СЂРµРЅРЅСЏСЏ С‚РµРЅСЊ */
  transition: transform 160ms ease, box-shadow 160ms ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ai-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}


.ai-status {

  margin-top: 10px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.65);

  text-align: center;

}


.ai-note {

  padding: 12px 12px;

  border-radius: 16px;

  background: rgba(0, 0, 0, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;

  line-height: 1.35;

  margin-bottom: 12px;

}


/* PAYYNUZ SETTINGS (distinct from KZN controls) */

.pyn-segment {

  display: flex;

  gap: 10px;

  padding: 8px;

  border-radius: 18px;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.18));

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  margin-bottom: 12px;

}


.pyn-seg-btn {
  flex: 1;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 950;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.pyn-seg-btn:hover:not(.active) {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.32),
    0 3px 10px rgba(var(--accent-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -4px 12px rgba(0, 0, 0, 0.14);
}

.pyn-seg-btn:active {
  transform: scale(0.97);
}

.pyn-seg-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}


.pyn-box {

  border-radius: 18px;

  padding: 12px;

  background: rgba(0, 0, 0, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.06);

  margin-bottom: 12px;

}


.pyn-row {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 12px;

}


.pyn-row-title {

  font-size: 12px;

  font-weight: 950;

  letter-spacing: 0.6px;

  color: rgba(255, 255, 255, 0.70);

}


.pyn-chips {

  display: flex;

  gap: 10px;

}


.pyn-chip {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  cursor: pointer;

}


.pyn-chip input {

  display: none;

}


.pyn-chip-label {

  font-weight: 900;

  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

}


.pyn-dot {

  width: 14px;

  height: 14px;

  border-radius: 999px;

  border: 2px solid rgba(255, 255, 255, 0.25);

}


.pyn-chip input:checked~.pyn-dot {

  background: var(--accent);

  border-color: var(--accent);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);

}


.pyn-switches {

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.pyn-switch {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.06);

  cursor: pointer;

}


.pyn-switch input {

  display: none;

}


.pyn-switch-text {

  font-weight: 850;

  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

}


.pyn-switch-ui {

  width: 42px;

  height: 24px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.10);

  position: relative;

  flex-shrink: 0;

}


.pyn-switch-ui::after {

  content: '';

  width: 18px;

  height: 18px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.85);

  position: absolute;

  top: 50%;

  left: 3px;

  transform: translateY(-50%);

  transition: transform 0.18s ease;

}


.pyn-switch input:checked~.pyn-switch-ui {

  background: linear-gradient(135deg, var(--accent), rgba(60, 255, 220, 0.35));

  border-color: rgba(255, 255, 255, 0.14);

}


.pyn-switch input:checked~.pyn-switch-ui::after {

  transform: translate(18px, -50%);

  background: var(--accent-fg);

}


.pyn-hint {

  margin-top: 10px;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.58);

  text-align: center;

}


/* DOSKA */

.shame-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.95);

  z-index: 1008;

  display: none;

  flex-direction: column;

  pointer-events: none;

  backdrop-filter: blur(10px);

}


.shame-overlay.active {

  display: flex !important;

  opacity: 1 !important;

  pointer-events: all !important;

  z-index: 1008 !important;

}


.shame-header {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px;

  margin-bottom: 10px;

}


.shame-header h2 {

  margin: 0;

  font-size: 24px;

  color: #ff4d4d;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  text-align: center;

}


.shame-header .close-btn {

  position: absolute;

  right: var(--kzn-close-inset);

  top: 50%;

  transform: translateY(-50%);

}


.highlights-container {

  display: flex;

  flex: 1;

  flex-wrap: wrap;

  justify-content: center;

  align-content: flex-start;

  gap: 20px;

  padding: 20px;

  overflow-y: auto;

  position: relative;

  z-index: 10;

}

.highlights-container:empty {

  display: none;

}


.highlight-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  width: 80px;

}


.highlight-ring {

  width: 74px;

  height: 74px;

  border-radius: 50%;

  padding: 3px;

  background: linear-gradient(45deg, #ff4d4d, var(--accent));

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s;

}


.highlight-item:hover .highlight-ring {

  transform: scale(1.05);

}


.highlight-img {

  width: 68px;

  height: 68px;

  border-radius: 50%;

  border: 3px solid #000;

  object-fit: cover;

  background: #222;

}


.highlight-title {

  margin-top: 6px;

  font-size: 12px;

  text-align: center;

  color: #fff;

  max-width: 80px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


/* [РќРћР’РћР•] РџСѓСЃС‚РѕРµ РјРµРЅСЋ РґР»СЏ РјРµСЃСЃРµРЅРґР¶РµСЂР° */

.messenger-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #000;

  z-index: 1030;

  display: none;

  flex-direction: column;

  pointer-events: none;

  backdrop-filter: blur(10px);

}


.messenger-shell {

  display: flex;

  flex-direction: column;

  width: 100%;

  height: 100%;

  flex: 1 1 auto;

  min-height: 0;

}


.messenger-overlay.active {

  display: flex;

  opacity: 1;

  pointer-events: all;

}


.messenger-header {

  position: relative;

  display: flex;

  align-items: center;

  padding: 15px var(--kzn-close-inset);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  gap: 15px;

}


#btnCloseChatSettings,

#btnCloseForgotPw,

#btnCloseAccountMgmt,

#btnCloseGroupInfo,

#btnCloseUserProfile {

  margin-left: auto;

  margin-right: 0;

}


#btnCloseChatSettings:hover,

#btnCloseForgotPw:hover,

#btnCloseAccountMgmt:hover,

#btnCloseGroupInfo:hover,

#btnCloseUserProfile:hover {

  transform: scale(1.06) !important;

}


.messenger-header .messenger-title-wrapper {

  flex-grow: 1;

}


/* [FIX] Р§С‚РѕР±С‹ Р·Р°РіРѕР»РѕРІРѕРє Р·Р°РЅРёРјР°Р» РјРµСЃС‚Рѕ */

.edit-chats-btn {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  cursor: pointer;

  width: 38px;

  height: 38px;

  border-radius: 14px;

  padding: 0;

  line-height: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.15s ease, background 0.15s ease;

}


.edit-chats-btn svg {

  width: 20px;

  height: 20px;

  stroke: rgba(255, 255, 255, 0.85);

}


.edit-chats-btn:hover {

  background: rgba(255, 255, 255, 0.10);

  transform: scale(1.06);

}


.new-message-btn {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  cursor: pointer;

  width: 38px;

  height: 38px;

  border-radius: 14px;

  padding: 0;

  line-height: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.15s ease, background 0.15s ease;

  opacity: 0.9;

}


.new-message-btn svg {

  width: 22px;

  height: 22px;

  stroke: rgba(255, 255, 255, 0.88);

}


.new-message-btn:hover {

  background: rgba(255, 255, 255, 0.10);

  transform: scale(1.06);

  opacity: 1;

}


.new-message-btn img {

  width: 22px;

  height: 22px;

}


/* Messenger: make Settings button clearly visible + glassy */

#btnOpenChatSettings {

  border-radius: 50%;

  background: transparent;

  border: none;

  overflow: visible;

  transition: transform 0.15s ease, background 0.15s ease;

}


#btnOpenChatSettings svg {

  stroke: rgba(255, 255, 255, 0.92);

}


#btnOpenChatSettings:hover {

  background: rgba(255, 255, 255, 0.10);

  transform: scale(1.06);

}


/* Chat Settings modal: premium glass (less "android") */

#chatSettingsModal,
#forgotPasswordModal,
#accountMgmtModal {

  background: rgba(8, 7, 6, 0.97);

  -webkit-backdrop-filter: blur(6px);

  backdrop-filter: blur(6px);

  z-index: 1040;

}


#chatSettingsModal .chat-settings-header {

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

}


#chatSettingsModal .chat-settings-header-title {

  margin: 0;

  font-weight: 900;

  letter-spacing: 0.3px;

  color: rgba(255, 255, 255, 0.96);

}


#chatSettingsModal .chat-settings-body,
#accountMgmtModal .chat-settings-body,
#forgotPasswordModal .chat-settings-body {

  padding: 18px;

  overflow-y: auto;

  flex: 1;

}


#chatSettingsModal .chat-settings-profile {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

  margin-bottom: 16px;

}


#chatSettingsModal .chat-settings-profile-text {

  min-width: 0;

}


#chatSettingsModal .chat-settings-title {

  font-weight: 900;

  font-size: 16px;

  color: rgba(255, 255, 255, 0.96);

}


#chatSettingsModal .chat-settings-subtitle {

  margin-top: 3px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);

}


#chatSettingsModal .chat-settings-danger-link {

  margin-top: 8px;

  background: none;

  border: none;

  padding: 0;

  cursor: pointer;

  color: #ff4757;

  font-weight: 700;

  font-size: 12px;

}


#chatSettingsModal .chat-settings-danger-link:hover {

  text-decoration: underline;

}


/* Chat settings: Avatar "Preview в†’ Apply" actions */

.chat-settings-actions {

  display: flex;

  gap: 10px;

  margin-top: 12px;

}


.chat-settings-actions.hidden {

  display: none;

}


.chat-settings-apply {
  flex: 1;
  height: 44px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--accent);
  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.4);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.chat-settings-apply:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.45);
  border-color: rgba(255, 255, 255, 0.25);
}

.chat-settings-apply:active {
  transform: scale(0.97);
}


.chat-settings-cancel {

  flex: 1;

  height: 40px;

  border-radius: 999px;

  border: 1.5px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  letter-spacing: 0.2px;

}


.chat-settings-hint {

  margin-top: 8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);

}


.chat-settings-hint.hidden {

  display: none;

}


.messenger-header .close-btn {

  position: static;

}


.messenger-body {

  flex-grow: 1;

  overflow: hidden;

  display: flex;

  position: relative;

}


.chat-list-container {

  width: 35%;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

}


.chat-list-container {

  width: 35%;

  display: flex;

  flex-direction: column;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  overflow-y: auto;

}


/* [FIX] Р’РѕР·РІСЂР°С‰Р°РµРј СЂР°Р·РґРµР»РµРЅРёРµ */

.chat-list-header {

  padding: 10px 15px;

  font-weight: 600;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}


.chat-window-container {

  width: 65%;

  display: flex;

  flex-direction: column;

}


/* [FIX] Р’РѕР·РІСЂР°С‰Р°РµРј СЂР°Р·РґРµР»РµРЅРёРµ */

.chat-window-placeholder {

  color: var(--muted);

  font-size: 14px;

}


.chat-window-container .chat-window-placeholder {

  margin: auto;

}


/* [FIX] Р¦РµРЅС‚СЂРёСЂСѓРµРј РїР»РµР№СЃС…РѕР»РґРµСЂ */


/* Messenger: Voice mode (Discord-like UI stub) */

#btnVoiceMode.active {

  background: rgba(var(--accent-rgb), 0.90);

  border-color: rgba(var(--accent-rgb), 0.55);

  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.22);

  color: var(--accent-fg) !important;

}


#btnVoiceMode.active svg,
#btnVoiceMode.active svg * {
  stroke: currentColor !important;
}


/* [TG-STYLE] Mobile navigation for CEP */

html.is-cep .chat-list-container {

  width: 100% !important;

  border-right: none !important;

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 1;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: #0C0A09;

}


html.is-cep .chat-window-container {

  width: 100% !important;

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 2;

  transform: translateX(100%);

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: #0C0A09;

}


/* When a chat is active in CEP mode, slide the chat window in */

html.is-cep .messenger-overlay.chat-open .chat-window-container,
html.is-cep .messenger-overlay.voice-mode .chat-window-container {

  transform: translateX(0);

}


html.is-cep .messenger-overlay.chat-open .chat-list-container,
html.is-cep .messenger-overlay.voice-mode .chat-list-container {

  transform: translateX(-20%);

}


.chat-back-btn {

  display: none;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

  padding: 8px;

  margin-right: 4px;

  border-radius: 50%;

  transition: background 0.2s;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}


.chat-back-btn:hover {

  background: rgba(255, 255, 255, 0.1);

}


html.is-cep .chat-back-btn {

  display: flex;

}


.chat-list-container,

.chat-window-container {

  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);

}


.messenger-overlay.voice-mode .chat-list-container {

  opacity: 0;

  pointer-events: none;

  width: 0;

  flex: 0 0 0;

  overflow: hidden;

}

.messenger-overlay.voice-mode .messenger-body {

  overflow: visible;

}

.messenger-overlay.voice-mode .chat-window-container {

  width: 100% !important;

  flex: 1 1 100%;

  overflow: visible;

}

.messenger-overlay.voice-mode .chat-window-container>*:not(.tg-voice-overlay) {

  opacity: 0;

  pointer-events: none;

}


.tg-voice-overlay {

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  height: 100%;

  width: 100%;

  box-sizing: border-box;

  display: flex;

  align-items: stretch;

  gap: 12px;

  padding: 14px;

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px) scale(0.985);

  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1);

  overflow: visible;

}


.messenger-overlay.voice-mode .tg-voice-overlay {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0) scale(1);

}


/* DS Voice: compact layout for narrow CEP panels (opt-in via Settings) */

html.kzn-voice-layout-compact .tg-voice-overlay {

  flex-direction: column;

  padding: 8px;

  gap: 8px;

  min-height: 0;

  overflow: hidden;

}


html.kzn-voice-layout-compact .tg-voice-left {

  flex: 0 0 auto;

  width: 100%;

  height: auto;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}


html.kzn-voice-layout-compact .tg-voice-chat-icons {

  flex: 1;

  width: auto;

  flex-direction: row;

  align-items: center;

  overflow-x: auto;

  overflow-y: hidden;

  padding: 0;

}


html.kzn-voice-layout-compact .tg-voice-chat-icon {

  width: 44px;

  height: 44px;

}


html.kzn-voice-layout-compact .tg-voice-plus {

  width: 52px;

  height: 52px;

}


html.kzn-voice-layout-compact #voiceOverlay .tg-voice-left-actions {

  flex-direction: row;

  width: auto;

  padding: 2px 4px 4px 4px;

  gap: 8px;

}


html.kzn-voice-layout-compact .tg-voice-channel-panel {

  flex: 0 0 auto;

  width: 100%;

  height: auto;

  max-height: none;

  min-height: 96px;

  padding: 10px;

  gap: 8px;

  overflow: hidden;

}


html.kzn-voice-layout-compact .tg-voice-channel-list {

  min-height: 0;

  overflow-y: auto;

}


html.kzn-voice-layout-compact .tg-voice-stage {

  flex: 1;

  width: 100%;

  min-height: 0;

  display: flex;

  overflow: hidden;

}


html.kzn-voice-layout-compact .tg-voice-stage-card {

  flex: 1;

  min-height: 0;

  padding: 12px;

  overflow: hidden;

}


html.kzn-voice-layout-compact .tg-voice-channel-title {

  font-size: 11px;

}


html.kzn-voice-layout-compact .tg-voice-channel-sub {

  display: none;

}


html.kzn-voice-layout-compact .tg-voice-section-title {

  font-size: 11px;

  padding: 2px 4px;

}


html.kzn-voice-layout-compact .tg-voice-stage-name {

  font-size: 16px;

}


html.kzn-voice-layout-compact .tg-voice-stage-sub {

  display: none;

}


html.kzn-voice-layout-compact .tg-voice-text-chat {

  gap: 10px;

  min-height: 0;

}


html.kzn-voice-layout-compact .tg-voice-text-messages {

  padding: 8px;

  min-height: 0;

}


html.kzn-voice-layout-compact .tg-voice-text-input {

  gap: 8px;

}


html.kzn-voice-layout-compact .tg-voice-text-input input {

  height: 40px;

  border-radius: 12px;

}


html.kzn-voice-layout-compact #tgVoiceTextAttach {

  width: 40px;

  height: 40px;

  border-radius: 12px;

}


html.kzn-voice-layout-compact .tg-voice-text-input button {

  width: 48px;

  height: 40px;

  border-radius: 12px;

}


html.kzn-voice-layout-compact .tg-voice-text-body {

  font-size: 13px;

}


html.kzn-voice-layout-compact .tg-voice-text-channel,

html.kzn-voice-layout-compact .tg-voice-room {

  padding: 10px 10px;

  border-radius: 12px;

}


/* Voice overlay: left chat circles + middle channel list */

.tg-voice-left {

  flex: 0 0 82px;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  overflow: visible;

  z-index: 2;

  position: relative;

}


.tg-voice-chat-icons {

  flex: 1;

  width: 82px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  overflow-x: visible;

  overflow-y: auto;

  padding: 8px 10px;

}

.tg-voice-chat-icons.is-empty {

  flex: 0 0 auto;

  min-height: 0;

  padding-bottom: 0;

}


.tg-voice-chat-icon {

  width: 52px;

  height: 52px;

  border-radius: 999px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.05);

  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);

  cursor: pointer;

  overflow: hidden;

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}


.tg-voice-chat-icon img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}


.tg-voice-chat-icon:hover {

  transform: scale(1.05);

}


.tg-voice-chat-icon.active {

  border: 2px solid rgba(var(--accent-rgb), 0.95);

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45), 0 18px 50px rgba(var(--accent-rgb), 0.18);

}


.tg-voice-plus {

  width: 56px;

  height: 56px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: var(--accent-fg);

  font-weight: 900;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 16px 44px rgba(var(--accent-rgb), 0.18);

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}


.tg-voice-plus:hover {

  transform: scale(1.08);

  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5), 0 0 40px rgba(var(--accent-rgb), 0.25), 0 18px 60px rgba(var(--accent-rgb), 0.22);

}


.tg-voice-mini-plus {

  width: 30px;

  height: 30px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.92);

  font-weight: 900;

  font-size: 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease;

}


.tg-voice-mini-plus:hover {

  transform: scale(1.08);

  background: rgba(var(--accent-rgb), 0.18);

  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35), 0 0 22px rgba(var(--accent-rgb), 0.12);

}


.tg-voice-channel-panel {

  position: relative;

  flex: 0 0 35%;

  height: 100%;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: visible;

}

.tg-voice-channel-list {

  overflow-y: auto;

  overflow-x: visible;

  flex: 1;

  min-height: 0;

}


.tg-voice-channel-header {

  padding: 2px 6px 6px 6px;

}


.tg-voice-channel-title {

  font-weight: 900;

  letter-spacing: 0.8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.78);

}


.tg-voice-channel-sub {

  margin-top: 4px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

}


.tg-voice-channel-list {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: auto;

  padding: 0 2px 2px 2px;

}


.tg-voice-empty {

  padding: 14px 12px;

  border-radius: 14px;

  border: 1px dashed rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.04);

  color: rgba(255, 255, 255, 0.70);

  font-weight: 700;

  text-align: center;

}


.tg-voice-channel {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.92);

  border-radius: 14px;

  padding: 12px 12px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}


.tg-voice-channel:hover {

  transform: scale(1.01);

  background: rgba(255, 255, 255, 0.08);

}


.tg-voice-channel.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}


/* Create modal */

.tg-voice-create-backdrop {

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: rgba(0, 0, 0, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 3000;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}


.tg-voice-create-card {

  width: 92%;

  max-width: 340px;

  border-radius: 18px;

  background: rgba(18, 18, 20, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.tg-voice-create-title {

  font-weight: 900;

  font-size: 16px;

  letter-spacing: 0.2px;

}


.tg-voice-create-field label {

  display: block;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

  margin-bottom: 6px;

  font-weight: 800;

}


.tg-voice-create-field input {

  width: 100%;

  height: 42px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  padding: 0 12px;

  outline: none;

}


.tg-voice-create-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}


.tg-voice-create-seg {

  display: flex;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  overflow: hidden;

}


.tg-voice-create-seg .seg {

  border: none;

  background: transparent;

  color: rgba(255, 255, 255, 0.80);

  font-weight: 900;

  padding: 10px 12px;

  cursor: pointer;

}


.tg-voice-create-seg .seg.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: var(--accent-fg);

}


.tg-voice-create-actions {

  display: flex;

  gap: 10px;

}


.tg-voice-create-cancel {

  flex: 1;

  height: 42px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 800;

  cursor: pointer;

}


.tg-voice-create-ok {

  flex: 1;

  height: 42px;

  border-radius: 14px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: var(--accent-fg);

  font-weight: 900;

  cursor: pointer;

}


.tg-voice-sidebar {

  flex: 0 0 35%;

  height: 100%;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: auto;

}


.tg-voice-sidebar-title {

  font-weight: 900;

  letter-spacing: 0.8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.78);

  opacity: 0.9;

  padding: 2px 6px;

}


.tg-voice-room {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.92);

  border-radius: 14px;

  padding: 12px 12px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}


.tg-voice-room:hover {

  transform: scale(1.02);

  background: rgba(255, 255, 255, 0.08);

}


.tg-voice-room.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}


.tg-voice-stage {

  flex: 1;

  height: 100%;

  display: flex;

}


.tg-voice-stage-card {

  flex: 1;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}


.tg-voice-stage-name {

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 0.2px;

}


.tg-voice-stage-sub {

  margin-top: 6px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

}


.tg-voice-controls {

  margin-top: auto;

  display: flex;

  align-items: center;

  gap: 10px;

}


.tg-voice-cta {

  flex: 1;

  height: 44px;

  border-radius: 14px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: var(--accent-fg);

  font-weight: 900;

  cursor: pointer;

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}


.tg-voice-cta:hover {

  transform: scale(1.02);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}


.tg-voice-ctl {

  width: 44px;

  height: 44px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  cursor: pointer;

  font-size: 16px;

  transition: transform 0.16s ease, background 0.16s ease;

}


.tg-voice-ctl:hover {

  transform: scale(1.03);

  background: rgba(255, 255, 255, 0.10);

}


/* [РќРћР’РћР•] РЎС‚РёР»Рё РґР»СЏ СЃРїРёСЃРєР° С‡Р°С‚РѕРІ */

.chat-list-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 15px;

  cursor: pointer;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  transition: background-color 0.2s;

}


.chat-list-item:hover {

  background: rgba(255, 255, 255, 0.05);

}


.chat-list-item.active {

  background: var(--accent-chat-surface);
  color: var(--chat-active-fg);

}

.chat-list-item.active .chat-name,
.chat-list-item.active .chat-last-message,
.chat-list-item.active .tg-chat-id {
  color: var(--chat-active-fg) !important;
}

.chat-list-item.active .chat-last-message {
  opacity: 0.82;
}

.chat-list-item.active .tg-chat-row-menu-btn {
  color: var(--chat-active-fg) !important;
  border-color: color-mix(in srgb, var(--chat-active-fg) 24%, transparent) !important;
}


.chat-avatar {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

}

.chat-list-item .chat-avatar-cell > .kzn-presence-dot {
  z-index: 12 !important;
  pointer-events: none;
}


.chat-details {

  flex-grow: 1;

  overflow: hidden;

}


.chat-name {

  font-weight: 600;

  white-space: nowrap;

  overflow: visible;

}


/* [FIX] CEP Panel: Compact Horizontal Layout */

html.is-cep .chat-list-item {

  flex-direction: row !important;

  align-items: center;

  padding: 10px 12px;

  gap: 12px;

  height: auto;

  min-height: 64px;

  position: relative;

}


html.is-cep .chat-avatar {

  width: 44px;

  height: 44px;

  margin: 0;

  flex-shrink: 0;

}


html.is-cep .chat-details {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 0;

  gap: 2px;

}


html.is-cep .chat-name {

  font-size: 16px;

  font-weight: 800;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  flex: 0 1 auto;

  min-width: 0;

  margin: 0;

}


html.is-cep .chat-last-message,

html.is-cep .tg-chat-id {

  display: none !important;

}


/* Menu button (3 dots) - positioned to the right */

html.is-cep .tg-chat-row-menu-btn {

  position: static !important;

  margin: 0 0 0 auto !important;

  width: 24px !important;

  height: 24px !important;

  font-size: 12px !important;

  flex-shrink: 0;

  opacity: 0;

  pointer-events: auto;

  z-index: 10;

}


html.is-cep .chat-list-item:hover .tg-chat-row-menu-btn {

  opacity: 1 !important;

}


/* Badges - keep them compact */

html.is-cep .chat-details>div {

  gap: 4px;

}


html.is-cep .chat-details .unread-badge,

html.is-cep .chat-details .mention-badge {

  transform: scale(0.85);

}


.messenger-overlay.edit-mode .chat-list-item::before {

  content: '';

  display: block;

  width: 18px;

  height: 18px;

  border: 2px solid #888;

  border-radius: 50%;

  margin-right: 5px;

  flex-shrink: 0;

  transition: all 0.2s;

}


.messenger-overlay.edit-mode .chat-list-item.selected-for-deletion::before {

  background-color: #ff4d4d;

  border-color: #ff4d4d;

}


.chat-last-message {

  font-size: 14px;

  color: var(--muted);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


.chat-list-item.unread .chat-last-message {

  color: #fff;

  font-weight: bold;

}


.chat-list-item.active .chat-last-message {

  color: var(--chat-active-fg);

}


.chat-list-placeholder {

  color: var(--muted);

  font-size: 14px;

  text-align: center;

  padding: 20px;

}


/* Small debug-ish chat id label in the chat list (helps deleting 'no-user' chats). */

.tg-chat-id {

  margin-top: 2px;

  font-size: 10px;

  line-height: 12px;

  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.42);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  opacity: 0;

  transform: translateY(-2px);

  transition: opacity 140ms ease, transform 140ms ease;

}


body.light-theme .tg-chat-id {

  color: rgba(0, 0, 0, 0.38);

}


/* Show chat id only when it helps (hover or bulk-edit mode). */

.chat-list-item:hover .tg-chat-id {

  opacity: 1;

  transform: translateY(0px);

}


.messenger-overlay.edit-mode .tg-chat-id {

  opacity: 1;

  transform: translateY(0px);

}


/* [РќРћР’РћР•] РЎС‚РёР»Рё РґР»СЏ РѕРєРЅР° РїРµСЂРµРїРёСЃРєРё */

.chat-window-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  flex-shrink: 0;

}


.chat-window-header-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

}


.chat-window-header-name {

  font-weight: 600;

  font-size: 16px;

}


.clear-history-btn {

  margin-left: auto;

  background: none;

  border: none;

  cursor: pointer;

  padding: 6px;

  line-height: 1;

  color: rgba(255, 255, 255, 0.78);

  opacity: 0.95;

}


.clear-history-btn svg {

  stroke: currentColor;

}


.clear-history-btn:hover {

  color: #ff4d4d;

}

/* Search button lives just before Clear history; it owns the right-alignment
   so the two buttons group together instead of splitting apart. */
.chat-search-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  opacity: 0.95;
}
.chat-search-btn svg { stroke: currentColor; }
.chat-search-btn:hover { color: var(--accent, #a85cff); }
.chat-search-btn.active { color: var(--accent, #a85cff); }
.clear-history-btn { margin-left: 0; }
body.light-theme .chat-search-btn { color: #374151; }

/* --- Telegram-like in-chat message search --- */
.tg-chat-search-panel {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 10, 9, 0.92);
}
.tg-chat-search-panel.open { display: flex; }
.tg-chat-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.tg-chat-search-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}
.tg-chat-search-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.tg-chat-search-count {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  min-width: 40px;
  text-align: center;
}
.tg-chat-search-nav-btn,
.tg-chat-search-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.tg-chat-search-nav-btn:hover,
.tg-chat-search-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tg-chat-search-nav-btn:disabled { opacity: 0.35; cursor: default; }
.tg-chat-search-results {
  overflow-y: auto;
  max-height: 280px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.tg-chat-search-results:empty { display: none; }
.tg-chat-search-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tg-chat-search-result:hover,
.tg-chat-search-result.active { background: rgba(var(--accent-rgb, 168, 92, 255), 0.14); }
.tg-chat-search-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tg-chat-search-result-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-chat-search-result-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.tg-chat-search-result-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.tg-chat-search-result-text mark,
.tg-chat-search-hit-mark {
  background: rgba(var(--accent-rgb, 168, 92, 255), 0.42);
  color: #fff;
  border-radius: 3px;
  padding: 0 1px;
}
.tg-chat-search-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
@keyframes tgSearchHitFlash {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 168, 92, 255), 0.0); background-color: rgba(var(--accent-rgb, 168, 92, 255), 0.30); }
  30% { background-color: rgba(var(--accent-rgb, 168, 92, 255), 0.30); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 168, 92, 255), 0.0); background-color: transparent; }
}
.tg-search-hit-flash { animation: tgSearchHitFlash 1.6s ease-out; border-radius: 12px; }
body.light-theme .tg-chat-search-panel { background: rgba(246, 246, 250, 0.96); }
body.light-theme .tg-chat-search-input { color: #111; background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); }
body.light-theme .tg-chat-search-input::placeholder { color: rgba(0,0,0,0.4); }
body.light-theme .tg-chat-search-result-name { color: #111; }
body.light-theme .tg-chat-search-result-text { color: #444; }

.chat-window-messages {

  flex-grow: 1;

  padding: 20px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

}


/* flex-direction: column РґР»СЏ РїСЂР°РІРёР»СЊРЅРѕРіРѕ СЃРєСЂРѕР»Р»Р° */

.message-bubble {

  max-width: 75%;

  padding: 10px 15px;

  border-radius: 18px;

  margin-bottom: 10px;

  line-height: 1.4;

  word-wrap: break-word;

}


.message-bubble.incoming {

  background: #262626;

  border-bottom-left-radius: 4px;

  align-self: flex-start;

}


.message-bubble.outgoing {

  background: var(--accent-chat-surface);

  border-bottom-right-radius: 4px;

  align-self: flex-end;

  color: var(--chat-active-fg);

}


.message-bubble.outgoing a {

  color: var(--chat-active-fg);

  text-decoration: underline;

  text-underline-offset: 2px;

}

.message-bubble.outgoing :where(.message-time, .tg-voice-title, .tg-voice-meta, .tg-file-title, .tg-file-size, .kzn-chat-link-card, .kzn-chat-link-card *) {
  color: var(--chat-active-fg) !important;
}

.kzn-chat-link-card {
  width: min(70vw, 220px);
  max-width: min(70vw, 220px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--accent-chat-surface);
  border: 1px solid color-mix(in srgb, var(--chat-active-fg) 10%, transparent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  color: var(--chat-active-fg);
  position: relative;
  display: block;
  line-height: 1.2;
  font-size: 10px;
}

.message-bubble.kzn-bubble-link-card {
  width: fit-content !important;
  max-width: min(70vw, 220px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  display: block !important;
  position: static;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: visible;
}

.message-bubble.kzn-bubble-link-card .kzn-chat-link-card {
  width: min(70vw, 220px);
}

.kzn-chat-link-card > .message-meta {
  position: absolute !important;
  right: 4px;
  bottom: 2px;
  float: none !important;
  margin: 0 !important;
  top: auto !important;
  z-index: 3;
  opacity: 0.82;
  font-size: 10px;
  line-height: 1;
  color: color-mix(in srgb, var(--chat-active-fg) 82%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--chat-active-fg) 82%, transparent) !important;
  pointer-events: none;
}

.kzn-chat-link-card > .message-meta .kzn-ck .c1,
.kzn-chat-link-card > .message-meta .kzn-ck .c2 {
  stroke: color-mix(in srgb, var(--chat-active-fg) 82%, transparent) !important;
}

.message-bubble.kzn-bubble-link-card:hover {
  transform: none;
  box-shadow: none;
}

.kzn-chat-link-card__body {
  display: flex;
  gap: 4px;
  padding: 1px 6px 0;
  align-items: center;
  min-height: 36px;
}

.kzn-chat-link-card__info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kzn-chat-link-card__brand {
  font-size: 10px;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent) 72%, var(--chat-active-fg)) !important;
  line-height: 1.1;
}

.kzn-chat-link-card__title {
  font-size: 11px;
  font-weight: 800;
  color: var(--chat-active-fg) !important;
  line-height: 1.15;
  max-height: 14px;
  overflow: hidden;
}

.kzn-chat-link-card__meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 11px;
}

.kzn-chat-link-card__meta {
  font-size: 9.5px;
  font-weight: 650;
  color: color-mix(in srgb, var(--chat-active-fg) 62%, transparent) !important;
}

.kzn-chat-link-card__meta--dim {
  color: color-mix(in srgb, var(--chat-active-fg) 50%, transparent) !important;
}

.kzn-chat-link-card__dot {
  font-size: 8px;
  color: color-mix(in srgb, var(--chat-active-fg) 28%, transparent) !important;
}

.kzn-chat-link-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--chat-active-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--chat-active-fg) 10%, transparent);
  flex: 0 0 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px -1px 0;
}

.kzn-chat-link-card__letter {
  font-size: 16px;
  font-weight: 900;
  color: color-mix(in srgb, var(--chat-active-fg) 82%, transparent) !important;
  position: absolute;
  z-index: 0;
  user-select: none;
}

.kzn-chat-link-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.kzn-chat-link-card__btn {
  width: 100%;
  height: 16px;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--chat-active-fg) 10%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, var(--accent-chat-surface));
  color: var(--chat-active-fg) !important;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 16px;
  padding: 0;
}

.kzn-chat-link-card__btn:hover {
  background: color-mix(in srgb, var(--accent) 24%, var(--accent-chat-surface));
}

.message-bubble.outgoing .media-size-badge,
.message-bubble.outgoing .media-size-tag,
.message-bubble.outgoing .video-time-display {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.message-bubble.outgoing .custom-video-wrapper .video-time-display {
  left: 8px;
  right: auto;
}


.message-time .kzn-ck {

  display: inline-flex;

  align-items: center;

  margin-left: 4px;

  vertical-align: middle;

  flex-shrink: 0;

}

.message-group.outgoing .message-time {
  color: #999 !important;
  opacity: 0.6 !important;
}

.message-bubble.outgoing .message-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  float: right;
  margin-left: 10px;
  margin-top: 6px;
  position: relative;
  top: 4px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.72;
  flex-shrink: 0;
  vertical-align: bottom;
  color: color-mix(in srgb, var(--chat-active-fg) 72%, transparent);
}

.message-bubble.outgoing .message-meta .message-time {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  text-align: right;
}

.message-bubble.outgoing .message-meta .kzn-ck {
  margin-left: 0;
  vertical-align: middle;
}

.message-bubble.outgoing .message-meta .kzn-ck svg {
  width: 16px;
  height: 10px;
  overflow: visible;
}

.message-bubble.outgoing .message-meta .kzn-ck .c1,
.message-bubble.outgoing .message-meta .kzn-ck .c2 {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: currentColor !important;
}

.message-bubble.outgoing .message-meta .kzn-ck .c2 {
  opacity: 0;
}

.message-bubble.outgoing .message-meta .kzn-ck.read .c2 {
  opacity: 1;
}

.message-bubble.outgoing.kzn-bubble-has-media .message-meta {
  float: none;
  position: absolute;
  right: 8px;
  bottom: 6px;
  margin: 0;
  top: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff !important;
  z-index: 6;
}

.message-bubble.outgoing.kzn-bubble-has-media .message-meta .message-time,
.message-bubble.outgoing.kzn-bubble-has-media .message-meta .kzn-ck .c1,
.message-bubble.outgoing.kzn-bubble-has-media .message-meta .kzn-ck .c2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  stroke: #fff !important;
}

.message-group.outgoing .kzn-ck--row-end {
  align-self: flex-end;
  margin-left: 0;
  margin-bottom: 1px;
  opacity: 0.72;
}

.message-group.outgoing .kzn-ck--row-end svg {
  width: 16px;
  height: 10px;
  overflow: visible;
}

.message-group.outgoing .kzn-ck--row-end .c1,
.message-group.outgoing .kzn-ck--row-end .c2 {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-group.outgoing .kzn-ck--row-end .c2 {
  opacity: 0;
}

.message-group.outgoing .kzn-ck--row-end.read .c2 {
  opacity: 1;
}


.message-time .kzn-ck svg {

  width: 16px;

  height: 10px;

  overflow: visible;

}


.message-time .kzn-ck .c1,

.message-time .kzn-ck .c2 {

  fill: none;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  stroke: rgba(255, 255, 255, 0.72);

  transition: opacity 0.25s ease, stroke 0.25s ease;

}


.message-time .kzn-ck .c2 {

  opacity: 0;

}


.message-time .kzn-ck.read .c1,

.message-time .kzn-ck.read .c2 {

  stroke: rgba(255, 255, 255, 0.98);

}


.message-time .kzn-ck.read .c2 {

  opacity: 1;

}

.message-group.outgoing .kzn-ck .c1,
.message-group.outgoing .kzn-ck .c2,
.message-group.outgoing .kzn-ck.read .c1,
.message-group.outgoing .kzn-ck.read .c2 {
  stroke: rgba(153, 153, 153, 0.92) !important;
}


.chat-window-input-area {

  display: flex;

  flex-direction: column;

  gap: 0;

  padding: 15px 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  flex-shrink: 0;

  overflow: visible;

  box-sizing: border-box;

  min-width: 0;

}


/* Chat list bulk actions bar (edit-mode) */

#tgChatBulkBar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 14px;

  z-index: 1045;

  display: none;

  justify-content: center;

  pointer-events: none;

}


#tgChatBulkBar .tg-chat-bulk-card {

  pointer-events: auto;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 18px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}


html.is-cep #tgChatBulkBar .tg-chat-bulk-card {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}


#tgChatBulkBar .tg-chat-bulk-count {

  min-width: 26px;

  height: 26px;

  border-radius: 999px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  font-size: 12px;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #fff;

}


#tgChatBulkBar .tg-chat-bulk-btn {

  height: 34px;

  padding: 0 12px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 900;

  cursor: pointer;

}


#tgChatBulkBar .tg-chat-bulk-btn:hover {

  background: rgba(255, 255, 255, 0.10);

}


#tgChatBulkBar .tg-chat-bulk-btn.danger {

  border: none;

  background: rgba(255, 77, 77, 0.18);

  color: #ff8b8b;

}


#tgChatBulkBar .tg-chat-bulk-btn.danger:hover {

  background: rgba(255, 77, 77, 0.26);

}


#tgChatBulkBar .tg-chat-bulk-btn.ghost {

  background: transparent;

}


.chat-message-sticker {

  max-width: 120px;

  max-height: 120px;

  display: block;

  border-radius: 8px;

}


/* === 2. РђР”РђРџРўРР’РќРћРЎРўР¬ Р§РђРўРђ === */

/* РљРЅРѕРїРєРё РЅРµ СЃР¶РёРјР°СЋС‚СЃСЏ */

.laptop-menu-container,

.chat-window-send-btn,

.chat-main-voice-btn {

  flex-shrink: 0;

}


/* [РќРћР’РћР•] РЎС‚РёР»Рё РґР»СЏ РЅРѕРІРѕРіРѕ РІРІРѕРґР° С‡Р°С‚Р° */

.chat-input-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  min-width: 0;

  overflow: visible;

}


.chat-composer-shell {

  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  width: 100%;

  min-width: 0;

  padding: 8px 10px 8px 12px;

  border-radius: 26px;

  background: linear-gradient(180deg, rgba(16, 16, 18, 0.98) 0%, rgba(12, 12, 14, 0.98) 100%);

  border: 1px solid rgba(255, 255, 255, 0.09);

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  overflow: visible;

}


.chat-composer-shell.recording {

  box-shadow: 0 18px 48px rgba(var(--accent-rgb), 0.18), inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);

}


.chat-composer-shell .laptop-menu-container {

  position: relative;

  display: flex;

  align-items: center;

  overflow: visible;

  z-index: 30;

}


.chat-composer-shell .laptop-btn {

  width: 42px;

  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.05);

  cursor: pointer;

  color: #d1d5db;

  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}


.chat-composer-shell .laptop-btn:hover {

  color: #fff;

  transform: translateY(-1px);

  background: rgba(var(--accent-rgb), 0.18);

  border-color: rgba(var(--accent-rgb), 0.28);

  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.18);

}


.chat-composer-shell .laptop-btn svg {

  width: 21px;

  height: 21px;

}


/* Р’СЃРїР»С‹РІР°СЋС‰РёРµ РјРёРЅРё-РєРЅРѕРїРєРё */

.mini-actions-popup {

  position: absolute;

  bottom: 45px;

  left: -5px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px);

  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  background: rgba(20, 20, 20, 0.9);

  padding: 8px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  z-index: 1200;

}


.laptop-menu-container:hover .mini-actions-popup,

.mini-actions-popup:hover {

  opacity: 1;

  pointer-events: all;

  transform: translateY(0);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  background: rgba(20, 20, 20, 0.95);

}


.mini-btn {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: none;

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s, transform 0.2s;

}


.mini-btn:hover {

  background: var(--accent);

  color: var(--accent-fg);

  transform: scale(1.15);

}


.mini-btn svg {

  width: 18px;

  height: 18px;

}


.chat-composer-main {

  position: relative;

  display: flex;

  align-items: center;

  flex: 1;

  min-width: 0;

  min-height: 48px;

  border-radius: 20px;

  background: linear-gradient(180deg, rgba(14, 14, 16, 0.98) 0%, rgba(10, 10, 12, 0.99) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  overflow: visible;

}


/* РђРЅРёРјР°С†РёСЏ Р·Р°РїРёСЃРё РіРѕР»РѕСЃР° */

.chat-composer-main .recording-indicator {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  color: #ff4d4d;

  font-weight: 800;

  font-size: 12px;

  display: none;

  align-items: center;

  gap: 5px;

  animation: pulse 1s infinite;

  z-index: 4;

  background: rgba(17, 17, 20, 0.88);

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255, 77, 77, 0.22);

}


@keyframes pulse {

  0% {

    opacity: 0.5;

  }


  50% {

    opacity: 1;

  }


  100% {

    opacity: 0.5;

  }

}


/* РћРєРЅРѕ СЃС‚РёРєРµСЂРѕРІ */

.sticker-picker-overlay {

  position: absolute;

  bottom: 70px;

  left: 20px;

  width: 250px;

  max-height: 420px;

  background: linear-gradient(180deg, rgba(25, 25, 30, 0.98) 0%, rgba(16, 16, 21, 0.98) 100%);

  border: 1px solid rgba(var(--accent-rgb), 0.16);

  border-radius: 12px;

  padding: 10px;

  display: none;

  flex-direction: column;

  gap: 10px;

  z-index: 200;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(var(--accent-rgb), 0.06);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;

}


.sticker-picker-overlay.active {

  display: flex;

}


.picker-content-area {

  display: flex;

  flex-direction: column;

  min-height: 0;

  flex: 1;

  overflow-y: auto;

  gap: 10px;

}


.emoji-panel,

#pickerStickerWrap,

.gif-panel {

  min-height: 0;

  overflow-y: auto;

  flex: 1;

}

.emoji-panel {

  display: flex;

  flex-direction: column;

  width: 100%;

}


.gif-panel {

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.gif-search-input {

  width: 100%;

  height: 38px;

  border-radius: 14px;

  border: 1px solid rgba(var(--accent-rgb), 0.14);

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  padding: 0 14px;

  outline: none;

  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;

}


.gif-search-input:focus {

  border-color: rgba(var(--accent-rgb), 0.42);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);

  background: rgba(255, 255, 255, 0.08);

}


.gif-search-input::placeholder {

  color: rgba(255, 255, 255, 0.44);

}


.emoji-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));

  gap: 4px;

  padding: 4px;

  align-items: stretch;

  width: 100%;

}

.emoji-cell {

  width: 100%;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  cursor: pointer;

  border-radius: 8px;

  transition: background 0.15s, transform 0.12s;

  user-select: none;

  background: transparent;

}

.emoji-cell:hover {

  background: rgba(var(--accent-rgb), 0.14);

  transform: scale(1.15);

}

.emoji-cell:active {

  transform: scale(0.95);

}

.gif-grid,

.sticker-grid,

.emoji-panel {

  scrollbar-width: thin;

  scrollbar-color: rgba(var(--accent-rgb), 0.45) transparent;

}


.gif-grid::-webkit-scrollbar,

.sticker-grid::-webkit-scrollbar,

.emoji-panel::-webkit-scrollbar {

  width: 8px;

}


.gif-grid::-webkit-scrollbar-thumb,

.sticker-grid::-webkit-scrollbar-thumb,

.emoji-panel::-webkit-scrollbar-thumb {

  background: rgba(var(--accent-rgb), 0.3);

  border-radius: 999px;

}


.picker-nav {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 3px;

  margin-top: 8px;

  padding: 3px;

  border-radius: 10px;

  background: linear-gradient(180deg, #1a1a1e 0%, #141418 100%);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

}


.picker-nav-btn {

  height: 34px;

  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: linear-gradient(180deg, #2a2a2f 0%, #1d1d22 100%);

  color: rgba(255, 255, 255, 0.78);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-weight: 800;

  font-size: 11px;

  cursor: pointer;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -3px 8px rgba(0, 0, 0, 0.18);

  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;

}


.picker-nav-btn svg {

  width: 15px;

  height: 15px;

  flex-shrink: 0;

}


.picker-nav-btn:hover {

  transform: translateY(-1px);

  color: #fff;

  border-color: rgba(255, 255, 255, 0.14);

  background: linear-gradient(180deg, #34343a 0%, #24242a 100%);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 8px rgba(0, 0, 0, 0.18);

}


.picker-nav-btn.active {

  color: var(--accent-fg, #fff);

  border-color: rgba(var(--accent-rgb), 0.5);

  background: linear-gradient(135deg, var(--accent, #a85cff), var(--accent-light, #d3adff));

  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -4px 12px rgba(0, 0, 0, 0.2);

}


.sticker-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 5px;

  max-height: 150px;

  overflow-y: auto;

}


.sticker-option {

  width: 100%;

  aspect-ratio: 1;

  object-fit: contain;

  cursor: pointer;

  border-radius: 4px;

}


.sticker-option:hover {

  background: rgba(var(--accent-rgb), 0.14);

}


.add-sticker-btn {

  width: 100%;

  aspect-ratio: 1;

  border: 1px dashed rgba(var(--accent-rgb), 0.28);

  border-radius: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: rgba(var(--accent-rgb), 0.78);

  font-size: 24px;

}


.add-sticker-btn:hover {

  border-color: var(--accent);

  color: var(--accent);

  background: rgba(var(--accent-rgb), 0.1);

}


/* РђСѓРґРёРѕ СЃРѕРѕР±С‰РµРЅРёРµ РІ С‡Р°С‚Рµ */

.voice-message-player {

  width: 180px;

  height: 40px;

}


/* РњРµРґРёР° РІ С‡Р°С‚Рµ (РєР°СЂС‚РёРЅРєРё/РІРёРґРµРѕ) */

.chat-media-img {

  max-width: 240px;

  border-radius: 12px;

  cursor: pointer;

  transition: filter 0.2s, opacity 0.2s;

  background: #2a2a2a;

}


.chat-media-img:active,

.chat-media-video:active {

  transform: scale(0.98);

  filter: brightness(0.8);

}


.chat-media-video {

  max-width: 240px;

  border-radius: 12px;

  cursor: pointer;

  background: #000;

  object-fit: cover;

}


/* РРЅРїСѓС‚ СЃР¶РёРјР°РµС‚СЃСЏ, РєРЅРѕРїРєРё РѕСЃС‚Р°СЋС‚СЃСЏ */

.chat-composer-shell .chat-window-input {

  flex-grow: 1;

  min-width: 10px;

  width: 100%;

  border: none;

  height: 48px;

  border-radius: 18px;

  background: transparent;

  padding: 0 16px;

  color: #fff;

  font-size: 15px;

  position: relative;

  z-index: 1;

}


.chat-composer-shell .chat-window-input::placeholder {

  color: rgba(255, 255, 255, 0.46);

}


.chat-composer-shell .chat-window-input:focus {

  outline: none;

  box-shadow: none;

}


.chat-composer-shell.recording .chat-window-input {

  opacity: 0;

  pointer-events: none;

}


.chat-composer-shell .chat-window-send-btn,

.chat-main-voice-btn {

  width: 48px;

  height: 48px;

  flex-shrink: 0;

  border-radius: 18px;

  border: 1px solid rgba(var(--accent-rgb), 0.22);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;

}


.chat-composer-shell .chat-window-send-btn,
.chat-main-voice-btn {
  flex-shrink: 0;
}

.chat-composer-shell .chat-window-send-btn {

  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);

  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.28);

}


.chat-composer-shell .chat-window-send-btn svg {

  width: 22px;

  height: 22px;

  fill: var(--accent-fg);

  transition: transform 0.2s;

}


.chat-main-voice-btn {

  position: relative;

  overflow: visible;

  color: var(--accent-fg);

  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.92) 0%, var(--accent-light) 100%);

  box-shadow: 0 14px 32px rgba(var(--accent-rgb), 0.32);

}


.chat-main-voice-btn svg {

  width: 22px;

  height: 22px;

  position: relative;

  z-index: 2;

}


.chat-main-voice-btn::before,

.chat-main-voice-btn::after {

  content: '';

  position: absolute;

  inset: -4px;

  border-radius: 22px;

  border: 1px solid rgba(var(--accent-rgb), 0.28);

  opacity: 0;

  transform: scale(0.86);

}


.chat-main-voice-btn.recording::before {

  animation: chatVoiceRing 1.35s ease-out infinite;

}


.chat-main-voice-btn.recording::after {

  animation: chatVoiceRing 1.35s ease-out 0.38s infinite;

}


.chat-composer-shell .chat-window-send-btn:hover,

.chat-main-voice-btn:hover {

  transform: translateY(-1px) scale(1.02);

}


.chat-composer-shell .chat-window-send-btn:hover svg {

  transform: scale(1.1);

}


.chat-voice-panel {

  position: absolute;

  bottom: calc(100% + 10px);

  left: 50%;

  right: auto;

  --cvp-voice: 0;
  --cvp-panel-scale: 1;

  margin-left: 0;

  width: min(320px, calc(100% - 12px));

  max-width: min(320px, calc(100vw - 24px));

  height: auto;

  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 0;

  padding: 12px 16px 14px;

  overflow: hidden;

  box-sizing: border-box;

  border-radius: 34px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background:
    radial-gradient(circle at 24% 20%, rgba(255, 114, 205, 0.2), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(161, 120, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #111116 0%, #09090d 100%);

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.46),
    0 12px 36px rgba(126, 59, 212, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 28px rgba(0, 0, 0, 0.32);

  opacity: 0;

  pointer-events: none;

  transform: translate(-50%, 26px) scale(calc(0.22 * var(--cvp-panel-scale, 1)));

  transform-origin: 50% 100%;

  filter: blur(12px);

  transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05), filter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);

  z-index: 30;

}

.chat-voice-panel.active {

  opacity: 1;

  pointer-events: auto;

  transform: translate(-50%, 0) scale(var(--cvp-panel-scale, 1));

  filter: blur(0);

}

.chat-voice-panel>* {

  opacity: 0;

  transform: translateY(10px) scale(0.96);

  transition: opacity 0.28s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);

}

.chat-voice-panel.active>* {

  opacity: 1;

  transform: translateY(0) scale(1);

}

.chat-voice-panel-ai {

  --vp-s: 172px;

  --vp-p: calc(var(--vp-s) / 4);

  width: var(--vp-s);

  aspect-ratio: 1;

  padding: var(--vp-p);

  display: grid;

  place-items: center;

  position: relative;

  margin-top: -10px;

  animation: none;

  isolation: isolate;

}

.chat-voice-ai-particles {

  position: absolute;

  inset: 8px;

  pointer-events: none;

  z-index: 0;

}

.chat-voice-ai-particle {

  position: absolute;

  width: calc(8px + (var(--cvp-voice) * 10px));

  height: calc(8px + (var(--cvp-voice) * 10px));

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(255, 193, 244, 0.75) 42%, rgba(181, 124, 255, 0.2) 70%, transparent 100%);

  box-shadow: 0 0 calc(10px + (var(--cvp-voice) * 16px)) rgba(215, 160, 255, 0.5);

  opacity: calc(0.34 + (var(--cvp-voice) * 0.44));

}

.chat-voice-ai-particle--1 {
  top: 20%;
  left: 18%;
  animation: cvpParticleFloat1 5.6s ease-in-out infinite;
}

.chat-voice-ai-particle--2 {
  top: 18%;
  right: 16%;
  animation: cvpParticleFloat2 6.2s ease-in-out infinite;
}

.chat-voice-ai-particle--3 {
  bottom: 16%;
  left: 20%;
  animation: cvpParticleFloat3 5s ease-in-out infinite;
}

.chat-voice-ai-particle--4 {
  right: 18%;
  bottom: 20%;
  animation: cvpParticleFloat4 6.6s ease-in-out infinite;
}

.chat-voice-panel-ai::before,

.chat-voice-panel-ai::after {

  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 52%;
  height: 52%;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.92);

  box-shadow:
    0 0 calc(20px + (var(--cvp-voice) * 42px)) rgba(255, 189, 245, calc(0.28 + (var(--cvp-voice) * 0.44))),
    0 0 calc(34px + (var(--cvp-voice) * 56px)) rgba(153, 126, 255, calc(0.18 + (var(--cvp-voice) * 0.4)));

  filter: blur(4px);

  opacity: calc(0.38 + (var(--cvp-voice) * 0.34));

  transform: translate(-50%, -50%);

  animation: none;

  transition: box-shadow 180ms linear, opacity 180ms linear;

}

.chat-voice-panel-ai::after {
  animation: none;
}

.chat-voice-ai-sphere {

  overflow: hidden;

  background: radial-gradient(circle at 35% 30%, #f8f1ff 0%, #d7b7ff 24%, #a87eff 58%, #6b51db 100%);

  width: 100%;

  border-radius: 50%;

  aspect-ratio: 1;

  position: relative;

  display: grid;

  place-items: center;

  z-index: 1;

  transform: scale(calc(1 + (var(--cvp-voice) * 0.12)));

  box-shadow:
    0 0 calc(20px + (var(--cvp-voice) * 36px)) rgba(231, 199, 255, calc(0.28 + (var(--cvp-voice) * 0.42))),
    0 0 calc(42px + (var(--cvp-voice) * 62px)) rgba(184, 107, 255, calc(0.22 + (var(--cvp-voice) * 0.38))),
    inset 0 6px 18px rgba(255, 255, 255, 0.34),
    inset 0 -18px 24px rgba(73, 32, 135, 0.3);

  transition: transform 120ms linear, box-shadow 120ms linear, filter 120ms linear;

}

.chat-voice-ai-c {

  position: absolute;

  width: 188px;

  aspect-ratio: 1;

  border-radius: 50%;

}

.chat-voice-ai-c1 {
  background: radial-gradient(50% 50% at center, #c979ee, #74bcd6);
  width: 132px;
  animation: cvpAi1 5.5s linear infinite;
}

.chat-voice-ai-c2 {
  background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb);
  width: 74px;
  animation: cvpAi2 6s linear infinite;
}

.chat-voice-ai-c3 {
  background: radial-gradient(50% 50% at center, #eb7fc6, transparent);
  width: 102px;
  opacity: 0.56;
  animation: cvpAi3 4.8s linear infinite;
}

.chat-voice-ai-c4 {
  background: #6d67c8;
  animation: cvpAi4 5.2s linear infinite;
}

.chat-voice-ai-rings {

  aspect-ratio: 1;

  border-radius: 50%;

  position: absolute;

  inset: 0;

  perspective: 11rem;

  opacity: 0.5;

}

.chat-voice-ai-rings::before,

.chat-voice-ai-rings::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50%;

  border: 5px solid transparent;

  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);

  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,140,226,0.88), rgba(142,105,255,0.92), rgba(255,244,184,0.84)) border-box;

  mask-composite: exclude;

}

.chat-voice-ai-rings::before {
  animation: cvpRing180 10s ease-in-out infinite;
}

.chat-voice-ai-rings::after {
  animation: cvpRing90 10s ease-in-out infinite;
}

.chat-voice-ai-glass {

  overflow: hidden;

  position: absolute;

  inset: calc(var(--vp-p) - 3px);

  border-radius: 50%;

  backdrop-filter: blur(12px);

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.1),
    0 24px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  background:
    radial-gradient(72px at 68% 28%, rgba(255, 255, 255, 0.82), transparent 58%),
    radial-gradient(70px at 34% 78%, rgba(255, 184, 238, 0.22), transparent 60%);

}


.chat-voice-panel-timer {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: -18px;
  margin-bottom: 2px;
  line-height: 1;
}

.chat-voice-panel-info {
  text-align: center;
  margin-top: -6px;
  width: 100%;
}

.tg-voice-speed {
  width: 50px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
  line-height: 1;
}

.tg-voice-speed:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

.message-bubble.incoming .tg-voice-speed {
  border-color: rgba(var(--accent-rgb), 0.3);
}

.message-bubble.outgoing .tg-voice-speed {
  border-color: rgba(255, 255, 255, 0.24);
}

.chat-voice-panel-title {

  position: static;

  width: 100%;

  text-align: center;

  font-size: 16px;

  font-weight: 800;

  color: rgba(255, 255, 255, 0.92);

  letter-spacing: 0.02em;

  line-height: 1.15;

  margin: 0;

}

.chat-voice-panel-subtitle {

  display: block;

  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.52);

  font-size: clamp(10px, 2.8vw, 12px);

  line-height: 1.35;

  letter-spacing: 0.02em;

  max-width: 100%;

  padding: 0 4px;

  text-align: center;

  overflow-wrap: anywhere;

}

.chat-voice-panel-actions {

  position: static;

  display: flex;

  justify-content: center;

  width: 100%;

  max-width: min(252px, 100%);

  gap: clamp(6px, 2vw, 12px);

  margin-top: auto;

  padding: 6px 0 0;

  align-self: center;

  box-sizing: border-box;

}

.chat-voice-panel-btn {

  height: clamp(34px, 8vw, 38px);

  min-width: 0;

  flex: 1 1 0;

  max-width: 118px;

  padding: 0 clamp(10px, 3vw, 18px);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 14px;

  background: linear-gradient(180deg, #2f3036 0%, #1e1f24 100%);

  color: #fff;

  font-weight: 800;

  font-size: 12px;

  cursor: pointer;

  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 14px rgba(0, 0, 0, 0.24);

  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, filter 0.2s;

}

.chat-voice-panel-btn:hover {
  transform: translateY(-2px);

  filter: brightness(1.04);
}

.chat-voice-panel-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -5px 10px rgba(0, 0, 0, 0.22);
}

.chat-voice-panel-btn-cancel {
  background: linear-gradient(135deg, #ef4444 0%, #c62828 100%);
  border-color: rgba(239, 68, 68, 0.48);
  box-shadow:
    0 10px 22px rgba(239, 68, 68, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 14px rgba(90, 8, 8, 0.26);
}

.chat-voice-panel-btn-cancel:hover {
  box-shadow:
    0 14px 28px rgba(239, 68, 68, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -8px 14px rgba(90, 8, 8, 0.26);
}

.chat-voice-panel-btn-send {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-fg);
  box-shadow:
    0 10px 22px rgba(var(--accent-rgb), 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -8px 14px rgba(49, 18, 97, 0.28);
}

.chat-voice-panel-btn-send:hover {
  box-shadow:
    0 14px 28px rgba(var(--accent-rgb), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 14px rgba(49, 18, 97, 0.28);
}


/* CEP VD settings + template picker: flatter buttons, compact picker */
html.is-cep #vdPanel #vdSettingsOverlay {
  padding: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.is-cep #vdPanel #vdSettingsOverlay .ff-settings-card {
  width: min(340px, calc(100% - 14px)) !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

html.is-cep #vdPanel #vdSettingsOverlay .kzn-3d-action-btn,
html.is-cep #vdPanel #vdSettingsOverlay .btn-action.kzn-3d-action-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

html.is-cep #vdPanel #vdSettingsOverlay .kzn-3d-action-btn--accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  color: var(--accent-fg) !important;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2) !important;
}

html.is-cep #vdPanel #vdSettingsOverlay .kzn-3d-action-btn--danger {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.34) !important;
  box-shadow: none !important;
}

html.is-cep #vdPanel .vd-template-modal {
  padding: 10px !important;
}

html.is-cep #vdPanel .vd-template-picker-card {
  width: min(292px, calc(100% - 14px)) !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

html.is-cep #vdPanel .vd-template-picker-head .vd-template-modal-title {
  font-size: 14px !important;
}

html.is-cep #vdPanel .vd-template-picker-head .vd-template-modal-sub {
  font-size: 10px !important;
}

html.is-cep #vdPanel .vd-template-picker-list {
  gap: 6px !important;
  margin-top: 10px !important;
  max-height: min(42vh, 240px) !important;
}

html.is-cep #vdPanel .vd-template-picker-main {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

html.is-cep #vdPanel .vd-template-picker-item.is-active .vd-template-picker-main {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  color: var(--accent-fg) !important;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2) !important;
}

html.is-cep #vdPanel .vd-template-picker-item.is-active .vd-template-picker-name,
html.is-cep #vdPanel .vd-template-picker-item.is-active .vd-template-picker-meta {
  color: var(--accent-fg) !important;
  -webkit-text-fill-color: var(--accent-fg) !important;
}

html.is-cep #vdPanel .vd-template-picker-name {
  font-size: 12px !important;
}

html.is-cep #vdPanel .vd-template-picker-meta {
  font-size: 10px !important;
}

html.is-cep #vdPanel .vd-template-picker-add,
html.is-cep #vdPanel .vd-template-picker-delete {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html.is-cep #vdPanel .vd-template-modal-actions .kzn-3d-action-btn {
  box-shadow: none !important;
}

html.is-cep #vdPanel .vd-template-modal-actions .kzn-3d-action-btn--accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  color: var(--accent-fg) !important;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2) !important;
}

@keyframes chatVoiceRing {

  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }

}

@keyframes cvpWave {

  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    box-shadow: 0 0 50px rgba(234, 170, 255, 0.9);
  }

  35% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }

  70%,
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
    box-shadow: 0 0 50px rgba(234, 170, 255, 0.3);
  }

}

@keyframes cvpAi1 {
  0% {
    transform: rotate(0) translate(50%) scale(0.9);
    opacity: 0
  }

  25% {
    transform: rotate(90deg) translate(50%) scale(1.8);
    opacity: 1
  }

  50% {
    transform: rotate(180deg) translate(50%) scale(0.7);
    opacity: .4
  }

  75% {
    transform: rotate(270deg) translate(50%) scale(1.2);
    opacity: 1
  }

  100% {
    transform: rotate(360deg) translate(50%) scale(0.9);
    opacity: 0
  }
}

@keyframes cvpAi2 {
  0% {
    transform: rotate(90deg) translate(50%) scale(0.5)
  }

  25% {
    transform: rotate(180deg) translate(50%) scale(1.7);
    opacity: 0
  }

  50% {
    transform: rotate(270deg) translate(50%) scale(1);
    opacity: 0
  }

  75% {
    transform: rotate(360deg) translate(50%) scale(0.8);
    opacity: 0
  }

  100% {
    transform: rotate(450deg) translate(50%) scale(0.5);
    opacity: 1
  }
}

@keyframes cvpAi3 {
  0% {
    transform: rotate(180deg) translate(50%) scale(0.8);
    opacity: .8
  }

  25% {
    transform: rotate(270deg) translate(50%) scale(1.5)
  }

  50% {
    transform: rotate(360deg) translate(50%) scale(0.6);
    opacity: .4
  }

  75% {
    transform: rotate(450deg) translate(50%) scale(1.3);
    opacity: .7
  }

  100% {
    transform: rotate(540deg) translate(50%) scale(0.8);
    opacity: .8
  }
}

@keyframes cvpAi4 {
  0% {
    transform: rotate(270deg) translate(50%) scale(1);
    opacity: 1
  }

  25% {
    transform: rotate(360deg) translate(50%) scale(0.7)
  }

  50% {
    transform: rotate(450deg) translate(50%) scale(1.6);
    opacity: .5
  }

  75% {
    transform: rotate(540deg) translate(50%) scale(0.9);
    opacity: .8
  }

  100% {
    transform: rotate(630deg) translate(50%) scale(1);
    opacity: 1
  }
}

@keyframes cvpRing180 {
  0% {
    transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg)
  }

  25% {
    transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg)
  }

  50% {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)
  }

  80% {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)
  }

  100% {
    transform: rotateY(540deg) rotateX(540deg) rotateZ(540deg)
  }
}

@keyframes cvpRing90 {
  0% {
    transform: rotateY(90deg) rotateX(90deg) rotateZ(90deg)
  }

  25% {
    transform: rotateY(90deg) rotateX(90deg) rotateZ(90deg) scale(1.1)
  }

  50% {
    transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg)
  }

  75% {
    transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg)
  }

  100% {
    transform: rotateY(450deg) rotateX(450deg) rotateZ(450deg)
  }
}

@keyframes cvpParticleFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.86); }
  50% { transform: translate3d(10px, -14px, 0) scale(1.18); }
}

@keyframes cvpParticleFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-12px, 10px, 0) scale(0.8); }
}

@keyframes cvpParticleFloat3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); }
  50% { transform: translate3d(8px, -10px, 0) scale(1.12); }
}

@keyframes cvpParticleFloat4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.78); }
  50% { transform: translate3d(-10px, -12px, 0) scale(1.16); }
}

@keyframes cvpCirclePulse {
  0% {
    transform: scale(0.97)
  }

  15% {
    transform: scale(1)
  }

  30% {
    transform: scale(0.98)
  }

  45% {
    transform: scale(1)
  }

  60% {
    transform: scale(0.97)
  }

  85% {
    transform: scale(1)
  }

  100% {
    transform: scale(0.97)
  }
}

@keyframes cvpTextLight {
  0% {
    background-position: 0px
  }

  100% {
    background-position: 900px
  }
}

@keyframes chatVoiceBars {

  0%,
  100% {
    transform: scaleY(0.65);
  }

  50% {
    transform: scaleY(1.1);
  }

}


/* [РР—РњР•РќР•РќРћ] РЎС‚РёР»Рё РґР»СЏ РјРѕРґР°Р»СЊРЅРѕРіРѕ РѕРєРЅР° РЅРѕРІРѕРіРѕ СЃРѕРѕР±С‰РµРЅРёСЏ (С‚РµРїРµСЂСЊ СЌС‚Рѕ РѕРІРµСЂР»РµР№) */

.new-message-modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.7);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 1042;

}


.new-message-modal-overlay.active {

  display: flex;

}


.new-message-modal-content {

  background: #18181b;

  color: #fff;

  border-radius: 12px;

  width: 90%;

  max-width: 450px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);

  display: flex;

  flex-direction: column;

  border: 1px solid #333;

}


.new-message-modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 20px;

  border-bottom: 1px solid #333;

}


.new-message-modal-header h2 {

  margin: 0;

  font-size: 18px;

}


.new-message-modal-header .close-btn {

  font-size: 28px;

  background: none;

  border: none;

  color: #888;

  cursor: pointer;

}


.new-message-modal-body {

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 15px;

}


.new-message-modal-body .form-group {

  display: flex;

  flex-direction: column;

}


.new-message-modal-body label {

  margin-bottom: 5px;

  font-size: 14px;

  color: #aaa;

}


.new-message-modal-body input,

.new-message-modal-body textarea {

  background: #222;

  border: 1px solid #444;

  color: #fff;

  border-radius: 6px;

  padding: 10px;

  font-size: 16px;

  width: 100%;

  box-sizing: border-box;

}


.new-message-modal-body textarea {

  resize: vertical;

}


.new-message-modal-footer {

  padding: 15px 20px;

  border-top: 1px solid #333;

  display: flex;

  justify-content: flex-end;

}


.send-message-btn {

  background-color: var(--accent, #a85cff);

  color: var(--accent-fg);

  border: none;

  padding: 10px 20px;

  border-radius: 8px;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.2s, color 0.2s;

}


.send-message-btn:hover {

  background-color: #8e4de6;

}


.new-message-modal {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #0C0A09;

  z-index: 10;

  display: flex;

  flex-direction: column;

  transform: translateX(100%);

  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

}


.new-message-modal.active {

  transform: translateX(0);

}


.new-message-header {

  display: flex;

  align-items: center;

  padding: 15px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  flex-shrink: 0;

}


.new-message-header h3 {

  margin: 0;

  flex-grow: 1;

  text-align: center;

}


.back-btn {

  background: none;

  border: none;

  color: #fff;

  font-size: 24px;

  cursor: pointer;

  opacity: 0.7;

}


.back-btn:hover {

  opacity: 1;

}


.new-message-body {

  display: flex;

  flex-direction: column;

  padding: 15px;

  flex-grow: 1;

  gap: 15px;

}


.recipient-search-group {

  display: flex;

  align-items: center;

  gap: 10px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 10px;

}


.recipient-search-group label {

  font-weight: 600;

}


.recipient-search-group input {

  flex-grow: 1;

  background: none;

  border: none;

  color: #fff;

  font-size: 16px;

}


.recipient-search-group input:focus {

  outline: none;

}


.search-results-container {

  flex-shrink: 0;

  max-height: 200px;

  overflow-y: auto;

}


.search-result-item {

  padding: 10px;

  cursor: pointer;

  border-radius: 8px;

}


.search-result-item:hover {

  background: rgba(255, 255, 255, 0.1);

}


.new-message-composer {

  margin-top: auto;

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.new-message-composer textarea {

  width: 100%;

  height: 100px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  resize: none;

}


.new-message-actions {

  display: flex;

  gap: 15px;

}


.new-message-actions button {

  background: none;

  border: none;

  cursor: pointer;

  opacity: 0.7;

}


.new-message-actions button:hover {

  opacity: 1;

}


.new-message-actions button img {

  width: 22px;

  height: 22px;

}


/* PLAYER */

/* === 5. РљРћРќРўР•РљРЎРўРќРћР• РњР•РќР® (РџРљРњ) === */

.custom-context-menu {

  position: fixed;

  z-index: 1052;

  background: #1c1c1c;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 8px;

  padding: 5px 0;

  display: none;

  flex-direction: column;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  min-width: 120px;

}


.context-menu-item {

  padding: 8px 15px;

  color: #fff;

  font-size: 13px;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 8px;

  transition: background 0.2s;

}


.context-menu-item:hover {

  background: var(--accent);

}


/* === 6. РњРћР”РђР›РљРђ РЎРћР—Р”РђРќРРЇ Р“Р РЈРџРџР« === */

.create-group-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #0C0A09;

  z-index: 1042;

  display: none;

  flex-direction: column;

  transform: translateY(100%);

  pointer-events: none;

}


.create-group-modal.active {

  display: flex;

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}

/* Profile modal: half-screen on right in browser, fullscreen in CEP */
#userProfileModal.active {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 50vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

html.is-cep #userProfileModal.active {
  left: 0 !important;
  width: 100% !important;
}


.group-users-list {

  flex-grow: 1;

  overflow-y: auto;

  padding: 15px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.user-select-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px;

  background: #1c1c1c;

  border-radius: 8px;

  cursor: pointer;

  border: 1px solid transparent;

}


.user-select-item.selected {

  border-color: var(--accent);

  background: rgba(var(--accent-rgb), 0.1);

}


.checkbox-circle {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 2px solid #555;

  display: flex;

  align-items: center;

  justify-content: center;

}


.user-select-item.selected .checkbox-circle {

  border-color: var(--accent);

  background: var(--accent);

}


/* [FIX] Р’РѕР·РІСЂР°С‰Р°РµРј Р°РЅРёРјР°С†РёСЋ "OPEN1" (РїР»Р°РІРЅРѕРµ РїРѕСЏРІР»РµРЅРёРµ) */

.story-viewer {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #000;

  z-index: 20000;

  display: flex;

  flex-direction: column;


  /* РќР°С‡Р°Р»СЊРЅРѕРµ СЃРѕСЃС‚РѕСЏРЅРёРµ: РїР»РµРµСЂ РїСЂРѕР·СЂР°С‡РµРЅ Рё РЅРµРјРЅРѕРіРѕ СѓРІРµР»РёС‡РµРЅ */

  opacity: 0;

  transform: scale(1.05);

  pointer-events: none;


  /* РЎР°РјР° Р°РЅРёРјР°С†РёСЏ: РїР»Р°РІРЅРѕ РјРµРЅСЏРµРј РїСЂРѕР·СЂР°С‡РЅРѕСЃС‚СЊ Рё С„РѕСЂРјСѓ */

  transition: opacity 0.3s ease, transform 0.3s ease;

}


.story-viewer.active {

  /* РљРѕРЅРµС‡РЅРѕРµ СЃРѕСЃС‚РѕСЏРЅРёРµ: РїР»РµРµСЂ СЂР°СЃРєСЂС‹С‚ РЅР° РІРµСЃСЊ СЌРєСЂР°РЅ */

  opacity: 1;

  transform: scale(1);

  pointer-events: all;

}


#storyVideo,

#storyImage {

  width: 100%;

  height: 100%;

  object-fit: contain;

  position: absolute;

  top: 0;

  left: 0;

}


.story-bars-container {

  position: absolute;

  top: 10px;

  left: 10px;

  right: 10px;

  display: flex;

  gap: 4px;

  height: 2px;

  z-index: 310;

}


.bar-segment {

  flex: 1;

  background: rgba(255, 255, 255, 0.3);

  border-radius: 2px;

  overflow: hidden;

}


.bar-segment .fill {

  height: 100%;

  background: #fff;

  width: 0%;

}

/* Instagram-style: per-user segment вЂ” completed users are fully white, active user animates, future users are dim */
.bar-segment-user {
  background: rgba(255, 255, 255, 0.25);
}

.bar-segment-user.bar-segment-user-active {
  background: rgba(255, 255, 255, 0.25);
}

.bar-segment-user.bar-segment-user-done .fill {
  width: 100% !important;
  transition: none;
}


.story-header-overlay {

  position: absolute;

  top: 20px;

  left: 15px;

  right: 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 310;

}


.story-author {

  display: flex;

  align-items: center;

  gap: 8px;

}


.story-author img {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.2);

}


.story-author span {

  font-weight: 600;

  font-size: 14px;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

}


/* Volume вЂ” controls.html style dropdown */

.story-header-overlay .vol-wrap {
  position: absolute;
  top: 56px;
  left: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 320;
  margin-left: 0;
}

.story-header-overlay .vol-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  cursor: pointer;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s, transform 0.15s;
}

.story-header-overlay .vol-icon:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.04);
}

.story-header-overlay .vol-icon svg {
  fill: #ccc;
  transition: fill 0.15s;
}

.story-header-overlay .vol-icon:hover svg {
  fill: #fff;
}

.story-header-overlay .vol-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 130px;
  /* extra bottom padding so there is room for the percent label */
  padding: 10px 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* center the slider vertically inside the pill */
  justify-content: center;
  background: rgba(18, 18, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 330;
  overflow: hidden;
}

.story-header-overlay .vol-dropdown.visible {
  opacity: 1;
  pointer-events: auto;
}

/* In story viewer, keep the 0вЂ“100% label pinned to the bottom of the pill */
.story-header-overlay #volumePercent {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #aaa;
  line-height: 1;
}

.story-header-overlay .vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  transform: rotate(-90deg);
  margin: 0;
  flex-shrink: 0;
}

.story-header-overlay .vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4fc3f7;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(79, 195, 247, 0.6);
}

.story-header-overlay .vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4fc3f7;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(79, 195, 247, 0.6);
}


/* "time ago" label in Stories header */

.story-author .story-age {

  margin-left: 10px;

  font-size: 13px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.70);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);

}


.tap-layer {

  position: absolute;

  top: 60px;

  bottom: 60px;

  left: 0;

  right: 0;

  z-index: 305;

  display: flex;

}


.tap-left {

  width: 25%;

  height: 100%;

}


.tap-center {

  width: 50%;

  height: 100%;

  cursor: pointer;

}


.tap-right {

  width: 25%;

  height: 100%;

}


/* ICONS RED */

.action-icon {

  width: 28px;

  height: 28px;

  object-fit: contain;

  transition: transform 0.2s;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

}


.action-icon:hover {

  transform: scale(1.15);

}


.action-icon:active {

  transform: scale(0.9);

}


.sidebar-item.liked .action-icon,

.insta-icon-btn.liked .action-icon {

  filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(7471%) hue-rotate(4deg) brightness(103%) contrast(108%) drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));

  transform: scale(1.1);

}


.tiktok-sidebar {

  position: absolute;

  right: 15px;

  bottom: 120px;

  z-index: 310;

  display: flex;

  flex-direction: column;

  gap: 20px;

}


.sidebar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  cursor: pointer;

}


.sidebar-item .count {

  font-size: 13px;

  font-weight: 600;

  text-shadow: 0 1px 2px black;

}


.insta-footer {

  position: absolute;

  bottom: 20px;

  right: 20px;

  z-index: 310;

  display: flex;

  align-items: center;

  gap: 20px;

}


.insta-likes-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}


.insta-icon-btn {

  background: none;

  border: none;

  cursor: pointer;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}


.insta-like-count {

  font-size: 13px;

  font-weight: 600;

  color: #fff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

  min-width: 10px;

  text-align: center;

}


.footer-icon {

  width: 30px;

  height: 30px;

}


/* iOS-like footer buttons (Stories viewer) */

.insta-footer .insta-icon-btn {

  width: 46px;

  height: 46px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}


.insta-footer .insta-icon-btn:hover {

  background: rgba(var(--accent-rgb), 0.85);

  box-shadow: 0 20px 55px rgba(var(--accent-rgb), 0.22), 0 16px 40px rgba(0, 0, 0, 0.38);

  transform: scale(1.04);

}


.insta-footer .insta-icon-btn:active {

  transform: scale(0.92);

}


/* Avoid double-scaling from .action-icon:hover; scale icons only via the button hover */

.insta-footer .action-icon:hover,

.insta-footer .action-icon:active {

  transform: none;

}


.insta-footer .insta-icon-btn:hover .action-icon {

  transform: scale(1.06);

}


.insta-footer .insta-icon-btn:active .action-icon {

  transform: scale(0.94);

}


/* COMMENTS */

.comments-drawer {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 60%;

  background: rgba(24, 24, 26, 0.97);

  z-index: 400;

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

  transform: translateY(100%);

  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;

  flex-direction: column;

  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}


.comments-drawer.active {

  transform: translateY(0);

}


.comments-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  font-weight: 700;

  font-size: 15px;

  letter-spacing: 0.2px;

}


.comments-header button {

  background: none;

  border: none;

  color: #fff;

  font-size: 24px;

  cursor: pointer;

}


.comments-list {

  flex-grow: 1;

  overflow-y: auto;

  padding: 15px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.recent-stickers {

  padding: 10px 15px 0;

  display: flex;

  gap: 10px;

  overflow-x: auto;

}


.recent-sticker-item {

  width: 40px;

  height: 40px;

  object-fit: contain;

  border-radius: 5px;

  cursor: pointer;

  border: 1px solid #333;

}


.comment-item {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  padding: 4px 0;

  transition: background 0.15s;

}


.comment-avatar {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.08);

}


.comment-content {

  display: flex;

  flex-direction: column;

  background: rgba(255, 255, 255, 0.06);

  padding: 8px 14px;

  border-radius: 16px;

  border-top-left-radius: 4px;

  max-width: 80%;

}


.comment-user {

  font-size: 12px;

  font-weight: 700;

  color: var(--accent);

  margin-bottom: 3px;

}


.comment-text {

  font-size: 14px;

  word-break: break-word;

}


.comment-sticker {

  max-width: 120px;

  border-radius: 8px;

  margin-top: 5px;

}


.comments-input-area {

  padding: 10px 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(20, 20, 22, 0.98);

}


.sticker-btn {

  font-size: 24px;

  background: none;

  border: none;

  cursor: pointer;

  color: #fff;

}


#commentInput {

  flex-grow: 1;

  height: 38px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  padding: 0 16px;

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-size: 14px;

  outline: none;

  transition: border-color 0.2s, background 0.2s;

}

#commentInput:focus {

  border-color: var(--accent);

  background: rgba(255, 255, 255, 0.09);

}


.send-comment-btn {

  font-size: 20px;

  color: var(--accent);

  background: none;

  border: none;

  cursor: pointer;

  transition: transform 0.15s, color 0.15s;

}

.send-comment-btn:hover {

  color: #c084fc;

  transform: scale(1.15);

}


#reactionContainer {

  position: absolute;

  bottom: 100px;

  right: 20px;

  z-index: 320;

  pointer-events: none;

}


.flying-emoji {

  position: absolute;

  bottom: 0;

  font-size: 40px;

  animation: flyUp 1.5s ease-out forwards;

}


@keyframes flyUp {

  0% {

    transform: translateY(0) scale(1);

    opacity: 1;

  }


  100% {

    transform: translateY(-250px) scale(1.5);

    opacity: 0;

  }

}


/* ========================================================= */

/* === [EMERGENCY FIX] Р‘Р•Р—РћРџРђРЎРќРћРЎРўР¬ РљР›РРљРћР’ === */

/* ========================================================= */


/* РЈР±РµР¶РґР°РµРјСЃСЏ, С‡С‚Рѕ СЃРєСЂС‹С‚С‹Рµ РїР°РЅРµР»Рё СЂРµР°Р»СЊРЅРѕ РїСЂРѕРїСѓСЃРєР°СЋС‚ РєР»РёРєРё */

.settings-panel:not(.active),

.ai-panel:not(.active),

.vd-panel:not(.active),

.shame-overlay:not(.active),

.story-viewer:not(.active) {

  pointer-events: none !important;

  opacity: 0 !important;

  z-index: -1 !important;

  /* РЈР±РёСЂР°РµРј РЅР°Р·Р°Рґ */

}


/* Р’РѕР·РІСЂР°С‰Р°РµРј РєР»РёРєРё РєРѕРЅС‚РµРЅС‚Сѓ */

.content,

.tabs,

.top-right-icons {

  pointer-events: auto !important;

  z-index: 50 !important;

  /* РџРѕРґРЅРёРјР°РµРј РєРЅРѕРїРєРё */

}

body.profile-view .bottom-right-controls,

body.profile-view .bottom-left-controls {

  pointer-events: auto !important;

  z-index: 50 !important;

}


/* ========================================================= */

/* === PANEL OVERLAY === */

/* ========================================================= */


.admin-panel {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  /* Deep glass background */

  background: rgba(8, 7, 6, 0.97);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  z-index: 1040 !important;

  display: none;

  flex-direction: column;

  overflow: hidden;

  pointer-events: none;

}


.admin-panel-scroll {

  height: 100%;

  overflow-y: auto;

  overflow-x: hidden;

  display: flex;

  flex-direction: column;

}

.admin-panel.active {

  display: flex;

  opacity: 1;

  transform: scale(1);

  pointer-events: auto;

}


.admin-top-shell {

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 10px 14px 8px;

  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.16), transparent 42%),
    linear-gradient(180deg, rgba(18, 18, 22, 0.98) 0%, rgba(10, 10, 13, 0.96) 100%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);

  transition: padding 0.24s ease, gap 0.24s ease, box-shadow 0.24s ease;

}


.admin-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding: 12px 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 22px;

  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);

  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 18px rgba(0, 0, 0, 0.18);

  transition: padding 0.24s ease, border-radius 0.24s ease, box-shadow 0.24s ease;

}


.admin-header-copy {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;

}


.admin-title {

  font-size: 20px;

  font-weight: 700;

  letter-spacing: -0.4px;

  /* Gradient Text */

  background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  margin: 0;

  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  transition: font-size 0.24s ease, letter-spacing 0.24s ease;

}


.admin-header-sub {

  font-size: 11px;

  line-height: 1.35;

  color: rgba(255, 255, 255, 0.58);

  letter-spacing: 0.28px;

  transition: opacity 0.2s ease, max-height 0.2s ease, transform 0.2s ease;

}


.admin-menu-strip {

  overflow: hidden;

}


/* MENU BUTTONS GRID */

.admin-menu-buttons {

  display: flex;

  align-items: stretch;

  gap: 8px;

  padding: 1px 0 4px;

  overflow-x: auto;

  overflow-y: hidden;

  scrollbar-width: none;

}


.admin-menu-buttons::-webkit-scrollbar {

  display: none;

}


.admin-menu-btn {

  display: flex;

  flex-direction: row;

  /* Horizontal */

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  flex: 0 0 auto;

  padding: 9px 13px;

  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  cursor: pointer;

  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.2s ease, border-color 0.2s ease;

  position: relative;

  overflow: hidden;

  min-height: 42px;

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -9px 16px rgba(0, 0, 0, 0.2);

}


.btn-icon-bg {

  width: 32px;

  height: 32px;

  border-radius: 10px;

  background: linear-gradient(180deg, rgba(56, 56, 62, 0.96) 0%, rgba(35, 35, 39, 0.96) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -6px 12px rgba(0, 0, 0, 0.18);

  transition: all 0.3s ease;

}


.btn-icon-bg svg {

  width: 18px;

  height: 18px;

}


.admin-menu-label {

  font-size: 12px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.76);

  letter-spacing: 0.3px;

  white-space: nowrap;

}


.admin-menu-btn:hover {

  transform: translateY(-2px);

  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 18px rgba(0, 0, 0, 0.22);

}


.admin-menu-btn.active {

  background: linear-gradient(180deg, #a85cff 0%, #7e3bd4 100%);

  border-color: rgba(255, 255, 255, 0.14);

  box-shadow:
    0 16px 28px rgba(88, 36, 152, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -10px 18px rgba(62, 18, 116, 0.28);

}


.admin-menu-btn.active .btn-icon-bg {

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.1) 100%);

  color: #fff;

  box-shadow:
    0 10px 18px rgba(55, 16, 108, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -6px 12px rgba(0, 0, 0, 0.18);

}


.admin-menu-btn.active .admin-menu-label {

  color: #fff;

}


/* SECTIONS & CARDS */

.admin-menu-section {

  display: none;

  flex: 0 0 auto;

  overflow: visible;

  padding: 10px 14px 14px;

}


.admin-menu-section.active {

  display: flex;

  flex-direction: column;

  animation: fadeIn 0.4s ease;

  gap: 16px;

}


.admin-section {

  background: linear-gradient(180deg, rgba(26, 26, 31, 0.98) 0%, rgba(18, 18, 22, 0.98) 100%);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(20px);

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 16px;

  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  margin-bottom: 0;

  /* Handled by gap in container */

}


.admin-panel--compact .admin-top-shell {

  gap: 6px;

  padding-top: 6px;

  padding-bottom: 6px;

  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);

}


.admin-panel--compact .admin-header {

  padding: 10px 12px;

  border-radius: 18px;

}


.admin-panel--compact .admin-title {

  font-size: 17px;

  letter-spacing: -0.2px;

}


.admin-panel--compact .admin-header-sub {

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transform: translateY(-4px);

}


.admin-panel--compact .admin-menu-btn {

  min-height: 38px;

  padding: 7px 11px;

}


.admin-panel--compact .btn-icon-bg {

  width: 28px;

  height: 28px;

  border-radius: 9px;

}


.admin-panel--shell-hidden .admin-top-shell {

  max-height: 0;

  padding-top: 0;

  padding-bottom: 0;

  opacity: 0;

  transform: translateY(-18px);

  border-bottom-color: transparent;

  box-shadow: none;

}


.admin-section-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 16px;

  height: 16px;

  margin-right: 6px;

  vertical-align: -2px;

}


.admin-section-title {

  font-size: 19px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 4px 0;

  display: flex;

  align-items: center;

  gap: 10px;

}


.ios-icon-small {

  color: var(--accent);

  display: flex;

  align-items: center;

}


.admin-section-sub {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.4);

  margin-bottom: 20px;

}


/* FORM ELEMENTS (iOS Style) */

.form-group {

  margin-bottom: 20px;

}


.form-group:last-child {

  margin-bottom: 0;

}


.form-group label {

  display: block;

  font-size: 13px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 8px;

  margin-left: 4px;

  /* Align with input text visually */

}


.ios-input,

.ios-select {

  width: 100%;

  padding: 14px 16px;

  font-size: 16px;

  /* 16px prevents zoom on iOS */

  background: rgba(0, 0, 0, 0.2);

  border: 0.5px solid rgba(255, 255, 255, 0.1);

  border-radius: 14px;

  color: #fff;

  outline: none;

  transition: border-color 0.2s, background 0.2s;

}


.ios-input:focus,

.ios-select:focus {

  border-color: var(--accent);

  background: rgba(0, 0, 0, 0.3);

}


/* File Input Customization */

.ios-file-input {

  display: none;

  /* Hidden real input */

}


.file-label {

  display: block;

  padding: 14px;

  text-align: center;

  background: rgba(255, 255, 255, 0.05);

  border: 1px dashed rgba(255, 255, 255, 0.2);

  border-radius: 14px;

  color: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  margin-bottom: 12px;

  transition: all 0.2s;

}


.file-label:hover {

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  border-color: rgba(255, 255, 255, 0.4);

}


/* LIST BOXES */

.ios-list-box {

  background: rgba(0, 0, 0, 0.2);

  border-radius: 14px;

  border: 0.5px solid rgba(255, 255, 255, 0.08);

  padding: 8px;

  overflow-y: auto;

  min-height: 60px;

  margin-bottom: 12px;

}


/* BUTTONS */

.admin-btn {

  border: none;

  border-radius: 14px;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  padding: 14px 20px;

  width: 100%;

  /* Full width by default in sections */

  transition: transform 0.1s, opacity 0.2s;

}


.admin-btn:active {

  transform: scale(0.98);

}


.ios-primary-btn {

  background: var(--accent);

  color: var(--accent-fg);

  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);

}


.ios-primary-btn:hover {

  background: var(--accent-light);

}


.ios-secondary-btn {

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

}


.ios-secondary-btn:hover {

  background: rgba(255, 255, 255, 0.15);

}


.ios-danger-btn {

  background: rgba(255, 59, 48, 0.15);

  color: #ff3b30;

}


.ios-danger-btn:hover {

  background: rgba(255, 59, 48, 0.25);

}


.pos-group {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}


/* USER ITEM STYLES - Premium List */

.ios-scroll-list {

  flex: 1;

  overflow-y: auto;

  margin: 0 -8px;

  /* Negative margin to alignment */

  padding: 0 8px;

}


.ios-empty-state {

  text-align: center;

  padding: 40px 20px;

  color: rgba(255, 255, 255, 0.3);

  font-style: italic;

}


.admin-user-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  margin-bottom: 8px;

  background: rgba(255, 255, 255, 0.03);

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

}


.admin-user-item:hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.08);

  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);

}


.admin-user-avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  object-fit: cover;

  background: #333;

}


.admin-user-info {

  flex: 1;

  min-width: 0;

}


.admin-user-nickname {

  font-size: 14px;

  font-weight: 600;

  color: #fff;

  margin-bottom: 2px;

}


.admin-user-login {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

}


.admin-user-actions {

  display: flex;

  gap: 6px;

  flex-wrap: wrap;

  justify-content: flex-end;

}

.admin-role-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  height: 34px;
}

.admin-role-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}


.ios-icon-only-btn {

  width: 34px;

  height: 34px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  color: #fff;

}


.ios-icon-only-btn:hover {

  background: rgba(255, 255, 255, 0.15);

  border-color: rgba(255, 255, 255, 0.14);

  transform: translateY(-1px) scale(1.03);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);

}

.admin-mini-action {
  height: 28px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.admin-mini-action:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
}

.admin-mini-action--premium {
  color: #ffcf5b;
  border-color: rgba(255, 185, 0, 0.22);
  background: rgba(255, 185, 0, 0.08);
}

.admin-mini-action--danger {
  color: #ff6b62;
  border-color: rgba(255, 69, 58, 0.22);
  background: rgba(255, 69, 58, 0.08);
}

@media (max-width: 900px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-menu-buttons {
    grid-template-columns: 1fr 1fr;
  }
}


/* Badges */

.admin-badge {

  display: inline-block;

  padding: 4px 8px;

  border-radius: 6px;

  font-size: 11px;

  font-weight: 600;

  margin-left: 8px;

}


.admin-badge.online {

  background: rgba(48, 209, 88, 0.2);

  color: #30d158;

}


.admin-badge.offline {

  background: rgba(255, 69, 58, 0.2);

  color: #ff453a;

}


.admin-badge.strecho {

  background: rgba(var(--accent-rgb), 0.2);

  color: #bf5af2;

}


/* ========================================================= */

/* === PROFILE GLOW BUTTONS === */

/* ========================================================= */

#btnAccountManagement,

#_mpBtn,

#btnSaveNickname {

  color: var(--accent-fg) !important;

  font-weight: 700;

  transition: all 0.2s ease;

  text-transform: none;

  letter-spacing: 0.2px;

  font-size: 14px;

  cursor: pointer;

}


#btnAccountManagement,

#_mpBtn {

  background: linear-gradient(180deg, rgba(39, 37, 46, 0.82), rgba(30, 29, 36, 0.88));

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 16px;

  padding: 0;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  width: 100%;

  margin-top: 0;

}


#btnSaveNickname {

  background: linear-gradient(180deg, rgba(39, 37, 46, 0.82), rgba(30, 29, 36, 0.88));

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 14px;

  margin-top: 0;

  margin-left: 0;

  padding: 0 24px;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Adjust padding because it is inline */

  width: auto;

  height: 40px;

  /* Set height to match input */

}


#btnAccountManagement:hover,

#_mpBtn:hover,

#btnSaveNickname:hover {

  transform: translateY(-3px) scale(1.02);

  border-color: rgba(255, 255, 255, 0.14);

}


#btnAccountManagement:hover,

#_mpBtn:hover,

#btnSaveNickname:hover {
  background: linear-gradient(180deg, rgba(46, 43, 54, 0.88), rgba(35, 33, 42, 0.92));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}


#btnAccountManagement:active,
#_mpBtn:active,
#btnSaveNickname:active {
  transform: translateY(0);
}


/* FF PANEL (Full screen window similar to AI Panel) */

.ff-panel {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100vw;

  bottom: 0;

  height: 100vh;

  z-index: 1010;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  background: rgb(12, 10, 9);

  -webkit-backdrop-filter: none;

  backdrop-filter: none;

  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  transform: translateY(20px);

}


.ff-panel.active {

  opacity: 1 !important;

  pointer-events: all !important;

  transform: translateY(0) !important;

}


.ff-header {

  height: 60px;

  padding: 0 var(--kzn-close-inset);

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}


.back-btn {

  background: none;

  border: none;

  color: var(--accent);

  font-size: 24px;

  cursor: pointer;

  padding: 0 10px;

  margin-right: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}


.back-btn:hover {

  transform: scale(1.2) translateX(-2px);

  text-shadow: 0 0 8px var(--accent);

}


.ff-title {

  color: #fff;

  font-size: 14px;

  font-weight: 800;

  margin: 0;

  flex: 1;

  text-align: center;

  letter-spacing: 1px;

  text-transform: uppercase;

  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  min-width: 0;

}


.ff-header-actions {

  display: flex;

  gap: 10px;

  flex-shrink: 0;

  z-index: 6;

}


.ff-gear-btn,

.ff-header .close-btn {

  width: 36px;

  height: 36px;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  border-radius: 12px;

  color: rgba(255, 255, 255, 0.9);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;

  backdrop-filter: blur(10px);

}


.ff-mini-menu-wrap {

  position: relative;

  flex-shrink: 0;

}


.ff-mini-menu-btn {

  width: 36px;

  height: 36px;

  border-radius: 999px;

  border: 1px solid rgba(255, 102, 102, 0.38);

  background: linear-gradient(180deg, rgba(120, 25, 25, 0.92) 0%, rgba(72, 14, 14, 0.96) 100%);

  color: rgba(255, 255, 255, 0.92);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;

  backdrop-filter: blur(10px);

  box-shadow: 0 10px 26px rgba(120, 22, 22, 0.34);

}


.ff-mini-menu-btn:hover {

  transform: scale(1.06);

  background: linear-gradient(180deg, rgba(142, 31, 31, 0.96) 0%, rgba(88, 18, 18, 0.98) 100%);

  border-color: rgba(255, 122, 122, 0.52);

}


.ff-mini-menu-btn:active {

  transform: scale(0.96);

}


.ff-mini-menu {

  position: absolute;

  top: calc(100% + 8px);

  left: 0;

  min-width: 220px;

  padding: 8px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: #0e0c0c;

  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);

  z-index: 12;

}


.ff-mini-menu-item {

  width: 100%;

  min-height: 36px;

  border: 0;

  border-radius: 10px;

  background: rgba(255, 88, 88, 0.12);

  color: #fff;

  text-align: left;

  padding: 9px 12px;

  cursor: pointer;

  font-size: 13px;

  font-weight: 700;

}


.ff-mini-menu-item:hover {

  background: rgba(255, 88, 88, 0.22);

}


.ff-gear-btn:hover,

.ff-header .close-btn:hover {

  transform: scale(1.06);

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.18);

}


.ff-gear-btn:active,

.ff-header .close-btn:active {

  transform: scale(0.96);

}


.ff-settings {

  position: absolute;

  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.35);

  z-index: 10002;

}


.ff-settings-card {

  width: min(520px, calc(100% - 24px));

  background: rgba(18, 16, 16, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

}


.ff-settings-title {

  font-weight: 900;

  color: #fff;

  font-size: 14px;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  margin-bottom: 12px;

}


.ff-selection-bar {

  position: absolute;

  left: 16px;

  right: 16px;

  bottom: 14px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  pointer-events: none;

  opacity: 0;

  transform: translateY(10px);

  transition: opacity 0.18s ease, transform 0.18s ease;

  z-index: 10003;

  padding: 8px 16px;

  border-radius: 22px;

}


.ff-selection-bar::before {

  content: '';

  position: absolute;

  left: -8px;

  right: -8px;

  bottom: -8px;

  top: -8px;

  border-radius: 22px;

  background: rgba(10, 8, 9, 0.72);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);

  pointer-events: none;

}


.ff-selection-bar>* {

  position: relative;

  z-index: 1;

}


.ff-selection-bar.active {

  pointer-events: all;

  opacity: 1;

  transform: translateY(0);

}


.ff-selection-bar.drag-over {

  pointer-events: all;

  opacity: 1;

}


.ff-import-btn {

  height: 44px;

  border-radius: 999px;

  border: 1px solid rgba(var(--accent-rgb), 0.35);

  background: rgba(var(--accent-rgb), 0.22);

  color: rgba(255, 255, 255, .96);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 0 16px;

  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;

  user-select: none;

  font-weight: 900;

  letter-spacing: 0.3px;

}


.ff-import-btn:hover {

  transform: translateY(-1px);

  background: rgba(var(--accent-rgb), 0.30);

  border-color: rgba(var(--accent-rgb), 0.55);

}


.ff-import-btn:active {

  transform: translateY(0) scale(0.985);

}


.ff-clear-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .14);

  background: rgba(255, 255, 255, .08);

  color: rgba(255, 255, 255, .92);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);

  transition: transform .12s ease, background .12s ease, border-color .12s ease;

  user-select: none;

  position: relative;

  backdrop-filter: blur(10px);

}


.ff-clear-btn:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, .12);

  border-color: rgba(255, 255, 255, .22);

}


.ff-clear-btn:active {

  transform: translateY(0) scale(0.985);

}


.ff-clear-btn::after {

  content: attr(data-count);

  position: absolute;

  right: -6px;

  top: -6px;

  min-width: 18px;

  height: 18px;

  padding: 0 6px;

  border-radius: 999px;

  background: rgba(var(--accent-rgb), 0.95);

  color: #fff;

  font-size: 11px;

  font-weight: 900;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, .18);

}


.ff-import-btn:disabled,

.ff-clear-btn:disabled {

  opacity: 0.6;

  cursor: not-allowed;

  transform: none;

}


.ff-selection-bar.drag-over .ff-import-btn {

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22), 0 18px 44px rgba(0, 0, 0, .42);

}


.ff-diag {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 2147483647;
  pointer-events: none;
}

.ff-diag.visible {
  display: flex;
}


.ff-diag-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 70, 70, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  cursor: default;
}

.ff-diag-dot .ff-diag-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(12, 13, 15, 0.96);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}

.ff-diag-dot:hover .ff-diag-tip {
  opacity: 1;
}


.ff-diag-dot[data-state="on"] {

  background: rgba(60, 220, 120, 0.95);

}


.ff-diag-dot[data-state="wait"] {

  background: rgba(255, 190, 60, 0.95);

}

.ff-diag-dot[data-state="warn"] {
  background: rgba(255, 190, 60, 0.95);
}


.ff-content {

  flex: 1;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 18px 20px 22px;

}


/* MEDIA LIBRARY STYLES */

.ff-search-box {

  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;

}


.ff-search-box input {

  flex: 1;

  min-width: 0;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 12px;

  padding: 12px 16px;

  color: #fff;

  font-size: 14px;

  transition: all 0.2s;

}


.ff-search-box input:focus {

  background: rgba(255, 255, 255, 0.08);

  border-color: var(--accent);

  outline: none;

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);

}


.ff-media-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(var(--ff-tile-min, 140px), 1fr));

  gap: 16px;

}


.ff-media-card {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 16px;

  overflow: hidden;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  cursor: pointer;

  position: relative;

}


.ff-media-card:hover {

  transform: translateY(-4px);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(var(--accent-rgb), 0.3);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);

}


.ff-media-card.selected {

  border-color: rgba(var(--accent-rgb), 0.75);

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35), 0 12px 24px rgba(0, 0, 0, 0.3);

}


.ff-media-thumb {

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  background: #1a1a1a;

  display: block;

}


.ff-media-info {

  padding: 10px;

}


.ff-media-name {

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-bottom: 4px;

}


.ff-media-meta {

  color: rgba(255, 255, 255, 0.45);

  font-size: 11px;

}


.ff-media-action {

  position: absolute;

  bottom: 10px;

  right: 10px;

  width: 28px;

  height: 28px;

  background: var(--accent);

  color: var(--accent-fg);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: scale(0.8);

  transition: all 0.2s;

}


.ff-media-action svg,
.ff-media-action svg * {
  stroke: currentColor;
}


.ff-media-card:hover .ff-media-action {

  opacity: 1;

  transform: scale(1);

}


.ff-gear-btn:hover,

.ff-header .close-btn:hover {

  transform: scale(1.06);

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.18);

}


.ff-gear-btn:active,

.ff-header .close-btn:active {

  transform: scale(0.96);

}


.ff-settings {

  position: absolute;

  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.35);

  z-index: 10002;

}


.ff-settings-card {

  width: min(520px, calc(100% - 24px));

  background: rgba(18, 16, 16, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

}


.ff-settings-title {

  font-weight: 900;

  color: #fff;

  font-size: 14px;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  margin-bottom: 12px;

}


.ff-settings-row {

  display: grid;

  grid-template-columns: minmax(136px, 152px) minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 13px;

}

/* Compact setting row actions and premium buttons for AE CEP panel */
.ff-settings-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.btn-action {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 72px;
}

.btn-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.20);
}

.btn-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-action.btn-danger {
  background: rgba(235, 87, 87, 0.12);
  border-color: rgba(235, 87, 87, 0.20);
  color: #ff6b6b;
}

.btn-action.btn-danger:hover:not(:disabled) {
  background: rgba(235, 87, 87, 0.22);
  border-color: rgba(235, 87, 87, 0.35);
}

.btn-dropdown {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.is-cep .ff-settings-row {
  grid-template-columns: 1fr auto;
}

.is-cep .btn-action {
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
  min-width: 60px;
}

.is-cep .btn-dropdown {
  min-width: 110px;
  max-width: 160px;
}


.ff-settings-row input,

.ff-settings-row select {

  width: 100%;

  height: 36px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 12px;

  color: #fff;

  padding: 0 12px;

  outline: none;

}


.ff-settings-row input:focus,

.ff-settings-row select:focus {

  border-color: rgba(var(--accent-rgb), 0.55);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);

}


.ff-settings-actions {

  display: flex;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 12px;

}


.ff-settings-actions button {

  height: 36px;

  padding: 0 14px;

  flex: 1 1 140px;

  min-width: 0;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  cursor: pointer;

}


.ff-settings-actions button:hover {

  background: rgba(255, 255, 255, 0.12);

}


.ff-settings-note {

  margin-top: 10px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.4;

}

.ff-settings-note strong {

  color: rgba(255, 255, 255, 0.9);

}

.ff-settings-note {

  white-space: normal;

}

.ff-settings-hint {

  margin-top: 10px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.55);

  line-height: 1.35;

}

.ff-settings-row select option {
  background: #1a1a2e;
  color: #fff;
}

.vd-template-row-inner {
  display: flex;
  gap: 6px;
  align-items: center;
}

.vd-template-row-inner select {
  flex: 1;
  min-width: 0;
}

.vd-template-select-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-template-select-row input {
  flex: 1;
  min-width: 0;
}

#btnVDChooseTemplate {
  width: 32px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

#btnVDChooseTemplate:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vd-template-choose-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  vertical-align: middle;
  flex-shrink: 0;
}

#btnVDDeleteTemplate,
#btnVDAddTemplate {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#btnVDDeleteTemplate {
  color: rgba(255, 255, 255, 0.82);
  font-size: 20px;
}

#btnVDDeleteTemplate:hover,
#btnVDAddTemplate:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vd-add-template-form {
  display: none;
  grid-column: 1 / -1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}

.vd-add-template-form.vd-tpl-form-open {
  display: block;
}

.vd-add-tpl-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.vd-add-tpl-fields input {
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #fff;
  padding: 0 10px;
  outline: none;
  font-size: 12px;
}

.vd-add-tpl-fields input.vd-tpl-name-input {
  grid-column: 1 / -1;
}

.vd-add-tpl-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.vd-add-tpl-actions button {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.vd-add-tpl-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ========================================================= */
/* === ADAPTIVE: constrain content for wide screens (web) === */
/* ========================================================= */

.logout-container,
.login-container {
  max-width: 420px;
  align-self: center;
}

.tools-list {
  max-width: 420px;
  align-self: center;
}

/* CEP + Web: profile positions are set dynamically by JS (updateProfilePositions) */


/* ========================================================= */
/* === ANIMATED WALLPAPER CANVAS                         === */
/* ========================================================= */

#animatedWallpaperCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}

/* ========================================================= */
/* === LIGHT SWEEP BUTTON HOVER                          === */
/* ========================================================= */

.login-btn,
.logout-btn,
.admin-btn,
#_mpBtn,
#btnSaveNickname,
.tool-tile,
.stg-apply-mini {
  position: relative;
  overflow: hidden;
}

.login-btn::after,
.logout-btn::after,
.admin-btn::after,
#_mpBtn::after,
#btnSaveNickname::after,
.tool-tile::after,
.stg-apply-mini::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transition: none;
  pointer-events: none;
}

.login-btn:hover::after,
.logout-btn:hover::after,
.admin-btn:hover::after,
#_mpBtn:hover::after,
#btnSaveNickname:hover::after,
.tool-tile:hover::after,
.stg-apply-mini:hover::after {
  animation: lightSweep 0.6s ease-out;
}

@keyframes lightSweep {
  0% {
    left: -60%;
  }

  100% {
    left: 120%;
  }
}

/* ========================================================= */
/* === GLASS EFFECT ON TABS                              === */
/* ========================================================= */

.tabs {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .tabs {
  background: rgba(240, 240, 240, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ========================================================= */
/* === SUPPORT CHAT PANEL                                === */
/* ========================================================= */

.support-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: none;
  flex-direction: column;
  background: rgba(12, 10, 9, 0.99);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  animation: fadeIn 0.25s ease;
  box-sizing: border-box;
}

.support-panel.active {
  display: flex;
}

.support-header {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.support-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.3px;
}

.support-back-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
}

.support-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Ticket list */
.support-tickets {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}

.support-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  padding: 40px 0;
}

.support-ticket-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.support-ticket-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.support-ticket-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--accent-rgb), 0.15);
  flex-shrink: 0;
}

.support-ticket-info {
  flex: 1;
  min-width: 0;
}

.support-ticket-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-ticket-preview {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.support-ticket-meta {
  text-align: right;
  flex-shrink: 0;
}

.support-ticket-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.support-ticket-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 10px;
  padding: 0 5px;
  margin-top: 4px;
}

/* Chat view */
.support-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.support-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  animation: fadeIn 0.2s ease;
}

.support-msg.user {
  align-self: flex-end;
  background: rgba(var(--accent-rgb), 0.25);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.support-msg.admin {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border-bottom-left-radius: 4px;
}

.support-msg-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.support-msg.user .support-msg-time {
  text-align: right;
}

/* Input bar */
.support-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.support-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.support-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.support-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.support-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--accent-rgb), 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.support-send-btn:hover {
  background: rgba(var(--accent-rgb), 0.5);
  transform: scale(1.05);
}

.support-send-btn:active {
  transform: scale(0.95);
}

/* Attach button */
.support-attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.support-attach-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

/* Send Questionnaire button */
.support-q-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.support-q-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

/* Media in messages */
.support-media-img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  object-fit: cover;
}

.support-media-video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}

.support-media-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--accent-light);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
}

.support-media-file:hover {
  background: rgba(255, 255, 255, 0.14);
}

.support-media-file svg {
  flex-shrink: 0;
  stroke: var(--accent-light);
}

/* Support mode toggle button */
.support-mode-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
}

.support-mode-toggle:hover {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.support-mode-toggle svg {
  stroke: var(--accent-light);
  flex-shrink: 0;
}

/* Support button */
#btnSupport {
  position: relative;
}

#btnSupport svg {
  stroke: rgba(255, 255, 255, 0.7);
}


.admin-badge.support-role {
  background: rgba(90, 200, 250, 0.15);
  color: #5ac8fa;
  border: 1px solid rgba(90, 200, 250, 0.3);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

/* Ticket status badges (Open / Closed) */
.support-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.support-status-badge.open {
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
  border: 1px solid rgba(48, 209, 88, 0.3);
}

.support-status-badge.closed {
  background: rgba(142, 142, 147, 0.15);
  color: #8e8e93;
  border: 1px solid rgba(142, 142, 147, 0.3);
}

/* Closed ticket item dimming */
.support-ticket-item.support-ticket-closed {
  opacity: 0.5;
}

/* Close ticket button */
.support-close-ticket-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: rgba(255, 69, 58, 0.08);
  color: #ff453a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.support-close-ticket-btn:hover {
  background: rgba(255, 69, 58, 0.16);
}

.support-close-ticket-btn svg {
  stroke: #ff453a;
}

/* Closed banner in messages */
.support-closed-banner {
  text-align: center;
  padding: 10px;
  color: #8e8e93;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid rgba(142, 142, 147, 0.15);
  margin-top: 8px;
}

/* Status info at top of messages */
.support-status-info {
  text-align: center;
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.support-status-info.open {
  color: #30d158;
}

/* Disabled input bar (closed ticket) */
.support-input-bar.support-input-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Numeric unread badge on support icon */
#supportDot {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ff453a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  position: absolute;
  top: -2px;
  right: -4px;
}

/* Blue verification request badge on support icon */
#supportVerifyDot {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #5865F2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  position: absolute;
  top: -2px;
  left: -4px;
}

/* Account management wrapper for security badge */
.account-mgmt-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.account-mgmt-wrapper #btnAccountManagement {
  flex: 1;
}

/* Account security reminder badge */
.account-security-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff9f0a;
  color: #000;
  font-size: 13px;
  font-weight: 900;
  cursor: help;
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-shrink: 0;
  animation: securityPulse 2s ease-in-out infinite;
}

@keyframes securityPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 159, 10, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 159, 10, 0);
  }
}

.account-security-badge .security-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(30, 30, 34, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  width: 220px;
  white-space: normal;
  z-index: 1060;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.account-security-badge:hover .security-tooltip {
  display: block;
}

/* === Custom Dialog (kzConfirm / kzPrompt) === */
.kz-dialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
}

.kz-dialog-overlay.kz-dialog-visible {
  display: flex;
  opacity: 1;
}

.kz-dialog-overlay.kz-dialog-closing {
  opacity: 0;
}

.kz-dialog-box {
  background: rgba(28, 28, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  width: 90vw;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.2s;
}

.kz-dialog-visible .kz-dialog-box {
  transform: scale(1) translateY(0);
}

.kz-dialog-closing .kz-dialog-box {
  transform: scale(0.92) translateY(10px);
}

.kz-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.kz-dialog-message {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin-bottom: 16px;
  white-space: pre-line;
  word-break: break-word;
}

.kz-dialog-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13.5px;
  margin-top: 8px;
  margin-bottom: 4px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.kz-dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.kz-dialog-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

.kz-dialog-btn {
  padding: 8px 20px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.kz-dialog-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.kz-dialog-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.kz-dialog-ok {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--accent-fg, #fff);
  -webkit-text-fill-color: var(--accent-fg, #fff);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kz-dialog-ok:hover {
  filter: brightness(1.08);
  box-shadow:
    0 6px 18px rgba(var(--accent-rgb), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

/* ========================================= */
/* Story Link Sticker (Instagram-like)       */
/* ========================================= */
.story-link-sticker {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 310;
  cursor: pointer;
  animation: storyLinkPulse 2s ease-in-out infinite;
}

.story-link-sticker-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.story-link-sticker:hover .story-link-sticker-inner {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.story-link-sticker:active .story-link-sticker-inner {
  transform: scale(0.97);
}

.story-link-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.story-link-icon img,
.story-link-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-link-label {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes storyLinkPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.85;
  }
}

/* Story Upload Preview Modal */
.story-preview-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.story-preview-overlay.visible {
  display: flex;
  opacity: 1;
}

.story-preview-box {
  width: 90%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.story-preview-media {
  width: 100%;
  max-height: 50vh;
  border-radius: 16px;
  object-fit: contain;
  background: #000;
}

.story-preview-link-row {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
}

.story-preview-link-input {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s;
}

.story-preview-link-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.story-preview-link-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.story-preview-link-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: default;
}

.story-preview-link-icon svg {
  color: rgba(255, 255, 255, 0.5);
}

.story-preview-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}

.story-preview-buttons button {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.story-preview-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.story-preview-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.story-preview-publish {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--accent-fg, #fff);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.story-preview-publish:hover {
  filter: brightness(1.08);
}

/* Story Preview Video Wrapper */
.story-preview-video-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Story Preview Play/Pause Button - invisible but functional */
.story-preview-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  pointer-events: auto;
}

.story-preview-play-btn svg {
  display: none;
}

/* Story Preview Volume Control */
.story-preview-volume-wrap {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.story-preview-volume-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s;
}

.story-preview-volume-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.story-preview-volume-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  display: none;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 10px;
  padding: 14px 10px;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.story-preview-volume-slider {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: bt-lr;
  width: 6px;
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  cursor: pointer;
  margin: 0;
  outline: none;
}

.story-preview-volume-slider::-webkit-slider-runnable-track {
  width: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.story-preview-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  margin-left: -4px;
}

.story-preview-volume-slider::-moz-range-track {
  width: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.story-preview-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* === COMMUNITY FF === */
.ff-community-section {
  margin-top: 16px;
  margin-bottom: 8px;
}

.ff-community-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ff-community-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
}

.ff-community-card {
  position: relative;
}

.ff-cf-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.ff-cf-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  flex-shrink: 0;
}

.ff-cf-nick {
  color: rgba(var(--accent-rgb), 0.75);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-community-create {
  border: 2px dashed rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.04);
}

.ff-community-create:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}

.ff-community-folder-header {
  margin-bottom: 12px;
}

.ff-cf-owner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ff-cf-owner-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--accent-rgb), 0.5);
  flex-shrink: 0;
}

.ff-cf-owner-info {
  flex: 1;
  min-width: 0;
}

.ff-cf-owner-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-cf-owner-nick {
  color: rgba(var(--accent-rgb), 0.7);
  font-size: 11px;
  font-weight: 600;
}

.ff-cf-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}

.ff-cf-upload-btn:hover {
  background: rgba(var(--accent-rgb), 0.35);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.ff-cf-create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(var(--accent-rgb), 0.18);
  color: rgba(var(--accent-rgb), 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}

.ff-cf-create-btn:hover {
  background: rgba(var(--accent-rgb), 0.32);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: #fff;
}

/* FF + Add button next to search */
.ff-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
  margin: 0;
  padding: 0;
}

.ff-add-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

/* FF Upload Modal */
.ff-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483646;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}

.ff-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.ff-modal {
  background: linear-gradient(180deg, rgba(20, 22, 26, 0.98) 0%, rgba(14, 15, 18, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  width: 300px;
  max-width: 92vw;
  overflow: hidden;
  transform: translateY(12px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.58);
  transition: transform 0.2s, opacity 0.2s;
}

.ff-modal-overlay.active .ff-modal {
  transform: translateY(0);
}

.ff-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ff-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.ff-modal-close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.ff-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ff-modal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.ff-modal-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  width: 100%;
}

.ff-modal-opt:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.ff-modal-opt-icon {
  font-size: 26px;
  line-height: 1;
}

.ff-modal-opt-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.ff-modal-opt-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.ff-modal-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
}

.ff-modal-input:focus {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.ff-modal-btn-primary {
  flex: 1;
  padding: 9px 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ff-modal-btn-primary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.18);
}

.ff-modal-btn-secondary {
  flex: 1;
  padding: 9px 0;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ff-modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Community folder avatar badge вЂ” top-right corner */
.ff-media-card {
  position: relative;
}

.ff-cf-avatar-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.7);
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}

.ff-cf-avatar-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Creator avatar wrap вЂ” top-right on folder cards */
.ff-creator-avatar-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  z-index: 4;
  pointer-events: none;
}

.ff-creator-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.8);
  object-fit: cover;
}

/* Verified overlay on creator avatar вЂ” bottom-right like a notification badge */
.ff-creator-ver {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Creator nickname badge вЂ” bottom-right on folder cards */
.ff-creator-nick {
  position: absolute;
  bottom: 36px;
  right: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uploader nickname badge вЂ” bottom-right on media file cards */
.ff-uploader-nick {
  position: absolute;
  bottom: 36px;
  right: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar badge on Last Updates community cards */
.ff-update-card {
  position: relative;
}

.ff-update-avatar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.8);
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
}

/* Notify bell button вЂ” top-left on folder cards */
.ff-notify-bell {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.85);
  border: none;
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.ff-notify-bell:hover {
  background: rgba(var(--accent-rgb), 1);
  transform: scale(1.12);
}

.ff-notify-bell svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.ff-notify-bell svg * {
  stroke: currentColor;
}

/* Notify modal input */
.ff-modal-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.ff-modal-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.ff-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Notify modal buttons */
.ff-modal-btn-primary {
  flex: 1;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.ff-modal-btn-primary:hover {
  background: rgba(var(--accent-rgb), 1);
}

.ff-modal-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ff-modal-btn-secondary {
  flex: 1;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ff-modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Warning text in upload/create folder modal */
.ff-modal-warning {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1.5;
}

.ff-modal-warning b {
  color: #fff;
}

/* Delete button on folder/media cards */
.ff-delete-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 60, 60, 0.85);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

.ff-media-card:hover .ff-delete-btn,
.ff-media-card:focus-within .ff-delete-btn {
  opacity: 1;
  pointer-events: auto;
}

.ff-delete-btn:hover {
  background: rgba(255, 40, 40, 1);
  transform: scale(1.15);
}

/* Community media nickname badge вЂ” bottom-right corner */
.ff-cf-nick-badge {
  position: absolute;
  bottom: 36px;
  right: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FF: File card вЂ” dark-blue/indigo info area to distinguish from folder cards */
.ff-file-card .ff-media-info {
  background: linear-gradient(135deg, rgba(29, 51, 115, 0.55) 0%, rgba(15, 23, 50, 0.92) 100%);
  border-top: 1px solid rgba(79, 120, 240, 0.18);
}

.ff-file-card {
  border-color: rgba(59, 100, 220, 0.14);
}

.ff-file-card:hover {
  border-color: rgba(79, 130, 250, 0.38) !important;
}

/* FF: Modal overlay (rename + folder picker) */
.ff-panel .ff-modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.ff-input-modal {
  background: linear-gradient(180deg, rgba(20, 22, 26, 0.98) 0%, rgba(14, 15, 18, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.62);
}

.ff-modal-copy {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  white-space: normal;
  text-align: center;
}

.ff-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 0.01em;
}

.ff-modal-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.ff-modal-input:focus {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.ff-modal-btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.ff-modal-btn-primary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ff-modal-btn-primary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.18);
}

.ff-modal-btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ff-modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* FF: Folder picker list */
.ff-folder-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.ff-folder-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.ff-folder-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.ff-folder-picker-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FF: Drag-to-folder visual states */
.ff-media-card.ff-drop-target {
  border-color: rgba(var(--accent-rgb), 1) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.45), 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: scale(1.04);
  background: rgba(var(--accent-rgb), 0.12);
}

.ff-media-card.ff-dragging {
  opacity: 0.45;
  transform: scale(0.97);
  pointer-events: none;
}

/* FF: file uploader avatar (same position as folder creator avatar) */
.ff-file-uploader-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
}

/* ========== VERIFICATION & PREMIUM BADGES ========== */
.kzn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 3px;
}

.kzn-badge svg {
  width: 100%;
  height: 100%;
}

.kzn-badge-premium {
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.kzn-badge-verified {
  filter: drop-shadow(0 0 3px rgba(29, 161, 242, 0.5));
}

/* Accent foreground must not recolor verification/premium badges */
.kzn-badge,
.kzn-badge *,
.kzn-badge svg,
.kzn-badge svg * {
  color: unset !important;
  -webkit-text-fill-color: unset !important;
}

.kzn-badge-verified svg path:first-of-type {
  fill: #1DA1F2 !important;
}

.kzn-badge-verified svg path:last-of-type {
  fill: none !important;
  stroke: #fff !important;
}

.kzn-badge-premium svg,
.kzn-badge-premium svg path {
  fill: #FFD700 !important;
  stroke: none !important;
}

.chat-list-item.active .chat-name .kzn-badge,
.chat-list-item .chat-name .kzn-badge,
.chat-list-item.active .kzn-badge,
.chat-list-item .kzn-badge {
  transform: none !important;
  flex-shrink: 0 !important;
  scale: 1 !important;
}

.chat-list-item.active .kzn-badge-sm,
.chat-list-item .kzn-badge-sm {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.chat-list-item.active .kzn-badge-verified svg path:first-of-type,
.chat-list-item .kzn-badge-verified svg path:first-of-type {
  fill: #1DA1F2 !important;
  stroke: none !important;
}

.chat-list-item.active .kzn-badge-verified svg path:last-of-type,
.chat-list-item .kzn-badge-verified svg path:last-of-type {
  fill: none !important;
  stroke: #fff !important;
}

.chat-list-item.active .kzn-badge-premium svg,
.chat-list-item.active .kzn-badge-premium svg path,
.chat-list-item .kzn-badge-premium svg,
.chat-list-item .kzn-badge-premium svg path {
  fill: #FFD700 !important;
  stroke: none !important;
}

.kzn-badge-sm {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}

.kzn-badge-xs {
  width: 10px;
  height: 10px;
  margin-left: 1px;
}

.kzn-avatar-badge-wrap {
  position: relative;
  display: inline-block;
}

.kzn-avatar-badge-wrap .kzn-badge-corner {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg, #0C0A09);
}

.am-verification-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px;
}

.am-verification-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}

.am-verification-status.verified {
  background: rgba(29, 161, 242, 0.08);
  border: 1px solid rgba(29, 161, 242, 0.15);
  color: #1DA1F2;
}

.am-verification-status.pending {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.15);
  color: #FFC107;
}

.am-premium-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.10);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.am-premium-toggle:hover {
  background: rgba(255, 215, 0, 0.08);
}

.am-premium-toggle .toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}

.am-premium-toggle .toggle-switch.active {
  background: #FFD700;
}

.am-premium-toggle .toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
}

.am-premium-toggle .toggle-switch.active::after {
  transform: translateX(20px);
}

/* Account Management card style */
.am-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.am-card-gold {
  background: rgba(255, 215, 0, 0.04);
  border-color: rgba(255, 215, 0, 0.14);
}

.am-card-blue {
  background: rgba(29, 161, 242, 0.05);
  border-color: rgba(29, 161, 242, 0.18);
}

/* Toggle switch used inside am-card (premium badge) */
#accountMgmtModal .toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
  cursor: pointer;
}

#accountMgmtModal .toggle-switch.active {
  background: #FFD700;
}

#accountMgmtModal .toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
}

#accountMgmtModal .toggle-switch.active::after {
  transform: translateX(20px);
}

#amVerifyStatusInner .kzn-badge-verified {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#amVerifyStatusInner .kzn-badge-verified svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ========== FF FOLDER EDIT MENU ========== */
.ff-folder-admin-menu {
  position: absolute;
  bottom: 44px;
  right: 8px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  z-index: 10;
  background: rgba(18, 18, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.ff-folder-admin-menu button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.ff-folder-admin-menu button:hover {
  background: rgba(var(--accent-rgb), 0.3);
  transform: scale(1.1);
}

/* Edit pencil button вЂ” always visible for owner/admin */
.ff-media-action.ff-owner-edit {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* Rename input inside card */
.ff-folder-rename-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  outline: none;
  box-sizing: border-box;
}

/* Rename row: input + save button */
.ff-rename-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.ff-rename-save-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: rgba(var(--accent-rgb), 0.85);
  color: var(--accent-fg);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.ff-rename-save-btn:hover {
  background: rgba(var(--accent-rgb), 1);
  transform: scale(1.1);
}

/* ========== FF COVER CROP EDITOR ========== */
.ff-crop-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
}

.ff-crop-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.ff-crop-hint {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  text-align: center;
  margin-top: -8px;
}

.ff-crop-canvas-wrap {
  position: relative;
  width: 280px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(var(--accent-rgb), 0.6);
  cursor: grab;
  touch-action: none;
}

.ff-crop-canvas-wrap:active {
  cursor: grabbing;
}

.ff-crop-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ff-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
}

.ff-crop-zoom-row label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  white-space: nowrap;
}

.ff-crop-zoom-row input[type=range] {
  flex: 1;
  accent-color: var(--accent);
}

.ff-crop-actions {
  display: flex;
  gap: 10px;
  width: 280px;
}

.ff-crop-btn-cancel {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ff-crop-btn-save {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ff-crop-btn-save:hover {
  opacity: 0.85;
}

/* Reply preview bar above chat input */
.reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px 10px 0 0;
  margin: 0 0 8px 0;
  width: 100%;
  box-sizing: border-box;
  animation: replySlideIn 0.15s ease-out;
}

@keyframes replySlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reply-cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.reply-cancel:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.kzn-torrent-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 7, 18, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.kzn-tm-card {
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 20px;
  padding: 18px;
  background: rgba(15, 11, 28, 0.65);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  border: 1px solid rgba(168, 92, 255, 0.2);
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.75), 
    0 0 30px rgba(168, 92, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  color: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.kzn-tm-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.kzn-tm-close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  transition: all 0.2s ease;
}

.kzn-tm-close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.kzn-tm-close:active {
  transform: scale(0.95);
}

/* CEP/AE 2020: disable backdrop-filter to prevent z-index compositing issues */
html.is-cep .kzn-torrent-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(8, 6, 14, 0.94);
}
html.is-cep .kzn-tm-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(22, 19, 31, 0.98);
  width: min(92vw, 280px) !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

html.is-cep .kzn-torrent-modal {
  padding: 8px !important;
}

html.is-cep .kzn-tm-h {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

html.is-cep .kzn-tm-label {
  margin: 8px 0 4px !important;
  font-size: 10px !important;
}

html.is-cep .kzn-tm-select,
html.is-cep .kzn-tm-input {
  height: 34px !important;
  font-size: 12px !important;
}

html.is-cep .kzn-tm-file {
  padding: 14px 10px !important;
  min-height: 72px !important;
}

html.is-cep .kzn-tm-file-title {
  font-size: 12px !important;
}

html.is-cep .kzn-tm-file-sub {
  font-size: 10px !important;
}

html.is-cep .kzn-tm-actions button {
  height: 36px !important;
  font-size: 12px !important;
}

/* CEP: compact FF (Link File) panel */
html.is-cep .ff-panel .ff-header {
  height: 48px !important;
  padding: 0 10px !important;
}

html.is-cep .kzn-tm-btn {
  color: var(--accent-fg, #fff) !important;
  -webkit-text-fill-color: var(--accent-fg, #fff) !important;
}

html.is-cep .kzn-torrent-info-badge {
  background: #fff !important;
  color: var(--accent-fg, #111) !important;
  -webkit-text-fill-color: var(--accent-fg, #111) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

html.is-cep .ff-panel .ff-header-title,
html.is-cep .ff-panel .ff-title {
  font-size: 13px !important;
}

html.is-cep .ff-panel .ff-content,
html.is-cep .ff-panel .ff-body {
  padding: 8px 10px !important;
}

html.is-cep .ff-panel .ff-settings-row {
  gap: 6px !important;
  margin-bottom: 8px !important;
}

html.is-cep .ff-panel .ff-modal-overlay {
  padding: 8px !important;
}

.kzn-tm-label {
  margin: 12px 0 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 700;
}

.kzn-tm-select,
.kzn-tm-input {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.kzn-tm-select:focus,
.kzn-tm-input:focus {
  border-color: rgba(168, 92, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(168, 92, 255, 0.25);
}

.kzn-tm-select option {
  background: #16131f;
  color: #fff;
}

.kzn-tm-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.kzn-tm-ficon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: 20px;
  flex: 0 0 40px;
}

.kzn-tm-fname {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  word-break: break-all;
  line-height: 1.3;
}

.kzn-tm-fsize {
  margin-top: 1px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.kzn-tm-status {
  min-height: 16px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}

.kzn-tm-btn {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: var(--accent-fg, #fff);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(168, 92, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.kzn-tm-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
}

.kzn-tm-btn:hover::before {
  animation: kzn-shimmer 1s ease-in-out infinite;
}

.kzn-tm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 92, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: brightness(1.1);
}

.kzn-tm-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(168, 92, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  filter: brightness(0.95);
}

.kzn-tm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.kzn-tm-btn2 {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.15), 
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.kzn-tm-btn2:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(168, 92, 255, 0.4);
  box-shadow: 
    0 6px 15px rgba(168, 92, 255, 0.2), 
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.kzn-tm-btn2:active {
  transform: translateY(1px);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.1), 
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.kzn-tm-prog {
  width: 100%;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.kzn-tm-prog-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8 0%, var(--accent) 100%);
  transition: width 0.25s ease;
}

.kzn-torrent-card {
  min-width: 220px;
  max-width: min(320px, 72vw);
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(20, 16, 32, 0.55);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(168, 92, 255, 0.15);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.35), 
    0 0 20px rgba(168, 92, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.kzn-torrent-card:hover {
  border-color: rgba(168, 92, 255, 0.35);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.45), 
    0 0 25px rgba(168, 92, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html.is-cep .kzn-torrent-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(24, 21, 33, 0.96);
}

.kzn-tc-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kzn-tc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: 18px;
  flex: 0 0 36px;
}

.kzn-tc-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  word-break: break-all;
  line-height: 1.3;
}

.kzn-tc-meta,
.kzn-tc-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.kzn-tc-status {
  margin-top: 8px;
}

.kzn-tc-btn {
  width: 100%;
  height: 34px;
  margin-top: 10px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(168, 92, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.kzn-tc-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
}

.kzn-tc-btn:hover::before {
  animation: kzn-shimmer 1s ease-in-out infinite;
}

.kzn-tc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 92, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: brightness(1.1);
}

.kzn-tc-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(168, 92, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  filter: brightness(0.95);
}

.kzn-tc-btn.done {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.kzn-tc-btn.done:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(1.1);
}

.kzn-tc-btn.done:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  filter: brightness(0.95);
}

@keyframes kzn-shimmer {
  0% { left: -150%; }
  100% { left: 150%; }
}

.kzn-tc-btn:disabled {
  background: linear-gradient(180deg, rgba(60,60,65,0.4) 0%, rgba(50,50,55,0.4) 100%) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Badges */
.kzn-torrent-status-badge,
.kzn-torrent-sender-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  width: auto;
  box-sizing: border-box;
}

.kzn-torrent-status-badge .status-dot,
.kzn-torrent-sender-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kzn-torrent-status-badge .status-dot.pulse,
.kzn-torrent-sender-badge .status-dot.pulse {
  animation: kznPulse 2s infinite;
}

/* Seeding (Active Transfer) */
.kzn-torrent-status-badge.status-seeding {
  background: rgba(74, 222, 128, 0.06);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.18);
}
.kzn-torrent-status-badge.status-seeding .status-dot {
  background: #4ade80;
}

.kzn-torrent-sender-badge.status-seeding {
  background: rgba(56, 189, 248, 0.06);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.18);
}
.kzn-torrent-sender-badge.status-seeding .status-dot {
  background: #38bdf8;
}

/* Offline / Not Seeding */
.kzn-torrent-status-badge.status-offline,
.kzn-torrent-status-badge.status-online_not_seeding,
.kzn-torrent-sender-badge.status-offline {
  background: rgba(251, 191, 36, 0.06);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.18);
}
.kzn-torrent-status-badge.status-offline .status-dot,
.kzn-torrent-status-badge.status-online_not_seeding .status-dot,
.kzn-torrent-sender-badge.status-offline .status-dot {
  background: #fbbf24;
}

/* Missing / Deleted */
.kzn-torrent-status-badge.status-file_missing,
.kzn-torrent-sender-badge.status-missing {
  background: rgba(248, 113, 113, 0.06);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.18);
}
.kzn-torrent-status-badge.status-file_missing .status-dot,
.kzn-torrent-sender-badge.status-missing .status-dot {
  background: #f87171;
}

/* Unknown */
.kzn-torrent-status-badge.status-unknown {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.kzn-torrent-status-badge.status-unknown .status-dot {
  background: rgba(255, 255, 255, 0.3);
}

.kzn-dl-float {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 2147482990;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.kzn-dl-bubble {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0f14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
}

.kzn-dl-pct {
  position: relative;
  z-index: 3;
  font-size: 11px;
  font-weight: 800;
}

.kzn-dl-bubble>div[style*="position:absolute"] {
  display: none !important;
}

.kzn-dl-bubble>svg {
  display: none !important;
}

.kzn-dl-bubble>*:not(.kzn-dl-pct) {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* --- KUZUNO MESSAGE TRUST (TELEGRAM-LIKE) --- */

@keyframes kznTrustSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.kzn-trust-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  animation: kznTrustSlideDown 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.kzn-trust-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.1px;
}

.kzn-trust-btns {
  display: flex;
  gap: 8px;
}

.kzn-trust-btn {
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  border: none;
  outline: none;
}

.kzn-trust-btn-accept {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  box-shadow: 
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kzn-trust-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kzn-trust-btn-ignore {
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kzn-trust-btn-ignore:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kzn-trust-btn-decline {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 
    0 4px 12px rgba(239, 68, 68, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kzn-trust-btn-decline:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.kzn-trust-btn-block {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1.5px solid rgba(239, 68, 68, 0.2);
}

.kzn-trust-btn-block:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ff5a5a;
}

/* Red blocked bar for the sender */
.kzn-trust-blocked-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.06), rgba(185, 28, 28, 0.03));
  border-top: 1px solid rgba(239, 68, 68, 0.1);
  width: 100%;
  box-sizing: border-box;
  animation: kznTrustSlideDown 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.kzn-trust-blocked-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kzn-trust-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(239, 68, 68, 0.07);
  border-radius: 50%;
  flex-shrink: 0;
}

.kzn-trust-status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kzn-trust-status-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

.kzn-trust-status-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

.chat-list-item.pending-trust {
  opacity: 0.6;
  filter: grayscale(0.5);
  border-left: 3px solid rgba(168, 92, 255, 0.5);
}

.chat-list-item.pending-trust .chat-name {
  color: #999;
}

.chat-list-item.blocked-trust {
  opacity: 0.4;
  filter: grayscale(0.85);
  border-left: 3px solid rgba(239, 68, 68, 0.4);
}

/* в•ђв•ђв•ђ VD (Media Downloader) вЂ” Apple / iOS style в•ђв•ђв•ђ */
.vd-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1011;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  background: #000;
  transition: opacity 0.22s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.vd-panel.active {
  opacity: 1;
  pointer-events: all;
}

/* header */
.vd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--kzn-close-inset);
  background: rgba(22, 22, 24, 0.92);
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.35);
  flex-shrink: 0;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.vd-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vd-header-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.vd-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a84ff;
  color: var(--accent-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-avatar svg {
  stroke: currentColor;
}

.vd-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}

.vd-subtitle {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.45);
  margin-top: 1px;
  letter-spacing: -0.1px;
}

.vd-header-btn {
  background: none;
  border: none;
  color: rgba(235, 235, 245, 0.5);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vd-header-btn:hover {
  color: #fff;
  background: rgba(120, 120, 128, 0.16);
}

.vd-header-btn:active {
  background: rgba(120, 120, 128, 0.28);
}

.vd-shazam-btn {
  color: #0a84ff;
}

.vd-shazam-btn:hover {
  color: #409cff;
  background: rgba(10, 132, 255, 0.12);
}

/* chat area */
.vd-chat {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scroll-behavior: smooth;
  background: #000;
}

.vd-chat::-webkit-scrollbar {
  width: 6px;
}

.vd-chat::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, 0.24);
  border-radius: 3px;
}

.vd-chat::-webkit-scrollbar-track {
  background: transparent;
}

/* messages вЂ” iMessage style */
.vd-msg {
  display: flex;
  max-width: min(82%, 340px);
  width: fit-content;
  min-width: 0;
  margin: 2px 0;
  animation: vdMsgIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vd-msg-bot {
  align-self: flex-start;
}

.vd-msg-user {
  align-self: flex-end;
}

@keyframes vdMsgIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vd-msg-bubble {
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.38;
  word-break: break-word;
  letter-spacing: -0.1px;
  overflow: visible;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.vd-msg-bot .vd-msg-bubble {
  background: #1c1c1e;
  color: #fff;
  border-bottom-left-radius: 4px;
}

.vd-msg-user .vd-msg-bubble {
  background: #0a84ff;
  border-bottom-right-radius: 4px;
  color: #fff;
}

.vd-msg-text {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.vd-msg-time {
  font-size: 10.5px;
  color: rgba(235, 235, 245, 0.38);
  margin-top: 3px;
  text-align: right;
  letter-spacing: 0;
}

.vd-msg-user .vd-msg-time {
  color: rgba(255, 255, 255, 0.58);
}

/* status / spinner */
.vd-msg-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(235, 235, 245, 0.6);
  margin-top: 2px;
}

.vd-msg-status .vd-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(235, 235, 245, 0.18);
  border-top-color: rgba(235, 235, 245, 0.75);
  border-radius: 50%;
  animation: vdSpin 0.7s linear infinite;
}

@keyframes vdSpin {
  to {
    transform: rotate(360deg);
  }
}

/* thumbnail / title / duration */
.vd-thumb {
  width: 100%;
  max-width: 260px;
  border-radius: 10px;
  margin-bottom: 8px;
  object-fit: cover;
  display: block;
}

.vd-media-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.32;
  letter-spacing: -0.1px;
}

.vd-media-duration {
  font-size: 12px;
  color: rgba(235, 235, 245, 0.5);
  margin-bottom: 8px;
}

/* format selector buttons вЂ” iOS pill style */
.vd-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.vd-fmt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: rgba(120, 120, 128, 0.24);
  color: #fff;
  transition: background 0.12s ease, transform 0.08s ease;
  font-family: inherit;
  letter-spacing: -0.1px;
}

.vd-fmt-btn:hover {
  background: rgba(120, 120, 128, 0.36);
}

.vd-fmt-btn:active {
  transform: scale(0.97);
}

.vd-fmt-btn.vd-fmt-audio {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.84);
}

.vd-fmt-btn.vd-fmt-audio:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* download button вЂ” iOS Apple blue */
.vd-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 8px 15px;
  background: #0a84ff;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, transform 0.08s ease;
  letter-spacing: -0.1px;
}

.vd-dl-btn:hover {
  background: #409cff;
}

.vd-dl-btn:active {
  transform: scale(0.97);
}

/* Download mini-menu (Converted vs HD Original) */
.vd-dl-menu {
  position: relative;
  display: inline-flex;
}

.vd-dl-menu-trigger {
  padding-right: 10px;
  font-family: inherit;
}

.vd-dl-menu-trigger .vd-dl-chevron {
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.vd-dl-menu.vd-dl-menu-open .vd-dl-chevron {
  transform: rotate(180deg);
}

.vd-dl-menu-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  min-width: 180px;
  background: rgba(30, 30, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.vd-dl-menu.vd-dl-menu-open .vd-dl-menu-popup {
  display: block;
}

.vd-dl-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.vd-dl-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.vd-dl-menu-item-hd {
  color: #ffd60a;
}

.vd-dl-menu-item .vd-hd-badge {
  margin-right: 0;
}

.vd-dl-menu-sep {
  height: 1px;
  margin: 3px 10px;
  background: rgba(255, 255, 255, 0.08);
}

.vd-rebuild-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 6px 12px;
  background: rgba(120, 120, 128, 0.2);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}

.vd-rebuild-btn:hover {
  background: rgba(120, 120, 128, 0.32);
}

.vd-error-text {
  color: #ff453a;
  font-weight: 500;
}

.vd-file-info {
  font-size: 12px;
  color: rgba(235, 235, 245, 0.55);
  margin-top: 2px;
  line-height: 1.35;
}

/* music search вЂ” Shazam results */
.vd-track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.vd-track {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.14);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, transform 0.06s ease;
  border: 0.5px solid rgba(84, 84, 88, 0.25);
  min-width: 0;
}

.vd-track:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.vd-track:active {
  transform: scale(0.985);
}

.vd-track-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(120, 120, 128, 0.2);
}

.vd-track-thumb-external,
.vd-attached-music-thumb-external {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(235, 235, 245, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(120, 120, 128, 0.18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vd-external-thumb-icon {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

.vd-track-meta {
  flex: 1;
  min-width: 0;
}

.vd-track-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vd-track-sub {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.55);
  margin-top: 2px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.vd-track-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-track.vd-track-busy {
  opacity: 0.55;
  pointer-events: none;
}

.vd-variant-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.vd-variant-tag-apple {
  background: rgba(255, 159, 10, 0.22);
  color: #ffb347;
}

.vd-variant-tag-yt {
  background: rgba(255, 69, 58, 0.22);
  color: #ff6961;
}

.vd-variant-tag-tg {
  background: rgba(10, 132, 255, 0.2);
  color: #7cc7ff;
}

.vd-variant-tag-deezer {
  background: rgba(160, 55, 255, 0.22);
  color: #c99dff;
}

.vd-variant-tag-spotify {
  background: rgba(30, 215, 96, 0.22);
  color: #6ee7a0;
}

.vd-track-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.vd-pick-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.vd-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(120, 120, 128, 0.18);
  color: rgba(235, 235, 245, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  position: relative;
  z-index: 10;
}

.vd-pick-btn:hover:not(:disabled) {
  background: rgba(120, 120, 128, 0.28);
  transform: translateY(-1px);
}

.vd-pick-btn:active:not(:disabled) {
  transform: translateY(0);
}

.vd-pick-btn-disabled,
.vd-pick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vd-pick-close {
  opacity: 0.6;
  font-size: 11px;
  margin-top: 4px;
}

.vd-pick-close:hover {
  opacity: 1;
}

.vd-pick-play {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}

.vd-pick-play:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.vd-pick-play.vd-pick-play-active {
  background: rgba(255, 255, 255, 0.26);
}

.vd-pick-choose {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
}

.vd-pick-choose:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.vd-music-pick {
  cursor: default;
}

.vd-music-pick:hover {
  background: rgba(120, 120, 128, 0.14);
}

/* mini audio player (bottom of VD panel) */
.vd-mini-player {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0 10px 8px 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28, 28, 32, 0.95), rgba(20, 20, 24, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  position: relative;
}

.vd-mini-player.vd-mini-player-visible {
  display: flex;
}

.vd-mp-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(120, 120, 128, 0.22);
}

.vd-mp-thumb:not([src]),
.vd-mp-thumb[src=""] {
  visibility: hidden;
}

.vd-mp-body {
  flex: 1;
  min-width: 0;
}

.vd-mp-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-mp-sub {
  font-size: 11px;
  color: rgba(235, 235, 245, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.vd-mp-scrub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.vd-mp-time {
  font-size: 10px;
  color: rgba(235, 235, 245, 0.55);
  font-variant-numeric: tabular-nums;
  min-width: 26px;
}

.vd-mp-progress {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.vd-mp-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.vd-mp-progress::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
}

.vd-mp-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.vd-mp-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 120, 128, 0.25);
  color: #fff;
  transition: background 0.15s;
}

.vd-mp-btn:hover {
  background: rgba(120, 120, 128, 0.4);
}

.vd-mp-play {
  background: rgba(255, 255, 255, 0.14);
}

.vd-mp-play:hover {
  background: rgba(255, 255, 255, 0.24);
}

.vd-mp-tune-wrap {
  position: relative;
}

.vd-mp-tune-wrap::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 100%;
  height: 14px;
}

.vd-mp-tune {
  width: auto;
  min-width: 28px;
  padding: 0 10px;
  border-radius: 999px;
  gap: 6px;
}

.vd-mp-tune-rate {
  font-size: 10.5px;
  color: rgba(235, 235, 245, 0.82);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vd-mp-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  width: 172px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(16, 16, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease 0.5s, transform 0.18s ease 0.5s;
  z-index: 6;
}

.vd-mp-tune-wrap:hover .vd-mp-pop,
.vd-mp-tune-wrap:focus-within .vd-mp-pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.vd-mp-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.vd-mp-pop-label,
.vd-mp-pop-value {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(235, 235, 245, 0.74);
  font-variant-numeric: tabular-nums;
}

.vd-mp-volume-slider,
.vd-mp-speed-slider {
  width: 100%;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.vd-mp-volume-slider {
  margin: 0 0 10px 0;
}

.vd-mp-volume-slider::-webkit-slider-thumb,
.vd-mp-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.vd-mp-volume-slider::-moz-range-thumb,
.vd-mp-speed-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.vd-mp-volume-slider::-webkit-slider-thumb {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.vd-mp-volume-slider::-moz-range-thumb {
  background: #fff;
}

.vd-mp-speed {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-mp-speed-label {
  font-size: 10.5px;
  color: rgba(235, 235, 245, 0.7);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
  font-weight: 600;
}

.vd-mp-speed-slider {
  flex: 1;
}

.vd-mp-speed-slider::-webkit-slider-thumb {
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.vd-mp-speed-slider::-moz-range-thumb {
  background: #fff;
  cursor: pointer;
  border: none;
}

/* preview / platform chip */
.vd-preview-thumb {
  position: relative;
  margin-bottom: 8px;
  line-height: 0;
}

.vd-preview-thumb .vd-thumb {
  margin-bottom: 0;
}

.vd-platform-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(120, 120, 128, 0.22);
  color: rgba(235, 235, 245, 0.75);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  line-height: 1.6;
}

.vd-platform-chip-float {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* media players */
.vd-media-player {
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  max-width: 260px;
}

.vd-media-video,
.vd-media-image {
  display: block;
  width: 100%;
  max-width: 260px;
  border-radius: 10px;
  object-fit: contain;
  background: #000;
}

.vd-media-image {
  cursor: zoom-in;
}

.vd-media-player-audio {
  background: transparent;
  max-width: 260px;
  width: 100%;
  overflow: visible;
}

/* TikTok portrait video вЂ” wider card */
.vd-tiktok-player {
  max-width: 300px;
}

.vd-tiktok-player .vd-media-video {
  max-width: 300px;
}

.vd-tiktok-preview .vd-thumb {
  max-width: 300px;
}

.vd-media-audio {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 36px;
}

/* Compact audio player вЂ” grey-purple gradient */
.vd-audio-disc-player {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px 9px;
  background: linear-gradient(135deg, rgba(42, 36, 56, 0.96) 0%, rgba(28, 24, 40, 0.97) 100%);
  border: 1px solid rgba(120, 80, 180, 0.13);
  border-radius: 8px;
  max-width: 260px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.vd-audio-thumb {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: rgba(120, 120, 128, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.vd-audio-play-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}

.vd-audio-play-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.06);
}

.vd-audio-play-btn svg {
  width: 13px;
  height: 13px;
  fill: rgba(255, 255, 255, 0.9);
}

.vd-audio-disc-player.playing .vd-audio-play-btn svg.vd-icon-play {
  display: none;
}

.vd-audio-disc-player:not(.playing) .vd-audio-play-btn svg.vd-icon-pause {
  display: none;
}

.vd-audio-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vd-audio-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.vd-audio-title {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding-right: 24px;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 80%, transparent 98%);
}

.vd-audio-waves {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}

.vd-audio-waves span {
  display: block;
  width: 2.5px;
  min-height: 3px;
  height: 3px;
  border-radius: 1.5px;
  background: rgba(140, 100, 210, 0.4);
  transition: background 0.3s ease, height 0.12s ease;
}

.vd-audio-disc-player.playing .vd-audio-waves span {
  background: rgba(160, 120, 240, 0.85);
  animation: vdWaveBar 0.8s ease-in-out infinite;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(1) {
  animation-duration: 0.7s;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(2) {
  animation-delay: 0.1s;
  animation-duration: 0.9s;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(3) {
  animation-delay: 0.2s;
  animation-duration: 0.65s;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(4) {
  animation-delay: 0.05s;
  animation-duration: 1.0s;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(5) {
  animation-delay: 0.15s;
  animation-duration: 0.75s;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(6) {
  animation-delay: 0.25s;
  animation-duration: 0.85s;
}

.vd-audio-disc-player.playing .vd-audio-waves span:nth-child(7) {
  animation-delay: 0.08s;
  animation-duration: 0.95s;
}

@keyframes vdWaveBar {

  0%,
  100% {
    height: 3px;
  }

  50% {
    height: 14px;
  }
}

.vd-audio-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vd-audio-progress {
  flex: 1;
  min-width: 32px;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: transparent;
  overflow: visible;
  border-radius: 999px;
}

.vd-audio-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.vd-audio-disc-player:hover .vd-audio-progress::before,
.vd-audio-progress:hover::before,
.vd-audio-progress.vd-audio-progress-seeking::before,
.vd-audio-disc-player.playing .vd-audio-progress::before {
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.vd-audio-disc-player:hover .vd-audio-progress,
.vd-audio-progress:hover,
.vd-audio-progress.vd-audio-progress-seeking {
  transform: none;
}

.vd-audio-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, #6d3bc4, #8b5cf6);
  border-radius: 999px;
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
  min-width: 0;
  z-index: 1;
}

.vd-audio-disc-player:hover .vd-audio-progress-bar,
.vd-audio-progress:hover .vd-audio-progress-bar,
.vd-audio-progress.vd-audio-progress-seeking .vd-audio-progress-bar,
.vd-audio-disc-player.playing .vd-audio-progress-bar {
  height: 4px;
}

.vd-audio-progress-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.32), 0 1px 6px rgba(0, 0, 0, 0.38);
  transform: translate(50%, -50%);
  opacity: 0.92;
  transition: opacity 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.vd-audio-progress-bar[style*="width: 0%"]::after {
  opacity: 0;
}

.vd-audio-disc-player:hover .vd-audio-progress-bar::after,
.vd-audio-progress:hover .vd-audio-progress-bar::after,
.vd-audio-progress.vd-audio-progress-seeking .vd-audio-progress-bar::after,
.vd-audio-disc-player.playing .vd-audio-progress-bar::after {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.34), 0 1px 7px rgba(0, 0, 0, 0.42);
}

.vd-audio-time {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.56);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Volume control вЂ” top-right corner, always visible */
.vd-audio-volume-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
}

.vd-audio-volume-btn {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  pointer-events: auto;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.vd-audio-volume-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

.vd-audio-volume-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vd-audio-volume-btn.muted svg {
  stroke: rgba(255, 80, 80, 0.75);
}

.vd-audio-volume-slider-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 42px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(15, 15, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s ease 0.35s, transform 0.18s ease 0.35s;
  z-index: 100;
}

.vd-audio-volume-slider-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
}

.vd-audio-volume-wrap:hover .vd-audio-volume-slider-wrap,
.vd-audio-volume-wrap:focus-within .vd-audio-volume-slider-wrap,
.vd-audio-volume-slider-wrap:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.vd-audio-volume-wrap.vd-popup-force-hidden .vd-audio-volume-slider-wrap,
.vd-settings-open .vd-audio-volume-slider-wrap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, 6px) !important;
}

.vd-settings-open .vd-audio-volume-wrap {
  z-index: 1 !important;
}

.vd-audio-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
  background: transparent;
  transform: rotate(-90deg);
  transform-origin: center;
  cursor: pointer;
}

.vd-audio-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.85) var(--vd-vol-pct, 100%),
      rgba(255, 255, 255, 0.12) var(--vd-vol-pct, 100%),
      rgba(255, 255, 255, 0.12) 100%);
}

.vd-audio-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.85) var(--vd-vol-pct, 100%),
      rgba(255, 255, 255, 0.12) var(--vd-vol-pct, 100%),
      rgba(255, 255, 255, 0.12) 100%);
}

.vd-audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-top: -4px;
}

.vd-audio-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.vd-audio-source {
  display: none;
}

.vd-custom-player {
  background: rgba(12, 12, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  border-radius: 12px;
  overflow: hidden;
}

.vd-video-stage {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 10px 10px 0 0;
  user-select: none;
  -webkit-user-select: none;
}

.vd-video-stage-compare {
  cursor: pointer;
}

.vd-video-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid scrim вЂ” backdrop-filter causes black banding/squares in AE 2020 CEP (old CEF). */
  background: rgba(8, 8, 10, 0.78);
  border: 0;
  outline: 0;
  pointer-events: none;
  border-radius: inherit;
}

.vd-video-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.vd-spinner-lg {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 214, 10, 0.9);
  border-radius: 50%;
  background: transparent;
  animation: vdSpin 0.7s linear infinite;
}

.vd-video-loading-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.vd-media-video-custom {
  width: 100%;
  max-width: none;
  border-radius: 0;
}

.vd-video-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: height 0.12s ease;
}

.vd-video-progress-bar:hover {
  height: 6px;
}

.vd-video-progress-bar-fill {
  width: 0;
  height: 100%;
  background: #0a84ff;
  border-radius: 0 2px 2px 0;
  transition: width 0.06s linear;
}

.vd-video-compare-pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.vd-media-video-compare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}

.vd-video-badge {
  position: absolute;
  top: 20px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.vd-video-badge-left {
  left: 10px;
}

.vd-video-badge-right {
  right: 10px;
}

.vd-video-badge-single {
  left: 10px;
}

.vd-video-badge-hidden {
  opacity: 0;
  visibility: hidden;
}

.vd-video-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 14px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.vd-video-handle {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  outline: none;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  touch-action: none;
}

.vd-video-handle::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 9px auto;
  border-left: 2px solid rgba(0, 0, 0, 0.55);
  border-right: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 1px;
}

.vd-video-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(12, 12, 14, 0.98));
}

.vd-video-controls-spacer {
  flex: 1 1 auto;
}

.vd-video-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, transform 0.08s ease;
}

.vd-video-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.vd-video-btn:active {
  transform: scale(0.96);
}

.vd-video-volume-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.vd-video-volume-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 42px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(15, 15, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s ease 0.35s, transform 0.18s ease 0.35s;
}

.vd-video-volume-pop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
}

.vd-video-volume-wrap:hover .vd-video-volume-pop,
.vd-video-volume-wrap:focus-within .vd-video-volume-pop,
.vd-video-volume-pop:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.vd-video-time {
  flex-shrink: 0;
  min-width: 34px;
  font-size: 11px;
  color: rgba(235, 235, 245, 0.72);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vd-video-progress {
  flex: 1;
  min-width: 0;
  accent-color: #0a84ff;
}

.vd-video-volume {
  width: 88px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #fff;
  transform: rotate(-90deg);
  transform-origin: center;
}

.vd-custom-player:fullscreen,
.vd-custom-player:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  background: #000;
  border-radius: 0;
  box-shadow: none;
}

.vd-custom-player:fullscreen .vd-video-stage,
.vd-custom-player:-webkit-full-screen .vd-video-stage {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.vd-custom-player:fullscreen .vd-media-video-custom,
.vd-custom-player:fullscreen .vd-media-video-compare,
.vd-custom-player:-webkit-full-screen .vd-media-video-custom,
.vd-custom-player:-webkit-full-screen .vd-media-video-compare {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

.vd-custom-player:fullscreen .vd-video-progress-bar,
.vd-custom-player:-webkit-full-screen .vd-video-progress-bar {
  position: absolute;
  bottom: 56px;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 20;
  transition: opacity 0.35s ease;
}

.vd-custom-player:fullscreen .vd-video-controls,
.vd-custom-player:-webkit-full-screen .vd-video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 12px 16px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, transparent 100%);
  transition: opacity 0.35s ease;
}

.vd-custom-player.vd-fs-idle .vd-video-controls,
.vd-custom-player.vd-fs-idle .vd-video-progress-bar {
  opacity: 0;
  pointer-events: none;
}

.vd-custom-player.vd-fs-idle {
  cursor: none;
}

.vd-media-sub {
  font-size: 12px;
  color: rgba(235, 235, 245, 0.55);
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: -0.05px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* meta row */
.vd-meta-row {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.55);
  margin-top: 2px;
  line-height: 1.35;
  letter-spacing: -0.05px;
}

.vd-platform-link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
}

.vd-platform-link:hover {
  text-decoration: underline;
}

.vd-platform-link-inert {
  color: rgba(235, 235, 245, 0.55);
  font-weight: 500;
}

.vd-user-link {
  color: #8ec5ff;
  text-decoration: underline;
  word-break: break-all;
}

.vd-user-link:hover {
  color: #b6dbff;
}

.vd-pick-group-title {
  margin: 10px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(235, 235, 245, 0.52);
}

/* song link */
.vd-song-link {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
}

.vd-song-link:hover {
  text-decoration: underline;
  color: #fff;
}

.vd-song-link.vd-marquee {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.vd-song-link.vd-marquee .vd-marquee-inner {
  animation: vdMarquee var(--vd-marquee-dur, 8s) ease-in-out infinite;
}

/* action button row */
.vd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.vd-actions-row .vd-dl-btn {
  margin-top: 0;
}

.vd-find-music-btn,
.vd-original-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 14px;
  background: rgba(120, 120, 128, 0.22);
  color: #fff;
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.1px;
  transition: background 0.12s ease, transform 0.08s ease;
}

.vd-find-music-btn:hover,
.vd-original-btn:hover {
  background: rgba(120, 120, 128, 0.34);
}

.vd-find-music-btn:active,
.vd-original-btn:active {
  transform: scale(0.97);
}

.vd-original-btn {
  color: #ffd60a;
  min-width: 44px;
  padding: 8px 10px;
  gap: 0;
}

.vd-original-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.vd-original-btn-loading {
  background: rgba(255, 214, 10, 0.16);
  color: #ffe46b;
}

.vd-original-btn-loading:hover {
  background: rgba(255, 214, 10, 0.16);
}

.vd-hd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 214, 10, 0.16);
  color: #ffd60a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.vd-hd-badge-sm {
  min-width: 28px;
  padding: 3px 7px;
}

/* format selector label */
.vd-formats-label {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.5);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 4px;
}

.vd-fmt-btn {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  padding: 6px 11px;
}

.vd-fmt-label {
  font-size: 13px;
  font-weight: 600;
}

.vd-fmt-size {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(235, 235, 245, 0.55);
  margin-top: 1px;
}

.vd-fmt-audio .vd-fmt-size {
  color: rgba(235, 235, 245, 0.7);
}

/* pending music preview actions */
.vd-preview-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.vd-preview-confirm,
.vd-preview-cancel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  letter-spacing: -0.1px;
  transition: background 0.12s ease, transform 0.08s ease;
}

.vd-preview-confirm {
  background: #30d158;
  color: #fff;
}

.vd-preview-confirm:hover {
  background: #4bdd70;
}

.vd-preview-cancel {
  background: rgba(255, 69, 58, 0.2);
  color: #ff6961;
}

.vd-preview-cancel:hover {
  background: rgba(255, 69, 58, 0.32);
}

.vd-preview-confirm:active,
.vd-preview-cancel:active {
  transform: scale(0.97);
}

/* speed + slowed remix controls */
.vd-speed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.vd-speed-btn {
  appearance: none;
  border: none;
  outline: none;
  padding: 4px 9px;
  border-radius: 9px;
  background: transparent;
  color: rgba(235, 235, 245, 0.72);
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}

.vd-speed-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.vd-speed-btn:active {
  transform: scale(0.94);
}

.vd-speed-btn-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.12);
}

.vd-pitch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 9px 4px 8px;
  border-radius: 9px;
  background: rgba(120, 120, 128, 0.16);
  color: rgba(235, 235, 245, 0.78);
  border: none;
  outline: none;
  cursor: pointer;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: 0.2px;
  transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}

.vd-pitch-toggle svg {
  opacity: 0.85;
}

.vd-pitch-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.vd-pitch-toggle:active {
  transform: scale(0.94);
}

.vd-pitch-toggle-active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.12);
}

.vd-pitch-toggle-active svg {
  opacity: 1;
}

/* pager for pick list */
.vd-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.vd-pager-btn {
  appearance: none;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.16);
  color: rgba(235, 235, 245, 0.82);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}

.vd-pager-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.vd-pager-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.vd-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.vd-pager-label {
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: rgba(235, 235, 245, 0.7);
  letter-spacing: 0.3px;
  min-width: 44px;
  text-align: center;
}

/* music pick list (for "Find music" flow) */
.vd-pick-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.vd-music-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.14);
  border: 0.5px solid rgba(84, 84, 88, 0.25);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, transform 0.06s ease;
}

.vd-music-pick:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.vd-music-pick:active {
  transform: scale(0.985);
}

.vd-music-pick-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(120, 120, 128, 0.2);
}

.vd-music-pick-text {
  flex: 1;
  min-width: 0;
}

.vd-music-pick-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.28;
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vd-music-pick-sub {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.55);
  margin-top: 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-music-pick-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-music-pick.vd-music-pick-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* attached music block under a ready media job */
.vd-attached-music {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(30, 30, 34, 0.94), rgba(18, 18, 22, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: visible;
}

.vd-attached-music-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.vd-attached-music-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vd-attached-music-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.vd-attached-music-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(120, 120, 128, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.vd-attached-music-text {
  flex: 1;
  min-width: 0;
}

.vd-attached-music-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.28;
  letter-spacing: -0.1px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.vd-attached-music-sub {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.58);
  margin-top: 2px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.vd-attached-music-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.24);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}

.vd-attached-music-remove:hover {
  background: rgba(255, 69, 58, 0.38);
}

.vd-attached-music-player {
  --vd-att-progress: 0%;
  --vd-att-volume: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(88px, 108px);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.vd-attached-music-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vd-attached-music-times {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.vd-attached-music-time {
  font-size: 11px;
  color: rgba(235, 235, 245, 0.58);
  font-variant-numeric: tabular-nums;
}

.vd-attached-music-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vd-attached-music-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.vd-attached-music-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.vd-attached-music-btn:active {
  transform: scale(0.94);
}

.vd-attached-music-play {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.vd-attached-music-play:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.vd-attached-music-progress,
.vd-attached-music-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.vd-attached-music-progress {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.9) var(--vd-att-progress),
      rgba(255, 255, 255, 0.12) var(--vd-att-progress),
      rgba(255, 255, 255, 0.12) 100%);
}

.vd-attached-music-volume {
  min-width: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.75) var(--vd-att-volume),
      rgba(255, 255, 255, 0.12) var(--vd-att-volume),
      rgba(255, 255, 255, 0.12) 100%);
}

.vd-attached-music-progress::-webkit-slider-thumb,
.vd-attached-music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.vd-attached-music-progress::-moz-range-thumb,
.vd-attached-music-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.vd-attached-music-progress::-moz-range-track,
.vd-attached-music-volume::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.vd-attached-music-audio {
  display: none;
}

/* Disc layout variant for attached player вЂ” mirrors main disc player design */
.vd-attached-music-player.vd-att-disc-layout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(42, 36, 56, 0.96) 0%, rgba(28, 24, 40, 0.97) 100%);
  border: 1px solid rgba(120, 80, 180, 0.13);
  border-radius: 12px;
  position: relative;
}

.vd-att-disc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(120, 80, 200, 0.35), rgba(60, 40, 100, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.vd-att-disc:hover {
  background: radial-gradient(circle at 40% 40%, rgba(140, 100, 220, 0.45), rgba(80, 50, 130, 0.6));
  transform: scale(1.06);
}

.vd-att-disc-inner {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.vd-att-disc-icon {
  width: 16px;
  height: 16px;
  fill: rgba(255, 255, 255, 0.9);
  z-index: 1;
  pointer-events: none;
}

.vd-att-disc.playing {
  box-shadow: 0 4px 16px rgba(120, 80, 200, 0.35);
}

.vd-att-disc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.vd-att-disc-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 24px;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 80%, transparent 98%);
}

.vd-att-disc-progress-wrap {
  width: 100%;
}

.vd-att-disc-progress {
  height: 3px !important;
  background: linear-gradient(90deg,
      rgba(109, 59, 196, 0.85) 0%,
      rgba(109, 59, 196, 0.85) var(--vd-att-progress),
      rgba(255, 255, 255, 0.06) var(--vd-att-progress),
      rgba(255, 255, 255, 0.06) 100%) !important;
}

.vd-att-disc-progress::-webkit-slider-thumb {
  width: 10px !important;
  height: 10px !important;
  background: #8b5cf6 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

.vd-att-disc-progress::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  background: #8b5cf6 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

.vd-att-disc-time {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vd-att-disc-dur {
  color: rgba(255, 255, 255, 0.28);
}

/* Marquee animation for long audio titles */
@keyframes vdMarquee {

  0%,
  12% {
    transform: translateX(0);
  }

  50%,
  62% {
    transform: translateX(var(--vd-marquee-scroll, -50px));
  }

  100% {
    transform: translateX(0);
  }
}

.vd-marquee-inner {
  display: inline-block;
}

.vd-audio-title.vd-marquee,
.vd-att-disc-title.vd-marquee {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.vd-audio-title.vd-marquee .vd-marquee-inner,
.vd-att-disc-title.vd-marquee .vd-marquee-inner {
  animation: vdMarquee var(--vd-marquee-dur, 8s) ease-in-out infinite;
}

.vd-att-volume-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
}

.vd-att-volume-wrap .vd-audio-volume-slider-wrap {
  overflow: visible;
}

.vd-att-volume-wrap .vd-audio-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
  background: transparent;
  transform: rotate(-90deg);
  transform-origin: center;
  cursor: pointer;
}

.vd-att-volume-wrap .vd-audio-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.85) var(--vd-att-volume, 100%),
      rgba(255, 255, 255, 0.12) var(--vd-att-volume, 100%),
      rgba(255, 255, 255, 0.12) 100%);
}

.vd-att-volume-wrap .vd-audio-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.85) var(--vd-att-volume, 100%),
      rgba(255, 255, 255, 0.12) var(--vd-att-volume, 100%),
      rgba(255, 255, 255, 0.12) 100%);
}

.vd-att-volume-wrap .vd-audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-top: -4px;
}

.vd-att-volume-wrap .vd-audio-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.vd-attached-music-dl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.84);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05px;
  transition: background 0.12s ease, color 0.12s ease;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.vd-attached-music-dl:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* search-mode state for input */
.vd-input-bar.vd-search-mode .vd-input {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

.vd-input-bar.vd-search-mode .vd-send-btn {
  background: rgba(255, 255, 255, 0.16);
}

.vd-shazam-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* input bar */
.vd-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  background: rgba(22, 22, 24, 0.92);
  border-top: 0.5px solid rgba(84, 84, 88, 0.35);
  flex-shrink: 0;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.vd-input {
  flex: 1;
  border: 0.5px solid rgba(84, 84, 88, 0.5);
  background: rgba(28, 28, 30, 0.95);
  color: #fff;
  border-radius: 18px;
  padding: 9px 16px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
  letter-spacing: -0.1px;
}

.vd-input:focus {
  border-color: rgba(10, 132, 255, 0.6);
  background: rgba(28, 28, 30, 1);
}

.vd-input::placeholder {
  color: rgba(235, 235, 245, 0.3);
}

.vd-attach-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(235, 235, 245, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease, border-color 0.15s ease;
}

.vd-attach-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(235, 235, 245, 0.9);
}

.vd-attach-btn:active {
  transform: scale(0.92);
}

.vd-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0a84ff;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, transform 0.08s ease;
}

.vd-send-btn:hover {
  background: #409cff;
}

.vd-send-btn:active {
  transform: scale(0.92);
}

/* в•ђв•ђв•ђ VD Context Menu (right-click) в•ђв•ђв•ђ */
.vd-context-menu {
  position: fixed;
  z-index: 2147483647;
  min-width: 150px;
  padding: 5px 0;
  background: rgba(30, 30, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  display: none;
}

.vd-context-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}

.vd-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.vd-context-item-danger {
  color: #ff453a;
}

.vd-context-item-danger:hover {
  background: rgba(255, 69, 58, 0.12);
}

/* в•ђв•ђв•ђ VD Selection Mode в•ђв•ђв•ђ */
.vd-msg-selected {
  background: rgba(10, 132, 255, 0.10) !important;
  border-radius: 18px;
}

.vd-msg-selected .vd-msg-bubble {
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.45);
}

.vd-msg-check {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0a84ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vd-msg-bot .vd-msg-check {
  right: auto;
  left: -28px;
}

.vd-msg {
  position: relative;
}

.vd-selection-mode .vd-msg {
  cursor: pointer;
}

.vd-selection-mode .vd-msg:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
}

.vd-selection-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(22, 22, 24, 0.95);
  border-top: 0.5px solid rgba(84, 84, 88, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.vd-selection-bar.active {
  display: flex;
}

.vd-selection-count {
  font-size: 14px;
  font-weight: 600;
  color: rgba(235, 235, 245, 0.8);
}

.vd-selection-actions {
  display: flex;
  gap: 8px;
}

.vd-selection-btn {
  padding: 7px 16px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(120, 120, 128, 0.2);
  color: #fff;
  font-family: inherit;
  transition: background 0.12s;
}

.vd-selection-btn:hover {
  background: rgba(120, 120, 128, 0.32);
}

.vd-selection-delete {
  background: rgba(255, 69, 58, 0.18);
  color: #ff453a;
}

.vd-selection-delete:hover {
  background: rgba(255, 69, 58, 0.3);
}

/* hide normal input bar when selecting */
.vd-selection-mode .vd-input-bar {
  display: none;
}

/* clear-history header button */
.vd-clear-btn {
  color: rgba(255, 69, 58, 0.7);
}

.vd-clear-btn:hover {
  color: #ff453a;
  background: rgba(255, 69, 58, 0.1);
}

/* в•ђв•ђв•ђ TikTok-style Audio Player Card в•ђв•ђв•ђ */
.vd-tk-disc-wrap {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.vd-tk-disc-wrap .vd-tk-playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.vd-tk-disc-wrap:hover .vd-tk-playbtn,
.vd-tk-player.vd-tk-playing .vd-tk-disc-wrap .vd-tk-playbtn {
  opacity: 1;
}

.vd-tk-disc-wrap .vd-tk-playbtn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb, 168, 92, 255), 0.4);
}

.vd-tk-disc-wrap .vd-tk-playbtn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.vd-tk-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 30, 34, 0.96), rgba(18, 18, 22, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.vd-tk-player::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 168, 92, 255), 0.06), rgba(var(--accent-rgb, 168, 92, 255), 0.03));
  pointer-events: none;
}

.vd-tk-disc {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1a1a1a;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: vdTkDiscIdle 0s linear infinite paused;
}

.vd-tk-player.vd-tk-playing .vd-tk-disc {
  animation: vdTkDiscSpin 3s linear infinite running;
}

@keyframes vdTkDiscSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes vdTkDiscIdle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.vd-tk-disc-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0c0c0e;
  border: 2px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
}

.vd-tk-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
}

.vd-tk-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vd-tk-sub {
  font-size: 11.5px;
  color: rgba(235, 235, 245, 0.58);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-tk-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin: 2px 0;
}

.vd-tk-wave span {
  display: block;
  width: 3px;
  background: rgba(var(--accent-rgb, 168, 92, 255), 0.5);
  border-radius: 2px;
  height: 4px;
  transition: height 0.15s ease;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span {
  animation: vdTkWave 0.6s ease-in-out infinite alternate;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(1) {
  animation-delay: 0s;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(2) {
  animation-delay: 0.08s;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(3) {
  animation-delay: 0.16s;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(4) {
  animation-delay: 0.24s;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(5) {
  animation-delay: 0.32s;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(6) {
  animation-delay: 0.40s;
}

.vd-tk-player.vd-tk-playing .vd-tk-wave span:nth-child(7) {
  animation-delay: 0.48s;
}

@keyframes vdTkWave {
  0% {
    height: 3px;
    background: rgba(var(--accent-rgb, 168, 92, 255), 0.4);
  }

  100% {
    height: 14px;
    background: rgba(var(--accent-rgb, 168, 92, 255), 0.8);
  }
}

.vd-tk-seek-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.vd-tk-seek {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.vd-tk-seek-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent, #a85cff), var(--accent-light, #c794ff));
  border-radius: 4px;
  transition: width 0.1s linear;
}

.vd-tk-time {
  font-size: 10px;
  color: rgba(235, 235, 245, 0.55);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

.vd-tk-playbtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #a85cff), var(--accent-light, #c794ff));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb, 168, 92, 255), 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  z-index: 1;
}

.vd-tk-playbtn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb, 168, 92, 255), 0.4);
}

.vd-tk-playbtn:active {
  transform: scale(0.95);
}

.vd-tk-audio {
  display: none;
}

/* в•ђв•ђв•ђ Candidate list dismiss X button в•ђв•ђв•ђ */
.vd-track-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.vd-track-list-dismiss {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(120, 120, 128, 0.22);
  color: rgba(235, 235, 245, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.vd-track-list-dismiss:hover {
  background: rgba(255, 69, 58, 0.28);
  color: #ff6961;
}

/* в•ђв•ђв•ђ Settings overlay fix вЂ” full coverage + opacity в•ђв•ђв•ђ */
.ff-settings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.90);
  z-index: 1013;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ff-settings-card {
  width: min(420px, calc(100% - 24px));
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background: rgba(18, 16, 16, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.ff-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ff-settings-actions button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-settings-row>span {
  min-width: 0;
  line-height: 1.35;
}

#vdSettingsOverlay .ff-settings-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

#vdSettingsOverlay .ff-settings-row-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#vdSettingsOverlay .ff-settings-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
  background: #ff5a5a;
  box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.35), 0 0 10px rgba(255, 90, 90, 0.55);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#vdSettingsOverlay .ff-settings-status-dot.is-set {
  background: #4caf50;
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.35), 0 0 10px rgba(76, 175, 80, 0.45);
}

#vdSettingsOverlay .ff-settings-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

#vdSettingsOverlay .ff-settings-row-actions .btn-dropdown {
  width: auto;
  min-width: 110px;
  max-width: 160px;
  justify-content: space-between;
}

#vdSettingsOverlay .ff-settings-field--template .ff-settings-row--template {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: stretch;
}

#vdSettingsOverlay .ff-settings-field--template .ff-settings-row-label {
  width: 100%;
}

#vdSettingsOverlay .ff-settings-field--template .ff-settings-row-actions {
  width: 100%;
  justify-content: stretch;
}

#vdSettingsOverlay .ff-settings-field--template .ff-settings-row-actions .btn-dropdown {
  width: 100%;
  min-width: 0;
  max-width: none;
}

#vdSettingsOverlay .ff-settings-field--template #vdProjectTemplateLabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding-left: 14px;
  padding-right: 6px;
}

#vdSettingsOverlay #btnVDChooseTemplate {
  position: relative;
  justify-content: center !important;
  padding-right: 24px !important;
}

#vdSettingsOverlay #btnVDChooseTemplate .vd-template-choose-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

#vdSettingsOverlay .ff-settings-field {
  margin-bottom: 2px;
}

#vdSettingsOverlay .ff-settings-field .ff-settings-row {
  margin-bottom: 4px;
}

#vdSettingsOverlay .ff-settings-row-hint {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.32);
  padding: 0 2px 12px 18px;
}

#vdSettingsOverlay .ff-settings-row-hint--actions {
  padding-left: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}

body.light-theme #vdSettingsOverlay .ff-settings-row-hint {
  color: rgba(0, 0, 0, 0.38);
}

body.light-theme #vdSettingsOverlay .ff-settings-status-dot {
  box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.25), 0 0 8px rgba(255, 90, 90, 0.35);
}

body.light-theme #vdSettingsOverlay .ff-settings-status-dot.is-set {
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.25), 0 0 8px rgba(76, 175, 80, 0.35);
}

.ff-settings-toggle-row {
  align-items: center;
}

.ff-settings-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ff-settings-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
}

.ff-settings-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.ff-settings-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 800;
  cursor: help;
  flex: 0 0 auto;
}

.ff-settings-help-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  min-width: 220px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(12, 12, 14, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.44);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 5;
}

.ff-settings-help:hover .ff-settings-help-tip,
.ff-settings-help:focus .ff-settings-help-tip {
  opacity: 1;
}

#ffSettings .ff-settings-card {
  width: min(448px, calc(100% - 20px));
}

#ffSettings .ff-settings-row {
  grid-template-columns: minmax(84px, 110px) minmax(0, 1fr);
}

#ffSettings .ff-settings-row input,
#ffSettings .ff-settings-row select {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#ffSettings .ff-settings-row>span {
  white-space: normal;
}

#ffCacheDisk {
  min-width: 0 !important;
  max-width: 100%;
}

.vd-template-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.72);
  z-index: 10040;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vd-template-modal-card {
  width: min(360px, calc(100% - 20px));
  background: linear-gradient(180deg, rgba(28, 26, 28, 0.98), rgba(18, 16, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.vd-template-modal-title {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 4px;
}

.vd-template-modal-sub,
.vd-template-modal-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.vd-template-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.vd-template-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vd-template-modal input {
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  padding: 0 12px;
  box-sizing: border-box;
}

.vd-template-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.vd-template-modal-actions button {
  min-width: 110px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.vd-template-modal-actions button:last-child {
  background: rgba(255, 255, 255, 0.14);
}

.vd-template-picker-card {
  width: min(420px, calc(100% - 20px));
  padding: 16px;
}

.vd-template-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vd-template-picker-add {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.vd-template-picker-add:hover {
  background: rgba(255, 255, 255, 0.14);
}

.vd-template-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-height: min(50vh, 360px);
  overflow: auto;
}

.vd-template-picker-item {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.vd-template-picker-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.vd-template-picker-item.is-active .vd-template-picker-main {
  border-color: rgba(10, 132, 255, 0.45);
  background: rgba(10, 132, 255, 0.14);
}

.vd-template-picker-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.vd-template-picker-meta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.58);
}

.vd-template-picker-delete {
  width: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 20px;
}

.vd-template-picker-delete:hover {
  background: rgba(255, 69, 58, 0.2);
  color: #fff;
}

.vd-template-picker-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.vd-hint-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vd-hint-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  line-height: 1.35;
}

.vd-hint-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.vd-hint-copy {
  display: block;
  min-width: 0;
  word-break: break-word;
}

.vd-welcome-sub {
  line-height: 1.35;
  max-width: 280px;
  margin: 0 auto;
}

.vd-welcome-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.vd-welcome-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  line-height: 1.35;
}

.vd-welcome-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.tg-vd-share-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tg-vd-share-head {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.tg-vd-share-thumb {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 54px;
  background: rgba(255, 255, 255, 0.08);
}

.tg-vd-share-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.tg-vd-share-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tg-vd-share-badge {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.58);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tg-vd-share-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.tg-vd-share-sub {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.tg-vd-share-actions {
  display: flex;
  justify-content: flex-end;
}

.tg-vd-share-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.tg-vd-share-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* в”Ђв”Ђ Format switcher (Quality button + popup) в”Ђв”Ђ */
.vd-fmt-switch-wrap {
  position: relative;
  display: inline-flex;
}

.vd-fmt-switch-trigger {
  cursor: pointer;
}

.vd-fmt-switch-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  min-width: 120px;
  background: rgba(30, 30, 36, 0.92);
  border-radius: 10px;
  padding: 5px 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.vd-fmt-switch-open .vd-fmt-switch-popup {
  display: block;
}

.vd-fmt-switch-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: background 0.12s ease;
}

.vd-fmt-switch-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.vd-fmt-switch-active {
  color: #6c8cff;
  pointer-events: none;
}

.vd-fmt-switch-active::before {
  content: 'вњ“ ';
}

/* в”Ђв”Ђ Inline Quality button inside video player controls в”Ђв”Ђ */
.vd-fmt-switch-inline {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
}

.vd-video-btn-quality {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.vd-video-btn-quality:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.vd-fmt-switch-popup-up {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}

body.light-theme .avatar-glow {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 70%);
}

body.light-theme .tabs .tab-indicator {
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}

.theme-option.active,
.chat-settings-apply,
.stg-apply-mini,
.login-btn:hover,
.admin-btn:hover,
#btnAccountManagement,
#_mpBtn,
#btnSaveNickname {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
}

.theme-option.active {
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.18);
}

.login-btn:hover,
.admin-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15), 0 12px 28px rgba(var(--accent-rgb), 0.12);
  color: var(--accent-fg);
}

.chat-settings-apply,
.stg-apply-mini,
#btnAccountManagement,
#_mpBtn,
#btnSaveNickname {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#btnAccountManagement:hover,
#_mpBtn:hover,
#btnSaveNickname:hover,
body.light-theme #_mpBtn:hover,
body.light-theme #btnSaveNickname:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.22), 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  color: var(--accent-fg);
}

#chatSettingsModal .settings-avatar-button {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

#chatSettingsModal .settings-avatar-img {
  border-color: rgba(var(--accent-rgb), 0.26);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(var(--accent-rgb), 0.10);
}

#chatSettingsModal .settings-avatar-chip {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(var(--accent-rgb), 0.22);
}

#chatSettingsModal input.kzn-range-slider[type="range"] {
  --kzn-range-pct: 0%;
  width: 100% !important;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent-light) var(--kzn-range-pct),
      rgba(255, 255, 255, 0.16) var(--kzn-range-pct),
      rgba(255, 255, 255, 0.16) 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

#chatSettingsModal input.kzn-range-slider[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: transparent;
  border: 0;
}

#chatSettingsModal input.kzn-range-slider[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.42),
    0 0 0 4px rgba(var(--accent-rgb), 0.16);
}

#chatSettingsModal input.kzn-range-slider[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent-light) var(--kzn-range-pct),
      rgba(255, 255, 255, 0.16) var(--kzn-range-pct),
      rgba(255, 255, 255, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

#chatSettingsModal input.kzn-range-slider[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.42),
    0 0 0 4px rgba(var(--accent-rgb), 0.16);
}

body.light-theme #chatSettingsModal input.kzn-range-slider[type="range"] {
  border-color: rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent-light) var(--kzn-range-pct),
      rgba(0, 0, 0, 0.12) var(--kzn-range-pct),
      rgba(0, 0, 0, 0.12) 100%) !important;
}

.stg-upload-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stg-upload-preview {
  position: relative;
  min-height: 132px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.stg-upload-preview img,
.stg-upload-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.28s ease;
  transform: scale(1.03);
}

.stg-upload-preview.has-media {
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.stg-upload-preview.has-media img,
.stg-upload-preview.has-media video {
  opacity: 1;
}

.stg-upload-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.48));
  pointer-events: none;
}

.stg-upload-preview span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 18px);
  margin: 0 9px 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.light-theme .stg-upload-preview {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 244, 246, 0.92));
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .stg-upload-preview span {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1f2937;
}

@media (max-width: 640px) {
  .stg-upload-preview-row {
    grid-template-columns: 1fr;
  }
}

.tabs .tab-indicator {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -10px 18px rgba(var(--accent-rgb), 0.18);
}

.tab {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.tab.active {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 18px rgba(var(--accent-rgb), 0.18);
}

.tab.active img,
.tab.active svg {
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.22));
}

.avatar-ring {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 16px 38px rgba(var(--accent-rgb), 0.22), 0 0 0 1px rgba(var(--accent-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.avatar-glow {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.24), transparent 72%);
  box-shadow: 0 0 52px 16px rgba(var(--accent-rgb), 0.36), 0 0 96px 30px rgba(var(--accent-rgb), 0.18);
}

.main-story-active {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.40), 0 0 38px rgba(var(--accent-rgb), 0.18);
}

#btnSaveNickname,
.nickname-input-group #btnSaveNickname,
#btnAccountManagement,
#_mpBtn,
.chat-settings-apply,
.stg-apply-mini,
.theme-option.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  color: var(--accent-fg) !important;
}

.nickname-input-group #btnSaveNickname,
#btnSaveNickname {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.30), 0 4px 0 rgba(var(--accent-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -10px 16px rgba(var(--accent-rgb), 0.20) !important;
}

#btnAccountManagement,
#_mpBtn {
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.profile-action-btn__icon,
.profile-action-btn--accent .profile-action-btn__icon {
  color: color-mix(in srgb, var(--accent-fg) 92%, transparent);
}

.stg-row-icon,
.kzn-setting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(var(--accent-rgb), 0.12);
}

.stg-row-icon svg,
.kzn-setting-icon svg {
  stroke: currentColor;
}

/* iOS-style toggle for chat settings */
.kzn-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kzn-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.kzn-toggle-track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border-radius: 22px;
  background: rgba(120, 120, 128, 0.32);
  transition: background 0.25s ease;
}

.kzn-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14), 0 0.5px 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.kzn-toggle input:checked + .kzn-toggle-track {
  background: var(--accent);
}

.kzn-toggle input:checked + .kzn-toggle-track .kzn-toggle-thumb {
  transform: translateX(18px);
  background: var(--accent-fg);
}

.kzn-toggle input:focus-visible + .kzn-toggle-track {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
}

.kzn-avatar-frame-overlay {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.kzn-avatar-frame-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes kznPulseArcDrift {
  0% { transform: rotate(-8deg); }
  12.5% { transform: rotate(-5.65deg); }
  25% { transform: rotate(0deg); }
  37.5% { transform: rotate(5.65deg); }
  50% { transform: rotate(8deg); }
  62.5% { transform: rotate(5.65deg); }
  75% { transform: rotate(0deg); }
  87.5% { transform: rotate(-5.65deg); }
  100% { transform: rotate(-8deg); }
}

@keyframes kznPulseArcFade {
  0%, 100% { opacity: 0.42; }
  25%, 75% { opacity: 0.55; }
  50% { opacity: 0.68; }
}

@keyframes kznPulseRingBreathe {
  0%, 100% { opacity: 0.26; }
  25%, 75% { opacity: 0.33; }
  50% { opacity: 0.40; }
}

.kzn-pulse-frame-svg .kzn-pulse-arc {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.kzn-pulse-arc--1 {
  animation: kznPulseArcDrift 11s linear infinite;
}

.kzn-pulse-arc--2 {
  animation: kznPulseArcDrift 14s linear infinite;
  animation-delay: -3s;
}

.kzn-pulse-arc--3 {
  animation: kznPulseArcDrift 17s linear infinite, kznPulseArcFade 5s linear infinite;
  animation-delay: -6s, -1.5s;
}

.kzn-pulse-arc--ring {
  animation: kznPulseRingBreathe 6s linear infinite;
  animation-delay: -2s;
}

@media (prefers-reduced-motion: reduce) {
  .kzn-pulse-arc--1,
  .kzn-pulse-arc--2,
  .kzn-pulse-arc--3,
  .kzn-pulse-arc--ring {
    animation: none !important;
  }
}

#chatSettingsModal .settings-avatar-button {
  overflow: visible;
}

#chatSettingsModal .settings-avatar-button .kzn-avatar-frame-overlay {
  inset: -8px;
  z-index: 5;
}

#chatSettingsModal .settings-avatar-button .kzn-avatar-frame-overlay--pulse {
  inset: -12px !important;
  z-index: 5 !important;
}

#chatSettingsModal .settings-avatar-button.kzn-avatar-has-frame--pulse .settings-avatar-img {
  border: 2px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(var(--accent-rgb), 0.10) !important;
}

#avatarFrameLivePreview .kzn-avatar-framed .kzn-avatar-frame-overlay--pulse {
  inset: -8px !important;
  z-index: 4 !important;
}

#chatSettingsModal .settings-avatar-button .kzn-avatar-frame-overlay--discord {
  inset: -7px;
}

.kzn-profile-custom-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.kzn-profile-custom-col--frames {
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kzn-profile-custom-col--cover {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kzn-profile-custom-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
  align-self: stretch;
  min-height: 100%;
}

#avatarFramePicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

#avatarFrameLivePreview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72px;
  padding: 4px 0;
}

.kzn-avatar-frame-option {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  padding: 0;
}

.kzn-avatar-frame-option.is-active {
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 8px 18px rgba(var(--accent-rgb), 0.18);
}

.kzn-picker-ring {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.5);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.kzn-picker-ring.is-checked {
  background: rgba(var(--accent-rgb), 0.9);
  border-color: var(--accent);
}

.kzn-picker-send-btn {
  width: 100%;
  height: 50px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
  letter-spacing: 0.3px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kzn-picker-send-btn:hover {
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.65);
  transform: scale(1.02);
}

.kzn-picker-send-btn:active {
  transform: scale(0.97);
}

body.light-theme .stg-row-icon,
body.light-theme .kzn-setting-icon {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 6px 16px rgba(var(--accent-rgb), 0.10);
}

.kzn-info-icon {
  background: rgba(var(--accent-rgb), 0.12) !important;
  border-color: rgba(var(--accent-rgb), 0.18) !important;
}

.new-message-actions button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.08);
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.new-message-actions button:hover {
  opacity: 1;
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.20);
}

.new-message-actions button:hover img {
  filter: brightness(0) invert(1);
}

.kzn-trust-btn-accept {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-light);
  border-color: rgba(var(--accent-rgb), 0.30);
}

.kzn-trust-btn-accept:hover {
  background: rgba(var(--accent-rgb), 0.20);
  border-color: rgba(var(--accent-rgb), 0.48);
}

.chat-list-item.pending-trust {
  border-left-color: rgba(var(--accent-rgb), 0.52);
}

body.light-theme .messenger-overlay {
  background: rgba(247, 247, 250, 0.94);
  backdrop-filter: blur(18px);
}

body.light-theme .chat-list-container,
body.light-theme .chat-window-container,
body.light-theme .chat-window-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 246, 250, 0.94));
}

body.light-theme .chat-list-container {
  border-right-color: rgba(var(--accent-rgb), 0.10);
}

body.light-theme .chat-list-header,
body.light-theme .chat-window-header,
body.light-theme .chat-window-input-area {
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .chat-window-header-name,
body.light-theme .chat-back-btn,
body.light-theme .clear-history-btn {
  color: #374151;
}

body.light-theme .chat-back-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
}

body.light-theme .chat-window-placeholder {
  color: #6b7280;
}

body.light-theme .chat-composer-shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 247, 251, 0.96) 100%);
  border-color: rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.light-theme .chat-composer-main {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.08);
}

body.light-theme .chat-composer-shell .chat-window-input {
  color: #111827;
}

body.light-theme .chat-composer-shell .chat-window-input::placeholder {
  color: #6b7280;
}

body.light-theme .chat-composer-shell .laptop-btn,
body.light-theme .picker-nav-btn {
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.12);
  color: #374151;
}

body.light-theme .chat-composer-shell .laptop-btn:hover,
body.light-theme .picker-nav-btn:hover {
  color: #111827;
  background: rgba(var(--accent-rgb), 0.12);
}

body.light-theme .sticker-picker-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 252, 0.98) 100%);
  border-color: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
}

body.light-theme .picker-nav-btn.active {
  color: #111827;
}

body.light-theme .add-sticker-btn {
  background: rgba(var(--accent-rgb), 0.04);
}

body.light-theme .message-bubble.incoming {
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  border: 1px solid rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

body.light-theme .message-bubble.outgoing {
  background: var(--accent-chat-surface);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18);
}

body.light-theme .message-bubble.outgoing a {
  color: var(--chat-active-fg);
}

body.light-theme .message-bubble.outgoing a:hover {
  color: var(--chat-active-fg);
}


.stg-row .switch {
  margin-left: 12px;
}


.stg-row--gradient-toggle {
  align-items: flex-start;
}


.stg-row--gradient-toggle .stg-row-left {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 10px;
}


.stg-row--gradient-toggle .switch {
  margin-top: 2px;
}


.stg-row--gradient-toggle .stg-row-hint {
  font-size: 10px;
  line-height: 1.2;
  max-width: 180px;
}


html.is-cep .stg-row--gradient-toggle .stg-row-hint {
  max-width: 150px;
}

html.is-cep body.light-theme .chat-list-container,
html.is-cep body.light-theme .chat-window-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 250, 0.96)) !important;
}

body.light-theme .tool-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 252, 0.96));
  border-color: rgba(var(--accent-rgb), 0.10);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.08), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

body.light-theme .tool-tile:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.12), 0 0 0 1px rgba(var(--accent-rgb), 0.10);
}

body.light-theme .tool-tile .tile-icon {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.10);
}

body.light-theme .tool-tile .tile-icon-text {
  color: #374151;
}

body.light-theme .tool-tile .tile-label {
  color: #433c5a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.light-theme .tool-tile .tile-icon img {
  filter: brightness(0) saturate(100%);
  opacity: 0.78;
}

body.light-theme .tool-tile .tile-icon svg {
  stroke: #374151;
  opacity: 0.92;
}

body.light-theme .top-right-icons .icon-btn,
body.light-theme .bottom-right-controls .icon-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light-theme .top-right-icons .icon-btn:hover,
body.light-theme .bottom-right-controls .icon-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.light-theme .top-right-icons .icon-btn img,
body.light-theme .bottom-right-controls .icon-btn img,
body.light-theme .text-icon-btn img {
  filter: brightness(0) saturate(100%);
  opacity: 0.76;
}

body.light-theme #btnInstagram img {
  filter: none;
  opacity: 0.96;
}

body.light-theme #btnDiscord img {
  filter: brightness(0) saturate(100%) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7));
  opacity: 0.9;
}

body.light-theme .top-right-icons .icon-btn svg,
body.light-theme .bottom-right-controls .icon-btn svg,
body.light-theme #btnSupport svg {
  stroke: #374151;
}

body.light-theme #btnSupport svg {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.65));
}

body.light-theme .kzn-auth-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f8 100%);
  border-color: rgba(var(--accent-rgb), 0.12);
  box-shadow:
    0 18px 36px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -4px 12px rgba(0, 0, 0, 0.04);
}

body.light-theme .kzn-auth-eyebrow {
  color: #111827;
}

body.light-theme .kzn-social-btn--telegram {
  border-color: rgba(34, 158, 217, 0.28);
  background: rgba(34, 158, 217, 0.84);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.08);
}

body.light-theme .kzn-social-btn--telegram .kzn-social-btn__icon {
  background: rgba(27, 142, 199, 0.72);
  border-color: rgba(255, 255, 255, 0.22);
}

body.light-theme .kzn-social-btn--discord {
  border-color: rgba(88, 101, 242, 0.28);
  background: rgba(88, 101, 242, 0.84);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.08);
}

body.light-theme .kzn-social-btn--discord .kzn-social-btn__icon {
  background: rgba(79, 91, 213, 0.72);
  border-color: rgba(255, 255, 255, 0.22);
}

body.light-theme .kzn-social-btn {
  background: #ececf0;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 6px rgba(0, 0, 0, 0.04);
}

body.light-theme .kzn-social-btn:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 6px rgba(0, 0, 0, 0.05);
}

body.light-theme .kzn-social-btn--telegram:hover,
body.light-theme .kzn-social-btn--discord:hover {
  transform: translateY(-1px);
}

body.light-theme .kzn-social-btn__title {
  color: #fff;
}

body.light-theme .kzn-social-btn__meta,
body.light-theme .kzn-social-btn__chevron {
  color: rgba(255, 255, 255, 0.82);
}

body.light-theme .kzn-social-btn__icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 16px rgba(var(--accent-rgb), 0.08);
}

body.light-theme .kzn-social-btn__icon img {
  filter: brightness(0) saturate(100%);
  opacity: 0.82;
}

body.light-theme #chatSearchInput,
body.light-theme .gif-search-input,
body.light-theme #tgVoiceServerSearchInput {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(var(--accent-rgb), 0.14) !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.08);
}

body.light-theme #chatSearchInput::placeholder,
body.light-theme .gif-search-input::placeholder,
body.light-theme #tgVoiceServerSearchInput::placeholder {
  color: #6b7280;
}

body.light-theme .chat-search-wrap svg,
body.light-theme #tgVoiceServerSearchClose svg {
  stroke: #4b5563 !important;
}

body.light-theme .profile-name-wrapper .messenger-icon-btn img {
  filter: brightness(0) saturate(100%);
  opacity: 0.78;
}

body.light-theme .profile-name-wrapper .messenger-icon-btn:hover img {
  opacity: 0.96;
}

.top-left-icons {
  position: absolute;
  top: 20px;
  left: 16px;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.top-left-icons .icon-btn {
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.04);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
  padding: 0;
}

.top-left-icons .icon-btn:hover {
  transform: rotate(-10deg);
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.16);
}

.top-left-icons .icon-btn img,
.top-left-icons .icon-btn svg {
  width: 22px;
  height: 22px;
}

body:not(.light-theme) .top-left-icons .icon-btn img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  opacity: 0.95;
}

.premium-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-icon-btn {
  background: linear-gradient(180deg, rgba(24, 24, 28, 0.96), rgba(12, 12, 15, 0.98));
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.shop-icon-btn:hover {
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ae-shop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.ae-shop-overlay.is-visible {
  opacity: 1;
}

.ae-shop-shell {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: linear-gradient(180deg, rgba(12, 12, 14, 0.99), rgba(17, 17, 20, 0.99));
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.985);
  transition: transform 0.2s ease;
}

.ae-shop-shell--locked .ae-shop-header,
.ae-shop-shell--locked .ae-shop-topbar,
.ae-shop-shell--locked .ae-shop-content {
  pointer-events: none;
  user-select: none;
  filter: blur(5px) saturate(0.92);
}

.ae-shop-preview-lock {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  pointer-events: auto;
}

.ae-shop-lock-close-btn {
  position: absolute;
  top: var(--kzn-close-inset);
  right: var(--kzn-close-inset);
  z-index: 31;
  pointer-events: auto;
}

.ae-shop-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.ae-shop-soon-title {
  font-family: 'SF Pro Display', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.ae-shop-soon-sub {
  font-family: 'SF Pro Text', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.48);
}

.ae-shop-overlay.is-visible .ae-shop-shell {
  transform: translateY(0) scale(1);
}

.ae-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 28px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ae-shop-header-copy {
  min-width: 0;
}

.ae-shop-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.42);
}

.ae-shop-title {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 1000;
  color: #fff;
  letter-spacing: -0.02em;
}

.ae-shop-subtitle {
  margin-top: 8px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}

.ae-shop-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ae-shop-wallet {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(24, 24, 28, 0.98), rgba(15, 15, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.ae-shop-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.ae-shop-balance-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}

.ae-shop-balance-label {
  font-size: 11px;
  letter-spacing: 0.9px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.ae-shop-balance-value {
  font-size: 18px;
  font-weight: 1000;
  color: #fff;
}

.ae-shop-buy-ae-btn,
.ae-shop-primary-btn,
.ae-shop-secondary-btn,
.ae-shop-buy-btn,
.ae-shop-link-btn {
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.ae-shop-buy-ae-btn,
.ae-shop-primary-btn,
.ae-shop-buy-btn {
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(56, 56, 62, 0.98), rgba(23, 23, 28, 0.98));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -8px 18px rgba(0, 0, 0, 0.22);
}

.ae-shop-buy-ae-btn:hover,
.ae-shop-primary-btn:hover,
.ae-shop-buy-btn:hover,
.ae-shop-secondary-btn:hover,
.ae-shop-link-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.ae-shop-secondary-btn,
.ae-shop-link-btn {
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(34, 34, 39, 0.96), rgba(18, 18, 21, 0.98));
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ae-shop-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ae-shop-lock-note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 800;
}

.ae-shop-buy-btn--owned {
  background: linear-gradient(180deg, rgba(70, 70, 78, 0.98), rgba(31, 31, 36, 0.98));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ae-shop-buy-btn--muted,
.ae-shop-buy-btn:disabled {
  background: linear-gradient(180deg, rgba(63, 63, 70, 0.9), rgba(39, 39, 42, 0.95));
  color: rgba(255, 255, 255, 0.52);
  cursor: default;
  box-shadow: none;
}

.ae-shop-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ae-shop-topbar {
  display: flex;
  justify-content: center;
  padding: 16px 28px 14px;
}

.ae-shop-section-title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}

.ae-shop-section-sub,
.ae-shop-helper-text,
.ae-shop-history-meta,
.ae-shop-card-meta,
.ae-shop-card-desc,
.ae-shop-cover-status {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.ae-shop-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.ae-shop-tab {
  min-width: 160px;
  height: 46px;
  padding: 0 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(42, 42, 48, 0.98), rgba(19, 19, 23, 0.98));
  color: rgba(255, 255, 255, 0.82);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -7px 14px rgba(0,0,0,0.2);
}

.ae-shop-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(79, 79, 88, 0.98), rgba(26, 26, 31, 0.98));
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -8px 16px rgba(0,0,0,0.24);
}

.ae-shop-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 28px 28px;
}

.ae-shop-panel,
.ae-shop-form-card,
.ae-shop-list-card,
.ae-shop-history-card,
.ae-shop-stat-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(16, 16, 19, 0.98), rgba(11, 11, 13, 0.99));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ae-shop-panel,
.ae-shop-form-card,
.ae-shop-list-card,
.ae-shop-history-card {
  padding: 18px;
}

.ae-shop-stat-card {
  padding: 18px;
}

.ae-shop-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ae-shop-pill {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.ae-shop-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ae-shop-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ae-shop-field--full {
  grid-column: 1 / -1;
}

.ae-shop-field span,
.ae-shop-stat-label,
.ae-shop-history-title {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}

.ae-shop-field input,
.ae-shop-field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  padding: 12px 14px;
  outline: none;
  box-sizing: border-box;
}

.ae-shop-field textarea {
  resize: vertical;
  min-height: 112px;
}

.ae-shop-cover-row,
.ae-shop-form-actions,
.ae-shop-card-head,
.ae-shop-card-actions,
.ae-shop-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ae-shop-form-actions {
  margin-top: 16px;
  align-items: flex-end;
}

.ae-shop-cards,
.ae-shop-history-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ae-shop-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ae-shop-card-preview {
  min-height: 168px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ae-shop-card-media,
.ae-shop-card-preview video,
.ae-shop-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ae-shop-card-fallback {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(77, 127, 255, 0.92), rgba(48, 79, 190, 0.98));
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
}

.ae-shop-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ae-shop-card-title,
.ae-shop-stat-value {
  font-size: 20px;
  font-weight: 1000;
  color: #fff;
}

.ae-shop-price,
.ae-shop-history-amount {
  font-size: 14px;
  font-weight: 1000;
  color: #fff;
}

.ae-shop-history-amount.is-positive {
  color: #6ee7b7;
}

.ae-shop-empty {
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  font-weight: 700;
}

@media (max-width: 980px) {
  .ae-shop-card {
    grid-template-columns: 1fr;
  }

  .ae-shop-header,
  .ae-shop-head-actions,
  .ae-shop-wallet,
  .ae-shop-form-actions,
  .ae-shop-cover-row,
  .ae-shop-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

body.light-theme .top-left-icons .icon-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  color: #374151;
}

body.light-theme .shop-icon-btn {
  border-color: rgba(59, 130, 246, 0.18) !important;
}

body.light-theme .tab img,
body.light-theme .tab svg {
  filter: brightness(0) saturate(100%);
  opacity: 0.72;
}

body.light-theme .tab.active img,
body.light-theme .tab.active svg {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
  opacity: 1;
}

body.light-theme #btnSaveNickname,
body.light-theme .nickname-input-group #btnSaveNickname {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  color: var(--accent-fg) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.light-theme .messenger-header .edit-chats-btn,
body.light-theme .messenger-header .new-message-btn,
body.light-theme #btnOpenChatSettings {
  color: #374151 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(var(--accent-rgb), 0.14) !important;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.light-theme .messenger-header .edit-chats-btn:hover,
body.light-theme .messenger-header .new-message-btn:hover,
body.light-theme #btnOpenChatSettings:hover {
  background: rgba(var(--accent-rgb), 0.10) !important;
  border-color: rgba(var(--accent-rgb), 0.18) !important;
}

body.light-theme #btnHeaderAddStory {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.24);
}

body.light-theme #headerQuickMenu {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(var(--accent-rgb), 0.14) !important;
  box-shadow: 0 18px 45px rgba(var(--accent-rgb), 0.12), 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .chat-window-header-avatar.tg-story-ring {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.84), 0 0 0 6px rgba(var(--accent-rgb), 0.18), 0 0 22px rgba(var(--accent-rgb), 0.20) !important;
}

body.light-theme .vd-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 244, 248, 0.98));
  color: #1f2937;
}

body.light-theme .vd-header,
body.light-theme .vd-input-bar,
body.light-theme .vd-selection-bar {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-rgb), 0.12);
}

body.light-theme .vd-chat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 250, 0.96));
}

/* CEP: Downloader welcome text only (keep panel layout unchanged) */
html.is-cep #vdPanel .vd-welcome-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html.is-cep #vdPanel .vd-welcome-sub {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html.is-cep #vdPanel .vd-welcome-item {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

html.is-cep #vdPanel .vd-welcome-list {
  gap: 6px !important;
  margin-top: 8px !important;
}

html.is-cep #vdPanel .vd-welcome-extra {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

/* CEP: compact VD "How it works" hint modal (web unchanged) */
html.is-cep #vdHintOverlay.vd-template-modal {
  padding: 10px !important;
}

html.is-cep #vdHintOverlay .vd-template-modal-card {
  width: min(268px, calc(100% - 16px)) !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

html.is-cep #vdHintOverlay .vd-template-modal-title {
  font-size: 13px !important;
  margin-bottom: 2px !important;
}

html.is-cep #vdHintOverlay .vd-template-modal-sub {
  font-size: 10px !important;
  line-height: 1.3 !important;
}

html.is-cep #vdHintOverlay .vd-hint-list {
  gap: 6px !important;
  margin-top: 6px !important;
}

html.is-cep #vdHintOverlay .vd-hint-list li {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 6px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

html.is-cep #vdHintOverlay .vd-hint-icon {
  width: 18px !important;
  height: 18px !important;
}

html.is-cep #vdHintOverlay .vd-hint-icon svg {
  width: 13px !important;
  height: 13px !important;
}

html.is-cep #vdHintOverlay .vd-template-modal-actions {
  margin-top: 8px !important;
}

html.is-cep #vdHintOverlay .vd-template-modal-actions button {
  min-width: 84px !important;
  height: 32px !important;
  font-size: 11px !important;
}

body.light-theme .vd-title,
body.light-theme .vd-media-title,
body.light-theme .vd-selection-count {
  color: #1f2937;
}

body.light-theme .vd-subtitle,
body.light-theme .vd-media-duration,
body.light-theme .vd-msg-status,
body.light-theme .vd-msg-time {
  color: #6b7280;
}

body.light-theme .vd-header-btn,
body.light-theme .vd-attach-btn {
  color: #4b5563;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(var(--accent-rgb), 0.12);
}

body.light-theme .vd-header-btn:hover,
body.light-theme .vd-attach-btn:hover {
  color: #1f2937;
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.18);
}

body.light-theme .vd-input {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(var(--accent-rgb), 0.14);
  color: #1f2937;
}

body.light-theme .vd-input:focus {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(var(--accent-rgb), 0.28);
}

body.light-theme .vd-input::placeholder {
  color: #9ca3af;
}

body.light-theme .vd-msg-bot .vd-msg-bubble {
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  border: 1px solid rgba(var(--accent-rgb), 0.10);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

body.light-theme .vd-msg-user .vd-msg-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.18);
}

body.light-theme .vd-context-menu {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10), 0 8px 20px rgba(var(--accent-rgb), 0.08);
}

body.light-theme .vd-context-item,
body.light-theme .vd-selection-btn {
  color: #1f2937;
}

body.light-theme .vd-selection-btn {
  background: rgba(var(--accent-rgb), 0.10);
}

body.light-theme .vd-selection-btn:hover {
  background: rgba(var(--accent-rgb), 0.16);
}

.stg-row--stacked {
  align-items: flex-start;
}

.stg-preset-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.stg-preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.16);
}

.stg-preset-card.has-preset {
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(var(--accent-rgb), 0.12);
}

.stg-preset-head {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stg-preset-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.stg-preset-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stg-preset-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stg-preset-btn {
  min-width: 74px;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.stg-preset-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(var(--accent-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 12px rgba(0, 0, 0, 0.14);
}

.stg-preset-btn:disabled,
.stg-preset-btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.42;
}

.stg-preset-btn--save,
.stg-preset-btn--apply {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.stg-preset-btn--delete {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -4px 12px rgba(0, 0, 0, 0.2);
}

.stg-preset-loading {
  padding: 10px 4px 4px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 700;
}

body.light-theme .stg-preset-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 250, 0.96));
  border-color: rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.10), 0 3px 10px rgba(0, 0, 0, 0.05);
}

body.light-theme .stg-preset-card.has-preset {
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.light-theme .stg-preset-title {
  color: #6b7280;
}

body.light-theme .stg-preset-name {
  color: #111827;
}

body.light-theme .stg-preset-btn {
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-rgb), 0.16);
}

body.light-theme .stg-preset-btn--save,
body.light-theme .stg-preset-btn--apply {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08));
  color: #1f2937;
}

body.light-theme .stg-preset-loading {
  color: #6b7280;
}

@media (max-width: 720px) {
  .stg-preset-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .stg-preset-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Wallpaper upload button with inline preview */
.stg-upload-btn {
  position: relative;
  overflow: hidden;
}

.stg-upload-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.25s ease;
}

.stg-upload-btn.has-media .stg-upload-preview-media {
  opacity: 1;
}

.stg-upload-btn.has-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

.stg-upload-icon,
.stg-upload-text {
  position: relative;
  z-index: 2;
}

.stg-upload-btn.has-media {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(var(--accent-rgb), 0.16);
}

.stg-upload-btn.has-media .stg-upload-icon,
.stg-upload-btn.has-media .stg-upload-text {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* в”Ђв”Ђ CEP: Compact profile action buttons в”Ђв”Ђ */
html.is-cep .login-btn,
html.is-cep .logout-btn,
html.is-cep .admin-btn {
  height: 40px;
  border-radius: 12px;
  font-size: 12px;
}

html.is-cep .profile-action-btn__label {
  min-height: 40px;
  font-size: 12px;
  padding: 0 36px;
}

html.is-cep .profile-action-btn__icon {
  left: 12px;
}

html.is-cep .profile-action-btn__icon svg {
  width: 15px;
  height: 15px;
}

html.is-cep .profile-actions-row {
  gap: 6px;
  margin-top: 6px;
}

html.is-cep #btnAccountManagement,
html.is-cep #_mpBtn,
html.is-cep #btnLogout {
  height: 40px !important;
}

html.is-cep #btnAccountManagement .profile-action-btn__label,
html.is-cep #_mpBtn .profile-action-btn__label,
html.is-cep #btnLogout .profile-action-btn__label {
  min-height: 40px;
}

/* CEP: compact profile header (avatar, cover, nickname, bio) */
html.is-cep #userProfileCoverContainer {
  height: 88px !important;
}

html.is-cep #userProfileModalInner .kzn-avatar-framed,
html.is-cep #userProfileModalInner .kzn-avatar-framed--discord {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
}

html.is-cep #userProfileModalInner .kzn-avatar-framed img,
html.is-cep #userProfileModalInner .kzn-avatar-framed--discord img,
html.is-cep #userProfileModalInner #userProfileAvatarImg {
  width: 48px !important;
  height: 48px !important;
}

html.is-cep #userProfileNickname {
  font-size: 16px !important;
}

html.is-cep #userProfileHandle {
  font-size: 12px !important;
}

html.is-cep #userProfileModalInner [style*="padding:20px 20px 0"] {
  padding: 12px 12px 0 !important;
  gap: 8px !important;
}

html.is-cep #userProfileModalInner [style*="padding-bottom:20px"] {
  padding-bottom: 12px !important;
}

html.is-cep #userProfileModalInner #btnMessageUser {
  height: 40px !important;
  font-size: 13px !important;
  border-radius: 14px !important;
}

html.is-cep #userProfileModalInner #btnMuteUser {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
}

html.is-cep #userProfileModalInner [style*="max-width: 480px"] {
  gap: 10px !important;
}

html.is-cep .nickname-box {
  padding: 10px 12px;
  border-radius: 12px;
}

html.is-cep .nickname-box label {
  font-size: 10px;
  margin-bottom: 5px;
}

html.is-cep .logged-in-as {
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 4px;
}

html.is-cep #loggedInUsername {
  font-size: 11.5px;
}

/* в”Ђв”Ђ Fix avatar ring transition flicker в”Ђв”Ђ */
.avatar-ring,
.avatar-ring img,
.avatar-glow {
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Inline Emoji images styling */
img.emoji {
  height: 1.25em;
  width: 1.25em;
  display: inline-block;
  vertical-align: -0.2em;
  margin: 0 0.12em;
  object-fit: contain;
}

/* --- Support Ban Appeal Questionnaire --- */
.support-questionnaire-card {
  margin: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.support-questionnaire-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.support-questionnaire-subtitle {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
  line-height: 1.4;
}
.support-questionnaire-field {
  margin-bottom: 12px;
}
.support-questionnaire-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
  display: block;
  font-weight: 600;
}
.support-questionnaire-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
  font-size: 12.5px;
  outline: none;
  resize: vertical;
  min-height: 50px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.support-questionnaire-input:focus {
  border-color: var(--accent, #a85cff);
  box-shadow: 0 0 0 3px rgba(168, 92, 255, 0.15);
}
.support-questionnaire-submit {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--accent, #a85cff);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  margin-top: 4px;
}
.support-questionnaire-submit:hover {
  opacity: 0.9;
}
.support-questionnaire-submit:active {
  transform: scale(0.98);
}
.support-ban-banner {
  margin: 14px 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.25);
  color: #ff453a;
  font-size: 12.5px;
  line-height: 1.4;
}
.support-ban-banner-title {
  font-weight: 700;
  margin-bottom: 3px;
}

/* 3D Buttons for Appeals Panel */
.btn-3d {
  min-width: 74px;
  height: 30px;
  padding: 0 14px;
  border-radius: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  outline: none;
  box-sizing: border-box;
}

/* Green Approve 3D Button */
.btn-3d-approve {
  background: linear-gradient(135deg, #30d158, #248a3d);
  border-color: rgba(48, 209, 88, 0.5);
  box-shadow: 
    0 4px 12px rgba(48, 209, 88, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-approve:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 18px rgba(48, 209, 88, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-approve:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 6px rgba(48, 209, 88, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 4px rgba(0, 0, 0, 0.2);
}

/* Red Reject 3D Button */
.btn-3d-reject {
  background: linear-gradient(135deg, #ff453a, #c9261f);
  border-color: rgba(255, 69, 58, 0.5);
  box-shadow: 
    0 4px 12px rgba(255, 69, 58, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-reject:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 18px rgba(255, 69, 58, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-reject:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 6px rgba(255, 69, 58, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 4px rgba(0, 0, 0, 0.2);
}

/* Sky-Blue Telemetry 3D Button */
.btn-3d-telemetry {
  background: linear-gradient(135deg, #5ac8fa, #007af5);
  border-color: rgba(90, 200, 250, 0.5);
  box-shadow: 
    0 4px 12px rgba(90, 200, 250, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-telemetry:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 18px rgba(90, 200, 250, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-telemetry:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 6px rgba(90, 200, 250, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 4px rgba(0, 0, 0, 0.2);
}

/* 3D status badges */
.badge-3d {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.badge-3d-pending {
  background: rgba(255, 159, 10, 0.15);
  color: #ff9f0a;
  border-color: rgba(255, 159, 10, 0.25);
}
.badge-3d-approved {
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
  border-color: rgba(48, 209, 88, 0.25);
}
.badge-3d-rejected {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
  border-color: rgba(255, 69, 58, 0.25);
}

/* Accent 3D Button */
.btn-3d-purple {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 
    0 4px 12px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-purple:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 18px rgba(var(--accent-rgb), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.btn-3d-purple:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 6px rgba(var(--accent-rgb), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 4px rgba(0, 0, 0, 0.2);
}

/* Premium 3D Appeal Card */
.appeal-card-3d {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              background 0.25s ease, 
              border-color 0.25s ease, 
              box-shadow 0.25s ease;
}

.appeal-card-3d:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
  box-shadow: 
    0 12px 38px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* в•ђв•ђв•ђ i18n polish: opaque menus, accent VD, 3D FF/VD buttons в•ђв•ђв•ђ */
.ff-settings {
  background: rgba(0, 0, 0, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ff-settings-card {
  background: #121011 !important;
}

.ff-update-dialog-overlay {
  background: rgba(0, 0, 0, 0.94) !important;
}

.ff-update-dialog,
.ff-modal,
.ff-input-modal {
  background: #121011 !important;
}

.ff-updates-add-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.ff-updates-add-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ff-updates-add-btn:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px rgba(var(--accent-rgb), 0.3),
    inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.ff-add-btn {
  background: #121011 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22) !important;
}

.ff-add-btn:hover {
  background: #181516 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22) !important;
}

.ff-update-dialog-input:focus,
.ff-update-dialog-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12) !important;
}

.ff-update-dialog-save,
#btnFFSaveSettings {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.ff-update-dialog-save:hover,
#btnFFSaveSettings:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ff-update-dialog-cancel,
#btnFFClearCache {
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -4px 12px rgba(0, 0, 0, 0.22) !important;
}

.ff-modal-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ff-modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-avatar,
.vd-msg-user .vd-msg-bubble,
.vd-send-btn,
.vd-video-progress-bar-fill,
.vd-selection-check {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
}

.vd-avatar {
  color: var(--accent-fg, #fff) !important;
}

.vd-avatar svg {
  stroke: currentColor !important;
}

#vdWelcome .vd-welcome-badge {
  display: none !important;
}

.vd-send-btn {
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-send-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6) !important;
}

.vd-msg-selected {
  background: rgba(var(--accent-rgb), 0.10) !important;
}

.vd-selection-check {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45) !important;
}

.vd-shazam-btn {
  color: var(--accent) !important;
}

.vd-shazam-btn:hover {
  color: var(--accent-light) !important;
  background: rgba(var(--accent-rgb), 0.12) !important;
}

.vd-variant-tag-tg {
  background: rgba(var(--accent-rgb), 0.2) !important;
  color: var(--accent-light) !important;
}

.vd-template-picker-item.is-active .vd-template-picker-main {
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  background: rgba(var(--accent-rgb), 0.14) !important;
}

.vd-template-picker-item.is-active .vd-template-picker-main,
.vd-template-picker-item.is-active .vd-template-picker-name,
.vd-template-picker-item.is-active .vd-template-picker-meta {
  color: var(--accent-fg, #fff) !important;
  -webkit-text-fill-color: var(--accent-fg, #fff) !important;
}

.vd-rebuild-btn,
.tg-vd-share-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-rebuild-btn:hover,
.tg-vd-share-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-dl-btn,
.vd-dl-menu-trigger {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-dl-btn:hover,
.vd-dl-menu-trigger:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vd-mp-progress,
.vd-mp-volume-slider,
.vd-mp-speed-slider {
  accent-color: var(--accent) !important;
}

/* в•ђв•ђв•ђ FF selection bar: opaque panel + 3D actions в•ђв•ђв•ђ */
.ff-selection-bar::before {
  background: #121011 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ff-import-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.5) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 14px rgba(var(--accent-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.ff-import-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ff-import-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985) !important;
}

.ff-move-btn,
.ff-bulk-delete-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ff-move-btn {
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -4px 12px rgba(0, 0, 0, 0.22) !important;
}

.ff-move-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -4px 12px rgba(0, 0, 0, 0.22) !important;
}

.ff-bulk-delete-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  box-shadow:
    0 4px 12px rgba(239, 68, 68, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ff-bulk-delete-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(239, 68, 68, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ff-clear-btn {
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -4px 12px rgba(0, 0, 0, 0.22) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.ff-clear-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -4px 12px rgba(0, 0, 0, 0.22) !important;
}

.ff-clear-btn::after {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.45) !important;
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.35) !important;
}

.ff-selection-bar.drag-over .ff-import-btn {
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.28),
    0 8px 20px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Hide custom sticker picker вЂ” keep emoji + GIF only */
#pickerStickerWrap,
.picker-nav-btn[data-picker="stickers"],
.add-sticker-btn,
#btnUploadCustomSticker {
  display: none !important;
}

/* Settings panel вЂ” fully opaque (language / theme) */
#settingsPanel.settings-panel,
.settings-panel {
  background: #080706 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-theme #settingsPanel.settings-panel,
body.light-theme .settings-panel {
  background: #f5f5f7 !important;
}

/* Appearance presets: low horizontal cards with compact icon actions. */
#appearancePresetList {
  gap: 8px !important;
}

#appearancePresetList .stg-preset-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: min-content 26px !important;
  row-gap: 6px !important;
  align-items: start !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

#appearancePresetList .stg-preset-head {
  display: contents !important;
}

#appearancePresetList .stg-preset-slot {
  display: none !important;
}

#appearancePresetList .stg-preset-meta {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

#appearancePresetList .stg-preset-title {
  font-size: 10px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

#appearancePresetList .stg-preset-name {
  margin-top: 2px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

#appearancePresetList .stg-preset-actions {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 26px) !important;
  justify-content: start !important;
  gap: 6px !important;
  width: auto !important;
}

#appearancePresetList .stg-preset-btn {
  position: relative !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -999px !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  background: linear-gradient(180deg, #29292e 0%, #1d1d22 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2) !important;
}

#appearancePresetList .stg-preset-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  text-indent: 0 !important;
}

#appearancePresetList .stg-preset-btn--save {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(var(--accent-rgb), 0.58) !important;
  box-shadow:
    0 3px 10px rgba(var(--accent-rgb), 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 6px rgba(0, 0, 0, 0.22) !important;
}

#appearancePresetList .stg-preset-btn--save::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h12l2 2v16H5zM7 5v5h9V5zm2 10v4h6v-4z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h12l2 2v16H5zM7 5v5h9V5zm2 10v4h6v-4z'/%3E%3C/svg%3E") !important;
  background: var(--accent-fg) !important;
}

#appearancePresetList .stg-preset-btn--apply::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.6 4.8 12.2 3 14l6.2 6.2L21 8.4 19.2 6.6z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.6 4.8 12.2 3 14l6.2 6.2L21 8.4 19.2 6.6z'/%3E%3C/svg%3E") !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

#appearancePresetList .stg-preset-btn--delete {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: rgba(239, 68, 68, 0.58) !important;
  box-shadow:
    0 3px 9px rgba(239, 68, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2) !important;
}

#appearancePresetList .stg-preset-btn--delete::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8l1 2h4v2H3V6h4zm-2 6h12l-1 11H7zm3 2v7h2v-7zm4 0v7h2v-7z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8l1 2h4v2H3V6h4zm-2 6h12l-1 11H7zm3 2v7h2v-7zm4 0v7h2v-7z'/%3E%3C/svg%3E") !important;
}

#appearancePresetList .stg-preset-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}

#appearancePresetList .stg-preset-btn:disabled,
#appearancePresetList .stg-preset-btn[aria-disabled="true"] {
  opacity: 0.34 !important;
  filter: saturate(0.35) !important;
  cursor: default !important;
}

body.light-theme #appearancePresetList .stg-preset-btn {
  background: linear-gradient(180deg, #ffffff 0%, #ececf2 100%) !important;
  border-color: rgba(63, 63, 70, 0.16) !important;
}

body.light-theme #appearancePresetList .stg-preset-btn--save {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
}

.stg-row--hidden-ultra,
.stg-divider--hidden-ultra {
  display: none !important;
}

/* Unified close (X) button — FlowFrames menu design */
.kzn-close-btn,
.close-btn,
.stg-close-btn,
.ff-modal-close,
.update-close-btn,
.vd-header-btn.vd-close-btn,
.media-close-btn,
.ae-shop-lock-close-btn,
.ae-shop-close-btn,
.tg-avatar-video-close,
.chat-attach-close,
.comments-header #btnCloseComments,
#btnCloseChatSettings,
#btnCloseGroupInfo,
#btnCloseUserProfile,
#btnCloseForgotPw,
#btnCloseAccountMgmt,
#btnCloseGroupModal,
#btnCancelCrop,
#btnCancelCoverCrop,
#tgPinnedClose,
#btnClose,
#kzn-promo-dismiss,
.tg-voice-settings-close,
#giPickerClose,
#tgTopNotificationClose,
#tgFwClose,
#btnCloseAdmin,
#btnCloseMessenger,
#btnCloseSettings,
#btnCloseFF,
#btnCloseVD {
  width: var(--kzn-close-size) !important;
  height: var(--kzn-close-size) !important;
  min-width: var(--kzn-close-size) !important;
  min-height: var(--kzn-close-size) !important;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--kzn-close-radius) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  font-weight: normal !important;
  box-sizing: border-box;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}

.kzn-close-btn svg,
.close-btn svg,
.stg-close-btn svg,
.ff-modal-close svg,
.update-close-btn svg,
.vd-header-btn.vd-close-btn svg,
.media-close-btn svg,
.ae-shop-lock-close-btn svg,
.ae-shop-close-btn svg,
.tg-avatar-video-close svg,
.chat-attach-close svg,
.comments-header #btnCloseComments svg,
#btnCloseChatSettings svg,
#btnCloseGroupInfo svg,
#btnCloseUserProfile svg,
#btnCloseForgotPw svg,
#btnCloseAccountMgmt svg,
#btnCloseGroupModal svg,
#btnCancelCrop svg,
#btnCancelCoverCrop svg,
#tgPinnedClose svg,
#btnClose svg,
#kzn-promo-dismiss svg,
.tg-voice-settings-close svg,
#giPickerClose svg,
#tgTopNotificationClose svg,
#tgFwClose svg,
#btnCloseAdmin svg,
#btnCloseMessenger svg,
#btnCloseSettings svg,
#btnCloseFF svg,
#btnCloseVD svg {
  width: var(--kzn-close-icon) !important;
  height: var(--kzn-close-icon) !important;
  display: block;
  flex-shrink: 0;
}

.kzn-close-btn:hover,
.close-btn:hover,
.stg-close-btn:hover,
.ff-modal-close:hover,
.update-close-btn:hover,
.vd-header-btn.vd-close-btn:hover,
.media-close-btn:hover,
.ae-shop-lock-close-btn:hover,
.ae-shop-close-btn:hover,
.tg-avatar-video-close:hover,
.chat-attach-close:hover,
.comments-header #btnCloseComments:hover,
#btnCloseChatSettings:hover,
#btnCloseGroupInfo:hover,
#btnCloseUserProfile:hover,
#btnCloseForgotPw:hover,
#btnCloseAccountMgmt:hover,
#btnCloseGroupModal:hover,
#btnCancelCrop:hover,
#btnCancelCoverCrop:hover,
#tgPinnedClose:hover,
#btnClose:hover,
#kzn-promo-dismiss:hover,
.tg-voice-settings-close:hover,
#giPickerClose:hover,
#tgTopNotificationClose:hover,
#tgFwClose:hover,
#btnCloseAdmin:hover {
  transform: scale(1.06) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.kzn-close-btn:active,
.close-btn:active,
.stg-close-btn:active,
.ff-modal-close:active,
.update-close-btn:active,
.vd-header-btn.vd-close-btn:active,
.media-close-btn:active,
.ae-shop-lock-close-btn:active,
.ae-shop-close-btn:active,
.tg-avatar-video-close:active,
.chat-attach-close:active,
.comments-header #btnCloseComments:active,
#btnCloseChatSettings:active,
#btnCloseGroupInfo:active,
#btnCloseUserProfile:active,
#btnCloseForgotPw:active,
#btnCloseAccountMgmt:active,
#btnCloseGroupModal:active,
#btnCancelCrop:active,
#btnCancelCoverCrop:active,
#tgPinnedClose:active,
#btnClose:active,
#kzn-promo-dismiss:active,
.tg-voice-settings-close:active,
#giPickerClose:active,
#tgTopNotificationClose:active,
#tgFwClose:active,
#btnCloseAdmin:active {
  transform: scale(0.96) !important;
}

.stg-close-btn,
.ai-header .close-btn,
.shame-header .close-btn {
  position: absolute !important;
  right: var(--kzn-close-inset) !important;
  top: 50% !important;
  transform: translateY(-50%);
}

.stg-close-btn:hover,
.ai-header .close-btn:hover,
.shame-header .close-btn:hover {
  transform: translateY(-50%) scale(1.06) !important;
}

.stg-close-btn:active,
.ai-header .close-btn:active,
.shame-header .close-btn:active {
  transform: translateY(-50%) scale(0.96) !important;
}

body.light-theme .kzn-close-btn,
body.light-theme .close-btn,
body.light-theme .stg-close-btn,
body.light-theme .ff-modal-close,
body.light-theme .update-close-btn,
body.light-theme .vd-header-btn.vd-close-btn,
body.light-theme .media-close-btn,
body.light-theme .ae-shop-lock-close-btn,
body.light-theme .ae-shop-close-btn,
body.light-theme .tg-avatar-video-close,
body.light-theme .chat-attach-close,
body.light-theme .comments-header #btnCloseComments,
body.light-theme #btnCloseChatSettings,
body.light-theme #btnCloseGroupInfo,
body.light-theme #btnCloseUserProfile,
body.light-theme #btnCloseForgotPw,
body.light-theme #btnCloseAccountMgmt,
body.light-theme #btnCloseGroupModal,
body.light-theme #btnCancelCrop,
body.light-theme #btnCancelCoverCrop,
body.light-theme #tgPinnedClose,
body.light-theme #btnClose,
body.light-theme #kzn-promo-dismiss,
body.light-theme .tg-voice-settings-close,
body.light-theme #giPickerClose,
body.light-theme #tgTopNotificationClose,
body.light-theme #tgFwClose,
body.light-theme #btnCloseAdmin {
  border-color: rgba(0, 0, 0, 0.10) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.72) !important;
}

body.light-theme .kzn-close-btn:hover,
body.light-theme .close-btn:hover,
body.light-theme .stg-close-btn:hover,
body.light-theme .ff-modal-close:hover,
body.light-theme .update-close-btn:hover,
body.light-theme .vd-header-btn.vd-close-btn:hover,
body.light-theme .media-close-btn:hover,
body.light-theme .ae-shop-lock-close-btn:hover,
body.light-theme .ae-shop-close-btn:hover,
body.light-theme .tg-avatar-video-close:hover,
body.light-theme .chat-attach-close:hover,
body.light-theme .comments-header #btnCloseComments:hover,
body.light-theme #btnCloseChatSettings:hover,
body.light-theme #btnCloseGroupInfo:hover,
body.light-theme #btnCloseUserProfile:hover,
body.light-theme #btnCloseForgotPw:hover,
body.light-theme #btnCloseAccountMgmt:hover,
body.light-theme #btnCloseGroupModal:hover,
body.light-theme #btnCancelCrop:hover,
body.light-theme #btnCancelCoverCrop:hover,
body.light-theme #tgPinnedClose:hover,
body.light-theme #btnClose:hover,
body.light-theme #kzn-promo-dismiss:hover,
body.light-theme .tg-voice-settings-close:hover,
body.light-theme #giPickerClose:hover,
body.light-theme #tgTopNotificationClose:hover,
body.light-theme #tgFwClose:hover,
body.light-theme #btnCloseAdmin:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #111 !important;
}

.media-close-btn {
  position: absolute !important;
  top: var(--kzn-close-inset) !important;
  right: var(--kzn-close-inset) !important;
}

.ae-shop-lock-close-btn {
  position: absolute !important;
  top: var(--kzn-close-inset) !important;
  right: var(--kzn-close-inset) !important;
}

/* Social browser picker (Instagram / TikTok) */
#btnInstagram.kzn-social-browser-mode svg {
  display: block;
}

body:not(.light-theme) #btnInstagram.kzn-social-browser-mode svg {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  opacity: 0.95;
}

body.light-theme #btnInstagram.kzn-social-browser-mode svg {
  color: #111;
  opacity: 0.82;
}

.kzn-social-browser-picker {
  position: fixed;
  z-index: 1000001;
  min-width: 220px;
  transform: translateY(-8px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: auto;
}

.kzn-social-browser-picker-card {
  background: rgba(18, 18, 22, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  border-radius: 18px;
  padding: 10px;
  color: #fff;
}

.kzn-social-browser-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
}

.kzn-social-browser-picker-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.kzn-social-browser-picker-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kzn-social-browser-picker-hint {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.32);
  padding: 0 4px 10px;
}

.kzn-social-browser-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: left;
}

.kzn-social-browser-choice-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.kzn-social-browser-choice-hint {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.34);
  padding-left: 32px;
}

.kzn-social-browser-choice img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  filter: none !important;
  opacity: 1 !important;
}

.kzn-social-browser-choice:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
}

.kzn-social-browser-choice:active {
  transform: scale(0.98);
}

body.light-theme .kzn-social-browser-picker-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
  color: #111;
}

body.light-theme .kzn-social-browser-picker-head {
  color: rgba(0, 0, 0, 0.62);
}

body.light-theme .kzn-social-browser-picker-hint,
body.light-theme .kzn-social-browser-choice-hint {
  color: rgba(0, 0, 0, 0.38);
}

body.light-theme .kzn-social-browser-picker-close {
  border-color: rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.04);
  color: #111;
}

body.light-theme .kzn-social-browser-choice {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: #111;
}

body.light-theme .kzn-social-browser-choice:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

/* CEP panel: compact anchored popovers (browser, notifications, chat ctx) */
html.is-cep .kzn-social-browser-picker {
  min-width: 0;
  max-width: calc(100vw - 12px);
}

html.is-cep .kzn-social-browser-picker-card {
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

html.is-cep .kzn-social-browser-picker-head {
  padding: 0 2px 6px;
  font-size: 11px;
}

html.is-cep .kzn-social-browser-picker-close {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 16px;
}

html.is-cep .kzn-social-browser-picker-hint,
html.is-cep .kzn-social-browser-choice-hint {
  display: none;
}

html.is-cep .kzn-social-browser-picker-actions {
  gap: 6px;
}

html.is-cep .kzn-social-browser-choice {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}

html.is-cep .kzn-social-browser-choice img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

html.is-cep #notificationCenter {
  width: calc(100vw - 12px) !important;
  max-width: 268px !important;
  max-height: min(240px, 38vh) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48) !important;
}

html.is-cep #notificationCenter > div:first-child {
  padding: 8px 10px !important;
}

html.is-cep #notificationCenter > div:first-child > div:first-child {
  font-size: 12px !important;
}

html.is-cep #btnClearNotifications {
  padding: 5px 8px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
}

html.is-cep #notificationCenterList {
  max-height: calc(min(240px, 38vh) - 44px) !important;
}

html.is-cep #notificationCenterList > div[style*="padding:14px"] {
  padding: 10px !important;
  font-size: 11px !important;
}

html.is-cep #notificationCenterList button {
  padding: 8px !important;
  min-height: 0 !important;
}

html.is-cep #notificationCenterList button[style*="min-height:72px"] {
  min-height: 52px !important;
}

html.is-cep #notificationCenterList button[style*="min-height:72px"] > div:first-child {
  width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
}

html.is-cep #chatListCtxMenu {
  min-width: 268px !important;
  width: min(280px, calc(100vw - 12px)) !important;
  max-width: calc(100vw - 12px) !important;
}

/* CEP chat: vertical scroll only, hide horizontal bar + white corner */
html.is-cep .messenger-body,
html.is-cep .chat-list-container,
html.is-cep .chat-window-messages,
html.is-cep .messenger-overlay {
  overflow-x: hidden !important;
}

html.is-cep .chat-list-container,
html.is-cep .chat-window-messages {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

html.is-cep .chat-list-container::-webkit-scrollbar,
html.is-cep .chat-window-messages::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

html.is-cep .chat-list-container::-webkit-scrollbar:horizontal,
html.is-cep .chat-window-messages::-webkit-scrollbar:horizontal {
  display: none !important;
  height: 0 !important;
}

html.is-cep .chat-list-container::-webkit-scrollbar-corner,
html.is-cep .chat-window-messages::-webkit-scrollbar-corner {
  background: transparent !important;
}

html.is-cep .chat-window-messages .message-bubble,
html.is-cep .chat-window-messages img,
html.is-cep .chat-window-messages video,
html.is-cep .chat-window-messages .custom-video-wrapper {
  max-width: 100%;
  box-sizing: border-box;
}

html.is-cep #headerQuickMenu {
  min-width: 0 !important;
  max-width: calc(100vw - 12px) !important;
  width: min(284px, calc(100vw - 12px)) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48) !important;
}

html.is-cep #headerQuickMenuToolbar {
  padding: 5px !important;
  gap: 5px !important;
}

html.is-cep #headerQuickMenu button[data-hdr] {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

html.is-cep #headerQuickMenu button[data-hdr] svg {
  width: 15px !important;
  height: 15px !important;
}

html.is-cep #chatListCtxMenu > div:first-child {
  padding: 5px !important;
  gap: 5px !important;
}

html.is-cep #chatListCtxMenu button[data-ctx] {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

html.is-cep #chatListCtxMenu button[data-ctx] svg {
  width: 15px !important;
  height: 15px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-root,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-root {
  padding: 10px !important;
  gap: 8px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-card,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-card {
  border-radius: 13px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-cover,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-cover {
  height: 56px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-body,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-body {
  padding: 0 10px 10px !important;
  gap: 8px !important;
  margin-top: -18px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-avatar,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  border-width: 2px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-name,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-name {
  font-size: 13px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-handle,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-handle {
  font-size: 11px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-actions,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-actions {
  gap: 7px !important;
}

html.is-cep #headerQuickMenuPreview .tg-chat-ctx-preview-actions button,
html.is-cep #tgChatCtxPreview .tg-chat-ctx-preview-actions button {
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-empty,
html.is-cep #tgChatCtxPreview .tg-activity-card-empty {
  padding: 12px !important;
  font-size: 12px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-link,
html.is-cep #tgChatCtxPreview .tg-activity-card-link {
  border-radius: 13px !important;
  margin-top: 7px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-inner,
html.is-cep #tgChatCtxPreview .tg-activity-card-inner {
  padding: 12px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-icon-wrap,
html.is-cep #tgChatCtxPreview .tg-activity-card-icon-wrap {
  width: 42px !important;
  height: 42px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-icon,
html.is-cep #tgChatCtxPreview .tg-activity-card-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-title,
html.is-cep #tgChatCtxPreview .tg-activity-card-title {
  font-size: 13px !important;
}

html.is-cep #headerQuickMenuPreview .tg-activity-card-note,
html.is-cep #tgChatCtxPreview .tg-activity-card-note {
  font-size: 11px !important;
}

.user-profile-activity {
  width: 100%;
}

.user-profile-activity .tg-activity-card-link:first-child {
  margin-top: 0 !important;
}

html.is-cep .user-profile-activity .tg-activity-card-link {
  border-radius: 13px !important;
}

html.is-cep .user-profile-activity .tg-activity-card-inner {
  padding: 12px !important;
}

html.is-cep .user-profile-activity .tg-activity-card-icon-wrap,
html.is-cep .user-profile-activity .tg-activity-card-icon {
  width: 42px !important;
  height: 42px !important;
}

html.is-cep .user-profile-activity .tg-activity-card-title {
  font-size: 13px !important;
}

html.is-cep .user-profile-activity .tg-activity-card-note {
  font-size: 11px !important;
}

/* FlowFrames Verification Styles */
.ff-media-card.pending-verification {
  opacity: 0.85;
  border: 1px dashed rgba(255, 190, 60, 0.4);
}
.ff-media-card.pending-verification:hover {
  opacity: 1;
  border-color: rgba(255, 190, 60, 0.8);
}
.ff-verification-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 190, 60, 0.9);
  color: #121010;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Enable and style scrollbars inside the admin panel */
.admin-panel * {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.03) !important;
}

.admin-panel *::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
}

.admin-panel *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
}

.admin-panel *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
}

.admin-panel *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* Fix the admin panel scroll behavior to feel like a premium desktop app */
.admin-panel-scroll {
  overflow: hidden !important;
}

.admin-menu-section {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto; /* Form sections will scroll if needed */
}

/* Columns-based sections should not scroll the whole section container */
#adminFlowFramesSection, #adminAppealsSection {
  overflow: hidden !important;
}
/* FF local patch: unified Script status + topmost cache confirm */
 .ff-diag-unified .ff-diag-dot {
  width: auto;
  height: 24px;
  min-width: 86px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(18, 18, 22, 0.94);
  opacity: 0.5;
  transition: opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ff-diag-unified .ff-diag-led {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff4d4d;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.62);
  flex: 0 0 auto;
}
.ff-diag-unified .ff-diag-label {
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.ff-diag-unified .ff-diag-dot[data-state="on"] .ff-diag-led {
  background: #3cdc78;
  box-shadow: 0 0 10px rgba(60, 220, 120, 0.62);
}

.ff-diag-unified .ff-diag-dot[data-state="off"] {
  background: rgba(28, 12, 14, 0.96);
}
.ff-diag-unified .ff-diag-dot[data-state="off"] .ff-diag-led {
  background: #ff4d4d;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.7);
}
.ff-panel .ff-modal-overlay,
.ff-modal-overlay.active {
  z-index: 2147483646 !important;
}
.ff-diag-unified .ff-diag-dot:hover {
  opacity: 1;
}

/* Profile display-name save: flat button, no 3D lip */
.nickname-input-group #btnSaveNickname,
#btnSaveNickname {
  height: 40px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.20) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transform: none !important;
}
.nickname-input-group #btnSaveNickname::after,
#btnSaveNickname::after {
  display: none !important;
}
.nickname-input-group #btnSaveNickname:hover,
#btnSaveNickname:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.nickname-input-group #btnSaveNickname:active,
#btnSaveNickname:active {
  transform: scale(.985) !important;
}

/* Accent foreground: keeps white/light accent buttons readable. */
.chat-list-item.active,
.chat-list-item.active .chat-name,
.chat-list-item.active .chat-last-message,
.chat-list-item.active .tg-chat-id,
.chat-list-item.active .tg-chat-row-menu-btn,
.message-bubble.outgoing,
.message-bubble.outgoing a,
.message-bubble.outgoing :where(.tg-voice-title, .tg-voice-meta, .tg-file-title, .tg-file-size, .kzn-chat-link-card, .kzn-chat-link-card *),
.message-bubble.outgoing .tg-voice-play,
.message-bubble.outgoing .tg-voice-play svg,
.message-bubble.outgoing .tg-voice-speed,
.tg-vd-share-btn,
.kzn-picker-send-btn,
.kzn-picker-send-btn svg,
.profile-action-btn--accent,
.profile-action-btn--accent .profile-action-btn__icon,
.profile-action-btn--accent .profile-action-btn__label,
.profile-action-btn--accent .profile-action-btn__chevron,
.nickname-input-group #btnSaveNickname,
#btnSaveNickname,
#btnHeaderAddStory,
#btnMessageUser,
#btnChangeGroupAvatar,
#btnAddGroupMembers,
#tgJoinGroupBtn,
.vd-dl-btn,
.vd-redownload-btn,
.vd-download-again,
.vd-card-redownload,
[data-vd-share-redownload],
[data-open-chat],
[data-ctx-preview="message"] {
  color: var(--accent-fg) !important;
}

.message-bubble.outgoing .tg-voice-play svg,
.kzn-picker-send-btn svg,
.profile-action-btn--accent svg,
#btnSaveNickname svg,
#btnHeaderAddStory svg,
#btnMessageUser svg,
#btnChangeGroupAvatar svg,
#btnAddGroupMembers svg,
#tgJoinGroupBtn svg,
.vd-dl-btn svg,
[data-vd-share-redownload] svg,
[data-open-chat] svg {
  stroke: currentColor !important;
}

.message-bubble.outgoing .tg-voice-play [fill],
.kzn-picker-send-btn [fill],
.profile-action-btn--accent [fill],
#btnSaveNickname [fill],
#btnHeaderAddStory [fill],
#btnMessageUser [fill],
#btnChangeGroupAvatar [fill],
#btnAddGroupMembers [fill],
#tgJoinGroupBtn [fill],
.vd-dl-btn [fill],
[data-vd-share-redownload] [fill],
[data-open-chat] [fill] {
  fill: currentColor !important;
}

.message-bubble.outgoing .tg-voice-wave-progress span {
  background: color-mix(in srgb, var(--accent-fg) 92%, transparent) !important;
}

.message-bubble.outgoing .tg-voice-wave-layer span {
  background: color-mix(in srgb, var(--accent-fg) 32%, transparent) !important;
}

/* Final accent foreground override: must stay after older button rules. */
.tab.active,
.tab.active *,
.theme-option.active,
.theme-option.active *,
.chat-settings-apply,
.chat-settings-apply *,
.stg-apply-mini,
.stg-apply-mini *,
.nickname-input-group #btnSaveNickname,
.nickname-input-group #btnSaveNickname *,
#btnSaveNickname,
#btnSaveNickname *,
.profile-action-btn--accent,
.profile-action-btn--accent *,
#btnAccountManagement,
#btnAccountManagement *,
#_mpBtn,
#_mpBtn *,
.kzn-picker-send-btn,
.kzn-picker-send-btn *,
.tg-vd-share-btn,
.tg-vd-share-btn *,
[data-vd-share-redownload],
[data-vd-share-redownload] *,
[data-open-chat],
[data-open-chat] * {
  color: var(--accent-fg) !important;
  text-shadow: none !important;
}

.tab.active svg,
.tab.active svg *,
.theme-option.active svg,
.theme-option.active svg *,
.chat-settings-apply svg,
.chat-settings-apply svg *,
.stg-apply-mini svg,
.stg-apply-mini svg *,
.nickname-input-group #btnSaveNickname svg,
.nickname-input-group #btnSaveNickname svg *,
#btnSaveNickname svg,
#btnSaveNickname svg *,
.profile-action-btn--accent svg,
.profile-action-btn--accent svg *,
#btnAccountManagement svg,
#btnAccountManagement svg *,
#_mpBtn svg,
#_mpBtn svg *,
.kzn-picker-send-btn svg,
.kzn-picker-send-btn svg *,
.tg-vd-share-btn svg,
.tg-vd-share-btn svg *,
[data-vd-share-redownload] svg,
[data-vd-share-redownload] svg *,
[data-open-chat] svg,
[data-open-chat] svg * {
  stroke: currentColor !important;
}

/* [FIX] CEP Panel Header adjustments */
html.is-cep .messenger-header {
  gap: 8px !important;
  padding: 10px var(--kzn-close-inset) !important;
}
html.is-cep .messenger-title {
  font-size: 16px !important;
  margin-right: 4px !important;
}
html.is-cep .chat-search-wrap {
  margin-right: 4px !important;
}
html.is-cep #btnVoiceMode {
  margin-right: 2px !important;
}
html.is-cep #headerAvatarWrap {
  margin-right: 2px !important;
}

#headerAvatarWrap {
  overflow: visible !important;
  width: 52px !important;
  height: 52px !important;
}

#btnOpenChatSettings.kzn-header-avatar-btn {
  position: relative;
  z-index: 2;
  width: 44px !important;
  height: 44px !important;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.22), rgba(255, 255, 255, 0.06) 62%, rgba(var(--accent-rgb), 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 22px rgba(var(--accent-rgb), 0.18) !important;
  color: #fff !important;
}

#btnOpenChatSettings.kzn-header-avatar-btn .kzn-avatar-frame-overlay,
#headerProfileAvatarWrap .kzn-avatar-frame-overlay {
  color: var(--accent) !important;
}

#headerProfileAvatarWrap {
  position: relative;
  z-index: 2;
  width: 44px !important;
  height: 44px !important;
}

#headerProfileAvatarWrap .kzn-avatar-frame-overlay--pulse {
  inset: -9px !important;
  z-index: 5 !important;
  position: absolute !important;
}

#headerProfileAvatarWrap .kzn-avatar-frame-overlay--discord {
  inset: -11px !important;
  z-index: 5 !important;
  position: absolute !important;
}

#headerQuickMenuPreview .kzn-avatar-framed .kzn-avatar-frame-overlay--pulse {
  inset: -8px !important;
  z-index: 4 !important;
}

#headerQuickMenuPreview .kzn-avatar-framed--discord .kzn-avatar-frame-overlay--discord {
  inset: -9px !important;
  z-index: 4 !important;
}

#btnHeaderAddStory {
  z-index: 20 !important;
}

/* Main screen pulse avatar frame — scale frame only, keep container inset */
#mainAvatarRing.kzn-avatar-has-frame--pulse {
  overflow: visible !important;
}

#mainAvatarRing.kzn-avatar-has-frame--pulse .kzn-main-pulse-frame-overlay,
#mainAvatarRing.kzn-avatar-has-frame--pulse .kzn-avatar-frame-overlay--pulse {
  position: absolute !important;
  inset: -26px;
  z-index: 12 !important;
  overflow: visible !important;
}

#mainAvatarRing.kzn-avatar-has-frame--pulse > img,
#mainAvatarRing.kzn-avatar-has-frame--pulse #avatarImg {
  z-index: 1 !important;
  position: relative;
}

#mainAvatarRing.kzn-avatar-has-frame--pulse .kzn-main-pulse-frame-overlay svg,
#mainAvatarRing.kzn-avatar-has-frame--pulse .kzn-avatar-frame-overlay--pulse svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.10) !important;
  transform-origin: center center !important;
}

#mainAvatarRing.kzn-avatar-has-frame--pulse .avatar-glow {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: 0 0 35px 10px rgba(var(--accent-rgb), 0.25) !important;
  pointer-events: none !important;
}

/* Account Management — pulse frame only */
#amAvatarWrap .kzn-avatar-frame-overlay--pulse {
  position: absolute !important;
  inset: -13px !important;
  z-index: 5 !important;
  overflow: visible !important;
}

#amAvatarWrap .kzn-avatar-frame-overlay--pulse svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.06) !important;
  transform-origin: center center !important;
}

#amAvatarWrap.kzn-avatar-has-frame--pulse #amAvatar {
  border: 3px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  z-index: 1 !important;
  position: relative;
}

/* Accent surfaces: text/icons always follow user accent foreground setting */
:is(
  .stg-preset-btn--save,
  .stg-preset-slot,
  .stg-anim-btn.active,
  #settingsPanel .stg-anim-btn.active,
  .kzn-3d-action-btn--accent,
  .chat-main-voice-btn,
  .chat-composer-shell .chat-window-send-btn,
  .tg-voice-text-input button,
  .tg-voice-text-channel.active,
  .tg-voice-settings-nav.active,
  .tg-avatar-video-btn.tg-avatar-video-apply,
  .tg-voice-plus,
  .apply-btn,
  .ai-primary,
  .ff-updates-add-btn,
  .ff-update-dialog-save,
  #btnFFSaveSettings,
  .ff-modal-btn-primary,
  .vd-send-btn,
  .settings-avatar-edit,
  #chatSettingsModal .settings-avatar-chip,
  #tgTopNotificationAction,
  #tgTopNotificationReplySend,
  body.light-theme .login-btn,
  body.light-theme #btnHeaderAddStory
) {
  color: var(--accent-fg) !important;
}

:is(
  .stg-preset-btn--save,
  .stg-anim-btn.active,
  .kzn-3d-action-btn--accent,
  .chat-main-voice-btn,
  .chat-composer-shell .chat-window-send-btn,
  .tg-voice-text-input button,
  .tg-voice-text-channel.active,
  .tg-voice-settings-nav.active,
  .ai-primary,
  .ff-updates-add-btn,
  .ff-update-dialog-save,
  #btnFFSaveSettings,
  .ff-modal-btn-primary,
  .vd-send-btn,
  #btnAccountManagement,
  #_mpBtn,
  #btnSaveNickname,
  .chat-settings-apply,
  .stg-apply-mini
) :is(svg, svg *) {
  color: var(--accent-fg) !important;
  stroke: currentColor !important;
}

:is(
  .stg-preset-btn--save,
  .stg-anim-btn.active,
  .kzn-3d-action-btn--accent,
  .chat-main-voice-btn,
  .chat-composer-shell .chat-window-send-btn,
  .ai-primary,
  .ff-updates-add-btn,
  .ff-update-dialog-save,
  .ff-modal-btn-primary,
  .vd-send-btn,
  #btnAccountManagement,
  #_mpBtn,
  #btnSaveNickname
) svg [fill] {
  fill: currentColor !important;
}

/* Media overlays on outgoing bubbles stay white on dark pills */
.message-bubble.outgoing .media-size-badge,
.message-bubble.outgoing .media-size-tag,
.message-bubble.outgoing .video-time-display,
.message-bubble.outgoing .video-overlay-controls,
.message-bubble.outgoing .video-overlay-play,
.message-bubble.outgoing .media-blur-overlay,
.message-bubble.outgoing .media-download-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Web-only vd-beta: narrow viewport adaptivity (do not affect CEP) */
@media (max-width: 768px) {
  html:not(.is-cep) #voiceOverlay .tg-voice-overlay {
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-left {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-chat-icons {
    flex: 1;
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-left-actions {
    flex-shrink: 0;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-channel-panel {
    flex: 0 0 auto;
    width: 100%;
    max-height: 34vh;
    height: auto;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-stage-card {
    min-height: 0;
    overflow: hidden;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-text-chat {
    min-height: 0;
    overflow: hidden;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-text-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-text-input {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-text-input input {
    min-width: 0;
    flex: 1 1 auto;
  }

  html:not(.is-cep) #voiceOverlay .tg-voice-text-input button {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
  }

  html:not(.is-cep) #voiceOverlay #tgVoiceTextSend {
    width: 48px;
    height: 40px;
  }
}

/* === CEP/AE panel: Voice Recording modal parity with web ===
   CEF (After Effects panel) doesn't render `backdrop-filter`, so
   `.chat-voice-ai-glass` — which relies on it to look glassy — instead
   paints as an opaque dark disc with a bright highlight, floating ON TOP
   of the animated sphere. That was the "front layer is below" bug.
   Fix: hide the glass (it can't work here), keep the `::before/::after`
   glow rings (they use `filter: blur()` which CEF renders correctly),
   pin every layer with explicit z-index, clip the sphere with `clip-path`
   for reliable circular masking of animated children, and pump up the
   sphere's own box-shadow so the ball still reads as a glowing orb even
   without the glass highlight overlay. */
html.is-cep .chat-voice-panel-ai {
  isolation: isolate;
  transform: translateZ(0);
  --vp-s: 172px !important;
  --vp-p: 44px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 189, 245, calc(0.20 + (var(--cvp-voice) * 0.26))) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(184, 107, 255, calc(0.16 + (var(--cvp-voice) * 0.22))) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(153, 126, 255, calc(0.10 + (var(--cvp-voice) * 0.14))) 0%, transparent 72%) !important;
}
html.is-cep .chat-voice-panel-ai::before,
html.is-cep .chat-voice-panel-ai::after {
  display: none !important;
}
html.is-cep .chat-voice-ai-particles {
  z-index: 3 !important;
}
html.is-cep .chat-voice-ai-glass {
  display: none !important;
}
html.is-cep .chat-voice-ai-sphere {
  z-index: 2 !important;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  will-change: transform;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.42), transparent 22%),
    radial-gradient(circle at 35% 30%, #f8f1ff 0%, #d7b7ff 24%, #a87eff 58%, #6b51db 100%) !important;
  box-shadow:
    0 0 calc(24px + (var(--cvp-voice) * 40px)) rgba(231, 199, 255, calc(0.42 + (var(--cvp-voice) * 0.42))),
    0 0 calc(52px + (var(--cvp-voice) * 68px)) rgba(184, 107, 255, calc(0.32 + (var(--cvp-voice) * 0.38))),
    0 0 calc(84px + (var(--cvp-voice) * 90px)) rgba(153, 126, 255, calc(0.22 + (var(--cvp-voice) * 0.3))),
    inset 0 10px 22px rgba(255, 255, 255, 0.42),
    inset 0 -24px 30px rgba(73, 32, 135, 0.38),
    inset -8px 4px 24px rgba(255, 180, 240, 0.24) !important;
}
html.is-cep .chat-voice-ai-c {
  z-index: 1;
}
html.is-cep .chat-voice-ai-rings {
  display: none !important;
}

/* Always-centered Voice Recording modal for narrow AE panel.
   In the browser the panel floats above the mic button, but the AE panel
   is too narrow for that to look right — pin it to the middle of the
   screen. Keep the dimensions close to the web original so the sphere,
   text and buttons don't feel downgraded. */
html.is-cep .chat-voice-panel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: min(92vw, 300px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 14px 18px 16px !important;
  border-radius: 30px !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
  transform-origin: 50% 50% !important;
  z-index: 21000 !important;
}
html.is-cep .chat-voice-panel.active,
html.is-cep .chat-voice-panel[aria-hidden="false"] {
  transform: translate(-50%, -50%) scale(1) !important;
}
html.is-cep .chat-voice-panel[aria-hidden="true"] {
  transform: translate(-50%, -50%) scale(0.92) !important;
}
html.is-cep .chat-voice-panel-timer {
  font-size: 22px !important;
  margin-top: -6px !important;
}
html.is-cep .chat-voice-panel-title {
  font-size: 16px !important;
}
html.is-cep .chat-voice-panel-subtitle {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
html.is-cep .chat-voice-panel-info {
  margin: 4px 0 10px !important;
}
html.is-cep .chat-voice-panel-actions {
  gap: 10px !important;
  width: 100% !important;
}
html.is-cep .chat-voice-panel-btn {
  height: 44px !important;
  font-size: 14px !important;
  border-radius: 16px !important;
}

/* === Downloader-share card: keep card body text white regardless of accent ===
   `.message-bubble.outgoing` sets `color: var(--chat-active-fg)` on the whole
   bubble, and the share card sits inside the bubble. When the user picks a
   light accent, `--chat-active-fg` becomes dark and the card title/subtitle
   turn black. Force white on the card body. Only the Redownload button keeps
   accent styling. */
.message-bubble .tg-vd-share-badge,
.message-bubble .tg-vd-share-title,
.message-bubble .tg-vd-share-sub,
.message-bubble.outgoing .tg-vd-share-badge,
.message-bubble.outgoing .tg-vd-share-title,
.message-bubble.outgoing .tg-vd-share-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.message-bubble .tg-vd-share-badge,
.message-bubble.outgoing .tg-vd-share-badge {
  color: rgba(255, 255, 255, 0.58) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important;
}
.message-bubble .tg-vd-share-sub,
.message-bubble.outgoing .tg-vd-share-sub {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

/* === Settings language toggle: readable text at any accent ===
   `.stg-seg .lang-option.active` hardcodes `color: #fff` in settings-panel.css,
   so a light accent (near-white bg) makes the active label invisible. Use
   `var(--accent-fg)` like the theme toggle already does. */
.stg-seg .lang-option.active {
  color: var(--accent-fg, #fff) !important;
  -webkit-text-fill-color: var(--accent-fg, #fff) !important;
}
.stg-seg .lang-option:not(.active) {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}
body.light-theme .stg-seg .lang-option:not(.active) {
  color: rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important;
}

/* === CEP: Compact layout for Cloud Storage modal ===
   The web modal uses a 3-column grid (230px categories + files list + 270px preview)
   totaling ~760px which is far too wide for the narrow AE panel (~380px viewport).
   Collapse to a single-column stack with categories as a horizontal pill row on top,
   files list full-width, and preview inline below the selected file. */
html.is-cep #kznCloudMediaModal {
  padding: 8px !important;
  align-items: flex-start !important;
}
html.is-cep #kznCloudMediaModal > div {
  width: 100% !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 16px) !important;
  border-radius: 16px !important;
}
html.is-cep #kznCloudMediaModal > div > div:nth-child(1) {
  padding: 10px 12px !important;
}
html.is-cep #kznCloudMediaModal > div > div:nth-child(1) > div > div:first-child {
  font-size: 13px !important;
}
html.is-cep #kznCloudMediaModal > div > div:nth-child(1) > div > div:last-child {
  font-size: 10px !important;
}
html.is-cep #kznCloudMediaModal > div > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  min-height: 0 !important;
  max-height: calc(100vh - 130px) !important;
  overflow: hidden !important;
}
html.is-cep #kznCloudMediaCats {
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  max-height: 52px !important;
}
html.is-cep #kznCloudMediaCats .kzn-cloud-cat {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
html.is-cep #kznCloudMediaCats .kzn-cloud-cat > span {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  align-items: baseline !important;
}
html.is-cep #kznCloudMediaCats .kzn-cloud-cat > span > span {
  font-size: 11px !important;
  margin-top: 0 !important;
}
html.is-cep #kznCloudMediaList {
  padding: 8px !important;
  flex: 1 1 auto !important;
  min-height: 100px !important;
  max-height: none !important;
}
html.is-cep #kznCloudMediaList .kzn-cloud-item {
  padding: 8px !important;
  gap: 8px !important;
}
html.is-cep #kznCloudMediaList .kzn-cloud-thumb {
  width: 44px !important;
  height: 34px !important;
  flex: 0 0 44px !important;
}
html.is-cep #kznCloudMediaPreview {
  border-left: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 8px !important;
  flex: 0 0 auto !important;
  max-height: 40vh !important;
  overflow: auto !important;
}
html.is-cep #kznCloudMediaModal > div > div:last-child {
  padding: 8px !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
html.is-cep #kznCloudMediaModal .kzn-cloud-3d-btn {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}
html.is-cep #kznCloudMediaStatus {
  margin: 0 8px 6px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}