/* ============================================================
   másfollowers — affiliate-pages.css
   Editorial Premium for the affiliate flow:
     /afiliados                  → landing
     /afiliados/login            → login form
     /afiliados/registro         → register form
     /afiliados/dashboard        → main dashboard
     /afiliados/estadisticas     → analytics
     /afiliados/enlaces          → link generator + QR + share
     /afiliados/materiales       → marketing material + tips
     /afiliados/pagos            → balance + history + modal
     /afiliados/perfil           → personal data + password
     /afiliados/pending          → pending review state
     /afiliados/suspended        → suspended state
   Replaces the legacy assets/css/afiliados.css template look.
   Hero is delivered by heroes.css (.mf-content-hero band).
   Depends on theme_style.css for tokens.

   IMPORTANT: preserves every JS hook id/class.
   ============================================================ */

.affiliate-page,
.affiliate-page *{ box-sizing:border-box; }

.affiliate-page{
  background:var(--mf-surface);
  color:var(--mf-ink);
  font-family:var(--mf-font);
}

/* Inner container reused across the affiliate flow */
.aff-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:900px){ .aff-container{ padding:0 32px; } }

/* =========================================================
   1. WORK BAND — main canvas under the hero
   ========================================================= */
.aff-work{
  background:var(--mf-surface-2);
  border-top:1px solid var(--mf-line);
  padding:48px 0 80px;
}
@media (min-width:900px){ .aff-work{ padding:64px 0 112px; } }

/* =========================================================
   2. STAT CARDS — KPI grid (dashboard, stats, links)
   ========================================================= */
.aff-stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:32px;
}
@media (min-width:560px){ .aff-stats-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media (min-width:1100px){ .aff-stats-grid{ grid-template-columns:repeat(4, 1fr); gap:18px; } }

.aff-stat{
  position:relative;
  isolation:isolate;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--mf-shadow-1);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.aff-stat::before{
  content:"";
  position:absolute;
  top:-1px; right:-1px;
  width:120px; height:120px;
  background:radial-gradient(circle at top right, rgba(232,199,150,.16), transparent 70%);
  border-radius:0 18px 0 0;
  pointer-events:none;
  z-index:0;
}
.aff-stat:hover{
  border-color:var(--mf-accent);
  transform:translateY(-2px);
  box-shadow:0 18px 36px -16px rgba(14,92,58,.20);
}
.aff-stat > *{ position:relative; z-index:1; }

.aff-stat-icon{
  width:40px; height:40px;
  border-radius:10px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  display:grid; place-items:center;
  font-size:20px;
  flex:none;
}
.aff-stat-icon svg{ width:20px; height:20px; }

.aff-stat-label{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  margin:0;
}
.aff-stat-value{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:28px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--mf-ink);
  margin:0;
}
@media (min-width:900px){ .aff-stat-value{ font-size:32px; } }

.aff-stat-hints{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
}
.aff-stat-hint{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:999px;
  font-size:11px;
  font-weight:500;
  color:var(--mf-ink-soft);
}
.aff-stat-hint b{ color:var(--mf-ink); font-weight:600; }
.aff-stat-hint--accent{
  background:var(--mf-accent-soft);
  border-color:rgba(14,92,58,.20);
  color:var(--mf-accent-deep);
}

/* CTA inside a stat card (e.g. "Solicitar pago" when balance is OK) */
.aff-stat-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:9px 14px;
  border-radius:999px;
  background:var(--mf-accent);
  color:#FFFFFF;
  font:600 12.5px/1 var(--mf-font);
  text-decoration:none;
  width:fit-content;
  transition:background .15s ease, transform .15s ease;
}
.aff-stat-cta:hover{
  background:var(--mf-accent-deep);
  color:#FFFFFF;
  transform:translateY(-1px);
}
.aff-stat-note{
  margin:0;
  font-size:11.5px;
  color:var(--mf-ink-muted);
}

/* =========================================================
   3. QUICK NAV — sticky-ish row of dashboard shortcuts
   ========================================================= */
.aff-quicknav{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:24px;
}
@media (min-width:560px){ .aff-quicknav{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:900px){ .aff-quicknav{ grid-template-columns:repeat(5, 1fr); gap:10px; } }

.aff-quicknav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:14px;
  color:var(--mf-ink);
  text-decoration:none;
  text-align:center;
  font:600 13px/1.2 var(--mf-font);
  transition:border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.aff-quicknav-item:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent-deep);
  background:var(--mf-accent-soft);
  transform:translateY(-2px);
  box-shadow:var(--mf-shadow-2);
}
.aff-quicknav-icon{
  font-size:22px;
  line-height:1;
}
.aff-quicknav-item.is-active{
  background:var(--mf-accent);
  color:#FFFFFF;
  border-color:var(--mf-accent);
}

