.hf-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}
.hf-page-header__copy { min-inline-size: 0; }
.hf-page-header__title { margin: 0; font-size: var(--hf-heading-1-size); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }
.hf-page-header__description { margin: .25rem 0 0; color: var(--hf-color-text-muted); font-size: .84rem; }
.hf-page-header__action { flex: 0 0 auto; }

.hf-dashboard { display: grid; gap: 1rem; max-inline-size: 84rem; margin-inline: auto; }
.hf-dashboard__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.hf-stat-card { min-inline-size: 0; min-block-size: 4.75rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .625rem; padding: .75rem .875rem; transition: transform var(--hf-motion-normal) var(--hf-ease), box-shadow var(--hf-motion-normal) var(--hf-ease), border-color var(--hf-motion-normal) var(--hf-ease); }
.hf-stat-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--hf-color-primary) 22%, var(--hf-color-border)); box-shadow: var(--hf-shadow-md); }
.hf-stat-card__icon { inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; border-radius: var(--hf-radius-md); color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 9%, var(--hf-color-surface)); }
.hf-stat-card--success .hf-stat-card__icon { color: var(--hf-color-success); background: color-mix(in srgb, var(--hf-color-success) 9%, var(--hf-color-surface)); }
.hf-stat-card--warning .hf-stat-card__icon { color: var(--hf-color-warning); background: color-mix(in srgb, var(--hf-color-warning) 9%, var(--hf-color-surface)); }
.hf-stat-card--info .hf-stat-card__icon { color: var(--hf-color-info); background: color-mix(in srgb, var(--hf-color-info) 9%, var(--hf-color-surface)); }
.hf-stat-card__copy { min-inline-size: 0; display: grid; gap: var(--hf-space-1); }
.hf-stat-card__value { font-size: 1.2rem; line-height: 1.15; font-weight: 500; }
.hf-stat-card__label { overflow: hidden; color: var(--hf-color-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.hf-stat-card__arrow, .hf-list-row__arrow, .hf-quick-action__arrow { color: var(--hf-color-text-muted); }

.hf-dashboard__primary-grid { display: grid; grid-template-columns: minmax(14rem, .68fr) minmax(0, 2.32fr); gap: .875rem; align-items: stretch; }
.hf-credit-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; align-content: center; }
.hf-credit-card__icon { inline-size: 2.375rem; block-size: 2.375rem; display: grid; place-items: center; border-radius: var(--hf-radius-lg); color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 10%, var(--hf-color-surface)); }
.hf-credit-card__copy { min-inline-size: 0; display: grid; gap: var(--hf-space-1); }
.hf-credit-card__copy span { color: var(--hf-color-text-muted); }
.hf-credit-card__copy strong { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; }
.hf-credit-card .hf-btn { grid-column: 1 / -1; }

.hf-dashboard-panel { min-inline-size: 0; }
.hf-dashboard-panel.hf-card { padding: .875rem; }
.hf-dashboard-panel--warning { padding: var(--hf-space-5); border: 1px solid color-mix(in srgb, var(--hf-color-warning) 24%, var(--hf-color-border)); border-radius: var(--hf-radius-lg); background: color-mix(in srgb, var(--hf-color-warning) 6%, var(--hf-color-surface)); }
.hf-dashboard-panel__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .625rem; }
.hf-dashboard-panel__header h2 { margin: var(--hf-space-1) 0 0; }
.hf-section-eyebrow { color: var(--hf-color-text-muted); font-size: .78rem; font-weight: 500; }
.hf-text-link { display: inline-flex; align-items: center; gap: var(--hf-space-2); color: var(--hf-color-primary); font-weight: 500; }

.hf-expiry-list, .hf-list-stack { display: grid; }
.hf-expiry-item { min-block-size: 4.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .625rem; padding-block: .625rem; border-block-start: 1px solid color-mix(in srgb, var(--hf-color-warning) 16%, var(--hf-color-border)); }
.hf-expiry-item:first-child { border-block-start: 0; }
.hf-expiry-item__icon { inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border-radius: var(--hf-radius-md); color: var(--hf-color-warning); background: color-mix(in srgb, var(--hf-color-warning) 11%, var(--hf-color-surface)); }
.hf-expiry-item__copy { min-inline-size: 0; display: grid; gap: var(--hf-space-1); }
.hf-expiry-item__copy span { color: var(--hf-color-text-muted); font-size: .86rem; }

.hf-quick-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.hf-quick-action { min-block-size: 4rem; display: grid; grid-template-columns: 1fr; align-content: center; justify-items: center; gap: .3rem; padding: .5rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); text-align: center; transition: border-color var(--hf-motion-fast) var(--hf-ease), background var(--hf-motion-fast) var(--hf-ease); }
.hf-quick-action:hover { border-color: color-mix(in srgb, var(--hf-color-primary) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-primary) 3%, var(--hf-color-surface)); }
.hf-quick-action__icon { inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center; border-radius: var(--hf-radius-md); color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface)); }
.hf-quick-action__copy { min-inline-size: 0; display: grid; gap: .05rem; font-size: .82rem; }
.hf-quick-action__copy small { display: none; }
.hf-quick-action__arrow { display: none; }

