@layer components {
  .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(--surface-base, rgba(255, 255, 255, 0.88));
    background-image: none;
    border-radius: var(--panel-radius-premium, var(--radius-xl, 24px));
    border: 1px solid var(--panel-border-premium, var(--border-subtle, rgba(148, 163, 184, 0.14)));
    box-shadow: var(--panel-shadow-premium, var(--shadow-md));
    padding: var(--panel-padding);
    backdrop-filter: var(--surface-blur, blur(10px));
    -webkit-backdrop-filter: var(--surface-blur, blur(10px));
    filter: none;
  }

  .route-page .panel-sm,
  .route-page .card-sm,
  .route-page .table-wrap-sm {
    padding: var(--panel-padding-sm);
  }

  .route-page .panel-lg,
  .route-page .card-lg,
  .route-page .table-wrap-lg {
    padding: var(--panel-padding-lg);
  }

  .route-page .card,
  .route-page .panel {
    overflow: visible;
  }
}