/* The Pandarianz — Bounty Board
   Design system: near-black base, white type, Solana accents (purple → blue → cyan → green) used
   strategically for primary actions, active states, progress, verified states and prizes.
   Public pages use the accents boldly; the staff dashboard (.staff-shell) uses them more quietly.
   Motion: 150–350ms interface transitions; ambient effects are slow, few and disabled for reduced motion. */
:root {
  --bg: #09090f;
  --bg-2: #0d0d16;
  --surface: #12121c;
  --surface-2: #161623;
  --raised: #1c1c2b;
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.065);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f5f4fb;
  --muted: #a9a7bf;
  --faint: #75738c;

  /* Solana palette */
  --sol-purple: #9945ff;
  --sol-violet: #b48cff;
  --sol-blue: #4f7dff;
  --sol-cyan: #19d3f0;
  --sol-green: #14f195;
  --grad: linear-gradient(100deg, #9945ff 0%, #5f6bff 38%, #19c7f0 70%, #14f195 100%);
  --grad-soft: linear-gradient(100deg, rgba(153, 69, 255, .22), rgba(25, 199, 240, .14) 60%, rgba(20, 241, 149, .16));
  /* lighter stops for gradient TEXT so it keeps contrast on dark panels */
  --grad-text: linear-gradient(95deg, #c7a4ff 0%, #8fb0ff 35%, #5fe3f7 68%, #4cf5b0 100%);
  --grad-btn: linear-gradient(100deg, #8b3dff 0%, #5a55ff 55%, #3f6fff 100%);

  /* semantic */
  --green: #2ee59d;
  --green-ink: #04281a;
  --green-wash: rgba(46, 229, 157, 0.11);
  --gold: #f3c969;
  --gold-wash: rgba(243, 201, 105, 0.11);
  --amber: #f5b14c;
  --amber-wash: rgba(245, 177, 76, 0.1);
  --red: #ff7b7b;
  --red-wash: rgba(255, 123, 123, 0.09);
  --blue: #8db4ff;
  --blue-wash: rgba(141, 180, 255, 0.09);
  --violet-wash: rgba(153, 69, 255, 0.12);

  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.85);
  --glow: 0 0 0 1px rgba(153, 69, 255, .35), 0 12px 40px -12px rgba(153, 69, 255, .45), 0 8px 30px -14px rgba(20, 241, 149, .25);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .16s;
  --t: .26s;
  --font: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --header-h: 68px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font);
  font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(153, 69, 255, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--sol-violet); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: #0b0b12; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.icon { flex: none; }

/* ------------------------------------------------------------ ambient background (subtle, static except a slow drift) */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient .blob { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; filter: blur(90px); opacity: .17; will-change: transform; }
.ambient .b1 { background: radial-gradient(circle, #9945ff 0%, transparent 62%); top: -26vmax; left: -14vmax; animation: drift 34s ease-in-out infinite alternate; }
.ambient .b2 { background: radial-gradient(circle, #14f195 0%, transparent 60%); top: 10vmax; right: -30vmax; opacity: .09; animation: drift 42s ease-in-out infinite alternate-reverse; }
.ambient .grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
}
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }

/* ------------------------------------------------------------ layout */
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line-soft); background: rgba(9, 9, 15, .72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad); opacity: .35; }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand svg { width: 34px; height: 34px; flex: none; transition: transform var(--t) var(--ease); }
.brand:hover svg { transform: rotate(-8deg) scale(1.05); }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name b { font: 800 15px/1.1 var(--font-display); letter-spacing: .06em; white-space: nowrap; }
.brand-name span { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 550; transition: color var(--t-fast), background var(--t-fast); }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); }

/* live status dot (wallet + live states) */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sol-green); flex: none; box-shadow: 0 0 10px rgba(20, 241, 149, .7); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--sol-green); opacity: 0; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.wallet-chip { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); background: rgba(18, 18, 28, .85); border: 1px solid var(--line); border-radius: 999px; padding: 5px 5px 5px 14px; min-width: 0; transition: border-color var(--t); }
.wallet-chip:hover { border-color: rgba(20, 241, 149, .35); }
.wallet-chip-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wallet-chip-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sol-green); font-weight: 700; }
.wallet-chip code { font-family: var(--mono); color: var(--text); font-size: 13px; white-space: nowrap; }
.wallet-chip button { background: rgba(255, 255, 255, .06); border: 0; color: var(--muted); cursor: pointer; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: color var(--t-fast), background var(--t-fast); min-height: 32px; }
.wallet-chip button:hover { color: var(--text); background: rgba(255, 255, 255, .12); }
.test-banner { background: linear-gradient(90deg, #2b1d07, #3a280c, #2b1d07); color: #f8dca6; text-align: center; font-size: 14px; padding: 8px 16px; border-bottom: 1px solid #5a4318; }

main { padding-bottom: 96px; }
.page-enter { animation: page-in var(--t) var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
.site-footer { border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 14px; padding: 36px 0 52px; background: linear-gradient(180deg, transparent, rgba(153, 69, 255, .04)); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.site-footer p { margin: 0; max-width: 62ch; }
.footer-brand { display: flex; gap: 14px; align-items: center; }
.footer-brand svg { flex: none; opacity: .85; }
.footer-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-weight: 600; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; transition: border-color var(--t-fast), background var(--t-fast); }
.footer-link:hover { border-color: rgba(153, 69, 255, .5); background: var(--violet-wash); }

/* ------------------------------------------------------------ type */
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
.display { font-size: clamp(48px, 8.4vw, 104px); font-weight: 860; line-height: .93; letter-spacing: -0.05em; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font: 700 clamp(20px, 2.4vw, 26px)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--text); max-width: 32ch; margin: 22px 0 0; }
.lede-sub { color: var(--muted); max-width: 48ch; margin: 10px 0 0; font-size: 16.5px; }
.kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head { display: grid; gap: 4px; margin-bottom: 18px; }
.section-title { font-size: 26px; font-weight: 780; display: flex; align-items: center; gap: 12px; }
.section-title small { font: 650 13px var(--font); color: var(--muted); letter-spacing: 0; }
.count-pill { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: 0.92em; }
.gold { color: var(--gold); }
.prewrap { white-space: pre-line; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .2em; color: var(--text); padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); margin-bottom: 22px; }

/* ------------------------------------------------------------ hero + wallet form */
.hero-band { position: relative; }
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.hero-art { display: grid; place-items: center; }
.orb { position: relative; width: min(340px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.orb > svg { position: relative; width: 58%; height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6)); animation: float 7s ease-in-out infinite; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: conic-gradient(from 0deg, #9945ff, #4f7dff, #19d3f0, #14f195, #9945ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; animation: spin 18s linear infinite; }
.orb-glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(153, 69, 255, .55), rgba(25, 199, 240, .2) 55%, rgba(20, 241, 149, .12) 75%, transparent 80%); filter: blur(18px); }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 64px; min-height: 1px; }
.hero-stat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: rgba(18, 18, 28, .7); border: 1px solid var(--line-soft); box-shadow: var(--shadow); animation: rise var(--t) var(--ease) both; }
.hero-stat b { display: block; font: 850 30px/1 var(--font-display); letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stat span:not(.hero-stat-icon) { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; letter-spacing: .02em; }
.hero-stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); color: var(--text); border: 1px solid var(--line); flex: none; }

.wallet-form { margin-top: 30px; max-width: 660px; }
.wallet-form label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 9px; font-weight: 550; }
.field-row { display: flex; gap: 10px; }
.field-stack { display: grid; gap: 10px; }
.input, .select, .textarea {
  width: 100%; background: rgba(10, 10, 18, .7); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(153, 69, 255, .8); box-shadow: 0 0 0 4px rgba(153, 69, 255, .18); background: rgba(10, 10, 18, .95); }
