/* Giveth Recap — Spotify-Wrapped-style donation summary
   Visual language: warm beige-purplish backdrop, Giveth purple/green/coral,
   per-tier pastel cards (mostly opaque, slight transparency). */

:root {
  /* Background — warm peach-cream → lavender, deeper and more saturated than v1 light */
  --bg-cream:    #f0dcc4;
  --bg-warm:     #ebcfb6;
  --bg-lavender: #dcc4ec;

  /* Foreground — deep violet for warmth + readability on warm backdrops */
  --fg:          #1b0e3f;
  --fg-muted:    #564270;
  --fg-dim:      #847599;

  /* Giveth brand */
  --giveth-purple:       #5326ec;
  --giveth-purple-light: #a571ff;
  --giveth-green:        #00a26b;
  --giveth-green-soft:   #00c887;
  --pg-coral:            #d6356c;
  --pg-amber:            #d99633;

  /* Accent gradients — Giveth's actual brand poles, with strong contrast on cream/light tiers */
  --grad-accent:    linear-gradient(135deg, var(--giveth-purple) 0%, var(--giveth-green) 100%);
  --grad-archetype: linear-gradient(135deg, #ff5c8a 0%, var(--giveth-purple-light) 50%, var(--giveth-green-soft) 100%);

  /* Card surface — warm cream with mild see-through */
  --card-bg:           rgba(255, 246, 232, 0.82);
  --card-bg-hover:     rgba(255, 246, 232, 0.96);
  --card-border:       rgba(40, 20, 80, 0.16);
  --card-border-strong: rgba(40, 20, 80, 0.28);

  /* Tier section washes — darker, deeper tier hue applied to the framing container */
  --section-portrait-bg:    rgba(83, 38, 236, 0.10);
  --section-portrait-border: rgba(83, 38, 236, 0.32);
  --section-portrait-text:   rgba(83, 38, 236, 0.55);

  --section-offering-bg:    rgba(0, 162, 107, 0.10);
  --section-offering-border: rgba(0, 132, 88, 0.36);
  --section-offering-text:   rgba(0, 132, 88, 0.65);

  --section-pulse-bg:       rgba(214, 92, 50, 0.10);
  --section-pulse-border:   rgba(196, 78, 38, 0.36);
  --section-pulse-text:     rgba(178, 64, 28, 0.65);

  --section-posture-bg:      rgba(60, 100, 190, 0.10);
  --section-posture-border:  rgba(50, 86, 168, 0.36);
  --section-posture-text:    rgba(50, 86, 168, 0.65);

  --section-roster-bg:       rgba(210, 160, 40, 0.10);
  --section-roster-border:   rgba(180, 130, 20, 0.36);
  --section-roster-text:     rgba(150, 100, 10, 0.65);

  /* Per-tier card surfaces — translucent so the section wash shows through */
  --tier-portrait-bg:      rgba(232, 218, 250, 0.62);
  --tier-portrait-border:  rgba(83, 38, 236, 0.32);
  --tier-portrait-hover:   rgba(232, 218, 250, 0.85);

  --tier-offering-bg:     rgba(190, 234, 208, 0.62);
  --tier-offering-border: rgba(0, 162, 107, 0.36);
  --tier-offering-hover:  rgba(190, 234, 208, 0.85);

  --tier-pulse-bg:        rgba(252, 212, 188, 0.62);
  --tier-pulse-border:    rgba(214, 92, 50, 0.34);
  --tier-pulse-hover:     rgba(252, 212, 188, 0.85);

  --tier-posture-bg:       rgba(204, 222, 244, 0.62);
  --tier-posture-border:   rgba(60, 100, 190, 0.34);
  --tier-posture-hover:    rgba(204, 222, 244, 0.85);

  --tier-roster-bg:        rgba(248, 226, 168, 0.62);
  --tier-roster-border:    rgba(180, 130, 20, 0.34);
  --tier-roster-hover:     rgba(248, 226, 168, 0.85);

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-cream);
  color: var(--fg);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 12% 0%,   rgba(83, 38, 236, 0.28), transparent 55%),
    radial-gradient(700px 500px at 88% 18%,  rgba(255, 92, 138, 0.24), transparent 55%),
    radial-gradient(800px 600px at 50% 100%, rgba(0, 162, 107, 0.24), transparent 55%),
    linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-warm) 55%, var(--bg-lavender) 100%);
  background-attachment: fixed;
}

/* ───── Security-round mode — "Shareable Card on Navy" ───────────
   Dark navy backdrop. Single white shareable card centered as the focal
   point. Inside the card: high-contrast slate text, big Fraunces stat
   numbers, Geist body for crisp legibility on phone screenshots.
   Single amber accent (matches the badge). Modern, screenshot-friendly.

   All rules scoped to body.security-mode — default mode untouched. */

