/**
 * YFi Net 2026 Design System — shared tokens & primitives
 * Page bots MUST load this stylesheet. Do not redefine these tokens locally.
 * Link from HTML: <link rel="stylesheet" href="/assets/yfi-ds-2026.css">
 * Prefer after Manrope (or system-ui fallback) is available.
 */

:root {
  /* Brand / color roles */
  --yfi-navy: #071928;
  --yfi-blue: #285deb;
  --yfi-lime: #dfff9c;
  --yfi-ink: #132d3d;
  --yfi-muted: #596e7c;
  --yfi-line: #dce5eb;
  --yfi-soft: #f4f7fa;
  --yfi-soft-strong: #edf3f7;
  --yfi-white: #ffffff;
  --yfi-danger: #d92d20;
  --yfi-danger-soft: #fef3f2;
  --yfi-success: #079455;
  --yfi-success-soft: #ecfdf3;
  --yfi-focus: #7097ff;
  --yfi-lime-ink: #31482a;

  /* Type scale (rem @ 16px root) */
  --yfi-fs-xs: 0.75rem;      /* 12 */
  --yfi-fs-sm: 0.875rem;     /* 14 */
  --yfi-fs-md: 1rem;         /* 16 */
  --yfi-fs-lg: 1.125rem;     /* 18 */
  --yfi-fs-xl: 1.25rem;      /* 20 */
  --yfi-fs-2xl: 1.5rem;      /* 24 */
  --yfi-fs-3xl: 1.875rem;    /* 30 */
  --yfi-fs-4xl: 2.25rem;     /* 36 */
  --yfi-fs-5xl: 3rem;        /* 48 */

  --yfi-lh-tight: 1.25;
  --yfi-lh-snug: 1.4;
  --yfi-lh-body: 1.65;
  --yfi-lh-loose: 1.7;

  --yfi-fw-regular: 400;
  --yfi-fw-medium: 500;
  --yfi-fw-semibold: 600;
  --yfi-fw-bold: 700;

  --yfi-tracking-tight: -0.035em;
  --yfi-tracking-display: -0.04em;

  /* 8pt spacing scale */
  --yfi-space-1: 8px;
  --yfi-space-2: 16px;
  --yfi-space-3: 24px;
  --yfi-space-4: 32px;
  --yfi-space-5: 40px;
  --yfi-space-6: 48px;
  --yfi-space-8: 64px;
  --yfi-space-10: 80px;
  --yfi-space-half: 4px;

  /* Radii / elevation */
  --yfi-radius-sm: 8px;
  --yfi-radius-md: 12px;
  --yfi-radius-lg: 16px;
  --yfi-radius-xl: 22px;
  --yfi-radius-pill: 999px;

  --yfi-shadow-sm: 0 4px 20px rgba(10, 37, 67, 0.08);
  --yfi-shadow-md: 0 8px 30px rgba(24, 52, 73, 0.09);

  /* Motion */
  --yfi-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --yfi-duration-fast: 150ms;
  --yfi-duration: 220ms;
  --yfi-duration-enter: 320ms;

  /* Touch / chrome */
  --yfi-tap-min: 44px;
  --yfi-page-max: 65ch;
  --yfi-font: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Base helpers (opt-in via class on body/root) */
.yfi-ds {
  font-family: var(--yfi-font);
  color: var(--yfi-ink);
  background: var(--yfi-soft);
  line-height: var(--yfi-lh-body);
  -webkit-font-smoothing: antialiased;
}

.yfi-ds :is(button, input, select, textarea) {
  font-family: inherit;
}

.yfi-ds :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--yfi-focus);
  outline-offset: 3px;
}

/* ——— Typography utilities ——— */
.yfi-display {
  font-size: var(--yfi-fs-4xl);
  font-weight: var(--yfi-fw-semibold);
  letter-spacing: var(--yfi-tracking-display);
  line-height: var(--yfi-lh-tight);
  color: var(--yfi-ink);
}

