/*
 * UCard Apply — plugin styles (v0.5.1)
 *
 * Scope: the "Apply & Earn" nav item, the Apply & Earn button modifier, the
 * UCard Reward badge, the how-it-works strip, the compact Apply & Earn panel,
 * the /apply/ landing and the six application-flow screens (section 9). All classes are ucc-apply-* (plus
 * the theme's .ucc-btn hooks). Colours come from the child theme's --ucc-*
 * tokens with hard fallbacks so the plugin still looks right on its own.
 * Light theme only (Part A): white cards, navy text, emerald primary.
 */

:root {
  --ucc-apply-gold: #f59e0b;
  --ucc-apply-gold-text: #92400e;
  --ucc-apply-gold-tint: rgba(245, 158, 11, 0.14);
  --ucc-apply-gold-line: rgba(245, 158, 11, 0.4);
  /* 0.1.4 badge: outline + wash, not a filled chip. */
  --ucc-apply-gold-wash: rgba(245, 158, 11, 0.07);
  --ucc-apply-gold-edge: rgba(245, 158, 11, 0.32);
  --ucc-apply-green-text: #047857;
}

/* =========================================================
   1. Primary-menu CTA item (desktop + GeneratePress mobile menu)
   ========================================================= */
.main-navigation .main-nav ul li.ucc-apply-nav-item > a {
  padding-left: 6px;
  padding-right: 6px;
}
.ucc-apply-nav-item__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--ucc-accent-gradient, linear-gradient(135deg, #10b981 0%, #06b6d4 100%));
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 38px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  vertical-align: middle;
}
.ucc-apply-nav-item__pill .ucc-apply-icon {
  width: 15px;
  height: 15px;
}
.main-navigation .main-nav ul li.ucc-apply-nav-item > a:hover .ucc-apply-nav-item__pill,
.main-navigation .main-nav ul li.ucc-apply-nav-item > a:focus .ucc-apply-nav-item__pill {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
  color: #fff;
}
/* GeneratePress toggled (mobile) menu: full-width row, centred pill. */
.main-navigation.toggled .main-nav li.ucc-apply-nav-item > a {
  padding: 8px 20px 12px;
  line-height: 1;
}
.main-navigation.toggled .ucc-apply-nav-item__pill {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* =========================================================
   2. Shared bits: icons, Apply & Earn button, reward badge
   ========================================================= */
.ucc-apply-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.ucc-btn--apply {
  gap: 8px;
}
.ucc-btn--apply .ucc-apply-icon {
  width: 16px;
  height: 16px;
}
/* 0.1.4: smaller and lighter. It now marks a card that has a live campaign
   rather than decorating every card, so it reads as a quiet tag beside the
   editorial score, never as a second badge competing with it. */
.ucc-apply-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--ucc-apply-gold-wash);
  border: 1px solid var(--ucc-apply-gold-edge);
  color: var(--ucc-apply-gold-text);
  font-family: var(--ucc-font, inherit);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
}
.ucc-apply-reward-badge .ucc-apply-icon {
  width: 12px;
  height: 12px;
  opacity: 0.85;
}
.ucc-apply-reward-badge--on-dark {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fde68a;
  margin-top: 14px;
}

/* =========================================================
   3. How-it-works trust strip (ucc_apply_how_it_works)
   ========================================================= */
.ucc-apply-hiw {
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: var(--ucc-radius-lg, 16px);
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
  padding: 24px 20px;
  font-family: var(--ucc-font, inherit);
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-hiw__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ucc-text, #0f172a);
  margin: 0 0 20px;
  text-align: center;
}
.ucc-apply-hiw__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ucc-apply-hiw__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ucc-apply-hiw__icon {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  color: var(--ucc-primary-light, #1e3a8a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ucc-apply-hiw__icon .ucc-apply-icon {
  width: 22px;
  height: 22px;
}
.ucc-apply-hiw__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ucc-accent, #10b981);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.ucc-apply-hiw__body {
  display: block;
  min-width: 0;
}
.ucc-apply-hiw__label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-hiw__desc {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ucc-muted, #64748b);
}
@media (min-width: 768px) {
  .ucc-apply-hiw {
    padding: 28px 28px 24px;
  }
  .ucc-apply-hiw__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .ucc-apply-hiw__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
  }
  .ucc-apply-hiw__step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -20px;
    top: 10px;
    color: var(--ucc-border-strong, #cbd5e1);
    font-size: 1.25rem;
    line-height: 1;
  }
}

/* =========================================================
   4. Compact Apply & Earn panel (ucc_apply_panel — homepage)
   ========================================================= */