body.security-mode {
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(180, 83, 9, 0.10), transparent 65%),
    linear-gradient(180deg, #0b1226 0%, #0e1530 55%, #08101f 100%);
  background-attachment: fixed;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;

  /* Inside-card foreground — slate ramp (pure-white card → black-ish text) */
  --fg:        #0f172a;
  --fg-muted:  #475569;
  --fg-dim:    #94a3b8;

  /* Single accent — amber-700, ties to the ETHSecurity Badge */
  --pg-coral:  #b45309;
  --giveth-purple-light: #1e293b;

  /* Card surface — pure white with crisp slate border */
  --card-bg:           #ffffff;
  --card-bg-hover:     #f8fafc;
  --card-border:       #e2e8f0;
  --card-border-strong:#cbd5e1;

  /* Tier section frames — almost invisible, just a hairline divider */
  --section-portrait-bg:     transparent;
  --section-portrait-border: rgba(21, 35, 77, 0.14);
  --section-portrait-text:   rgba(21, 35, 77, 0.55);

  --section-offering-bg:     transparent;
  --section-offering-border: rgba(21, 35, 77, 0.14);
  --section-offering-text:   rgba(21, 35, 77, 0.55);

  --section-pulse-bg:        transparent;
  --section-pulse-border:    rgba(21, 35, 77, 0.14);
  --section-pulse-text:      rgba(21, 35, 77, 0.55);

  --section-posture-bg:      transparent;
  --section-posture-border:  rgba(21, 35, 77, 0.14);
  --section-posture-text:    rgba(21, 35, 77, 0.55);

  --section-roster-bg:       transparent;
  --section-roster-border:   rgba(139, 51, 39, 0.28);
  --section-roster-text:     #8b3327;

  /* All tier cards share the off-white paper surface */
  --tier-portrait-bg:    var(--card-bg);
  --tier-portrait-border: var(--card-border);
  --tier-portrait-hover: var(--card-bg-hover);

  --tier-offering-bg:    var(--card-bg);
  --tier-offering-border: var(--card-border);
  --tier-offering-hover: var(--card-bg-hover);

  --tier-pulse-bg:       var(--card-bg);
  --tier-pulse-border:   var(--card-border);
  --tier-pulse-hover:    var(--card-bg-hover);

  --tier-posture-bg:     var(--card-bg);
  --tier-posture-border: var(--card-border);
  --tier-posture-hover:  var(--card-bg-hover);

  --tier-roster-bg:      var(--card-bg);
  --tier-roster-border:  var(--card-border);
  --tier-roster-hover:   var(--card-bg-hover);
}

/* ── Page header — clear separation, light text on navy ── */
body.security-mode .page-header {
  margin-bottom: 3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.security-mode #form-section { margin-bottom: 3rem; }

/* ── Shareable card — single-column projects-focused layout in security mode.
   Donor data sits compact at the top; the orange roster owns most of the card. */
body.security-mode #stats:has(> .stats-main) {
  background: #1e1b4b;
  border: none;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 48px rgba(0, 0, 0, 0.55);
  grid-template-columns: 1fr;        /* single column — main stacks above roster */
  gap: 0;
}
body.security-mode #stats:has(> .stats-main) > .stats-main {
  gap: 0;
  padding-right: 0;
  border-right: none;
}

