@media screen {
  body :where(.content, .mk-main) { max-width: 1700px; padding: var(--space-6); }
  body :where(.page-head, .mk-title, .title) { gap: var(--space-5); margin-bottom: var(--space-5); }
  body :where(.actions, .mk-actions, .inline-actions, .filter-actions, .form-actions) {
    gap: var(--space-2);
  }

  body :where(.primary, .secondary, .ghost, .danger, .button, .retry,
    .mk-actions button, .mk-actions a, .filter button, .table-actions button) {
    min-height: var(--control-height);
    border-radius: var(--button-radius);
    padding: 11px 16px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 20px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  body :where(.primary, .filter .primary) {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
  }
  body :where(.primary, .filter .primary):hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
  body :where(.secondary, .ghost) {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
  }
  body :where(.secondary, .ghost):hover { background: var(--color-surface-muted); border-color: var(--color-primary); }
  body .danger { border: 1px solid #fecaca; background: var(--color-danger-soft); color: var(--color-danger); }
  body :where(button, .button)[disabled], body :where(button, .button)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
  }
  body :where(.compact, .data-table button, .mk-table button, td .button) {
    min-height: var(--control-height-compact);
  }
  body :where(.icon-btn, .modal-close, .modal-x, [data-close-modal]) { min-width: 38px; }

  body :where(.panel, .section, .table-card, .card, .metric, .item, .detail, .performance, .sync) {
    border-color: var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }
  body :where(.cards, .metrics) { gap: var(--space-3); }
  body :where(.card, .metric) { padding: var(--space-4); }
  body :where(.card strong, .metric strong, .performance article strong) {
    font-family: var(--font-primary);
    font-size: 26px;
    font-weight: var(--weight-bold);
    line-height: 30px;
  }
  body :where(.card small, .metric small) { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
  body :where(.card span, .metric span, .metric label) { color: var(--color-muted); font-size: var(--text-xs); }

  body :where(.tabs, .financial-tabs, [role="tablist"]) {
    gap: var(--space-2);
    border-color: var(--color-border);
    background: var(--color-surface);
  }
  body :where(.tabs button, .financial-tabs button, [role="tab"]) {
    min-height: var(--control-height-compact);
    border-radius: 8px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  body :where(.badge, .pill, .status-pill, [data-status-badge]) {
    min-height: 24px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
  }
  body :where(.badge.completed, .badge.approved, .badge.received, .badge.active, .pill.completed, .pill.approved) {
    background: var(--color-success-soft); color: var(--color-success);
  }
  body :where(.badge.pending, .badge.upcoming, .badge.partial, .pill.pending) {
    background: var(--color-warning-soft); color: var(--color-warning);
  }
  body :where(.badge.overdue, .badge.rejected, .badge.cancelled, .badge.deleted, .pill.overdue) {
    background: var(--color-danger-soft); color: var(--color-danger);
  }
  body :where(.badge.issued, .badge.shared, .badge.in-progress, .pill.issued) {
    background: var(--color-info-soft); color: var(--color-info);
  }
  body :where(.empty, .loading-state, .error-state, .no-results) {
    color: var(--color-muted);
    font-size: var(--text-base);
  }
}