@layer components {
  .card,
  .panel,
  .route-page .panel,
  .route-page .card,
  .route-page .table-wrap,
  .route-page .dashboard-panel,
  .route-page .analytics-panel,
  .route-page .profile-panel,
  #modal .panel,
  #modal .card,
  #modal .table-wrap {
    background: var(--card);
    background-image: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-sm);
    padding: var(--panel-padding);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
  }

  .card-sm,
  .panel-sm {
    padding: var(--panel-padding-sm);
    border-radius: var(--radius-md);
  }

  .card-lg,
  .panel-lg {
    padding: var(--panel-padding-lg);
  }

  .route-page .empty,
  #modal .empty {
    text-align: center;
    color: var(--muted);
    padding: 20px;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 10px;
  }

  .route-page .empty.compact,
  #modal .empty.compact {
    padding: 10px 12px;
    font-size: 13px;
  }

  .route-page .empty-state,
  #modal .empty-state {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 18px 10px;
  }

  .route-page .empty-state-icon,
  #modal .empty-state-icon {
    font-size: 22px;
    opacity: 0.85;
  }

  .route-page .empty-state-title,
  #modal .empty-state-title {
    font-weight: 700;
    color: var(--ui-text);
  }

  .route-page .empty-state-desc,
  #modal .empty-state-desc {
    color: var(--muted);
    font-size: 12px;
  }

  body.dark .route-page .empty-state-title,
  body.dark #modal .empty-state-title {
    color: var(--text);
  }

  .route-page .route-error-card {
    display: grid;
    gap: 8px;
    border-color: rgba(239, 68, 68, 0.28);
  }

  .route-page .route-error-title {
    font-weight: 700;
    color: #991b1b;
    font-size: 14px;
  }

  .route-page .route-error-desc {
    color: #7f1d1d;
  }

  .route-page .skeleton-card,
  .route-page .table-skeleton {
    position: relative;
    overflow: hidden;
  }

  .route-page .skeleton-line {
    height: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.16),
      rgba(148, 163, 184, 0.28),
      rgba(148, 163, 184, 0.16)
    );
    background-size: 220% 100%;
    animation: shimmer 1.1s linear infinite;
  }

  .route-page .skeleton-line.w40 {
    width: 40%;
  }

  .route-page .skeleton-line.w70 {
    width: 70%;
    height: 20px;
  }
}