.input.big { font-family: var(--mono); font-size: 15px; padding: 16px; border-radius: var(--radius); min-width: 0; text-overflow: ellipsis; }
.input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 123, 123, .14); }
.select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { background: #14141f; color: var(--text); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.hint { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.error-text { color: var(--red); font-size: 14px; margin: 8px 0 0; }

/* ------------------------------------------------------------ buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-height: 42px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .055); color: var(--text); border-radius: var(--radius-sm);
  padding: 10px 18px; font-weight: 650; font-size: 15px; cursor: pointer; text-decoration: none; isolation: isolate;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), color var(--t-fast);
}
.btn:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .06s; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.primary { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -12px rgba(120, 70, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .25) 45%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .6s var(--ease); z-index: -1; }
.btn.primary:hover { box-shadow: 0 12px 32px -10px rgba(120, 70, 255, .95), 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 8px 28px -14px rgba(20, 241, 149, .6); }
.btn.primary:hover::before { background-position: -60% 0; }
.btn.big { padding: 15px 24px; border-radius: var(--radius); font-size: 16px; min-height: 54px; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.btn.subtle { background: rgba(255, 255, 255, .06); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: rgba(255, 123, 123, .5); background: var(--red-wash); }
.btn.small { padding: 7px 13px; font-size: 14px; min-height: 36px; }
/* consequential actions: deliberately NOT the positive gradient */
.dialog .btn.danger { background: #c9424a; color: #fff; border-color: transparent; }
.dialog .btn.danger:hover { background: #d94d55; box-shadow: 0 10px 28px -12px rgba(217, 77, 85, .9); }
.btn.caution { background: #f0a93b; color: #2a1800; border-color: transparent; font-weight: 750; }
.btn.caution:hover { background: #f7b84f; box-shadow: 0 10px 28px -12px rgba(240, 169, 59, .9); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn .arrow { transition: transform var(--t-fast) var(--ease); }

/* ------------------------------------------------------------ status pills (icon + text, never colour alone) */
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: rgba(14, 14, 22, .82); white-space: nowrap; line-height: 1;
}
.pill::before { content: "•"; font-size: 13px; line-height: 0; }
.pill.live { color: var(--sol-green); border-color: rgba(20, 241, 149, .4); background: rgba(6, 30, 22, .82); }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 2s ease-in-out infinite; }
.pill.complete { color: var(--sol-green); border-color: rgba(20, 241, 149, .4); background: rgba(6, 30, 22, .82); }
.pill.complete::before { content: "✓"; font-size: 11px; }
.pill.upcoming { color: var(--blue); border-color: rgba(141, 180, 255, .38); background: rgba(14, 20, 40, .82); }
.pill.upcoming::before { content: "◷"; font-size: 12px; }
.pill.progress { color: var(--text); border-color: var(--line-strong); }
.pill.progress::before { content: "◐"; font-size: 11px; }
.pill.review, .pill.unavailable { color: var(--amber); border-color: rgba(245, 177, 76, .4); background: rgba(36, 24, 6, .82); }
.pill.review::before, .pill.unavailable::before { content: "!"; font-size: 12px; font-weight: 900; }
.pill.paused { color: var(--amber); border-color: rgba(245, 177, 76, .4); background: rgba(36, 24, 6, .82); }
.pill.paused::before { content: "❚❚"; font-size: 8px; letter-spacing: -1px; }
.pill.ended, .pill.archived, .pill.draft, .pill.notstarted { color: var(--muted); }
.pill.ended::before, .pill.archived::before { content: "■"; font-size: 8px; }
.pill.notstarted::before { content: "○"; font-size: 11px; }
@keyframes pulse { 50% { opacity: .35; } }

/* ------------------------------------------------------------ artwork: always shown whole, never stretched or cropped */
.art { position: absolute; inset: 0; overflow: hidden; background: #0c0c14; }
.art-fill { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(26px) saturate(1.3) brightness(.55); transform: scale(1.05); }
.art-img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
svg.placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------ bounty cards */
.board { display: grid; gap: 64px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 22px; }
.bounty-card {
  --i: 0; position: relative; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, rgba(24, 24, 38, .9), rgba(15, 15, 24, .95)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); text-decoration: none; isolation: isolate;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
  animation: rise .42s var(--ease) both; animation-delay: calc(var(--i) * 55ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
/* gradient border that fades in on hover */
.bounty-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--t); pointer-events: none; z-index: 2; }
.bounty-card:hover, .bounty-card:focus-visible { transform: translateY(-5px); box-shadow: var(--glow); border-color: transparent; }
.bounty-card:hover::before, .bounty-card:focus-visible::before { opacity: 1; }
.bounty-card:focus-visible { outline: none; }
.bounty-card:hover .art-img { transform: scale(1.03); }
.bounty-card:hover .arrow { transform: translateX(3px); }
.bounty-card.is-ended { filter: saturate(.55); }
.bounty-card.is-ended:hover { filter: none; }
.bounty-card.is-complete { border-color: rgba(20, 241, 149, .28); }
.card-art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: #0c0c14; }
.card-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(12, 12, 20, .55)); pointer-events: none; }
.card-art .pill { position: absolute; top: 14px; left: 14px; z-index: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.progress-chip { position: absolute; z-index: 1; right: 14px; top: 14px; font-size: 12px; font-weight: 750; color: var(--text); padding: 5px 10px; border-radius: 999px; background: rgba(14, 14, 22, .82); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: .02em; }
.progress-chip.done { color: var(--sol-green); border-color: rgba(20, 241, 149, .45); box-shadow: 0 0 18px -4px rgba(20, 241, 149, .55); }
.progress-chip.warn { color: var(--amber); border-color: rgba(245, 177, 76, .45); }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.card-body h3 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.card-body .summary { color: var(--muted); margin: -6px 0 0; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reward-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--grad-soft); border: 1px solid rgba(153, 69, 255, .22); min-width: 0; }
.reward-row > div { min-width: 0; }
.reward-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(9, 9, 15, .7); border: 1px solid var(--line); flex: none; color: var(--sol-violet); }
.reward-icon.big { width: 56px; height: 56px; border-radius: 16px; }
.meta-label { display: block; font-size: 11.5px; color: var(--faint); margin-bottom: 2px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.meta-value { font-weight: 700; font-size: 16px; }
.prize-value { display: block; font: 800 18px/1.25 var(--font-display); letter-spacing: -0.01em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.avail { min-width: 0; }
.mini-bar { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin-top: 7px; overflow: hidden; }
.mini-bar > i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.mini-bar.big { height: 8px; }
.card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.card-cta { width: 100%; }
.empty { display: flex; gap: 16px; align-items: center; color: var(--muted); padding: 26px 28px; border: 1px dashed var(--line); border-radius: var(--radius); background: rgba(18, 18, 28, .5); }
.empty p { margin: 0; }
.empty svg { flex: none; opacity: .5; }

/* skeletons */
.is-skeleton { animation: none; pointer-events: none; }
.is-skeleton .card-art, .sk-line, .skeleton i, .bounty-hero.is-loading .hero-art-frame {
  background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.sk-line { display: block; height: 14px; border-radius: 6px; margin: 4px 0 10px; }
.sk-line.short { width: 55%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skeleton { display: grid; gap: 14px; }
.skeleton i { display: block; border-radius: var(--radius-sm); height: 14px; }
.skeleton .sk-title { height: 30px; width: 40%; }
.skeleton .sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.skeleton .sk-row i { height: 96px; border-radius: var(--radius); }
.skeleton .sk-line { height: 46px; }

/* ------------------------------------------------------------ how it works */
.how { margin-top: 88px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
.steps li { counter-increment: step; padding: 22px; border-radius: var(--radius); background: rgba(18, 18, 28, .6); border: 1px solid var(--line-soft); transition: border-color var(--t), transform var(--t) var(--ease); }
.steps li:hover { border-color: rgba(153, 69, 255, .35); transform: translateY(-2px); }
.steps li::before { content: "0" counter(step); display: block; font: 850 30px/1 var(--font-display); margin-bottom: 14px; font-variant-numeric: tabular-nums; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.steps b { display: block; font-size: 17px; margin-bottom: 4px; }
.steps span { color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------ bounty page */
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; margin: 28px 0 22px; font-size: 15px; font-weight: 550; transition: color var(--t-fast), transform var(--t-fast); }
.back:hover { color: var(--text); transform: translateX(-2px); }
.bounty-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; margin-bottom: 52px; }
.hero-art-frame { position: relative; aspect-ratio: 1; max-height: 560px; width: 100%; border-radius: 26px; overflow: hidden; background: #0c0c14; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02); }
.hero-art-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
.bounty-hero.is-loading { min-height: 420px; }
.bounty-info { min-width: 0; display: grid; gap: 18px; align-content: center; }
.bounty-info h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 860; letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; }
.bounty-desc { margin: 0; color: var(--muted); max-width: 60ch; font-size: 16.5px; }
.type-tag { font-size: 13px; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.reward-card { position: relative; padding: 22px 22px 20px; border-radius: 20px; background: linear-gradient(160deg, rgba(36, 22, 66, .9), rgba(14, 22, 34, .92) 55%, rgba(10, 30, 26, .9)); isolation: isolate; box-shadow: 0 24px 60px -30px rgba(153, 69, 255, .7), 0 16px 50px -30px rgba(20, 241, 149, .45); }
.reward-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .8; pointer-events: none; }
.reward-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 15% 0%, rgba(153, 69, 255, .35), transparent 50%), radial-gradient(circle at 100% 100%, rgba(20, 241, 149, .2), transparent 45%); z-index: -1; }
.reward-main { display: flex; align-items: center; gap: 16px; margin: 10px 0 4px; min-width: 0; }
.reward-amount { font: 880 clamp(28px, 3.4vw, 40px)/1.08 var(--font-display); letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; min-width: 0; }
.reward-avail { margin-top: 14px; }
.reward-avail-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.reward-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; margin: 0; }
.facts > div { background: rgba(18, 18, 28, .9); padding: 14px 16px; }
.facts dd { margin: 0; }
.countdown { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 750; color: var(--sol-green); padding: 2px 8px; border-radius: 999px; background: var(--green-wash); white-space: nowrap; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-list li { display: flex; gap: 14px; align-items: center; background: rgba(18, 18, 28, .75); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 15px 16px; transition: border-color var(--t); }
.req-list li:hover { border-color: rgba(153, 69, 255, .3); }
.req-list .req-n { font: 800 13px var(--font-display); color: var(--text); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); flex: none; }
.logic-note { margin: 22px 0 0; font-size: 15px; }
.panel { position: relative; background: linear-gradient(180deg, rgba(26, 26, 42, .92), rgba(16, 16, 26, .95)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.verify-panel { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 6px; }
.verify-panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; background: var(--grad); border-radius: 2px; }
.verify-panel.is-closed::before { background: var(--line-strong); }
.verify-panel h2 { font-size: 22px; font-weight: 800; }
.panel-intro { margin: 0 0 10px; font-size: 15px; }
.wallet-form.compact { margin: 0; }
.verify-panel .btn { width: 100%; }

/* ------------------------------------------------------------ verification results */
.result { margin: 40px 0 44px; scroll-margin-top: calc(var(--header-h) + 20px); }
.result:empty { display: none; }
.state-box { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(18, 18, 28, .85); animation: rise var(--t) var(--ease) both; }
.state-box h2 { font-size: 22px; font-weight: 800; }
.state-box p { margin: 6px 0 0; color: var(--muted); max-width: 64ch; }
.state-box.warn { border-color: rgba(245, 177, 76, .4); background: linear-gradient(135deg, rgba(245, 177, 76, .07), rgba(18, 18, 28, .85) 50%); }
.state-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 18px; flex: none; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.state-box.warn .state-icon { color: var(--amber); background: var(--amber-wash); border-color: rgba(245, 177, 76, .4); }
.state-box.progress .state-icon { color: var(--sol-violet); background: var(--violet-wash); border-color: rgba(153, 69, 255, .35); }
.state-box.checking { position: relative; overflow: hidden; border-color: rgba(153, 69, 255, .4); background: linear-gradient(135deg, rgba(153, 69, 255, .09), rgba(18, 18, 28, .9) 55%, rgba(20, 241, 149, .05)); align-items: center; }
.state-text { flex: 1; min-width: 0; }
.scan { position: relative; width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
.scan > i { position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, transparent 0 25%, #9945ff 45%, #19d3f0 70%, #14f195 90%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spin .9s linear infinite; }
.scan-bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-top: 16px; max-width: 420px; }
.scan-bar > i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--grad); animation: sweep 1.3s var(--ease) infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--sol-violet); animation: spin .8s linear infinite; flex: none; margin-top: 3px; }
.checking-steps { list-style: none; padding: 0; margin: 10px 0 0; color: var(--faint); font-size: 14px; }
.checking-steps li.on { color: var(--muted); }

.verified-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radius-lg); margin-bottom: 26px; position: relative; overflow: hidden;
  background: linear-gradient(100deg, rgba(20, 241, 149, .16), rgba(25, 199, 240, .08) 50%, rgba(153, 69, 255, .1)); border: 1px solid rgba(20, 241, 149, .45);
  box-shadow: 0 0 0 0 rgba(20, 241, 149, .4); animation: rise var(--t) var(--ease) both, success-glow 1.6s var(--ease) .2s 1; }