/* =========================================================
   4. EDITORIAL CARD — generic card for sections
   ========================================================= */
.aff-card{
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:18px;
  padding:24px;
  box-shadow:var(--mf-shadow-1);
  margin-bottom:24px;
}
@media (min-width:900px){ .aff-card{ padding:32px; margin-bottom:28px; } }

.aff-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--mf-line-soft);
}
.aff-card-head__text{ flex:1; min-width:0; }
.aff-card-head h2,
.aff-card-head h3{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--mf-ink);
  margin:0 0 4px;
  line-height:1.25;
}
@media (min-width:640px){
  .aff-card-head h2,
  .aff-card-head h3{ font-size:20px; }
}
.aff-card-head h2 em,
.aff-card-head h3 em{
  font-family:var(--mf-font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--mf-accent);
}
.aff-card-head p{
  font-size:13.5px;
  color:var(--mf-ink-soft);
  margin:0;
  line-height:1.55;
}
.aff-card-head__action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  font:600 12.5px/1 var(--mf-font);
  color:var(--mf-ink-soft);
  text-decoration:none;
  flex:none;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.aff-card-head__action:hover{
  color:var(--mf-accent);
  border-color:var(--mf-accent);
  background:var(--mf-accent-soft);
}

/* =========================================================
   5. REFERRAL LINK — main + per-service
   ========================================================= */
.aff-referral{
  display:flex;
  align-items:stretch;
  gap:0;
  border:1px solid var(--mf-line);
  border-radius:12px;
  background:var(--mf-surface-2);
  overflow:hidden;
}
.aff-referral input[type="text"]{
  flex:1;
  min-width:0;
  height:48px;
  background:transparent;
  border:0;
  padding:0 14px;
  font:500 13.5px/1 var(--mf-font-mono);
  font-feature-settings:"tnum";
  color:var(--mf-ink);
  letter-spacing:-.005em;
  outline:none;
}
.aff-copy-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 18px;
  background:var(--mf-accent);
  border:0;
  color:#FFFFFF;
  font:600 13px/1 var(--mf-font);
  letter-spacing:-.005em;
  cursor:pointer;
  flex:none;
  transition:background .15s ease;
  height:48px;
}
.aff-copy-btn:hover{ background:var(--mf-accent-deep); }
.aff-copy-btn.copied{
  background:#3DD68C;
  color:#0A4A2E;
}

/* =========================================================
   6. TABLE — conversions / payouts / countries / devices
   ========================================================= */
.aff-table-wrap{
  overflow-x:auto;
  border:1px solid var(--mf-line);
  border-radius:14px;
  background:#FFFFFF;
}
.aff-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  min-width:520px;
}
.aff-table thead{
  background:var(--mf-surface-2);
}
.aff-table th{
  padding:11px 14px;
  text-align:left;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  border-bottom:1px solid var(--mf-line);
}
.aff-table td{
  padding:13px 14px;
  border-bottom:1px solid var(--mf-line-soft);
  color:var(--mf-ink);
  vertical-align:middle;
}
.aff-table tr:last-child td{ border-bottom:0; }
.aff-table tr:hover td{ background:var(--mf-surface-2); }

