.ap-stat {
    padding: 1.2rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .ap-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ap-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .ap-stat-label {
    font-size: .78rem;
    color: var(--ap-secondary);
    font-weight: 600;
  }

  .ap-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ap-text-strong);
    letter-spacing: -.02em;
  }

  .ap-stat-change {
    font-size: .74rem;
    font-weight: 700;
  }

  .ap-filter-input,
  .ap-filter-select {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    font-size: .83rem;
    color: var(--ap-text-strong);
    padding: .5rem .75rem;
  }

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

  /* Table */
  .ap-table thead th {
    font-size: .72rem;
    color: var(--ap-secondary);
    font-weight: 700;
    border-bottom: 1px solid var(--ap-border);
    padding: .75rem .6rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }

  .ap-table thead th:hover {
    color: var(--ap-text-strong);
  }

  .ap-table thead th i {
    font-size: .65rem;
    margin-left: .15rem;
    color: var(--ap-secondary);
  }

  .ap-table tbody td {
    padding: .85rem .6rem;
    border-bottom: 1px solid var(--ap-border);
    vertical-align: middle;
    font-size: .85rem;
    color: var(--ap-text);
  }

  .ap-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
  }

  .ap-cell-sub {
    font-size: .76rem;
    color: var(--ap-secondary);
  }

  .ap-tier {
    font-size: .72rem;
    font-weight: 700;
    padding: .28rem .55rem;
    border-radius: 6px;
  }

  .ap-tier.gold {
    background: #FEF3E2;
    color: #B45309;
  }

  .ap-tier.silver {
    background: #F1F5F9;
    color: #475569;
  }

  .ap-tier.bronze {
    background: #FCEEE6;
    color: #9A3412;
  }

  .ap-row-check {
    cursor: pointer;
  }

  .ap-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ap-radius-sm);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    color: var(--ap-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ap-action-btn:hover {
    background: var(--ap-bg);
    color: var(--ap-text-strong);
  }

  /* Grid view */
  .ap-cust-grid-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 1.25rem;
    text-align: center;
    height: 100%;
  }

  .ap-cust-grid-card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: .75rem;
  }

  .ap-cust-grid-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ap-border);
  }

  .ap-cust-grid-stats div b {
    display: block;
    color: var(--ap-text-strong);
    font-size: 1rem;
  }

  .ap-cust-grid-stats div span {
    font-size: .7rem;
    color: var(--ap-secondary);
  }

  /* Modal */
  .modal-content {
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
  }

  .modal-header,
  .modal-footer {
    border-color: var(--ap-border);
  }

  .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ap-text-strong);
  }

  .form-control,
  .form-select {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    font-size: .85rem;
    color: var(--ap-text-strong);
  }

  .form-control:focus,
  .form-select:focus {
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3px var(--ap-primary-100);
  }

  .ap-view-toggle .btn {
    padding: .4rem .6rem;
  }

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

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

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

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

  .ap-fs-083 {
    font-size: .83rem;
  }

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

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

  /* Font weight */
  .ap-fw-500 {
    font-weight: 500;
  }

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

  /* Stat icon background variants */
  .ap-ic-primary {
    background: var(--ap-primary-100);
    color: var(--ap-primary);
  }

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

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

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

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

  .ap-search-inset-input {
    padding-left: 2rem;
    width: 220px;
  }

  /* Table column widths */
  .ap-col-checkbox {
    width: 36px;
  }

  .ap-col-actions {
    width: 70px;
  }

  /* Grid view hidden by default */
  .ap-hidden {
    display: none !important;
  }

  /* Customer row link color reset */
  .ap-link-inherit {
    color: inherit;
  }

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