/* ── Page-level chrome (over navy bg) — light text ── */
body.security-mode .brand-name {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #f1f5f9;
}
body.security-mode .tagline {
  color: rgba(241, 245, 249, 0.72);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  max-width: 38rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
body.security-mode .tagline a {
  color: #fbbf24;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 191, 36, 0.5);
  transition: border-color 0.15s;
}
body.security-mode .tagline a:hover { border-bottom-color: #fbbf24; }
body.security-mode #form-section header h1 {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 700;
  background: none !important;
  -webkit-text-fill-color: #f8fafc;
  color: #f8fafc;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* ── Tier blocks — each its own vivid solid colour, edge-to-edge.
   Spine labels in security mode are repositioned as horizontal headers
   at the top of each block (override the default vertical spine layout).
   Compact padding so the donor stats take less vertical real estate. ── */
body.security-mode .tier {
  border-radius: 0;
  border: none;
  padding: 1.25rem 2.2rem 1.4rem;
}
body.security-mode .tier--portrait {
  padding-top: 1.6rem;
}
body.security-mode .tier--roster {
  /* Roster gets generous padding — it's the focal point of the report */
  padding: 1.6rem 2rem 1.6rem;
}
body.security-mode .tier .tier-label {
  position: static !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 0 1.1rem !important;
  text-overflow: clip;
  overflow: visible;
  white-space: normal;
}

body.security-mode .tier--portrait {
  background: #312e81;       /* indigo-900 */
  --on-bg:        #fde68a;
  --on-bg-strong: #fffbeb;
  --on-bg-muted:  rgba(253, 230, 138, 0.72);
  --on-bg-dim:    rgba(253, 230, 138, 0.50);
  --on-bg-link:   #fde68a;
}
body.security-mode .tier--offering {
  background: #fbbf24;       /* amber-400 — Wrapped-bright */
  --on-bg:        #1e1b4b;
  --on-bg-strong: #0f0a2e;
  --on-bg-muted:  rgba(30, 27, 75, 0.72);
  --on-bg-dim:    rgba(30, 27, 75, 0.50);
  --on-bg-link:   #1e1b4b;
}
body.security-mode .tier--posture {
  background: #065f46;       /* emerald-800 */
  --on-bg:        #d1fae5;
  --on-bg-strong: #ecfdf5;
  --on-bg-muted:  rgba(209, 250, 229, 0.72);
  --on-bg-dim:    rgba(209, 250, 229, 0.50);
  --on-bg-link:   #fef3c7;
}
body.security-mode .tier--roster {
  background: #c2410c;       /* deeper orange-700 — less screamy than 600 */
  --on-bg:        #ffffff;
  --on-bg-strong: #ffffff;
  --on-bg-muted:  rgba(255, 255, 255, 0.85);
  --on-bg-dim:    rgba(255, 255, 255, 0.65);
  --on-bg-link:   #ffffff;
  border: none;
  /* Single-column report layout — roster sits below main and spans full width */
  align-self: auto;
  max-height: none;
  overflow: visible;
}
/* Project tile grid — auto-fit columns, all items shown (no pagination) */
body.security-mode .tier--roster .roster-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
  overflow: visible;
}
/* Pagination is auto-hidden in security mode (computePageSize returns list.length) */
body.security-mode .tier--roster .roster-pagination { display: none; }

/* Section titles — !important to win specificity vs the default-mode rules,
   force-uppercase, heavy weight, full contrast. */
body.security-mode .tier-label {
  font-family: "Geist", "Helvetica Neue", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  color: var(--on-bg-strong) !important;
  -webkit-text-stroke: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
body.security-mode .tier-label {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  -webkit-text-stroke: 0;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.95rem;
  color: rgba(21, 35, 77, 0.55);
}
body.security-mode .tier--portrait .tier-label {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-style: italic;
  font-weight: 500;
  color: rgba(21, 35, 77, 0.75);
}

/* ── stats-main becomes a 2-col grid: Subject spans the full row, then
       Contributions + Posture sit side-by-side. ── */
body.security-mode .stats-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
body.security-mode .stats-main > .tier--portrait { grid-column: 1 / -1; }
body.security-mode .stats-main > .tier--offering { grid-column: 1; }
body.security-mode .stats-main > .tier--posture  { grid-column: 2; }

/* Within each side-by-side tier, stats stack vertically (single column).
   Portrait keeps multi-column auto-fit since it has the full width. */
body.security-mode .stats-main .tier--offering .tier-grid,
body.security-mode .stats-main .tier--posture  .tier-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 0.5rem;
}
body.security-mode .stats-main .tier--portrait .tier-grid {
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
  align-items: stretch;
}
body.security-mode .stats-main .stat--wide,
body.security-mode .stats-main .stat--project { grid-column: 1 / -1; }

/* Mobile / narrow screens: collapse Contributions + Posture back to a single column */
@media (max-width: 720px) {
  body.security-mode .stats-main { grid-template-columns: 1fr; }
  body.security-mode .stats-main > .tier--offering,
  body.security-mode .stats-main > .tier--posture { grid-column: 1; }
}

/* ── Stats inside vivid tier blocks: each in its own translucent inset.
   Single padding rhythm + consistent flex layout so labels/values/subs sit at
   the same baselines across all cards in a row. ── */
body.security-mode .stat {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.7rem 0.85rem 0.8rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
body.security-mode .stat:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: none;
  box-shadow: none;
}
body.security-mode .tier--offering .stat {
  background: rgba(30, 27, 75, 0.08);
  border-color: rgba(30, 27, 75, 0.18);
}
body.security-mode .tier--offering .stat:hover {
  background: rgba(30, 27, 75, 0.14);
  border-color: rgba(30, 27, 75, 0.30);
}

/* Hierarchy:
   stat-icon  → small (28px) accent
   .label     → smallest, muted, uppercase
   .value     → biggest within a stat (~2× label)
   .sub       → small body-text, muted

   All Geist. Weight variation does the heavy lifting. */

body.security-mode .stat .label {
  font-family: "Geist", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.10em;
  color: var(--on-bg-muted);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
body.security-mode .stat .value {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--on-bg-strong);
  line-height: 1.05;
  margin-top: 0;
}
body.security-mode .stat--small .value { font-size: 1.4rem; }
body.security-mode .stat--wide .value  { font-size: 1.7rem; }
body.security-mode .stat--portrait .value {
  background: none !important;
  -webkit-text-fill-color: var(--on-bg-strong);
  color: var(--on-bg-strong);
}
body.security-mode .stat .sub {
  font-family: "Geist", sans-serif;
  font-size: 0.7rem;
  color: var(--on-bg-muted);
  margin-top: 0.25rem;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 500;
}
body.security-mode .stat a {
  color: var(--on-bg-link);
  text-decoration: none;
  border-bottom: 1px solid var(--on-bg-muted);
  font-weight: 600;
}
body.security-mode .stat a:hover { border-bottom-color: var(--on-bg-strong); }

/* Stat icon chips — small, sits inline with the label */
body.security-mode .stat-icon {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-bg);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  margin-bottom: 0.3rem;
}
body.security-mode .stat-icon svg { width: 13px; height: 13px; }
body.security-mode .tier--offering .stat-icon {
  /* darker chip on the bright amber bg for contrast */
  background: rgba(30, 27, 75, 0.12);
  color: #1e1b4b;
  border-color: rgba(30, 27, 75, 0.22);
}