.yfi-title {
  font-size: var(--yfi-fs-3xl);
  font-weight: var(--yfi-fw-semibold);
  letter-spacing: var(--yfi-tracking-tight);
  line-height: var(--yfi-lh-tight);
  color: var(--yfi-ink);
}

.yfi-heading {
  font-size: var(--yfi-fs-xl);
  font-weight: var(--yfi-fw-semibold);
  letter-spacing: var(--yfi-tracking-tight);
  line-height: var(--yfi-lh-snug);
  color: var(--yfi-ink);
}

.yfi-body {
  font-size: var(--yfi-fs-md);
  font-weight: var(--yfi-fw-regular);
  line-height: var(--yfi-lh-loose);
  color: var(--yfi-ink);
}

.yfi-body-muted {
  font-size: var(--yfi-fs-md);
  line-height: var(--yfi-lh-loose);
  color: var(--yfi-muted);
}

.yfi-caption {
  font-size: var(--yfi-fs-sm);
  line-height: var(--yfi-lh-body);
  color: var(--yfi-muted);
}

.yfi-label {
  font-size: var(--yfi-fs-sm);
  font-weight: var(--yfi-fw-medium);
  line-height: var(--yfi-lh-body);
  color: var(--yfi-ink);
}

@media (max-width: 760px) {
  .yfi-display { font-size: var(--yfi-fs-3xl); }
  .yfi-title { font-size: 1.75rem; }
}

/* ——— Buttons ——— */
.yfi-btn,
.yfi-btn-primary,
.yfi-btn-secondary,
.yfi-btn-ghost,
.yfi-btn-destructive,
.yfi-btn-apple,
.yfi-btn-google,
.yfi-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yfi-space-1);
  box-sizing: border-box;
  min-height: 50px;
  padding: 13px 20px;
  border-radius: var(--yfi-radius-md);
  border: 1.5px solid transparent;
  font-family: var(--yfi-font);
  font-size: 0.9375rem;
  font-weight: var(--yfi-fw-semibold);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--yfi-duration-fast) var(--yfi-ease-out),
    border-color var(--yfi-duration-fast) var(--yfi-ease-out),
    color var(--yfi-duration-fast) var(--yfi-ease-out),
    box-shadow var(--yfi-duration-fast) var(--yfi-ease-out),
    transform var(--yfi-duration-fast) var(--yfi-ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.yfi-btn:disabled,
.yfi-btn-primary:disabled,
.yfi-btn-secondary:disabled,
.yfi-btn-ghost:disabled,
.yfi-btn-destructive:disabled,
.yfi-btn-apple:disabled,
.yfi-btn-google:disabled,
.yfi-btn-whatsapp:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}

.yfi-btn-primary {
  background: var(--yfi-blue);
  color: var(--yfi-white);
  border-color: var(--yfi-blue);
}

.yfi-btn-primary:hover {
  background: #1f4fd4;
  border-color: #1f4fd4;
}

.yfi-btn-primary:active {
  transform: scale(0.98);
}

.yfi-btn-secondary {
  background: var(--yfi-white);
  color: var(--yfi-ink);
  border-color: var(--yfi-line);
}

.yfi-btn-secondary:hover {
  background: var(--yfi-soft);
  border-color: #c9d7e2;
}

.yfi-btn-ghost {
  background: transparent;
  color: var(--yfi-blue);
  border-color: transparent;
  min-height: var(--yfi-tap-min);
  padding: 10px 14px;
}

.yfi-btn-ghost:hover {
  background: rgba(40, 93, 235, 0.08);
}

.yfi-btn-destructive {
  background: var(--yfi-danger);
  color: var(--yfi-white);
  border-color: var(--yfi-danger);
}

.yfi-btn-destructive:hover {
  background: #b42318;
  border-color: #b42318;
}

/* Branded auth / contact */
.yfi-btn-apple {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.yfi-btn-apple:hover {
  background: #1a1a1a;
}

.yfi-btn-google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}

