/* ── Reset & Variables ─────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --clr-primary:   #3498db;
      --clr-primary-d: #2980b9;
      --clr-success:   #2ecc71;
      --clr-success-d: #27ae60;
      --clr-warning:   #f39c12;
      --clr-warning-d: #e67e22;
      --clr-danger:    #e74c3c;
      --clr-danger-d:  #c0392b;
      --clr-dark:      #2c3e50;
      --clr-light:     #ecf0f1;
      --clr-white:     #ffffff;
      --clr-header:    #2c3e50;
      --clr-sidebar:   #34495e;
      --clr-bg:        #f5f6fa;
      --header-h:      56px;
      --sidebar-w:     280px;
      --radius:        6px;
      --shadow:        0 2px 8px rgba(0,0,0,.12);

      /* Typography & spacing tokens (use in new code; legacy values are
         migrated gradually) */
      --fs-xs: .78rem;
      --fs-sm: .85rem;
      --fs-md: .95rem;
      --fs-lg: 1.25rem;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
    }

    html, body {
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                   Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      background: var(--clr-bg);
      color: var(--clr-dark);
    }

    /* ── Keyboard focus visibility ─────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--clr-primary);
      outline-offset: 2px;
    }

    /* ── Toast notifications ───────────────────────────────── */
    #toast-container {
      position: fixed;
      bottom: 18px;
      right: 18px;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 360px;
    }
    .toast {
      position: relative;
      background: var(--clr-white);
      border: 1px solid #dfe6e9;
      border-left: 4px solid var(--clr-primary);
      border-radius: var(--radius);
      box-shadow: 0 4px 14px rgba(0,0,0,.18);
      padding: 10px 34px 10px 14px;
      animation: toast-in .18s ease-out;
    }
    .toast-success { border-left-color: var(--clr-success); }
    .toast-error   { border-left-color: var(--clr-danger); }
    .toast-title   { font-size: .86rem; font-weight: 700; color: var(--clr-dark); }
    .toast-message { font-size: .8rem; color: #5d6d7e; margin-top: 2px; line-height: 1.45; }
    .toast-close {
      position: absolute;
      top: 6px;
      right: 8px;
      border: none;
      background: transparent;
      color: #95a5a6;
      font-size: .8rem;
      cursor: pointer;
      padding: 2px;
    }
    .toast-close:hover { color: var(--clr-dark); }
    .toast-out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
    @keyframes toast-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Actionable empty states ───────────────────────────── */
    .list-empty {
      padding: 18px 14px;
      text-align: center;
      color: rgba(255,255,255,.55);
      font-size: .82rem;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }
    .list-empty-btn {
      padding: 7px 14px;
      border: 1px dashed rgba(127,140,141,.7);
      border-radius: var(--radius);
      background: transparent;
      color: inherit;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
    }
    .list-empty-btn:hover { border-style: solid; border-color: var(--clr-primary); color: var(--clr-primary); }
    .root-hint {
      margin-top: 8px;
      font-size: .74rem;
      line-height: 1.5;
      color: rgba(255,255,255,.55);
    }

    /* ── Command palette (Ctrl+K) ──────────────────────────── */
    #command-palette .palette-box {
      width: 520px;
      max-width: 92vw;
      margin-top: -22vh;
      padding: 10px;
      background: var(--clr-white);
      border-radius: 10px;
      box-shadow: 0 12px 40px rgba(0,0,0,.3);
    }
    .palette-input {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid #dfe6e9;
      border-radius: var(--radius);
      font-size: .95rem;
      outline: none;
    }
    .palette-input:focus { border-color: var(--clr-primary); }
    .palette-list { max-height: 320px; overflow-y: auto; margin-top: 8px; }
    .palette-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 12px;
      border-radius: var(--radius);
      font-size: .88rem;
      color: var(--clr-dark);
      cursor: pointer;
    }
    .palette-item.active,
    .palette-item:hover { background: var(--clr-light); }
    .palette-sub { font-size: .76rem; color: #95a5a6; white-space: nowrap; }
    .palette-empty { padding: 14px; font-size: .85rem; color: #95a5a6; font-style: italic; }