/* ── Subject block — same row-based spacing as the default recap. ── */
body.security-mode #who {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  box-shadow: none;
  border-bottom: 1px solid rgba(253, 230, 138, 0.18);
}
body.security-mode #who::before { display: none; }

/* Portrait row — header on the left, hero callout on the right. */
body.security-mode .portrait-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
body.security-mode .portrait-row > .portrait-header {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
body.security-mode .portrait-callout {
  flex: 0 1 320px;
  min-width: 220px;
  text-align: right;
  margin: 0;
  padding-left: 1rem;
  border-left: 1px solid rgba(253, 230, 138, 0.22);
  align-self: center;
}
body.security-mode .portrait-callout-title {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--on-bg-strong);
  margin: 0 0 0.6rem;
}
body.security-mode .portrait-callout-cta {
  font-family: "Geist", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-bg-muted);
  margin: 0;
  line-height: 1.4;
}
body.security-mode .portrait-callout-cta a {
  color: #fbbf24;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 191, 36, 0.45);
  transition: border-color 0.15s ease;
}
body.security-mode .portrait-callout-cta a:hover {
  border-bottom-color: #fbbf24;
}
@media (max-width: 720px) {
  body.security-mode .portrait-callout {
    flex: 1 1 100%;
    text-align: left;
    border-left: none;
    border-top: 1px solid rgba(253, 230, 138, 0.22);
    padding-left: 0;
    padding-top: 0.85rem;
    margin-top: 0.4rem;
  }
}

body.security-mode .portrait-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0.1rem 0 0.5rem;
  text-align: left;
}
body.security-mode .portrait-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

body.security-mode .avatar {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
  margin: 0;
}

body.security-mode .portrait-name {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-bg-strong);
  margin: 0;
  word-break: break-word;
}

body.security-mode .badges {
  justify-content: flex-start;
  width: auto;
  margin: 0;
}
body.security-mode .badges--expert { margin: 0; }

body.security-mode .archetype-note {
  font-family: "Geist", sans-serif;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-bg-muted);
  line-height: 1.45;
  margin: 0 0 0.85rem;
  text-align: left;
}

/* Wallet — full address on a single long line, sits left-aligned in the
   flow column with the same spacing rhythm as the default recap pills. */
