:root {
  --mf-black: #111111;
  --mf-charcoal: #333333;
  --mf-gray: #666666;
  --mf-border: #e9e7e2;
  --mf-white: #ffffff;
  --mf-surface: #f7f6f2;
  --mf-surface-soft: #fbfaf7;
  --mf-text-muted: #706e68;
  --mf-gold: #9a7442;
  --mf-gold-deep: #75562f;
  --mf-gold-soft: #f4ecdf;
  --mf-success: #287447;
  --mf-success-soft: #eaf5ee;
  --mf-warning: #8a641d;
  --mf-warning-soft: #fff4dc;
  --mf-danger: #9a3d36;
  --mf-danger-soft: #fcecea;
  --mf-info: #3f627d;
  --mf-info-soft: #edf3f7;
  --mf-radius-sm: 10px;
  --mf-radius-md: 16px;
  --mf-radius-lg: 22px;
  --mf-shadow: 0 12px 40px rgba(17, 17, 17, 0.045);
  --mf-focus: 0 0 0 3px rgba(154, 116, 66, 0.22);
  color: var(--mf-black);
  background: var(--mf-surface);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--mf-surface); color: var(--mf-black); }
body, button, input, select, textarea { font: inherit; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--mf-gold-deep); outline-offset: 3px; }
::selection { background: var(--mf-gold-soft); color: var(--mf-black); }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  padding: 11px 16px; border-radius: 10px; background: var(--mf-black); color: white;
  text-decoration: none; font-weight: 750;
}
.skip-link:focus { top: 16px; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.mf-brand { display: inline-flex; flex-direction: column; width: max-content; line-height: 1; text-decoration: none; }
.mf-brand__name { font-size: 18px; font-weight: 850; letter-spacing: .145em; color: var(--mf-black); }
.mf-brand__module { margin-top: 5px; font-size: 9px; font-weight: 800; letter-spacing: .28em; color: var(--mf-gold-deep); }
.mf-brand--inverse .mf-brand__name { color: white; }
.mf-brand--inverse .mf-brand__module { color: #d3b17f; }

.eyebrow {
  margin: 0 0 7px; color: var(--mf-gold-deep); font-size: 11px; font-weight: 800;
  letter-spacing: .15em; line-height: 1.3; text-transform: uppercase;
}
.muted { color: var(--mf-text-muted); line-height: 1.55; }
.technical-id { color: var(--mf-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }

.mf-card {
  background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow);
}
.mf-card--flat { box-shadow: none; }

.mf-button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; cursor: pointer;
  background: var(--mf-black); color: white; text-decoration: none; font-weight: 750; line-height: 1.2;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mf-button:hover { background: #262626; }
.mf-button:active { transform: translateY(1px); }
.mf-button--secondary { background: white; color: var(--mf-charcoal); border-color: #d8d5cf; }
.mf-button--secondary:hover { background: var(--mf-surface-soft); }
.mf-button--quiet { background: transparent; color: var(--mf-charcoal); border-color: transparent; }
.mf-button--danger { background: var(--mf-danger); }
.mf-button[disabled], button[disabled] { cursor: not-allowed; opacity: .55; transform: none; }

.mf-badge {
  display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%;
  border-radius: 999px; padding: 5px 9px; background: #efeeea; color: #55534e;
  font-size: 10px; font-weight: 850; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.mf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .72; }
.mf-badge--gold, .mf-badge--available { background: var(--mf-gold-soft); color: var(--mf-gold-deep); }
.mf-badge--success, .mf-badge--active, .mf-badge--redeemed, .mf-badge--committed { background: var(--mf-success-soft); color: var(--mf-success); }
.mf-badge--warning, .mf-badge--rejected { background: var(--mf-warning-soft); color: var(--mf-warning); }
.mf-badge--danger, .mf-badge--failed, .mf-badge--blocked { background: var(--mf-danger-soft); color: var(--mf-danger); }

.mf-alert { padding: 13px 15px; border: 1px solid var(--mf-border); border-radius: 13px; background: var(--mf-surface-soft); color: var(--mf-charcoal); line-height: 1.5; }
.mf-alert--success { background: var(--mf-success-soft); border-color: #d7eadf; color: #235e3b; }
.mf-alert--warning { background: var(--mf-warning-soft); border-color: #f1dfb7; color: #725315; }
.mf-alert--danger { background: var(--mf-danger-soft); border-color: #f2d3d0; color: #842f29; }

.mf-empty { padding: 32px 20px; border: 1px dashed #d9d6cf; border-radius: var(--mf-radius-md); background: var(--mf-surface-soft); text-align: center; color: var(--mf-text-muted); }
.mf-empty__icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; background: var(--mf-gold-soft); color: var(--mf-gold-deep); font-weight: 850; }
.mf-empty strong { display: block; margin-bottom: 5px; color: var(--mf-charcoal); }

.mf-skeleton { border-radius: 8px; background: linear-gradient(90deg, #eceae5 25%, #f8f7f4 50%, #eceae5 75%); background-size: 200% 100%; animation: mf-shimmer 1.5s infinite; }
@keyframes mf-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.mf-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-md); background: white; }
.mf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mf-table th { padding: 12px 14px; background: var(--mf-surface-soft); color: var(--mf-text-muted); text-align: left; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mf-table td { padding: 14px; border-top: 1px solid var(--mf-border); color: var(--mf-charcoal); vertical-align: top; }
.mf-table tbody tr:hover { background: #fcfbf8; }
.mf-table a { font-weight: 750; text-decoration-color: #bca27d; text-underline-offset: 3px; }

.mf-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: end; }
.mf-field, .mf-form-grid p { display: grid; gap: 7px; margin: 0; min-width: 0; }
.mf-field label, .mf-form-grid label { color: var(--mf-charcoal); font-size: 12px; font-weight: 750; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: 44px; border: 1px solid #d7d4ce; border-radius: 11px;
  padding: 10px 12px; outline: none; background: white; color: var(--mf-black);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--mf-gold); box-shadow: var(--mf-focus); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mf-black); }

.mf-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; color: var(--mf-text-muted); font-size: 12px; }
.mf-pagination form { display: flex; align-items: center; gap: 8px; }
.mf-pagination input { width: 78px !important; }

details.mf-disclosure { border: 1px solid var(--mf-border); border-radius: 14px; background: white; }
details.mf-disclosure > summary { cursor: pointer; list-style: none; padding: 15px 17px; font-weight: 750; }
details.mf-disclosure > summary::-webkit-details-marker { display: none; }
details.mf-disclosure > summary::after { content: "+"; float: right; color: var(--mf-gold-deep); font-size: 18px; }
details.mf-disclosure[open] > summary::after { content: "−"; }
details.mf-disclosure[open] > summary { border-bottom: 1px solid var(--mf-border); }
.mf-disclosure__body { padding: 17px; }

.error-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.error-card { width: min(100%, 520px); padding: clamp(28px, 6vw, 52px); text-align: center; }
.error-code { margin: 0 0 12px; color: var(--mf-gold-deep); font-size: 12px; font-weight: 850; letter-spacing: .18em; }
.error-card h1 { margin: 0 0 12px; font-size: clamp(28px, 7vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.error-card .mf-brand { margin: 0 auto 32px; }
.error-card .mf-button { margin-top: 16px; }

@media (max-width: 720px) {
  .mf-table--responsive thead { display: none; }
  .mf-table--responsive, .mf-table--responsive tbody, .mf-table--responsive tr, .mf-table--responsive td { display: block; width: 100%; }
  .mf-table--responsive tr { padding: 10px 14px; border-top: 1px solid var(--mf-border); }
  .mf-table--responsive tr:first-child { border-top: 0; }
  .mf-table--responsive td { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 10px; padding: 6px 0; border: 0; }
  .mf-table--responsive td::before { content: attr(data-label); color: var(--mf-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
}
