mzh-order-card { display: block; width: 100%; }
.mzh-order-card article { position: relative; background: var(--color-bg-primary); border-radius: var(--radius-md); padding: var(--spacing-lg) var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-lg); }
.mzh-order-card article::before { content: ''; position: absolute; left: 0; top: var(--order-card-accent-top); width: var(--spacing-xs); height: var(--order-card-accent-height); background: var(--color-action-primary); border-radius: var(--radius-full); }
.mzh-order-card header { display: flex; gap: var(--spacing-sm); align-items: center; position: relative; height: var(--typography-title-line-height); }
.mzh-order-card h2 { margin: 0; font-size: var(--typography-title-font-size); line-height: var(--typography-title-line-height); font-weight: var(--typography-weight-medium); }
.mzh-order-card mzh-icon-button { width: var(--order-card-edit-slot); height: var(--order-card-edit-slot); align-items: center; justify-content: center; }
.mzh-order-card mzh-icon-button .mzh-atom-icon { width: auto; height: auto; max-width: none; }
.mzh-order-card__status { position: absolute; top: 0; right: 0; font-size: var(--typography-caption-font-size); line-height: normal; white-space: nowrap; }
.mzh-order-card[data-state="pending"] .mzh-order-card__status { background: var(--order-card-status-pending-bg); color: var(--color-feedback-error); }
.mzh-order-card[data-state="completed"] .mzh-order-card__status { background: var(--button-primary-bg-disabled); color: var(--color-action-on-primary); }
.mzh-order-card dl { margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.mzh-order-card dl div { display: flex; gap: var(--spacing-md); line-height: var(--typography-body-line-height); }
.mzh-order-card dt { color: var(--color-text-quaternary); flex: none; }
.mzh-order-card dd { margin: 0; overflow-wrap: anywhere; }
.mzh-order-card footer { display: flex; align-items: center; justify-content: space-between; height: var(--control-height-sm); }
.mzh-order-card[data-state="completed"] footer { justify-content: flex-end; gap: var(--spacing-sm); }
.mzh-order-card__pay, .mzh-order-card__progress { --mzh-button-width: var(--order-card-action-width) !important; }
.mzh-order-card__warranty { --mzh-button-width: var(--order-card-warranty-width) !important; }
.mzh-order-card__review { --mzh-button-width: var(--order-card-review-width) !important; }