:root {
    --bg: #0d0d0f;
    --bg2: #141418;
    --bg3: #1c1c22;
    --bg4: #242430;
    --border: #2a2a38;
    --accent: #7c5cfc;
    --accent2: #fc5c7d;
    --accent3: #5cf8c8;
    --text: #e8e8f0;
    --text2: #8888a8;
    --text3: #555570;
    --card-hover: #1e1e2a;
    --radius: 10px;
    --shadow: 0 4px 24px rgba(0,0,0,0.4);
    --scrollbar-rest: #2e2842;       /* dark purple at rest — inherits from --border family */
    --scrollbar-hover: var(--accent);
    --scrollbar-thumb-dot: var(--text);
    --daw-ableton-bg: #0c2a28; --daw-ableton-fg: #77fcf3;
    --daw-cubase-bg: #1a3a6e; --daw-cubase-fg: #6ab0ff;
    --daw-bitwig-bg: #3a1a1a; --daw-bitwig-fg: #ff8c6a;
    --daw-mpc-bg: #8b1a1a; --daw-mpc-fg: #ffffff;
    --daw-dawproject-bg: #251540; --daw-dawproject-fg: #a78bfa;
    --daw-reaper-bg: #1a2a0e; --daw-reaper-fg: #a3e635;
    --daw-fl_studio-bg: #2a1a00; --daw-fl_studio-fg: #ff9944;
    --daw-garageband-bg: #1f1a00; --daw-garageband-fg: #f0c040;
    --daw-logic-bg: #0f1520; --daw-logic-fg: #9ab8d8;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; }

  /* Default link color — neon mint, readable on dark surfaces. Browser-default
     blue (#00f) is unreadable on bg #0d0d0f. Specific link styles
     (.user-menu-item, .notif-item, etc.) override via more specific selectors. */
  a { color: var(--accent3); text-decoration: none; }
  a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; }

  header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; gap: 16px; height: 60px; position: sticky; top: 0; z-index: 100; }
  .logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; }
  .logo-link { text-decoration: none; color: inherit; }
  .logo-img { height: 36px; width: auto; filter: brightness(0.95); }
  .logo span { color: var(--accent2); }
  .header-stats { display: flex; gap: 20px; margin-left: 24px; }
  .hstat { font-size: 12px; color: var(--text2); }
  .hstat strong { color: var(--text); font-size: 14px; display: block; }
  .spacer { flex: 1; }
  .btn { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.15s; }
  .btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
  .btn-ghost:hover { background: var(--bg4); color: var(--text); }

  .layout { display: flex; height: calc(100vh - 60px); overflow: hidden; }
  .sidebar { width: 280px; min-width: 260px; background: var(--bg2); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
  .sidebar-resize { width: 5px; cursor: col-resize; background: var(--border); flex-shrink: 0; transition: background 0.15s; }
  .sidebar-resize:hover, .sidebar-resize.dragging { background: var(--accent); }
  .main { flex: 1; overflow-y: auto; padding: 20px 24px; }

  /* ── Shared scrollbar style — dark purple at rest, accent on hover ── */
  /* Reused by sidebar, main content, and modal. Mirrors .rs-thumb token family. */
  .sidebar::-webkit-scrollbar,
  .main::-webkit-scrollbar,
  .modal::-webkit-scrollbar { width: 10px; }
  .sidebar::-webkit-scrollbar-track,
  .main::-webkit-scrollbar-track,
  .modal::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb,
  .main::-webkit-scrollbar-thumb,
  .modal::-webkit-scrollbar-thumb {
    background: var(--scrollbar-rest);
    border-radius: 5px;
    border: 2px solid var(--bg2);
    transition: background 0.15s;
  }
  .sidebar::-webkit-scrollbar-thumb:hover,
  .main::-webkit-scrollbar-thumb:hover,
  .modal::-webkit-scrollbar-thumb:hover {
    background:
      radial-gradient(circle at center, var(--scrollbar-thumb-dot) 2.5px, transparent 3px) center / 100% 100% no-repeat,
      var(--scrollbar-hover);
    background-color: var(--scrollbar-hover);
  }
  /* Firefox: thumb + track colors only; hover unsupported via CSS. */
  .sidebar,
  .main,
  .modal { scrollbar-width: thin; scrollbar-color: var(--scrollbar-rest) transparent; }

  .view-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
  .view-tab { padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text2); background: transparent; border: 1px solid transparent; transition: all 0.15s; }
  .view-tab.active { background: var(--bg3); color: var(--text); border-color: var(--border); }
  .view-tab:hover:not(.active) { color: var(--text); }

  .sort-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .count-badge { font-size: 12px; color: var(--text3); margin-left: auto; }
  .empty-state { text-align: center; padding: 80px 20px; color: var(--text3); }
  .empty-icon { font-size: 64px; margin-bottom: 16px; }
  .empty-title { font-size: 20px; font-weight: 700; color: var(--text2); margin-bottom: 8px; }
  .empty-sub { font-size: 14px; }
  .spinner { border: 3px solid var(--bg4); border-top-color: var(--accent); border-radius: 50%; width: 32px; height: 32px; animation: spin 0.6s linear infinite; margin: 60px auto; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 0; }
  .page-btn { padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); transition: all 0.15s; }
  .page-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
  .page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .page-info { font-size: 12px; color: var(--text3); }

  /* ── Styled tooltip (use data-tip attr on any element) ── */
  [data-tip] { position: relative; cursor: help; }
  [data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; background: var(--bg2); color: var(--text2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 11px; font-weight: 400; line-height: 1.5; max-width: 320px; width: max-content; white-space: pre-line; z-index: 300; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }

  /* ── Header user menu (replaces v0.2.3.2 right tools sidebar) ── */
  .user-menu { position: relative; display: inline-flex; }
  .user-menu-btn { background: var(--bg3); border: 1px solid var(--border);
                   border-radius: var(--radius); width: 32px; height: 32px; cursor: pointer;
                   color: var(--text2); font-size: 14px; display: flex; align-items: center;
                   justify-content: center; transition: all 0.15s; }
  .user-menu-btn:hover { color: var(--text); border-color: var(--accent); }
  .user-menu-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
  .user-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0;
                        background: var(--bg2); border: 1px solid var(--border);
                        border-radius: var(--radius); box-shadow: var(--shadow);
                        min-width: 220px; padding: 6px; z-index: 300; }
  .user-menu-dropdown[hidden] { display: none; }
  .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%;
                    text-align: left; padding: 8px 12px; background: transparent;
                    border: 0; border-radius: 7px; color: var(--text); cursor: pointer;
                    font-size: 13px; text-decoration: none; font-family: inherit; }
  .user-menu-item:hover { background: var(--bg3); }
  .user-menu-item--disabled { opacity: 0.4; cursor: not-allowed; }
  .user-menu-item--disabled:hover { background: transparent; }
  .user-menu-item--admin { color: var(--accent2); }
  .user-menu-item--logout { color: var(--danger, #e05555); }
  .user-menu-icon { font-size: 15px; width: 20px; text-align: center; }
  .user-menu-divider { height: 1px; background: var(--border); margin: 6px 2px; }

  /* ── Trash view banner ── */
  .trash-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg3); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .trash-banner-icon { font-size: 16px; }
  .trash-banner-label { font-weight: 600; color: var(--text); flex: 1; }
  .trash-banner-close { padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--text2); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: all 0.15s; }
  .trash-banner-close:hover { color: var(--text); border-color: var(--accent); }

  /* ── Kind tab bar (Projects | Song Seeds | Audio Notes) ── */
  .kind-tab-bar { display: flex; gap: 2px; padding: 0 16px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .kind-tab { padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text3); background: transparent; border: none; border-bottom: 2px solid transparent; transition: all 0.15s; letter-spacing: 0.2px; }
  .kind-tab:hover { color: var(--text); }
  .kind-tab.active { color: var(--text); border-bottom-color: var(--accent); }
  /* Catalogue layout shrinks by tab bar height (~43px) so sidebar/main don't overflow */
  .page-catalogue .layout { height: calc(100vh - 103px); }

  /* Narrow-viewport polish (mobile deferred to v0.3+). */
  @media (max-width: 768px) { .user-menu-btn { width: 28px; height: 28px; } }