.client-ui {
  --ink: var(--mf-black);
  --ink2: var(--mf-charcoal);
  --muted: var(--mf-text-muted);
  --line: var(--mf-border);
  --bg: var(--mf-surface);
  --white: var(--mf-white);
  --radius: var(--mf-radius-lg);
  --shadow: var(--mf-shadow);
  background:
    radial-gradient(circle at 50% -120px, rgba(154,116,66,.1), transparent 330px),
    var(--mf-surface);
}
.client-ui .page, .client-ui .access-page { position: relative; }
.client-ui .page { padding-top: 24px; }
.client-ui .page-header { margin-bottom: 24px; }
.client-ui .page-header h1 { max-width: 340px; color: var(--mf-black); font-weight: 720; }
.client-ui .brand-sub { color: var(--mf-gold-deep); }
.client-ui .privacy-dot { background: var(--mf-gold); box-shadow: 0 0 0 5px var(--mf-gold-soft); }
.client-ui .progress-card, .client-ui .section-block, .client-ui .account-card,
.client-ui .list-card, .client-ui .benefit-card, .client-ui .access-card {
  border-color: var(--mf-border); box-shadow: var(--mf-shadow);
}
.client-ui .progress-card { position: relative; overflow: hidden; }
.client-ui .progress-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--mf-gold); }
.client-ui .progress-number strong { font-weight: 760; }
.client-ui .stamp { background: #eeece7; border-color: #e5e1da; }
.client-ui .stamp.filled { background: var(--mf-gold); border-color: var(--mf-gold-deep); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.client-ui .count-pill { background: var(--mf-gold-soft); color: var(--mf-gold-deep); }
.client-ui .primary-button { background: var(--mf-black); }
.client-ui .primary-button:hover { background: #292929; }
.client-ui .secondary-button { border: 1px solid #ddd9d1; background: white; }
.client-ui .bottom-nav { border-color: var(--mf-border); box-shadow: 0 -10px 30px rgba(17,17,17,.035); }
.client-ui .nav-item { min-height: 48px; justify-content: center; border-radius: 10px; }
.client-ui .nav-item.is-active { color: var(--mf-gold-deep); background: #faf6ef; }
.client-ui .nav-icon { font-size: 19px; }
.client-ui .history-marker.positive { background: var(--mf-success); }
.client-ui .history-marker.benefit { background: var(--mf-gold); }
.client-ui .benefit-card:not(.is-muted) { border-color: #dfd1bd; background: linear-gradient(145deg, white, #fcf8f1); }
.client-ui .status-badge { background: var(--mf-gold-soft); color: var(--mf-gold-deep); }
.client-ui .muted-badge { background: #eeece7; color: var(--mf-text-muted); }
.client-ui .empty-state, .client-ui .empty-inline { border-style: dashed; background: var(--mf-surface-soft); }
.client-ui .access-page { justify-content: center; padding-top: 34px; padding-bottom: 34px; }
.client-ui .access-page > .brand { margin-left: 4px; }
.client-ui .access-card { margin-top: 38px; }
.client-ui .access-card input:focus { border-color: var(--mf-gold); box-shadow: var(--mf-focus); }
.client-ui .notice { border: 1px solid var(--mf-border); background: var(--mf-surface-soft); }
.client-ui .claim-error { border-color: #f2d3d0; background: var(--mf-danger-soft); color: var(--mf-danger); }
.client-ui .pilot-note { border-color: #f1dfb7; background: var(--mf-warning-soft); color: var(--mf-warning); }
.client-ui .success-mark { background: var(--mf-success); }
.client-ui .balance-confirm { background: var(--mf-gold-soft); }
.client-ui .qr-grid { border-color: #eee8de; }
.client-ui .qr-grid::before, .client-ui .qr-grid::after { border-color: #d8c6aa; }
.client-ui button:focus-visible, .client-ui a:focus-visible, .client-ui input:focus-visible { outline: 2px solid var(--mf-gold-deep); outline-offset: 3px; }

@media (max-width: 390px) {
  .client-ui .page { padding-left: 17px; padding-right: 17px; }
  .client-ui .progress-card, .client-ui .section-block { padding: 20px; }
  .client-ui .progress-number strong { font-size: 42px; }
}