body.security-mode .addr {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--on-bg-strong);
  white-space: nowrap;
  overflow-x: auto;
  cursor: text;
  padding: 0.36rem 0.7rem;
  letter-spacing: 0.01em;
}
/* hide scrollbar chrome but keep horizontal scroll on overflow */
body.security-mode .addr::-webkit-scrollbar { display: none; }
body.security-mode .addr { scrollbar-width: none; }
body.security-mode .addr-label {
  font-family: "Geist", sans-serif;
  color: var(--on-bg-muted);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Latest-donors widget (homepage only) ── */
body.security-mode .latest-donors {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}
body.security-mode .latest-donors-title {
  font-family: "Geist", sans-serif;
  letter-spacing: 0.12em;
  color: #475569;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
}
body.security-mode .latest-donor {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
body.security-mode .latest-donor:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
body.security-mode .latest-donor-name { color: #0f172a; font-weight: 600; }
body.security-mode .latest-donor:hover .latest-donor-name { color: #b45309; }
body.security-mode .latest-donor-avatar { border-color: #fff; }
body.security-mode .latest-donor-meta,
body.security-mode .latest-donor-project { color: #64748b; }

/* ── Form / status / empty state ── */
body.security-mode #addr-form label {
  font-family: "Geist", sans-serif;
  color: rgba(241, 245, 249, 0.75);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
body.security-mode #addr-form input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #f8fafc;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
body.security-mode #addr-form input:focus {
  border-color: #fbbf24;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
body.security-mode #addr-form input::placeholder { color: rgba(241, 245, 249, 0.35); }
body.security-mode #addr-form button {
  background: #f8fafc;
  color: #0b1226;
  border-radius: 10px;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}
body.security-mode #addr-form button:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
  transform: translateY(-1px);
}
body.security-mode #status {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 0.92rem;
  color: rgba(241, 245, 249, 0.80);
  font-family: "Geist", sans-serif;
}
body.security-mode #status.error {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(248, 113, 113, 0.4);
  color: #fecaca;
}
body.security-mode .empty-state {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.40);
}
body.security-mode .empty-state-title {
  color: #0f172a;
  font-family: "Geist", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.security-mode .empty-state p { color: #475569; }
body.security-mode .empty-state code { background: #f1f5f9; color: #0f172a; }
body.security-mode .empty-cta--primary {
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20);
}
body.security-mode .empty-cta--primary:hover {
  background: #1e293b;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.30);
}
body.security-mode .empty-cta--secondary {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
body.security-mode .empty-cta--secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* ── Project hero (inside portrait/offering tiers) ── */
body.security-mode .project-hero { color: var(--on-bg-strong); }
body.security-mode .project-hero:hover { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
body.security-mode .project-hero-title {
  color: var(--on-bg-strong);
  font-family: "Geist", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
body.security-mode .project-hero:hover .project-hero-title { color: var(--on-bg); }
body.security-mode .project-hero-img { border-color: rgba(255, 255, 255, 0.20); border-radius: 10px; }
body.security-mode .project-hero-sub {
  color: var(--on-bg-muted);
  font-family: "Geist", sans-serif;
  font-size: 0.86rem;
  margin-top: 0.3rem;
}
body.security-mode .project-hero-footnote {
  color: var(--on-bg-dim);
  font-family: "Geist", sans-serif;
  font-style: italic;
  font-size: 0.74rem;
  margin-top: 0.3rem;
}
/* Offering tier: amber bg → darker variants */
body.security-mode .tier--offering .project-hero:hover { background: rgba(30, 27, 75, 0.08); }
body.security-mode .tier--offering .project-hero-img { border-color: rgba(30, 27, 75, 0.20); }

/* Roster items: 75% white over the orange bg — the orange tints through,
   tones the contrast down without sacrificing readability of dark text. */
body.security-mode .roster-item {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.55rem 0.7rem;
}
body.security-mode .roster-item:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
body.security-mode .roster-item-title {
  color: #1c1917;
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
}
body.security-mode .roster-item:hover .roster-item-title { color: #c2410c; }
body.security-mode .roster-item-meta {
  color: #57534e;
  font-family: "Geist", sans-serif;
  font-weight: 500;
}
body.security-mode .roster-item-img {
  border-color: rgba(0, 0, 0, 0.10);
  border-radius: 8px;
}
body.security-mode .roster-page-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.40);
}
body.security-mode .roster-page-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.65);
}
body.security-mode .roster-page-indicator {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Geist", sans-serif;
  font-weight: 600;
}

/* ── Badge rows in security mode:
       expert pill on its OWN row (full medallion treatment)
       three axis pills on a single row (no wrap)
   ── */
body.security-mode .badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
}
body.security-mode .badges--expert { margin-bottom: 0.45rem; }
body.security-mode .badges--archetype { flex-wrap: wrap; row-gap: 0.4rem; }

body.security-mode .archetype-badge {
  font-family: "Geist", sans-serif;
  border-radius: 999px;
  letter-spacing: 0.01em;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.34rem 0.78rem;
  text-shadow: none;
  text-transform: none;
  box-shadow: none;
  white-space: nowrap;
}
/* Magnitude ── solid amber, uppercase, label-like (rank) */
body.security-mode .archetype-badge--scale {
  background: #fbbf24;
  color: #1e1b4b;
  border: 1px solid #fbbf24;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Strategy ── cream fill, title case (descriptive) */
body.security-mode .archetype-badge--pattern {
  background: rgba(253, 230, 138, 0.92);
  color: #1e1b4b;
  border: 1px solid rgba(253, 230, 138, 0.92);
  font-weight: 600;
}
/* Behaviour ── outlined ghost, italic (footnote-like) */
body.security-mode .archetype-badge--vibe {
  background: transparent;
  color: #fde68a;
  border: 1px solid rgba(253, 230, 138, 0.50);
  font-weight: 500;
  font-style: italic;
}
body.security-mode .archetype-badge--expert {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  color: #fff;
  border: 1px solid #b45309;
  box-shadow: 0 2px 12px rgba(180, 83, 9, 0.50);
}
body.security-mode .archetype-badge--expert .expert-verify {
  color: rgba(255, 255, 255, 0.82);
  border-left-color: rgba(255, 255, 255, 0.30);
  font-family: "Geist", sans-serif;
  letter-spacing: 0.04em;
}
body.security-mode .archetype-badge--expert .expert-verify:hover { color: #fff; }

/* ── Toggle pill on the navy bg ── */
body.security-mode .security-toggle {
  font-family: "Geist", sans-serif;
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  font-weight: 600;
}
body.security-mode .security-toggle[aria-pressed="true"] {
  background: #fbbf24;
  color: #0b1226;
  border-color: #fbbf24;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.30);
}
body.security-mode .security-toggle:not([aria-pressed="true"]) {
  border-color: rgba(255, 255, 255, 0.30);
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
}
body.security-mode .security-toggle:not([aria-pressed="true"]):hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ── Fan tag ── */
body.security-mode .fan-tag {
  font-family: "Geist", sans-serif;
  background: rgba(180, 83, 9, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fbbf24;
  border-radius: 999px;
  letter-spacing: -0.005em;
  font-weight: 600;
}

/* ── Footer (on the navy bg) ── */
body.security-mode footer {
  font-family: "Geist", sans-serif;
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(241, 245, 249, 0.55);
}
body.security-mode footer a { color: rgba(241, 245, 249, 0.85); }
body.security-mode .footer-credit a { color: #fbbf24; }
body.security-mode .footer-heart {
  background: none !important;
  -webkit-text-fill-color: #fbbf24;
  color: #fbbf24;
}

/* ── Tooltip — dark on white card ── */
body.security-mode .archetype-badge[data-tip]::after {
  background: #0f172a;
  color: #f8fafc;
  font-family: "Geist", sans-serif;
  border: none;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.security-mode .archetype-badge[data-tip]::before {
  border-top-color: #0f172a;
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* ───── Brand header ───── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0;
}

/* Security-round toggle, top-right opposite the brand */
.security-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  border: 1.5px solid #1f3070;
  background: rgba(31, 48, 112, 0.06);
  color: #122148;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
}
.security-toggle:hover {
  background: rgba(31, 48, 112, 0.13);
  transform: translateY(-1px);
}
.security-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, #1f3070 0%, #122148 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 12px rgba(18, 33, 72, 0.45);
}
.security-toggle-icon { font-size: 0.95rem; line-height: 1; }
@media (max-width: 600px) {
  .security-toggle-label { display: none; }
  .security-toggle { padding: 0.5rem 0.7rem; }
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 0.1rem 0.2rem;
  transition: opacity 0.15s, transform 0.1s;
}
.brand-link:hover { opacity: 0.85; }
.brand-link:active { transform: scale(0.98); }
.brand-link:focus-visible {
  outline: 2px solid var(--giveth-purple-light);
  outline-offset: 3px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

/* Default mode shows the heart, security mode swaps in the hex-shield + ETH diamond */
.brand-mark--security { display: none; }
body.security-mode .brand-mark--default { display: none; }
body.security-mode .brand-mark--security { display: block; }
.brand-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.fan-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-coral);
  background: rgba(214, 53, 108, 0.10);
  border: 1px solid rgba(214, 53, 108, 0.30);
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  cursor: help;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .brand { gap: 0.5rem; }
  .brand-mark { width: 36px; height: 36px; flex: 0 0 36px; }
  .brand-name { font-size: 1.15rem; }
  .fan-tag { font-size: 0.62rem; padding: 0.28rem 0.55rem; letter-spacing: 0.06em; }
}

/* ───── Form (initial state) ───── */
header h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 0 0 2.5rem;
  color: var(--fg-muted);
  font-size: 1.05rem;
  max-width: 32rem;
}

#form-section {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 2rem;
}
.form-section-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 760px) {
  #form-section { grid-template-columns: 1fr; gap: 1.25rem; }
}

#addr-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0;
}

