/* ============================================================
   Rovify · /verify/<id> — public career passport
   Petite + cutesy aesthetic · soft dark · emerald/mint/peach
   ============================================================ */

/* ── Reset Frappe chrome ─────────────────────────────────── */
body { background: #0a0a0f !important; color: #e9e9ee !important; }
.page-content-wrapper, .page-breadcrumbs, .page-header-wrapper,
.page-header, .page_content {
  background: transparent !important;
  padding: 0 !important; margin: 0 !important;
}
.container.my-4 { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
main.container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Tokens (cute) ──────────────────────────────────────── */
:root {
  --vp-bg: #0a0a0f;
  --vp-bg-2: #0f0f17;
  --vp-panel: #14141d;
  --vp-panel-2: #181822;
  --vp-panel-3: #1d1d28;
  --vp-glass: rgba(28, 28, 38, 0.55);
  --vp-line: rgba(255,255,255,0.06);
  --vp-line-2: rgba(255,255,255,0.10);
  --vp-line-3: rgba(255,255,255,0.16);
  --vp-text: #f3f3f6;
  --vp-text-2: #d8d8df;
  --vp-muted: #9395a3;
  --vp-muted-2: #62646f;

  /* Accents — emerald primary, mint + peach for warmth */
  --vp-emerald: #10b981;
  --vp-emerald-light: #34d399;
  --vp-emerald-dim: #059669;
  --vp-emerald-glow: rgba(16, 185, 129, 0.32);
  --vp-emerald-soft: rgba(16, 185, 129, 0.10);
  --vp-emerald-soft-2: rgba(16, 185, 129, 0.18);
  --vp-mint: #6ee7b7;
  --vp-mint-soft: rgba(110, 231, 183, 0.10);
  --vp-peach: #fda4af;
  --vp-peach-soft: rgba(253, 164, 175, 0.10);
  --vp-peach-soft-2: rgba(253, 164, 175, 0.20);
  --vp-amber: #fbbf24;
  --vp-amber-soft: rgba(251, 191, 36, 0.12);
  --vp-amber-soft-2: rgba(251, 191, 36, 0.28);
  --vp-danger: #f87171;
  --vp-danger-soft: rgba(248, 113, 113, 0.12);
  --vp-danger-soft-2: rgba(248, 113, 113, 0.28);

  /* Generous corner radii — capsule + bubble feel */
  --vp-rad-sm: 10px;
  --vp-rad-md: 14px;
  --vp-rad-lg: 18px;
  --vp-rad-xl: 22px;
  --vp-rad-2xl: 28px;
  --vp-rad-pill: 999px;

  --vp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy aliases so anything still referencing old vars keeps working */
  --bg: var(--vp-bg); --bg-2: var(--vp-bg-2);
  --panel: var(--vp-panel); --panel-2: var(--vp-panel-2);
  --line: var(--vp-line); --line-2: var(--vp-line-2); --line-3: var(--vp-line-3);
  --text: var(--vp-text); --muted: var(--vp-muted); --muted-2: var(--vp-muted-2);
  --emerald: var(--vp-emerald); --emerald-2: var(--vp-emerald-light);
  --emerald-glow: var(--vp-emerald-glow); --emerald-soft: var(--vp-emerald-soft);
  --amber: var(--vp-amber); --amber-soft: var(--vp-amber-soft);
  --danger: var(--vp-danger); --danger-soft: var(--vp-danger-soft);
}

/* ── Page shell ─────────────────────────────────────────── */
.rvf-vp {
  min-height: 100vh;
  background:
    radial-gradient(900px 320px at 16% -8%, rgba(110,231,183,0.10), transparent 60%),
    radial-gradient(700px 280px at 92% 4%, rgba(253,164,175,0.07), transparent 60%),
    radial-gradient(900px 380px at 50% 100%, rgba(16,185,129,0.06), transparent 60%),
    var(--vp-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  color: var(--vp-text);
}

/* ── Icons ──────────────────────────────────────────────── */
.rvf-i {
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ── Top bar ────────────────────────────────────────────── */
.rvf-vp__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; height: 56px;
  border-bottom: 1px solid var(--vp-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(10,10,15,0.72);
  position: sticky; top: 0; z-index: 50;
}
.rvf-vp__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--vp-text); text-decoration: none;
  font-size: 13px;
  padding: 6px 9px; margin-left: -6px;
  border-radius: var(--vp-rad-md);
  transition: background .15s;
}
.rvf-vp__brand:hover { background: rgba(255,255,255,0.04); text-decoration: none; color: var(--vp-text); }
.rvf-vp__brand img { height: 22px; border-radius: 6px; display: block; }
.rvf-vp__brand-name { color: var(--vp-muted); font-weight: 500; }
.rvf-vp__brand-name b { color: var(--vp-text); margin-right: 4px; font-weight: 600; }

.rvf-vp__seal {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--vp-rad-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--vp-emerald-soft) 0%, var(--vp-mint-soft) 100%);
  color: var(--vp-emerald);
  border: 1px solid var(--vp-emerald-soft-2);
}
.rvf-vp__seal::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: vpPulse 2.4s ease-in-out infinite;
}
.rvf-vp__seal .rvf-i { width: 11px; height: 11px; }
@keyframes vpPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.6; }
}