.hf-service-mini-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); overflow: hidden; }
.hf-recent-card { min-inline-size: 0; padding: .7rem .75rem; border: 0; border-block-start: 1px solid var(--hf-color-border); border-radius: 0; background: var(--hf-color-surface); }
.hf-recent-card:first-child { border-block-start: 0; }
.hf-service-mini { display: grid; grid-template-columns: minmax(12rem, 1.35fr) minmax(18rem, 1fr) auto; align-items: center; gap: .75rem; }
.hf-recent-card__head { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
.hf-recent-card__identity { min-inline-size: 0; display: grid; gap: var(--hf-space-1); }
.hf-recent-card__identity span { overflow: hidden; color: var(--hf-color-text-muted); text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.hf-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.hf-meta-grid div { min-inline-size: 0; display: grid; gap: .15rem; }
.hf-meta-grid dt { color: var(--hf-color-text-muted); font-size: .76rem; }
.hf-meta-grid dd { margin: 0; overflow: hidden; font-size: .9rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.hf-dashboard__secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; align-items: start; }
.hf-list-row { min-block-size: 3.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--hf-space-3); padding-block: .55rem; border-block-start: 1px solid var(--hf-color-border); }
.hf-list-row:first-child { border-block-start: 0; }
.hf-list-row__main { min-inline-size: 0; display: grid; gap: var(--hf-space-1); }
.hf-list-row__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-list-row__main span, .hf-list-row__date { color: var(--hf-color-text-muted); font-size: .8rem; }
.hf-list-row__amount { font-weight: 500; white-space: nowrap; }

.hf-empty-state { min-block-size: 12rem; display: grid; place-items: center; align-content: center; gap: var(--hf-space-3); padding: var(--hf-space-6); text-align: center; }
.hf-empty-state__icon { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: var(--hf-radius-lg); color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface)); }
.hf-empty-state__copy { display: grid; gap: var(--hf-space-1); max-inline-size: 29rem; }
.hf-empty-state__copy p { margin: 0; color: var(--hf-color-text-muted); }

.hf-dashboard__compat { display: grid; gap: var(--hf-space-4); }
.hf-compat-panel { min-inline-size: 0; }
.hf-compat-panel__header, .hf-compat-panel__body, .hf-compat-panel__footer { padding: var(--hf-space-4); }
.hf-compat-panel__header { border-block-end: 1px solid var(--hf-color-border); }
.hf-compat-panel__header h2 { margin: 0; }
.hf-compat-panel__footer { border-block-start: 1px solid var(--hf-color-border); }

@media (max-width: 1100px) {
  .hf-dashboard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-dashboard__primary-grid, .hf-dashboard__secondary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hf-page-header { align-items: stretch; flex-direction: column; margin-block-end: var(--hf-space-5); }
  .hf-page-header__action { inline-size: 100%; }
  .hf-dashboard { gap: var(--hf-space-4); }
  .hf-dashboard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-3); }
  .hf-stat-card { grid-template-columns: 1fr auto; gap: var(--hf-space-2); padding: var(--hf-space-4); }
  .hf-stat-card__icon { inline-size: 2.5rem; block-size: 2.5rem; grid-row: 1 / span 2; }
  .hf-stat-card__copy { grid-column: 1 / -1; grid-row: 2; }
  .hf-stat-card__arrow { display: none; }
  .hf-stat-card__value { font-size: 1.2rem; }
  .hf-stat-card__label { white-space: normal; font-size: .8rem; }
  .hf-dashboard__primary-grid, .hf-dashboard__secondary-grid { grid-template-columns: 1fr; gap: var(--hf-space-4); }
  .hf-service-mini-grid { grid-template-columns: 1fr; gap: .75rem; border: 0; overflow: visible; }
  .hf-service-mini { grid-template-columns: 1fr; align-items: stretch; gap: .625rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); }
  .hf-recent-card { padding: .875rem; border-block-start: 0; border-radius: var(--hf-radius-md); }
  .hf-dashboard-panel.hf-card, .hf-credit-card { padding: var(--hf-space-4); }
  .hf-dashboard-panel__header { align-items: start; }
  .hf-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-quick-action { min-block-size: 5.25rem; grid-template-columns: 1fr; align-content: center; justify-items: start; }
  .hf-quick-action__copy small, .hf-quick-action__arrow { display: none; }
  .hf-expiry-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hf-expiry-item > :last-child { display: none; }
  .hf-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-list-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--hf-space-2); }
  .hf-list-row__amount, .hf-list-row__date { grid-column: 1; }
  .hf-list-row .hf-badge { grid-column: 2; grid-row: 1; }
  .hf-list-row__arrow { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}