#addr-form label {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

#addr-form input {
  padding: 0.85rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--card-border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: border-color 0.15s, background 0.15s;
}
#addr-form input::placeholder { color: var(--fg-dim); }
#addr-form input:focus {
  outline: none;
  border-color: var(--giveth-purple-light);
  background: #fff;
}

#addr-form button {
  align-self: flex-start;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  background: var(--grad-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s, box-shadow 0.15s;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 16px rgba(83, 38, 236, 0.25);
}
#addr-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(83, 38, 236, 0.35);
}
#addr-form button:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* ───── Latest donors (homepage right column) ───── */
.latest-donors {
  border: 1px solid var(--card-border);
  background: rgba(255, 250, 240, 0.7);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 1px 3px rgba(50, 30, 90, 0.05);
}
.latest-donors-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--giveth-purple);
}
.latest-donors-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.latest-donors-loading {
  font-size: 0.8rem;
  color: var(--fg-muted);
  padding: 0.4rem 0.5rem;
}

.latest-donor {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--card-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.latest-donor:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}
.latest-donor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grad-archetype);
  background-size: cover;
  background-position: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(50, 30, 90, 0.15);
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.latest-donor-text { min-width: 0; }
.latest-donor-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-donor:hover .latest-donor-name { color: var(--pg-coral); }
.latest-donor-meta {
  display: flex;
  gap: 0.55rem;
  font-size: 0.66rem;
  color: var(--fg-muted);
  margin-top: 0.18rem;
}
.latest-donor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  white-space: nowrap;
}
.latest-donor-chip svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.latest-donor-project {
  font-size: 0.68rem;
  color: var(--fg-muted);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-donor-project::before {
  content: "→ ";
  opacity: 0.5;
}

/* ───── Status bar ───── */
#status {
  padding: 1rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--fg-muted);
}
#status.error {
  border-color: rgba(220, 80, 100, 0.35);
  color: #a83253;
  background: rgba(255, 215, 220, 0.55);
}

/* ───── Donor identity (lives inside the portrait tier) ───── */
.portrait-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0.1rem 0 0.5rem;
}
.portrait-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  min-width: 0;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 250, 240, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(50, 30, 90, 0.12);
  display: block;
}
.avatar--placeholder {
  background: var(--grad-archetype);
}
.avatar--blockie {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.archetype-badge {
  position: relative;
  display: inline-block;
  padding: 0.32rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  color: #fff;
  text-shadow: 0 1px 2px rgba(50, 30, 90, 0.22);
  box-shadow: 0 2px 6px rgba(50, 30, 90, 0.14);
  white-space: nowrap;
  cursor: help;
}

/* Hover tooltip — CSS-only, no JS. The native title attribute is also set
   for screen readers and as a fallback. */
.archetype-badge[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg);
  color: #fff;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(20, 8, 50, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease 0.05s;
  z-index: 10;
}
.archetype-badge[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.1rem);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--fg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease 0.05s;
  z-index: 10;
}
.archetype-badge[data-tip]:hover::after,
.archetype-badge[data-tip]:hover::before,
.archetype-badge[data-tip]:focus::after,
.archetype-badge[data-tip]:focus::before { opacity: 1; }