/* ── Layout ─────────────────────────────────────────────── */
.rvf-vp__wrap {
  max-width: 920px; margin: 0 auto;
  padding: 28px 22px 80px;
}
@media (max-width: 700px) {
  .rvf-vp__wrap { padding: 18px 14px 64px; }
}

/* ── HERO ───────────────────────────────────────────────── */
.rvf-vp__hero {
  background:
    radial-gradient(640px 200px at 0% 0%, rgba(110,231,183,0.10) 0%, transparent 65%),
    radial-gradient(420px 200px at 100% 100%, rgba(253,164,175,0.06) 0%, transparent 70%),
    linear-gradient(180deg, var(--vp-panel) 0%, var(--vp-panel-2) 100%);
  border: 1px solid var(--vp-line-2);
  border-radius: var(--vp-rad-2xl);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px; align-items: center;
  position: relative; overflow: hidden;
}
.rvf-vp__hero::after {
  content: "✦";
  position: absolute; right: 22px; top: 18px;
  color: var(--vp-mint);
  font-size: 12px; opacity: 0.4;
  text-shadow: 0 0 12px var(--vp-emerald-glow);
  pointer-events: none;
  animation: vpTwinkle 3.6s ease-in-out infinite;
}
@keyframes vpTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.18); }
}

.rvf-vp__avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vp-emerald-light) 0%, var(--vp-emerald-dim) 100%);
  color: #04130b; font-weight: 700; font-size: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: -0.01em;
  position: relative; z-index: 2;
  background-size: cover; background-position: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 0 0 4px rgba(16,185,129,0.08),
    0 8px 22px var(--vp-emerald-glow);
}
.rvf-vp__avatar::after {
  content: ""; position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 60deg, var(--vp-mint) 0deg, transparent 25deg, transparent 335deg, var(--vp-mint) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 61%);
          mask: radial-gradient(circle, transparent 60%, black 61%);
  opacity: 0.55;
  animation: vpRing 9s linear infinite;
}
@keyframes vpRing { to { transform: rotate(360deg); } }

.rvf-vp__hero-body { position: relative; z-index: 2; min-width: 0; }
.rvf-vp__name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.018em;
  margin: 0 0 6px; line-height: 1.15;
  color: var(--vp-text);
}
.rvf-vp__meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--vp-muted); font-size: 11.5px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.rvf-vp__meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-rad-pill);
  transition: background .15s, border-color .15s;
}
.rvf-vp__meta-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--vp-line-2);
}
.rvf-vp__meta-item strong { color: var(--vp-text); font-weight: 600; }
.rvf-vp__meta-item .rvf-i { width: 11px; height: 11px; color: var(--vp-muted-2); }

.rvf-vp__status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--vp-rad-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--vp-emerald-soft) 0%, var(--vp-mint-soft) 100%);
  color: var(--vp-emerald);
  border: 1px solid var(--vp-emerald-soft-2);
}
.rvf-vp__status .rvf-i { width: 11px; height: 11px; }
.rvf-vp__status.warn {
  background: linear-gradient(135deg, var(--vp-amber-soft) 0%, var(--vp-peach-soft) 100%);
  color: var(--vp-amber);
  border-color: var(--vp-amber-soft-2);
}
.rvf-vp__status.danger {
  background: linear-gradient(135deg, var(--vp-danger-soft) 0%, var(--vp-peach-soft) 100%);
  color: var(--vp-danger);
  border-color: var(--vp-danger-soft-2);
}

