/* Extracted from library/index.html block 1. */
.library-page { padding-top: 100px; min-height: 100vh; }
    .library-container { max-width: 960px; margin: 0 auto; padding: 60px 24px 80px; }
    .library-title {
      font-family: 'Unbounded', sans-serif; font-size: 36px; font-weight: 800;
      color: var(--text-primary); margin-bottom: 12px;
    }
    .library-subtitle {
      font-size: 16px; color: var(--text-secondary); margin-bottom: 32px;
    }

    /* Filter tabs */
    .library-filter {
      display: flex; gap: 8px; margin-bottom: 24px;
    }
    .library-filter__btn {
      padding: 8px 20px; background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 999px; font-size: 14px; font-weight: 600;
      cursor: pointer; font-family: 'Manrope', sans-serif;
      color: var(--text-secondary); transition: all 0.2s;
    }
    .library-filter__btn--active {
      background: var(--purple-deep); color: #fff; border-color: var(--purple-deep);
    }

    /* Track card */
    .track-list { display: flex; flex-direction: column; gap: 12px; }
    .track-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 16px; padding: 16px 20px;
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    }
    .track-card--placeholder {
      opacity: 0.72;
      border-style: dashed;
    }
    .track-card__info { flex: 1; min-width: 200px; }
    .track-card__title {
      font-size: 16px; font-weight: 700; color: var(--text-primary);
      margin-bottom: 4px; font-family: 'Manrope', sans-serif;
    }
    .track-card__meta {
      font-size: 13px; color: var(--text-secondary);
    }
    .track-card__audio {
      width: 100%; margin-top: 8px; border-radius: 10px;
    }
    .track-card__actions {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    }
    .track-card__btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--bg-page); border: none; cursor: pointer;
      transition: background 0.15s;
    }
    .track-card__btn:hover { background: var(--bg-secondary); }
    .track-card__btn--favorite.track-card__btn--active { background: rgba(232,121,249,0.18); }
    .track-card__btn--favorite.track-card__btn--active svg { fill: var(--cta-bg); stroke: var(--cta-bg); }

    /* Status badge */
    .track-status {
      display: inline-block; padding: 2px 10px; border-radius: 999px;
      font-size: 12px; font-weight: 600; margin-left: 8px;
    }
    .track-status--processing { background: rgba(245,158,11,0.12); color: #B45309; display: inline-flex; align-items: center; gap: 4px; }
    .track-status__spinner { animation: track-status-spin 1s linear infinite; flex-shrink: 0; }
    @keyframes track-status-spin { to { transform: rotate(360deg); } }
    .track-status--failed { background: rgba(239,68,68,0.12); color: var(--error); }

    /* Empty state */
    .library-empty { text-align: center; padding: 60px 20px; }
    .library-empty__icon { font-size: 56px; margin-bottom: 16px; opacity: 0.4; }
    .library-empty__title {
      font-family: 'Unbounded', sans-serif; font-size: 22px; font-weight: 700;
      color: var(--text-primary); margin-bottom: 8px;
    }
    .library-empty__text {
      color: var(--text-secondary); margin-bottom: 24px; font-size: 15px;
    }

    /* Loading */
    .library-loading { text-align: center; padding: 60px 0; }
    .library-spinner {
      width: 40px; height: 40px; border: 3px solid var(--border);
      border-top-color: var(--purple-deep); border-radius: 50%;
      animation: spin 0.8s linear infinite; margin: 0 auto 16px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .library-loadmore {
      margin: 24px auto 0; display: block;
    }

    /* Toast */
    .library-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
      background: var(--text-primary); color: #fff;
      padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 600;
      box-shadow: 0 8px 32px rgba(0,0,0,0.12); transition: transform 0.3s; z-index: 200;
    }
    .library-toast--visible { transform: translateX(-50%) translateY(0); }

    @media (max-width: 768px) {
      .library-title { font-size: 26px; }
      .library-container { padding: 40px 16px 60px; }
      .track-card { padding: 14px 16px; }
      .track-card__actions { width: 100%; justify-content: flex-end; }
    }