.yfi-btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c6c6;
}

.yfi-btn-whatsapp {
  background: #25d366;
  color: #ffffff;
  border-color: #25d366;
}

.yfi-btn-whatsapp:hover {
  background: #1ebe57;
  border-color: #1ebe57;
}

.yfi-btn-block {
  width: 100%;
}


.yfi-btn-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Inline button busy — CTA in-flight (pay / continue / confirm).
   Either .yfi-btn-busy OR .yfi-btn-primary[aria-busy="true"] (and other .yfi-btn-* variants).
   Keep label for SR/layout; 18px ring. */
.yfi-btn-busy,
.yfi-btn-primary.yfi-btn-busy,
.yfi-btn-secondary.yfi-btn-busy,
.yfi-btn-ghost.yfi-btn-busy,
.yfi-btn-destructive.yfi-btn-busy,
.yfi-btn-apple.yfi-btn-busy,
.yfi-btn-google.yfi-btn-busy,
.yfi-btn-whatsapp.yfi-btn-busy,
.yfi-btn-primary[aria-busy="true"],
.yfi-btn-secondary[aria-busy="true"],
.yfi-btn-ghost[aria-busy="true"],
.yfi-btn-destructive[aria-busy="true"],
.yfi-btn-apple[aria-busy="true"],
.yfi-btn-google[aria-busy="true"],
.yfi-btn-whatsapp[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  cursor: wait;
}

.yfi-btn-busy > .yfi-btn-busy-label,
.yfi-btn-primary[aria-busy="true"] > .yfi-btn-busy-label,
.yfi-btn-secondary[aria-busy="true"] > .yfi-btn-busy-label,
.yfi-btn-ghost[aria-busy="true"] > .yfi-btn-busy-label,
.yfi-btn-destructive[aria-busy="true"] > .yfi-btn-busy-label,
.yfi-btn-apple[aria-busy="true"] > .yfi-btn-busy-label,
.yfi-btn-google[aria-busy="true"] > .yfi-btn-busy-label,
.yfi-btn-whatsapp[aria-busy="true"] > .yfi-btn-busy-label {
  opacity: 0;
}