/* ── Counter strip — 4 cute chips ───────────────────────── */
.rvf-vp__counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.rvf-vp__counter {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-rad-md);
  padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  transition: background .25s var(--vp-ease-out),
              border-color .25s var(--vp-ease-out),
              transform .25s var(--vp-ease-bounce);
}
.rvf-vp__counter:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--vp-emerald-soft-2);
  transform: translateY(-2px);
}
.rvf-vp__counter-head {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vp-muted); font-weight: 600;
  order: 1;
}
.rvf-vp__counter-head .rvf-i { width: 11px; height: 11px; color: var(--vp-emerald); }
.rvf-vp__counter-value {
  font-size: 22px; font-weight: 700; letter-spacing: -0.020em;
  color: var(--vp-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  order: 2;
}
.rvf-vp__counter:first-child .rvf-vp__counter-value,
.rvf-vp__counter:nth-child(2) .rvf-vp__counter-value {
  background: linear-gradient(135deg, var(--vp-mint) 0%, var(--vp-emerald) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 700px) {
  .rvf-vp__hero {
    grid-template-columns: 1fr; text-align: center;
    padding: 22px 18px; gap: 14px;
  }
  .rvf-vp__avatar { width: 68px; height: 68px; font-size: 24px; margin: 0 auto; }
  .rvf-vp__name { font-size: 20px; }
  .rvf-vp__meta { justify-content: center; }
  .rvf-vp__status { margin: 0 auto; }
  .rvf-vp__counters { grid-template-columns: 1fr 1fr; }
  .rvf-vp__counter-value { font-size: 20px; }
}

/* ── Section header ─────────────────────────────────────── */
.rvf-vp__section { margin-top: 28px; }
.rvf-vp__section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.rvf-vp__section-title {
  font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
  color: var(--vp-text);
}
.rvf-vp__section-title::before {
  content: "✦";
  color: var(--vp-mint);
  font-size: 10px;
  text-shadow: 0 0 8px var(--vp-emerald-glow);
}
.rvf-vp__section-meta {
  font-size: 10.5px; color: var(--vp-muted);
  letter-spacing: 0.04em;
}

/* ── Action row ─────────────────────────────────────────── */
.rvf-vp__actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}
.rvf-vp__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--vp-rad-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,0.04);
  color: var(--vp-text);
  border: 1px solid var(--vp-line);
  font-family: inherit;
  transition: background .15s, border-color .15s,
              transform .15s var(--vp-ease-bounce),
              box-shadow .15s;
}
.rvf-vp__btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--vp-line-2);
  color: var(--vp-text); text-decoration: none;
  transform: translateY(-1px) scale(1.02);
}
.rvf-vp__btn:active { transform: scale(0.96); }
.rvf-vp__btn .rvf-i { width: 12px; height: 12px; color: var(--vp-muted); }
.rvf-vp__btn:hover .rvf-i { color: var(--vp-text); }

.rvf-vp__btn--primary {
  background: linear-gradient(135deg, var(--vp-mint) 0%, var(--vp-emerald) 100%);
  color: #04130b;
  border-color: var(--vp-emerald-light);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(16,185,129,0.22);
}
.rvf-vp__btn--primary:hover {
  background: linear-gradient(135deg, #8df0c8 0%, var(--vp-emerald-light) 100%);
  color: #04130b;
  box-shadow: 0 8px 24px var(--vp-emerald-glow);
}
.rvf-vp__btn--primary .rvf-i,
.rvf-vp__btn--primary:hover .rvf-i { color: #04130b; }

.rvf-vp__btn-toast {
  opacity: 0; transition: opacity .2s;
  font-size: 10.5px; color: var(--vp-emerald);
  font-weight: 600;
}
.rvf-vp__btn-toast.show { opacity: 1; }

/* ── Timeline ───────────────────────────────────────────── */
.rvf-vp__tl {
  position: relative; padding-left: 36px;
}
.rvf-vp__tl::before {
  content: ""; position: absolute;
  left: 13px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg,
    var(--vp-mint) 0%, var(--vp-emerald-soft-2) 22%,
    var(--vp-line-2) 78%, transparent 100%);
  border-radius: 2px;
  opacity: 0.7;
}
.rvf-vp__tl-year {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: -36px; margin-bottom: 14px;
  padding: 4px 13px 4px 10px;
  background: linear-gradient(135deg, var(--vp-emerald-soft) 0%, var(--vp-mint-soft) 100%);
  border: 1px solid var(--vp-emerald-soft-2);
  border-radius: var(--vp-rad-pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; color: var(--vp-emerald);
  z-index: 3;
  font-variant-numeric: tabular-nums;
}
.rvf-vp__tl-year::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: var(--vp-mint);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--vp-emerald-glow);
}
.rvf-vp__tl-group { margin-bottom: 6px; }
.rvf-vp__tl-group:last-child { margin-bottom: 0; }

