:root {
  --af-ink: #17211c;
  --af-muted: #68736c;
  --af-line: rgba(23, 33, 28, 0.11);
  --af-paper: #fffef9;
  --af-wash: #f5f5ee;
  --af-accent: #d85e18;
  --af-green: #2e7250;
  --af-shadow: 0 22px 70px rgba(30, 37, 31, 0.1);
}

.affiliate-portal {
  background:
    radial-gradient(circle at 14% 0%, rgba(216, 94, 24, 0.09), transparent 28rem),
    linear-gradient(180deg, #faf9f3 0%, #f1f2eb 100%);
  color: var(--af-ink);
}

.affiliate-portal [hidden] {
  display: none !important;
}

.affiliate-portal .site-header {
  background: rgba(250, 249, 243, 0.86);
  backdrop-filter: blur(16px);
}

.af-auth-shell {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 72px 20px 96px;
}

.af-auth-card,
.af-access-card {
  width: min(100%, 480px);
  background: var(--af-paper);
  border: 1px solid var(--af-line);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--af-shadow);
}

.af-kicker,
.af-eyebrow {
  color: var(--af-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.af-auth-card h1,
.af-access-card h1,
.af-dashboard-header h1 {
  margin: 10px 0 12px;
  color: var(--af-ink);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.af-lead,
.af-access-card p {
  margin: 0 0 28px;
  color: var(--af-muted);
  line-height: 1.65;
}

.af-auth-form {
  display: grid;
  gap: 9px;
}

.af-auth-form label {
  margin-top: 8px;
  color: var(--af-ink);
  font-size: 0.79rem;
  font-weight: 700;
}

.af-auth-heading {
  color: var(--af-ink);
  font-size: 1rem;
}

.af-auth-copy {
  margin: 0 0 4px;
  color: var(--af-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.af-auth-form input,
.af-share-control input {
  width: 100%;
  border: 1px solid var(--af-line);
  border-radius: 12px;
  background: #fff;
  color: var(--af-ink);
  font: inherit;
  padding: 13px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.af-auth-form input:focus,
.af-share-control input:focus {
  outline: none;
  border-color: var(--af-accent);
  box-shadow: 0 0 0 4px rgba(216, 94, 24, 0.1);
}

.af-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  padding: 10px 17px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.af-button:hover { transform: translateY(-1px); }
.af-button:disabled { cursor: wait; opacity: 0.62; transform: none; }
.af-button-primary { margin-top: 12px; background: var(--af-accent); color: #fff; }
.af-button-secondary { width: 100%; border: 1px solid var(--af-line); background: transparent; color: var(--af-ink); }
.af-button-dark { background: var(--af-ink); color: #fff; white-space: nowrap; }

.af-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--af-muted);
  font-size: 0.72rem;
}

.af-auth-divider::before,
.af-auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--af-line); }
.af-fine { margin: 18px 0 0; color: var(--af-muted); font-size: 0.76rem; line-height: 1.55; text-align: center; }
.af-fine a { color: var(--af-accent); font-weight: 700; }

.af-alert {
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(180, 45, 35, 0.18);
  border-radius: 10px;
  background: rgba(180, 45, 35, 0.06);
  color: #a6342d;
  font-size: 0.82rem;
  line-height: 1.45;
}

.af-alert.is-success {
  border-color: rgba(46, 114, 80, 0.22);
  background: rgba(46, 114, 80, 0.07);
  color: var(--af-green);
}

.af-dashboard {
  min-height: calc(100vh - 150px);
  padding: 54px 20px 100px;
}

.af-dashboard-inner,
.af-access-card { margin: 0 auto; }
.af-dashboard-inner { width: min(1180px, 100%); }
.af-access-card { margin-top: 80px; text-align: left; }
.af-access-help { margin: 18px 0 0 !important; font-size: 0.76rem; }

.af-loading {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--af-muted);
  font-size: 0.88rem;
}

.af-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--af-line);
  border-top-color: var(--af-accent);
  border-radius: 50%;
  animation: af-spin 0.75s linear infinite;
}

@keyframes af-spin { to { transform: rotate(360deg); } }

.af-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.af-dashboard-header p { margin: 0; color: var(--af-muted); }
.af-status { border-radius: 999px; padding: 7px 12px; background: rgba(46, 114, 80, 0.1); color: var(--af-green); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.af-status.is-paused { background: rgba(182, 124, 25, 0.1); color: #9b6817; }
.af-status.is-disabled { background: rgba(180, 45, 35, 0.08); color: #a6342d; }

.af-share-card {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.9fr);
  align-items: center;
  gap: 34px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 20px;
  background: var(--af-accent);
  color: #fff;
  box-shadow: 0 18px 45px rgba(216, 94, 24, 0.18);
}

.af-share-card .af-eyebrow { color: rgba(255, 255, 255, 0.7); }
.af-share-card h2 { margin: 4px 0 7px; color: #fff; font-size: 1.55rem; }
.af-share-card p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.87rem; }
.af-share-control { display: flex; gap: 8px; }
.af-share-control input { border-color: rgba(255,255,255,.35); background: rgba(255, 255, 255, 0.96); }

.af-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.af-metric,
.af-panel {
  border: 1px solid var(--af-line);
  border-radius: 16px;
  background: var(--af-paper);
  box-shadow: 0 8px 28px rgba(30, 37, 31, 0.045);
}

.af-metric { min-height: 145px; display: flex; flex-direction: column; padding: 20px; }
.af-metric span { color: var(--af-muted); font-size: 0.74rem; font-weight: 700; }
.af-metric strong { margin: auto 0 4px; color: var(--af-ink); font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.af-metric small { color: var(--af-muted); font-size: 0.68rem; }
.af-metric-emphasis { border-color: rgba(46, 114, 80, 0.24); background: #f7fbf6; }
.af-metric-emphasis strong { color: var(--af-green); }

.af-ledger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.72fr);
  gap: 18px;
}

.af-panel { padding: clamp(20px, 3vw, 28px); overflow: hidden; }
.af-panel-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 17px; }
.af-panel h2 { margin: 4px 0 0; color: var(--af-ink); font-size: 1.25rem; }
.af-panel-total { color: var(--af-muted); font-size: 0.76rem; white-space: nowrap; }
.af-table-wrap { overflow-x: auto; }
.af-panel table { width: 100%; border-collapse: collapse; min-width: 570px; }
.af-panel th { padding: 10px 8px; border-bottom: 1px solid var(--af-line); color: var(--af-muted); font-size: 0.66rem; text-align: left; text-transform: uppercase; letter-spacing: 0.07em; }
.af-panel td { padding: 13px 8px; border-bottom: 1px solid rgba(23, 33, 28, 0.07); color: var(--af-ink); font-size: 0.78rem; }
.af-panel tbody tr:last-child td { border-bottom: 0; }
.af-panel .af-num { text-align: right; font-variant-numeric: tabular-nums; }
.af-event-name { font-weight: 700; text-transform: capitalize; }
.af-pill { display: inline-flex; border-radius: 999px; padding: 3px 7px; background: var(--af-wash); color: var(--af-muted); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.af-pill.is-payable, .af-pill.is-paid { background: rgba(46, 114, 80, 0.09); color: var(--af-green); }
.af-pill.is-reversed { background: rgba(180, 45, 35, 0.07); color: #a6342d; }
.af-negative { color: #a6342d !important; }
.af-empty { margin: 22px 0 0; color: var(--af-muted); font-size: 0.82rem; }

.af-terms dl { margin: 20px 0; }
.af-terms dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--af-line); }
.af-terms dt { color: var(--af-muted); font-size: 0.76rem; }
.af-terms dd { margin: 0; color: var(--af-ink); font-size: 0.78rem; font-weight: 800; text-align: right; }
.af-terms p { color: var(--af-muted); font-size: 0.73rem; line-height: 1.55; }
.af-terms .af-disclaimer { padding: 12px; border-radius: 10px; background: var(--af-wash); }
.af-payouts { margin-top: 18px; }

[data-theme="dark"] .affiliate-portal {
  --af-ink: #eef2ec;
  --af-muted: #9da89f;
  --af-line: rgba(238, 242, 236, 0.11);
  --af-paper: #171b18;
  --af-wash: #202521;
  background: radial-gradient(circle at 14% 0%, rgba(216, 94, 24, 0.13), transparent 28rem), #111411;
}

[data-theme="dark"] .affiliate-portal .site-header { background: rgba(17, 20, 17, 0.86); }
[data-theme="dark"] .af-auth-form input,
[data-theme="dark"] .af-share-control input { background: #202521; color: var(--af-ink); }
[data-theme="dark"] .af-metric-emphasis { background: #17221a; }

@media (max-width: 900px) {
  .af-share-card,
  .af-ledger-grid { grid-template-columns: 1fr; }
  .af-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .af-dashboard { padding: 36px 14px 76px; }
  .af-dashboard-header { align-items: flex-start; flex-direction: column; }
  .af-share-control { flex-direction: column; }
  .af-metrics { grid-template-columns: 1fr 1fr; }
  .af-metric { min-height: 125px; padding: 16px; }
  .af-metric:last-child { grid-column: 1 / -1; }
  .af-panel { border-radius: 14px; padding: 18px 14px; }
  .af-panel-heading { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .af-spinner { animation-duration: 1.5s; }
  .af-button { transition: none; }
}