@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto-light-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #161616;
  background: #f4f4f2;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f4f4f2; }
button, input, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

.account-header {
  min-height: 68px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border-bottom: 1px solid #dededb;
}

.wordmark { color: #111; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 300; font-size: 20px; text-decoration: none; }
.store-link, .text-button { color: #333; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.text-button { padding: 4px 0; border: 0; background: transparent; cursor: pointer; }

.account-content { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 72px; }
.auth-card { width: min(520px, 100%); margin: 0 auto; padding: 30px; background: #fff; border: 1px solid #dededb; border-radius: 6px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: 30px; line-height: 1.15; }
h2 { margin-bottom: 20px; font-size: 20px; }
.muted { color: #686863; line-height: 1.5; }
.eyebrow { display: block; margin-bottom: 8px; color: #686863; font-size: 13px; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 22px; border-bottom: 1px solid #d7d7d3; }
.tab { padding: 12px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }
.tab[aria-selected="true"] { border-bottom-color: #111; font-weight: 700; }
.auth-form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; font-size: 14px; }
.field input, .field select { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #bdbdb8; border-radius: 4px; background: #fff; }
.field input:focus, .field select:focus { outline: 2px solid #111; outline-offset: 2px; }
.birth-date-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.birth-date-field legend { margin-bottom: 7px; padding: 0; font-size: 14px; }
.birth-date-segments { display: grid; grid-template-columns: 72px 12px 72px 12px 110px; gap: 6px; align-items: center; }
.birth-date-segments span { color: #686863; text-align: center; }
.birth-date-segments input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 10px; border: 1px solid #bdbdb8; border-radius: 4px; background: #fff; text-align: center; }
.birth-date-segments input:focus { outline: 2px solid #111; outline-offset: 2px; }
.birth-date-field .field-hint { margin: 7px 0 0; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; font-size: 13px; line-height: 1.4; }
.check input { width: 18px; height: 18px; margin: 0; }
.check span { min-width: 0; }
.check a { color: inherit; overflow-wrap: anywhere; text-underline-offset: 2px; }
.primary { min-height: 48px; padding: 11px 18px; border: 1px solid #111; border-radius: 4px; background: #111; color: #fff; cursor: pointer; font-weight: 700; }
.primary:disabled { opacity: .5; cursor: wait; }
.secondary { min-height: 42px; padding: 9px 14px; border: 1px solid #a9a9a4; border-radius: 4px; background: #fff; color: #161616; cursor: pointer; }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.form-error { min-height: 18px; margin: 0; color: #a21b1b; font-size: 13px; }

.dashboard { display: grid; gap: 20px; }
.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metric--level { align-content: start; }
.level-facts { margin: 16px 0 0; padding: 16px 0 0 18px; border-top: 1px solid #ddd; color: #5f5f5f; font-size: 14px; line-height: 1.5; }
.metric, .panel { padding: 24px; background: #fff; border: 1px solid #dededb; border-radius: 6px; }
.panel.identity-warning { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; border-color: #e6cf9a; background: #fff8e6; }
.identity-warning__icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: #f2d99b; color: #4c3a00; font-size: 18px; font-weight: 700; line-height: 1; }
.identity-warning__content { min-width: 0; }
.identity-warning p { margin: 8px 0 0; }
.metric { display: grid; align-content: start; gap: 9px; min-height: 112px; }
.metric span { color: #686863; font-size: 13px; }
.metric strong { font-size: 22px; }
.metric--referral strong { overflow-wrap: anywhere; }
.metric-description { margin: 7px 0 0; color: #686863; font-size: 13px; line-height: 1.45; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-heading h2 { margin-bottom: 0; }
.redemption-stack { display: grid; gap: 20px; }
.redemption-panel { display: grid; gap: 18px; }
.redemption-panel > .muted { max-width: 720px; margin-bottom: 0; }
.promo-terms-warning { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid #e6cf9a; border-radius: 4px; background: #fff8e6; }
.promo-terms-warning__icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: #f2d99b; color: #4c3a00; font-size: 18px; font-weight: 700; line-height: 1; }
.promo-terms-warning__content { min-width: 0; }
.promo-terms-warning__content p { margin: 6px 0 0; }
.redemption-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.redemption-form .field-hint, .redemption-form .form-error { grid-column: 1 / -1; }
.redemption-form .primary { min-width: 190px; }
.field-hint { min-height: 18px; margin: 0; color: #686863; font-size: 13px; }
.promo-code-row { display: flex; align-items: center; gap: 12px; }
.promo-code { display: block; width: min(420px, 100%); padding: 14px 16px; border: 1px dashed #8d8d88; border-radius: 4px; background: #f7f7f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; overflow-wrap: anywhere; user-select: all; }
.promo-amount { font-size: 22px; }
.promo-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #686863; font-size: 13px; }
.copy-status { min-height: 18px; color: #686863; font-size: 13px; }
.promo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.promo-actions .form-error { flex-basis: 100%; }
.promo-help:disabled { opacity: .5; cursor: wait; }
.review-message { margin-bottom: 0; }
.promo-history { display: grid; }
.promo-history-row { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; border-top: 1px solid #e4e4e0; }
.promo-history-row:first-child { border-top: 0; }
.promo-history-row > div { display: grid; gap: 4px; }
.promo-history-row code { overflow-wrap: anywhere; }
.promo-history-status { color: #686863; font-size: 13px; }
.order-list { display: grid; }
.order-row, .transaction-row { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e4e4e0; }
.order-row:first-child { border-top: 0; }
.order-row > div, .transaction-row > div { display: grid; gap: 6px; }
.transaction-list { display: grid; }
.transaction-row:first-child { border-top: 0; }
.credit { color: #21723b; }
.debit { color: #a21b1b; }
.adjustment { color: #6a5314; }
.adjustment-panel { display: grid; gap: 10px; border-left: 4px solid #b58a22; }
.adjustment-panel h2, .adjustment-panel .muted { margin: 0; }
.empty { margin: 0; padding: 20px 0; color: #686863; }
.referral-panel { display: grid; gap: 8px; }
.referral-panel .muted { margin: 0; }
.support-panel { display: grid; gap: 8px; }
.support-panel h2, .support-panel p { margin: 0; }
.support-email { color: #161616; font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 3px; }
.loyalty-guide { display: grid; gap: 18px; }
.loyalty-guide .panel-heading a { color: #333; font-size: 14px; }
.loyalty-guide__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding-left: 22px; line-height: 1.5; }
.account-actions { display: flex; justify-content: flex-end; }
.loading { min-height: 40vh; display: grid; place-items: center; color: #686863; }

@media (max-width: 700px) {
  .account-header { min-height: 60px; padding: 0 16px; }
  .account-content { width: min(100% - 24px, 560px); padding: 28px 0 52px; }
  .auth-card { padding: 22px 18px; }
  .birth-date-segments { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1.45fr); }
  h1 { font-size: 26px; }
  .summary-grid { grid-template-columns: 1fr; }
  .dashboard-heading { align-items: flex-start; }
  .metric, .panel { padding: 18px; }
  .redemption-form { grid-template-columns: 1fr; }
  .loyalty-guide .panel-heading { display: grid; gap: 10px; }
  .loyalty-guide__steps { grid-template-columns: 1fr; }
  .redemption-form .field-hint, .redemption-form .form-error { grid-column: 1; }
  .redemption-form .primary { width: 100%; }
  .promo-code-row { align-items: stretch; flex-direction: column; }
  .promo-code { width: 100%; font-size: 19px; }
  .promo-actions { align-items: stretch; flex-direction: column; }
  .promo-history-row { grid-template-columns: 1fr; padding: 12px 0; }
  .order-row, .transaction-row { align-items: flex-start; flex-direction: column; padding: 16px 0; }
}