.afar-dashboard {
  --afar-accent: #176b4d;
  --afar-ink: #17211d;
  --afar-muted: #68736d;
  --afar-line: #d9e1dc;
  --afar-soft: #f4f7f5;
  color: var(--afar-ink);
}

.afar-dashboard__header {
  align-items: end;
  border-bottom: 1px solid var(--afar-line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.afar-dashboard__header h2,
.afar-dashboard__header p { margin: 0; }
.afar-dashboard__header code { background: var(--afar-soft); border: 1px solid var(--afar-line); padding: 8px 10px; }
.afar-eyebrow { color: var(--afar-accent); font-size: 12px; font-weight: 750; letter-spacing: .1em; margin-bottom: 4px !important; text-transform: uppercase; }

.afar-tabs { border-bottom: 1px solid var(--afar-line); display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto; }
.afar-tabs a { border-bottom: 3px solid transparent; color: var(--afar-muted); font-weight: 650; padding: 10px 13px; text-decoration: none; white-space: nowrap; }
.afar-tabs a:hover,
.afar-tabs a:focus-visible { color: var(--afar-ink); }
.afar-tabs a[aria-current="page"] { border-bottom-color: var(--afar-accent); color: var(--afar-accent); }

.afar-metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.afar-metrics article { background: var(--afar-soft); border: 1px solid var(--afar-line); padding: 16px; }
.afar-metrics span,
.afar-metrics strong { display: block; }
.afar-metrics span { color: var(--afar-muted); font-size: 12px; font-weight: 700; margin-bottom: 7px; text-transform: uppercase; }
.afar-metrics strong { font-size: clamp(18px, 2vw, 24px); }

.afar-panel { border: 1px solid var(--afar-line); margin-bottom: 18px; padding: clamp(16px, 3vw, 24px); }
.afar-panel h3 { margin-top: 0; }
.afar-panel__heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.afar-panel__heading p { color: var(--afar-muted); margin: 4px 0 18px; }
.afar-link-callout { align-items: center; background: var(--afar-soft); display: flex; gap: 24px; justify-content: space-between; }
.afar-link-callout h3,
.afar-link-callout p { margin: 0; }
.afar-link-callout p { color: var(--afar-muted); margin-top: 5px; }
.afar-link-callout .button { flex: 0 0 auto; }
.afar-discount-pill,
.afar-status { border-radius: 999px; display: inline-block; font-size: 12px; font-weight: 750; padding: 5px 9px; white-space: nowrap; }
.afar-discount-pill { background: #e1f1e8; color: #105d3f; }

.afar-code-form { display: grid; gap: 15px; grid-template-columns: 1fr 1.35fr auto; }
.afar-settings-form { align-items: end; display: flex; gap: 12px; max-width: 520px; }
.afar-settings-form label { flex: 1; }
.afar-settings-form label span { display: block; font-weight: 650; margin-bottom: 6px; }
.afar-settings-form input { box-sizing: border-box; width: 100%; }
.afar-code-form label > span:first-child { display: block; font-weight: 650; margin-bottom: 6px; }
.afar-code-form input { box-sizing: border-box; width: 100%; }
.afar-code-form .button { align-self: end; min-height: 42px; }
.afar-code-input { align-items: center; border: 1px solid var(--afar-line); display: flex; }
.afar-code-input strong { background: var(--afar-soft); border-right: 1px solid var(--afar-line); padding: 9px 10px; }
.afar-code-input input { border: 0 !important; min-width: 0; }

.afar-code-list article,
.afar-batch-list article { align-items: center; border-top: 1px solid var(--afar-line); display: flex; gap: 18px; justify-content: space-between; padding: 15px 0; }
.afar-code-list article:first-child,
.afar-batch-list article:first-child { border-top: 0; }
.afar-code-list article > div:first-child,
.afar-code-list a,
.afar-code-list small,
.afar-batch-list span,
.afar-batch-list strong,
.afar-batch-list small { display: block; }
.afar-code-list a { overflow-wrap: anywhere; }
.afar-code-list small,
.afar-batch-list small { color: var(--afar-muted); }
.afar-code-details > span { color: var(--afar-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.afar-code-details strong { margin: 2px 0 5px; }
.afar-code-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; }

.afar-status { background: #e9eeeb; color: #455049; text-transform: capitalize; }
.afar-status--active,
.afar-status--eligible,
.afar-status--settled { background: #def2e7; color: #10603f; }
.afar-status--frozen,
.afar-status--pending,
.afar-status--batched { background: #f7edcf; color: #745a12; }
.afar-status--inactive,
.afar-status--exhausted,
.afar-status--invalid { background: #f8e1df; color: #8a2924; }

.afar-table-wrap { overflow-x: auto; }
.afar-table { border-collapse: collapse; min-width: 720px; width: 100%; }
.afar-table th,
.afar-table td { border-bottom: 1px solid var(--afar-line); padding: 12px 10px; text-align: left; vertical-align: top; }
.afar-table th { color: var(--afar-muted); font-size: 12px; text-transform: uppercase; }
.afar-row--invalid { background: #fff4f3; box-shadow: inset 4px 0 #b73b32; }
.afar-error { color: #8a2924; display: block; font-weight: 650; margin-top: 5px; }
.afar-initials { align-items: center; background: var(--afar-soft); border: 1px solid var(--afar-line); border-radius: 50%; display: inline-flex; font-size: 12px; font-weight: 750; height: 34px; justify-content: center; width: 34px; }
.afar-empty { color: var(--afar-muted); padding: 14px 0; }

.afar-batch-list article > div:last-child { align-items: end; display: flex; flex-direction: column; gap: 6px; }
.afar-batch-list code { background: var(--afar-soft); border: 1px solid var(--afar-line); padding: 5px 7px; }

@media (max-width: 800px) {
  .afar-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afar-code-form { grid-template-columns: 1fr; }
	.afar-settings-form { align-items: stretch; flex-direction: column; }
  .afar-code-form .button { justify-self: start; }
}

@media (max-width: 560px) {
  .afar-dashboard__header,
	.afar-link-callout,
  .afar-code-list article,
  .afar-batch-list article { align-items: stretch; flex-direction: column; }
  .afar-dashboard__header code { overflow-wrap: anywhere; }
  .afar-code-actions { flex-wrap: wrap; }
  .afar-batch-list article > div:last-child { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .afar-dashboard * { scroll-behavior: auto !important; }
}