/* Prefer explicit spinner child; otherwise ::after draws the 18px ring */
.yfi-btn-busy-spinner,
.yfi-btn-busy > .yfi-btn-busy-spinner,
.yfi-btn-primary[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-secondary[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-ghost[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-destructive[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-apple[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-google[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-whatsapp[aria-busy="true"] > .yfi-btn-busy-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.92;
  animation:yfi-spin var(--yfi-spin-dur) linear infinite;
  flex-shrink: 0;
  pointer-events: none;
}

.yfi-btn-busy:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-primary[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-secondary[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-ghost[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-destructive[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-apple[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-google[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-whatsapp[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.92;
  animation:yfi-spin var(--yfi-spin-dur) linear infinite;
  pointer-events: none;
}

/* Light-fill buttons: blue ring instead of currentColor */
.yfi-btn-secondary.yfi-btn-busy:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-google.yfi-btn-busy:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-ghost.yfi-btn-busy:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-secondary[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-google[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
.yfi-btn-ghost[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after {
  border-color: var(--yfi-blue);
  border-right-color: transparent;
}

.yfi-btn-secondary.yfi-btn-busy > .yfi-btn-busy-spinner,
.yfi-btn-google.yfi-btn-busy > .yfi-btn-busy-spinner,
.yfi-btn-ghost.yfi-btn-busy > .yfi-btn-busy-spinner,
.yfi-btn-secondary[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-google[aria-busy="true"] > .yfi-btn-busy-spinner,
.yfi-btn-ghost[aria-busy="true"] > .yfi-btn-busy-spinner {
  border-color: var(--yfi-blue);
  border-right-color: transparent;
}

/* ——— Info-page chrome ——— */
.yfi-page {
  min-height: 100dvh;
  background: var(--yfi-soft);
  color: var(--yfi-ink);
  font-family: var(--yfi-font);
}

.yfi-page-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--yfi-space-2);
  min-height: calc(var(--yfi-tap-min) + var(--yfi-space-2));
  padding: var(--yfi-space-1) var(--yfi-space-2);
  padding-top: max(var(--yfi-space-1), env(safe-area-inset-top, 0px));
  padding-left: max(var(--yfi-space-2), env(safe-area-inset-left, 0px));
  padding-right: max(var(--yfi-space-2), env(safe-area-inset-right, 0px));
  background: var(--yfi-white);
  border-bottom: 1px solid var(--yfi-line);
}

/* ——— Back control — 2026 circle chevron (≥44×44, icon-only) ——— */
.yfi-back,
a.yfi-back,
button.yfi-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--yfi-tap-min);
  height: var(--yfi-tap-min);
  min-width: var(--yfi-tap-min);
  min-height: var(--yfi-tap-min);
  margin: 0;
  padding: 0;
  border: 1px solid var(--yfi-line);
  border-radius: var(--yfi-radius-pill);
  background: var(--yfi-white);
  color: var(--yfi-ink);
  box-shadow: var(--yfi-shadow-sm);
  font-family: var(--yfi-font);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition:
    background var(--yfi-duration-fast) var(--yfi-ease-out),
    color var(--yfi-duration-fast) var(--yfi-ease-out),
    border-color var(--yfi-duration-fast) var(--yfi-ease-out),
    box-shadow var(--yfi-duration-fast) var(--yfi-ease-out),
    transform var(--yfi-duration-fast) var(--yfi-ease-out);
}

@media (hover: hover) {
  .yfi-back:hover,
  a.yfi-back:hover,
  button.yfi-back:hover {
    background: var(--yfi-soft);
    color: var(--yfi-blue);
    border-color: #c9d7e2;
    box-shadow: var(--yfi-shadow-sm);
  }
}

.yfi-back:active,
a.yfi-back:active,
button.yfi-back:active {
  transform: scale(0.94);
  background: var(--yfi-soft-strong);
}

.yfi-back:focus-visible {
  outline: 3px solid var(--yfi-focus);
  outline-offset: 3px;
}

.yfi-back svg,
.yfi-back .yfi-back-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

.yfi-page-top .yfi-back,
.yfi-page-top a.yfi-back,
.yfi-page-top button.yfi-back {
  /* inherit global circle; keep sticky bar alignment */
  align-self: center;
}

.yfi-page-top .yfi-page-title {
  flex: 1;
  margin: 0;
  font-size: var(--yfi-fs-md);
  font-weight: var(--yfi-fw-semibold);
  letter-spacing: var(--yfi-tracking-tight);
  color: var(--yfi-ink);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yfi-page-body {
  width: min(100%, var(--yfi-page-max));
  margin-inline: auto;
  padding: var(--yfi-space-3) var(--yfi-space-2) var(--yfi-space-6);
}

.yfi-card {
  background: var(--yfi-white);
  border: 1px solid var(--yfi-line);
  border-radius: var(--yfi-radius-xl);
  box-shadow: var(--yfi-shadow-md);
  padding: var(--yfi-space-3);
}

/* ——— Loading: skeleton + spinner ——— */
.yfi-skeleton{display:block;background:var(--yfi-skel,linear-gradient(90deg,#e7edf3 25%,#f5f8fb 50%,#e7edf3 75%));background-size:200% 100%;animation:yfi-shimmer var(--yfi-skel-dur,1.3s) ease-in-out infinite,yfi-skel-in .2s ease var(--yfi-skel-delay,.12s) both;border-radius:var(--yfi-radius-md,12px)}

.yfi-skeleton-text {
  height: 0.875em;
  margin-bottom: var(--yfi-space-1);
}

.yfi-skeleton-text:last-child {
  width: 68%;
  margin-bottom: 0;
}

.yfi-skeleton-title {
  height: 1.25em;
  width: 42%;
  margin-bottom: var(--yfi-space-2);
}

.yfi-skeleton-block {
  height: 120px;
  border-radius: var(--yfi-radius-lg);
}



.yfi-spinner{width:24px;height:24px;border-radius:50%;border:2px solid var(--yfi-spin-track,#dce5eb);border-top-color:var(--yfi-spin-ink,#285deb);animation:yfi-spin var(--yfi-spin-dur,.7s) linear infinite;display:inline-block;flex-shrink:0}

.yfi-spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.yfi-spinner-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--yfi-space-5);
}



/* ——— Page enter motion ——— */
.yfi-page-enter {
  animation:yfi-in var(--yfi-in-dur) var(--yfi-in-ease) both;
}



@media (prefers-reduced-motion: reduce) {
  .yfi-back,
  a.yfi-back,
  button.yfi-back {
    transition: none;
  }
  .yfi-back:active,
  a.yfi-back:active,
  button.yfi-back:active {
    transform: none;
  }

  .yfi-page-enter {
    animation: none;
  }

  .yfi-skeleton {
    animation: none;
    background: var(--yfi-soft-strong);
  }

  .yfi-spinner,
  .yfi-spinner-lg {
    animation: none;
    border-top-color: var(--yfi-blue);
    opacity: 0.85;
  }

  .yfi-btn-busy-spinner,
  .yfi-btn-busy > .yfi-btn-busy-spinner,
  .yfi-btn-busy:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-primary[aria-busy="true"] > .yfi-btn-busy-spinner,
  .yfi-btn-primary[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-secondary[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-ghost[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-destructive[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-apple[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-google[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after,
  .yfi-btn-whatsapp[aria-busy="true"]:not(:has(.yfi-btn-busy-spinner))::after {
    animation: none;
    opacity: 0.7;
  }

  .yfi-btn-primary:active,
  .yfi-btn-secondary:active,
  .yfi-btn-destructive:active,
  .yfi-btn-apple:active,
  .yfi-btn-google:active,
  .yfi-btn-whatsapp:active {
    transform: none;
  }

  .yfi-btn-primary,
  .yfi-btn-secondary,
  .yfi-btn-ghost,
  .yfi-btn-destructive,
  .yfi-btn-apple,
  .yfi-btn-google,
  .yfi-btn-whatsapp {
    transition: none;
  }
}

/* ——— Toast (2026 system surface) ——— */
.yfi-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 920;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  width: auto;
  margin: 0 auto;
  padding: 12px 8px 12px 16px;
  border-radius: var(--yfi-radius-lg);
  box-shadow: var(--yfi-shadow-md);
  font-family: var(--yfi-font);
  font-size: var(--yfi-fs-sm);
  font-weight: var(--yfi-fw-semibold);
  line-height: var(--yfi-lh-snug);
  color: var(--yfi-ink);
  background: var(--yfi-white);
  border: 1px solid var(--yfi-line);
  animation: yfi-toast-in var(--yfi-duration-enter) var(--yfi-ease-out) both;
  box-sizing: border-box;
}

.yfi-toast--ok {
  background: var(--yfi-success-soft);
  border-color: color-mix(in srgb, var(--yfi-success) 22%, var(--yfi-line));
  color: var(--yfi-ink);
}

.yfi-toast--error {
  background: var(--yfi-danger-soft);
  border-color: color-mix(in srgb, var(--yfi-danger) 22%, var(--yfi-line));
  color: var(--yfi-ink);
}

.yfi-toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--yfi-fw-bold);
  line-height: 1;
}

.yfi-toast--ok .yfi-toast__icon {
  background: var(--yfi-success);
  color: var(--yfi-white);
}

.yfi-toast--error .yfi-toast__icon {
  background: var(--yfi-danger);
  color: var(--yfi-white);
}

.yfi-toast__msg {
  flex: 1;
  min-width: 0;
  color: var(--yfi-ink);
}

.yfi-toast__dismiss {
  flex-shrink: 0;
  min-width: var(--yfi-tap-min);
  min-height: var(--yfi-tap-min);
  width: var(--yfi-tap-min);
  height: var(--yfi-tap-min);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--yfi-radius-md);
  background: transparent;
  color: var(--yfi-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.yfi-toast__dismiss:hover {
  color: var(--yfi-ink);
  background: rgba(19, 45, 61, 0.06);
}

@keyframes yfi-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
  .yfi-toast {
    left: auto;
    right: 28px;
    bottom: 28px;
    width: 360px;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yfi-toast {
    animation: none;
  }
}

/* ——— Cookie consent (2026 system surface) ——— */
.yfi-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 980;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  font-family: var(--yfi-font);
}

.yfi-cookie__sheet {
  pointer-events: auto;
  max-width: 520px;
  margin: 0 auto;
  background: var(--yfi-white);
  color: var(--yfi-ink);
  border: 1px solid var(--yfi-line);
  border-radius: var(--yfi-radius-xl) var(--yfi-radius-xl) var(--yfi-radius-lg) var(--yfi-radius-lg);
  box-shadow: var(--yfi-shadow-md);
  padding: 20px 18px 16px;
  animation: yfi-cookie-in var(--yfi-duration-enter) var(--yfi-ease-out) both;
}

.yfi-cookie__title {
  margin: 0 0 6px;
  font-size: var(--yfi-fs-lg);
  font-weight: var(--yfi-fw-bold);
  letter-spacing: var(--yfi-tracking-tight);
  color: var(--yfi-navy);
}

.yfi-cookie__copy {
  margin: 0 0 16px;
  font-size: var(--yfi-fs-sm);
  line-height: var(--yfi-lh-body);
  color: var(--yfi-muted);
}

.yfi-cookie__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yfi-cookie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 18px;
  border-radius: var(--yfi-radius-md);
  border: 1.5px solid transparent;
  font-family: var(--yfi-font);
  font-size: 0.9375rem;
  font-weight: var(--yfi-fw-semibold);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--yfi-duration-fast) var(--yfi-ease-out),
    border-color var(--yfi-duration-fast) var(--yfi-ease-out),
    color var(--yfi-duration-fast) var(--yfi-ease-out);
}

.yfi-cookie__btn--accept {
  background: var(--yfi-blue);
  color: var(--yfi-white);
  border-color: var(--yfi-blue);
}

.yfi-cookie__btn--accept:hover {
  background: #1f4fd4;
  border-color: #1f4fd4;
}

.yfi-cookie__btn--manage {
  background: var(--yfi-soft);
  color: var(--yfi-ink);
  border-color: var(--yfi-line);
}

.yfi-cookie__btn--manage:hover {
  background: var(--yfi-soft-strong);
}

.yfi-cookie__prefs {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: var(--yfi-radius-md);
  background: var(--yfi-soft);
  border: 1px solid var(--yfi-line);
}

.yfi-cookie__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--yfi-tap-min);
  padding: 6px 0;
  font-size: var(--yfi-fs-sm);
  color: var(--yfi-ink);
}

.yfi-cookie__row + .yfi-cookie__row {
  border-top: 1px solid var(--yfi-line);
}

.yfi-cookie__row label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.yfi-cookie__row small {
  color: var(--yfi-muted);
  font-size: var(--yfi-fs-xs);
}

.yfi-cookie__row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--yfi-blue);
}

.yfi-cookie__badge {
  font-size: var(--yfi-fs-xs);
  font-weight: var(--yfi-fw-semibold);
  color: var(--yfi-muted);
  background: var(--yfi-white);
  border: 1px solid var(--yfi-line);
  border-radius: var(--yfi-radius-pill);
  padding: 4px 10px;
}

.yfi-cookie__prefs-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes yfi-cookie-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
  .yfi-cookie {
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .yfi-cookie__actions,
  .yfi-cookie__prefs-actions {
    flex-direction: row;
  }
  .yfi-cookie__btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yfi-cookie__sheet {
    animation: none;
  }
}