/* Affiliate hub — rebuilt 1:1 from measurements of skinsflux.gg/affiliate */

.af-page {
  width: 100%;
  max-width: var(--content-width, 1792px);
  margin: 0 auto;
  padding: 24px 32px 64px;
  animation: af-page-in .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes af-page-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.af-page * { box-sizing: border-box }

/* ---- shared card shell ---- */
.af-card,
.af-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  padding: 24px;
  background: linear-gradient(#13131a, #0e0e11);
}
.af-card-head { display: flex; align-items: center; gap: 10px }
.af-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.af-card-mark {
  display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 8px; background: rgba(61, 255, 158, .1); color: #3dff9e;
}
.af-card-mark svg { width: 16px; height: 16px }
.af-card-title { margin: 0; color: #fff; font-size: 15px; font-weight: 800 }
.af-card-sub { margin: 2px 0 0; color: rgba(255, 255, 255, .4); font-size: 12px; font-weight: 400 }
.af-label {
  display: block; margin-bottom: 6px;
  color: rgba(255, 255, 255, .4); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.af-label-bonus { margin-left: 8px; color: #3dff9e; font-size: 12px; font-weight: 700; letter-spacing: .05em }
.af-hidden { display: none !important }
.af-strong-white { color: #fff; font-weight: 700 }
.af-strong-green { color: #3dff9e; font-weight: 700 }

/* ---- hero ---- */
.af-hero {
  background: linear-gradient(to bottom right, #0e0e12, #13131a, #0e0e12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.af-hero-line {
  position: absolute; left: 0; top: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--af-tier) 50%, transparent) 30%, var(--af-tier) 100%);
}
.af-hero-glow {
  position: absolute; right: -80px; top: -140px; width: 320px; height: 320px; border-radius: 9999px;
  background: radial-gradient(circle, var(--af-tier) 0%, transparent 70%);
  opacity: .1; filter: blur(64px); pointer-events: none;
}
.af-hero-row { position: relative; display: flex; align-items: center; gap: 20px }
.af-hero-avatar { position: relative; width: 72px; height: 72px; flex: none }
.af-hero-avatar img {
  width: 72px; height: 72px; border: 2px solid var(--af-tier); border-radius: 9999px; object-fit: cover; background: #18181b;
}
.af-hero-medal {
  position: absolute; right: -6px; bottom: -6px; display: flex; width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 2px solid var(--af-tier); border-radius: 9999px; background: #0a0a0d; color: var(--af-tier);
}
.af-hero-medal svg { width: 16px; height: 16px }
.af-hero-copy { min-width: 0; flex: 1 }
.af-hero-eyebrow { display: flex; align-items: center; gap: 8px }
.af-hero-hub { color: rgba(255, 255, 255, .4); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.af-hero-tier {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid color-mix(in srgb, var(--af-tier) 33%, transparent); border-radius: 6px; padding: 2px 8px;
  background: color-mix(in srgb, var(--af-tier) 8%, transparent);
  color: var(--af-tier); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.af-hero-tier svg { width: 12px; height: 12px }
.af-hero-title { margin: 4px 0 0; color: #fff; font-size: 26px; font-weight: 800; line-height: 1.27 }
.af-hero-name {
  background: linear-gradient(#fff 0%, var(--af-tier) 200%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.af-hero-note { margin: 4px 0 0; color: rgba(255, 255, 255, .5); font-size: 12px; font-weight: 400 }
.af-hero-note strong { color: rgba(255, 255, 255, .8); font-weight: 700 }

/* ---- stat cards ---- */
.af-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px }
.af-stat {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px;
  background: linear-gradient(#131316, #0e0e11);
  box-shadow: inset 2px 0 0 0 var(--af-accent);
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.af-stat:hover { border-color: rgba(255, 255, 255, .1) }
.af-stat-glow {
  position: absolute; right: -24px; top: -32px; width: 128px; height: 128px; border-radius: 9999px;
  background: var(--af-accent); opacity: .14; filter: blur(64px); pointer-events: none;
  transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
.af-stat:hover .af-stat-glow { opacity: .3 }
.af-stat-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px }
.af-stat-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px }
.af-stat-label { color: rgba(255, 255, 255, .4); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
.af-stat-value { color: #fff; font-size: 20px; font-weight: 800; line-height: 1 }
.af-stat-icon {
  display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center;
  border-radius: 8px; background: color-mix(in srgb, var(--af-accent) 10%, transparent); color: var(--af-accent);
}
.af-stat-icon svg { width: 16px; height: 16px }

/* ---- invite link ---- */
.af-invite-body { display: flex; flex-direction: column; gap: 12px; margin-top: 16px }
.af-field-row { display: flex; align-items: center; gap: 8px }
.af-input {
  width: 100%; height: 44px; min-width: 0; flex: 1;
  border: 1px solid #2a2a2e; border-radius: 8px; padding: 0 16px;
  background: #0c0c10; color: #fff; font-size: 13px; font-family: inherit;
  transition: border-color .3s, box-shadow .3s;
}
.af-input:focus { outline: none; border-color: rgba(61, 255, 158, .45); box-shadow: 0 0 0 3px rgba(61, 255, 158, .1) }
.af-input::placeholder { color: rgba(255, 255, 255, .28) }
.af-code-input { color: #3dff9e; font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
.af-primary {
  display: inline-flex; height: 44px; flex: none; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 4px; padding: 8px 16px;
  background: linear-gradient(#3dff9e, #23e78b);
  color: #070d0b; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: filter .15s, box-shadow .15s, opacity .15s;
}
.af-primary svg { width: 16px; height: 16px }
.af-primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 8px 24px -8px rgba(34, 197, 94, .55) }
.af-primary:disabled { opacity: .45; cursor: default }
.af-chips { display: flex; flex-wrap: wrap; gap: 8px }
.af-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid; border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-family: inherit; text-decoration: none; cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.af-chip svg { width: 14px; height: 14px }
.af-chip.twitter { border-color: rgba(14, 165, 233, .3); background: rgba(14, 165, 233, .1); color: #7dd3fc }
.af-chip.twitter:hover { background: rgba(14, 165, 233, .2) }
.af-chip.telegram { border-color: rgba(96, 165, 250, .3); background: rgba(96, 165, 250, .1); color: #93c5fd }
.af-chip.telegram:hover { background: rgba(96, 165, 250, .2) }
.af-chip.discord { border-color: rgba(129, 140, 248, .3); background: rgba(129, 140, 248, .1); color: #a5b4fc }
.af-chip.discord:hover { background: rgba(129, 140, 248, .2) }

/* ---- widget accordion ---- */
.af-widget { padding: 0 }
.af-widget-glow {
  position: absolute; right: -60px; top: -120px; width: 288px; height: 288px; border-radius: 9999px;
  background: radial-gradient(circle, #22c55e 0%, transparent 70%); opacity: .08; filter: blur(64px); pointer-events: none;
}
.af-widget-head {
  position: relative; display: flex; width: 100%; align-items: center; gap: 10px;
  border: 0; padding: 24px; background: transparent; text-align: left; cursor: pointer; font-family: inherit;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.af-widget-head:hover { background: rgba(255, 255, 255, .015) }
.af-widget-head > div:nth-child(2) { min-width: 0; flex: 1 }
.af-widget-chevron {
  display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .6); transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .2s;
}
.af-widget-chevron svg { width: 16px; height: 16px }
.af-widget.open .af-widget-chevron { transform: rotate(180deg); color: #3dff9e }
.af-widget-body { position: relative; overflow: hidden; height: 0; transition: height .29s cubic-bezier(.45, .05, .25, 1) }
.af-widget-inner { padding: 0 24px 24px }
.af-widget-body { transition-timing-function: linear(0,.011 8%,.041 15%,.093 22%,.164 30%,.254 37%,.366 44%,.481 51%,.601 58%,.720 66%,.813 73%,.888 80%,.948 87%,.981 94%,1) }
@keyframes af-reveal { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.af-divider { height: 1px; margin-bottom: 16px; background: rgba(255, 255, 255, .06) }
.af-widget-lead { margin: 0 0 16px; max-width: 900px; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.6 }
.af-embed {
  overflow-x: auto; margin: 0 0 12px;
  border: 1px solid #2a2a2e; border-radius: 8px; padding: 12px;
  background: #0c0c10; color: rgba(255, 255, 255, .8); font-size: 12px;
}
.af-embed code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre }
.af-embed-copy { height: 40px }
.af-preview {
  display: grid; min-height: 160px; place-items: center;
  border: 1px dashed rgba(255, 255, 255, .12); border-radius: 16px; padding: 16px;
  background: #0c0c10; color: rgba(255, 255, 255, .35); font-size: 12px; text-align: center;
}

/* ---- earnings bar ---- */
.af-earnings { border-color: rgba(61, 255, 158, .2); background: linear-gradient(to bottom right, #0c1a0e, #0d130f, #0a0a0d) }
.af-earnings-glow {
  position: absolute; right: -60px; top: -140px; width: 320px; height: 320px; border-radius: 9999px;
  background: radial-gradient(circle, #22c55e 0%, transparent 70%); opacity: .1; filter: blur(64px); pointer-events: none;
}
.af-earnings-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 16px }
.af-earnings-cell { padding: 0 4px }
.af-earnings-cell.highlight { border: 1px solid rgba(61, 255, 158, .3); border-radius: 8px; padding: 12px 16px; background: rgba(61, 255, 158, .06) }
.af-earnings-value { color: #fff; font-size: 18px; font-weight: 800; line-height: 1.5 }
.af-earnings-cell.highlight .af-earnings-value { font-size: 22px }
.af-earnings-value.green { color: #3dff9e }
.af-withdraw { height: 48px; padding: 8px 24px; font-size: 12px; font-weight: 800; letter-spacing: .05em }

/* ---- tier ladder ---- */
.af-tier-name { color: #cd7f32; font-weight: 700 }
.af-tier-next { color: #c0c0c0; font-weight: 700 }
.af-auto-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 6px; padding: 4px 10px;
  background: rgba(61, 255, 158, .1); color: #3dff9e;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.af-auto-pill svg { width: 12px; height: 12px }
/* The -36px pulls the medals back up so the rail runs through their centres;
 * the top margin therefore has to clear the heading by that much plus the
 * medal's own half, or the current tier's ring rides into the text above. */
.af-tier-track { position: relative; height: 4px; margin: 44px 0 -36px; border-radius: 9999px; background: rgba(255, 255, 255, .05) }
.af-tier-track-fill { height: 4px; border-radius: 9999px; transition: width .5s cubic-bezier(.22, 1, .36, 1) }
.af-tier-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px }
.af-tier { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; text-align: center }
.af-tier-mark {
  position: relative; display: flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  border: 2px solid #252525; border-radius: 9999px; background: #0a0a0d; color: #606060;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.af-tier-mark svg { width: 16px; height: 16px }
.af-tier.reached .af-tier-mark {
  border-color: var(--af-tier); background: color-mix(in srgb, var(--af-tier) 12%, transparent);
  color: var(--af-tier); box-shadow: 0 0 20px 0 color-mix(in srgb, var(--af-tier) 33%, transparent);
}
.af-tier.reached .af-tier-mark svg { width: 24px; height: 24px }
.af-tier:hover .af-tier-mark { transform: translateY(-2px) }
.af-tier-ring { position: absolute; inset: -5px; border: 2px solid var(--af-tier); border-radius: 9999px; opacity: .5 }
.af-tier-label { color: #606060; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase }
.af-tier.reached .af-tier-label { color: var(--af-tier) }
.af-tier-rate { color: rgba(255, 255, 255, .4); font-size: 12px }
.af-tier-threshold { color: rgba(255, 255, 255, .3); font-size: 12px }
.af-tier-now { color: #3dff9e; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.af-progress { border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; padding: 12px; background: rgba(255, 255, 255, .02) }
.af-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, .5); font-size: 12px }
.af-progress-percent { color: rgba(255, 255, 255, .7); font-weight: 700 }
.af-progress-track { height: 8px; margin: 8px 0; border-radius: 9999px; background: rgba(255, 255, 255, .05) }
.af-progress-fill { height: 8px; border-radius: 9999px; transition: width .5s cubic-bezier(.22, 1, .36, 1) }
.af-progress-hint { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .55); font-size: 12px }
.af-progress-hint svg { width: 14px; height: 14px; flex: none }

/* ---- how it works ---- */
.af-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px }
.af-step {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px;
  background: rgba(255, 255, 255, .016);
  transition: border-color .2s, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.af-step:hover { border-color: rgba(61, 255, 158, .25); transform: translateY(-2px) }
.af-step-number {
  position: absolute; right: 16px; top: 16px;
  display: flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border: 2px solid rgba(61, 255, 158, .4); border-radius: 9999px; background: #0a0a0d;
  color: #3dff9e; font-size: 12px; font-weight: 800;
}
.af-step-title { margin: 12px 0 0; color: #fff; font-size: 13px; font-weight: 800 }
.af-step-text { margin: 4px 0 0; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.55 }

/* ---- metrics ---- */
.af-selects { display: flex; gap: 8px }
.af-select {
  display: flex; height: 40px; min-width: 140px; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid #2a2a2e; border-radius: 8px; padding: 8px 12px;
  background: linear-gradient(#161619, #111114); color: #ccc; font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;
}
.af-select svg { width: 16px; height: 16px; flex: none }
.af-select:hover { border-color: rgba(34, 197, 94, .4); background: linear-gradient(#15151c, #0d0d12); box-shadow: 0 0 16px -4px rgba(34, 197, 94, .28) }
.af-chart {
  display: grid; min-height: 300px; place-items: center; margin-top: 16px;
  border: 1px solid #2a2a2e; border-radius: 12px; padding: 24px;
  color: rgba(255, 255, 255, .35); font-size: 12px;
}

/* ---- toasts ---- */
.af-toasts { position: fixed; right: 24px; top: 117px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none }
.af-toast {
  display: flex; min-width: 240px; max-width: min(380px, calc(100vw - 48px)); align-items: center; gap: 10px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 12px; padding: 12px 16px;
  background: linear-gradient(rgba(16, 16, 19, .97), rgba(11, 11, 14, .97));
  box-shadow: inset 2px 0 0 #3dff9e, 0 18px 40px -18px rgba(0, 0, 0, .85);
  color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  opacity: 0; transform: translateX(16px) scale(.98);
  transition: opacity .28s cubic-bezier(.22, 1, .36, 1), transform .28s cubic-bezier(.22, 1, .36, 1);
  pointer-events: auto; cursor: pointer;
}
.af-toast.in { opacity: 1; transform: none }
.af-toast.out { opacity: 0; transform: translateX(16px) scale(.98) }
.af-toast-icon { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 9999px; background: rgba(61, 255, 158, .12); color: #3dff9e }
.af-toast-icon svg { width: 13px; height: 13px }
.af-toast.error { border-color: rgba(239, 68, 68, .35); box-shadow: inset 2px 0 0 #ef4444, 0 18px 40px -18px rgba(0, 0, 0, .85) }
.af-toast.error .af-toast-icon { background: rgba(239, 68, 68, .12); color: #fca5a5 }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .af-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .af-steps { grid-template-columns: 1fr }
  .af-earnings-grid { grid-template-columns: 1fr 1fr }
  .af-earnings-action { grid-column: 1 / -1 }
  .af-withdraw { width: 100% }
}
@media (max-width: 767px) {
  .af-page { padding: 16px 12px 48px }
  .af-card, .af-hero { padding: 16px }
  .af-widget { padding: 0 }
  .af-widget-head { padding: 16px }
  .af-widget-inner { padding: 0 16px 16px }
  .af-stats { grid-template-columns: 1fr }
  .af-hero-row { flex-direction: column; align-items: flex-start }
  .af-hero-title { font-size: 20px }
  .af-tier-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px }
  .af-tier-label { font-size: 12px }
  .af-field-row { flex-wrap: wrap }
  .af-primary { width: 100% }
  .af-toasts { right: 12px; left: 12px; top: 96px; align-items: stretch }
  .af-toast { min-width: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .af-page, .af-widget-body { animation: none }
  .af-toast, .af-stat, .af-step, .af-tier-mark, .af-widget-chevron, .af-select, .af-primary { transition: none }
}

.af-preview.live { display: block; min-height: 0; border: 0; padding: 0; background: transparent; text-align: left }
.af-preview.live iframe { display: block; width: 370px; max-width: 100%; height: 360px; border: 0; border-radius: 16px }

/* ---- avatar glow, matching the original's blurred tier halo ---- */
.af-hero-avatar-glow {
  position: absolute; inset: -4px; border-radius: 9999px;
  background: var(--af-tier); opacity: .6; filter: blur(12px); pointer-events: none;
}
.af-hero-avatar img { position: relative }
.af-hero-medal { z-index: 1 }

/* ---- metric selects ---- */
.af-select-wrap { position: relative }
.af-select { width: 140px }
.af-select[aria-expanded="true"] {
  border-color: rgba(61, 255, 158, .6);
  box-shadow: 0 0 18px -3px rgba(34, 197, 94, .45), inset 0 0 0 1px rgba(34, 197, 94, .18);
}
.af-select svg { opacity: .5; transition: transform .2s, color .2s, opacity .2s }
.af-select[aria-expanded="true"] svg { transform: rotate(180deg); color: #3dff9e; opacity: 1 }
.af-select-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 207px;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  background: linear-gradient(#13131a, #08080c);
  box-shadow: 0 18px 46px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(61, 255, 158, .08);
  animation: af-select-in .15s cubic-bezier(.16, 1, .3, 1);
}
.af-select-panel.closing { animation: af-select-out .14s cubic-bezier(.4, 0, 1, 1) forwards }
@keyframes af-select-in { from { opacity: 0; transform: translateY(-8px) scale(.95) } to { opacity: 1; transform: none } }
@keyframes af-select-out { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-8px) scale(.95) } }
.af-select-viewport { padding: 6px }
.af-option {
  position: relative; display: flex; align-items: center; height: 32px;
  border-radius: 8px; padding: 6px 12px 6px 32px;
  color: rgba(255, 255, 255, .75); font-size: 13px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.af-option:hover { background: rgba(255, 255, 255, .05); color: #fff }
.af-option.checked {
  border-radius: 6px;
  background: linear-gradient(to right, rgba(61, 255, 158, .15), rgba(61, 255, 158, .04));
  color: #3dff9e;
}
.af-option-tick { position: absolute; left: 10px; display: grid; width: 14px; height: 14px; place-items: center; opacity: 0 }
.af-option-tick svg { width: 14px; height: 14px }
.af-option.checked .af-option-tick { opacity: 1 }

/* ---- neutral toast, used for the empty-balance notice ---- */
.af-toast.info {
  max-width: min(356px, calc(100vw - 48px));
  border-color: rgba(255, 255, 255, .08);
  background: #0d0d0d;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85);
  color: #fff; font-size: 13px; font-weight: 400; letter-spacing: normal; line-height: 1.45;
}
.af-toast.info .af-toast-icon { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .75) }
@media (prefers-reduced-motion: reduce) { .af-widget-body, .af-select-panel { transition: none; animation: none } }

/* Показатели за период: одно число с подписью вместо заглушки «данных нет». */
.af-metric { display: flex; flex-direction: column; align-items: center; gap: 6px }
.af-metric-label { color: #8f8f93; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.af-metric-value { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.01em }