.aff-table .num{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.aff-table .commission{ color:var(--mf-accent-deep); font-weight:600; }

/* Status badges */
.aff-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.aff-badge--success{ background:rgba(14,92,58,.10); color:var(--mf-accent-deep); border:1px solid rgba(14,92,58,.22); }
.aff-badge--warning{ background:rgba(232,199,150,.16); color:#8B6630; border:1px solid rgba(232,199,150,.40); }
.aff-badge--danger { background:rgba(178,58,58,.10); color:#8C2828; border:1px solid rgba(178,58,58,.30); }
.aff-badge--info   { background:var(--mf-surface-2); color:var(--mf-ink-soft); border:1px solid var(--mf-line); }

/* =========================================================
   7. EMPTY STATE
   ========================================================= */
.aff-empty{
  text-align:center;
  padding:48px 24px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:18px;
}
.aff-empty-icon{
  display:inline-grid;
  place-items:center;
  width:64px; height:64px;
  border-radius:18px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  font-size:30px;
  margin:0 auto 16px;
}
.aff-empty h3{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--mf-ink);
  margin:0 0 8px;
}
.aff-empty p{
  font-size:14px;
  color:var(--mf-ink-soft);
  margin:0 0 18px;
  max-width:48ch;
  margin-left:auto;
  margin-right:auto;
  line-height:1.55;
}

/* =========================================================
   8. FORMS (login, register, profile)
   ========================================================= */
.aff-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.aff-form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.aff-form-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink);
}
.aff-form-label svg{
  width:16px; height:16px;
  color:var(--mf-ink-muted);
  flex:none;
}
.aff-form-input,
.aff-form-select{
  appearance:none;
  width:100%;
  height:48px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:12px;
  padding:0 16px;
  font:500 15px/1 var(--mf-font);
  color:var(--mf-ink);
  letter-spacing:-.005em;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.aff-form-input::placeholder{
  color:var(--mf-ink-muted);
  opacity:.7;
}
.aff-form-input:focus,
.aff-form-select:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 4px var(--mf-accent-glow);
}
.aff-form-select{
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7F77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

.aff-form-hint{
  font-size:12.5px;
  color:var(--mf-ink-muted);
  font-weight:400;
}

.aff-form-submit{
  appearance:none;
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:54px;
  padding:0 24px;
  background:var(--mf-accent);
  border:1px solid var(--mf-accent);
  border-radius:12px;
  color:#FFFFFF;
  font:600 15px/1 var(--mf-font);
  letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:0 12px 24px -8px rgba(14,92,58,.30);
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.aff-form-submit:hover{
  background:var(--mf-accent-deep);
  border-color:var(--mf-accent-deep);
  transform:translateY(-1px);
  box-shadow:0 18px 30px -10px rgba(14,92,58,.42);
}
.aff-form-submit:active{ transform:translateY(0); }
.aff-form-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.aff-form-foot{
  margin-top:16px;
  padding-top:18px;
  border-top:1px solid var(--mf-line-soft);
  text-align:center;
  font-size:14px;
  color:var(--mf-ink-soft);
}
.aff-form-foot a{
  color:var(--mf-accent) !important;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.aff-form-foot a:hover{ border-bottom-color:var(--mf-accent); }

/* Auth pages — center the card */
.aff-auth{
  max-width:520px;
  margin:0 auto;
}

/* Benefits box (login/register) */
.aff-benefits{
  margin-top:24px;
  padding:18px 20px;
  background:var(--mf-accent-soft);
  border:1px solid rgba(14,92,58,.18);
  border-radius:14px;
}
.aff-benefits h3{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-accent-deep);
  margin:0 0 10px;
}
.aff-benefits ul{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.aff-benefits li{
  position:relative;
  padding-left:24px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--mf-ink);
}
.aff-benefits li::before{
  content:"";
  position:absolute;
  left:0; top:3px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--mf-accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:11px;
  background-position:center;
  background-repeat:no-repeat;
}

/* Password requirements */
.aff-pwd-requirements{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin-top:8px;
  padding:12px 14px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:10px;
}
@media (min-width:480px){ .aff-pwd-requirements{ grid-template-columns:1fr 1fr; } }
.aff-pwd-req{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--mf-ink-muted);
  transition:color .15s ease;
}
.aff-pwd-req .icon{
  display:inline-grid; place-items:center;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--mf-line);
  color:#FFFFFF;
  font-size:9px;
  font-weight:700;
}
.aff-pwd-req.is-ok{ color:var(--mf-accent-deep); }
.aff-pwd-req.is-ok .icon{ background:var(--mf-accent); }

/* Alerts (form validation) */
#alertContainer:not(:empty){ margin-bottom:14px; }
.aff-alert{
  padding:12px 16px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:500;
  margin-bottom:14px;
}
.aff-alert--success{ background:rgba(14,92,58,.10); color:var(--mf-accent-deep); border:1px solid rgba(14,92,58,.22); }
.aff-alert--error  { background:rgba(178,58,58,.08); color:#8C2828; border:1px solid rgba(178,58,58,.25); }

/* =========================================================
   9. NETWORK FILTERS (links page)
   ========================================================= */
.aff-network-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.aff-network-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:999px;
  color:var(--mf-ink-soft);
  font:600 12.5px/1 var(--mf-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.aff-network-btn img{ width:16px; height:16px; object-fit:contain; }
.aff-network-btn:hover{ border-color:var(--mf-line-strong); color:var(--mf-ink); }
.aff-network-btn.active{
  background:var(--mf-accent);
  color:#FFFFFF;
  border-color:var(--mf-accent);
}

/* Per-service link cards grid */
.aff-services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:640px){ .aff-services-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; } }
@media (min-width:1100px){ .aff-services-grid{ grid-template-columns:repeat(3, 1fr); } }

