.ap-card-head p {
      font-size: .78rem;
      color: var(--ap-secondary);
      margin: .15rem 0 0;
    }

    .ap-filter-input {
      background: var(--ap-bg);
      border: 1px solid var(--ap-border);
      border-radius: var(--ap-radius-sm);
      font-size: .85rem;
      color: var(--ap-text-strong);
      padding: .55rem .8rem;
    }

    .ap-filter-input:focus {
      outline: none;
      border-color: var(--ap-primary);
      background: var(--ap-surface);
    }

    /* Category chips */
    .ap-cat-chip {
      border: 1px solid var(--ap-border);
      background: var(--ap-surface);
      color: var(--ap-text-strong);
      border-radius: 20px;
      padding: .4rem .9rem;
      font-size: .8rem;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }

    .ap-cat-chip .count {
      font-size: .7rem;
      color: var(--ap-secondary);
      font-weight: 700;
    }

    .ap-cat-chip.active {
      background: var(--ap-primary);
      border-color: var(--ap-primary);
      color: #fff;
    }

    .ap-cat-chip.active .count {
      color: rgba(255, 255, 255, .8);
    }

    /* Size toggle */
    .ap-size-toggle .btn {
      padding: .4rem .8rem;
      font-size: .8rem;
    }

    /* Icon grid */
    .ap-icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      gap: .6rem;
      --icon-size: 24px;
    }

    .ap-icon-cell {
      border: 1px solid var(--ap-border);
      border-radius: var(--ap-radius-sm);
      background: var(--ap-surface);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: 1rem .5rem;
      cursor: pointer;
      position: relative;
      transition: border-color .15s ease, background .15s ease;
    }

    .ap-icon-cell:hover {
      border-color: var(--ap-primary);
      background: var(--ap-primary-100);
    }

    .ap-icon-cell i {
      color: var(--ap-text-strong);
      font-size: var(--icon-size);
    }

    .ap-icon-cell .name {
      font-size: .66rem;
      color: var(--ap-secondary);
      text-align: center;
      word-break: break-word;
      line-height: 1.3;
    }

    .ap-icon-cell .copied-badge {
      position: absolute;
      top: -8px;
      right: -6px;
      background: var(--ap-success);
      color: #fff;
      font-size: .62rem;
      font-weight: 700;
      padding: .1rem .4rem;
      border-radius: 10px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .15s ease, transform .15s ease;
      pointer-events: none;
    }

    .ap-icon-cell.copied .copied-badge {
      opacity: 1;
      transform: translateY(0);
    }

    .ap-empty-state {
      text-align: center;
      padding: 3rem 1rem;
      color: var(--ap-secondary);
    }

    /* Usage examples */
    .ap-usage-row {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      align-items: center;
    }

    /* ============ Utility classes (extracted from inline styles) ============ */

    /* Font sizes */
    .ap-fs-13 {
      font-size: 1.3rem;
    }

    .ap-fs-06 {
      font-size: .6rem;
    }

    .ap-fs-09 {
      font-size: .9rem;
    }

    .ap-fs-078 {
      font-size: .78rem;
    }

    .ap-fs-085 {
      font-size: .85rem;
    }

    .ap-fs-14 {
      font-size: 1.4rem;
    }

    .ap-fs-18 {
      font-size: 1.8rem;
    }

    /* Text colors */
    .ap-color-strong {
      color: var(--ap-text-strong);
    }

    .ap-color-secondary {
      color: var(--ap-secondary);
    }

    .ap-color-primary {
      color: var(--ap-primary);
    }

    .ap-color-info {
      color: var(--ap-info);
    }

    .ap-color-success {
      color: var(--ap-success);
    }

    .ap-color-warning {
      color: var(--ap-warning);
    }

    .ap-color-danger {
      color: var(--ap-danger);
    }

    /* Transparent button */
    .ap-btn-transparent {
      background: transparent;
    }

    /* Small dropdown menu */
    .ap-menu-sm {
      font-size: .85rem;
    }

    /* Icon search field (inset icon) */
    .ap-search-inset-icon {
      position: absolute;
      left: .8rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--ap-secondary);
      font-size: .9rem;
    }

    .ap-search-inset-input {
      padding-left: 2.3rem;
    }

    /* Search wrapper: 320px max, flexible width */
    .ap-search-wrap {
      max-width: 320px;
      flex: 1;
    }

    /* Icon count label */
    .ap-icon-count {
      font-size: .78rem;
      color: var(--ap-secondary);
    }

    /* Usage section labels */
    .ap-usage-label {
      font-size: .78rem;
      color: var(--ap-secondary);
      text-transform: uppercase;
      letter-spacing: .03em;
      font-weight: 700;
    }

    /* Square icon button (38x38) */
    .ap-btn-square-38 {
      width: 38px;
      height: 38px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Soft badges (usage examples) */
    .ap-badge-soft {
      font-weight: 700;
      padding: .4rem .7rem;
    }

    .ap-badge-soft-success {
      background: var(--ap-success-100);
      color: var(--ap-success);
    }

    .ap-badge-soft-warning {
      background: var(--ap-warning-100);
      color: var(--ap-warning);
    }

    .ap-badge-soft-danger {
      background: var(--ap-danger-100);
      color: var(--ap-danger);
    }

    .ap-badge-soft-info {
      background: var(--ap-info-100);
      color: var(--ap-info);
    }

    /* Star icon size (usage examples) */
    .ap-star-lg {
      font-size: 1.4rem;
    }

    /* Footer */
    .ap-footer {
      color: var(--ap-secondary);
    }