.ucc-apply-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: linear-gradient(135deg, #f0fdf9 0%, #eef5ff 100%);
  border: 1px solid #c8ebe0;
  border-radius: 22px;
  padding: 26px 22px;
  font-family: var(--ucc-font, inherit);
  color: var(--ucc-text, #0f172a);
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
}
.ucc-apply-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ucc-apply-panel__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ucc-primary, #0f1d40);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ucc-apply-panel__icon .ucc-apply-icon {
  width: 24px;
  height: 24px;
}
.ucc-apply-panel__title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ucc-text, #0f172a);
  margin: 4px 0 6px;
}
.ucc-apply-panel__sub {
  margin: 0;
  color: var(--ucc-text-soft, #334155);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.ucc-apply-panel__steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}
.ucc-apply-panel__step {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ucc-apply-panel__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ucc-accent, #10b981);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  margin-bottom: 2px;
}
.ucc-apply-panel__step-title {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-panel__step-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-panel__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
}
.ucc-apply-panel__note {
  font-size: 0.8125rem;
  color: var(--ucc-muted, #64748b);
  line-height: 1.4;
}
.ucc-apply-panel__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ucc-apply-gift {
  display: block;
  width: 150px;
  height: 150px;
}
.ucc-apply-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ucc-apply-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-trust .ucc-apply-icon {
  color: var(--ucc-accent, #10b981);
}
@media (min-width: 880px) {
  .ucc-apply-panel {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: center;
    padding: 32px 36px;
  }
  .ucc-apply-panel__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ucc-apply-panel__step {
    position: relative;
  }
  .ucc-apply-panel__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 34px;
    right: -8px;
    border-top: 2px dashed #b7e4d2;
  }
  .ucc-apply-gift {
    width: 170px;
    height: 170px;
  }
}

/* =========================================================
   5. /apply/ and /apply/start/ pages
   ========================================================= */
.ucc-apply {
  font-family: var(--ucc-font, inherit);
  color: var(--ucc-text, #0f172a);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: 20px 16px 64px;
}
.ucc-apply *,
.ucc-apply *::before,
.ucc-apply *::after {
  box-sizing: border-box;
}
.ucc-apply a {
  text-decoration: none;
}
.ucc-apply__container {
  max-width: 880px;
  margin: 0 auto;
}
.ucc-apply__container--narrow {
  max-width: 720px;
}
.ucc-apply .ucc-breadcrumb {
  font-size: 0.8125rem;
  color: var(--ucc-muted, #64748b);
  margin-bottom: 16px;
}
.ucc-apply .ucc-breadcrumb a {
  color: var(--ucc-muted, #64748b);
}
.ucc-apply .ucc-breadcrumb .sep {
  margin: 0 6px;
  opacity: 0.6;
}
.ucc-apply h1 {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ucc-primary, #0f1d40);
  margin: 12px 0 12px;
}
.ucc-apply h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ucc-text, #0f172a);
  margin: 0 0 16px;
}

/* Hero card */
.ucc-apply-hero {
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 22px;
  padding: 32px 22px;
  box-shadow: var(--ucc-shadow, 0 4px 12px rgba(15, 29, 64, 0.08));
  text-align: center;
}
.ucc-apply-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  color: var(--ucc-apply-green-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ucc-apply-eyebrow .ucc-apply-icon {
  width: 14px;
  height: 14px;
}
.ucc-apply-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ucc-text-soft, #334155);
  max-width: 640px;
  margin: 0 auto 20px;
}
.ucc-apply-card-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ucc-bg-soft, #f1f5f9);
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  color: var(--ucc-text, #0f172a);
  margin: 0 0 20px;
}
.ucc-apply-card-chip .ucc-apply-icon {
  color: var(--ucc-primary-light, #1e3a8a);
}
.ucc-apply-card-chip a {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
}
.ucc-apply-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-bottom: 22px;
}
.ucc-apply-hero__secondary {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
}
.ucc-apply-hero__secondary:hover {
  text-decoration: underline;
}
.ucc-apply-trust--row {
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 10px 22px;
}
@media (max-width: 599px) {
  .ucc-apply-trust--row {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* Sections */
.ucc-apply-section {
  margin-top: 32px;
}

/* Numbered steps */
.ucc-apply-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ucc-apply-steps__item {
  display: flex;
  gap: 16px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
}
.ucc-apply-steps__num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ucc-primary, #0f1d40);
  color: #fff;
  font-weight: 800;
  line-height: 40px;
  text-align: center;
}
.ucc-apply-steps__body {
  min-width: 0;
}
.ucc-apply-steps__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 8px 0 4px;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-steps__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ucc-text-soft, #334155);
}
@media (min-width: 700px) {
  .ucc-apply-steps__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reward block (the one navy panel on the page) */
.ucc-apply-reward {
  display: grid;
  gap: 20px;
  align-items: center;
  justify-items: center;
  text-align: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(16, 185, 129, 0.35) 0%, rgba(16, 185, 129, 0) 55%),
    linear-gradient(135deg, #0f1d40 0%, #0b2a3a 100%);
  color: #fff;
  border-radius: 22px;
  padding: 28px 22px;
}
.ucc-apply-reward h2 {
  color: #fff;
  margin-bottom: 8px;
}
.ucc-apply-reward p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}
.ucc-apply-reward__gift {
  width: 140px;
  height: 140px;
}
@media (min-width: 700px) {
  .ucc-apply-reward {
    grid-template-columns: 160px minmax(0, 1fr);
    text-align: left;
    justify-items: start;
    padding: 32px 36px;
  }
}

/* Disclosure */
.ucc-apply-disclosure {
  background: var(--ucc-bg-soft, #f1f5f9);
  border-left: 4px solid var(--ucc-accent, #10b981);
  border-radius: 12px;
  padding: 18px 20px;
}
.ucc-apply-disclosure__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-disclosure__title .ucc-apply-icon {
  color: var(--ucc-accent, #10b981);
}
.ucc-apply-disclosure__list {
  margin: 0;
  padding-left: 18px;
  color: var(--ucc-text-soft, #334155);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.ucc-apply-disclosure__list li + li {
  margin-top: 6px;
}
.ucc-apply-bottom-cta {
  text-align: center;
  margin-top: 32px;
}

/* /apply/start/ shell */
.ucc-apply-start h1 {
  margin-bottom: 16px;
}
.ucc-apply-shell {
  background: var(--ucc-bg-card, #fff);
  border: 1px dashed var(--ucc-border-strong, #cbd5e1);
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
  margin: 8px 0 24px;
}
.ucc-apply-shell__step {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  color: var(--ucc-apply-green-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ucc-apply-shell__title {
  margin: 0 0 8px;
}
.ucc-apply-shell__text {
  margin: 0 auto 20px;
  max-width: 480px;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-shell__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* =========================================================
   6. Layout width (UI revamp build 1b — 2026-09-08)
   The theme releases #page to full width and drives every page-level
   wrapper from --ucc-container. The /apply/ landing is a page, so it
   takes the token; /apply/start/ is the application form, which keeps the
   narrower measure the product brief specifies for the application flow.
   Fallback values keep the pages sane if the theme token is ever absent.
   ========================================================= */
.ucc-apply {
  width: 100%;
}
.ucc-apply__container {
  max-width: var(--ucc-container, 880px);
}
.ucc-apply__container--narrow {
  max-width: min(900px, var(--ucc-container, 900px));
}

/* =========================================================
   7. Build 1c (2026-09-08)
   ========================================================= */

/* /apply/start/ now uses the same page container as the landing, so its
   breadcrumb, H1 and blocks line up with the rest of the site instead of
   sitting in a 900px column. The step card and the rewards box share one
   width, exposed as a variable so the real Step 1 form (build 6) can set a
   form measure in one place without touching the template. */
:root {
  --ucc-apply-card: var(--ucc-container, 880px);
}
.ucc-apply-shell,
.ucc-apply-start .ucc-apply-disclosure {
  max-width: var(--ucc-apply-card);
  margin-left: auto;
  margin-right: auto;
}

/* Sidebar variant of the Apply & Earn panel — single column, stacked
   steps, no gift illustration, for a ~340px column. */
.ucc-apply-panel--sidebar {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px 18px;
  border-radius: 16px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__head {
  gap: 12px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__icon .ucc-apply-icon {
  width: 20px;
  height: 20px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__title {
  font-size: 1.0625rem;
  margin: 2px 0 4px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__sub {
  font-size: 0.8125rem;
  line-height: 1.45;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__steps {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__step {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__step::before {
  content: none;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__num {
  width: 22px;
  height: 22px;
  font-size: 0.6875rem;
  line-height: 22px;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__step-title {
  font-size: 0.875rem;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__step-desc {
  display: none;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__cta {
  margin-top: 16px;
  gap: 8px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__cta .ucc-btn {
  width: 100%;
  font-size: 0.9375rem;
  padding: 12px 16px;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__note {
  font-size: 0.75rem;
}
.ucc-apply-panel--sidebar .ucc-apply-panel__aside {
  display: none;
}

/* =========================================================
   8. Designer review — build 1d (2026-09-08)
   ========================================================= */

/* Item 1 — Apply & Earn panel prominence. Same content and position, more
   weight: a tinted band behind it, a stronger border and shadow, a larger
   heading and a bigger Start Now button. The --sidebar variant overrides
   these further down the file, so the blog-post sidebar stays compact. */
.ucc-apply-panel:not(.ucc-apply-panel--sidebar) {
  background: linear-gradient(135deg, #e7fbf3 0%, #e6efff 100%);
  border: 2px solid #9fdcc6;
  box-shadow: 0 10px 30px rgba(15, 29, 64, 0.10);
}
.ucc-apply-panel:not(.ucc-apply-panel--sidebar) .ucc-apply-panel__title {
  font-size: 1.625rem;
}
.ucc-apply-panel:not(.ucc-apply-panel--sidebar) .ucc-apply-panel__sub {
  font-size: 1rem;
}
.ucc-apply-panel:not(.ucc-apply-panel--sidebar) .ucc-apply-panel__icon {
  width: 56px;
  height: 56px;
}
.ucc-apply-panel:not(.ucc-apply-panel--sidebar) .ucc-apply-panel__icon .ucc-apply-icon {
  width: 28px;
  height: 28px;
}
.ucc-apply-panel:not(.ucc-apply-panel--sidebar) .ucc-apply-panel__cta .ucc-btn {
  font-size: 1.125rem;
  padding: 16px 34px;
}
@media (min-width: 880px) {
  .ucc-apply-panel:not(.ucc-apply-panel--sidebar) {
    padding: 36px 40px;
  }
  .ucc-apply-panel:not(.ucc-apply-panel--sidebar) .ucc-apply-panel__title {
    font-size: 1.875rem;
  }
}

/* Item 8 — reassurance line under the landing's primary CTA. */
.ucc-apply-hero__reassurance {
  margin: -6px 0 20px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ucc-muted, #64748b);
}

/* Item 7 — Start Application CTA on the dark reward banner. */
.ucc-apply-reward__cta {
  margin-top: 18px;
}

/* Item 6 — the three trust cards that replace the how-it-works strip on
   the /apply/ landing (the strip itself still renders on the homepage). */
.ucc-apply-trust-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ucc-apply-trust-card {
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: var(--ucc-radius-lg, 16px);
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
  padding: 20px;
}
.ucc-apply-trust-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  color: var(--ucc-primary-light, #1e3a8a);
  margin-bottom: 12px;
}
.ucc-apply-trust-card__icon .ucc-apply-icon {
  width: 22px;
  height: 22px;
}
.ucc-apply-trust-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ucc-text, #0f172a);
  margin: 0 0 6px;
}
.ucc-apply-trust-card__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ucc-text-soft, #334155);
}
@media (min-width: 760px) {
  .ucc-apply-trust-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* =========================================================
   9. Build 6 — the application flow (2026-09-09, plugin 0.2.0)
   /apply/start/ → /apply/recommend/ → /apply/create/ → /apply/created/
   → /apply/return/ → /apply/reward/. Light theme throughout: white cards
   on the page ground, navy text, emerald primary. Navy is used for one
   small panel only (the merchant handoff); gold for the reward moment.
   The page container stays --ucc-container; every flow card sits on the
   narrower --ucc-apply-card measure set up in 1c.
   ========================================================= */
:root {
  --ucc-apply-card: min(840px, var(--ucc-container, 880px));
  --ucc-apply-gold-deep: #b45309;
}

/* Common ---------------------------------------------------------- */
.ucc-apply-flow h1 {
  font-size: 1.75rem;
  margin: 0 0 8px;
}
.ucc-apply-flow h2 {
  font-size: 1.25rem;
  margin: 0 0 10px;
}
.ucc-apply-card {
  position: relative;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 22px;
  box-shadow: var(--ucc-shadow, 0 4px 12px rgba(15, 29, 64, 0.08));
  padding: 28px 22px;
  max-width: var(--ucc-apply-card);
  margin: 0 auto 20px;
}
.ucc-apply-card--center {
  text-align: center;
}
.ucc-apply-lead {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-card--center .ucc-apply-lead {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ucc-apply-muted {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-fineprint {
  max-width: var(--ucc-apply-card);
  margin: 0 auto 18px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-fineprint--center {
  text-align: center;
}
.ucc-apply-card .ucc-apply-fineprint {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--ucc-border, #e2e8f0);
}
.ucc-apply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.ucc-apply-actions--center {
  justify-content: center;
}
.ucc-apply-inline-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  background: var(--ucc-bg-soft, #f1f5f9);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.ucc-apply-flowhead {
  max-width: var(--ucc-apply-card);
  margin: 0 auto 18px;
}
.ucc-apply-flow .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Progress strip (A / B / C) ------------------------------------- */
.ucc-apply-progress {
  list-style: none;
  margin: 4px auto 22px;
  padding: 0;
  max-width: var(--ucc-apply-card);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  counter-reset: none;
}
.ucc-apply-progress__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-progress__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  border-top: 2px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-progress__step.is-done:not(:last-child)::after {
  border-top-color: var(--ucc-accent, #10b981);
}
.ucc-apply-progress__num {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ucc-border-strong, #cbd5e1);
  background: var(--ucc-bg-card, #fff);
  color: var(--ucc-muted, #64748b);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ucc-apply-progress__num .ucc-apply-icon {
  width: 16px;
  height: 16px;
}
.ucc-apply-progress__step.is-current .ucc-apply-progress__num {
  border-color: var(--ucc-accent, #10b981);
  background: var(--ucc-accent, #10b981);
  color: #fff;
  box-shadow: 0 0 0 4px var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
}
.ucc-apply-progress__step.is-current {
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-progress__step.is-done .ucc-apply-progress__num {
  border-color: var(--ucc-accent, #10b981);
  color: var(--ucc-accent, #10b981);
}

/* Notices --------------------------------------------------------- */
.ucc-apply-notice {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  border: 1px solid transparent;
}
.ucc-apply-notice--error {
  background: var(--ucc-danger-tint, rgba(239, 68, 68, 0.08));
  border-color: rgba(239, 68, 68, 0.35);
  color: #991b1b;
}
.ucc-apply-notice--info {
  background: var(--ucc-bg-soft, #f1f5f9);
  border-color: var(--ucc-border, #e2e8f0);
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-notice--success {
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--ucc-apply-green-text);
}

/* Forms ----------------------------------------------------------- */
.ucc-apply-form {
  text-align: left;
}
.ucc-apply-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px; /* same rhythm as .ucc-apply-field — this selector outranks it */
  min-width: 0;
}
.ucc-apply-field {
  margin: 0 0 22px;
}
.ucc-apply-field__label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ucc-text, #0f172a);
  margin: 0 0 8px;
  padding: 0;
}
.ucc-apply-field__sublabel {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ucc-text, #0f172a);
  margin: 12px 0 6px;
}
.ucc-apply-field__opt {
  font-weight: 500;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-field__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-field__error {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b91c1c;
}
/* Prefixed with .ucc-apply: GeneratePress styles input[type=…] / select /
   textarea with attribute selectors, which outrank a lone class. */
.ucc-apply .ucc-apply-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ucc-border-strong, #cbd5e1);
  border-radius: 12px;
  background: var(--ucc-bg-card, #fff);
  color: var(--ucc-text, #0f172a);
  font-family: var(--ucc-font, inherit);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ucc-apply .ucc-apply-input::placeholder {
  color: var(--ucc-muted, #64748b);
  opacity: 0.8;
}
.ucc-apply .ucc-apply-input:focus {
  outline: none;
  border-color: var(--ucc-accent, #10b981);
  box-shadow: 0 0 0 4px var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
}
.ucc-apply textarea.ucc-apply-input {
  min-height: 96px;
  resize: vertical;
}
.ucc-apply .ucc-apply-field.is-invalid .ucc-apply-input {
  border-color: #ef4444;
}
.ucc-apply-select {
  position: relative;
  display: block;
}
.ucc-apply-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ucc-muted, #64748b);
  border-bottom: 2px solid var(--ucc-muted, #64748b);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ucc-apply-select .ucc-apply-input {
  padding-right: 40px;
  cursor: pointer;
}

/* Checkbox tiles (features) */
.ucc-apply-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ucc-apply-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--ucc-border-strong, #cbd5e1);
  border-radius: 12px;
  background: var(--ucc-bg-card, #fff);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ucc-text, #0f172a);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ucc-apply-check input,
.ucc-apply-pill input,
.ucc-apply-radio input,
.ucc-apply-consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ucc-apply-check__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--ucc-border-strong, #cbd5e1);
  background: var(--ucc-bg-card, #fff);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ucc-apply-check__box .ucc-apply-icon {
  width: 14px;
  height: 14px;
  opacity: 0;
  stroke-width: 3;
}
.ucc-apply-check:hover {
  border-color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-check:has(input:checked) {
  border-color: var(--ucc-accent, #10b981);
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
}
.ucc-apply-check:has(input:checked) .ucc-apply-check__box,
.ucc-apply-consent:has(input:checked) .ucc-apply-check__box {
  background: var(--ucc-accent, #10b981);
  border-color: var(--ucc-accent, #10b981);
}
.ucc-apply-check:has(input:checked) .ucc-apply-check__box .ucc-apply-icon,
.ucc-apply-consent:has(input:checked) .ucc-apply-check__box .ucc-apply-icon {
  opacity: 1;
}
.ucc-apply-check:has(input:focus-visible),
.ucc-apply-pill:has(input:focus-visible),
.ucc-apply-radio:has(input:focus-visible),
.ucc-apply-consent:has(input:focus-visible) {
  outline: 2px solid var(--ucc-primary, #0f1d40);
  outline-offset: 3px;
}

/* Pills (crypto) — the homepage finder's pill, inside the plugin */
.ucc-apply-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ucc-apply-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--ucc-border-strong, #cbd5e1);
  border-radius: 9999px;
  background: var(--ucc-bg-card, #fff);
  color: var(--ucc-text, #0f172a);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ucc-apply-pill:hover {
  background: var(--ucc-bg-soft, #f1f5f9);
  border-color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-pill:has(input:checked) {
  background: var(--ucc-primary, #0f1d40);
  border-color: var(--ucc-primary, #0f1d40);
  color: #fff;
}

/* Radios (return outcome) */
.ucc-apply-radios {
  display: grid;
  gap: 10px;
}
.ucc-apply-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--ucc-border-strong, #cbd5e1);
  border-radius: 12px;
  background: var(--ucc-bg-card, #fff);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ucc-apply-radio__dot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ucc-border-strong, #cbd5e1);
  background: var(--ucc-bg-card, #fff);
  position: relative;
}
.ucc-apply-radio__dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ucc-accent, #10b981);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ucc-apply-radio:hover {
  border-color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-radio:has(input:checked) {
  border-color: var(--ucc-accent, #10b981);
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
}
.ucc-apply-radio:has(input:checked) .ucc-apply-radio__dot {
  border-color: var(--ucc-accent, #10b981);
}
.ucc-apply-radio:has(input:checked) .ucc-apply-radio__dot::after {
  opacity: 1;
  transform: scale(1);
}

/* Consent */
.ucc-apply-consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-consent .ucc-apply-check__box {
  margin-top: 2px;
}
.ucc-apply-consent a {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
  text-decoration: underline;
}
.ucc-apply-field.is-invalid .ucc-apply-consent .ucc-apply-check__box {
  border-color: #ef4444;
}

/* Honeypot: off-canvas, not display:none (so naive bots still fill it) */
.ucc-apply-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ucc-apply-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 6px;
}
.ucc-apply-form__submit {
  min-width: 220px;
}
.ucc-apply-form__skip {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
  font-size: 0.9375rem;
}
.ucc-apply-form__skip:hover {
  text-decoration: underline;
}
.ucc-apply-form__secure,
.ucc-apply-form__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-form__secure .ucc-apply-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ucc-accent, #10b981);
}
.ucc-apply-form__note {
  display: block;
  text-align: center;
}
.ucc-apply-formcard .ucc-apply-lead {
  margin-bottom: 22px;
}

/* Chosen card + reward line (C) */
.ucc-apply-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 14px;
  background: var(--ucc-bg-soft, #f1f5f9);
}
.ucc-apply-chosen__change {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}
.ucc-apply-chosen__change:hover {
  text-decoration: underline;
}
.ucc-apply-rewardline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ucc-text-soft, #334155);
}

/* Card summary (logo · name · score) */
.ucc-apply-cardsum {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
}
.ucc-apply-cardsum--center {
  justify-content: center;
  margin: 0 auto 20px;
}
.ucc-apply-cardsum__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ucc-apply-cardsum__name {
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-cardsum__name a {
  color: inherit;
}
.ucc-apply-cardsum__meta {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ucc-muted, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ucc-apply-cardsum--center .ucc-apply-cardsum__meta {
  display: none;
}
.ucc-apply-cardsum--center .ucc-apply-score {
  margin-left: 0;
}
.ucc-apply-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ucc-apply-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.ucc-apply-logo--initials {
  background: var(--ucc-primary, #0f1d40);
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}
.ucc-apply-score {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-left: auto;
}
.ucc-apply-score__num {
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.1;
  color: var(--ucc-apply-green-text);
}
.ucc-apply-score__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ucc-muted, #64748b);
  white-space: nowrap;
}

/* Recommendations (B) -------------------------------------------- */
.ucc-apply-answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 4px;
}
.ucc-apply-answers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ucc-apply-answers__list li {
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--ucc-bg-soft, #f1f5f9);
  border: 1px solid var(--ucc-border, #e2e8f0);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-answers__change {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
  font-size: 0.875rem;
}
.ucc-apply-answers__change:hover {
  text-decoration: underline;
}
.ucc-apply-tabs {
  max-width: var(--ucc-apply-card);
  margin: 0 auto 16px;
}
.ucc-apply-tabs__bar {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--ucc-bg-soft, #f1f5f9);
  border: 1px solid var(--ucc-border, #e2e8f0);
  margin: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ucc-apply-tab {
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
  padding: 9px 16px;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ucc-text-soft, #334155);
  transition: background 0.15s ease, color 0.15s ease;
}
.ucc-apply-tab:hover {
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-tab.is-active {
  background: var(--ucc-primary, #0f1d40);
  color: #fff;
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
}
.ucc-apply-tabpanel__caption {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-recs {
  display: grid;
  gap: 14px;
}
.ucc-apply-rec {
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 18px;
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
  padding: 18px 18px 16px;
  display: grid;
  gap: 12px;
}
.ucc-apply-rec--first {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}
.ucc-apply-rec__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ucc-apply-rec__id {
  min-width: 0;
  flex: 1 1 auto;
}
.ucc-apply-rec__name {
  margin: 4px 0 6px;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-rec__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ucc-apply-rec__reasons li {
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--ucc-apply-green-text);
  font-size: 0.75rem;
  font-weight: 600;
}
.ucc-apply-rec__pros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ucc-apply-rec__pros li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-rec__pros .ucc-apply-icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--ucc-accent, #10b981);
}
.ucc-apply-rec__reward {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-rec__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-top: 4px;
}
.ucc-apply-rec__apply {
  flex: 1 1 220px;
}
.ucc-apply-rec__more {
  color: var(--ucc-primary-light, #1e3a8a);
  font-weight: 600;
  font-size: 0.9375rem;
}
.ucc-apply-rec__more:hover {
  text-decoration: underline;
}

/* Created (D) ----------------------------------------------------- */
.ucc-apply-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ucc-accent, #10b981);
  color: #fff;
  margin: 4px auto 14px;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35);
}
.ucc-apply-badge-icon .ucc-apply-icon {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}
.ucc-apply-badge-icon--navy {
  background: var(--ucc-primary, #0f1d40);
  box-shadow: 0 8px 22px rgba(15, 29, 64, 0.25);
}
.ucc-apply-badge-icon--muted {
  background: var(--ucc-bg-soft, #f1f5f9);
  color: var(--ucc-muted, #64748b);
  box-shadow: none;
}
.ucc-apply-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.ucc-apply-confetti i {
  position: absolute;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0.9;
  animation: ucc-apply-confetti 1.6s ease-out both;
}
.ucc-apply-confetti i:nth-child(1) { left: 12%; background: #10b981; transform: rotate(15deg); }
.ucc-apply-confetti i:nth-child(2) { left: 24%; top: 40px; background: #06b6d4; width: 6px; height: 12px; animation-delay: 0.1s; }
.ucc-apply-confetti i:nth-child(3) { left: 36%; top: 12px; background: #f59e0b; border-radius: 50%; animation-delay: 0.2s; }
.ucc-apply-confetti i:nth-child(4) { left: 60%; top: 30px; background: #1e3a8a; animation-delay: 0.05s; }
.ucc-apply-confetti i:nth-child(5) { left: 72%; top: 14px; background: #10b981; width: 12px; height: 6px; animation-delay: 0.25s; }
.ucc-apply-confetti i:nth-child(6) { left: 84%; top: 44px; background: #f59e0b; animation-delay: 0.15s; }
.ucc-apply-confetti i:nth-child(7) { left: 48%; top: 52px; background: #ef4444; border-radius: 50%; width: 6px; height: 6px; animation-delay: 0.3s; }
.ucc-apply-confetti i:nth-child(8) { left: 92%; top: 22px; background: #06b6d4; animation-delay: 0.35s; }
.ucc-apply-confetti--gold i:nth-child(odd) { background: #f59e0b; }
.ucc-apply-confetti--gold i:nth-child(even) { background: #fbbf24; }
@keyframes ucc-apply-confetti {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(70px) rotate(220deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ucc-apply-confetti i { animation: none; opacity: 0.6; }
}
.ucc-apply-idbox {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 6px auto 16px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--ucc-bg-soft, #f1f5f9);
  border: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-idbox__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-idbox__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ucc-apply-idbox__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ucc-primary, #0f1d40);
  background: transparent;
  padding: 0;
}
.ucc-apply-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9999px;
  border: 1px solid var(--ucc-border-strong, #cbd5e1);
  background: var(--ucc-bg-card, #fff);
  color: var(--ucc-text-soft, #334155);
  font-family: var(--ucc-font, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ucc-apply-copy .ucc-apply-icon {
  width: 14px;
  height: 14px;
}
.ucc-apply-copy:hover {
  border-color: var(--ucc-primary, #0f1d40);
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-copy.is-copied {
  background: var(--ucc-accent, #10b981);
  border-color: var(--ucc-accent, #10b981);
  color: #fff;
}
/* 0.4.1 — neither clipboard path worked: the value is left selected and
   the button says so. */
.ucc-apply-copy.is-manual {
  background: var(--ucc-apply-gold-tint, rgba(245, 158, 11, 0.14));
  border-color: var(--ucc-apply-gold-line, rgba(245, 158, 11, 0.4));
  color: var(--ucc-apply-gold-text, #92400e);
}
.ucc-apply-refcode__link:focus,
.ucc-apply-inline-id:focus {
  outline: 2px solid var(--ucc-accent, #10b981);
  outline-offset: 2px;
}
.ucc-apply-checklist {
  list-style: none;
  margin: 0 auto 22px;
  padding: 0;
  max-width: 420px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.ucc-apply-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-checklist .ucc-apply-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--ucc-accent, #10b981);
  color: #fff;
  stroke-width: 3;
}
/* The one navy panel in the flow: the merchant handoff. */
.ucc-apply-handoff {
  margin: 0 0 20px;
  padding: 24px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(16, 185, 129, 0.35) 0%, rgba(16, 185, 129, 0) 55%),
    linear-gradient(135deg, #0f1d40 0%, #0b2a3a 100%);
  color: #fff;
}
.ucc-apply-handoff h2 {
  color: #fff;
  margin: 0 0 8px;
}
.ucc-apply-handoff p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  font-size: 0.9375rem;
}
.ucc-apply-handoff__btn {
  width: 100%;
  max-width: 360px;
}
.ucc-apply-handoff__note {
  margin: 16px 0 0 !important;
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.ucc-apply-handoff__note strong {
  color: #fde68a;
}
.ucc-apply-handoff__missing {
  color: #fde68a !important;
}
.ucc-apply-return-block {
  padding: 18px 16px 4px;
  border-top: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-return-block h2 {
  font-size: 1.125rem;
}
.ucc-apply-return-block p {
  margin: 0 0 12px;
  color: var(--ucc-text-soft, #334155);
  font-size: 0.9375rem;
}
.ucc-apply-return-block__btn {
  width: 100%;
  max-width: 360px;
}

/* Return (E) ------------------------------------------------------ */
.ucc-apply-back .ucc-apply-form {
  max-width: 520px;
  margin: 8px auto 0;
}
.ucc-apply-saved {
  max-width: 520px;
  margin: 0 auto 18px;
}
.ucc-apply-saved .ucc-apply-handoff__btn {
  margin: 0 auto;
}
.ucc-apply-saved .ucc-apply-actions {
  margin-top: 0;
}
.ucc-apply-feedback {
  padding-top: 18px;
  border-top: 1px dashed var(--ucc-border, #e2e8f0);
}
.ucc-apply-feedback .ucc-apply-field__hint {
  margin: -2px 0 8px;
}

/* Reward: the Mystery Box (F) ------------------------------------- */
.ucc-apply-box__form {
  margin: 6px auto 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ucc-apply-mbox {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 6px auto 0;
}
.ucc-apply-mbox__glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, rgba(245, 158, 11, 0) 70%);
  animation: ucc-apply-glow 2.4s ease-in-out infinite;
}
.ucc-apply-mbox__body {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 22px;
  height: 104px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1e3a8a 0%, #0f1d40 100%);
  box-shadow: 0 14px 30px rgba(15, 29, 64, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ucc-apply-mbox__ribbon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 12px);
  width: 24px;
  background: var(--ucc-apply-gold, #f59e0b);
}
.ucc-apply-mbox__q {
  position: relative;
  z-index: 1;
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: ucc-apply-q 1.8s ease-in-out infinite;
}
.ucc-apply-mbox__lid {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 118px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2b4a9b 0%, #1e3a8a 100%);
  box-shadow: 0 6px 14px rgba(15, 29, 64, 0.3);
  transform-origin: 90% 100%;
  z-index: 2;
}
.ucc-apply-mbox__lid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 12px);
  width: 24px;
  background: var(--ucc-apply-gold, #f59e0b);
}
.ucc-apply-mbox__bow {
  position: absolute;
  top: -22px;
  left: calc(50% - 30px);
  width: 60px;
  height: 28px;
}
.ucc-apply-mbox__bow::before,
.ucc-apply-mbox__bow::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 26px;
  height: 22px;
  border: 5px solid var(--ucc-apply-gold, #f59e0b);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-sizing: border-box;
}
.ucc-apply-mbox__bow::before { left: 2px; transform: rotate(-20deg); }
.ucc-apply-mbox__bow::after  { right: 2px; transform: rotate(20deg); }
.ucc-apply-box__open {
  min-width: 240px;
}
.ucc-apply-box.is-opening .ucc-apply-mbox,
.ucc-apply-box__form.is-opening .ucc-apply-mbox {
  animation: ucc-apply-shake 0.5s ease-in-out 1;
}
.ucc-apply-box__form.is-opening .ucc-apply-mbox__lid {
  animation: ucc-apply-lid 0.5s ease-in 0.35s forwards;
}
.ucc-apply-box__form.is-opening .ucc-apply-mbox__glow {
  animation: ucc-apply-burst 0.6s ease-out 0.4s forwards;
}
@keyframes ucc-apply-glow {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@keyframes ucc-apply-q {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes ucc-apply-shake {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-6deg); }
  40%      { transform: rotate(6deg); }
  60%      { transform: rotate(-4deg); }
  80%      { transform: rotate(4deg); }
}
@keyframes ucc-apply-lid {
  to { transform: translateY(-40px) rotate(-28deg); opacity: 0.9; }
}
@keyframes ucc-apply-burst {
  to { transform: scale(1.6); opacity: 0; }
}

/* Congratulations (G, inline) ------------------------------------- */
.ucc-apply-congrats__reward {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 4px auto 18px;
  padding: 16px 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid var(--ucc-apply-gold-line);
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.18);
}
.is-just-revealed .ucc-apply-congrats__reward {
  animation: ucc-apply-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.ucc-apply-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a 0%, #f59e0b 60%, #b45309 100%);
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 6px 16px rgba(245, 158, 11, 0.4);
}
.ucc-apply-congrats__amount {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-congrats__status {
  margin: 0 0 8px;
}
.ucc-apply-status-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--ucc-bg-soft, #f1f5f9);
  border: 1px solid var(--ucc-border, #e2e8f0);
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-status-pill--pending {
  background: var(--ucc-apply-gold-wash);
  border-color: var(--ucc-apply-gold-edge);
  color: var(--ucc-apply-gold-text);
}
.ucc-apply-status-pill--credited {
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--ucc-apply-green-text);
}
.ucc-apply-status-pill--rejected {
  background: var(--ucc-danger-tint, rgba(239, 68, 68, 0.08));
  border-color: rgba(239, 68, 68, 0.35);
  color: #991b1b;
}
@keyframes ucc-apply-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ucc-apply-mbox__glow,
  .ucc-apply-mbox__q,
  .is-just-revealed .ucc-apply-congrats__reward {
    animation: none;
  }
}

/* Responsive ------------------------------------------------------ */
@media (min-width: 600px) {
  .ucc-apply-card {
    padding: 34px 36px;
  }
  .ucc-apply-flow h1 {
    font-size: 2rem;
  }
  .ucc-apply-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ucc-apply-progress__step {
    font-size: 0.875rem;
  }
  .ucc-apply-rec {
    padding: 22px 24px 20px;
  }
}
@media (min-width: 880px) {
  .ucc-apply-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .ucc-apply-progress__label {
    font-size: 0.75rem;
  }
  .ucc-apply-idbox__id {
    font-size: 1.25rem;
  }
  .ucc-apply-chosen .ucc-apply-cardsum__meta {
    display: none; /* no room beside the score pill on a phone */
  }
  .ucc-apply-rec__head {
    flex-wrap: wrap;
  }
  .ucc-apply-score {
    margin-left: 0;
    flex-direction: row;
    gap: 6px;
    min-width: 0;
    padding: 4px 10px;
  }
  .ucc-apply-score__num {
    font-size: 1rem;
  }
  .ucc-apply-rec__actions .ucc-btn {
    flex-basis: 100%; /* width alone loses to the 220px flex-basis */
    width: 100%;
  }
  .ucc-apply-rec__actions .ucc-apply-rec__more {
    flex: 1 1 100%;
    text-align: center;
  }
  .ucc-apply-form__submit {
    width: 100%;
  }
  .ucc-apply-congrats__amount {
    font-size: 1.625rem;
  }
}

/* =========================================================
   10. Build 6b — email-verified claims, provider handoff endpoint,
   wallet step (2026-09-09, plugin 0.3.0)
   ========================================================= */

/* "Check your inbox" line on the created screen (key mode). */
.ucc-apply-inbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.35);
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-inbox .ucc-apply-icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--ucc-accent, #10b981);
}
.ucc-apply-inbox strong {
  color: var(--ucc-text, #0f172a);
}

/* "Reward eligible after: {condition}" (0.5.1) — the per-card reward
   condition from Settings. Same shape as the inbox line: gift icon + one
   sentence in a gold wash (it is reward information, like the badge). */
.ucc-apply-condition {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 22px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ucc-apply-gold-wash);
  border: 1px solid var(--ucc-apply-gold-edge);
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-condition .ucc-apply-icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--ucc-apply-gold);
}
.ucc-apply-condition__label {
  color: var(--ucc-text, #0f172a);
}
/* inside the create / return form cards: full width, the form's 18px rhythm */
.ucc-apply-condition--form {
  max-width: none;
  margin: 0 0 18px;
}
/* on the landing page's navy reward panel */
.ucc-apply-condition--on-dark {
  margin: 14px 0 0;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.5);
  color: rgba(255, 255, 255, 0.88);
}
.ucc-apply-condition--on-dark .ucc-apply-icon,
.ucc-apply-condition--on-dark .ucc-apply-condition__label {
  color: #fde68a;
}
/* the landing's .ucc-apply-reward p rule (margin 0, muted white) must not win over the panel variant */
.ucc-apply-reward p.ucc-apply-condition {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.88);
}

/* "I've completed registration → Check reward eligibility" */
.ucc-apply-eligibility__btn {
  flex-wrap: wrap;
  gap: 6px 10px;
  text-align: center;
  line-height: 1.25;
}
.ucc-apply-eligibility__arrow {
  color: var(--ucc-accent, #10b981);
}
.ucc-apply-return-block__btn.ucc-apply-eligibility__btn {
  width: 100%;
  max-width: 460px;
}

/* Reward screen: the state line under the status pill. */
.ucc-apply-lead--tight {
  margin-bottom: 10px;
}
.ucc-apply-status-pill--pending_verification {
  background: var(--ucc-apply-gold-wash);
  border-color: var(--ucc-apply-gold-edge);
  color: var(--ucc-apply-gold-text);
}
.ucc-apply-status-pill--approved,
.ucc-apply-status-pill--wallet_submitted,
.ucc-apply-status-pill--paid {
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--ucc-apply-green-text);
}

/* Claim details (0.3.1, extended 0.4.1): the provider user ID + email
   and the registration date / hour sit under the "completed" radio,
   indented to the radio's text, and only while that radio is the answer. */
.ucc-apply-refwrap {
  margin: -2px 0 6px 48px;
  padding: 10px 12px 12px;
  border-left: 3px solid var(--ucc-accent, #10b981);
  background: var(--ucc-bg-soft, #f1f5f9);
  border-radius: 0 12px 12px 0;
  display: grid;
  gap: 12px;
}
.ucc-apply-refwrap .ucc-apply-field__sublabel {
  margin-top: 0;
}
.ucc-apply-refwrap__field .ucc-apply-field__sublabel + .ucc-apply-select,
.ucc-apply-refwrap__field .ucc-apply-field__hint + .ucc-apply-field__sublabel {
  margin-top: 8px;
}
.ucc-apply-refwrap__field.is-invalid .ucc-apply-input {
  border-color: #ef4444;
}
.ucc-apply .ucc-apply-input--date {
  max-width: 260px;
}
@media (max-width: 599px) {
  .ucc-apply-refwrap {
    margin-left: 0;
  }
}

/* Wallet form */
.ucc-apply-wallet .ucc-apply-eyebrow {
  margin-bottom: 10px;
}
.ucc-apply .ucc-apply-input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.ucc-apply-walletok__addr {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 4px auto 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--ucc-bg-soft, #f1f5f9);
  border: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-walletok__net {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-walletok__addr .ucc-apply-inline-id {
  font-size: 1rem;
}

/* =========================================================
   11. Build 7 — accounts: the nav account link, /login/, the My UCard
   dashboard pages (side nav + content), status chips, the ledger and
   referral views, the profile, and the account offer on the created
   screen (2026-09-16, plugin 0.4.0). Light theme throughout; the same
   --ucc-apply-card measure as the flow; no wide tables — every list is
   a stack of rows that reflows at phone width.
   ========================================================= */

/* Nav: "Sign in" / "My UCard" — a quiet text link after the language
   switcher (the menu is right-floated, so it sits at the right edge). */
.main-navigation .main-nav ul li.ucc-apply-nav-account > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ucc-primary, #0f1d40);
  font-weight: 600;
}
.main-navigation .main-nav ul li.ucc-apply-nav-account > a .ucc-apply-icon {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.main-navigation .main-nav ul li.ucc-apply-nav-account.is-signed-in > a .ucc-apply-icon {
  color: var(--ucc-accent, #10b981);
  opacity: 1;
}
@media (min-width: 769px) {
  #site-navigation .main-nav > ul > li.ucc-apply-nav-account {
    margin-left: 4px;
  }
  #site-navigation .main-nav > ul > li.ucc-apply-nav-account > a {
    padding-left: 10px;
    padding-right: 4px;
  }
}
@media (min-width: 769px) and (max-width: 1150px) {
  #site-navigation .main-nav > ul > li.ucc-apply-nav-account > a span {
    display: none; /* icon only in the compact desktop band */
  }
}

/* /login/ ------------------------------------------------------ */
.ucc-apply-loginbox {
  max-width: 560px;
}
.ucc-apply-loginbox.ucc-apply-formcard h1 {
  margin-top: 10px;
}
.ucc-apply-form--inline {
  margin-top: 6px;
}
.ucc-apply-form--inline .ucc-apply-form__actions {
  justify-content: center;
}
.ucc-apply .ucc-apply-input--readonly {
  background: var(--ucc-bg-soft, #f1f5f9);
  color: var(--ucc-text-soft, #334155);
  cursor: default;
}

/* Account shell -------------------------------------------------- */
.ucc-apply-acct-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 0 0 18px;
}
.ucc-apply-acct-head h1 {
  margin: 0 0 4px;
}
.ucc-apply-acct-head .ucc-apply-lead {
  margin: 0;
}
.ucc-apply-acct-head__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 9999px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  font-size: 0.875rem;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-acct-head__who .ucc-apply-icon {
  width: 16px;
  height: 16px;
  color: var(--ucc-accent, #10b981);
}
.ucc-apply-acct-head__who strong {
  color: var(--ucc-text, #0f172a);
  word-break: break-all;
}
.ucc-apply-acct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* minmax(0,…): the nav's nowrap pill row must scroll inside its column, never widen the page */
  gap: 18px;
  align-items: start;
}
.ucc-apply-acct-nav {
  min-width: 0;
}
@media (min-width: 900px) {
  .ucc-apply-acct-grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }
}
.ucc-apply-acct-main {
  min-width: 0;
}
.ucc-apply-acct-main > * + * {
  margin-top: 18px;
}

/* Side nav: a vertical list on desktop, a scrollable pill row on phones */
.ucc-apply-acct-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ucc-apply-acct-nav li {
  margin: 0;
  flex: 0 0 auto;
}
.ucc-apply-acct-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  color: var(--ucc-text-soft, #334155);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ucc-apply-acct-nav a .ucc-apply-icon {
  width: 17px;
  height: 17px;
  opacity: 0.8;
}
.ucc-apply-acct-nav a:hover,
.ucc-apply-acct-nav a:focus {
  border-color: var(--ucc-border-strong, #cbd5e1);
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-acct-nav li.is-current a {
  background: var(--ucc-primary, #0f1d40);
  border-color: var(--ucc-primary, #0f1d40);
  color: #fff;
}
.ucc-apply-acct-nav li.is-current a .ucc-apply-icon {
  opacity: 1;
  color: var(--ucc-accent-light, #34d399);
}
.ucc-apply-acct-nav__out a {
  color: var(--ucc-muted, #64748b);
}
@media (min-width: 900px) {
  .ucc-apply-acct-nav {
    position: sticky;
    top: 16px;
  }
  .ucc-apply-acct-nav ul {
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding: 8px;
    background: var(--ucc-bg-card, #fff);
    border: 1px solid var(--ucc-border, #e2e8f0);
    border-radius: 18px;
    box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
  }
  .ucc-apply-acct-nav a {
    display: flex;
    border-color: transparent;
    background: transparent;
  }
  .ucc-apply-acct-nav a:hover,
  .ucc-apply-acct-nav a:focus {
    background: var(--ucc-bg-soft, #f1f5f9);
    border-color: transparent;
  }
  .ucc-apply-acct-nav__out {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ucc-border, #e2e8f0);
  }
}

/* Cards + section headers */
.ucc-apply-acct-card {
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 20px;
  box-shadow: var(--ucc-shadow, 0 4px 12px rgba(15, 29, 64, 0.08));
  padding: 22px 20px;
}
.ucc-apply-acct-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.ucc-apply-acct-card__head h2,
.ucc-apply-acct-card > h2 {
  margin: 0;
  font-size: 1.125rem;
}
.ucc-apply-acct-card__head a {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.ucc-apply-acct-card__note {
  margin: 14px 0 0;
  font-size: 0.8125rem;
}
.ucc-apply-acct-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 760px) {
  .ucc-apply-acct-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ucc-apply-quick .ucc-apply-actions {
  margin-top: 12px;
}

/* Stat tiles */
.ucc-apply-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ucc-apply-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 16px 14px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 16px;
  min-width: 0;
}
.ucc-apply-stat__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-stat__value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-stat__value--text {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}
.ucc-apply-stat__sub {
  font-size: 0.8125rem;
  color: var(--ucc-text-soft, #334155);
}
@media (max-width: 599px) {
  .ucc-apply-stats {
    grid-template-columns: 1fr;
  }
  .ucc-apply-stat {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .ucc-apply-stat__label {
    flex: 1 1 100%;
  }
}

/* Status chips */
.ucc-apply-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ucc-apply-chip--navy {
  background: rgba(15, 29, 64, 0.08);
  color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-chip--green {
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--ucc-apply-green-text);
}
.ucc-apply-chip--gold {
  background: var(--ucc-apply-gold-wash);
  border-color: var(--ucc-apply-gold-edge);
  color: var(--ucc-apply-gold-text);
}
.ucc-apply-chip--muted {
  background: var(--ucc-bg-soft, #f1f5f9);
  color: var(--ucc-muted, #64748b);
}

/* Application rows */
.ucc-apply-applist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ucc-apply-approw {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 14px;
  background: var(--ucc-bg-page, #f8fafc);
}
.ucc-apply-approw__logo {
  width: 44px;
  height: 44px;
}
.ucc-apply-approw__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ucc-apply-approw__brand {
  font-weight: 700;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-approw__meta {
  font-size: 0.8125rem;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-approw__status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.ucc-apply-approw__next {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.ucc-apply-approw__next .ucc-btn {
  white-space: nowrap;
}
.ucc-apply-approw__nextlabel {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ucc-muted, #64748b);
}
@media (max-width: 759px) {
  .ucc-apply-approw {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ucc-apply-approw__status {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .ucc-apply-approw__next {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .ucc-apply-approw__next .ucc-btn {
    width: 100%;
  }
}
.ucc-apply-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 8px 10px;
  text-align: center;
}
.ucc-apply-empty p {
  margin: 0;
  max-width: 460px;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-empty__gift {
  width: 110px;
  height: 110px;
}

/* Balances + ledger rows */
.ucc-apply-balances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ucc-apply-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 0;
  padding: 16px 18px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 16px;
  box-shadow: var(--ucc-shadow-sm, 0 1px 2px rgba(15, 29, 64, 0.06));
}
.ucc-apply-balances--compact .ucc-apply-balance {
  box-shadow: none;
  background: var(--ucc-bg-page, #f8fafc);
  padding: 12px 14px;
}
.ucc-apply-balance__asset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--ucc-primary, #0f1d40);
}
.ucc-apply-coin--sm {
  width: 28px;
  height: 28px;
  font-size: 0.9375rem;
}
.ucc-apply-balance__cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 22px;
}
.ucc-apply-balance__cols > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ucc-apply-balance__cols small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-balance__cols strong {
  font-size: 1.125rem;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-ledgerlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ucc-apply-ledgerrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 12px;
}
.ucc-apply-ledgerrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  color: var(--ucc-apply-green-text);
}
.ucc-apply-ledgerrow__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ucc-apply-ledgerrow__label {
  font-weight: 600;
  color: var(--ucc-text, #0f172a);
}
.ucc-apply-ledgerrow__meta {
  font-size: 0.8125rem;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-ledgerrow__amount {
  font-weight: 800;
  color: var(--ucc-apply-green-text);
  white-space: nowrap;
}
.ucc-apply-ledgerrow__amount.is-negative {
  color: #b91c1c;
}
.ucc-apply-ledgerrow__amount.is-void {
  color: var(--ucc-muted, #64748b);
  text-decoration: line-through;
}
@media (max-width: 599px) {
  .ucc-apply-ledgerrow {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .ucc-apply-ledgerrow__status {
    grid-column: 2 / 4;
  }
}

/* Referrals */
.ucc-apply-refhero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
@media (min-width: 760px) {
  .ucc-apply-refhero {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
}
.ucc-apply-refhero h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
}
.ucc-apply-refhero__gift {
  width: 150px;
  height: 150px;
  justify-self: center;
}
.ucc-apply-refcode {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ucc-bg-page, #f8fafc);
  border: 1px dashed var(--ucc-border-strong, #cbd5e1);
  margin: 4px 0 14px;
}
.ucc-apply-refcode--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  border-style: solid;
}
.ucc-apply-refcode__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ucc-muted, #64748b);
  margin-top: 6px;
}
.ucc-apply-refcode__label:first-child {
  margin-top: 0;
}
.ucc-apply-refcode__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ucc-primary, #0f1d40);
  background: transparent;
  padding: 0;
}
.ucc-apply-refcode__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ucc-apply-refcode__link {
  flex: 1 1 200px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  color: var(--ucc-text, #0f172a);
  overflow-wrap: anywhere;
}
.ucc-apply-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ucc-apply-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid var(--ucc-border-strong, #cbd5e1);
  background: var(--ucc-bg-card, #fff);
  color: var(--ucc-text, #0f172a);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ucc-apply-share__btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.ucc-apply-share__btn--whatsapp { color: #128c7e; }
.ucc-apply-share__btn--telegram { color: #0088cc; }
.ucc-apply-share__btn--x { color: #0f172a; }
.ucc-apply-share__btn--facebook { color: #1877f2; }
.ucc-apply-share__btn:hover,
.ucc-apply-share__btn:focus {
  background: var(--ucc-bg-soft, #f1f5f9);
  border-color: currentColor;
}
.ucc-apply-checklist--left {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.ucc-apply-reflist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ucc-apply-refrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ucc-border, #e2e8f0);
  border-radius: 12px;
}
.ucc-apply-refrow__who {
  font-weight: 600;
  color: var(--ucc-text, #0f172a);
  overflow-wrap: anywhere;
}
.ucc-apply-refrow__meta {
  grid-column: 1;
  font-size: 0.8125rem;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-refrow__status {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Profile */
.ucc-apply-proplist {
  margin: 0;
  display: grid;
  gap: 10px;
}
.ucc-apply-proplist > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-proplist > div:first-child {
  border-top: 0;
  padding-top: 0;
}
.ucc-apply-proplist dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ucc-muted, #64748b);
}
.ucc-apply-proplist dd {
  margin: 0;
  color: var(--ucc-text, #0f172a);
  overflow-wrap: anywhere;
}
.ucc-apply-muted-inline {
  color: var(--ucc-muted, #64748b);
  font-size: 0.875rem;
}
@media (max-width: 599px) {
  .ucc-apply-proplist > div {
    grid-template-columns: 1fr;
  }
}
.ucc-apply-walletrow {
  padding: 14px 0;
  border-top: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-walletrow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.ucc-apply-walletrow .ucc-apply-walletok__addr {
  margin: 0 0 8px;
}
.ucc-apply-walletadd summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}
.ucc-apply-walletadd summary::-webkit-details-marker {
  display: none;
}
.ucc-apply-walletadd[open] summary {
  margin-bottom: 14px;
}
.ucc-apply-walletadd .ucc-apply-form {
  padding: 16px;
  border-radius: 14px;
  background: var(--ucc-bg-page, #f8fafc);
  border: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-danger {
  border-color: rgba(239, 68, 68, 0.35);
}
.ucc-apply-danger h2 {
  color: #991b1b;
}
.ucc-btn--danger,
.ucc-btn--danger:hover,
.ucc-btn--danger:focus {
  background: var(--ucc-danger, #ef4444);
  color: #fff;
  border-color: var(--ucc-danger, #ef4444);
}
.ucc-btn--danger-outline {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.6);
}
.ucc-btn--danger-outline:hover,
.ucc-btn--danger-outline:focus {
  background: var(--ucc-danger, #ef4444);
  border-color: var(--ucc-danger, #ef4444);
  color: #fff;
}

/* The account offer on the created screen */
.ucc-apply-acctoffer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 16px 18px;
  border-radius: 16px;
  text-align: left;
  background: var(--ucc-bg-page, #f8fafc);
  border: 1px solid var(--ucc-border, #e2e8f0);
}
.ucc-apply-acctoffer--in {
  background: var(--ucc-accent-tint, rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.35);
}
.ucc-apply-acctoffer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ucc-bg-card, #fff);
  border: 1px solid var(--ucc-border, #e2e8f0);
  color: var(--ucc-primary, #0f1d40);
  flex: 0 0 auto;
}
.ucc-apply-acctoffer__body {
  flex: 1 1 240px;
  min-width: 0;
}
.ucc-apply-acctoffer__body h2 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}
.ucc-apply-acctoffer__body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ucc-text-soft, #334155);
}
.ucc-apply-acctoffer__form {
  margin: 0;
}