.aff-service-card{
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.aff-service-card:hover{
  border-color:var(--mf-line-strong);
  box-shadow:var(--mf-shadow-2);
}
.aff-service-card__head{
  display:flex;
  align-items:center;
  gap:10px;
}
.aff-service-card__icon{
  width:36px; height:36px;
  border-radius:10px;
  background:var(--mf-accent-soft);
  display:grid; place-items:center;
  flex:none;
}
.aff-service-card__icon img{ width:22px; height:22px; object-fit:contain; }
.aff-service-card__title{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--mf-ink);
  line-height:1.2;
  margin:0;
}
.aff-service-card__net{
  font-size:11px;
  color:var(--mf-ink-muted);
  margin:2px 0 0;
}

/* =========================================================
   10. SOCIAL SHARE GRID
   ========================================================= */
.aff-share-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:560px){ .aff-share-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:900px){ .aff-share-grid{ grid-template-columns:repeat(3, 1fr); } }

.aff-share-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:12px;
  color:var(--mf-ink);
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aff-share-btn:hover{
  border-color:var(--mf-line-strong);
  transform:translateY(-1px);
  box-shadow:var(--mf-shadow-2);
  color:var(--mf-ink);
}
.aff-share-btn__icon{
  width:36px; height:36px;
  border-radius:10px;
  display:grid; place-items:center;
  background:var(--mf-surface-2);
  color:var(--mf-ink);
  flex:none;
}
.aff-share-btn[data-net="facebook"] .aff-share-btn__icon{ background:rgba(24,119,242,.10); color:#1877F2; }
.aff-share-btn[data-net="twitter"]  .aff-share-btn__icon{ background:rgba(0,0,0,.06); color:#000000; }
.aff-share-btn[data-net="whatsapp"] .aff-share-btn__icon{ background:rgba(37,211,102,.10); color:#25D366; }
.aff-share-btn[data-net="telegram"] .aff-share-btn__icon{ background:rgba(0,136,204,.10); color:#0088CC; }
.aff-share-btn[data-net="linkedin"] .aff-share-btn__icon{ background:rgba(10,102,194,.10); color:#0A66C2; }
.aff-share-btn[data-net="email"]    .aff-share-btn__icon{ background:var(--mf-accent-soft); color:var(--mf-accent); }
.aff-share-btn__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.aff-share-btn__txt strong{
  font-size:13.5px;
  font-weight:600;
  color:var(--mf-ink);
  letter-spacing:-.005em;
}
.aff-share-btn__txt span{
  font-size:11.5px;
  color:var(--mf-ink-muted);
}

/* =========================================================
   11. QR + Templates (links page)
   ========================================================= */
.aff-twocol{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:900px){ .aff-twocol{ grid-template-columns:1fr 1fr; gap:24px; } }

.aff-qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px;
}
.aff-qr-info{
  text-align:center;
  font-size:13.5px;
  color:var(--mf-ink-soft);
  margin:0;
  max-width:36ch;
}
.aff-qr-canvas{
  display:grid;
  place-items:center;
  padding:18px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:12px;
}
.aff-qr-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.aff-templates{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.aff-template{
  padding:14px 16px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:12px;
}
.aff-template h4{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--mf-ink);
  margin:0 0 6px;
}
.aff-template-preview{
  font-size:13px;
  line-height:1.55;
  color:var(--mf-ink-soft);
  margin:0 0 10px;
  white-space:pre-wrap;
}
.aff-template-textarea{
  width:100%;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:10px;
  padding:12px 14px;
  font:500 13px/1.55 var(--mf-font-mono);
  color:var(--mf-ink);
  resize:vertical;
  outline:none;
}
.aff-template-textarea:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 3px var(--mf-accent-glow);
}

/* Generic small button — copy/regenerate/download */
.aff-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  font:600 12.5px/1 var(--mf-font);
  letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.aff-btn--primary{
  background:var(--mf-accent);
  color:#FFFFFF;
  border-color:var(--mf-accent);
  box-shadow:0 8px 18px -8px rgba(14,92,58,.35);
}
.aff-btn--primary:hover{
  background:var(--mf-accent-deep);
  color:#FFFFFF;
  transform:translateY(-1px);
}
.aff-btn--ghost{
  background:#FFFFFF;
  color:var(--mf-ink-soft);
  border-color:var(--mf-line);
}
.aff-btn--ghost:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
}
.aff-btn--copy.copied,
.aff-btn--ghost.copied{
  background:#3DD68C;
  color:#0A4A2E;
  border-color:#3DD68C;
}

/* =========================================================
   12. STRATEGIES / TIPS (materials page)
   ========================================================= */
.aff-strategies{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:560px){ .aff-strategies{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1100px){ .aff-strategies{ grid-template-columns:repeat(4, 1fr); } }

.aff-strategy{
  padding:18px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:14px;
  text-align:left;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aff-strategy:hover{
  border-color:var(--mf-accent);
  transform:translateY(-2px);
  box-shadow:var(--mf-shadow-2);
}
.aff-strategy-icon{
  display:inline-grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  font-size:18px;
  margin-bottom:10px;
}
.aff-strategy h4{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--mf-ink);
  margin:0 0 4px;
}
.aff-strategy p{
  font-size:12.5px;
  color:var(--mf-ink-soft);
  line-height:1.5;
  margin:0;
}

/* Tips list (materials page) */
.aff-tips{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.aff-tip{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:12px;
}
.aff-tip-num{
  flex:none;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--mf-accent);
  color:#FFFFFF;
  font:700 13.5px/32px var(--mf-font-mono);
  text-align:center;
}
.aff-tip-content h4{
  font-size:14px;
  font-weight:600;
  color:var(--mf-ink);
  letter-spacing:-.005em;
  margin:0 0 3px;
}
.aff-tip-content p{
  font-size:13px;
  color:var(--mf-ink-soft);
  line-height:1.55;
  margin:0;
}

/* =========================================================
   13. PAYOUTS — balance showcase + modal
   ========================================================= */
.aff-balance{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(232,199,150,.18), transparent 55%),
    linear-gradient(180deg, #0A4A2E 0%, #0E5C3A 60%, #0C5234 100%);
  color:#FFFFFF;
  border-radius:20px;
  padding:32px 28px;
  margin-bottom:28px;
  display:flex;
  flex-direction:column;
  gap:22px;
  overflow:hidden;
}
@media (min-width:640px){
  .aff-balance{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:36px 36px;
  }
}
.aff-balance__main{ display:flex; flex-direction:column; gap:6px; }
.aff-balance__label{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  margin:0;
}
.aff-balance__value{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:46px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
  color:#E8C796;
  margin:0;
}
@media (min-width:900px){ .aff-balance__value{ font-size:56px; } }
.aff-balance__note{
  font-size:13px;
  color:rgba(255,255,255,.72);
  margin:0;
}
.aff-balance__note b{ color:#FFFFFF; font-weight:600; }

.aff-balance__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 24px;
  border-radius:999px;
  background:#FFFFFF;
  color:var(--mf-accent-deep);
  font:600 14.5px/1 var(--mf-font);
  text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease;
  border:0;
  cursor:pointer;
  flex:none;
}
.aff-balance__cta:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 38px -10px rgba(0,0,0,.55);
  color:var(--mf-accent-deep);
}
.aff-balance__insufficient{
  font-size:13px;
  color:rgba(255,255,255,.78);
  margin:0;
  text-align:right;
  flex:none;
}

/* Payment method display row */
.aff-payment-display{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:16px;
}
@media (min-width:640px){ .aff-payment-display{ grid-template-columns:auto 1fr; column-gap:24px; row-gap:10px; } }
.aff-payment-display dt{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  margin:0;
}
.aff-payment-display dd{
  font-size:14px;
  color:var(--mf-ink);
  margin:0;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  letter-spacing:-.005em;
}

/* Modal — payout request */
.aff-modal{
  position:fixed;
  inset:0;
  background:rgba(15,20,17,.72);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9000;
}
.aff-modal.is-open{ display:flex; }
.aff-modal-content{
  width:100%;
  max-width:480px;
  background:#FFFFFF;
  border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  overflow:hidden;
}
.aff-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--mf-line-soft);
}
.aff-modal-head h3{
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--mf-ink);
  margin:0;
}
.aff-modal-close{
  appearance:none;
  background:transparent;
  border:0;
  width:32px; height:32px;
  border-radius:50%;
  color:var(--mf-ink-muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.aff-modal-close:hover{ background:var(--mf-surface-2); color:var(--mf-ink); }
.aff-modal-body{ padding:22px; }
.aff-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:18px;
  border-top:1px solid var(--mf-line-soft);
  margin-top:18px;
}

.aff-currency-input{
  position:relative;
}
.aff-currency-input .prefix{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  font-family:var(--mf-font-mono);
  font-size:15px;
  color:var(--mf-ink-muted);
  pointer-events:none;
}
.aff-currency-input input{
  padding-left:32px;
}

.aff-summary-box{
  margin-top:14px;
  padding:14px 16px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:10px;
}
.aff-summary-box p{
  font-size:13px;
  color:var(--mf-ink);
  margin:0 0 4px;
}
.aff-summary-box p:last-child{ margin-bottom:0; }
.aff-summary-box strong{ color:var(--mf-ink-soft); font-weight:600; }

/* =========================================================
   14. STATUS PAGES (pending / suspended)
   ========================================================= */
.aff-status{
  max-width:680px;
  margin:0 auto;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:20px;
  padding:36px 28px;
  text-align:center;
  box-shadow:var(--mf-shadow-2);
}
@media (min-width:640px){ .aff-status{ padding:48px 40px; } }

.aff-status-icon{
  display:inline-grid;
  place-items:center;
  width:72px; height:72px;
  border-radius:20px;
  font-size:32px;
  margin:0 auto 18px;
}
.aff-status-icon--warning{ background:rgba(232,199,150,.16); color:#8B6630; }
.aff-status-icon--danger { background:rgba(178,58,58,.10); color:#8C2828; }

.aff-status h2{
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--mf-ink);
  margin:0 0 12px;
}
.aff-status h2 em{
  font-family:var(--mf-font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--mf-accent);
}
.aff-status-desc{
  font-size:15px;
  line-height:1.65;
  color:var(--mf-ink-soft);
  margin:0 0 24px;
  max-width:50ch;
  margin-left:auto;
  margin-right:auto;
}

.aff-status-info{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:12px;
  margin-bottom:24px;
}
.aff-status-info svg{ color:var(--mf-accent); flex:none; }
.aff-status-info-text{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.aff-status-info-label{
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
}
.aff-status-info-value{
  font-size:14px;
  font-family:var(--mf-font-mono);
  color:var(--mf-ink);
  font-weight:600;
}

.aff-status-steps{
  text-align:left;
  margin:24px 0;
}
.aff-status-steps h3{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink);
  margin:0 0 14px;
  text-align:center;
}
.aff-status-steps ol{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.aff-status-steps li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:10px;
  font-size:13.5px;
  color:var(--mf-ink);
}
.aff-status-steps li .num{
  flex:none;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--mf-accent);
  color:#FFFFFF;
  font:700 12px/28px var(--mf-font-mono);
  text-align:center;
}

.aff-status-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--mf-ink-muted);
  margin:16px 0 0;
}
.aff-status-note svg{ flex:none; color:var(--mf-accent); }

