/* ─── Sidebar ─── */
    .sidebar {
      display: flex; flex-direction: column;
      background: var(--rail-bg); border-right: 1px solid var(--border);
      overflow: hidden;
    }
    /* Community switcher */
    .sb-comm-btn {
      display: flex; align-items: center; gap: 11px;
      padding: 14px 16px; border: none; border-bottom: 1px solid var(--border);
      background: transparent; cursor: pointer; width: 100%; text-align: left;
      transition: background .14s;
    }
    .sb-comm-btn:hover { background: rgba(255,255,255,.04); }
    .sb-comm-ava {
      width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 800; font-size: 15px;
      background: linear-gradient(135deg, var(--accent), var(--accent-d));
      overflow: hidden;
    }
    .sb-comm-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #sbCommAvaFallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .sb-comm-info { flex: 1; min-width: 0; text-align: left; }
    .sb-comm-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb-comm-sub  { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
    .sb-comm-btn > i { font-size: 18px; color: var(--muted); flex-shrink: 0; }
    /* Logo row */
    .sb-logo-row { display: flex; align-items: center; gap: 11px; padding: 14px 18px 8px; }
    .sidebar-logo { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.35); display: block; }
    .sidebar-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sb-app-name { font-weight: 800; font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Nav */
    .snav { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
    .snav-btn {
      position: relative;
      display: flex; align-items: center; gap: 14px;
      padding: 10px 14px; border: none; border-radius: 12px;
      background: transparent; color: var(--text2);
      font-size: 14.5px; font-weight: 500; cursor: pointer; width: 100%; text-align: left;
      transition: background .15s var(--ease), color .15s var(--ease);
    }
    .snav-btn i { font-size: 21px; flex-shrink: 0; }
    .snav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .snav-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
    .snav-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
    .snav-badge {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      background: var(--accent); color: #fff;
      font-size: 11px; font-weight: 700; min-width: 20px; height: 20px;
      border-radius: 10px; padding: 0 6px;
    }
    /* Bottom logout row */
    .sb-logout-row {
      display: flex; align-items: center; gap: 11px;
      padding: 12px 16px; border: none; border-top: 1px solid var(--border);
      background: transparent; cursor: pointer; width: 100%; text-align: left;
      transition: background .14s;
    }
    .sb-logout-row:hover { background: rgba(255,255,255,.04); }
    .sb-logout-ava {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 700; font-size: 13px;
      background: linear-gradient(135deg, #8954D4, #334DCC);
      overflow: hidden;
    }
    .sb-logout-info { flex: 1; min-width: 0; }
    .sb-logout-name { display: block; font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb-logout-sub  { display: block; font-size: 11px; color: var(--muted); }
    .sb-logout-row > i { font-size: 18px; color: var(--muted); flex-shrink: 0; }

    /* ─── Section panels ─── */
    .section-panel { display: contents; }
    .section-panel.hidden { display: none; }

    
    /* ─── Profile pane ─── */
    .profile-pane {
      width: var(--profile); background: var(--bg2);
      border-left: 1px solid var(--border);
      display: flex; flex-direction: column; overflow-y: auto;
    }
    .profile-close-btn {
      display: none; position: sticky; inset-block-start: 8px; align-self: flex-end;
      z-index: 2; width: 36px; height: 36px; margin: 8px 10px -52px 0;
      align-items: center; justify-content: center; border: 0; border-radius: 10px;
      background: var(--bg3); color: var(--text2); font-size: 20px;
    }
    .pp-head {
      padding: 26px 20px 20px; display: flex; flex-direction: column;
      align-items: center; text-align: center; border-bottom: 1px solid var(--border);
    }
    .pp-ava {
      width: 80px; height: 80px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 800; font-size: 28px; overflow: hidden;
    }
    .pp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pp-name { font-weight: 700; font-size: 17px; color: var(--text); margin-top: 12px; }
    .pp-status { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
    .pp-status.online { color: var(--accent); }
    .pp-labels { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
    .pp-labels .dlg-label-tag { font-size: 11px; }
    .pp-actions { display: flex; gap: 8px; margin-top: 16px; width: 100%; }
    .pp-action-btn {
      flex: 1; padding: 9px 0; border-radius: 11px; border: none;
      background: var(--bg3); color: var(--text2);
      font-weight: 600; font-size: 12.5px; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      transition: background .12s, color .12s;
    }
    .pp-action-btn i { font-size: 18px; }
    .pp-action-btn:hover { background: var(--bg4); }
    .pp-action-btn.active { background: var(--accent-soft); color: var(--accent); }
    .pp-section { padding: 18px 20px; border-bottom: 1px solid var(--border); }
    .pp-section-title {
      font-size: 11.5px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
    }
    .pp-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
    .pp-row > span:first-child { color: var(--muted); }
    .pp-row > span:last-child { color: var(--text); font-weight: 500; text-align: right; }
    .pp-row-link a { color: var(--accent); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
    .pp-row-link a:hover { text-decoration: underline; }
    .pp-note-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--text2); line-height: 1.5; white-space: pre-wrap; }

    /* ─── List pane ─── */
    .list-pane {
      display: flex; flex-direction: column;
      border-right: 1px solid var(--border);
      background: var(--bg); overflow: hidden;
    }
    .list-head {
      flex-shrink: 0; padding: 16px 18px 12px;
      border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 10px;
      background: var(--bg2);
    }
    .list-head-row { display: flex; align-items: center; justify-content: space-between; }
    .list-title { font-size: 20px; font-weight: 800; color: var(--text); }
    .icon-btn {
      width: 30px; height: 30px; border: none; background: none;
      color: var(--muted); border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; transition: background .12s, color .12s;
    }
    .icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
    .icon-btn.active { color: var(--accent); }
    .search-wrap {
      position: relative; display: flex; align-items: center; gap: 9px;
      background: var(--input-bg); border-radius: 11px; padding: 9px 13px;
    }
    .search-wrap .ti { font-size: 17px; color: var(--muted); pointer-events: none; flex-shrink: 0; }
    .search-inp {
      width: 100%; background: transparent; border: none;
      padding: 0; color: var(--text); font-size: 13.5px; outline: none;
    }
    .search-inp::placeholder { color: var(--muted); }
    .filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
    .ftab {
      padding: 7px 14px;
      background: transparent; border: none; border-radius: 18px;
      color: var(--muted); font-size: 13px; font-weight: 500; text-align: center;
      white-space: nowrap;
      transition: background .12s, color .12s; white-space: nowrap;
    }
    .ftab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
    .ftab:hover:not(.active) { background: rgba(255,255,255,.05); color: var(--text); }
    .label-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin-top: -2px; }
    .label-chip {
      padding: 7px 14px; border-radius: 18px; font-size: 13px; font-weight: 500;
      cursor: pointer; border: 1px solid transparent; transition: opacity .12s, background .12s;
      white-space: nowrap;
    }
    .label-chip:hover { opacity: .85; }
    .label-chip.active { border-color: currentColor; }

    .adv-chip { background: rgba(247,144,48,.12); color: #f79030; }
    .adv-chip.active { border-color: #f79030; background: rgba(247,144,48,.2); }