*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg-page:         #182039;
      --bg-header:       #232f53;
      --bg-card:         #1e2745;
      --bg-profile:      #1e1e1e;
      --accent:          #3e64ff;
      --border:          #3c4c7c;
      --border-dark:     #384771;
      --text-primary:    #ffffff;
      --text-secondary:  #c5cfe8;
      --text-muted:      #6c7799;
      --text-track:      #aabbff;
      --green-online:    #68cc19;
      --badge-dark:      #495b94;
      /* semi-transparent tokens */
      --bg-hover:        rgba(255,255,255,0.06);
      --bg-input:        rgba(255,255,255,0.06);
      --bg-tint:         rgba(255,255,255,0.08);
      --progress-track:  rgba(255,255,255,0.15);
      --volume-track:    rgba(255,255,255,0.20);
    }

    /* ── СВЕТЛАЯ ТЕМА ── */
    html.light-theme {
      --bg-page:         #eef1f8;
      --bg-header:       #ffffff;
      --bg-card:         #ffffff;
      --bg-profile:      #e4e8f5;
      --accent:          #3e64ff;
      --border:          #d0d9ef;
      --border-dark:     #c8d2e8;
      --text-primary:    #1a1f36;
      --text-secondary:  #4a5574;
      --text-muted:      #8090b8;
      --text-track:      #3e64ff;
      --green-online:    #4caf50;
      --badge-dark:      #c0cde8;
      --bg-hover:        rgba(0,0,0,0.04);
      --bg-input:        rgba(0,0,0,0.04);
      --bg-tint:         rgba(0,0,0,0.06);
      --progress-track:  rgba(0,0,0,0.12);
      --volume-track:    rgba(0,0,0,0.15);
    }

    /* ── СИСТЕМНАЯ ТЕМА (УДАЛЕНО - ПО УМОЛЧАНИЮ ТЕМНАЯ) ── */

    /* ── ТЁМНАЯ ТЕМА (принудительная) ── */
    html.dark-theme {
      --bg-page:         #182039;
      --bg-header:       #232f53;
      --bg-card:         #1e2745;
      --bg-profile:      #1e1e1e;
      --accent:          #3e64ff;
      --border:          #3c4c7c;
      --border-dark:     #384771;
      --text-primary:    #ffffff;
      --text-secondary:  #c5cfe8;
      --text-muted:      #6c7799;
      --text-track:      #aabbff;
      --green-online:    #68cc19;
      --badge-dark:      #495b94;
      --bg-hover:        rgba(255,255,255,0.06);
      --bg-input:        rgba(255,255,255,0.06);
      --bg-tint:         rgba(255,255,255,0.08);
      --progress-track:  rgba(255,255,255,0.15);
      --volume-track:    rgba(255,255,255,0.20);
    }

    html.light-theme .header {
      box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    }
    html.light-theme .search-wrap {
      border: 1px solid var(--border);
      background-color: #ffffff;
    }
    html.light-theme .search-input {
      background: #ffffff;
    }
    html.light-theme .player-progress-bar {
      background: rgba(0,0,0,0.12);
    }
    html.light-theme .player-volume-slider {
      background: rgba(0,0,0,0.15);
    }
    html.light-theme .pctrl-btn:hover {
      background: rgba(0,0,0,0.06) !important;
      color: var(--text-primary);
    }
    html.light-theme .player-volume-btn { color: var(--text-muted); }
    html.light-theme .comment-input-wrap {
      background: rgba(0,0,0,0.05) !important;
    }
    html.light-theme .pv-comment-input-wrap {
      background: rgba(0,0,0,0.05);
    }
    html.light-theme .friends-searchbox {
      background: rgba(0,0,0,0.05);
    }
    html.light-theme .udm-item:hover { background: rgba(0,0,0,0.05); }
    html.light-theme .fcat-btn:hover { background: rgba(0,0,0,0.05); }
    html.light-theme .fcat-btn.active { background: var(--accent); color: #fff; }
    html.light-theme .post-more-menu  { background: var(--bg-card); }
    html.light-theme .user-dropdown-menu {
      background: var(--bg-card);
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }
    html.light-theme .notif-panel {
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }
    html.light-theme .notif-item:hover {
      background: rgba(0,0,0,0.04);
    }
    html.light-theme .notif-item.unread {
      background: rgba(62,100,255,0.07);
    }
    html.light-theme .notif-item.unread:hover {
      background: rgba(62,100,255,0.12);
    }
    html.light-theme .emoji-picker-popup {
      box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    }
    html.light-theme .ep-btn:hover {
      background: rgba(0,0,0,0.06) !important;
    }
    html.light-theme .sidebar { background: transparent; }
    html.light-theme .likes-tooltip {
      background: var(--bg-card);
      box-shadow: 0 4px 16px rgba(0,0,0,0.20);
    }
    html.light-theme input,
    html.light-theme textarea { color: var(--text-primary); }
    html.light-theme input::placeholder,
    html.light-theme textarea::placeholder { color: var(--text-muted); }
    html.light-theme .pv-overlay { background: rgba(0,0,0,0.70); }
    html.light-theme .fp-action { color: var(--text-muted); }
    html.light-theme .askme-form { background: rgba(0,0,0,0.04); }
    html.light-theme .freq-decline {
      background: rgba(0,0,0,0.08); color: var(--text-muted);
    }
    html.light-theme .freq-decline:hover {
      background: rgba(0,0,0,0.14); color: var(--text-primary);
    }
    html.light-theme .nav-item {
      background: rgb(180 190 221 / 70%);
      border-color: rgba(0,0,0,0.05);
    }
    html.light-theme .nav-item img { filter: brightness(0) invert(0.3); }
    html.light-theme .nav-item.active img { filter: brightness(0) invert(1); }
    html.light-theme .nav-item:hover:not(.active) img {
      filter: brightness(0) invert(0.1);
    }

    html, body {
      height: 100%;
      background-color: var(--bg-page);
    }

    body {
      font-family: 'Open Sans', sans-serif;
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: auto;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    img { display: block; }
    a   { text-decoration: none; color: inherit; }
    button { font-family: 'Open Sans', sans-serif; }

    /* ── HEADER ──────────────────────────────────────────────── */
    .header {
      position: sticky;
      top: 0;
      z-index: 200;
      background-color: var(--bg-header);
    }

    .header-inner {
      display: flex;
      align-items: center;
      height: 56px;
      padding: 0 18px;
      gap: 14px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      cursor: pointer;
      margin-left:9px;
      margin-right: 20px;
    }

    .logo img {
      width: 38px;
      height: 38px;
    }

    /* search */
    .search-wrap {
      display: flex;
      align-items: center;
      flex: 0 0 400px;
      background-color: rgba(255,255,255,0.05);
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.08);
      height: 38px;
      transition: border-color 0.2s;
      position: relative; /* For dropdown positioning */
    }
    .search-wrap:focus-within {
      border-color: var(--accent);
    }

    /* Category Selector */
    .search-cat-selector {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px 0 14px;
      border-right: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
      user-select: none;
      height: 100%;
      min-width: 100px;
      border-radius: 24px 0 0 24px;
      transition: background 0.15s;
    }
    .search-cat-selector:hover {
      background: rgba(255,255,255,0.03);
    }
    .search-cat-icon-current {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      opacity: 0.9;
    }
    .search-cat-icon-current svg {
      width: 100%;
      height: 100%;
    }
    .search-cat-current {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .search-cat-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: transform 0.2s;
    }
    .search-cat-selector.open .search-cat-arrow {
      transform: rotate(180deg);
    }

    .search-cat-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: 173px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 11px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.5);
      z-index: 1000;
      display: none;
      overflow: hidden;
      padding: 6px 0;
      transform-origin: top left;
    }
    .search-cat-dropdown.open {
      display: block;
      animation: dropdownSlideIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes dropdownSlideIn {
      from { opacity: 0; transform: translateY(-10px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .search-cat-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text-secondary);
      transition: all 0.12s;
      cursor: pointer;
    }
    .search-cat-item:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .search-cat-item.active {
      color: var(--accent);
      font-weight: 700;
      background: rgba(62,100,255,0.08);
    }
    .search-cat-item i,
    .search-cat-item svg {
      font-size: 16px;
      width: 17px;
      height: 17px;
      text-align: center;
      opacity: 0.7;
      flex-shrink: 0;
    }

    .search-icon-left {
      width: 18px;
      height: 18px;
      opacity: 0.4;
      flex-shrink: 0;
      color: #fff;
    }

    .search-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      padding: 0 12px;
    }

    .search-input::placeholder { color: rgba(255,255,255,0.3); }

    .search-btn {
      background-color: var(--accent);
      border: none;
      cursor: pointer;
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0 24px 24px 0;
      transition: background 0.2s;
    }
    .search-btn:hover { background-color: var(--accent-hover); }
    .search-btn svg { width: 14px; height: 14px; color: #fff; }

    .search-btn img { width: 14px; height: 14px; }

    .header-gap { flex: 1; }

    /* ── HEADER PLAYER ──────────────────────────────────────────── */
    .header-player {
      display: none; /* Hidden by default */
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    /* notification / music icon circles */
    .notif-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: transform 0.15s;
      flex-shrink: 0;
    }

    .notif-circle:hover { transform: scale(1.05); }
    .notif-circle:active { transform: scale(0.95); }
    .notif-circle img   { width: 33px; height: 33px; display: block; }

    /* ── Notifications bell wrap ── */
    .notif-wrap { position: relative; flex-shrink: 0; margin-right: 12px; margin-top: 5px;  }
    .music-header-wrap { position: relative; flex-shrink: 0; margin-right: 20px; margin-top: 5px; }
    .notif-badge {
      position: absolute; top: -3px; right: -4px;
      min-width: 18px; height: 18px; border-radius: 9px;
      background: #e84040; color: #fff; font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      padding: 0 4px; pointer-events: none;
      border: 2px solid var(--bg-header);
    }

    /* ── Notifications panel ── */
    .notif-panel {
      position: fixed; z-index: 900;
      width: 380px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
      display: none; flex-direction: column; overflow: hidden;
    }
    .notif-panel.open { display: flex; }

    .notif-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px 12px; border-bottom: 1px solid var(--border);
      background: var(--bg-header);
    }
    .notif-hd-left { display: flex; align-items: center; gap: 8px; }
    .notif-hd-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .notif-hd-badge {
      background: #e84040; color: #fff; font-size: 12px; font-weight: 700;
      border-radius: 10px; padding: 1px 7px;
    }
    .notif-mark-all {
      background: none; border: none; cursor: pointer;
      font-size: 12px; color: var(--accent); font-family: 'Open Sans', sans-serif;
      transition: opacity .15s;
    }
    .notif-mark-all:hover { opacity: .75; }

    .notif-list { display: flex; flex-direction: column; }

    .notif-item {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 13px 18px; cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background .14s; position: relative;
    }
    .notif-item:last-child { border-bottom: none; }
    .notif-item:hover { background: rgba(255,255,255,0.04); }
    .notif-item.unread { background: rgba(62,100,255,0.06); }
    .notif-item.unread:hover { background: rgba(62,100,255,0.10); }

    .notif-icon-wrap {
      width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .notif-icon-wrap svg { flex-shrink: 0; }

    .ni-blue   { background: rgba(62,100,255,0.18); color: #6b8fff; }
    .ni-green  { background: rgba(80,200,80,0.18);  color: #5cb85c; }
    .ni-red    { background: rgba(232,64,64,0.18);  color: #e84040; }
    .ni-gold   { background: rgba(255,185,0,0.18);  color: #ffb900; }
    .ni-purple { background: rgba(160,80,255,0.18); color: #b060ff; }
    .ni-teal   { background: rgba(0,200,180,0.18);  color: #00c8b4; }

    .notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .notif-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
    .notif-desc  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
    .notif-time  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    .notif-unread-dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
      flex-shrink: 0; margin-top: 4px; align-self: center;
    }

    /* footer / pagination */
    .notif-footer {
      display: flex; align-items: center; justify-content: center; gap: 4px;
      padding: 10px 18px; border-top: 1px solid var(--border);
      background: var(--bg-header);
    }
    .np-btn {
      min-width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
      background: none; color: var(--text-muted); font-size: 13px; font-weight: 700;
      font-family: 'Open Sans', sans-serif;
      display: flex; align-items: center; justify-content: center;
      transition: background .14s, color .14s;
    }
    .np-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--text-primary); }
    .np-btn.active { background: var(--accent); color: #fff; }
    .np-btn:disabled { opacity: .35; cursor: default; }
    .np-arrow svg { display: block; }

    /* controls block */
    .player-controls {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .pctrl-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.7);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s, background 0.15s;
    }

    .pctrl-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

    .pctrl-btn.play-pause {
      width: 34px;
      height: 34px;
      background: var(--accent);
      color: #fff;
      border-radius: 50%;
    }

    .pctrl-btn.play-pause:hover { background: #2a52e8; }

    .ico-loading-spin {
      animation: rotate-player 1s linear infinite;
    }
    @keyframes rotate-player {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* track meta */
    .player-meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 105px;

      flex: 0 0 105px;
      margin-left: 10px;
      margin-right: 20px;
    }

    .player-track-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .player-track-artist {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* progress area */
    .player-progress-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 140px;
      max-width: 180px;
      margin-right: 20px;
        margin-top: 12px;
    }

    .player-progress-bar {
      width: 100%;
      height: 4px;
      background: rgba(255,255,255,0.15);
      border-radius: 2px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .player-progress-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 2px;
      width: 0%;
      transition: width 0.4s linear;
      pointer-events: none;
    }

    .player-time {
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
    }

    /* volume */
    .player-volume {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .player-volume-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.6);
      display: flex;
      align-items: center;
    }

    .player-volume-btn:hover { color: #fff; }

    .player-volume-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 60px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,0.2);
      outline: none;
      cursor: pointer;
    }

    .player-volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
    }

    /* ── PLAYER PLAYLIST DROPDOWN ────────────────────────── */
    .header-player {
      position: relative;
    }
    .player-playlist-menu {
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      width: 420px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      z-index: 9000;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-8px) scale(.97);
      transform-origin: top left;
      pointer-events: none;
      transition: opacity .18s, transform .18s;
    }

    .player-playlist-menu.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all;
    }

    .pl-header {
      padding: 14px 16px;
      background: var(--bg-header);
      border-bottom: 1px solid var(--border);
    }

    .pl-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .pl-action-btn {
      width: 28px !important;
      height: 28px !important;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent) !important;
      cursor: pointer;
      transition: all 0.2s;
    }

    .pl-action-btn svg {
      font-size: 14px !important;
      width: 14px !important;
      height: 14px !important;
      line-height: 1;
      color: var(--accent) !important;
    }

    .pl-action-btn:hover {
      background: var(--bg-hover);
      color: var(--accent) !important;
      opacity: 0.8;
    }

    .pl-action-btn.active {
      background: rgba(62, 100, 255, 0.14) !important;
      color: var(--accent) !important;
      border: 1px solid rgba(62, 100, 255, 0.35);
    }

    .pl-header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .pl-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* Playlist Custom Dropdown */
    .pl-selector-wrap {
      margin-bottom: 12px;
    }
    .pl-custom-dropdown {
      position: relative;
      width: 100%;
      user-select: none;
    }
    .pl-selected-value {
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      padding: 8px 12px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: border-color 0.2s;
    }
    .pl-selected-value:hover { border-color: var(--accent); }
    .pl-selected-value::after {
      content: '▾';
      color: var(--text-muted);
      font-size: 12px;
    }
    .pl-options-list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      z-index: 10;
      display: none;
      padding: 4px 0;
      max-height: 200px;
      overflow-y: auto;
    }
    .pl-options-list.open { display: block; }
    .pl-custom-option {
      padding: 8px 12px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .pl-custom-option:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .pl-custom-option.active {
      background: rgba(62, 100, 255, 0.1);
      color: var(--accent);
      font-weight: 600;
    }

    /* Search in Playlist */
    .pl-search-wrap {
      position: relative;
    }
    .pl-search-input {
      width: 100%;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      padding: 8px 12px 8px 34px;
      font-size: 13px;
      outline: none;
    }
    .pl-search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      opacity: 0.5;
    }

    .pl-list {
      max-height: 340px;
      overflow-y: auto;
    }

    #player-playlist-menu .pl-list {
      max-height: min(52vh, 340px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    #player-playlist-menu .pl-list::-webkit-scrollbar {
      width: 6px;
    }

    #player-playlist-menu .pl-list::-webkit-scrollbar-track {
      background: transparent;
    }

    #player-playlist-menu .pl-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 6px;
    }

    #player-playlist-menu .pl-list::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }
    
    .pl-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.12s;
    }

    .pl-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .pl-item:hover { background: var(--bg-hover); }
    .pl-item.active { background: rgba(62, 100, 255, 0.1); }
    
    .pl-cover {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    .pl-cover img { width: 100%; height: 100%; object-fit: cover; }
    
    .pl-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .pl-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pl-artist {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pl-duration {
      font-size: 11px;
      color: var(--text-muted);
    }

    .pl-list .wall-audio-actions {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 6px;
      flex-shrink: 0;
    }

    .pl-list .wall-audio-icon-btn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }

    .pl-list .wall-audio-icon-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(62,100,255,0.10);
    }

    .pl-list .wall-audio-icon-btn.active[data-action="like"] {
      color: #ff4d6a;
      border-color: rgba(255,77,106,0.5);
      background: rgba(255,77,106,0.12);
    }
    .pl-list .wall-audio-icon-btn.active[data-action="like"] svg {
      fill: currentColor;
      stroke: currentColor;
    }

    .pl-list .wall-audio-icon-btn.active[data-action="save"] {
      color: var(--accent);
      border-color: rgba(62,100,255,0.5);
      background: rgba(62,100,255,0.16);
    }

    /* user menu */
    .user-menu {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: transform 0.15s;
      flex-shrink: 0;
      position: relative;
    }

    .user-menu:hover { transform: scale(1.05); }
    .user-menu:active { transform: scale(0.95); }

    /* ── USER DROPDOWN ────────────────────────────────────────── */
    .user-dropdown-menu {
      position: absolute; top: calc(100% + 12px); right: 0;
      width: 272px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      z-index: 9000;
      overflow: hidden;
      opacity: 0; transform: translateY(-8px) scale(.97);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity .18s, transform .18s;
      user-select: none;
    }
    .user-dropdown-menu.open {
      opacity: 1; transform: translateY(0) scale(1);
      pointer-events: all;
    }

    /* profile block */
    .udm-profile {
      display: flex; flex-direction: column; align-items: center;
      padding: 22px 16px 16px; gap: 6px;
      background: var(--bg-header);
    }
    .udm-ava-wrap {
      position: relative; width: 72px; height: 72px; flex-shrink: 0;
    }
    .udm-ava-wrap img {
      width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
      border: 2px solid var(--border);
    }
    .udm-ava-badge {
      position: absolute; bottom: 2px; right: 2px;
      width: 20px; height: 20px; border-radius: 50%;
      background: #f5a623; border: 2px solid var(--bg-header);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: #fff; font-weight: 700; line-height: 1;
    }
    .udm-name {
      font-size: 15px; font-weight: 700; color: var(--text-primary);
      text-align: center;
    }
    .udm-phone {
      font-size: 13px; color: var(--text-muted); text-align: center; letter-spacing: .5px;
    }

    /* manage button */
    .udm-manage {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin: 12px 14px;
      padding: 9px 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px; font-weight: 600; color: var(--text-secondary);
      transition: background .15s;
    }
    .udm-manage:hover { background: rgba(255,255,255,0.09); }
    .udm-vkid-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--accent); color: #fff;
      font-size: 11px; font-weight: 700;
      border-radius: 5px; padding: 2px 7px;
    }
    .udm-vkid-badge svg { flex-shrink: 0; }

    /* menu items */
    .udm-sep { height: 1px; background: var(--border); margin: 2px 0; }
    .udm-items { padding: 4px 0; }
    .udm-item {
      display: flex; align-items: center; gap: 13px;
      padding: 11px 18px; cursor: pointer;
      font-size: 14px; color: var(--text-secondary);
      transition: background .12s, color .12s;
      user-select: none;
      outline: none;
    }
    .udm-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .udm-item svg { flex-shrink: 0; color: var(--accent); }
    .udm-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .udm-item-accent {
      color: var(--accent) !important;
      font-size: 13px;
      font-weight: 700;
      margin-left: auto;
      width: 75px;
      text-align: right;
      flex-shrink: 0;
    }
    .udm-item.danger { color: #e05252; }
    .udm-item.danger svg { color: #e05252; }
    .udm-item.danger:hover { background: rgba(224,82,82,0.08); }

    /* add account */
    .udm-add {
      display: flex; align-items: center; gap: 13px;
      padding: 13px 18px; cursor: pointer;
      font-size: 14px; font-weight: 600; color: var(--text-secondary);
      border-top: 1px solid var(--border);
      transition: background .12s, color .12s;
    }
    .udm-add:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .udm-add svg { color: var(--accent); flex-shrink: 0; }

    .user-avatar-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      color: #fff;
    }

    .user-avatar-circle img, .user-avatar-circle svg { width: 33px; height: 33px; display: block; }

    .user-dropdown img { width: 14px; height: 11px; }

    /* ── PAGE BODY ───────────────────────────────────────────── */
    .page-body {
      display: flex;
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;
      margin-top: 8px;
      padding-right: 0;
    }

    /* ── SIDEBAR ─────────────────────────────────────────────── */
    .sidebar {
      flex: 0 0 92px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 24px;
      gap: 12px;
      position: sticky;
      top: 56px;
      height: calc(100vh - 56px);
      overflow-y: auto;
      background-color: var(--bg-page);
    }

    .nav-item {
      width: 56px;
      height: 56px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
      flex-shrink: 0;
      background-color: rgba(35, 47, 83, 0.7); /* Darker semi-transparent blue */
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(255,255,255,0.03);
    }
    
    .nav-item:hover {
      background-color: rgba(62, 100, 255, 0.15);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .nav-item img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
      transition: transform .2s;
    }

    .nav-item.active {
      background-color: var(--accent);
      box-shadow: 0 8px 24px rgba(62, 100, 255, 0.4);
      border-color: rgba(255,255,255,0.1);
    }
    .nav-item.active img {
      transform: scale(1.1);
    }

    /* ── NAV TOOLTIP (Screenshot укукук111) ─────────────────── */
    .nav-tooltip {
      position: fixed;
      background: #313f6b;
      color: #fff;
      padding: 10px 18px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 500;
      pointer-events: none;
      z-index: 10000;
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    }
    .nav-tooltip::before {
      content: "";
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 8px solid #313f6b;
    }
    .nav-tooltip.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* ── PAGE VIEW WRAPPER ───────────────────────────────────── */
    .page-view {
      flex: 1;
      min-width: 0;
    }

    /* ── MAIN ────────────────────────────────────────────────── */
    .main {
      width: 100%;
      padding: 10px 0 40px 8px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-sizing: border-box;
    }

    /* ── PROFILE HERO ─────────────────────────────────────────── */
    .profile-hero {
      border-radius: 22px;
      overflow: visible;
      position: relative;
    }

    .banner-wrap {
      position: relative;
      border-radius: 22px 22px 0 0;
    #profile-city-text { cursor: pointer; }
      overflow: hidden;
      display: block;
      cursor: pointer;
    }

    .banner-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 22px 22px 0 0;
      display: block;
      transition: filter .25s;
    }
    .banner-wrap:hover .banner-img { filter: brightness(0.78); }

    .banner-edit-btn {
      position: absolute;
      top: 14px; right: 16px;
      display: flex; align-items: center; gap: 7px;
      background: rgba(0,0,0,0.52);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 8px;
      padding: 7px 14px;
      color: #fff; font-size: 13px; font-weight: 600;
      font-family: 'Open Sans', sans-serif;
      cursor: pointer;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity .22s, transform .22s, background .15s;
      white-space: nowrap;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .banner-wrap:hover .banner-edit-btn {
      opacity: 1;
      transform: translateY(0);
    }
    .banner-edit-btn:hover { background: rgba(62,100,255,0.65); border-color: rgba(255,255,255,0.3); }

    /* info card */
    .profile-card {
      background-color: var(--bg-profile);
      border: 2px solid var(--border);
      border-top: none;
      border-radius: 0 0 20px 20px;
      position: relative;
      overflow: visible;
    }

    /* top section: name / buttons */
    .profile-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 18px 24px 16px 230px;
      min-height: 110px;
    }

    /* avatar */
    .avatar-wrap {
      position: absolute;
      left: 46px;
      top: -165px;
      width: 195px;
      height: 195px;
      border-radius: 50%;
      border: 4px solid #000;
      overflow: visible;
      background-color: #2c3654;
      z-index: 10;
      cursor: pointer;
    }

    /* clip the image & badge to the circle without hiding the dropdown */
    .avatar-img {
      border-radius: 50%;
      clip-path: circle(50% at 50% 50%);
    }

    /* avatar hover overlay (camera icon + dim) */
    .avatar-wrap::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      background: rgba(0,0,0,0); clip-path: circle(50%);
      transition: background .2s;
      z-index: 1; pointer-events: none;
    }
    .avatar-wrap:hover::before { background: rgba(0,0,0,0.45); }

    /* camera icon shown on hover */
    .avatar-wrap::after {
      content: '';
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -60%);
      width: 32px; height: 32px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
      opacity: 0; transition: opacity .2s;
      z-index: 2; pointer-events: none;
    }
    .avatar-wrap:hover::after { opacity: 1; }

    /* dropdown menu */
    .avatar-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      min-width: 190px;
      background: #232f53;
      border: 1px solid #3c4c7c;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      opacity: 0; visibility: hidden;
      transform: translateX(-50%) translateY(-6px);
      transition: opacity .18s, transform .18s, visibility .18s;
      z-index: 100;
    }
    .avatar-wrap:hover .avatar-menu {
      opacity: 1; visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    /* triangle pointer */
    .avatar-menu::before {
      content: '';
      position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #3c4c7c;
    }
    .avatar-menu::after {
      content: '';
      position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #232f53;
    }

    .avatar-menu-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; font-size: 13px; color: #c5cfe8;
      cursor: pointer; transition: background .12s, color .12s;
      border-bottom: 1px solid rgba(60,76,124,0.4);
    }
    .avatar-menu-item:last-child { border-bottom: none; }
    .avatar-menu-item:hover { background: rgba(62,100,255,0.12); color: #fff; }
    .avatar-menu-item.danger { color: #e05252; }
    .avatar-menu-item.danger:hover { background: rgba(220,80,80,0.1); color: #ff6b6b; }
    .avatar-menu-item svg { flex-shrink: 0; opacity: .75; }

    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .avatar-badge {
      position: absolute;
      bottom: 10px;
      right: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
      z-index: 11;
    }

    .avatar-badge img { width: 30px; height: 33px; }

    .avatar-time {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      background-color: rgba(0,0,0,0.55);
      border-radius: 4px;
      padding: 1px 5px;
    }

    /* name + meta */
    /* VIP & Rating separate block */
    .profile-status-left {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-left: 20px;
      margin-top: 5px;
    }

    .profile-info-left { 
      display: flex; 
      flex-direction: column; 
      gap: 8px;
    }

    .profile-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .profile-name {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* VIP Badge */
    .vip-badge {
      display: inline-flex;
      align-items: center;
      width: 42px;
      gap: 4px;
      padding: 2px 8px;
      background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
      color: #000;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      box-shadow: 0 2px 10px rgba(255, 165, 0, 0.4);
      cursor: default;
      height: 20px;
    }
    .vip-badge i { font-size: 12px; }

    /* Rating Bar */
    .profile-rating-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 160px;
      margin-top: 2px;
    }
    .pr-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .pr-percent { color: #ffb900; }
    .pr-bar-bg {
      height: 5px;
      background: rgba(255,255,255,0.08);
      border-radius: 10px;
      overflow: hidden;
    }
    .pr-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
      border-radius: 10px;
      width: 85%;
      box-shadow: 0 0 10px rgba(62, 100, 255, 0.3);
    }

    .name-verified { width: 20px; height: 20px; }

    .profile-meta {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .profile-meta img  { width: 26px; height: 26px; object-fit: contain; }
    .profile-meta span { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .profile-meta .meta-sep { width: 1px; height: 16px; background: var(--border-dark); }

    /* action buttons */
    .profile-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    /* ── MORE DROPDOWN (Screenshot 3) ────────────────────────── */
    .profile-more-menu {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: 280px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      z-index: 9999;
      padding: 12px 0;
      opacity: 0;
      transform: translateY(-8px) scale(.97);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity .18s, transform .18s;
      color: var(--text-primary);
    }

    .profile-more-menu.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all;
    }

    .pmm-top-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 4px 12px 12px;
      gap: 4px;
    }
    .pmm-grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: var(--accent);
      padding: 8px 0;
      border-radius: 10px;
      transition: background 0.12s;
    }
    .pmm-grid-item:hover { background: var(--bg-hover); }
    .pmm-grid-item i { font-size: 24px; }
    .pmm-grid-item span { font-size: 11px; font-weight: 600; }

    .pmm-divider {
      height: 1px;
      background: var(--border);
      margin: 0 0 8px;
    }

    .pmm-list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-secondary);
      transition: background 0.12s, color 0.12s;
      text-align: left;
    }
    .pmm-list-item:hover { background: var(--bg-hover); color: var(--text-primary); }
    .pmm-list-item i { font-size: 18px; color: var(--accent); opacity: 0.8; }
    .pmm-list-item.danger { color: #e05252; }
    .pmm-list-item.danger i { color: #e05252; opacity: 1; }
    .pmm-list-item.danger:hover { background: rgba(224,82,82,0.08); }

    .add-friend-btn {
      display: inline-flex;
      align-items: center;
      background-color: #2b365e;
      color: #fff;
      border: none;
      border-radius: 30px;
      padding: 0 21px 0 0;
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      height: 36px;
      overflow: hidden;
      line-height: 1;
    }

    .add-friend-btn:hover {
      background-color: #344270;
    }

    .add-friend-btn:active {
      transform: scale(0.98);
    }

    .add-friend-btn.sent {
      background-color: #2b365e;
    }


    .afb-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      background-color: var(--accent);
      border-radius: 50%;
      margin-right: 14px;
    }

    .afb-icon svg {
      width: 16px;
      height: 16px;
      stroke-width: 3.5;
    }

    .afb-label {
      white-space: nowrap;
    }

    .profile-action-btn {
      display: inline-flex; align-items: center; justify-content: center;
      background: none; border: none; padding: 0; cursor: pointer;
      transition: transform .15s;
      flex-shrink: 0;
    }
    .profile-action-btn:hover { transform: scale(1.05); }
    .profile-action-btn:active { transform: scale(0.95); }
    .profile-action-btn img { width: 33px; height: 33px; display: block; }

    /* profile divider */
    .profile-divider {
      margin: 0;
      border: none;
      border-top: 2px solid var(--border-dark);
      opacity: 0;
      transition: opacity 0.9s ease;
    }

    .profile-divider.expanded {
      opacity: 1;
    }

    /* ── PROFILE WALL / INFO BLOCK ───────────────────────────── */
    .profile-wall {
      padding: 0 32px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.9s ease, padding 0.9s ease;
    }

    .profile-wall.expanded {
      max-height: 2000px;
      padding: 24px 32px 28px;
    }

    /* Screenshot 5 styling */
    .info-groups-stack {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .info-group-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 16px;
    }

    .info-pills-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .info-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      background: rgba(62, 100, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: background 0.2s, transform 0.15s;
      cursor: default;
    }
    .info-pill:hover {
      background: rgba(62, 100, 255, 0.18);
      color: var(--text-primary);
      transform: translateY(-1px);
    }
    .info-pill i {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .info-list-stack {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .info-list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .info-list-item i {
      font-size: 18px;
      color: var(--text-muted);
      width: 20px;
      text-align: center;
    }

    .info-block-title {
      display: none;
    }

    .info-val a {
      color: #6a9fff;
      text-decoration: none;
    }

    .info-val a:hover { text-decoration: underline; }

    .info-val .tag {
      display: inline-block;
      background: rgba(62,100,255,0.15);
      color: #6a9fff;
      border-radius: 6px;
      padding: 1px 7px;
      font-size: 13px;
      margin: 2px 3px 2px 0;
    }

    .info-show-more {
      margin-top: 14px;
      background: none;
      border: none;
      cursor: pointer;
      color: #6a9fff;
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .info-show-more:hover { text-decoration: underline; }

    /* ── CONTENT GRID ─────────────────────────────────────────── */
    .content-grid {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
    }

    /* left column */
    .col-left {
      flex: 0 0 744px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* right column */
    .col-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* ── PHOTOS CARD ─────────────────────────────────────────── */
    .photos-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
    }

    /* tabs bar */
    .tabs-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px 14px;
      background-color: var(--bg-header);
      border-radius: 20px 20px 0 0;
    }

    .tab-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      border: none;
      outline: none;
      cursor: pointer;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      background: none;
      padding: 8px 12px;
      border-radius: 15px;
      transition: background-color 0.15s;
    }

    .tab-btn.active {
      background-color: var(--accent);
    }

    .tab-btn img  {
      width: 20px;
      height: 20px;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    .tab-spacer   { flex: 1; }

    .tab-more {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
    }

    .tab-more img { width: 24px; height: 24px; object-fit: contain; }

    /* ── ASK ME TAB ───────────────────────────────────────────── */
    .askme-form-wrap {
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border);
    }
    .askme-form-title {
      display: flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 700; color: var(--text-secondary);
      margin-bottom: 10px;
    }
    .askme-form-title svg { color: var(--accent); flex-shrink: 0; }
    .askme-textarea {
      width: 100%; background: rgba(255,255,255,0.05);
      border: 1px solid var(--border); border-radius: 8px;
      color: var(--text-primary); font-size: 13px;
      font-family: 'Open Sans', sans-serif;
      padding: 9px 12px; resize: none; outline: none; line-height: 1.5;
      transition: border-color .15s;
    }
    .askme-textarea:focus { border-color: var(--accent); }
    .askme-textarea::placeholder { color: var(--text-muted); }
    .askme-form-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 8px;
    }
    .askme-anon-label {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--text-muted); cursor: pointer;
      user-select: none;
    }
    .askme-anon-label input { accent-color: var(--accent); cursor: pointer; }
    .askme-send-btn {
      background: var(--accent); border: none; border-radius: 8px;
      color: #fff; font-size: 13px; font-weight: 700;
      font-family: 'Open Sans', sans-serif;
      padding: 7px 18px; cursor: pointer; transition: background .15s;
    }
    .askme-send-btn:hover { background: #2a52e8; }

    /* Q&A list */
    .askme-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 18px; }

    .askme-item { display: flex; flex-direction: column; gap: 10px; }

    .askme-q-row {
      display: flex; align-items: flex-start; gap: 9px;
    }
    .askme-anon-ava {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,0.07); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: var(--text-muted);
    }
    .askme-q-text {
      flex: 1; font-size: 13px; color: var(--text-secondary);
      background: rgba(255,255,255,0.05); border-radius: 10px;
      padding: 9px 13px; line-height: 1.5;
    }

    .askme-a-row {
      display: flex; align-items: flex-start; gap: 9px; padding-left: 10px;
    }
    .askme-a-ava {
      width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    }
    .askme-a-bubble {
      flex: 1; background: rgba(62,100,255,0.1);
      border: 1px solid rgba(62,100,255,0.22);
      border-radius: 10px; padding: 9px 13px;
    }
    .askme-a-name { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
    .askme-a-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
    .askme-a-meta {
      display: flex; align-items: center; gap: 12px; margin-top: 7px;
    }
    .askme-a-time { font-size: 11px; color: var(--text-muted); }
    .askme-like-btn {
      display: flex; align-items: center; gap: 4px;
      background: none; border: none; cursor: pointer;
      font-size: 12px; color: var(--text-muted);
      font-family: 'Open Sans', sans-serif;
      transition: color .13s;
    }
    .askme-like-btn:hover { color: #ff4d6a; }
    .askme-like-btn.liked { color: #ff4d6a; }
    .askme-like-btn.liked svg { fill: #ff4d6a; }

    /* unanswered */
    .askme-unanswered-note {
      font-size: 12px; color: var(--text-muted); font-style: italic;
      padding-left: 42px;
    }

    /* photo grid */
    .photo-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 150px);
      gap: 3px;
      padding: 0 12px;
      margin-top: 10px;
    }

    .photo-cell {
      position: relative;
      overflow: hidden;
      background-color: #111827;
    }

    .photo-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: filter .18s;
    }

    .photo-cell img:hover { filter: brightness(1.08); }

    .photo-cell-delete {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 22px;
      height: 22px;
      border: none;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.55);
      color: #fff;
      cursor: pointer;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity .14s, transform .14s, background .14s;
      z-index: 3;
    }
    .photo-cell:hover .photo-cell-delete { opacity: 1; transform: translateY(0); }
    .photo-cell-delete:hover { background: rgba(224, 82, 82, 0.9); }
    .photo-cell-delete:disabled { opacity: .5; cursor: default; }

    /* border-radius on corners */
    .photo-cell.tl { border-radius: 6px 0 0 0; }
    .photo-cell.tr { border-radius: 0 6px 0 0; }
    .photo-cell.bl { border-radius: 0 0 0 6px; }
    .photo-cell.br { border-radius: 0 0 6px 0; }

    /* camera badge */
    .camera-badge {
      position: absolute;
      top: 10px;
      left: calc(25% + 4px);
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 4px 4px rgba(0,0,0,0.25);
      z-index: 5;
      object-fit: contain;
      background: rgba(0,0,0,0.4);
    }

    /* empty cell */
    .photo-cell.empty { background: transparent; }

    /* photo button */
    .photo-btn-wrap {
      padding: 14px 12px 16px;
      display: flex;
      gap: 10px;
    }

    .btn-show-all {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-hover);
      color: var(--text-secondary);
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid var(--border);
      cursor: pointer;
      border-radius: 15px;
      padding: 8px 16px;
      transition: all 0.2s;
    }
    .btn-show-all:hover {
      background: var(--bg-tint);
      color: var(--text-primary);
      border-color: var(--accent);
    }

    .btn-photo {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background-color: var(--accent);
      color: var(--text-primary);
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      border-radius: 15px;
      padding: 8px 16px;
    }

    .btn-photo img { width: 20px; height: 20px; object-fit: contain; }

    /* ── SEARCH PEOPLE PAGE ──────────────────────────────────── */
    .user-card-wide {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border-bottom: 1px solid var(--border-dark);
      transition: background 0.15s;
    }
    .user-card-wide:last-child { border-bottom: none; }
    .user-card-wide:hover { background: rgba(255,255,255,0.02); }

    .uc-avatar-wrap {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }
    .uc-avatar-wrap .people-search-user-link {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
    }
    .uc-avatar-img { width: 100%; height: 100%; object-fit: cover; }
    .uc-avatar-wrap.online::after {
      content: '';
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 14px;
      height: 14px;
      background: var(--green-online);
      border: 2px solid var(--bg-card);
      border-radius: 50%;
    }

    .uc-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .uc-name-row { display: flex; flex-direction: column; gap: 2px; }
    .uc-name-link {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      cursor: pointer;
    }
    .uc-name-link:hover { color: var(--accent); }
    .uc-sub-info { font-size: 13px; color: var(--text-muted); }

    .uc-actions-links { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
    .uc-action-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--accent);
      cursor: pointer;
    }
    .uc-action-item:hover { text-decoration: underline; }
    .uc-action-item svg { opacity: 0.8; }

    .uc-main-btn {
      background: var(--text-primary);
      color: var(--bg-card);
      border: none;
      border-radius: 10px;
      padding: 8px 24px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      min-width: 140px;
    }
    .uc-main-btn.secondary {
      background: rgba(255,255,255,0.1);
      color: var(--text-primary);
    }

    /* Filters (Screenshot 4) */
    .search-params-card { position: sticky; top: 16px; }
    .search-filters { display: flex; flex-direction: column; gap: 20px; }
    .search-filters-apply {
      position: sticky;
      bottom: 0;
      padding-top: 2px;
      background: linear-gradient(to top, var(--bg-card) 75%, rgba(0,0,0,0));
    }
    .search-filters-apply-btn {
      width: 100%;
      border: none;
      border-radius: 10px;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      padding: 11px 14px;
      cursor: pointer;
    }
    .search-filters-apply-btn:hover { filter: brightness(1.05); }
    
    .filter-item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-dark);
    }
    .filter-item.no-border { border-bottom: none; padding-bottom: 0; }
    .filter-item.accordion { padding-bottom: 12px; cursor: pointer; }

    .filter-label {
      font-size: 13px;
      color: var(--text-muted);
    }
    .filter-section-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* Custom Div Select */
    .custom-select {
      position: relative;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .custom-select:hover { border-color: rgba(255,255,255,0.2); }
    .custom-select.mini { padding: 8px 10px; border-radius: 8px; flex: 1; }
    .custom-select.mini.flex-2 { flex: 2; }
    .cs-value { font-size: 14px; color: var(--text-secondary); }
    .custom-select-input { cursor: text; gap: 8px; }
    .custom-select-input .cs-input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
      font-family: inherit;
    }
    .custom-select-input .cs-input::placeholder { color: var(--text-secondary); }
    .cs-arrow { color: var(--text-muted); transition: transform 0.2s; }

    .cs-dropdown {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--bg-header);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-top: 4px;
      z-index: 100;
      max-height: 260px;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .cs-dropdown::-webkit-scrollbar { width: 4px; }
    .cs-dropdown::-webkit-scrollbar-track { background: transparent; }
    .cs-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .cs-opt { padding: 10px 14px; font-size: 14px; color: var(--text-secondary); }
    .cs-opt:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
    .cs-opt-empty { opacity: 0.75; pointer-events: none; }

    /* Age Range */
    .filter-range { display: flex; gap: 10px; }
    .range-input-wrap {
      flex: 1;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 0 14px;
    }
    .range-prefix { font-size: 14px; color: var(--text-muted); margin-right: 10px; }
    .range-input {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 14px;
      width: 100%;
      outline: none;
      padding: 10px 0;
    }
    .filter-row-tri { display: flex; gap: 8px; }

    /* Custom Radio */
    .radio-group { display: flex; flex-direction: column; gap: 12px; }
    .radio-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .radio-row input { display: none; }
    .radio-custom {
      width: 20px;
      height: 20px;
      border: 2px solid var(--border);
      border-radius: 50%;
      position: relative;
    }
    .radio-row input:checked + .radio-custom { border-color: var(--accent); }
    .radio-row input:checked + .radio-custom::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 10px; height: 10px;
      background: var(--accent);
      border-radius: 50%;
    }
    .radio-label { font-size: 14px; color: var(--text-primary); }

    /* Accordion Header */
    .accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .acc-arrow { color: var(--text-muted); }

    /* Checkbox Group */
    .checkbox-group { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
    .checkbox-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .checkbox-row input { display: none; }
    .checkbox-custom {
      width: 20px;
      height: 20px;
      border: 2px solid var(--border);
      border-radius: 6px;
      position: relative;
    }
    .checkbox-row input:checked + .checkbox-custom {
      background: var(--accent);
      border-color: var(--accent);
    }
    .checkbox-row input:checked + .checkbox-custom::after {
      content: '✓';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      color: #fff; font-size: 12px;
    }
    .checkbox-label { font-size: 14px; color: var(--text-primary); }

    .filter-sub-group { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
    .filter-text-input {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
    }
    .filter-text-input:focus { border-color: var(--accent); }

    .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 4px; }
    .results-count { font-size: 14px; color: var(--text-muted); }
    .results-count strong { color: var(--text-primary); }
    .results-sort { display: flex; gap: 8px; }
    .sort-btn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 12px; padding: 6px 12px; cursor: pointer; }
    /* ── BOOKMARKS PAGE ───────────────────────────────────────── */
    .bookmarks-main-card { border-radius: 0 0 10px 10px; border-top: none; }
    .bookmarks-tabs { display: flex; gap: 8px; }
    .bookmarks-tab {
      background: none; border: none; color: var(--text-muted);
      font-size: 14px; font-weight: 700; cursor: pointer;
      padding: 6px 12px; border-radius: 8px; transition: all 0.2s;
    }
    .bookmarks-tab:hover { color: var(--text-secondary); background: var(--bg-hover); }
    .bookmarks-tab.active { background: var(--bg-tint); color: var(--text-primary); }

    .bookmarks-search-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 16px; border-bottom: 1px solid var(--border-dark);
    }
    .b-search-wrap {
      flex: 1; position: relative; background: var(--bg-input);
      border: 1px solid var(--border); border-radius: 10px;
    }
    .b-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
    .b-search-input {
      width: 100%; background: none; border: none; outline: none;
      padding: 10px 12px 10px 40px; color: var(--text-primary); font-size: 14px;
    }
    .b-search-btn {
      width: 42px; height: 42px; background: var(--bg-tint);
      border: 1px solid var(--border); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); cursor: pointer; transition: all 0.2s;
    }
    .b-search-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

    .bookmarks-grid { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; }
    .b-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .b-item-ava-wrap { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }
    .b-item-ava { width: 100%; height: 100%; object-fit: cover; }
    .b-item-name { font-size: 13px; font-weight: 600; color: var(--accent); line-height: 1.4; }
    .b-item-name:hover { text-decoration: underline; }

    /* Bookmarks Nav */
    .bookmarks-nav-card { padding: 12px 0; }
    .b-nav-header { padding: 8px 16px; font-size: 13px; color: var(--text-muted); }
    .b-nav-list { display: flex; flex-direction: column; }
    .b-nav-item {
      padding: 10px 16px; font-size: 14px; color: var(--text-secondary);
      cursor: pointer; transition: all 0.2s;
    }
    .b-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
    .b-nav-item.active { background: var(--bg-tint); color: var(--text-primary); font-weight: 600; }
    .b-nav-item.sub { padding-left: 32px; font-size: 13px; }
    .b-nav-sep { height: 1px; background: var(--border-dark); margin: 8px 0; }

    .b-nav-accordion { display: flex; flex-direction: column; }
    .b-accordion-header {
      padding: 10px 16px; font-size: 14px; color: var(--text-secondary);
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; transition: all 0.2s;
    }
    .b-accordion-header:hover { background: var(--bg-hover); color: var(--text-primary); }
    .b-acc-arrow { color: var(--text-muted); transition: transform 0.2s; }
    .b-nav-accordion.open .b-acc-arrow { transform: rotate(180deg); }
    .b-accordion-content { display: none; }
    .b-nav-accordion.open .b-accordion-content { display: flex; flex-direction: column; }

    .b-nav-footer { padding: 16px; border-top: 1px solid var(--border-dark); margin-top: 10px; }
    .b-create-tag-btn {
      width: 100%; background: var(--bg-tint); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px; color: var(--text-primary);
      font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s;
    }
    .b-create-tag-btn:hover { background: var(--bg-hover); }

    /* Fix header overlap for bookmarks sidebar if needed */
    .bookmarks-nav-card { position: sticky; top: 66px; }
    .search-people-pagination { margin-top: 10px; }
    .friends-card-pagination {
      margin-top: 10px;
      padding-top: 8px;
      padding-bottom: 0;
    }
    .friends-card-pagination .wp-btn {
      min-width: 30px;
      height: 30px;
      font-size: 12px;
      padding: 0 8px;
    }



    /* ── WALL ─────────────────────────────────────────────────── */
    .wall-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── WALL PAGINATION ──────────────────────────────────────── */
    .wall-pagination {
      display: flex; align-items: center; justify-content: center;
      gap: 6px; padding: 10px 0 4px;
    }
    .wp-btn {
      min-width: 36px; height: 36px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--bg-card);
      color: var(--text-secondary); font-size: 13px; font-family: 'Open Sans', sans-serif;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      padding: 0 10px; transition: background .15s, border-color .15s, color .15s;
    }
    .wp-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .wp-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
    .wp-btn:disabled { opacity: 0.35; cursor: default; }
    .wp-dots { color: var(--text-muted); font-size: 13px; padding: 0 4px; }

    /* Composer */
    .wall-composer {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }

    .composer-body {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px 10px;
    }

    .composer-ava {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      overflow: hidden;
      flex-shrink: 0;
    }

    .composer-ava img { width: 100%; height: 100%; object-fit: cover; }

    .composer-input {
      flex: 1;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      color: var(--text-muted);
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      resize: none;
      min-height: 42px;
      outline: none;
    }

    .composer-input::placeholder { color: var(--text-muted); }
    .composer-input:focus {
      border-color: var(--accent);
      color: var(--text-primary);
      background: rgba(62,100,255,0.06);
    }

    .composer-toolbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 16px 12px 72px;
    }

    .composer-tool {
      display: flex;
      align-items: center;
      gap: 7px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      padding: 7px 12px;
      border-radius: 8px;
      transition: background 0.15s, color 0.15s;
    }

    .composer-tool:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .composer-tool svg  { flex-shrink: 0; width: 20px; height: 20px; }
    .composer-spacer    { flex: 1; }

    .composer-attachments {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 0 16px 12px 72px;
    }
    .composer-att-chip {
      display: flex; align-items: center; gap: 6px;
      background: rgba(62,100,255,0.12); border: 1px solid var(--accent);
      border-radius: 20px; padding: 4px 10px 4px 8px;
      font-size: 12px; color: var(--text-primary); max-width: 200px;
    }
    .composer-att-chip svg { flex-shrink: 0; color: var(--accent); }
    .composer-att-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .composer-att-remove {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 0; line-height: 1;
      font-size: 14px; flex-shrink: 0; display: flex; align-items: center;
    }
    .composer-att-remove:hover { color: #e05252; }

    .composer-submit {
      background-color: var(--accent);
      color: #fff;
      border: none;
      cursor: pointer;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 20px;
      border-radius: 10px;
      transition: background 0.15s;
    }

    .composer-submit:hover { background: #2a52e8; }

    /* Post card */
    #wall-posts {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .wall-section > .wall-post + .wall-post {
      margin-top: 10px;
    }

    .wall-post {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }

    .post-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px 0;
    }

    .post-ava {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: #2c3654;
      cursor: pointer;
    }

    .post-ava img { width: 100%; height: 100%; object-fit: cover; }

    .post-meta { flex: 1; }

    .post-author {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      cursor: pointer;
    }

    .post-time {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .post-more {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      padding: 4px 6px;
      border-radius: 6px;
      display: flex;
      align-items: center;
    }

    .post-more:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .post-more.active { background: rgba(255,255,255,0.08); color: var(--text-primary); }

    /* ── POST-MORE DROPDOWN ───────────────────────────────────── */
    .post-more-menu {
      position: fixed; z-index: 8000;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 6px 0;
      min-width: 220px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55);
      opacity: 0; transform: scale(.95) translateY(-6px);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity .15s, transform .15s;
    }
    .post-more-menu.open {
      opacity: 1; transform: scale(1) translateY(0);
      pointer-events: all;
    }
    .pmm-item {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 16px; cursor: pointer;
      font-size: 14px; color: var(--text-secondary);
      transition: background .12s, color .12s;
      white-space: nowrap;
    }
    .pmm-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .pmm-item.danger { color: #e05252; }
    .pmm-item.danger:hover { background: rgba(224,82,82,0.1); color: #e05252; }
    .pmm-item svg { flex-shrink: 0; opacity: .75; }
    .pmm-sep { height: 1px; background: var(--border); margin: 5px 0; }

    .post-text {
      font-size: 14px;
      color: var(--text-primary);
      line-height: 1.6;
      padding: 12px 16px;
    }

    .post-repost {
      margin: 0 16px 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      overflow: hidden;
    }

    .post-repost-head {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
      padding: 10px 12px 6px;
    }

    .post-repost-group {
      padding: 0 12px 10px;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .post-repost-photo {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
      border-top: 1px solid var(--border);
    }

    .post-audio-playlist {
      margin: 0 16px 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      overflow: hidden;
    }

    .post-audio-playlist .pl-item {
      padding: 11px 12px;
    }

    .post-audio-playlist .pl-cover {
      width: 44px;
      height: 44px;
      border-radius: 9px;
    }

    .post-audio-playlist .pl-name {
      font-size: 14px;
    }

    .post-audio-playlist .pl-artist,
    .post-audio-playlist .pl-duration {
      font-size: 12px;
    }

    .post-audio-playlist .wall-audio-item.active {
      background: rgba(62, 100, 255, 0.16);
    }

    .post-audio-playlist .wall-audio-actions {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
      flex-shrink: 0;
    }

    .post-audio-playlist .wall-audio-icon-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }

    .post-audio-playlist .wall-audio-icon-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(62,100,255,0.1);
    }

    .post-audio-playlist .wall-audio-icon-btn.active[data-action="like"] {
      color: #ff4d6a;
      border-color: rgba(255,77,106,0.5);
      background: rgba(255,77,106,0.12);
    }
    .post-audio-playlist .wall-audio-icon-btn.active[data-action="like"] svg {
      fill: currentColor;
      stroke: currentColor;
    }

    .post-audio-playlist .wall-audio-icon-btn.active[data-action="save"] {
      color: var(--accent);
      border-color: rgba(62,100,255,0.5);
      background: rgba(62,100,255,0.16);
    }

    .post-video-card {
      margin: 0 16px 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,0.03);
      position: relative;
      cursor: pointer;
    }

    .post-video-preview {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      filter: brightness(0.9);
      transition: filter 0.2s;
    }

    .post-video-card:hover .post-video-preview {
      filter: brightness(1);
    }

    .post-video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .post-video-duration {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: rgba(0,0,0,0.7);
      border-radius: 8px;
      padding: 4px 8px;
      line-height: 1;
    }

    /* post edit mode */
    .post-edit-container {
      padding: 12px 16px;
    }
    .post-edit-area {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      padding: 12px;
      font-size: 14px;
      line-height: 1.6;
      resize: none;
      margin-bottom: 12px;
      outline: none;
      font-family: inherit;
      display: block;
    }
    .post-edit-area:focus { border-color: var(--accent); }
    .post-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .post-save-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 7px 20px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .post-save-btn:hover { background: #2a52e8; }
    .post-cancel-btn {
      background: rgba(255,255,255,0.08);
      color: var(--text-primary);
      border: none;
      padding: 7px 20px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .post-cancel-btn:hover { background: rgba(255,255,255,0.12); }

    .post-photo {
      width: 100%;
      max-height: 340px;
      object-fit: cover;
      display: block;
    }

    .post-photo-wrap {
      position: relative;
    }
    .post-photo-overlay {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 10;
      pointer-events: none;
    }
    .post-photo-wrap:hover .post-photo-overlay {
      opacity: 1;
    }
    .p-overlay-btn {
      width: 32px;
      height: 32px;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(8px);
      border: none;
      border-radius: 8px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: auto;
      transition: all 0.2s;
    }
    .p-overlay-btn:hover {
      background: rgba(0,0,0,0.6);
      transform: scale(1.05);
    }
    .p-overlay-btn.p-edit:hover { color: var(--accent); }
    .p-overlay-btn.p-delete:hover { color: #ff4d4d; }

    .post-photo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
    }

    .post-photo-item {
      position: relative;
      overflow: hidden;
    }

    .post-photo-grid .post-photo-overlay {
      top: 8px;
      right: 8px;
    }

    .post-photo-wrap:hover .post-photo-grid .post-photo-overlay {
      opacity: 0;
    }

    .post-photo-grid .post-photo-item:hover .post-photo-overlay {
      opacity: 1;
    }

    .post-photo-grid img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
      cursor: pointer;
      transition: brightness .18s;
    }
    .post-photo-grid img:hover { filter: brightness(1.12); }

    .post-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0 16px;
    }

    .post-actions {
      display: flex;
      align-items: center;
      padding: 5px 9px;
    }

    .post-action {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      font-weight: 600;
      padding: 9px 12px;
      border-radius: 8px;
      transition: background 0.15s, color 0.15s;
    }

    .post-action:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
    .post-action.liked  { color: #ff4d6a; }
    .post-action.liked:hover { color: #ff4d6a; }
    .post-action.liked svg { fill: #ff4d6a; }

    .post-action svg { flex-shrink: 0; width: 18px; height: 18px; }

    /* ── LIKES TOOLTIP ───────────────────────────────────────── */
    .like-wrap {
      position: relative;
      display: inline-flex;
    }

    .likes-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.45);
      z-index: 300;
      min-width: 220px;
      max-width: 320px;
      white-space: nowrap;
    }

    /* arrow — aligned to left side of tooltip (over the button) */
    .likes-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 24px;
      border: 7px solid transparent;
      border-top-color: var(--border);
    }

    .likes-tooltip::before {
      content: '';
      position: absolute;
      top: calc(100% - 1px);
      left: 24px;
      border: 7px solid transparent;
      border-top-color: var(--bg-card);
      z-index: 1;
    }

    .like-wrap:hover .likes-tooltip { display: block; }

    .lt-title {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    .lt-users {
      display: flex;
      flex-direction: row;
      gap: 6px;
    }

    .lt-user {
      display: flex;
    }

    .lt-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid var(--bg-card);
    }

    .lt-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .lt-more {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    /* ═══════════════════════════════════════════════════════════ */
    /* POST COMMENTS                                                */
    /* ═══════════════════════════════════════════════════════════ */
    .comment-btn.active { color: var(--accent); }

    .post-comments {
      border-top: 1px solid var(--border);
      padding: 14px 16px 6px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .comment-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .comment-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: -2px;
    }

    .comment-pagination .comment-page-btn {
      min-width: 30px;
      height: 30px;
      border-radius: 8px;
      font-size: 12px;
      padding: 0 8px;
    }

    .comment-pagination .wp-dots {
      font-size: 12px;
      padding: 0 2px;
    }

    .comment-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--bg-card);
    }

    .comment-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .comment-body {
      flex: 1;
      min-width: 0;
      background: var(--bg-input, rgba(255,255,255,0.05));
      border-radius: 10px;
      padding: 9px 12px;
      position: relative;
    }

    /* ── COMMENT ACTIONS ──────────────────────────────────────── */
    .comment-actions {
      position: absolute; top: 7px; right: 8px;
      display: flex; gap: 2px;
      opacity: 0; pointer-events: none;
      transition: opacity .15s;
    }
    .comment-item:hover .comment-actions,
    .comment-body:focus-within .comment-actions {
      opacity: 1; pointer-events: all;
    }
    .comment-act-btn {
      width: 26px; height: 26px; border-radius: 6px;
      border: none; background: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: background .13s, color .13s;
    }
    .comment-act-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
    .comment-act-btn.del-btn:hover { color: #e05252; background: rgba(224,82,82,0.12); }

    /* edit textarea */
    .comment-edit-area {
      width: 100%; background: rgba(255,255,255,0.07);
      border: 1px solid var(--accent); border-radius: 6px;
      color: var(--text-primary); font-size: 13px;
      font-family: 'Open Sans', sans-serif;
      padding: 6px 8px; resize: none; outline: none;
      line-height: 1.5; margin-top: 4px;
    }
    .comment-edit-btns { display: flex; gap: 6px; margin-top: 6px; }
    .comment-edit-save, .comment-edit-cancel {
      font-size: 12px; font-family: 'Open Sans', sans-serif;
      border-radius: 6px; padding: 4px 12px;
      cursor: pointer; border: none; transition: opacity .15s;
    }
    .comment-edit-save   { background: var(--accent); color: #fff; }
    .comment-edit-save:hover { opacity: .85; }
    .comment-edit-cancel { background: rgba(255,255,255,0.08); color: var(--text-muted); }
    .comment-edit-cancel:hover { background: rgba(255,255,255,0.13); color: var(--text-primary); }

    /* delete countdown row */
    .comment-undo-row {
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(224,82,82,0.12);
      border: 1px solid rgba(224,82,82,0.3);
      border-radius: 8px; padding: 8px 12px;
      margin: 4px 0;
    }
    .comment-undo-text { font-size: 13px; color: #e05252; }
    .comment-undo-btn {
      font-size: 12px; font-weight: 700; color: var(--accent);
      background: none; border: none; cursor: pointer;
      padding: 2px 6px; border-radius: 4px;
      transition: background .12s;
    }
    .comment-undo-btn:hover { background: rgba(62,100,255,0.15); }

    .comment-author {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 3px;
      cursor: pointer;
    }

    .comment-author:hover { color: var(--accent); }

    .comment-text {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      word-break: break-word;
    }

    .comment-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 6px;
    }

    .comment-time {
      font-size: 11px;
      color: var(--text-muted);
    }

    .comment-meta-btn {
      background: none;
      border: none;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 3px;
      transition: color .15s;
    }

    .comment-meta-btn:hover  { color: var(--accent); }
    .comment-meta-btn:active { transform: none; }
    .comment-meta-btn.clk-liked { color: #ff4d6a; }
    .comment-meta-btn.clk-liked svg { fill: #ff4d6a; }

    /* comment form */
    .comment-form {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .comment-form-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .comment-form-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .comment-input-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      background: var(--bg-input, rgba(255,255,255,0.06));
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 6px 6px 6px 14px;
      gap: 6px;
    }

    .comment-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-size: 13px;
      font-family: 'Open Sans', sans-serif;
    }

    .comment-input::placeholder { color: var(--text-muted); }

    .comment-send-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
      transition: background .15s;
    }

    .comment-send-btn:hover { background: #2a52e8; }

    /* ── Comment icon buttons (attach / emoji) ── */
    .comment-icon-btn {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      transition: color .15s, background .15s;
    }
    .comment-icon-btn:hover { color: var(--accent); background: rgba(62,100,255,0.12); }

    /* ── Emoji picker popup ── */
    .emoji-picker-popup {
      position: absolute; z-index: 700;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 10px 8px;
      display: none; flex-wrap: wrap; gap: 2px;
      width: 264px; box-shadow: 0 8px 28px rgba(0,0,0,0.55);
    }
    .emoji-picker-popup.open { display: flex; }
    .ep-btn {
      background: none; border: none; cursor: pointer; font-size: 20px;
      width: 34px; height: 34px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s;
    }
    .ep-btn:hover { background: rgba(255,255,255,0.1); }

    .post-views {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-muted);
      font-size: 15px;
      font-weight: 600;
      padding: 9px 12px;
    }

    .post-views svg { width: 17px; height: 17px; }

    /* ── SIDEBAR CARDS (right col) ────────────────────────────── */
    .side-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .side-card-header {
      background-color: var(--bg-header);
      border-radius: 10px 10px 0 0;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: relative;
    }

    .side-card-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .side-card-more-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.2s, color 0.2s;
    }

    .side-card-more-btn img {
      opacity: 0.6;
      transition: opacity 0.2s;
    }

    .side-card-more-btn:hover {
      background-color: var(--bg-hover);
      color: var(--text-primary);
    }

    .side-card-more-btn:hover img {
      opacity: 1;
    }

    /* Smooth sorting animation */
    .side-card {
      position: relative;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      will-change: transform;
    }
    .side-card.sorting {
      z-index: 10;
      pointer-events: none;
    }

    .side-card:has(.side-card-dropdown.open) {
      z-index: 100;
    }

    .side-card-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      z-index: 200;
      min-width: 140px;
      padding: 6px;
      display: none;
      animation: userMenuOpen 0.2s ease-out;
    }

    .side-card-dropdown.open {
      display: block;
    }

    .side-card-opt {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
    }

    .side-card-opt:hover {
      background-color: var(--bg-hover);
      color: var(--text-primary);
    }

    .side-card-opt i,
    .side-card-opt svg {
      flex-shrink: 0;
      opacity: 0.7;
    }

    .side-card-opt:hover i,
    .side-card-opt:hover svg {
      opacity: 1;
    }

    .side-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .side-badge {
      background-color: var(--accent);
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      padding: 1px 8px;
    }

    .side-card-body { padding: 14px 16px 14px; }

    /* Add Widget Block */
    .add-widget-container {
      border: 2px dashed var(--border);
      border-radius: 10px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      transition: border-color 0.2s, background-color 0.2s;
      cursor: pointer;
    }

    .add-widget-container:hover {
      border-color: var(--accent);
      background-color: var(--bg-hover);
    }

    .add-widget-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 600;
      transition: color 0.2s;
    }

    .add-widget-container:hover .add-widget-btn {
      color: var(--text-primary);
    }

    .add-widget-btn i {
      font-size: 18px;
    }

    /* City Chat Styles */
    .city-chat-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 250px;
      overflow-y: auto;
      padding-right: 4px;
      margin-bottom: 2px;
    }

    .city-chat-list::-webkit-scrollbar { width: 4px; }
    .city-chat-list::-webkit-scrollbar-track { background: transparent; }
    .city-chat-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .city-chat-item {
      display: flex;
      gap: 10px;
    }

    .city-chat-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .city-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .city-chat-msg-wrap {
      flex: 1;
      background-color: var(--bg-header);
      padding: 8px 12px;
      border-radius: 0 12px 12px 12px;
      border: 1px solid var(--border);
    }

    .city-chat-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 2px;
      display: block;
    }

    .city-chat-text {
      font-size: 13px;
      color: var(--text-primary);
      line-height: 1.4;
      word-break: break-word;
    }

    .city-chat-footer {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 6px;
    }

    .city-chat-reply {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .city-chat-reply:hover { opacity: 0.7; }

    .city-chat-input-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      background-color: var(--bg-header);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 4px 4px 4px 12px;
    }

    .city-chat-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-size: 13px;
      padding: 6px 0;
    }

    .city-chat-input::placeholder { color: var(--text-muted); }

    .city-chat-send {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.1s;
      cursor: pointer;
      border: none;
      flex-shrink: 0;
    }

    .city-chat-send:hover { background-color: #2a52e8; }
    .city-chat-send:active { transform: scale(0.92); }

    /* followers avatars */
    .followers-row {
      display: flex;
      align-items: center;
    }

    .follower-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid #000;
      overflow: hidden;
      flex-shrink: 0;
      margin-right: -12px;
      background-color: #2c3654;
    }

    .follower-avatar:last-child { margin-right: 0; }
    .follower-avatar img { width: 100%; height: 100%; object-fit: cover; }

    /* friends grid */
    .friends-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px 8px;
    }

    .friend-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .friend-avatar {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #2c3654;
    }

    .friend-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .friend-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
    }

    .friends-inner {
      display: flex;
      gap: 0;
    }

    .friends-grid-wrap {
      flex: 1;
      max-height: 220px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) rgba(255,255,255,0.06);
      padding-right: 4px;
    }

    /* Webkit scrollbar styled as the old accent bar */
    .friends-grid-wrap::-webkit-scrollbar {
      width: 6px;
    }
    .friends-grid-wrap::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.06);
      border-radius: 3px;
    }
    .friends-grid-wrap::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 3px;
    }
    .friends-grid-wrap::-webkit-scrollbar-thumb:hover {
      background: #2a52e8;
    }

    /* community */
    .community-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-height: 400px; /* Ограничиваем высоту */
      overflow-y: auto; /* Добавляем скролл */
      padding-right: 4px;
    }

    /* Кастомный скроллбар для списка сообществ */
    .community-list::-webkit-scrollbar {
      width: 4px;
    }
    .community-list::-webkit-scrollbar-track {
      background: transparent;
    }
    .community-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }
    .community-list::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }

    .community-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px;
      border-radius: 8px;
      transition: background 0.2s;
      cursor: pointer;
    }
    .community-item:hover {
      background: var(--bg-hover);
    }

    .community-avatar-mini {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background-color: var(--bg-header);
    }

    .community-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

    .community-info-mini { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

    .community-name-mini {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .community-desc-mini {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── MUSIC LIST ────────────────────────────────────────────── */
    .music-list {
      padding: 10px 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .music-list .music-pl-list {
      max-height: 420px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .music-list .music-pl-list::-webkit-scrollbar {
      width: 4px;
    }
    .music-list .music-pl-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .music-list .pl-item {
      border: 1px solid transparent;
      border-radius: 10px;
      padding: 10px 12px;
      gap: 10px;
      transition: background .12s, border-color .12s;
    }

    .music-list .pl-item:hover {
      background: var(--bg-hover);
      border-color: rgba(62,100,255,0.22);
    }

    .music-list .pl-item.active {
      background: rgba(62,100,255,0.12);
      border-color: rgba(62,100,255,0.35);
    }

    .music-list .pl-cover {
      width: 44px;
      height: 44px;
      border-radius: 9px;
    }

    .music-list .pl-name {
      font-size: 14px;
    }

    .music-list .pl-artist,
    .music-list .pl-duration {
      font-size: 12px;
    }

    .music-list .wall-audio-actions {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 6px;
      flex-shrink: 0;
    }

    .music-list .wall-audio-icon-btn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }

    .music-list .wall-audio-icon-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(62,100,255,0.10);
    }

    .music-list .wall-audio-icon-btn.active[data-action="like"] {
      color: #ff4d6a;
      border-color: rgba(255,77,106,0.5);
      background: rgba(255,77,106,0.12);
    }

    .music-list .wall-audio-icon-btn.active[data-action="like"] svg {
      fill: currentColor;
      stroke: currentColor;
    }

    /* ═══════════════════════════════════════════════════════════ */
    /* FRIENDS PAGE                                                 */
    /* ═══════════════════════════════════════════════════════════ */

    /* filter card */
    .friends-filter-card {
      margin-bottom: 12px;
    }

    .friends-search-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .friends-searchbox {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 7px 10px;
    }

    .friends-searchbox svg { color: var(--text-muted); flex-shrink: 0; }

    .friends-searchbox input {
      background: none;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-size: 13px;
      width: 100%;
    }

    .friends-searchbox input::placeholder { color: var(--text-muted); }

    .friends-search-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 2px;
    }

    .friends-search-btn {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      padding: 0;
      flex-shrink: 0;
    }

    .friends-search-clear {
      background: rgba(255,255,255,0.07);
      color: var(--text-muted);
      border: 1px solid var(--border);
    }

    .friends-search-clear:hover {
      background: rgba(255,255,255,0.12);
      color: var(--text-primary);
      border-color: var(--accent);
    }

    /* category tabs */
    .friends-cats {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      padding-bottom: 4px;
    }

    .fcat-btn {
      background: none;
      border: none;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 13px;
      color: var(--text-muted);
      cursor: pointer;
      transition: background .15s, color .15s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .fcat-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

    .fcat-btn.active {
      background: var(--accent);
      color: #fff;
    }

    .fcat-badge {
      font-size: 11px;
      background: rgba(255,255,255,0.15);
      border-radius: 10px;
      padding: 1px 5px;
    }

    .fcat-btn.active .fcat-badge { background: rgba(255,255,255,0.25); }

    .online-badge { background: #5cb85c !important; color: #fff; }

    /* friends grid card */
    .friends-grid-card {
      padding: 16px;
      margin-bottom: 12px;
    }

    .fcat-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }

    .friends-page-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* single friend row */
    .fp-friend {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 0;
      transition: background .12s;
    }

    .fp-friend:hover { background: rgba(255,255,255,0.03); border-radius: 8px; }

    /* avatar with online dot */
    .fp-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: var(--bg-card);
    }

    .fp-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .fp-avatar.online::after {
      content: '';
      position: absolute;
      bottom: 4px;
      right: 4px;
      width: 14px;
      height: 14px;
      background: #5cb85c;
      border-radius: 50%;
      border: 2px solid var(--bg-card);
    }

    .fp-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .fp-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .fp-name:hover { color: var(--accent); text-decoration: underline; }

    .fp-mutual {
      font-size: 12px;
      color: var(--text-muted);
    }

    .fp-online-txt { color: #5cb85c !important; }

    .fp-action {
      flex-shrink: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: none;
      color: var(--text-muted);
      font-size: 12px;
      padding: 5px 12px;
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
      white-space: nowrap;
    }

    .fp-action:hover { border-color: var(--accent); color: var(--accent); }

    .fp-action.friend-added {
      background: rgba(63,109,236,0.12);
      border-color: var(--accent);
      color: var(--accent);
    }

    .fp-action.friend-added:hover {
      background: rgba(220,50,50,0.12);
      border-color: #e05252;
      color: #e05252;
    }

    /* friend requests / suggestions list */
    .freq-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .freq-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .freq-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--bg-card);
    }

    .freq-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .freq-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .freq-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .freq-name:hover { color: var(--accent); }

    .freq-mutual {
      font-size: 11px;
      color: var(--text-muted);
    }

    .freq-actions {
      display: flex;
      gap: 4px;
    }

    .freq-accept, .freq-decline {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .15s;
    }

    .freq-accept  { background: var(--accent); color: #fff; }
    .freq-decline { background: rgba(255,255,255,0.08); color: var(--text-muted); }
    .freq-accept:hover  { opacity: 0.85; }
    .freq-decline:hover { background: rgba(255,255,255,0.14); color: var(--text-primary); }

    /* categories sidebar list */
    .fcat-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .fcat-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: var(--text-secondary);
      text-decoration: none;
      padding: 6px 4px;
      border-radius: 6px;
      transition: background .12s, color .12s;
    }

    .fcat-link:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

    .fcat-cnt {
      font-size: 12px;
      color: var(--text-muted);
    }

    .fcat-add { color: var(--accent); }
    .fcat-add:hover { color: var(--accent); opacity: .8; }

    /* ── THUMBNAIL MODAL ──────────────────────────────────────── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity .25s, background .25s, visibility .25s;
    }
    .modal-overlay.open {
      opacity: 1; visibility: visible;
      background: rgba(0,0,0,0.65);
    }

    .modal-box {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      width: 440px;
      max-width: calc(100vw - 32px);
      padding: 0;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55);
      transform: translateY(18px) scale(0.97);
      transition: transform .25s cubic-bezier(.34,1.3,.64,1), opacity .25s;
      opacity: 0;
    }
    .modal-overlay.open .modal-box {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .modal-box-cover {
      width: 760px;
      max-width: calc(100vw - 32px);
    }

    .modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .modal-title {
      font-size: 16px; font-weight: 700; color: var(--text-primary);
    }
    .modal-close {
      width: 30px; height: 30px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.07); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: background .15s, color .15s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.13); color: #fff; }

    .modal-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; }

    .thumb-upload-editor {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .cover-upload-editor {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .file-dropzone {
      border: 1px dashed var(--border-dark);
      border-radius: 12px;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      color: var(--text-muted);
      cursor: pointer;
      background: rgba(255,255,255,0.02);
      transition: border-color .15s, background .15s, color .15s;
      padding: 18px;
    }
    .file-dropzone:hover,
    .file-dropzone.dragover {
      border-color: var(--accent);
      background: rgba(62,100,255,0.08);
      color: var(--text-primary);
    }
    .dz-main {
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 700;
    }
    .dz-sub {
      color: var(--text-muted);
      font-size: 12px;
    }
    .dz-meta {
      color: var(--text-muted);
      font-size: 11px;
      opacity: .9;
    }

    .thumb-preview-block {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
      padding: 10px;
    }
    .thumb-preview-block img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid var(--border-dark);
      background: rgba(0,0,0,0.2);
    }
    .thumb-preview-meta {
      min-width: 0;
      flex: 1;
    }
    .thumb-preview-name {
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .thumb-crop-editor {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cover-crop-editor {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .thumb-crop-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .thumb-crop-stage {
      position: relative;
      width: 100%;
      height: 290px;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-dark);
      user-select: none;
      touch-action: none;
    }
    .cover-crop-stage {
      position: relative;
      width: 100%;
      height: 340px;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-dark);
      user-select: none;
      touch-action: none;
    }
    .thumb-crop-stage img {
      position: absolute;
      pointer-events: none;
      max-width: none;
      max-height: none;
    }
    .cover-crop-stage img {
      position: absolute;
      pointer-events: none;
      max-width: none;
      max-height: none;
    }
    .thumb-crop-area {
      position: absolute;
      border: 2px solid var(--accent);
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.35) inset;
      border-radius: 10px;
      cursor: move;
      display: none;
    }
    .cover-crop-area {
      position: absolute;
      border: 2px solid var(--accent);
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.35) inset;
      border-radius: 8px;
      cursor: move;
      display: none;
    }
    .thumb-crop-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .thumb-crop-controls label {
      color: var(--text-muted);
      font-size: 12px;
      min-width: 110px;
    }
    .thumb-crop-controls input[type="range"] {
      flex: 1;
      accent-color: var(--accent);
    }

    .modal-footer {
      display: flex; justify-content: flex-end; gap: 10px;
      padding: 14px 20px; border-top: 1px solid var(--border);
    }
    .btn-cancel {
      background: rgba(255,255,255,0.07); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text-muted); font-size: 13px; font-weight: 600;
      padding: 8px 18px; cursor: pointer; transition: background .15s, color .15s;
    }
    .btn-cancel:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
    .btn-save {
      background: var(--accent); border: none;
      border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700;
      padding: 8px 20px; cursor: pointer; transition: background .15s, opacity .15s;
    }
    .btn-save:hover { background: #2a52e8; }
    .btn-save:disabled { opacity: .45; cursor: default; }

    /* ── PHOTO FEED MODAL (VK STYLE) ───────────────────────── */
    .photo-feed-box {
      width: 960px;
      height: 90vh;
      max-width: calc(100vw - 20px);
      background: var(--bg-card);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .photo-feed-header {
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-header);
      border-bottom: 1px solid var(--border);
    }

    .photo-feed-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .photo-feed-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      background: var(--bg-page);
    }
    .photo-feed-body::-webkit-scrollbar { width: 6px; }
    .photo-feed-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .photo-feed-list {
      display: block;
    }

    .photo-feed-status {
      min-height: 24px;
      margin-top: 10px;
      font-size: 13px;
      text-align: center;
      color: var(--text-muted);
    }

    .photo-feed-status.loading::before {
      content: 'Загружаем фото...';
    }

    .photo-feed-status.empty::before {
      content: 'Фотографий пока нет';
    }

    .photo-feed-status.end::before {
      content: 'Вы дошли до конца';
    }

    .photo-feed-status.error::before {
      content: 'Ошибка загрузки. Прокрутите еще раз для повтора';
    }

    .feed-year-section {
      margin-bottom: 32px;
    }

    .feed-year-title {
      font-size: 19px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .feed-year-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
      opacity: 0.5;
    }

    .feed-photo-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    .feed-photo-item {
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg-card);
      cursor: pointer;
      position: relative;
      transition: transform 0.2s;
    }
    .feed-photo-item:hover { transform: scale(1.02); z-index: 1; }
    .feed-photo-item img { width: 100%; height: 100%; object-fit: cover; }

    .feed-photo-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;
      color: #fff;
    }
    .feed-photo-item:hover .feed-photo-overlay { opacity: 1; }

    .feed-photo-stats {
      display: flex;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
    }
    .feed-stat { display: flex; align-items: center; gap: 4px; }
    .feed-stat svg { width: 14px; height: 14px; }
    .photo-upload-box {
      width: 800px;
      max-width: calc(100vw - 40px);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    }

    .photo-upload-header {
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-header);
      border-bottom: 1px solid var(--border);
      border-radius: 20px 20px 0 0;
    }

    .photo-upload-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .photo-upload-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-hover);
      border: none;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .photo-upload-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }

    .photo-upload-body {
      padding: 20px;
      min-height: 400px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }

    .photo-upload-count {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .photo-upload-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      max-height: 500px;
      overflow-y: auto;
      padding-right: 4px;
    }
    .photo-upload-grid::-webkit-scrollbar { width: 6px; }
    .photo-upload-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .photo-upload-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-page);
      border: 1px solid var(--border);
    }

    .photo-upload-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .photo-upload-remove {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.8;
      transition: all 0.2s;
    }
    .photo-upload-remove:hover { opacity: 1; background: #e84040; border-color: transparent; }

    .photo-upload-footer {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border);
    }

    .photo-upload-add-btn {
      color: var(--accent);
      background: none;
      border: none;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      transition: opacity 0.2s;
    }
    .photo-upload-add-btn:hover { opacity: 0.8; text-decoration: underline; }

    .photo-upload-actions {
      display: flex;
      gap: 12px;
    }

    .btn-save-count {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .save-badge {
      background: #000;
      color: #fff;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .comment-attach-box {
      width: 470px;
      max-width: calc(100vw - 24px);
    }

    .comment-attach-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 20px;
    }

    .comment-attach-option {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      color: var(--text-secondary);
      min-height: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Open Sans', sans-serif;
      transition: border-color .15s, color .15s, background .15s;
    }
    .comment-attach-option:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(62,100,255,0.10);
    }

    .comment-attach-gallery {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 20px;
    }

    .comment-gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      max-height: 280px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .comment-gallery-item {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid transparent;
      background: rgba(255,255,255,0.04);
      cursor: pointer;
      transition: border-color .15s, transform .15s;
    }
    .comment-gallery-item:hover {
      border-color: var(--accent);
      transform: translateY(-1px);
    }
    .comment-gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .comment-gallery-empty {
      grid-column: 1 / -1;
      padding: 18px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      color: var(--text-muted);
      font-size: 13px;
      text-align: center;
    }

    .comment-gallery-back {
      align-self: flex-end;
    }

    /* ── PHOTO VIEWER ─────────────────────────────────────────── */
    .pv-overlay {
      position: fixed; inset: 0; z-index: 9500;
      background: rgba(0,0,0,0);
      display: flex;
      opacity: 0; visibility: hidden;
      transition: opacity .25s, visibility .25s, background .25s;
    }
    .pv-overlay.open {
      opacity: 1; visibility: visible;
      background: rgba(0,0,0,0.93);
    }

    /* left stage */
    .pv-stage {
      flex: 1; display: flex; align-items: center; justify-content: center;
      position: relative; min-width: 0; overflow: hidden; cursor: pointer;
    }
    .pv-img-wrap {
      display: flex; align-items: center; justify-content: center;
      padding: 72px 64px; max-width: 100%; pointer-events: none;
    }
    .pv-img {
      max-width: 100%; max-height: calc(100vh - 140px);
      object-fit: contain; border-radius: 4px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.7);
      pointer-events: none; user-select: none;
    }

    /* top bar */
    .pv-topbar {
      position: absolute; top: 0; left: 0; right: 0; height: 56px;
      display: flex; align-items: center; padding: 0 18px; gap: 10px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
      z-index: 20; pointer-events: none;
    }
    .pv-counter {
      font-size: 16px; color: rgba(255,255,255,0.65);
    }

    /* nav arrows */
    .pv-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(255,255,255,0.13); border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #fff; z-index: 20;
      transition: background .15s, opacity .2s;
      pointer-events: all;
    }
    .pv-arrow:hover { background: rgba(255,255,255,0.24); }
    .pv-arrow.pv-prev { left: 14px; }
    .pv-arrow.pv-next { right: 14px; }
    .pv-arrow.hidden  { opacity: 0; pointer-events: none; }

    /* right panel */
    .pv-panel {
      width: 370px; flex-shrink: 0;
      background: var(--bg-card);
      display: flex; flex-direction: column;
      border-left: 1px solid var(--border);
      transform: translateX(24px);
      transition: transform .28s cubic-bezier(.34,1.2,.64,1);
    }
    .pv-overlay.open .pv-panel { transform: translateX(0); }

    .pv-panel-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    }
    .pv-panel-ava {
      width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    }
    .pv-panel-ava img { width: 100%; height: 100%; object-fit: cover; }
    .pv-panel-meta { flex: 1; min-width: 0; }
    .pv-panel-name { font-size: 17px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
    .pv-panel-name:hover { text-decoration: underline; }
    .pv-panel-time { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

    .pv-close-btn {
      width: 32px; height: 32px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.08); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: background .15s, color .15s; flex-shrink: 0;
    }
    .pv-close-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }

    /* actions */
    .pv-actions {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .pv-action-btn {
      display: flex; align-items: center; gap: 5px;
      background: none; border: 1px solid var(--border); border-radius: 8px;
      color: var(--text-muted); font-size: 16px; padding: 6px 11px;
      cursor: pointer; font-family: 'Open Sans', sans-serif;
      transition: border-color .15s, color .15s, background .15s;
    }
    .pv-action-btn:hover { border-color: var(--accent); color: var(--accent); }
    .pv-action-btn.pv-liked { background: rgba(62,100,255,0.15); border-color: var(--accent); color: var(--accent); }
    .pv-action-btn.pv-liked svg { fill: var(--accent); }
    .pv-action-sep { flex: 1; }
    .pv-icon-btn {
      width: 32px; height: 32px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.07); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); text-decoration: none;
      transition: background .15s, color .15s;
    }
    .pv-icon-btn:hover { background: rgba(255,255,255,0.14); color: var(--text-primary); }

    /* comment list */
    .pv-comments {
      flex: 1; overflow-y: auto;
      padding: 14px 16px; display: flex; flex-direction: column; gap: 14px;
    }
    .pv-comments::-webkit-scrollbar { width: 4px; }
    .pv-comments::-webkit-scrollbar-track { background: transparent; }
    .pv-comments::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .pv-no-comments {
      text-align: center; color: var(--text-muted); font-size: 16px; padding: 24px 0;
    }

    /* thumbnail strip */
    .pv-thumbstrip {
      display: flex; gap: 4px; padding: 8px 14px;
      border-top: 1px solid var(--border);
      overflow-x: auto; flex-shrink: 0;
    }
    .pv-thumbstrip::-webkit-scrollbar { height: 3px; }
    .pv-thumbstrip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .pv-thumb {
      width: 54px; height: 54px; border-radius: 5px; overflow: hidden;
      flex-shrink: 0; cursor: pointer; opacity: .5;
      border: 2px solid transparent;
      transition: opacity .15s, border-color .15s;
    }
    .pv-thumb.active { opacity: 1; border-color: var(--accent); }
    .pv-thumb:hover  { opacity: .85; }
    .pv-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* comment form */
    .pv-comment-form {
      padding: 9px 11px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    }
    .pv-comment-ava { width: 51px; height: 51px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
    .pv-comment-ava img { width: 100%; height: 100%; object-fit: cover; }
    .pv-comment-input-wrap {
      flex: 1; display: flex; align-items: center; gap: 5px;
      background: rgba(255,255,255,0.06); border: 1px solid var(--border);
      border-radius: 20px; padding: 5px 10px;
      transition: border-color .15s;
    }
    .pv-comment-input-wrap:focus-within { border-color: var(--accent); }
    .pv-comment-input {
      flex: 1; background: none; border: none; outline: none;
      color: var(--text-primary); font-size: 13px; font-family: 'Open Sans', sans-serif;
    }
    .pv-comment-input::placeholder { color: var(--text-muted); }
    .pv-comment-send {
      background: none; border: none; cursor: pointer;
      color: var(--accent); display: flex; align-items: center;
      transition: opacity .15s;
    }
    .pv-comment-send:hover { opacity: .7; }

    /* ── VIDEO VIEWER ─────────────────────────────────────────── */
    .vv-overlay {
      position: fixed; inset: 0; z-index: 9600;
      background: rgba(0,0,0,0);
      display: flex;
      opacity: 0; visibility: hidden;
      transition: opacity .25s, visibility .25s, background .25s;
    }
    .vv-overlay.open {
      opacity: 1; visibility: visible;
      background: rgba(0,0,0,0.93);
    }

    .vv-stage {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 68px 20px 20px;
    }

    .vv-topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
    }

    .vv-title {
      font-size: 16px;
      color: rgba(255,255,255,0.82);
      font-weight: 600;
      max-width: calc(100% - 60px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .vv-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s, color .15s;
      flex-shrink: 0;
    }
    .vv-close-btn:hover {
      background: rgba(255,255,255,0.18);
      color: #fff;
    }

    .vv-video-wrap {
      width: min(1200px, 95vw);
      max-height: calc(100vh - 96px);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 14px 46px rgba(0,0,0,0.65);
      background: #000;
    }

    .vv-video {
      display: block;
      width: 100%;
      max-height: calc(100vh - 96px);
      background: #000;
    }

    /* ── MESSENGER WIDGET ─────────────────────────────────────── */
    .msgr-widget {
      position: fixed;
      bottom: 0;
      right: 32px;
      width: 320px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateY(calc(100% - 48px)); /* only header visible by default */
      overflow: hidden;
    }

    .msgr-widget.open {
      transform: translateY(0);
    }

    .msgr-header {
      height: 48px;
      background: var(--bg-header);
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      user-select: none;
    }

    .msgr-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-primary);
    }

    .msgr-icon {
      width: 18px;
      height: 18px;
      color: var(--accent);
    }

    .msgr-title {
      font-size: 14px;
      font-weight: 700;
    }

    .msgr-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .msgr-back-btn {
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.2s, color 0.2s;
    }
    .msgr-back-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .msgr-back-btn svg {
      width: 20px;
      height: 20px;
    }

    .msgr-toggle-icon {
      width: 20px;
      height: 20px;
      color: var(--text-muted);
      transition: transform 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .msgr-widget.open .msgr-toggle-icon {
      transform: rotate(180deg);
    }
    .msgr-toggle-icon svg {
      width: 16px;
      height: 16px;
    }

    .msgr-body {
      height: 400px;
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
    }

    .msgr-view {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Contacts List */
    .msgr-search-wrap {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
    }
    .msgr-search-input {
      width: 100%;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      color: var(--text-primary);
      font-size: 13px;
      outline: none;
    }
    .msgr-search-input:focus { border-color: var(--accent); }

    .msgr-contacts-list {
      flex: 1;
      overflow-y: auto;
    }
    .msgr-contacts-list::-webkit-scrollbar { width: 4px; }
    .msgr-contacts-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .msgr-contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .msgr-contact-item:hover { background: var(--bg-hover); }

    .msgr-contact-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    .msgr-contact-info {
      flex: 1;
      min-width: 0;
    }
    .msgr-contact-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .msgr-contact-status {
      font-size: 11px;
      color: var(--text-muted);
    }
    .msgr-contact-status.online { color: var(--green-online); }

    /* Mini Matches in Widget */
    .msgr-mini-section { padding: 8px 12px; border-bottom: 1px solid var(--border); }
    .msgr-mini-matches { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .msgr-mini-matches::-webkit-scrollbar { height: 3px; }
    .msgr-mini-matches::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
    .msgr-mini-match { width: 44px; height: 44px; border-radius: 50%; position: relative; flex-shrink: 0; cursor: pointer; padding: 2px; border: 1px solid transparent; }
    .msgr-mini-match img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .msgr-mini-match.online::after {
      content: ''; position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px;
      background: var(--green-online); border: 2px solid var(--bg-card); border-radius: 50%;
    }

    .msgr-mini-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; height: 56px; }
    .msgr-mini-chat-actions { display: flex; gap: 4px; }
    .msgr-mini-action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .msgr-mini-action-btn:hover { background: var(--bg-hover); color: var(--accent); }

    .msgr-mini-input-area { padding: 8px; gap: 6px; align-items: center; }
    .msgr-mini-input-right { display: flex; align-items: center; gap: 4px; }
    .msgr-mini-icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; }
    .msgr-mini-icon-btn:hover { color: var(--accent); }

    .msgr-loading {
      padding: 20px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }

    /* Chat View */
    .msgr-chat-header {
      padding: 8px 16px;
      background: var(--bg-header);
      border-bottom: 1px solid var(--border);
    }
    .msgr-chat-target {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .msgr-chat-target-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
    .msgr-chat-target-info {
      display: flex;
      flex-direction: column;
    }
    .msgr-chat-target-name {
      font-size: 13px;
      font-weight: 700;
    }
    .msgr-chat-target-status {
      font-size: 10px;
      color: var(--green-online);
    }

    .msgr-messages-list {
      flex: 1;
      padding: 12px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .msgr-messages-list::-webkit-scrollbar { width: 4px; }
    .msgr-messages-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .msgr-msg {
      max-width: 85%;
      padding: 8px 12px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.4;
      position: relative;
    }
    .msgr-msg.received {
      align-self: flex-start;
      background: var(--bg-header);
      color: var(--text-primary);
      border-bottom-left-radius: 2px;
    }
    .msgr-msg.sent {
      align-self: flex-end;
      background: var(--accent);
      color: #fff;
      border-bottom-right-radius: 2px;
    }

    .msgr-input-area {
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: flex-end;
      gap: 8px;
      background: var(--bg-card);
    }
    .msgr-input {
      flex: 1;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 8px 14px;
      color: var(--text-primary);
      font-size: 13px;
      outline: none;
      resize: none;
      max-height: 80px;
      font-family: inherit;
    }
    .msgr-send-btn {
      width: 34px;
      height: 34px;
      background: var(--accent);
      border: none;
      border-radius: 50%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: opacity 0.2s;
    }
    .msgr-send-btn:hover { opacity: 0.8; }
    .msgr-send-btn svg { width: 16px; height: 16px; margin-left: 2px; }

    /* ── MESSENGER PAGE ───────────────────────────────────────── */
    .msgr-page-container {
      display: flex;
      height: calc(100vh - 120px);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      margin: 0 8px;
    }

    .msgr-page-sidebar {
      width: 340px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
    }

    /* Sidebar Search */
    .msgr-side-search-wrap {
      padding: 16px 16px 8px;
    }
    .msgr-side-search-inner {
      position: relative;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      transition: border-color 0.2s;
    }
    .msgr-side-search-inner:focus-within {
      border-color: var(--accent);
    }
    .msgr-side-search-icon {
      position: absolute;
      left: 12px;
      color: var(--text-muted);
      pointer-events: none;
    }
    .msgr-side-search-input {
      width: 100%;
      background: none;
      border: none;
      padding: 10px 12px 10px 38px;
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
    }
    .msgr-side-search-input::placeholder {
      color: var(--text-muted);
    }

    .msgr-side-section {
      padding: 16px;
    }

    .msgr-side-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 12px;
    }

    /* Matches Scroll */
    .msgr-matches-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 8px;
    }
    .msgr-matches-row::-webkit-scrollbar { height: 4px; }
    .msgr-matches-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .msgr-match-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .msgr-match-ava {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      position: relative;
      padding: 2px;
      border: 2px solid transparent;
      transition: border-color 0.2s;
    }
    .msgr-match-item:hover .msgr-match-ava { border-color: var(--accent); }
    .msgr-match-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .msgr-match-ava.online::after {
      content: '';
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 12px;
      height: 12px;
      background: var(--green-online);
      border: 2px solid var(--bg-card);
      border-radius: 50%;
    }
    .msgr-match-name {
      font-size: 12px;
      color: var(--text-primary);
      width: 64px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Promo Card */
    .msgr-promo-card {
      margin: 0 16px 16px;
      padding: 12px;
      background: var(--bg-hover);
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .msgr-promo-card:hover { background: var(--bg-tint); }
    .msgr-promo-ava { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
    .msgr-promo-ava img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px); }
    .msgr-promo-info { flex: 1; }
    .msgr-promo-name { font-size: 13px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
    .msgr-promo-badge { background: #ff4d6a; color: #fff; font-size: 9px; padding: 1px 6px; border-radius: 4px; font-weight: 800; }
    .msgr-promo-text { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* Chat List */
    .msgr-chat-list {
      display: flex;
      flex-direction: column;
    }
    .msgr-chat-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .msgr-chat-item.active { background: rgba(255,255,255,0.04); margin-left: -16px; padding-left: 16px; margin-right: -16px; padding-right: 16px; }
    .msgr-chat-item:hover:not(.active) { opacity: 0.8; }

    .msgr-chat-item-ava { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
    .msgr-chat-item-ava img { width: 100%; height: 100%; object-fit: cover; }
    .msgr-chat-item-content { flex: 1; min-width: 0; }
    .msgr-chat-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
    .msgr-chat-item-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
    .msgr-chat-item-time { font-size: 11px; color: var(--text-muted); }
    .msgr-chat-item-msg { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .msgr-chat-unread {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .msgr-empty-note {
      padding: 10px 0;
      color: var(--text-muted);
      font-size: 13px;
    }

    /* Main Chat Area */
    .msgr-page-chat {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
    }

    .msgr-page-chat-header {
      min-height: 64px;
      padding: 0 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bg-header);
    }
    .msgr-page-chat-user { 
      display: flex; 
      align-items: center; 
      gap: 12px; 
    }
    .msgr-page-chat-ava { 
      width: 40px; 
      height: 40px; 
      border-radius: 50%; 
      overflow: hidden; 
      flex-shrink: 0;
    }
    .msgr-page-chat-ava img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
    }
    .msgr-page-chat-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .msgr-page-chat-name { 
      font-size: 15px; 
      font-weight: 700; 
      color: var(--text-primary); 
      display: flex; 
      align-items: center; 
      gap: 6px; 
      line-height: 1.2;
    }
    .msgr-page-chat-status { 
      font-size: 12px; 
      color: var(--text-muted); 
      line-height: 1;
    }

    .msgr-page-chat-actions { display: flex; align-items: center; gap: 4px; }
    .msgr-page-chat-btn { 
      background: none; 
      border: none; 
      color: var(--text-muted); 
      cursor: pointer; 
      font-size: 18px; 
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s; 
    }
    .msgr-page-chat-btn:hover { 
      background: var(--bg-hover);
      color: var(--accent); 
    }

    .msgr-page-chat-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .msgr-page-chat-body::-webkit-scrollbar { width: 6px; }
    .msgr-page-chat-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* First Step Prompt */
    .msgr-first-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 0;
    }
    .msgr-first-step-avas { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; }
    .msgr-fs-ava { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--bg-card); overflow: hidden; background: var(--bg-header); }
    .msgr-fs-ava img { width: 100%; height: 100%; object-fit: cover; }
    .msgr-fs-ava:nth-child(3) { margin-left: -20px; }
    .msgr-fs-ava-heart { 
      position: absolute; 
      z-index: 10; 
      background: #ff4d6a; 
      color: #fff; 
      width: 32px; height: 32px; 
      display: flex; align-items: center; justify-content: center; 
      border-radius: 50%; 
      font-size: 14px;
      border: 3px solid var(--bg-card);
    }

    .msgr-fs-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
    .msgr-fs-desc { font-size: 14px; color: var(--text-muted); max-width: 400px; margin-bottom: 20px; }
    .msgr-fs-pills { display: flex; gap: 10px; }
    .msgr-fs-pill {
      background: var(--bg-header);
      border: 1px solid var(--border);
      padding: 8px 16px;
      border-radius: 20px;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
    }
    .msgr-fs-pill:hover { border-color: var(--accent); color: var(--text-primary); }

    .msgr-date-sep {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      position: relative;
      margin: 10px 0;
    }

    /* Messages */
    .msgr-messages { display: flex; flex-direction: column; gap: 12px; }
    .msgr-msg-row { display: flex; width: 100%; }
    .msgr-msg-row.received { justify-content: flex-start; }
    .msgr-msg-row.sent { justify-content: flex-end; }

    .msgr-msg-bubble {
      max-width: 70%;
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 14px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .msgr-msg-row.received .msgr-msg-bubble { background: var(--bg-header); color: var(--text-primary); border-bottom-left-radius: 2px; }
    .msgr-msg-row.sent .msgr-msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 2px; }

    .msgr-msg-meta { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
    .msgr-msg-time { font-size: 10px; opacity: 0.7; }
    .msgr-msg-status { font-size: 12px; }
    .msgr-msg-read { font-size: 11px; font-weight: 700; opacity: 0.78; letter-spacing: -1px; }
    .msgr-msg-read.read { opacity: 1; color: #d5ecff; }

    .msgr-page-chat-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      background: var(--bg-card);
    }
    .msgr-page-input-wrap {
      position: relative;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .msgr-page-input {
      flex: 1;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
    }
    .msgr-page-input-actions { display: flex; gap: 12px; }
    .msgr-page-icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 20px; transition: color 0.2s; display: flex; align-items: center; justify-content: center; }
    .msgr-page-icon-btn:hover { color: var(--accent); }
    .msgr-page-icon-btn.recording {
      color: #ff5a5a;
      animation: msgrVoicePulse 1.1s ease-in-out infinite;
    }

    @keyframes msgrVoicePulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    .msgr-call-popup {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 10060;
      pointer-events: none;
      opacity: 0;
      transform: translateY(12px) scale(.98);
      transition: opacity .18s ease, transform .18s ease;
    }
    .msgr-call-popup.show {
      pointer-events: auto;
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .msgr-call-card {
      width: min(340px, calc(100vw - 24px));
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)), var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 16px 44px rgba(0,0,0,0.45);
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(8px);
    }
    .msgr-call-avatar-wrap {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,0.10);
      box-shadow: 0 0 0 5px rgba(62,100,255,0.12);
    }
    .msgr-call-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .msgr-call-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
      line-height: 1.25;
    }
    .msgr-call-state {
      font-size: 13px;
      color: var(--text-muted);
      text-align: center;
      min-height: 18px;
    }
    .msgr-call-actions {
      width: 100%;
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }
    .msgr-call-btn {
      flex: 1;
      border: 1px solid var(--border);
      background: var(--bg-header);
      color: var(--text-primary);
      border-radius: 12px;
      height: 38px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
    }
    .msgr-call-btn:hover { transform: translateY(-1px); }
    .msgr-call-btn:active { transform: translateY(0); }
    .msgr-call-btn-accept {
      border-color: rgba(64,186,124,0.5);
      background: rgba(64,186,124,0.20);
      color: #d8ffe9;
    }
    .msgr-call-btn-decline,
    .msgr-call-btn-hangup {
      border-color: rgba(222,59,91,0.48);
      background: rgba(222,59,91,0.18);
      color: #ffe3e8;
    }

    @media (max-width: 640px) {
      .msgr-call-popup {
        left: 12px;
        right: 12px;
        bottom: 12px;
      }
      .msgr-call-card {
        width: 100%;
      }
    }

    /* ── VIDEO PAGE ────────────────────────────────────────── */
    .video-page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    .video-search-bar {
      flex: 1;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 48px;
    }
    .vsearch-icon { color: var(--text-muted); margin-right: 12px; display: flex; align-items: center; }
    .vsearch-input {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 15px;
      width: 100%;
      outline: none;
    }
    .v-add-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 0 20px;
      height: 48px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: opacity 0.2s;
    }
    .v-add-btn:hover { opacity: 0.9; }

    .video-catalog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }
    .v-item {
      cursor: pointer;
      transition: transform 0.2s;
    }
    .v-item:hover { transform: translateY(-2px); }
    .v-thumb {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      background: var(--bg-header);
    }
    .v-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .v-duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }
    .v-thumb-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .v-item:hover .v-thumb-overlay { opacity: 1; }

    .v-info { margin-top: 10px; }
    .v-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .v-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }

    .video-categories-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }
    .v-cat-title {
      padding: 16px 16px 8px;
      font-size: 13px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .v-cat-list { display: flex; flex-direction: column; }
    .v-cat-item {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--text-secondary);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .v-cat-item:hover { background: var(--bg-hover); color: var(--text-primary); }
    .v-cat-item.active { background: var(--bg-tint); color: var(--accent); }
    .v-cat-item svg { color: var(--text-muted); }
    .v-cat-item.active svg { color: var(--accent); }

    .v-side-empty { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

    /* ── /VIDEO PAGE ── */
    .community-hero {
      border-radius: 20px;
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
    }
    .community-header-card {
      padding: 16px 24px;
    }
    .community-header-top {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .community-avatar-wrap {
      position: relative;
      margin-top: -50px;
    }
    .community-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid var(--bg-card);
      overflow: hidden;
      background: var(--bg-header);
      position: relative;
    }
    .community-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .comm-avatar-plus {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 26px;
      height: 26px;
      background: var(--accent);
      border: 3px solid var(--bg-card);
      border-radius: 50%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .community-header-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .comm-name-row { display: flex; align-items: center; gap: 8px; }
    .comm-name { font-size: 20px; font-weight: 700; color: var(--text-primary); }
    .comm-sub-status { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

    .community-header-actions { display: flex; gap: 10px; }
    .comm-btn-primary { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
    .comm-btn-primary:hover { background: var(--bg-tint); border-color: var(--accent); }
    .comm-btn-secondary { background: var(--bg-header); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }

    .comm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
    .comm-tabs-card { padding: 4px; }
    .comm-tabs-row { display: flex; align-items: center; gap: 4px; padding: 4px; border-bottom: 1px solid var(--border); }
    .comm-tab { background: none; border: none; color: var(--text-secondary); padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 10px; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
    .comm-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
    .comm-tab.active { background: var(--bg-tint); color: var(--text-primary); position: relative; }
    .comm-tab.active::after { content: ''; position: absolute; bottom: -8px; left: 16px; right: 16px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
    .comm-tab-settings { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 10px; border-radius: 10px; transition: all 0.2s; }
    .comm-tab-settings:hover { color: var(--text-primary); background: var(--bg-hover); }

    .comm-empty-state { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .comm-empty-state p { color: var(--text-muted); font-size: 14px; }
    .comm-btn-action { background: var(--bg-hover); color: var(--accent); border: 1px solid var(--border); border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
    .comm-btn-action:hover { background: var(--bg-tint); border-color: var(--accent); }

    .comm-create-btn { width: 100%; margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
    .comm-create-btn:hover { border-color: var(--accent); color: var(--text-primary); background: var(--bg-hover); }

    .comm-wall { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
    .comm-wall-header { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
    .comm-post-count { font-size: 11px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.5px; }
    .comm-wall-search-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; }
    .comm-wall-search-btn:hover { color: var(--text-primary); }

    .comm-btn-promote { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 8px; }
    .comm-btn-promote:hover { border-color: var(--accent); }

    .comm-side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
    .comm-side-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
    .comm-side-item:hover { background: var(--bg-hover); color: var(--text-primary); }
    .comm-side-item svg { color: var(--text-muted); transition: color 0.2s; }
    .comm-side-item:hover svg { color: var(--accent); }

    .comm-desc-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; margin-bottom: 12px; }
    .comm-details-link { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; transition: color 0.2s; }
    .comm-details-link:hover { color: var(--accent); }

    .comm-card-hd { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
    .comm-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .comm-card-action-txt { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; }
    .comm-card-action-txt:hover { color: var(--accent); text-decoration: underline; }

    .comm-subs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 12px 16px; }
    .comm-sub-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .comm-sub-ava { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--bg-header); }
    .comm-sub-ava img { width: 100%; height: 100%; object-fit: cover; }
    .comm-sub-item span { font-size: 11px; color: var(--text-primary); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .comm-add-contact { padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.2s; }
    .comm-add-contact:hover { background: var(--bg-hover); }
    .comm-add-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-header); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); }
    .comm-add-contact span { font-size: 14px; color: var(--accent); font-weight: 600; }

    .msgr-page-send-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.1s;
      font-size: 16px;
    }
    .msgr-page-send-btn:hover { opacity: 0.9; }
    .msgr-page-send-btn:active { transform: scale(0.95); }
    .msgr-page-send-btn i { margin-left: 2px; }

    /* Sticker display style */
    .msgr-msg-sticker {
      padding: 4px 0;
    }
    .msgr-msg-sticker img {
      display: block;
      max-width: 120px;
      height: auto;
    }

    /* Voice message — Telegram-style waveform player */
    .msgr-voice-player {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 220px;
      max-width: 320px;
      padding: 2px 0;
      user-select: none;
    }

    .msgr-vp-btn {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.18);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
      padding: 0;
    }
    .msgr-vp-btn:hover { background: rgba(255,255,255,0.28); }
    .msgr-vp-btn:active { transform: scale(0.92); }
    .msgr-msg-row.received .msgr-vp-btn {
      background: var(--accent, #5b8dee);
      color: #fff;
    }
    .msgr-msg-row.received .msgr-vp-btn:hover {
      background: var(--accent-hover, #4a7ddc);
    }

    .msgr-vp-icon-play,
    .msgr-vp-icon-pause {
      width: 20px;
      height: 20px;
      pointer-events: none;
    }

    .msgr-vp-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .msgr-vp-wave {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 28px;
      cursor: pointer;
    }

    .msgr-vp-bar {
      flex: 1;
      min-width: 2px;
      max-width: 4px;
      border-radius: 3px;
      background: rgba(255,255,255,0.30);
      transition: background 0.08s;
    }
    .msgr-vp-bar.played {
      background: rgba(255,255,255,0.92);
    }
    .msgr-msg-row.received .msgr-vp-bar {
      background: rgba(0,0,0,0.15);
    }
    .msgr-msg-row.received .msgr-vp-bar.played {
      background: var(--accent, #5b8dee);
    }

    .msgr-vp-time {
      font-size: 11px;
      opacity: 0.75;
      line-height: 1;
    }


    /* Emoji Picker Styles */
    .msgr-emoji-picker {
      position: absolute;
      bottom: calc(100% + 12px);
      right: 24px; /* adjusted for padding */
      width: 260px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      z-index: 12000; /* even higher */
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    .msgr-emoji-picker.open { display: flex; }

    .msgr-ep-header {
      padding: 10px 14px;
      background: var(--bg-header);
      border-bottom: 1px solid var(--border);
    }
    .msgr-ep-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }

    .msgr-ep-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 12px;
      max-height: 240px;
      overflow-y: auto;
    }
    .msgr-ep-grid::-webkit-scrollbar { width: 4px; }
    .msgr-ep-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .msgr-ep-item {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s;
      font-size: 24px;
    }
    .msgr-ep-item:hover { background: var(--bg-hover); }
    .msgr-ep-sticker img { width: 40px; height: 40px; object-fit: contain; }