/* Headline (scale): the "how big" — full archetype gradient, most prominent */
.archetype-badge--scale {
  background: var(--grad-archetype);
  box-shadow: 0 2px 10px rgba(83, 38, 236, 0.28);
}

/* Secondary (pattern): the "how they give" — Giveth purple→green */
.archetype-badge--pattern {
  background: var(--grad-accent);
}

/* Tertiary (vibe): the "who they are" — softer outlined treatment */
.archetype-badge--vibe {
  background: transparent;
  color: var(--giveth-purple);
  border: 1.5px solid var(--giveth-purple);
  text-shadow: none;
  box-shadow: none;
}

/* Special: on-chain ETHSecurity Badge — deep indigo pill, shield emoji, verify link */
.archetype-badge--expert {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem 0.3rem 0.6rem;
  background: linear-gradient(135deg, #1f3070 0%, #122148 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(18, 33, 72, 0.45);
}
.archetype-badge--expert .expert-emoji {
  font-size: 0.92em;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
.archetype-badge--expert .expert-label {
  letter-spacing: 0.1em;
}
.archetype-badge--expert .expert-verify {
  margin-left: 0.1rem;
  padding-left: 0.45rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.archetype-badge--expert .expert-verify:hover {
  color: #fff;
  text-decoration: underline;
}

.addr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--fg-muted);
  background: rgba(255, 250, 240, 0.55);
  border: 1px solid var(--card-border);
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-pill);
  word-break: break-all;
  max-width: 100%;
}
.addr-label {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  font-family: "Space Grotesk", sans-serif;
}

.archetype-note {
  margin: 0 0 0.85rem;
  color: var(--fg-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ───── Stats layout ──────────────────────────────────────────────
   Left column: all four main tiers stacked.
   Right column: roster sidebar — sits at the top of the row and stops about
                 halfway through (max-height set in JS based on main column).
*/
#stats {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.stats-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.tier--roster {
  display: flex;
  flex-direction: column;
  align-self: start;
  overflow: hidden;
}

.tier {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1rem 1rem 1rem 2.75rem;
  border: 1px solid;
}

.tier-label {
  position: absolute;
  left: 0.7rem;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.82rem;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tier--portrait .tier-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* Subtle text-stroke trick to read heavier than the abstract category labels at the same weight. */
  -webkit-text-stroke: 0.4px currentColor;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.tier--portrait  { background: var(--section-portrait-bg);  border-color: var(--section-portrait-border); }
.tier--offering { background: var(--section-offering-bg); border-color: var(--section-offering-border); }
.tier--pulse    { background: var(--section-pulse-bg);    border-color: var(--section-pulse-border); }
.tier--posture   { background: var(--section-posture-bg);   border-color: var(--section-posture-border); }
.tier--roster    { background: var(--section-roster-bg);    border-color: var(--section-roster-border); }

.tier--portrait  .tier-label { color: var(--section-portrait-text); }
.tier--offering .tier-label { color: var(--section-offering-text); }
.tier--pulse    .tier-label { color: var(--section-pulse-text); }
.tier--posture   .tier-label { color: var(--section-posture-text); }
.tier--roster    .tier-label { color: var(--section-roster-text); }

/* ───── Stat cards ───── */
.stat {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  padding: 0.9rem 1rem 0.95rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(40, 20, 80, 0.07);
}

.stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ic) 22%, transparent);
  color: var(--ic);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
}
.stat-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.stat .label {
  font-size: 0.65rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}
.stat .value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  word-break: break-word;
  color: var(--fg);
}
.stat .sub {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
  line-height: 1.35;
}
.stat a { color: var(--pg-coral); text-decoration: none; font-weight: 600; }
.stat a:hover { text-decoration: underline; }

.stat--wide        { grid-column: span 2; }
.stat--wide .value { font-size: 1.95rem; }

/* ───── Per-tier card colors (translucent, wash from section shows through) ───── */
.stat--portrait {
  background: var(--tier-portrait-bg);
  border-color: var(--tier-portrait-border);
}
.stat--portrait:hover { background: var(--tier-portrait-hover); }
.stat--portrait .value {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat--small.stat--portrait .value { font-size: 1.7rem; }

.stat--offering {
  background: var(--tier-offering-bg);
  border-color: var(--tier-offering-border);
}
.stat--offering:hover { background: var(--tier-offering-hover); }

.stat--pulse {
  background: var(--tier-pulse-bg);
  border-color: var(--tier-pulse-border);
}
.stat--pulse:hover { background: var(--tier-pulse-hover); }

.stat--posture {
  background: var(--tier-posture-bg);
  border-color: var(--tier-posture-border);
}
.stat--posture:hover { background: var(--tier-posture-hover); }

/* ───── Roster sidebar (supported projects list) ───── */
.roster-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-height: 0;
}
.roster-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--section-roster-border);
  flex-shrink: 0;
}
.roster-page-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--tier-roster-bg);
  border: 1px solid var(--tier-roster-border);
  color: var(--section-roster-text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
  padding: 0;
}
.roster-page-btn:hover:not(:disabled) {
  background: var(--tier-roster-hover);
  transform: translateY(-1px);
}
.roster-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.roster-page-indicator {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--section-roster-text);
  min-width: 3.5rem;
  text-align: center;
}