.verified-banner b { display: block; font: 900 20px/1.1 var(--font-display); letter-spacing: .08em; color: var(--sol-green); }
.verified-banner span:not(.vb-icon) { color: var(--muted); font-size: 14.5px; }
.vb-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sol-green); color: var(--green-ink); flex: none; box-shadow: 0 0 24px rgba(20, 241, 149, .55); }
.verified-banner.muted-banner { background: rgba(18, 18, 28, .85); border-color: var(--line); animation: rise var(--t) var(--ease) both; }
.verified-banner.muted-banner b { color: var(--text); }
.verified-banner.muted-banner .vb-icon { background: var(--raised); color: var(--muted); box-shadow: none; }
@keyframes success-glow { 0% { box-shadow: 0 0 0 0 rgba(20, 241, 149, .45); } 100% { box-shadow: 0 0 0 18px rgba(20, 241, 149, 0); } }
.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s var(--ease) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.req-results { display: grid; gap: 12px; margin-top: 18px; }
.req-result { background: rgba(18, 18, 28, .85); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; animation: rise var(--t) var(--ease) both; }
.req-result.done { border-color: rgba(20, 241, 149, .35); }
.req-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.req-head h3 { font-size: 17px; font-weight: 720; letter-spacing: -0.01em; }
.count { font: 850 28px/1 var(--font-display); letter-spacing: -0.02em; }
.count small { font-size: 16px; color: var(--muted); font-weight: 600; }
.bar { height: 10px; background: rgba(255, 255, 255, .07); border-radius: 999px; overflow: hidden; margin: 14px 0 10px; }
.bar > i { display: block; height: 100%; width: var(--w, 0%); background: var(--grad); border-radius: 999px; transition: width .8s var(--ease); box-shadow: 0 0 14px rgba(153, 69, 255, .45); }
.req-result.done .bar > i { background: linear-gradient(90deg, #19d3f0, #14f195); box-shadow: 0 0 14px rgba(20, 241, 149, .5); }
.req-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.req-foot .need { color: var(--text); font-weight: 650; }
.req-result.done .req-foot .need { color: var(--sol-green); }
details.evidence { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
details.evidence summary { cursor: pointer; font-size: 14px; color: var(--muted); list-style: none; }
details.evidence summary:hover { color: var(--text); }
details.evidence summary::-webkit-details-marker { display: none; }
details.evidence summary::after { content: " +"; }
details.evidence[open] summary::after { content: " −"; }
.ev-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 14px; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(9, 9, 15, .7); overflow-wrap: anywhere; }
.ev .tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; background: var(--raised); color: var(--muted); }
.ev.counted .tag { background: var(--green-wash); color: var(--green); }
.ev.uncertain .tag { color: var(--amber); background: var(--amber-wash); }
.ev .why { grid-column: 2 / -1; color: var(--faint); font-size: 13px; }
.ev a { color: var(--muted); font-family: var(--mono); font-size: 13px; text-decoration: none; }
.ev a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------ claim tracker (verified → approval → paid) */
.claim-tracker { margin: 22px 0 6px; display: grid; gap: 16px; }
.claim-headline { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(18, 18, 28, .85); }
.claim-headline b { display: block; font: 850 15px/1.2 var(--font-display); letter-spacing: .08em; }
.claim-headline span:not(.ch-icon), .claim-headline a { font-size: 14px; color: var(--muted); }
.ch-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 900; }
.claim-headline.paid { border-color: rgba(20, 241, 149, .45); background: linear-gradient(100deg, rgba(20, 241, 149, .13), rgba(18, 18, 28, .9) 70%); animation: success-glow 1.6s var(--ease) .2s 1; }
.claim-headline.paid b { color: var(--sol-green); }
.claim-headline.paid .ch-icon { background: var(--sol-green); color: var(--green-ink); box-shadow: 0 0 20px rgba(20, 241, 149, .5); }
.claim-headline.waiting { border-color: rgba(153, 69, 255, .4); background: linear-gradient(100deg, rgba(153, 69, 255, .12), rgba(18, 18, 28, .9) 70%); }
.claim-headline.waiting .ch-icon { position: relative; }
.claim-headline.bad { border-color: rgba(255, 123, 123, .4); }
.claim-headline.bad .ch-icon { color: var(--red); background: var(--red-wash); }
.pulse-dot::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--sol-violet); box-shadow: 0 0 12px var(--sol-purple); }
.pulse-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--sol-violet); animation: ping 2s var(--ease) infinite; }
.tx-link { display: inline-flex !important; align-items: center; gap: 6px; color: var(--text) !important; font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(20, 241, 149, .5); }
.tx-link:hover { border-bottom-color: var(--sol-green); }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.stepper li { position: relative; display: grid; gap: 8px; min-width: 0; align-content: start; }
.stepper li::before { content: ""; position: absolute; top: 15px; left: 34px; right: -6px; height: 2px; border-radius: 2px; background: var(--line); }
.stepper li:last-child::before { display: none; }
.stepper li.done::before { background: var(--grad); }
.step-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 850; background: var(--bg-2); border: 1.5px solid var(--line-strong); color: var(--muted); }
.stepper li.done .step-dot { background: var(--sol-green); border-color: var(--sol-green); color: var(--green-ink); }
.stepper li.current .step-dot { border-color: var(--sol-violet); color: var(--text); background: rgba(153, 69, 255, .25); box-shadow: 0 0 0 4px rgba(153, 69, 255, .18); }
.stepper li.bad .step-dot { border-color: var(--red); color: var(--red); background: var(--red-wash); }
.step-text b { display: block; font-size: 13.5px; font-weight: 750; }
.step-text small { display: block; font-size: 12.5px; color: var(--faint); line-height: 1.35; }
.stepper li.current .step-text small { color: var(--sol-violet); }
.stepper li.done .step-text small { color: var(--muted); }