.aff-contact-box{
  margin:18px 0;
}
.aff-contact-mail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  background:var(--mf-accent);
  color:#FFFFFF !important;
  border-radius:999px;
  font:600 14px/1 var(--mf-font);
  text-decoration:none;
  box-shadow:0 12px 24px -8px rgba(14,92,58,.35);
  transition:background .15s ease, transform .15s ease;
}
.aff-contact-mail:hover{
  background:var(--mf-accent-deep);
  color:#FFFFFF !important;
  transform:translateY(-1px);
}

/* =========================================================
   15. DASHBOARD WELCOME — small ribbon under hero
   ========================================================= */
.aff-welcome{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:12px;
  margin-bottom:24px;
}
.aff-welcome-code{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--mf-ink-soft);
}
.aff-welcome-code b{
  color:var(--mf-accent-deep);
  font-family:var(--mf-font-mono);
  font-weight:700;
  letter-spacing:.04em;
}
.aff-welcome-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
}
.aff-welcome-status .dot{
  width:6px; height:6px;
  border-radius:50%;
}
.aff-welcome-status.is-active .dot{ background:#3DD68C; box-shadow:0 0 0 3px rgba(61,214,140,.18); }
.aff-welcome-status.is-active{ color:var(--mf-accent-deep); }
.aff-welcome-status.is-pending .dot{ background:#E8C796; box-shadow:0 0 0 3px rgba(232,199,150,.22); }
.aff-welcome-status.is-pending{ color:#8B6630; }
.aff-welcome-actions{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}

/* Logout link */
.aff-logout{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:transparent;
  border:1px solid var(--mf-line);
  color:var(--mf-ink-soft);
  font:500 12.5px/1 var(--mf-font);
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.aff-logout:hover{
  border-color:#B23A3A;
  color:#B23A3A;
  background:rgba(178,58,58,.06);
}

/* =========================================================
   16. Misc utilities
   ========================================================= */
.aff-section-title{
  font-size:13px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  margin:24px 0 14px;
}

/* =========================================================
   17. Aliases & extensions used by the rewritten views
   Keeps the design system stable while introducing
   simpler/clearer markup names.
   ========================================================= */

/* Container narrow variant for forms / status pages */
.aff-container--narrow{ max-width:760px; }

/* Network filter — also accept .is-active modifier */
.aff-network-btn.is-active{
  border-color:var(--mf-accent);
  background:var(--mf-accent-soft);
  color:var(--mf-accent-deep);
}

/* Service card — alias for .aff-service-card */
.aff-service{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 16px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:14px;
  transition:border-color .18s ease, transform .18s ease;
}
.aff-service:hover{
  border-color:var(--mf-line-strong);
  transform:translateY(-1px);
}
.aff-service-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.aff-service-icon{
  width:36px; height:36px;
  display:grid; place-items:center;
  background:#FFFFFF;
  border:1px solid var(--mf-line-soft);
  border-radius:10px;
  flex:none;
}
.aff-service-icon img{ width:22px; height:22px; object-fit:contain; }
.aff-service-meta{ min-width:0; }
.aff-service-meta h4{
  font-size:14px;
  font-weight:600;
  color:var(--mf-ink);
  margin:0 0 2px;
  letter-spacing:-.005em;
}
.aff-service-meta p{
  font-size:12px;
  color:var(--mf-ink-muted);
  margin:0;
}
.aff-referral--compact{ }
.aff-referral--compact input[type="text"]{ font-size:12.5px; padding:9px 12px; }
.aff-referral--compact .aff-copy-btn{ padding:9px 12px; font-size:11.5px; }

/* Share buttons — alias-style API: .aff-share + variant classes */
.aff-share{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:14px;
  text-decoration:none;
  color:var(--mf-ink);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  font-family:inherit;
}
button.aff-share{ width:100%; text-align:left; }
.aff-share:hover{
  transform:translateY(-1px);
  border-color:var(--mf-line-strong);
  box-shadow:var(--mf-shadow-1);
  color:var(--mf-ink);
}
.aff-share-icon{
  flex:none;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--mf-surface-2);
}
.aff-share--facebook .aff-share-icon{ background:rgba(24,119,242,.10); color:#1877F2; }
.aff-share--twitter  .aff-share-icon{ background:rgba(0,0,0,.06);     color:#000000; }
.aff-share--whatsapp .aff-share-icon{ background:rgba(37,211,102,.10);color:#25D366; }
.aff-share--telegram .aff-share-icon{ background:rgba(0,136,204,.10); color:#0088CC; }
.aff-share--linkedin .aff-share-icon{ background:rgba(10,102,194,.10);color:#0A66C2; }
.aff-share--email    .aff-share-icon{ background:var(--mf-accent-soft); color:var(--mf-accent); }
.aff-share-text{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.aff-share-text strong{
  font-size:13.5px;
  font-weight:600;
  color:var(--mf-ink);
}
.aff-share-text span{
  font-size:12px;
  color:var(--mf-ink-muted);
}

/* QR — extra wrappers used by links.php */
.aff-qr-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.aff-qr-empty p{
  font-size:13.5px;
  color:var(--mf-ink-soft);
  margin:0;
  max-width:36ch;
}
.aff-qr-preview{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.aff-qr-frame{
  display:grid;
  place-items:center;
  padding:18px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:12px;
}

/* Templates — additional structure for materials.php */
.aff-templates--full{ gap:18px; }
.aff-template--lg{ padding:18px 20px; }
.aff-template-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.aff-template-head h4{ margin:0; }
.aff-template-tag{
  font-size:11px;
  color:var(--mf-ink-muted);
  background:var(--mf-surface);
  border:1px solid var(--mf-line-soft);
  padding:4px 9px;
  border-radius:999px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Tip body alias (markup uses .aff-tip-body — CSS originally had .aff-tip-content) */
.aff-tip-body{ min-width:0; }
.aff-tip-body h4{
  font-size:14px;
  font-weight:600;
  color:var(--mf-ink);
  letter-spacing:-.005em;
  margin:0 0 3px;
}
.aff-tip-body p{
  font-size:13px;
  color:var(--mf-ink-soft);
  line-height:1.55;
  margin:0;
}

/* Balance — flat-modifier markup used by payouts.php */
.aff-balance-grain,
.aff-balance-rail,
.aff-balance-gleam{ display:none; } /* hooks reserved; visuals ride on .aff-balance gradient */
.aff-balance-info{ display:flex; flex-direction:column; gap:6px; }
.aff-balance-label{
  font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.65); margin:0;
}
.aff-balance-amount{
  font-family:var(--mf-font-mono); font-feature-settings:"tnum";
  font-size:44px; font-weight:600; letter-spacing:-.02em;
  color:#FFFFFF; line-height:1; margin:0;
}
@media (min-width:900px){ .aff-balance-amount{ font-size:56px; } }
.aff-balance-note{
  font-size:13px; color:rgba(255,255,255,.78); margin:0;
}
.aff-balance-note b{ color:#FFFFFF; font-weight:600; }
.aff-balance-action{ display:flex; align-items:center; }
.aff-balance-pending{
  font-size:13px; color:rgba(255,255,255,.85); margin:0;
  padding:10px 14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
}
.aff-balance-pending b{ color:#FFFFFF; font-weight:600; }

/* Larger button variant */
.aff-btn--lg{ padding:13px 20px; font-size:13.5px; }

/* Payment display rows (key/val markup) */
.aff-payment-display{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px 0 0;
}
.aff-payment-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px dashed var(--mf-line-soft);
}
.aff-payment-row:last-child{ border-bottom:0; }
.aff-payment-key{
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  flex:none;
  min-width:120px;
}
.aff-payment-val{
  font-size:14px;
  color:var(--mf-ink);
  font-weight:500;
}
.aff-payment-val.mono{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
}

/* Modal — backdrop + dialog wrappers used by payouts.php */
.aff-modal{
  position:fixed; inset:0; z-index:1000;
  align-items:center; justify-content:center;
  padding:20px;
}
.aff-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(15,28,22,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.aff-modal-dialog{
  position:relative;
  background:#FFFFFF;
  border-radius:18px;
  width:100%;
  max-width:520px;
  box-shadow:var(--mf-shadow-3);
  overflow:hidden;
  z-index:1;
}
.aff-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--mf-line-soft);
}
.aff-modal-head h3{
  font-size:16px;
  font-weight:600;
  color:var(--mf-ink);
  margin:0;
}
.aff-modal-close{
  border:0; background:transparent;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:8px;
  color:var(--mf-ink-muted);
  cursor:pointer;
}
.aff-modal-close:hover{ background:var(--mf-surface-2); color:var(--mf-ink); }
.aff-modal-body{ padding:22px; }
.aff-modal-summary{
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:12px;
  padding:14px 16px;
  margin:14px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.aff-modal-summary .aff-payment-row{ padding:6px 0; border-bottom:1px dashed var(--mf-line-soft); }
.aff-modal-summary .aff-payment-row:last-child{ border-bottom:0; }
.aff-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}

/* Currency input wrapper used in the payout modal */
.aff-form-currency{
  position:relative;
  display:flex;
  align-items:stretch;
}
.aff-form-currency-prefix{
  display:grid;
  place-items:center;
  padding:0 14px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line);
  border-right:0;
  border-radius:12px 0 0 12px;
  font:600 14px/1 var(--mf-font-mono);
  color:var(--mf-ink-soft);
}
.aff-form-currency .aff-form-input{
  border-radius:0 12px 12px 0;
  flex:1;
}
.aff-form-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--mf-ink-muted);
}

/* Form layout helpers */
.aff-form-row{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:560px){
  .aff-form-row{ grid-template-columns:1fr 1fr; gap:16px; }
}
.aff-form-divider{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  margin:8px 0 4px;
  padding-top:14px;
  border-top:1px dashed var(--mf-line-soft);
}

/* Empty state — inline variant inside cards */
.aff-empty--inline{
  margin:0;
  padding:32px 20px;
  background:var(--mf-surface-2);
  border-radius:12px;
}

/* Status pages — additional wrappers used by pending/suspended */
.aff-status--pending,
.aff-status--danger{ /* use .aff-status base; coloring is on .aff-status-icon variant */ }
.aff-status--pending .aff-status-icon{ background:rgba(232,199,150,.16); color:#8B6630; }
.aff-status--danger  .aff-status-icon{ background:rgba(178,58,58,.10); color:#8C2828; }

.aff-status-lede{
  font-size:15px;
  line-height:1.65;
  color:var(--mf-ink-soft);
  margin:0 auto 24px;
  max-width:50ch;
}
.aff-status-mail{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:12px;
  margin-bottom:24px;
}
.aff-status-mail svg{ color:var(--mf-accent); flex:none; }
.aff-status-mail-text{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.aff-status-mail-label{
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
}
.aff-status-mail-value{
  font-size:14px;
  color:var(--mf-ink);
  font-weight:600;
}
.aff-status-mail-value.mono{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
}
.aff-status-step-num{
  flex:none;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--mf-accent);
  color:#FFFFFF;
  font:700 12px/28px var(--mf-font-mono);
  text-align:center;
}
.aff-status-contact{
  margin:18px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.aff-status-contact-label{
  font-size:11.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
}
.aff-status-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:10px;
}
.aff-status-note a{
  color:var(--mf-accent-deep);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.aff-status-note a:hover{ border-bottom-color:var(--mf-accent); }