.rvf-vp__tl-entry {
  position: relative; margin-bottom: 10px;
  animation: vpReveal .45s var(--vp-ease-out) both;
}
@keyframes vpReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Node — small + bouncy */
.rvf-vp__tl-node {
  position: absolute; left: -36px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--vp-bg);
  border: 2px solid var(--vp-line-2);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: border-color .25s var(--vp-ease-out),
              box-shadow .25s var(--vp-ease-out),
              transform .25s var(--vp-ease-bounce);
}
.rvf-vp__tl-node .rvf-i { width: 13px; height: 13px; }
.rvf-vp__tl-node[data-tone="emerald"] { border-color: var(--vp-emerald-soft-2); color: var(--vp-emerald); }
.rvf-vp__tl-node[data-tone="amber"]   { border-color: var(--vp-amber-soft-2);   color: var(--vp-amber); }
.rvf-vp__tl-node[data-tone="danger"]  { border-color: var(--vp-danger-soft-2);  color: var(--vp-danger); }
.rvf-vp__tl-node[data-tone="muted"]   { color: var(--vp-muted); }
.rvf-vp__tl-entry:hover .rvf-vp__tl-node {
  transform: scale(1.18) rotate(-4deg);
  box-shadow: 0 0 16px var(--vp-emerald-glow);
}
.rvf-vp__tl-entry:hover .rvf-vp__tl-node[data-tone="amber"]  { box-shadow: 0 0 16px rgba(251,191,36,0.30); }
.rvf-vp__tl-entry:hover .rvf-vp__tl-node[data-tone="danger"] { box-shadow: 0 0 16px rgba(248,113,113,0.32); }

/* Card — bubble */
.rvf-vp__tl-card {
  background: linear-gradient(180deg, var(--vp-panel) 0%, var(--vp-panel-2) 100%);
  border: 1px solid var(--vp-line);
  border-left: 3px solid var(--vp-emerald);
  border-radius: var(--vp-rad-lg);
  padding: 13px 15px;
  transition: border-color .2s var(--vp-ease-out),
              transform .2s var(--vp-ease-out),
              box-shadow .2s var(--vp-ease-out);
}
.rvf-vp__tl-card[data-tone="amber"]  { border-left-color: var(--vp-amber); }
.rvf-vp__tl-card[data-tone="danger"] { border-left-color: var(--vp-danger); }
.rvf-vp__tl-card[data-tone="muted"]  { border-left-color: var(--vp-muted-2); }
.rvf-vp__tl-entry:hover .rvf-vp__tl-card {
  border-color: var(--vp-line-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

/* Card head */
.rvf-vp__tl-head {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.rvf-vp__tl-type {
  font-size: 13px; font-weight: 600;
  color: var(--vp-text); letter-spacing: -0.005em;
}
.rvf-vp__tl-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--vp-muted); flex-shrink: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rvf-vp__tl-date .rvf-i { width: 10px; height: 10px; color: var(--vp-muted-2); }

/* Tags — tiny mono chips */
.rvf-vp__tl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.rvf-vp__tl-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--vp-rad-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--vp-line);
  font-size: 10px; color: var(--vp-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.rvf-vp__tl-tag b { color: var(--vp-text); font-weight: 500; margin-right: 2px; }

/* Proof drawer */
.rvf-vp__tl-proof {
  margin-top: 9px;
  border-top: 1px dashed var(--vp-line);
}
.rvf-vp__tl-proof-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 8px 0 2px;
  background: none; border: none; cursor: pointer;
  color: var(--vp-muted); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  font-family: inherit;
  transition: color .15s;
}
.rvf-vp__tl-proof-toggle:hover { color: var(--vp-text); }
.rvf-vp__tl-proof-toggle .rvf-chevron {
  width: 10px; height: 10px;
  transition: transform .25s var(--vp-ease-out);
}
.rvf-vp__tl-proof[data-open="true"] .rvf-chevron { transform: rotate(90deg); }
.rvf-vp__tl-proof-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px; color: var(--vp-muted-2);
  margin-left: auto; letter-spacing: 0.01em;
  text-transform: none;
}
.rvf-vp__tl-proof-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--vp-ease-out);
}
.rvf-vp__tl-proof[data-open="true"] .rvf-vp__tl-proof-body { grid-template-rows: 1fr; }
.rvf-vp__tl-proof-inner { overflow: hidden; }
.rvf-vp__tl-proof-content {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 8px 0 4px;
}
.rvf-vp__tl-full-hash {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: var(--vp-rad-sm);
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--vp-line);
  color: var(--vp-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px; word-break: break-all; line-height: 1.5;
}
.rvf-vp__tl-full-hash .rvf-i { width: 10px; height: 10px; color: var(--vp-muted-2); flex-shrink: 0; }