.roster-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--tier-roster-bg);
  border: 1px solid var(--tier-roster-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, transform 0.15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.roster-item:hover {
  background: var(--tier-roster-hover);
  transform: translateY(-1px);
}
.roster-item-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: rgba(50, 30, 90, 0.08);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.roster-item-img.placeholder {
  background-image: linear-gradient(135deg, var(--giveth-purple) 0%, var(--giveth-green-soft) 100%);
}
.roster-item-text { min-width: 0; }
.roster-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-item:hover .roster-item-title { color: var(--pg-coral); }
.roster-item-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.7rem;
  color: var(--fg-muted);
  margin-top: 0.18rem;
}
.roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  white-space: nowrap;
  cursor: help;
}
.roster-chip svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ───── Project hero card ───── */
.stat--project { grid-column: span 2; padding: 0.7rem 0.85rem 0.85rem; }
.stat--project .label {
  margin: 0.15rem 0 0.5rem 0.4rem;
}

.project-hero {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.project-hero:hover { background: rgba(50, 30, 90, 0.04); }

.project-hero-img {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  background-color: rgba(50, 30, 90, 0.08);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.project-hero-img.placeholder {
  background-image: linear-gradient(135deg, var(--giveth-purple) 0%, var(--giveth-green-soft) 100%);
}

.project-hero-text {
  min-width: 0;
}
.project-hero-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  word-break: break-word;
  line-height: 1.25;
}
.project-hero-sub {
  margin-top: 0.3rem;
  color: var(--fg-muted);
  font-size: 0.82rem;
}
.project-hero-footnote {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--fg-dim);
  font-style: italic;
}
.project-hero:hover .project-hero-title { color: var(--pg-coral); }

/* ───── Empty state (no Giveth profile) ───── */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 12px rgba(40, 20, 80, 0.06);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 16px;
  background: var(--grad-archetype);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(83, 38, 236, 0.22);
}
.empty-state-icon svg { width: 28px; height: 28px; }

.empty-state-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.empty-state-title code {
  background: rgba(50, 30, 90, 0.08);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  word-break: break-all;
}

.empty-state p {
  margin: 0 auto 0.6rem;
  max-width: 32rem;
  color: var(--fg-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.empty-state-prompt {
  margin-top: 1rem !important;
  color: var(--fg) !important;
  font-weight: 500;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.empty-cta {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
  letter-spacing: 0.01em;
}
.empty-cta:hover { transform: translateY(-1px); }

.empty-cta--primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 3px 14px rgba(83, 38, 236, 0.28);
}
.empty-cta--primary:hover {
  box-shadow: 0 5px 18px rgba(83, 38, 236, 0.38);
}

.empty-cta--secondary {
  background: rgba(255, 255, 255, 0.75);
  color: var(--giveth-purple);
  border: 1.5px solid var(--giveth-purple);
}
.empty-cta--secondary:hover {
  background: #fff;
}

/* ───── Footer ───── */
footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
  font-size: 0.8rem;
  color: var(--fg-dim);
  text-align: center;
}
footer p { margin: 0 0 0.4rem; }
footer p:last-child { margin-bottom: 0; }
footer a { color: var(--fg-muted); }

.footer-credit { font-size: 0.78rem; color: var(--fg-muted); }
.footer-credit a {
  font-weight: 600;
  color: var(--pg-coral);
  text-decoration: none;
}
.footer-credit a:hover { text-decoration: underline; }
.footer-heart {
  background: var(--grad-archetype);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  margin: 0 0.1rem;
}

/* ───── Responsive ───── */
@media (max-width: 820px) {
  #stats { grid-template-columns: 1fr; }
  .tier--roster { max-height: 36rem !important; }
}

@media (max-width: 600px) {
  .page { padding: 1.5rem 1rem 3rem; }
  header h1 { font-size: 2rem; }
  .tier { padding: 1.6rem 0.85rem 0.85rem; }
  .tier-label {
    writing-mode: horizontal-tb;
    transform: none;
    position: static;
    width: auto;
    height: auto;
    margin-bottom: 0.6rem;
    justify-content: flex-start;
    letter-spacing: 0.3em;
  }
  .tier-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .stat--wide,
  .stat--project { grid-column: span 1; }
  .stat--wide .value { font-size: 1.7rem; }
  .stat--small.stat--portrait .value { font-size: 1.5rem; }
  .project-hero { grid-template-columns: 64px 1fr; gap: 0.85rem; }
  .project-hero-img { width: 64px; height: 64px; }
  #who { padding: 2rem 1rem 1.5rem; }
}