/* ------------------------------------------------------------ completion card (screenshot target) */
.complete-wrap { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; }
.cert {
  position: relative; overflow: hidden; border-radius: 24px; padding: 28px 28px 24px; color: var(--text); isolation: isolate;
  background: radial-gradient(circle at 100% 0%, rgba(153, 69, 255, .22), transparent 45%), radial-gradient(circle at 0% 100%, rgba(20, 241, 149, .13), transparent 45%), #0d0d16;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .95), 0 30px 60px -40px rgba(153, 69, 255, .55);
  animation: cert-in .6s var(--ease) both;
}
.cert::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
@keyframes cert-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.cert .rosette { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.cert-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cert-brand { display: flex; align-items: center; gap: 10px; font: 800 13px var(--font-display); letter-spacing: .18em; }
.cert-brand svg { width: 30px; height: 30px; }
.cert-seal { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sol-green); color: var(--green-ink); font-size: 24px; font-weight: 900; box-shadow: 0 0 0 4px #0d0d16, 0 0 0 5px rgba(20, 241, 149, .55), 0 0 30px rgba(20, 241, 149, .45); }
.cert-title { font: 900 clamp(32px, 6vw, 46px)/0.95 var(--font-display); letter-spacing: -0.035em; margin: 26px 0 8px; }
.cert-bounty { font: 750 16px var(--font-display); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; overflow-wrap: anywhere; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.cert-grid > div { min-width: 0; }
.cert-grid .meta-label { color: #8886a0; }
.cert-grid .meta-value { font-size: 18px; }
.cert-prize { grid-column: 1 / -1; background: linear-gradient(100deg, rgba(153, 69, 255, .16), rgba(25, 199, 240, .08) 60%, rgba(20, 241, 149, .1)); border: 1px solid rgba(153, 69, 255, .4); border-radius: 14px; padding: 14px 16px; }
.cert-prize .meta-value { display: flex; align-items: center; gap: 10px; font: 880 28px/1.1 var(--font-display); letter-spacing: -0.02em; }
.cert-prize .meta-value > span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; min-width: 0; }
.cert-prize .meta-value .icon { color: var(--sol-violet); }
.cert-prize.no-slot { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.cert-prize.no-slot .meta-value { color: var(--muted); font-size: 18px; }
.explorer { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.explorer:hover { text-decoration-color: var(--sol-violet); }
.cert-id { font: 800 22px var(--mono); letter-spacing: .06em; }
.cert-foot { margin-top: 18px; font-size: 12px; color: #8886a0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.claim-h { margin-top: 22px; font-size: 17px; }
.claim-steps { margin: 12px 0 20px; padding-left: 22px; display: grid; gap: 8px; }
.claim-steps li::marker { color: var(--sol-violet); font-weight: 800; }
.notice { font-size: 14px; color: var(--muted); border-left: 2px solid rgba(153, 69, 255, .5); padding-left: 12px; margin: 18px 0 0; }

/* ------------------------------------------------------------ toasts */
.toasts { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: grid; gap: 10px; justify-items: end; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 12px 16px 12px 12px; border-radius: 14px; font-weight: 600; font-size: 14.5px;
  background: rgba(22, 22, 34, .96); border: 1px solid var(--line); color: var(--text); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: toast-in .26s var(--ease) both; }
.toast.leaving { animation: toast-out .2s ease-in both; }
.toast-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: none; background: rgba(255, 255, 255, .08); color: var(--text); }
.toast.success { border-color: rgba(20, 241, 149, .4); }
.toast.success .toast-icon { background: var(--sol-green); color: var(--green-ink); }
.toast.warn { border-color: rgba(245, 177, 76, .45); }
.toast.warn .toast-icon { background: var(--amber); color: #2a1800; }
.toast.error { border-color: rgba(255, 123, 123, .5); }
.toast.error .toast-icon { background: var(--red); color: #2b0606; }
.toast.info .toast-icon { background: var(--grad-btn); color: #fff; font-family: Georgia, serif; font-style: italic; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------ dialogs */
.dialog { padding: 0; border: 0; background: transparent; color: var(--text); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible; }
.dialog::backdrop { background: rgba(4, 4, 10, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in .2s ease both; }
.dialog[open] { animation: dialog-in .24s var(--ease) both; }
.dialog-body { position: relative; background: linear-gradient(180deg, #1a1a29, #12121c); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); max-height: calc(100dvh - 32px); overflow: auto; }
.dialog-body::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.dialog.caution .dialog-body::before { background: var(--amber); }
.dialog.danger .dialog-body::before { background: var(--red); }
.dialog h2 { font-size: 21px; font-weight: 800; margin: 0 0 12px; }
.dialog-content { color: var(--muted); font-size: 15px; }
.dialog-content p { margin: 0 0 12px; }
.dialog-content .kv { margin: 6px 0 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(9, 9, 15, .7); border: 1px solid var(--line-soft); color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

/* ------------------------------------------------------------ bounty attempts (claim → in progress → complete) */
.attempt-panel { position: relative; display: grid; gap: 18px; padding: 26px; border-radius: var(--radius-lg); border: 1px solid rgba(153, 69, 255, .38);
  background: radial-gradient(120% 140% at 0% 0%, rgba(153, 69, 255, .16), transparent 55%), linear-gradient(180deg, rgba(26, 26, 42, .94), rgba(16, 16, 26, .96));
  box-shadow: var(--glow); animation: rise var(--t) var(--ease) both; }
.attempt-panel::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px; background: var(--grad); border-radius: 2px; }
.attempt-head { display: grid; gap: 8px; }
.attempt-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 850; margin: 0; }
.attempt-badge { display: inline-flex; align-items: center; gap: 9px; width: max-content; font-size: 12px; font-weight: 850; letter-spacing: .12em; color: var(--sol-green);
  padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(20, 241, 149, .08); border: 1px solid rgba(20, 241, 149, .35); }
.attempt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: rgba(9, 9, 15, .55); border: 1px solid var(--line-soft); }
.attempt-facts > div, .window-line > div { display: grid; gap: 3px; min-width: 0; }
.attempt-facts .meta-value { font-size: 15px; overflow-wrap: anywhere; }
.elapsed { font-variant-numeric: tabular-nums; color: var(--text); }
.attempt-explain { margin: 0; color: var(--muted); font-size: 15px; border-left: 2px solid var(--sol-green); padding-left: 12px; }
.attempt-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.attempt-reqs li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: rgba(18, 18, 28, .75); border: 1px solid var(--line-soft); }
.attempt-reqs .req-n { font: 800 13px var(--font-display); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); flex: none; }
.attempt-reqs li > div, .req-list li > div { display: grid; gap: 4px; min-width: 0; }
.req-kind { font-size: 12.5px; font-weight: 650; width: fit-content; max-width: 100%; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.req-kind.window { color: #b8f5da; border-color: rgba(20, 241, 149, .3); background: rgba(20, 241, 149, .06); }
.req-kind.state { color: #c8d8ff; border-color: rgba(141, 180, 255, .3); background: var(--blue-wash); }
.attempt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.attempt-actions .btn.primary.big { min-width: 220px; }
.attempt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.attempt-foot p { margin: 0; font-size: 13px; }
.btn.danger-text { color: #ff9c9c; }
.btn.danger-text:hover { color: #ffc0bb; background: var(--red-wash); }
.progress-host:empty { display: none; }
.progress-snap { padding: 14px 16px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: rgba(9, 9, 15, .4); animation: rise var(--t) var(--ease) both; }
.progress-snap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.progress-snap li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14.5px; }
.progress-snap li.done b { color: var(--sol-green); }
.progress-snap small { flex-basis: 100%; }
.window-box { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(25, 211, 240, .28); background: linear-gradient(120deg, rgba(25, 211, 240, .07), rgba(18, 18, 28, .8) 60%); display: grid; gap: 10px; }
.state-text .window-box { margin: 14px 0 0; }
.window-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.window-arrow { color: var(--sol-cyan); font-size: 20px; }
.window-note { margin: 0; font-size: 13px; }
.dialog-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.verify-panel.is-busy::before { background: var(--amber); }
.active-host:empty { display: none; }
#active-bounty { scroll-margin-top: calc(var(--header-h) + 20px); }
#active-bounty:has(.active-host:empty) { display: none; }
.active-card { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px; text-decoration: none; color: inherit; border-radius: var(--radius-lg);
  border: 1px solid rgba(20, 241, 149, .32); background: linear-gradient(120deg, rgba(20, 241, 149, .07), rgba(18, 18, 28, .9) 45%); box-shadow: var(--shadow); transition: border-color var(--t), transform var(--t) var(--ease); }
.active-card:hover { border-color: rgba(20, 241, 149, .55); transform: translateY(-2px); }
.active-art { position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--raised); }
.active-art > :not(.art) { width: 100%; height: 100%; object-fit: cover; }
.active-body { display: grid; gap: 6px; min-width: 0; }
.active-body h3 { margin: 0; font-size: 19px; font-weight: 800; }
.active-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; align-items: center; }
.active-meta > span:first-child { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.active-reqs { margin: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verify-panel .active-card { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; gap: 12px; }
.verify-panel .active-card .active-cta, .verify-panel .active-reqs { display: none; }
.verify-panel .active-card h3 { font-size: 16px; }
.bounty-card.is-active { border-color: rgba(20, 241, 149, .4); box-shadow: 0 0 0 1px rgba(20, 241, 149, .12), var(--shadow); }

/* ------------------------------------------------------------ responsive (public) */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .bounty-hero { grid-template-columns: 1fr; gap: 26px; }
  .hero-art-frame { aspect-ratio: 4 / 3; }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .verify-panel { position: static; }
  .complete-wrap { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .wrap { width: calc(100% - 32px); }
  .site-header .wrap { gap: 10px; }
  .nav-secondary { display: none; }
  .nav.has-wallet { display: none; }
  .brand-name span { display: none; }
  .site-header .wrap:has(.wallet-chip) .brand-name { display: none; }
  .field-row { flex-direction: column; }
  .hero { padding-top: 36px; }
  .hero-stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 44px; }
  .hero-stat { padding: 14px 16px; }
  .hero-stat b { font-size: 26px; }
  .card-grid { grid-template-columns: 1fr; }
  .board { gap: 48px; }
  .section-title { font-size: 22px; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .steps li { padding: 16px 18px; display: grid; grid-template-columns: 48px 1fr; }
  .steps li::before { font-size: 24px; margin: 0; grid-row: span 2; }
  .state-box { padding: 18px; gap: 14px; }
  .state-box.checking { align-items: flex-start; }
  .cert { padding: 22px 20px 20px; }
  .cert-grid { gap: 14px; }
  .cert-prize .meta-value { font-size: 23px; }
  .cert-id { font-size: 19px; }
  .ev { grid-template-columns: auto minmax(0, 1fr); }
  .ev a { grid-column: 2; }
  .wallet-chip { padding-left: 10px; gap: 8px; }
  .reward-card { padding: 18px; }
  .stepper { grid-template-columns: 1fr; gap: 0; }
  .stepper li { grid-template-columns: 32px 1fr; align-items: start; gap: 12px; padding-bottom: 14px; }
  .stepper li::before { top: 34px; bottom: 2px; left: 15px; right: auto; width: 2px; height: auto; }
  .verified-banner { padding: 14px 16px; }
  .verified-banner b { font-size: 17px; }
  .toasts { left: 16px; right: 16px; bottom: 16px; justify-items: stretch; }
  .toast { max-width: none; }
  .dialog-body { padding: 22px 18px; }
  .dialog-actions .btn { flex: 1 1 auto; }
  .empty { flex-direction: column; align-items: flex-start; }
  .attempt-panel { padding: 20px 16px; gap: 16px; }
  .attempt-facts { grid-template-columns: 1fr 1fr; padding: 14px; }
  .attempt-actions .btn { flex: 1 1 100%; }
  .active-card { grid-template-columns: 88px minmax(0, 1fr); }
  .active-card .active-cta { grid-column: 1 / -1; justify-content: center; }
  .active-reqs { white-space: normal; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* ============================================================ staff dashboard — same identity, quieter accents */
.staff-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { border-right: 1px solid var(--line-soft); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, rgba(20, 16, 36, .9), rgba(11, 11, 18, .95) 40%); }
.side .brand { margin: 0 8px; }
.side nav { display: grid; gap: 3px; }
.side-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--faint); padding: 0 12px; margin-bottom: 6px; }
.side nav a { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 550; transition: color var(--t-fast), background var(--t-fast); }
.side nav a .icon { transition: transform var(--t) var(--ease), color var(--t-fast); }
.side nav a:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.side nav a:hover .icon { transform: translateX(2px) scale(1.06); }
.side nav a[aria-current="page"] { color: var(--text); background: linear-gradient(90deg, rgba(153, 69, 255, .2), rgba(153, 69, 255, .04)); }
.side nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #9945ff, #14f195); }
.side nav a[aria-current="page"] .icon { color: var(--sol-violet); }
.side .who { margin-top: auto; font-size: 14px; color: var(--muted); padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255, 255, 255, .025); display: grid; gap: 8px; }
.who-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--grad-btn); flex: none; text-transform: uppercase; }
.who-name { min-width: 0; line-height: 1.2; }
.who-name b { display: block; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-name span { font-size: 12px; color: var(--faint); text-transform: capitalize; }
.who-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.who-actions a { font-size: 13px; color: var(--faint); text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.who-actions a:hover { color: var(--text); }
.staff-main { padding: 36px clamp(18px, 3.4vw, 48px) 96px; min-width: 0; }
.staff-main > * { max-width: 1180px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 28px; font-weight: 800; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; transition: border-color var(--t); }
.stat:hover { border-color: var(--line); }
.stat b { display: block; font: 850 30px/1.1 var(--font-display); letter-spacing: -0.02em; margin-top: 4px; }
.stat span { font-size: 13px; color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; min-width: 0; }
.box h2 { font-size: 16px; font-weight: 720; margin-bottom: 12px; letter-spacing: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 700; color: var(--faint); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.mono, td.nowrap { white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(153, 69, 255, .06); }
tr.clickable:hover td:first-child { box-shadow: inset 2px 0 0 var(--sol-violet); }
td a { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
td a:hover { text-decoration-color: var(--sol-violet); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { min-width: 0; }
.field label, .field .label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.field .input, .field .select, .field .textarea { padding: 10px 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--sol-purple); width: 16px; height: 16px; }
.check small { display: block; color: var(--faint); font-size: 13px; }
fieldset { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; margin: 0 0 18px; background: var(--surface); min-width: 0; }
legend { font-weight: 720; padding: 0 6px; font-size: 15px; }
.req-editor { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: rgba(9, 9, 15, .6); display: grid; gap: 14px; min-width: 0; }
.req-editor + .req-editor { margin-top: 12px; }
.req-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: linear-gradient(transparent, var(--bg) 35%); padding: 22px 0 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: 14.5px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14.5px; margin-bottom: 16px; border: 1px solid; }
.alert.error { border-color: rgba(255, 123, 123, .4); color: #ffc0bb; background: var(--red-wash); }
.alert.ok { border-color: rgba(46, 229, 157, .35); color: var(--green); background: var(--green-wash); }
.alert.warn { border-color: rgba(245, 177, 76, .38); color: #f7d197; background: var(--amber-wash); }
.login { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .panel { width: min(420px, 100%); padding: 32px 28px; animation: rise .35s var(--ease) both; }
.login .panel::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 2px; background: var(--grad); border-radius: 2px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand b { font: 800 14px var(--font-display); letter-spacing: .14em; }
.login h1 { font-size: 26px; margin: 22px 0 6px; }
.login .lead { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.health { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.health i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.health.ok i { background: var(--green); }
.health.bad i { background: var(--red); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .input { flex: 1 1 260px; width: auto; padding: 10px 12px; }
.filters .select { width: auto; max-width: 100%; padding-top: 10px; padding-bottom: 10px; }
.thumb { width: 44px; height: 33px; border-radius: 7px; object-fit: contain; background: #0c0c14; border: 1px solid var(--line-soft); }
.test-result { margin-top: 16px; display: grid; gap: 10px; }

/* staff: verification diagnostics */
.diag { display: grid; gap: 14px; margin-top: 16px; }
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.event { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(9, 9, 15, .6); display: grid; gap: 5px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.event.counted { border-color: rgba(46, 229, 157, .35); }
.event.uncertain { border-color: rgba(245, 177, 76, .4); }
.event-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.ev-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.ev-row > span { min-width: 0; overflow-wrap: anywhere; }
.ev-reason { color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 6px; margin-top: 2px; }
.amber { color: var(--amber); }
.badge { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 650; }
.badge.ok { color: var(--green); }
.badge.bad { color: var(--red); }
.badge.unk { color: var(--faint); }
.preview { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-top: 12px; background: rgba(9, 9, 15, .6); animation: rise var(--t) var(--ease) both; }
.preview.ok { border-color: rgba(46, 229, 157, .4); }
.preview.bad { border-color: rgba(255, 123, 123, .45); }
.status-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; background: var(--surface); font-size: 14.5px; }
.status-strip b { font-weight: 800; letter-spacing: .03em; }
.status-strip .ok { color: var(--green); }
.status-strip .warn { color: var(--amber); }
.status-strip .bad { color: var(--red); }
.num-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--faint); transition: color var(--t-fast), border-color var(--t-fast); }
.num-link:hover { color: var(--sol-violet); border-color: var(--sol-violet); }
.scenario { display: grid; gap: 10px; }
.scenario + .scenario { margin-top: 14px; }
.tone-ok { color: var(--green); }
.tone-warn { color: var(--amber); }
.tone-bad { color: var(--red); }
.tone-info { color: var(--blue); }
.small { font-size: 13px; }
.staff-main .section-title { font-size: 19px; font-weight: 750; margin: 36px 0 14px; }
.staff-main .back { margin: 0 0 18px; }

/* page header */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); position: relative; }
.ph::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; border-radius: 2px; background: var(--grad); }
.ph-text { min-width: 0; }
.ph h1 { font: 800 30px/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.ph-text p { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; max-width: 68ch; }
.title-with-badge { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-with-badge .sb { font-size: 13px; }

/* sentence-case status badge (icon + text) */
.sb { --c: var(--muted); display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; line-height: 1; padding: 5px 10px 5px 6px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--c); background: rgba(255, 255, 255, .03); white-space: nowrap; }
.sb::before { content: ""; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; flex: none; color: #0b0b12; background: var(--c); line-height: 1; }
.sb.ok { --c: var(--green); border-color: rgba(46, 229, 157, .35); background: var(--green-wash); }
.sb.ok::before { content: "✓"; }
.sb.warn { --c: var(--amber); border-color: rgba(245, 177, 76, .38); background: var(--amber-wash); }
.sb.warn::before { content: "!"; }
.sb.bad { --c: var(--red); border-color: rgba(255, 123, 123, .42); background: var(--red-wash); }
.sb.bad::before { content: "✕"; }
.sb.info { --c: var(--blue); border-color: rgba(141, 180, 255, .35); background: var(--blue-wash); }
.sb.info::before { content: "i"; font-family: Georgia, serif; font-style: italic; }
/* staff decisions: visibly different from on-chain verification */
.sb.override { --c: var(--sol-violet); color: #dcc8ff; border-color: rgba(180, 140, 255, .45); background: rgba(153, 69, 255, .14); }
.sb.override::before { content: "⚑"; font-size: 9px; }
.badge-stack { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tally { display: inline-flex; gap: 8px; font: 700 13px var(--mono); }
.tally .ok { color: var(--green); } .tally .bad { color: var(--red); } .tally .warn { color: var(--amber); } .tally .ovr { color: var(--sol-violet); }
.req-decisions { display: grid; gap: 12px; margin-bottom: 24px; }
.req-decision { display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(18, 18, 28, .78); border-left: 3px solid rgba(255, 123, 123, .55); }
.req-decision.passed { border-left-color: rgba(46, 229, 157, .6); }
.req-decision.overridden { border-left-color: rgba(180, 140, 255, .8); background: linear-gradient(100deg, rgba(153, 69, 255, .08), rgba(18, 18, 28, .78) 45%); }
.rd-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rd-head h3 { margin: 2px 0 0; font-size: 17px; font-weight: 800; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-body { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.rd-fact { display: grid; gap: 3px; min-width: 0; }
.rd-fact.wide { flex: 1 1 260px; }
.rd-count { font: 800 22px var(--font-display); font-variant-numeric: tabular-nums; }
.rd-count small { font-size: 15px; color: var(--muted); font-weight: 700; }
.approval-card { margin-bottom: 24px; border-color: rgba(255, 123, 123, .3); }
.approval-card.review { border-color: rgba(245, 177, 76, .45); }
.approval-card.approved { border-color: rgba(180, 140, 255, .45); }
.dialog-type { margin-top: 14px; }
.dialog-type label { font-size: 14px; color: var(--muted); }
.dialog .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.req-result .staff-accepted { color: #dcc8ff; }
.req-result.accepted { border-color: rgba(180, 140, 255, .4); }
.staff-banner { border-color: rgba(180, 140, 255, .45); background: linear-gradient(100deg, rgba(153, 69, 255, .18), rgba(18, 18, 28, .85) 60%); }
.staff-banner .vb-icon { color: #dcc8ff; }
.staff-accept-card { display: grid; gap: 8px; align-content: start; }
.staff-accept-card p { margin: 0; }
.sb.neutral::before { width: 7px; height: 7px; margin: 0 4px; }

/* cards */
.card { background: linear-gradient(180deg, rgba(22, 22, 35, .9), rgba(17, 17, 27, .92)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 24px; min-width: 0; margin-bottom: 24px; box-shadow: var(--shadow); }
.card.flush { padding: 6px 8px; }
.card.flush table td:first-child, .card.flush table th:first-child { padding-left: 16px; }
.card h2, .card-head h2 { font-size: 17px; font-weight: 750; margin: 0 0 14px; }
.card h3, .more-body h3 { font-size: 13px; font-weight: 750; margin: 0 0 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-title-row h2 { margin: 0; }
.empty-state { padding: 36px 18px; text-align: center; display: grid; justify-items: center; gap: 4px; }
.empty-state::before { content: ""; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 10px; background: var(--grad-soft); border: 1px solid var(--line); }
.empty-state b { font-size: 16px; }
.empty-state p { color: var(--muted); margin: 6px 0 16px; }
.empty-state .btn-row { justify-content: center; }

/* collapsed technical detail */
.more { border-top: 1px solid var(--line-soft); }
.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 2px; font-size: 14.5px; font-weight: 600; color: var(--muted); transition: color var(--t-fast); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--t) var(--ease); margin: 0 3px 0 1px; flex: none; }
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary:hover { color: var(--text); }
.more[open] > .more-body { animation: rise var(--t) var(--ease) both; }
.more-hint { font-weight: 450; color: var(--faint); font-size: 13.5px; }
.more-body { padding: 4px 0 18px; display: grid; gap: 14px; min-width: 0; }
.more-body > p { margin: 0; }
.more-group { margin-top: 8px; }
.more-group > .more:last-child, .card > .more:last-child { border-bottom: 0; }
.card > .more { margin-top: 14px; }
.more.perf { margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }

/* plain-English callouts */
.callout { border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); padding: 13px 16px; margin: 0 0 20px; background: var(--surface); font-size: 14.5px; }
.callout b { display: block; font-size: 15px; }
.callout p { margin: 4px 0 0; color: var(--muted); }
.callout ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.callout.ok { border-color: rgba(46, 229, 157, .35); border-left-color: var(--green); background: linear-gradient(90deg, var(--green-wash), var(--surface) 60%); }
.callout.warn { border-color: rgba(245, 177, 76, .35); border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-wash), var(--surface) 60%); }
.callout.warn b { color: #f7d197; }
.callout.bad { border-color: rgba(255, 123, 123, .42); border-left-color: var(--red); background: linear-gradient(90deg, rgba(255, 123, 123, .1), var(--surface) 60%); }
.callout.bad b { color: #ffc0bb; }
.callout.info { border-color: rgba(141, 180, 255, .32); border-left-color: var(--blue); background: linear-gradient(90deg, var(--blue-wash), var(--surface) 60%); }
.callout.neutral { border-left-color: var(--faint); }

/* overview tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.tile { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(24, 24, 38, .9), rgba(17, 17, 27, .92)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; min-width: 0; box-shadow: var(--shadow);
  transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); animation: rise .35s var(--ease) both; }
.tile:nth-child(2) { animation-delay: 40ms; } .tile:nth-child(3) { animation-delay: 80ms; } .tile:nth-child(4) { animation-delay: 120ms; }
.tile:nth-child(5) { animation-delay: 160ms; } .tile:nth-child(6) { animation-delay: 200ms; } .tile:nth-child(7) { animation-delay: 240ms; } .tile:nth-child(8) { animation-delay: 280ms; }
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); opacity: .45; }
.tile.link:hover { border-color: rgba(153, 69, 255, .35); transform: translateY(-2px); box-shadow: 0 16px 40px -24px rgba(153, 69, 255, .6); }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-head .icon { color: var(--faint); }
.tile.link:hover .tile-head .icon { color: var(--sol-violet); }
.tile-label { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tile b { font: 850 32px/1.1 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.tile-sub { font-size: 13px; color: var(--faint); overflow-wrap: anywhere; }
.tile.tone-warn-tile { border-color: rgba(245, 177, 76, .35); }
.tile.tone-warn-tile::before { background: var(--amber); opacity: .9; }
.tile.tone-bad-tile { border-color: rgba(255, 123, 123, .4); }
.tile.tone-bad-tile::before { background: var(--red); opacity: .9; }

/* needs your attention — never hidden behind animation */
.attention { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; background: var(--surface); }
.attention h2 { font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.attention.has-items { border-color: rgba(245, 177, 76, .45); background: linear-gradient(135deg, rgba(245, 177, 76, .08), var(--surface) 45%); }
.attention.has-items h2 { color: #f7d197; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; font-weight: 850; }
.attention.has-bad { border-color: rgba(255, 123, 123, .5); background: linear-gradient(135deg, rgba(255, 123, 123, .09), var(--surface) 45%); }
.attention.has-bad h2 { color: #ffc0bb; }
.att-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--amber); color: #2a1800; font-weight: 900; font-size: 15px; flex: none; }
.attention.has-bad .att-icon { background: var(--red); color: #2b0606; }
.attention.clear { border-color: rgba(46, 229, 157, .3); background: linear-gradient(135deg, var(--green-wash), var(--surface) 45%); }
.attention.clear h2 { color: var(--green); }
.attention.clear .att-icon { background: var(--green); color: var(--green-ink); }
.attention > p { margin: 0; color: var(--muted); }
.attention ul { list-style: none; margin: 0; padding: 0; display: grid; }
.attention li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.attention li:first-child { border-top: 0; padding-top: 2px; }
.attention li i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.attention li.bad i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.attention li.warn i { background: var(--amber); }
.attention li.info i { background: var(--blue); }
.attention-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
.attention-foot span { display: inline-flex; align-items: center; gap: 8px; }

/* live validation: five-segment track */
.vtrack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vtrack li { display: grid; gap: 9px; min-width: 0; }
.vtrack li i { height: 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); }
.vtrack li.ok i { background: var(--green); border-color: var(--green); }
.vtrack li.warn i { background: var(--amber); border-color: var(--amber); }
.vtrack li.bad i { background: var(--red); border-color: var(--red); }
.vtrack li.info i { background: repeating-linear-gradient(-45deg, var(--blue) 0 6px, rgba(141, 180, 255, .45) 6px 12px); border-color: var(--blue); }
.vtrack li span { display: grid; gap: 1px; font-size: 13px; line-height: 1.3; }
.vtrack li span b { font-weight: 650; overflow-wrap: anywhere; }
.vtrack li span small { color: var(--faint); font-size: 12.5px; }
.vtrack li.ok small { color: var(--green); } .vtrack li.warn small { color: var(--amber); } .vtrack li.bad small { color: var(--red); } .vtrack li.info small { color: var(--blue); }
.vtrack.compact { gap: 4px; margin: 6px 0 2px; }
.vtrack.compact li i { height: 6px; }
.vhero { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 22px; background: var(--surface); display: grid; gap: 20px; }
.vhero.bad { border-color: rgba(255, 123, 123, .42); }
.vhero.ok { border-color: rgba(46, 229, 157, .35); }
.vhero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vhero-count { margin: 0; font-size: 17px; color: var(--muted); }
.vhero-count b { font: 850 40px/1 var(--font-display); letter-spacing: -0.03em; color: var(--text); margin-right: 4px; }
.vhero-explain { margin: 0; color: var(--muted); font-size: 15px; }

/* live validation: scenario cards */
.scenario-list { display: grid; gap: 18px; margin-top: 22px; }
.scenario-card { background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--line); border-radius: var(--radius); padding: 22px 24px 10px; display: grid; gap: 16px; min-width: 0; scroll-margin-top: 20px; }
.scenario-card.ok { border-left-color: var(--green); }
.scenario-card.warn { border-left-color: var(--amber); }
.scenario-card.bad { border-left-color: var(--red); }
.scenario-card.info { border-left-color: var(--blue); }
.scenario-card > .callout { margin: 0; }
.scenario-card > .btn-row { margin-bottom: 8px; }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-head h2 { margin: 0; font-size: 19px; font-weight: 720; }
.sc-explain { margin: -6px 0 0; color: var(--muted); font-size: 15px; max-width: 75ch; }
.sc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)) 1fr; gap: 10px 32px; margin: 0; font-size: 14.5px; }
.sc-meta dt { color: var(--faint); font-size: 13px; margin-bottom: 2px; }
.sc-meta dd { margin: 0; overflow-wrap: anywhere; }
.confirm-box { border: 1px solid rgba(141, 180, 255, .32); border-radius: var(--radius-sm); padding: 16px 18px; background: var(--blue-wash); display: grid; gap: 10px; }
.confirm-box p { margin: 0; color: var(--muted); font-size: 14.5px; }
.confirm-box .input { padding: 10px 12px; }
.run-form { display: grid; gap: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 16px; background: rgba(9, 9, 15, .6); }
.run-form .input, .run-form .select { padding: 10px 12px; }
.scenario-card .more-group { margin: 0 -2px; }

/* verifications: action tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.tab { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: var(--muted); font-weight: 650; font-size: 14.5px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab[aria-selected="true"] { color: #fff; border-color: rgba(153, 69, 255, .6); background: linear-gradient(100deg, rgba(153, 69, 255, .35), rgba(79, 125, 255, .22)); box-shadow: 0 6px 20px -10px rgba(153, 69, 255, .8); }
.tab-count { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--text); }
.tab[aria-selected="true"] .tab-count { background: rgba(255, 255, 255, .18); color: #fff; }
.tab.warn .tab-count { color: var(--amber); }
.tab.info .tab-count { color: var(--blue); }
.tab[aria-selected="true"].warn .tab-count, .tab[aria-selected="true"].info .tab-count { color: #fff; }
.view-help { margin: 0 0 6px; color: var(--muted); font-size: 14.5px; }
.filters .btn { padding: 10px 16px; }

/* verification detail */
.req-list-card { padding: 4px 24px; }
.req-row { padding: 18px 0 4px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; min-width: 0; }
.req-row:first-child { border-top: 0; }
.req-row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.req-row-head b { font-size: 15.5px; }
.req-row .more { border-top: 0; }
.req-row .more > summary { padding: 6px 2px; }

/* payout timeline (staff) */
.payout { margin-bottom: 24px; }
.payout-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.payout-steps li { position: relative; display: grid; gap: 8px; min-width: 0; font-size: 13px; align-content: start; }
.payout-steps li::before { content: ""; position: absolute; top: 14px; left: 32px; right: -2px; height: 2px; border-radius: 2px; background: var(--line); }
.payout-steps li:last-child::before { display: none; }
.payout-steps li.done::before { background: linear-gradient(90deg, var(--green), rgba(46, 229, 157, .5)); }
.payout-steps .step-dot { width: 30px; height: 30px; font-size: 12px; }
.payout-steps li.done .step-dot { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.payout-steps li.current .step-dot { border-color: var(--sol-violet); color: var(--text); background: rgba(153, 69, 255, .25); box-shadow: 0 0 0 4px rgba(153, 69, 255, .16); }
.payout-steps li.bad .step-dot { border-color: var(--red); color: var(--red); background: var(--red-wash); }
.payout-steps b { display: block; font-size: 13px; }
.payout-steps small { display: block; color: var(--faint); font-size: 12px; }
.payout-steps li.current small { color: var(--sol-violet); }
.payout-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(46, 229, 157, .4); background: linear-gradient(100deg, var(--green-wash), transparent 70%); }
.payout-done b { color: var(--green); letter-spacing: .06em; font-size: 14px; }
.payout-done .ch-icon { width: 30px; height: 30px; background: var(--green); color: var(--green-ink); font-size: 14px; }

/* collections */
.name-cell { display: flex; align-items: center; gap: 12px; }
.name-cell .thumb { flex: none; }
.nowrap-row { flex-wrap: nowrap; justify-content: flex-end; }

/* bounty editor: guided steps */
fieldset.step, section.step { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px 24px 18px; margin: 0 0 22px; background: linear-gradient(180deg, rgba(22, 22, 35, .9), rgba(17, 17, 27, .92)); min-width: 0; box-shadow: var(--shadow); }
fieldset.step > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-size: 18px; font-weight: 750; display: flex; align-items: center; gap: 12px; }
fieldset.step > legend + * { clear: both; }
.step-title { font-size: 18px; font-weight: 750; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; }
.step-n { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 14px; font-weight: 850; background: var(--grad-soft); border: 1px solid rgba(153, 69, 255, .4); color: var(--text); flex: none; }
.step-intro { margin: 0 0 18px 42px; color: var(--muted); font-size: 14.5px; }
fieldset.step > .more { margin-top: 18px; }
.req-stack { display: grid; gap: 14px; }
.req-editor .more { border-top: 1px solid var(--line-soft); }
.fine-tune { display: grid; gap: 16px; }
.manage-row { margin: -8px 0 18px; }
.review-step { border-color: var(--line); }
.review-step > .more { margin-top: 18px; }
.rule-summary { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(9, 9, 15, .6); padding: 18px 20px; }
.rs-lead { margin: 0 0 10px; font-weight: 650; font-size: 15.5px; }
.rs-list { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; }
.rs-list li { padding-left: 4px; }
.rs-list li::marker { color: var(--sol-violet); font-weight: 800; }
.rs-what { display: block; font-size: 15.5px; }
.rs-when { display: block; color: var(--green); font-size: 14px; margin-top: 2px; }
.rs-label { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; }
.rs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 24px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.rs-facts dt { color: var(--faint); font-size: 13px; }
.rs-facts dd { margin: 2px 0 0; }
.rule-summary .callout { margin: 16px 0 0; }
.blockers { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; display: grid; gap: 3px; }
.staff-shell .gold, .staff-shell td.gold, .rs-facts .gold { color: var(--sol-violet); font-weight: 700; }
.img-preview { position: relative; width: 132px; height: 99px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); flex: none; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* the sidebar becomes a top bar; its nav scrolls sideways instead of widening the page */
  .staff-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .side { position: sticky; z-index: 30; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 14px 0; border-right: 0; border-bottom: 1px solid var(--line-soft); gap: 8px; background: rgba(12, 11, 20, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .side, .side nav { min-width: 0; max-width: 100%; }
  .side-label { display: none; }
  .side nav { display: flex; overflow-x: auto; width: 100%; order: 3; gap: 2px; padding-bottom: 6px; scrollbar-width: none; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a { white-space: nowrap; padding: 9px 12px; }
  .side nav a[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px; background: var(--grad); }
  .side .who { margin: 0 0 0 auto; padding: 0; border: 0; background: none; display: flex; align-items: center; gap: 10px; }
  .who-name, .who-actions .open-site { display: none; }
  .staff-main { padding: 24px 16px 96px; }
  .ph h1 { font-size: 25px; }
  .vtrack { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .vtrack li span b { display: none; }
  .sc-meta { grid-template-columns: 1fr 1fr; }
  .sc-meta .wide { grid-column: 1 / -1; }
  .step-intro { margin-left: 0; }
  .attention li { grid-template-columns: auto minmax(0, 1fr); }
  .attention li .btn { grid-column: 2; justify-self: start; }
  .card, .scenario-card, fieldset.step, section.step { padding-left: 16px; padding-right: 16px; }
  .two-col, .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payout-steps { grid-template-columns: 1fr; gap: 0; }
  .payout-steps li { grid-template-columns: 30px 1fr; gap: 12px; padding-bottom: 12px; }
  .payout-steps li::before { top: 32px; bottom: 2px; left: 14px; right: auto; width: 2px; height: auto; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px; }
  .tile b { font-size: 24px; }
  .tile-label { font-size: 11px; }
  .vtrack li span small { font-size: 11px; }
  .sc-meta { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .filters .select { flex: 1 1 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .ph { margin-bottom: 22px; }
  /* tables scroll sideways inside their card instead of squeezing every column */
  .table-wrap table { min-width: 620px; }
  .table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}

/* ============================================================ prize wallet, prize picker & payouts */
.field-inline { display: flex; gap: 8px; align-items: center; }
.field-inline .input { flex: 1; min-width: 0; }
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix .input { padding-right: 56px; font-variant-numeric: tabular-nums; }
.input-suffix > span { position: absolute; right: 14px; color: var(--muted); font-weight: 700; font-size: 13px; pointer-events: none; }
.reward-auto { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.countdown.open { color: var(--sol-violet); background: var(--violet-wash); }

/* segmented prize-type selector */
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.seg-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(9, 9, 15, .5); color: var(--muted); cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t); }
.seg-btn:hover { border-color: var(--line-strong); color: var(--text); }
.seg-btn span { display: grid; line-height: 1.25; min-width: 0; }
.seg-btn b { font-size: 14.5px; color: inherit; }
.seg-btn small { font-size: 12px; color: var(--faint); }
.seg-btn.on { color: var(--text); border-color: rgba(153, 69, 255, .65); background: linear-gradient(100deg, rgba(153, 69, 255, .2), rgba(79, 125, 255, .1)); box-shadow: 0 6px 20px -12px rgba(153, 69, 255, .9); }
.seg-btn.on .icon { color: var(--sol-violet); }
.prize-panel { animation: rise var(--t) var(--ease) both; }

/* NFT cards — picker (buttons) and wallet page (static) */
.nft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.nft-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(9, 9, 15, .6); color: var(--text); cursor: pointer; overflow: hidden; min-width: 0;
  transition: border-color var(--t-fast), transform var(--t) var(--ease), box-shadow var(--t); }
.nft-card.static { cursor: default; }
button.nft-card:not([disabled]):hover { border-color: rgba(153, 69, 255, .5); transform: translateY(-2px); }
.nft-card.selected { border-color: var(--sol-violet); box-shadow: 0 0 0 2px rgba(153, 69, 255, .45), 0 14px 30px -18px rgba(153, 69, 255, .9); }
.nft-card.unsupported { opacity: .62; cursor: not-allowed; }
.nft-card.static.unsupported { cursor: default; }
.nft-art { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(153, 69, 255, .25), rgba(9, 9, 15, .9) 70%); color: var(--faint); }
.nft-art img { width: 100%; height: 100%; object-fit: contain; }
.nft-meta { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.nft-meta b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nft-meta small { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.nft-unsupported { color: var(--red) !important; font-weight: 650; }
.nft-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sol-violet); color: #fff; font-weight: 900; font-size: 13px; box-shadow: 0 0 0 3px rgba(9, 9, 15, .8); }
.nft-link { padding: 0 12px 12px; font-size: 12.5px; }

/* Prize Wallet page */
.pw-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; padding: 26px; margin-bottom: 24px; border-radius: var(--radius-lg); isolation: isolate;
  background: radial-gradient(circle at 0% 0%, rgba(153, 69, 255, .22), transparent 50%), radial-gradient(circle at 100% 100%, rgba(20, 241, 149, .12), transparent 45%), linear-gradient(180deg, rgba(24, 24, 38, .95), rgba(15, 15, 24, .95));
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.pw-hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .55; pointer-events: none; }
.pw-hero.tone-bad::before { background: var(--red); }
.pw-hero.tone-neutral::before, .pw-hero.tone-warn::before { opacity: .3; }
.pw-main { min-width: 0; display: grid; gap: 14px; align-content: start; }
.pw-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.addr-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.addr { font-family: var(--mono); font-size: 14px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(9, 9, 15, .7); border: 1px solid var(--line-soft); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-balance { display: grid; gap: 4px; margin-top: 6px; }
.pw-sol { display: flex; align-items: center; gap: 12px; }
.pw-sol b { font: 880 clamp(34px, 5vw, 48px)/1 var(--font-display); letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw-sol > span { font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.pw-sub { font-size: 14px; color: var(--muted); }
.pw-ready { min-width: 0; padding: 18px; border-radius: var(--radius); background: rgba(9, 9, 15, .55); border: 1px solid var(--line-soft); }
.pw-ready h2 { font-size: 15px; margin: 0 0 10px; letter-spacing: .02em; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.checklist .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.checklist li.ok .ck { background: var(--green); color: var(--green-ink); }
.checklist li.bad .ck { background: var(--red-wash); color: var(--red); border: 1px solid rgba(255, 123, 123, .45); }
.checklist b { display: block; font-weight: 650; }
.checklist small { display: block; color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.token-list { display: grid; }
.token-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line-soft); }
.token-row:first-child { border-top: 0; }
.token-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--grad-soft); border: 1px solid var(--line); color: var(--text); }
.token-icon img { width: 100%; height: 100%; object-fit: cover; }
.token-name { min-width: 0; display: grid; }
.token-name b { font-size: 15px; }
.token-name small { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-amt { font: 800 17px var(--font-display); font-variant-numeric: tabular-nums; }

/* claim detail: automated payout */
.payout-card { position: relative; }
.payout-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; background: var(--grad); border-radius: 2px; opacity: .8; }
.payout-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.payout-steps li.warn .step-dot { border-color: var(--amber); color: var(--amber); background: var(--amber-wash); }
.payout-steps li.warn small { color: var(--amber); }
.payout-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px; border-radius: var(--radius-sm); background: rgba(9, 9, 15, .55); border: 1px solid var(--line-soft); }
.payout-prize { display: grid; gap: 2px; min-width: 0; }
.payout-prize b { font: 800 19px var(--font-display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.payout-prize small { overflow-wrap: anywhere; }
.payout-card .callout { margin: 14px 0 0; }
.attempts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attempts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.attempts li:first-child { border-top: 0; }
.attempts small { flex-basis: 100%; }

@media (max-width: 900px) {
  .pw-hero { grid-template-columns: 1fr; padding: 20px 16px; }
  .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .token-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .token-row .sb { grid-column: 2 / -1; justify-self: start; }
  .payout-steps.four { grid-template-columns: 1fr; }
  .payout-action .btn { width: 100%; }
  .nft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addr { font-size: 12.5px; flex: 1 1 100%; }
}

/* ------------------------------------------------------------ reduced motion: no non-essential animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .ambient .blob, .orb-ring, .orb > svg, .live-dot::after, .pulse-dot::after, .pill.live::before { animation: none !important; }
  .bounty-card:hover, .tile.link:hover, .btn:hover, .steps li:hover, .active-card:hover { transform: none; }
  .check-draw path { stroke-dashoffset: 0; }
  /* keep loading indicators understandable without motion */
  .scan > i { animation: none !important; background: conic-gradient(#9945ff, #19d3f0, #14f195, #9945ff); }
  .scan-bar > i { animation: none !important; width: 100%; opacity: .6; }
}