/* Tokens, .sr-only, and z-index scale live in css/tokens.css (v2.7.0) */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--off-white);
      color: var(--text-body);
      min-height: 100vh;
      display: flex;
    }

    /* ── Sidebar ──
     * Background uses --hub-chrome-fg-strong (default = --indigo, neutral-900 with data-recolor).
     * v5.1 Phase C6 recolor gate. */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--hub-chrome-fg-strong);
      height: 100vh;
      position: fixed;
      left: 0; top: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      z-index: var(--z-sidebar);
      overflow: hidden;
    }

    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.12) transparent;
    }

    .sidebar-nav::-webkit-scrollbar { width: 4px; }
    .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

    .sidebar-logo {
      padding: 24px 20px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .sidebar-logo img {
      height: 28px;
      width: auto;
    }

    .sidebar-hub-label {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.32);
      margin-top: 24px;
    }

    .sidebar-section-label {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      padding: 22px 20px 7px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      min-height: 44px;
      color: rgba(255,255,255,0.6);
      font-size: 15px;
      font-weight: 400;
      cursor: pointer;
      border-radius: 6px;
      margin: 2px 8px;
      transition: background 0.15s ease, color 0.15s ease;
      text-decoration: none;
    }

    .nav-item:hover { background: rgba(255,255,255,0.07); color: white; }

    .nav-item.active {
      background: rgba(0,173,238,0.14);
      color: var(--cyan);
      font-weight: 500;
    }

    .nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
    .nav-item.active .nav-icon { opacity: 1; }

    .nav-badge {
      margin-left: auto;
      background: rgba(0,173,238,0.18);
      color: var(--cyan);
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 20px;
    }

    .nav-soon {
      margin-left: auto;
      font-size: 12px;
      color: rgba(255,255,255,0.22);
    }

    .sidebar-footer {
      flex-shrink: 0;
      padding: 14px 20px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }

    .sidebar-footer p {
      font-size: 12px;
      color: rgba(255,255,255,0.72);
      line-height: 1.55;
      letter-spacing: 0.01em;
    }

    /* ── Main ── */
    .main {
      margin-left: var(--sidebar-w);
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ── Topbar removed (v3.1) — hamburger lives inside .page-header ── */
    .topbar { display: none !important; }

    .search-icon { color: var(--text-mid); flex-shrink: 0; }

    /* ── Content-area search bar ── */
    .content-search {
      display: flex;
      align-items: center;
      background: white;
      border: 1.5px solid #E4E7EC;
      border-radius: 999px;
      padding: 7px 18px;
      gap: 10px;
      margin-bottom: 18px;
      transition: border-color 0.15s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    .content-search:focus-within { border-color: var(--cyan); }

    .content-search input {
      flex: 1;
      border: none;
      background: none;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: var(--text-dark);
    }
    .content-search input:focus { outline: none; } /* parent gets :focus-within cyan border */

    .content-search input::placeholder { color: var(--text-mid); }

    .search-clear {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-mid);
      font-size: 16px;
      line-height: 1;
      width: 22px;
      height: 22px;
      padding: 0;
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
    }
    .search-clear:hover { color: var(--text-dark); background: rgba(19,20,124,0.06); }
    /* Lock content-search to a fixed height so toggling the clear button
       does not change the bar's height while typing. */
    .content-search { min-height: 37px; }
    .content-search input { line-height: 22px; height: 22px; font-size: 15px; }

    /* ── Content ── */
    .content { padding: 36px; flex: 1; max-width: 1440px; margin-inline: auto; width: 100%; }

    .page-header {
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* v5.1: page H1 follows --hub-chrome-fg (gated; default = indigo, neutral-900 with data-recolor). */
    .page-header h1 {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: var(--hub-chrome-fg);
      letter-spacing: var(--tracking-tight, -0.02em);
      margin: 0;
      flex: 1;
      min-width: 0;
    }

    .page-header p { font-size: 15px; color: var(--text-mid); }

    /* Back pill — right-aligned in page header (mirrors h1) */
    .back-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 11px 16px;
      min-height: 44px;
      border-radius: 999px;
      background: #fff;
      border: 1.5px solid var(--border);
      color: var(--text-dark);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .back-pill svg { width: 15px; height: 15px; }
    .back-pill:hover { border-color: var(--indigo); color: var(--indigo); background: rgba(19,20,124,0.04); }
    .back-pill[hidden] { display: none; }


    /* ── Stats ── */
    .stats-bar {
      display: flex;
      gap: 16px;
      margin-bottom: 30px;
    }

    .stat-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px 22px;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .stat-icon {
      width: 40px; height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .stat-icon.cyan   { background: rgba(0,173,238,0.1); }
    .stat-icon.indigo { background: rgba(19,20,124,0.07); }
    .stat-icon.green  { background: rgba(16,185,129,0.1); }

    .stat-val {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 19.2px;
      font-weight: 700;
      color: var(--cyan-text);
      line-height: 1;
      white-space: nowrap;
    }

    .stat-val.indigo { color: var(--indigo); }
    .stat-val.green  { color: #10B981; }
    .stat-lbl { font-size: 14px; color: var(--text-mid); margin-bottom: 8px; white-space: nowrap; }

    /* v2.8.0 — Year filter select with visible chevron + native focus outline */
    .year-select {
      font-family: inherit;
      font-size: 12px;
      color: var(--text-mid);
      background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%236B7280'><path d='M5 6 0 0h10z'/></svg>") no-repeat right 2px center/8px 5px;
      border: none;
      border-bottom: 1px dashed transparent;
      padding: 0 14px 1px 0;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    .year-select:hover { border-bottom-color: var(--text-mid); }

    /* ── Filters ── */
    .filters { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }

    .filter-btn {
      padding: 7px 18px;
      border-radius: 20px;
      border: 1px solid #E4E7EC;
      background: white;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--text-subtle);
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .filter-btn:hover { border-color: var(--cyan); color: var(--cyan-text); }

    .filter-btn.active {
      background: var(--indigo);
      border-color: var(--indigo);
      color: white;
      font-weight: 500;
    }

    /* ── Asset Grid ── */
    .asset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
      gap: 16px;
    }

    /* v5.1 — interactive hub asset card. Renamed from .card to .asset-card to
       resolve the global-cascade collision with cards.css .card (static content
       primitive used by satellites). See design-system/MASTER.md §"Card primitives".
       Modifiers .project-card / HT topic card add their specifics on top. */
    .asset-card,
    .card.legacy-card-asset {  /* deprecation alias — remove in v5.2 */
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .asset-card:hover,
    .card.legacy-card-asset:hover {
      border-color: var(--primary-500);
      box-shadow: 0 4px 18px rgba(0,173,238,0.09);
      transform: translateY(-1px);
    }
    /* When the card receives keyboard focus while also hovered, the global cyan
       :focus-visible ring would blend into the hover border. Use chrome-fg focus +
       thicker outline so the focus indicator stays visible. (v3.1.0; v5.1 chrome-fg gate) */
    .asset-card:has(:focus-visible),
    .asset-card:focus-visible {
      outline: 3px solid var(--hub-chrome-fg);
      outline-offset: 2px;
    }

    /* Stretched link — makes entire card clickable */
    .card-link {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      z-index: 0;
    }

    /* Body grows to fill space — keeps footer at bottom */
    .card-body { flex: 1; }

    .card-top {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 15px;
    }

    .file-badge {
      width: 46px; height: 46px;
      min-width: 46px; max-width: 46px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      font-family: 'Be Vietnam Pro', sans-serif;
      letter-spacing: 0.04em;
      flex: 0 0 46px;
      align-self: flex-start;
    }
    .file-badge svg { width: 22px; height: 22px; display: block; }

    .file-badge.pdf  { background: #FFF0F0; color: #D32F2F; }
    .file-badge.xlsx { background: #F0FFF4; color: #2E7D32; }
    .file-badge.csv  { background: #F0FFF4; color: #388E3C; }
    .file-badge.md   { background: rgba(19,20,124,0.06); color: var(--indigo); }
    .file-badge.txt  { background: var(--gray-bg); color: var(--text-subtle); }
    .file-badge.mp4  { background: #FFF3E0; color: #E65100; }
    .file-badge.mp3  { background: #FCE4EC; color: #C2185B; }
    .file-badge.png  { background: #E8F5E9; color: #2E7D32; }
    .file-badge.jpeg { background: #E8F5E9; color: #388E3C; }
    .file-badge.ai   { background: #FFF8E1; color: #F57F17; }
    .file-badge.psd  { background: #E3F2FD; color: #1565C0; }
    .file-badge.docx { background: #E3F2FD; color: #1565C0; }
    .file-badge.pptx { background: #FFF3E0; color: #E65100; }
    .file-badge.jpg  { background: #E8F5E9; color: #388E3C; }
    .file-badge.zip  { background: var(--gray-bg); color: var(--text-mid); }
    .file-badge.link { background: rgba(0,173,238,0.08); color: #00ADEE; }
    .file-badge.file { background: var(--gray-bg); color: var(--text-mid); }

    .card-meta { flex: 1; min-width: 0; }

    .card-cat {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-mid);
      margin-bottom: 5px;
    }

    .card-name {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 16.5px;
      font-weight: 600;
      color: var(--text-dark);
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .cat-label-badge {
      display: inline-flex;
      align-self: flex-start;
      width: fit-content;
      max-width: 100%;
      /* v3.1.0: bumped from 11px → 12px and moved off translucent cyan onto a
         solid info-bg surface for AA contrast at small sizes. */
      font-size: 12px;
      font-weight: 600;
      font-family: 'Be Vietnam Pro', sans-serif;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--cyan-text);
      background: var(--primary-100, #E6F7FD);  /* v5.1: was --info-bg */
      border-radius: 4px;
      padding: 2px 6px;
      margin-bottom: 6px;
    }

    .card-desc {
      font-size: 14px;
      color: var(--text-subtle);
      line-height: 1.55;
      margin-bottom: 15px;
      max-width: 65ch;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-tags { margin-bottom: 15px; }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-right: 4px;
      margin-bottom: 4px;
      flex: 0 0 auto;
      width: auto;
      max-width: fit-content;
    }

    .tag.brand    { background: rgba(19,20,124,0.06); color: var(--indigo); }
    .tag.proposal { background: rgba(0,173,238,0.09); color: #0090C4; }
    .tag.content  { background: rgba(16,185,129,0.09); color: #059669; padding: 2px 8px; }
    .tag.insight  { background: rgba(245,158,11,0.1);  color: #D97706; }

    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid var(--gray-bg);
      margin-top: auto;
      position: relative;
      z-index: 1;
    }

    .card-date { font-size: 13px; color: var(--text-mid); }

    .card-actions { display: flex; gap: 6px; }

    .btn-open {
      display: inline-flex;
      align-items: center;
      padding: 7px 15px;
      background: var(--indigo);
      color: white;
      border: none;
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s ease;
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }

    .btn-open:hover { background: var(--indigo-dark); color: white; }

    /* .btn-icon — canonical definition lives in css/forms.css (v3.1.0).
       Hub-shell-only positioning extras kept here. */
    .btn-icon {
      position: relative;
      z-index: 1;
      text-decoration: none;
    }

    .btn-copy {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 13px;
      background: #F1F3F5;
      color: #555;
      border: 1px solid #E4E7EC;
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }

    .btn-copy:hover { background: #E8EAED; border-color: #D1D5DB; color: #333; }

    /* ── Empty state ── */
    .empty-state {
      grid-column: 1 / -1;
      text-align: center;
      padding: 64px 20px;
      color: var(--text-mid);
    }

    .empty-state h3 {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 18px;
      color: var(--text-subtle);
      margin: 14px 0 7px;
    }

    .empty-state p { font-size: 15px; }

    /* ── Nav groups ── */
    .nav-parent {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      min-height: 44px;
      color: rgba(255,255,255,0.75);
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 6px;
      margin: 2px 8px;
      transition: background 0.15s ease, color 0.15s ease;
      user-select: none;
    }

    .nav-parent:hover { background: rgba(255,255,255,0.07); color: white; }

    .nav-parent.active {
      background: rgba(0,173,238,0.14);
      color: var(--cyan);
    }
    .nav-parent.active .nav-icon { opacity: 1; }

    .nav-chevron {
      margin-left: auto;
      width: 13px; height: 13px;
      flex-shrink: 0;
      opacity: 0.4;
      transition: transform 0.2s ease;
    }

    .nav-chevron.open { transform: rotate(90deg); opacity: 0.6; }

    .nav-sub-group {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.25s ease;
    }

    .nav-sub-group.open { max-height: 600px; }

    .nav-sub-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px 8px 36px;
      color: rgba(255,255,255,0.75);
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      border-radius: 6px;
      margin: 1px 8px;
      transition: background 0.15s ease, color 0.15s ease;
      text-decoration: none;
    }

    .nav-sub-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); }

    .nav-sub-item.active {
      background: rgba(0,173,238,0.13);
      color: var(--cyan);
      font-weight: 500;
    }

    .nav-sub-item.nested {
      padding-left: 52px;
    }

    .status-badge {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: auto;
    }

    .status-badge.running  { background: rgba(16,185,129,0.2); color: #34D399; }
    .status-badge.ended    { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); }

    /* On white card backgrounds, ended badge needs visible colors */
    .project-card .status-badge.ended {
      background: rgba(89,89,89,0.09);
      color: #888;
    }

    .lock-icon { width: 13px; height: 13px; opacity: 0.65; flex-shrink: 0; margin-left: 5px; } /* v3.1.0: 11→13 per spec */

    /* ── Password modal ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10,10,30,0.5);
      backdrop-filter: blur(4px);
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .modal-overlay.visible { opacity: 1; pointer-events: all; }

    .modal {
      background: white;
      border-radius: 14px;
      padding: 28px 30px;
      width: 340px;
      box-sizing: border-box;
      box-shadow: 0 24px 60px rgba(0,0,0,0.18);
      transform: translateY(10px);
      transition: transform 0.2s;
    }

    .modal-overlay.visible .modal { transform: translateY(0); }

    .modal-lock {
      width: 40px; height: 40px;
      background: rgba(19,20,124,0.07);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }

    .modal-title {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--indigo);
      margin-bottom: 6px;
    }

    .modal-sub { font-size: 15px; color: var(--text-mid); margin-bottom: 22px; }

    .modal-input {
      width: 100%;
      box-sizing: border-box;
      padding: 11px 14px;
      border: 1.5px solid #E4E7EC;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: var(--text-dark);
      margin-bottom: 6px;
      transition: border-color 0.15s;
    }

    .modal-input:focus { border-color: var(--cyan); outline: none; }
    .modal-input.error { border-color: #EF4444; }

    .modal-err { font-size: 13px; color: #EF4444; min-height: 18px; margin-bottom: 16px; }

    .modal-actions { display: flex; gap: 8px; }

    /* v5.1: brand-following primary button (toggles via Phase C6 data-recolor gate). */
    .btn-primary {
      flex: 1; padding: 11px;
      background: var(--brand); color: white;
      border: none; border-radius: 8px;
      font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
      cursor: pointer; transition: background 0.15s;
    }

    .btn-primary:hover { background: var(--hub-chrome-fg-strong); }

    /* Ghost button — mirrors css/forms.css .btn-ghost; scoped here for shell modal */
    .btn-ghost {
      padding: 11px 18px;
      background: #fff; color: var(--text-dark);
      border: 1.5px solid var(--border); border-radius: 8px;
      font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .btn-ghost:hover { border-color: var(--indigo); color: var(--indigo); }

    /* ── Responsive ── */
    .hamburger {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      border: none; background: none;
      cursor: pointer;
      border-radius: 6px;
      color: var(--indigo);
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .hamburger:hover { background: var(--gray-bg); }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,10,30,0.45);
      z-index: calc(var(--z-sidebar) - 1);
      backdrop-filter: blur(2px);
    }
    .sidebar-overlay.visible { display: block; }

    @media (max-width: 768px) {
      :root { --sidebar-w: 280px; }

      .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
      }
      .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.2);
      }
      .main { margin-left: 0; }
      .hamburger { display: inline-flex; }
      .content { padding: 20px 16px; }
      .asset-grid { grid-template-columns: 1fr; }
      .stats-bar { flex-direction: column; }
      .filters { gap: 6px; }
      .modal { width: calc(100vw - 32px); padding: 24px 20px; }

      /* Project browser filter collapsible on mobile */
      .filters-toggle-btn { display: flex; }
      .project-browser-filters { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
      .proj-filters-body { margin-top: 8px; width: 100%; }
      .filter-divider { display: none; }
      .filter-group-label { width: 100%; margin-top: 6px; font-size: 13px; }

      /* Stats bar compact on mobile */
      .stat-card { padding: 12px 14px; }
    }

    @media (min-width: 769px) and (max-width: 1100px) {
      :root { --sidebar-w: 260px; }
      .asset-grid { grid-template-columns: repeat(2, 1fr); }
      .search-wrap { width: 200px; }
    }

    /* ── Nav label (wrap to 2 lines, then ellipsis) ── */
    .nav-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      line-height: 1.3;
      word-break: break-word;
    }
    .nav-label--single {
      display: block;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }

    /* ── Nav tooltip ── */
    #nav-tooltip {
      position: fixed;
      background: #1B1C1D;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      line-height: 1.4;
      padding: 6px 10px;
      border-radius: 6px;
      pointer-events: none;
      z-index: var(--z-toast);
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.15s ease;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }

    #nav-tooltip.visible { opacity: 1; }

    /* ── Loading skeleton ── */
    .skeleton-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
    }

    .skel {
      background: linear-gradient(90deg, #F0F2F5 25%, #E4E7EC 50%, #F0F2F5 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 6px;
    }

    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .skel-badge  { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
    .skel-line   { height: 12px; margin-bottom: 8px; }
    .skel-title  { height: 14px; width: 75%; margin-bottom: 14px; }
    .skel-desc1  { height: 11px; width: 100%; margin-bottom: 6px; }
    .skel-desc2  { height: 11px; width: 60%; margin-bottom: 16px; }
    .skel-tag    { height: 20px; width: 56px; border-radius: 4px; display: inline-block; margin-right: 4px; }
    .skel-footer { height: 1px; background: var(--gray-bg); margin: 12px 0; }
    .skel-date   { height: 11px; width: 80px; }

    /* ── Copy link tooltip ── */
    .btn-icon[data-tooltip] { position: relative; }

    .btn-icon[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      transform: translateX(-50%);
      background: #1B1C1D;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      padding: 4px 9px;
      border-radius: 5px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .btn-icon[data-tooltip]:hover::after { opacity: 1; }

    /* ── Toast notification ── */
    #toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: #1B1C1D;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      padding: 11px 20px;
      border-radius: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: var(--z-toast);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    }

    #toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ── Project Browser ── */
    .project-browser-filters {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 14px 18px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 4px;
    }

    .proj-filters-body {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      flex: 1;
    }

    .proj-filters-body.collapsed { display: none; }

    .filters-toggle-btn {
      display: none; /* hidden on desktop */
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-mid);
      cursor: pointer;
      width: fit-content;
    }
    .filters-toggle-btn:hover { border-color: var(--cyan); color: var(--cyan-text); }

    .filter-group-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-mid);
      white-space: nowrap;
    }

    .filter-divider {
      width: 1px;
      height: 18px;
      background: var(--border);
      margin: 0 8px;
      flex-shrink: 0;
    }

    /* ── Popover filter (ported from survey-admin) ── */
    .proj-filter-bar {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    /* v5.1: project filter migrated to .popover-* primitives (css/popover.css).
     * Page-specific overrides (max-height for scrollable filter sections, internal
     * .filter-section/.filter-opt styling) remain here. */
    #projFilterPop.popover {
      max-width: 320px;
      max-height: min(70vh, 480px);
      padding: 6px;
      overflow: hidden;
    }
    #projFilterPop .filter-section { padding: 6px 4px; display: flex; flex-direction: column; min-height: 0; }
    #projFilterPop .filter-section + .filter-section { border-top: 1px solid var(--border); }
    #projFilterPop .filter-section-title {
      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--text-mid); padding: 4px 8px 6px;
    }
    #projFilterPop .filter-opt {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--text-body);
      cursor: pointer; user-select: none; transition: background 0.1s;
    }
    #projFilterPop .filter-opt:hover { background: #F3F4F6; }
    #projFilterPop .filter-opt[aria-selected="true"] { background: rgba(0,173,238,0.10); color: var(--indigo); font-weight: 500; }
    #projFilterPop .filter-opt .opt-count { color: var(--text-mid); font-size: 12px; font-variant-numeric: tabular-nums; }
    #projFilterPop .filter-opt[aria-selected="true"] .opt-count { color: var(--indigo); opacity: 0.75; }

    .proj-chips-wrap {
      grid-column: 1 / -1;
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px; border-radius: 10px;
      background: #F1F2F7; border: 1px solid var(--border);
      margin-bottom: 10px; flex-wrap: wrap;
    }
    .proj-chips-wrap[hidden] { display: none; }
    .proj-chips-label {
      font-size: 12px; font-weight: 600; color: var(--text-mid);
      text-transform: uppercase; letter-spacing: 0.05em;
      white-space: nowrap; padding-top: 3px;
    }
    .proj-chips-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
    .proj-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 4px 4px 10px;
      border-radius: 999px; font-size: 12px; font-weight: 500;
      background: #fff; color: var(--indigo);
      border: 1px solid var(--border);
    }
    .proj-chip .chip-key { color: var(--text-mid); font-weight: 500; margin-right: 2px; }
    .proj-chip .chip-x {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 999px;
      background: transparent; border: none; cursor: pointer;
      color: var(--text-mid); transition: background 0.12s, color 0.12s;
    }
    .proj-chip .chip-x:hover { background: rgba(19,20,124,0.08); color: var(--indigo); }
    .proj-chips-clear {
      background: transparent; border: none; padding: 4px 8px;
      font-size: 12px; color: var(--text-mid); cursor: pointer;
      text-decoration: underline; text-underline-offset: 3px;
    }
    .proj-chips-clear:hover { color: var(--indigo); }

    /* Project / partner / HT-topic cards — inherit .card base, add gap (v3.0.0) */
    .project-card { gap: 20px; }

    .project-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .project-logo-area {
      width: 100%;
      height: 72px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--off-white);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .project-logo-area img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 6px;
      display: block;
    }

    .project-name {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.3;
      flex: 1;
    }

    .project-card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .team-badge {
      font-size: 12px;
      font-weight: 700;
      font-family: 'Be Vietnam Pro', sans-serif;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 4px;
    }

    .team-badge.hcm { background: rgba(0,173,238,0.1);   color: #0090C4; }
    .team-badge.hn  { background: rgba(19,20,124,0.07);  color: var(--indigo); }

    .project-file-count { font-size: 14px; color: var(--text-mid); }
    .project-end-info   { font-size: 14px; color: var(--text-mid); }

    .project-partner {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--cyan-text);
      margin-bottom: 12px;
    }

    .year-badge {
      font-size: 12px;
      font-weight: 700;
      font-family: 'Be Vietnam Pro', sans-serif;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 4px;
      background: rgba(16,185,129,0.1);
      color: #059669;
    }

    .btn-open-project {
      margin-top: auto;
      align-self: flex-end;
      padding: 9px 17px;
      background: var(--indigo);
      color: white;
      border: none;
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }

    .btn-open-project:hover { background: var(--indigo-dark); }

    /* ── Sidebar: sub-nav toggle ── */
    .nav-sub-toggle {
      padding: 6px 20px 6px 36px;
      font-size: 13px;
      color: rgba(255,255,255,0.72);
      cursor: pointer;
      transition: color 0.15s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .nav-sub-toggle:hover { color: rgba(255,255,255,0.5); }

    /* ── Card thumbnail (Health Talk) ── */
    .card-thumb {
      margin: -24px -24px 18px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      aspect-ratio: 16/9;
      background: var(--gray-bg);
      flex-shrink: 0;
    }

    .card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    .card-thumb-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: #EFF1F5;
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 13px;
      font-style: italic;
      color: var(--text-mid);
      letter-spacing: 0.01em;
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* Mobile overrides consolidated into the earlier @media (max-width:768px) block (v2.7.0) */