/* Verify button */
.rvf-vp__verify-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--vp-rad-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--vp-emerald-soft) 0%, var(--vp-mint-soft) 100%);
  color: var(--vp-emerald);
  border: 1px solid var(--vp-emerald-soft-2);
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s,
              transform .15s var(--vp-ease-bounce);
}
.rvf-vp__verify-btn:hover {
  background: linear-gradient(135deg, rgba(16,185,129,0.16) 0%, rgba(110,231,183,0.16) 100%);
  border-color: var(--vp-emerald);
  transform: translateY(-1px) scale(1.04);
}
.rvf-vp__verify-btn:active { transform: scale(0.94); }
.rvf-vp__verify-btn .rvf-i { width: 11px; height: 11px; }
.rvf-vp__verify-btn[data-state="loading"] .rvf-i { animation: vpSpin .8s linear infinite; }
@keyframes vpSpin { to { transform: rotate(360deg); } }
.rvf-vp__verify-btn[data-state="success"] {
  background: linear-gradient(135deg, rgba(16,185,129,0.20) 0%, rgba(110,231,183,0.20) 100%);
  border-color: var(--vp-emerald);
}
.rvf-vp__verify-btn[data-state="failed"] {
  background: linear-gradient(135deg, var(--vp-danger-soft) 0%, var(--vp-peach-soft) 100%);
  color: var(--vp-danger);
  border-color: var(--vp-danger-soft-2);
}

.rvf-vp__tl-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vp-emerald); text-decoration: none;
  padding: 4px 10px; border-radius: var(--vp-rad-pill);
  background: transparent;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.rvf-vp__tl-link:hover {
  background: var(--vp-emerald-soft);
  border-color: var(--vp-emerald-soft-2);
  color: var(--vp-emerald-light);
  text-decoration: none;
}
.rvf-vp__tl-link .rvf-i { width: 10px; height: 10px; }

