.dashboard-preview {
  padding: var(--space-6);
  background: var(--color-stone-100);
}

.dashboard-preview__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: end;
}

.dashboard-preview__header h3,
.dashboard-preview__header p {
  margin-bottom: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat-card {
  position: relative;
  min-height: 10rem;
  padding: var(--space-5);
  border: var(--border);
  background: var(--color-white);
}

.stat-card::before {
  position: absolute;
  top: 0;
  right: var(--space-5);
  left: var(--space-5);
  height: 2px;
  background: var(--color-gold-500);
  content: "";
}

.stat-card__label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-stone-600);
  font-size: var(--text-sm);
  font-weight: 700;
}

.stat-card__value {
  display: block;
  color: var(--color-charcoal-950);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
}

.stat-card__change {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-green-700);
  font-size: var(--text-xs);
  font-weight: 750;
}

.stat-card__change--neutral {
  color: var(--color-stone-600);
}

@media (max-width: 44rem) {
  .dashboard-preview {
    padding: var(--space-4);
  }

  .dashboard-preview__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: auto;
  }
}

/* Customer account prototype */
.account-body { background: var(--color-stone-100); }
.account-header { position: sticky; top: 0; z-index: 30; border-bottom: var(--border); background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); }
.account-header__inner { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.account-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.account-session { color: var(--color-stone-600); font-size: var(--text-sm); }
.account-menu { display: none; }
.account-shell { width: min(100% - 2rem, 90rem); margin-inline: auto; display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-7); }
.account-sidebar { align-self: start; position: sticky; top: 7rem; padding: var(--space-5); border: var(--border); background: var(--color-white); box-shadow: var(--shadow-sm); }
.account-sidebar__label { margin: 0 0 var(--space-4); color: var(--color-stone-600); font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.account-nav { display: grid; gap: var(--space-2); }
.account-nav__link { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: .65rem .8rem; border-left: 3px solid transparent; color: var(--color-charcoal-900); font-weight: 700; text-decoration: none; }
.account-nav__link:hover { background: var(--color-stone-100); }
.account-nav__link[aria-current="page"] { border-left-color: var(--color-gold-500); background: var(--color-gold-100); }
.account-nav__link--signout { margin-top: var(--space-3); border-top: var(--border); color: var(--color-red-700); }
.account-main { min-width: 0; }
.account-page-header { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); margin-bottom: var(--space-6); }
.account-page-header h1, .account-page-header p { margin-bottom: 0; }
.account-page-header__copy { max-width: 46rem; }
.account-grid { display: grid; gap: var(--space-5); }
.account-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-card { padding: var(--space-5); border: var(--border); background: var(--color-white); box-shadow: var(--shadow-sm); }
.account-card h2, .account-card h3 { margin-bottom: var(--space-3); }
.account-card__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.account-card__header h2, .account-card__header p { margin-bottom: 0; }
.account-stat { min-height: 9rem; position: relative; }
.account-stat::before { position: absolute; inset: 0 auto auto 0; width: 3.5rem; height: 3px; background: var(--color-gold-500); content: ""; }
.account-stat__label { display: block; margin: var(--space-3) 0 var(--space-2); color: var(--color-stone-600); font-size: var(--text-sm); font-weight: 700; }
.account-stat__value { display: block; color: var(--color-charcoal-950); font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.1; }
.account-stat__meta { display: block; margin-top: var(--space-2); color: var(--color-stone-600); font-size: var(--text-xs); }
.account-section { margin-top: var(--space-6); }
.account-table-wrap { overflow-x: auto; border: var(--border); background: var(--color-white); box-shadow: var(--shadow-sm); }
.account-table { width: 100%; min-width: 48rem; border-collapse: collapse; }
.account-table th, .account-table td { padding: .95rem 1rem; border-bottom: var(--border); text-align: left; vertical-align: middle; }
.account-table th { background: var(--color-stone-100); color: var(--color-stone-600); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; }
.account-table tr:last-child td { border-bottom: 0; }
.account-table a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 750; }
.account-progress { height: .55rem; overflow: hidden; margin-top: var(--space-3); background: var(--color-stone-200); }
.account-progress span { display: block; height: 100%; background: var(--color-gold-500); }
.account-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.account-list__item { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--border); }
.account-list__item:last-child { padding-bottom: 0; border-bottom: 0; }
.account-list__item strong, .account-list__item span { display: block; }
.account-list__item span { color: var(--color-stone-600); font-size: var(--text-sm); }
.detail-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6); }
.detail-list { margin: 0; }
.detail-list div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-3); padding-block: .75rem; border-bottom: var(--border); }
.detail-list dt { color: var(--color-stone-600); font-weight: 700; }
.detail-list dd { margin: 0; }
.certificate-list { display: grid; gap: var(--space-4); }
.certificate-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-5); border: var(--border); background: var(--color-white); }
.certificate-item p { margin: .25rem 0 0; color: var(--color-stone-600); }
.account-form { display: grid; gap: var(--space-5); }
.account-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.account-form__full { grid-column: 1 / -1; }
.account-form .form-field { margin: 0; }
.account-toast { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60; max-width: 24rem; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-green-700); background: var(--color-charcoal-950); color: var(--color-white); box-shadow: var(--shadow-lg); }
.account-overlay { display: none; }

@media (max-width: 70rem) {
  .account-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .account-session { display: none; }
  .account-menu { display: inline-flex; }
  .account-shell { display: block; padding-block: var(--space-5); }
  .account-sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(19rem, 86vw); transform: translateX(-105%); transition: transform 180ms ease; overflow-y: auto; }
  .account-sidebar[data-open="true"] { transform: translateX(0); }
  .account-overlay { position: fixed; z-index: 40; inset: 0; display: block; width: 100%; border: 0; background: rgb(18 18 18 / 58%); }
  .account-page-header, .account-card__header { align-items: flex-start; flex-direction: column; }
  .detail-grid, .account-grid--two { grid-template-columns: 1fr; }
}

@media (max-width: 38rem) {
  .account-header__inner { min-height: 4.5rem; }
  .account-header .brand__name small { display: none; }
  .account-grid--stats, .account-form__grid { grid-template-columns: 1fr; }
  .account-form__full { grid-column: auto; }
  .certificate-item { grid-template-columns: 1fr; }
  .certificate-item .btn { width: 100%; }
  .detail-list div { grid-template-columns: 1fr; gap: .2rem; }
  .account-toast { right: var(--space-3); bottom: var(--space-3); left: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .account-sidebar { transition: none; }
}