/* ── Animated Merkle proof tree ─────────────────────────── */
.rvf-vp__tree {
  margin-top: 10px;
  background: rgba(0,0,0,0.36);
  border: 1px solid var(--vp-emerald-soft-2);
  border-radius: var(--vp-rad-md);
  padding: 14px;
}
.rvf-vp__tree svg { width: 100%; height: auto; display: block; }
.rvf-vp__tree-explainer {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--vp-line);
  font-size: 11px; color: var(--vp-muted); line-height: 1.6;
}
.rvf-vp__tree-node { transition: fill .25s ease, stroke .25s ease, opacity .25s ease; }
.rvf-vp__tree-node.lit  { fill: var(--vp-emerald); stroke: var(--vp-emerald); }
.rvf-vp__tree-node.root { fill: var(--vp-mint); stroke: var(--vp-mint); filter: drop-shadow(0 0 6px var(--vp-emerald-glow)); }
.rvf-vp__tree-node.fail { fill: var(--vp-danger); stroke: var(--vp-danger); }
.rvf-vp__tree-edge { transition: stroke .25s ease, stroke-opacity .25s ease; }
.rvf-vp__tree-edge.lit { stroke: var(--vp-emerald); stroke-opacity: 1; }
.rvf-vp__tree-edge.fail { stroke: var(--vp-danger); stroke-opacity: 1; }
.rvf-vp__tree-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; fill: var(--vp-muted-2);
}
.rvf-vp__tree-label.lit { fill: var(--vp-emerald); }
.rvf-vp__tree-label.root { fill: var(--vp-mint); font-weight: 700; }
.rvf-vp__tree-status {
  font-size: 11.5px; font-weight: 600;
  color: var(--vp-emerald);
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.rvf-vp__tree-status.fail { color: var(--vp-danger); }
.rvf-vp__tree-status .rvf-i { width: 13px; height: 13px; }

/* Federation co-sign */
.rvf-vp__cosign {
  margin-top: 9px; padding: 8px 12px;
  background: linear-gradient(135deg, var(--vp-emerald-soft) 0%, var(--vp-mint-soft) 100%);
  border: 1px solid var(--vp-emerald-soft-2);
  border-radius: var(--vp-rad-md);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
}
.rvf-vp__cosign .seal {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--vp-rad-pill);
  background: rgba(16,185,129,0.16);
  color: var(--vp-emerald);
  font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.rvf-vp__cosign .seal.fed { background: rgba(45,212,191,0.10); color: #2dd4bf; }
.rvf-vp__cosign a {
  color: var(--vp-muted); text-decoration: none;
  font-size: 10.5px; margin-left: auto;
  transition: color .15s;
}
.rvf-vp__cosign a:hover { color: var(--vp-emerald); text-decoration: underline; }

/* ── Timeline mobile ────────────────────────────────────── */
@media (max-width: 700px) {
  .rvf-vp__tl { padding-left: 0; }
  .rvf-vp__tl::before { display: none; }
  .rvf-vp__tl-year { margin-left: 0; width: 100%; justify-content: center; }
  .rvf-vp__tl-node {
    position: static; display: inline-flex;
    width: 26px; height: 26px; margin-bottom: 6px;
  }
  .rvf-vp__tl-entry { margin-bottom: 10px; }
  .rvf-vp__tl-head { flex-direction: column; align-items: flex-start; gap: 3px; }
  .rvf-vp__tl-card { border-radius: var(--vp-rad-md); padding: 12px 14px; }
  .rvf-vp__tl-proof-hash { display: none; }
  .rvf-vp__actions { gap: 5px; }
  .rvf-vp__btn { padding: 7px 12px; font-size: 11px; }
}

/* ── Empty state ────────────────────────────────────────── */
.rvf-vp__empty {
  text-align: center; padding: 40px 24px;
  color: var(--vp-muted);
  background: var(--vp-panel);
  border: 1px dashed var(--vp-line-2);
  border-radius: var(--vp-rad-xl);
  font-size: 12.5px;
}
.rvf-vp__empty .rvf-i { width: 28px; height: 28px; color: var(--vp-muted-2); margin-bottom: 8px; }

/* ── Error / no-athlete ─────────────────────────────────── */
.rvf-vp__error {
  max-width: 460px; margin: 64px auto;
  background:
    radial-gradient(400px 160px at 0% 0%, rgba(110,231,183,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--vp-panel) 0%, var(--vp-panel-2) 100%);
  border: 1px solid var(--vp-line-2);
  border-radius: var(--vp-rad-xl);
  padding: 32px 28px; text-align: center;
}
.rvf-vp__error h2 {
  font-size: 18px; font-weight: 600;
  margin: 0 0 8px; letter-spacing: -0.012em;
  color: var(--vp-text);
}
.rvf-vp__error p {
  color: var(--vp-muted); font-size: 12.5px; line-height: 1.6;
  margin: 0;
}
.rvf-vp__error code {
  background: rgba(255,255,255,0.04);
  padding: 2px 7px; border-radius: 5px;
  color: var(--vp-text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.rvf-vp__error .rvf-i {
  width: 26px; height: 26px;
  color: var(--vp-muted-2); margin-bottom: 12px;
}

/* ── Trust footer ───────────────────────────────────────── */
.rvf-vp__trust {
  margin-top: 28px;
  background:
    radial-gradient(420px 160px at 0% 50%, rgba(110,231,183,0.06) 0%, transparent 65%),
    radial-gradient(360px 160px at 100% 50%, rgba(253,164,175,0.04) 0%, transparent 65%),
    linear-gradient(180deg, var(--vp-panel) 0%, var(--vp-panel-2) 100%);
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-rad-xl);
  padding: 18px 22px;
  position: relative; overflow: hidden;
}
.rvf-vp__trust-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--vp-text);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.rvf-vp__trust-head .rvf-i { width: 14px; height: 14px; color: var(--vp-emerald); }
.rvf-vp__trust-body {
  font-size: 11.5px; color: var(--vp-muted); line-height: 1.7;
}
.rvf-vp__trust-body code {
  background: rgba(255,255,255,0.04);
  padding: 1px 6px; border-radius: 4px;
  color: var(--vp-text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
}
.rvf-vp__trust-body em {
  color: var(--vp-text); font-style: normal; font-weight: 600;
}
.rvf-vp__trust-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--vp-line);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  font-size: 10.5px; color: var(--vp-muted-2);
}
.rvf-vp__trust-foot a {
  color: var(--vp-muted); text-decoration: none;
  transition: color .15s;
}
.rvf-vp__trust-foot a:hover { color: var(--vp-emerald); }

/* ── Share-card modal ───────────────────────────────────── */
.rvf-vp__share-modal[hidden] { display: none !important; }
.rvf-vp__share-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,15,0.80);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  animation: vpFadeIn .2s var(--vp-ease-out);
}
@keyframes vpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rvf-vp__share-card {
  background: linear-gradient(180deg, var(--vp-panel) 0%, var(--vp-panel-2) 100%);
  border: 1px solid var(--vp-line-2);
  border-radius: var(--vp-rad-xl);
  padding: 22px;
  width: 100%; max-width: 640px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.6);
  animation: vpScaleIn .25s var(--vp-ease-out);
}
@keyframes vpScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.rvf-vp__share-card h3 {
  font-size: 15px; font-weight: 600; letter-spacing: -0.012em;
  margin: 0 0 6px; color: var(--vp-text);
}
.rvf-vp__share-card p {
  color: var(--vp-muted); font-size: 11.5px; line-height: 1.55;
  margin: 0 0 14px;
}
.rvf-vp__share-card img {
  width: 100%; border-radius: var(--vp-rad-md);
  border: 1px solid var(--vp-line-2);
  margin-bottom: 12px;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  body { background: white !important; color: #000 !important; }
  .rvf-vp { background: white !important; }
  .rvf-vp__bar, .rvf-vp__actions, .rvf-vp__verify-btn, .rvf-vp__tl-proof,
  .rvf-vp__tree, .rvf-vp__cosign, .rvf-vp__share-modal { display: none !important; }
  .rvf-vp__hero, .rvf-vp__counter, .rvf-vp__tl-card, .rvf-vp__trust {
    background: white !important; border: 1px solid #ccc !important; color: #000 !important;
  }
  .rvf-vp__name, .rvf-vp__counter-value, .rvf-vp__tl-type,
  .rvf-vp__section-title, .rvf-vp__trust-head, .rvf-vp__brand-name b {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }
  .rvf-vp__hero::after, .rvf-vp__section-title::before { display: none !important; }
  .rvf-vp__meta, .rvf-vp__counter-head, .rvf-vp__tl-tag,
  .rvf-vp__trust-body, .rvf-vp__section-meta, .rvf-vp__tl-date {
    color: #444 !important;
  }
  .rvf-vp__avatar { box-shadow: none !important; }
  .rvf-vp__avatar::after { display: none !important; }
  .rvf-vp__tl-node {
    background: #f7f7f7 !important;
    color: #047857 !important;
    border-color: #047857 !important;
  }
  .rvf-vp__tl::before { background: #ccc !important; }
  .rvf-vp__tl-card { border-left-color: #047857 !important; }
  .rvf-vp__tl-year, .rvf-vp__seal {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #047857 !important;
  }
}