:root {
  --bg: #faf8f4;
  --bg-elev: #fdfbf7;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #353535;
  --muted: #6b6b6b;
  --line: #ebe7df;
  --line-strong: #ddd6c8;
  --accent: #d4751c;
  --accent-ink: #b25f12;
  --accent-soft: #fdf1e0;
  --accent-glow: rgba(212, 117, 28, 0.18);
  --green: #15803d;
  --green-soft: #dcfce7;
  --red: #b91c1c;
  --red-soft: #fef2f2;
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.05);
  --shadow-lg: 0 2px 4px rgba(20, 20, 20, 0.04), 0 18px 40px rgba(20, 20, 20, 0.08);
  --radius: 12px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(253, 251, 247, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.logo-mark {
  color: var(--accent);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(212, 117, 28, 0.14);
}
.logo-mark.small {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.brand-text { font-weight: 800; }
.brand-tld { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  /* overflow MUST stay visible — the avatar dropdown panel is absolutely
     positioned inside .user-menu and gets clipped by any overflow:hidden/auto
     on this container. */
  overflow: visible;
  min-width: 0;
}
.nav-links a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-links > * { flex-shrink: 0; }

/* ---- Staff-mode compact nav ---- */
/* When staff mode is on, the STAFF pill takes extra space. Shrink everything
   in the nav slightly so the row stays clean and the avatar doesn't wrap. */
body.staff-mode .nav-links { gap: 10px; }
body.staff-mode .nav-links a { font-size: 13px; }
body.staff-mode .balance,
body.staff-mode .user-name { font-size: 12.5px; }
body.staff-mode .balance { padding: 4px 8px; }
body.staff-mode .mode-toggle-btn { padding: 3px 9px; font-size: 10.5px; }
body.staff-mode .staff-toggle { padding: 3px 9px 3px 6px; font-size: 10.5px; }
body.staff-mode .theme-toggle { font-size: 14px; padding: 2px 6px; }
body.staff-mode .user-btn { padding: 3px 6px 3px 4px; }
body.staff-mode .user-avatar { width: 28px; height: 28px; font-size: 12px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.balance {
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(212, 117, 28, 0.16);
}
.inline { display: inline; }
.link {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}
.link:hover { color: var(--ink); text-decoration: underline; }
.hide-sm { display: inline; }

/* ---------- container & typography ---------- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}

h1 {
  font-size: 38px;
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
}
h2 {
  font-size: 26px;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h3 { font-size: 16px; margin: 16px 0 6px; font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.accent { color: var(--accent); }
.prewrap { white-space: pre-wrap; word-wrap: break-word; }

.serif-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.005em;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.section-head { margin-bottom: 24px; }
.section-head h2 { margin-top: 4px; }
.inline-head { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 14px;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: white; }
.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover { background: var(--bg-elev); border-color: var(--ink-soft); }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 11px; }
.block { display: block; width: 100%; text-align: center; margin-bottom: 8px; }

/* ---------- flash ---------- */
.flash {
  padding: 12px 32px;
  font-weight: 500;
  font-size: 14px;
}
.flash-success { background: var(--green-soft); color: var(--green); border-bottom: 1px solid #a7f3d0; }
.flash-error { background: var(--red-soft); color: var(--red); border-bottom: 1px solid #fecaca; }
.error-box {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid #fecaca;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 12px 0;
  font-size: 14px;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 72px 0 56px;
  margin-bottom: 56px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > *:not(.hero-glow) { position: relative; z-index: 1; }
.hero h1 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 8px auto 18px;
  max-width: 880px;
  line-height: 1.05;
}
.lede {
  font-size: 19px;
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hero-foot { font-size: 13px; }

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 64px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ---------- how ---------- */
.how { margin: 64px 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(212, 117, 28, 0.14);
}
.step h3 { margin: 0 0 6px; }
.step p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.55; }

/* ---------- rows & grids ---------- */
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0 0 24px;
  gap: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  box-shadow: var(--shadow-sm);
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateY(-2px);
}
.card h3 { margin: 4px 0; font-size: 17px; }
.card p { margin: 0; font-size: 14px; }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.tag {
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bounty {
  font-weight: 700;
  font-size: 18px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.empty {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}

/* ---------- filters & forms ---------- */
.filters {
  display: flex;
  gap: 16px;
  margin: 16px 0 28px;
  align-items: end;
  flex-wrap: wrap;
}
.filters label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  box-shadow: var(--shadow-sm);
}
.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
input, textarea, select {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: var(--surface);
  width: 100%;
  color: var(--ink);
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.auth {
  max-width: 460px;
  margin: 48px auto;
}
.auth h1 { margin-bottom: 20px; }

/* ---------- job detail ---------- */
.job-head { margin: 18px 0 28px; }
.job-head h1 { margin: 14px 0 10px; font-size: 32px; }
.job-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
}
.job-main h3 { margin-top: 28px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.job-main h3:first-child { margin-top: 0; }
.job-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bounty-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.bounty-big {
  font-size: 36px;
  font-weight: 800;
  color: var(--green);
  margin: 6px 0;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.deliverable {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  font-size: 14px;
}
.submit-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}
.submit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- statuses ---------- */
.status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 6px;
}
.status-open { background: var(--green-soft); color: var(--green); }
.status-pending_customer { background: #fef3c7; color: #92400e; }
.status-in_progress { background: #dbeafe; color: #1d4ed8; }
.status-overdue { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; animation: status-overdue-pulse 1.6s ease-in-out infinite; }
@keyframes status-overdue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.status-submitted { background: #fef3c7; color: #92400e; }
.status-completed { background: var(--accent-soft); color: var(--accent-ink); }
.status-cancelled { background: #f3f4f6; color: var(--muted); }

/* ---------- wallet & tables ---------- */
.wallet { margin: 16px 0 32px; }
.wallet-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 540px;
  box-shadow: var(--shadow-sm);
}
.wallet-amount {
  font-size: 36px;
  font-weight: 800;
  margin: 6px 0 14px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.inline-form input { flex: 1; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--bg);
  font-weight: 600;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg-elev); }

.list { padding-left: 18px; }
.list li { margin-bottom: 8px; }

.profile { max-width: 720px; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 36px 32px 28px;
  font-size: 14px;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links {
  display: flex;
  gap: 22px;
}
.footer-links a { color: var(--ink-soft); }
.footer-meta {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- center variant for section headers ---------- */
.section-head.center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow { margin-left: auto; margin-right: auto; }

/* ---------- trust strip ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 64px;
  box-shadow: var(--shadow-sm);
}
.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
}
.trust-item strong { display: block; }
.trust-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(212, 117, 28, 0.14);
}

/* ---------- flow ---------- */
.flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 32px 0 64px;
  flex-wrap: wrap;
}
.flow-step {
  flex: 1 1 180px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.flow-step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.flow-num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px var(--accent-glow);
}
.flow-step h3 { margin: 0 0 6px; font-size: 15px; }
.flow-step p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.flow-arrow {
  display: grid;
  place-items: center;
  color: var(--line-strong);
  font-size: 22px;
  font-weight: 300;
  flex-shrink: 0;
  width: 16px;
}

/* ---------- two-sided value ---------- */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 56px 0 64px;
}
.side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.side h2 {
  font-size: 22px;
  margin: 8px 0 18px;
  letter-spacing: -0.02em;
}
.side-customer { background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%); }
.side-dev      { background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 200%); }

.checks {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.checks li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.checks li:last-child { border-bottom: none; }
.checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- categories ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 64px;
}
.cat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); text-decoration: none; }
.cat-icon { font-size: 28px; margin-bottom: 10px; }
.cat h3 { margin: 0 0 4px; font-size: 16px; }
.cat p { margin: 0; font-size: 13.5px; color: var(--muted); }

.beyond {
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  margin: 0 0 64px;
  border: 1px solid var(--line);
}
.beyond-grid {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 0;
}

/* ---------- FAQ ---------- */
.faq { margin: 64px 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 1000px;
  margin: 32px auto 0;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-ink);
  font-size: 20px;
  font-weight: 400;
  transition: transform .15s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- final CTA ---------- */
.final-cta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  margin: 32px 0 16px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 65%);
  pointer-events: none;
}
.final-cta > * { position: relative; }
.final-cta h2 {
  font-size: 30px;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.final-cta p { margin: 0 0 24px; }

/* ---------- chat (job detail) ---------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  max-height: 460px;
  overflow-y: auto;
}
.chat-empty { padding: 16px; text-align: center; }
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
}
.chat-msg.theirs {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
}
.chat-msg.mine {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid rgba(212, 117, 28, 0.2);
}
.chat-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.chat-meta strong { color: var(--ink); font-weight: 600; }
.chat-body { word-wrap: break-word; }
.chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
}
.chat-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-attach-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  transition: background .12s ease, border-color .12s ease;
}
.chat-attach-label:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--ink);
}
.chat-attach-label input[type="file"] { display: none; }
.chat-attach-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-form .btn { margin-left: auto; }

.chat-attach-preview {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}
.chat-attach-preview img,
.chat-attach-preview video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
}

.chat-attachment {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-image-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.chat-attachment img {
  max-width: 100%;
  max-height: 320px;
  display: block;
  border-radius: 8px;
  cursor: zoom-in;
  border: 1px solid var(--line);
}
.chat-video {
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  background: #000;
  display: block;
  border: 1px solid var(--line);
}
.chat-attachment-meta { padding: 0 2px; }

body.dev-mode .chat-attachment img,
body.dev-mode .chat-video { border-color: var(--line-strong); }

/* ---------- brand logo ---------- */
.brand-logo { display: block; }
.brand-text { font-weight: 800; letter-spacing: -0.01em; }
.brand-tld { color: var(--accent); }

/* ---------- developers directory ---------- */
.search-bar {
  display: flex;
  gap: 8px;
  margin: 16px 0 28px;
}
.search-bar input { flex: 1; }

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.dev-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.dev-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.dev-head { display: flex; gap: 12px; align-items: center; }
.dev-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  /* overflow:hidden removed so per-rating ring effects can render outside */
}
.dev-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }
.dev-avatar.lg { width: 64px; height: 64px; font-size: 24px; }

/* ---------- Per-rating subtle ring/glow on small dev avatars (44px) ---------- */
/* Intentionally smaller and quieter than the profile-page versions — just a
   ring + soft glow + gentle pulse so the rating tier reads at a glance
   without being visually loud. */
.dev-avatar.rating-1 {
  box-shadow: 0 0 0 2px #6b3a1a, 0 0 4px rgba(107, 58, 26, 0.4);
}
.dev-avatar.rating-2 {
  box-shadow: 0 0 0 2px #4caa28, 0 0 4px rgba(76, 170, 40, 0.4);
}
.dev-avatar.rating-3 {
  box-shadow: 0 0 0 3px #d4751c, 0 0 4px rgba(212, 117, 28, 0.35);
}
.dev-avatar.has-flame {
  box-shadow:
    0 0 0 2px #ff7a1a,
    0 -2px 6px rgba(255, 110, 0, 0.55),
    0 -4px 10px rgba(255, 60, 0, 0.35),
    0  0  10px rgba(255, 140, 0, 0.30);
  animation: dev-flame-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes dev-flame-pulse {
  0%   { box-shadow: 0 0 0 2px #ff7a1a, 0 -2px 6px rgba(255, 110, 0, 0.55), 0 -4px 10px rgba(255, 60, 0, 0.35), 0 0 10px rgba(255, 140, 0, 0.30); }
  100% { box-shadow: 0 0 0 2px #ff8a2a, 0 -3px 8px rgba(255, 130, 20, 0.70), 0 -6px 14px rgba(255, 80, 0, 0.45), 0 0 14px rgba(255, 160, 40, 0.40); }
}
.dev-avatar.is-perfect {
  box-shadow:
    0 0 0 2px #ffd700,
    0 0 6px rgba(255, 215, 0, 0.55),
    0 0 14px rgba(255, 200, 40, 0.35);
  animation: dev-gold-pulse 2.2s ease-in-out infinite alternate;
}
@keyframes dev-gold-pulse {
  0%   { box-shadow: 0 0 0 2px #ffd700, 0 0 6px rgba(255, 215, 0, 0.55), 0 0 14px rgba(255, 200, 40, 0.35); }
  100% { box-shadow: 0 0 0 2.5px #ffe14d, 0 0 10px rgba(255, 230, 80, 0.80), 0 0 22px rgba(255, 215, 60, 0.50); }
}
/* Twinkling sparkle dots for is-perfect — tiny, subtle, only on 5★ */
.dev-avatar.is-perfect::after {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  border-radius: 999px;
  background-image:
    radial-gradient(circle at 50%   0%, #fffbe6 0, rgba(255, 240, 150, 0.5) 1px, transparent 2px),
    radial-gradient(circle at 100% 50%, #fffbe6 0, rgba(255, 240, 150, 0.5) 1px, transparent 2px),
    radial-gradient(circle at 50% 100%, #fffbe6 0, rgba(255, 240, 150, 0.5) 1px, transparent 2px),
    radial-gradient(circle at 0%   50%, #fffbe6 0, rgba(255, 240, 150, 0.5) 1px, transparent 2px);
  animation: dev-sparkle 2.0s ease-in-out infinite;
}
@keyframes dev-sparkle {
  0%, 100% { opacity: 0.4; transform: scale(0.94); }
  50%      { opacity: 1.0; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .dev-avatar.has-flame, .dev-avatar.is-perfect { animation: none; }
  .dev-avatar.is-perfect::after { animation: none; opacity: 0.7; }
}
.dev-headline { font-size: 13px; color: var(--ink-soft); margin: 1px 0 3px; }
.dev-name { font-weight: 700; font-size: 16px; }
.dev-bio { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.dev-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-pill {
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- profile (with cover + avatar) ---------- */
.profile { max-width: 860px; }
.profile-cover {
  position: relative;
  height: 200px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fdebd6 0%, #f5b89b 60%, #d4571a 120%);
  background-size: cover;
  background-position: center;
  margin-bottom: 56px;
  border: 1px solid var(--line);
}
.profile-avatar {
  position: absolute;
  left: 24px;
  bottom: -44px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  border: 4px solid var(--bg);
  /* Outer accent ring + the existing soft drop shadow.
     overflow:hidden moved off the parent so per-rating ::before/::after
     pseudo-elements (sparkles, drips, splats) can render outside the ring. */
  box-shadow: 0 0 0 3px var(--accent), var(--shadow);
}
.profile-avatar img,
.profile-avatar .avatar-letter { border-radius: 999px; }
/* 4.0+ stars: orange/red flame licking off the ring (rises upward) */
.profile-avatar.has-flame {
  animation: flame-flicker 0.9s ease-in-out infinite alternate;
}
@keyframes flame-flicker {
  0% {
    box-shadow:
      0 0 0 3px #ff7a1a,
      0 -4px 14px rgba(255, 110, 0, 0.75),
      0 -10px 22px rgba(255, 60, 0, 0.55),
      6px -8px 18px rgba(255, 90, 0, 0.45),
     -6px -8px 18px rgba(255, 90, 0, 0.45),
      0  0  26px rgba(255, 140, 0, 0.40),
      var(--shadow);
  }
  50% {
    box-shadow:
      0 0 0 3px #ff8a2a,
      0 -7px 18px rgba(255, 130, 20, 0.80),
      0 -14px 28px rgba(255, 70,  0, 0.55),
      8px -12px 22px rgba(255, 110, 0, 0.45),
     -8px -12px 22px rgba(255, 110, 0, 0.45),
      0  0  32px rgba(255, 150, 0, 0.45),
      var(--shadow);
  }
  100% {
    box-shadow:
      0 0 0 3px #ff9a40,
      0 -10px 22px rgba(255, 160, 40, 0.90),
      0 -18px 34px rgba(255, 80,  0, 0.65),
      6px -14px 26px rgba(255, 120, 0, 0.55),
     -6px -14px 26px rgba(255, 120, 0, 0.55),
      0  0  40px rgba(255, 170, 0, 0.50),
      var(--shadow);
  }
}

/* Perfect 5.0: gold ring with a soft pulse + twinkling sparkles around it */
.profile-avatar.is-perfect {
  border-color: var(--bg);
  animation: gold-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes gold-pulse {
  0% {
    box-shadow:
      0 0 0 3px #ffd700,
      0 0 14px rgba(255, 215,  0, 0.55),
      0 0 28px rgba(255, 200, 40, 0.35),
      var(--shadow);
  }
  100% {
    box-shadow:
      0 0 0 4px #ffe14d,
      0 0 22px rgba(255, 230, 80, 0.85),
      0 0 44px rgba(255, 215, 60, 0.55),
      0 0 68px rgba(255, 215, 80, 0.30),
      var(--shadow);
  }
}
/* Sparkle layer 1 — eight small bright dots that fade together but rotate */
.profile-avatar.is-perfect::before,
.profile-avatar.is-perfect::after {
  content: '';
  position: absolute;
  inset: -14px;
  pointer-events: none;
  border-radius: 999px;
  background-repeat: no-repeat;
  z-index: 1;
}
.profile-avatar.is-perfect::before {
  background-image:
    radial-gradient(circle at 50%   0%, #fffbe6 0, rgba(255, 240, 150, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 100% 50%, #fffbe6 0, rgba(255, 240, 150, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 50% 100%, #fffbe6 0, rgba(255, 240, 150, 0.7) 2px, transparent 4px),
    radial-gradient(circle at 0%   50%, #fffbe6 0, rgba(255, 240, 150, 0.7) 2px, transparent 4px);
  animation: sparkle-twinkle-a 1.6s ease-in-out infinite;
}
.profile-avatar.is-perfect::after {
  background-image:
    radial-gradient(circle at 85% 15%, #ffffff 0, rgba(255, 245, 180, 0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 15% 15%, #ffffff 0, rgba(255, 245, 180, 0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 85% 85%, #ffffff 0, rgba(255, 245, 180, 0.8) 1.5px, transparent 3px),
    radial-gradient(circle at 15% 85%, #ffffff 0, rgba(255, 245, 180, 0.8) 1.5px, transparent 3px);
  animation: sparkle-twinkle-b 2.0s ease-in-out infinite 0.4s;
}
@keyframes sparkle-twinkle-a {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50%      { opacity: 1.0; transform: scale(1.06); }
}
@keyframes sparkle-twinkle-b {
  0%, 100% { opacity: 1.0; transform: scale(1.04) rotate(0deg); }
  50%      { opacity: 0.4; transform: scale(0.94) rotate(15deg); }
}

/* 3.0–3.99: thicker, calm orange ring (no animation) */
.profile-avatar.rating-3 {
  box-shadow: 0 0 0 6px #d4751c, var(--shadow);
}

/* 2.0–2.99: green ring with two slime drips falling from the bottom */
.profile-avatar.rating-2 {
  box-shadow: 0 0 0 4px #4caa28, 0 4px 10px rgba(76, 170, 40, 0.35), var(--shadow);
}
.profile-avatar.rating-2::before,
.profile-avatar.rating-2::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 9px;
  height: 16px;
  background: radial-gradient(ellipse at 50% 35%, #aae07a 0%, #6fc245 55%, #3e8a1e 100%);
  border-radius: 50% 50% 50% 50% / 30% 30% 78% 78%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
  z-index: 1;
  pointer-events: none;
}
.profile-avatar.rating-2::before {
  left: 22%;
  animation: slime-drip 2.6s ease-in infinite;
}
.profile-avatar.rating-2::after {
  left: 64%;
  width: 7px; height: 14px;
  animation: slime-drip 3.2s ease-in infinite 0.7s;
}
@keyframes slime-drip {
  0%   { transform: translateY(-10px) scaleY(0.4); opacity: 0; }
  15%  { transform: translateY(-2px)  scaleY(0.9); opacity: 1; }
  60%  { transform: translateY(28px)  scaleY(1.3); opacity: 1; }
  100% { transform: translateY(56px)  scaleY(1.6); opacity: 0; }
}

/* 1.0–1.99: brown ring with messy splatter spots around it (static, no animation) */
.profile-avatar.rating-1 {
  border-color: var(--bg);
  box-shadow:
    0 0 0 4px #6b3a1a,
    /* asymmetric "splat" droplets via tiny offset shadows with negative spread */
    -22px  -8px 0 -3px #6b3a1a,
     24px  -3px 0 -2px #6b3a1a,
    -10px  20px 0 -1px #6b3a1a,
     16px  22px 0 -2px #6b3a1a,
    -28px  10px 0 -4px #6b3a1a,
     30px  14px 0 -4px #6b3a1a,
    -16px -22px 0 -3px #6b3a1a,
     18px -22px 0 -2px #6b3a1a,
    var(--shadow);
}
.profile-avatar.rating-1::before {
  /* Big jagged splat tail to the lower-right */
  content: '';
  position: absolute;
  right: -28px;
  bottom: -12px;
  width: 24px;
  height: 18px;
  background:
    radial-gradient(circle at 30% 40%, #6b3a1a 0%, #6b3a1a 35%, transparent 38%),
    radial-gradient(circle at 80% 60%, #6b3a1a 0%, #6b3a1a 30%, transparent 33%),
    radial-gradient(circle at 60% 20%, #6b3a1a 0%, #6b3a1a 28%, transparent 31%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
  z-index: 1;
  pointer-events: none;
  transform: rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar.has-flame,
  .profile-avatar.is-perfect,
  .profile-avatar.rating-2 { animation: none; }
  .profile-avatar.is-perfect::before,
  .profile-avatar.is-perfect::after { animation: none; opacity: 0.85; }
  .profile-avatar.rating-2::before,
  .profile-avatar.rating-2::after  { animation: none; opacity: 0.9; transform: translateY(20px) scaleY(1.2); }
  .profile-avatar.has-flame  { box-shadow: 0 0 0 3px #ff7a1a, 0 0 22px rgba(255, 110, 0, 0.65), var(--shadow); }
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .avatar-letter {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 36px;
}
.profile-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.profile-head-main { flex: 1; min-width: 0; }
.profile-head h1 { margin: 0 0 6px; }
.profile-headline {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 8px;
  font-weight: 500;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  margin: 0;
}
.profile-actions { flex-shrink: 0; }

/* ---------- profile stats strip + reviews ---------- */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 6px;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
}
.profile-stat:last-child { border-right: none; }
.profile-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.profile-stat-label { font-size: 13px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }

.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.review-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.review-head .dev-avatar.small { width: 36px; height: 36px; font-size: 14px; }
.rating-stars {
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 1px;
  margin-top: 2px;
}
.rating-stars .muted { opacity: 0.3; }
.section-h {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 24px 0 8px;
  font-weight: 600;
}

/* ---------- form rows ---------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------- job templates gallery (new-job page) ---------- */
.job-templates {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 16px 0 24px;
}
.job-templates-heading {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.job-templates-sub { margin: 0 0 14px; }
.job-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.job-template-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.job-template-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.job-template-icon { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.job-template-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.job-template-bounty { font-size: 12px; }

.bounty-suggester {
  margin: -6px 0 4px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

/* ---------- escrow status banner (job chat) ---------- */
.escrow-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0.04));
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 12px;
}
body:not(.dark-mode) .escrow-banner {
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.10), rgba(234, 88, 12, 0.04));
  border-color: rgba(234, 88, 12, 0.45);
}
.escrow-banner .escrow-icon { font-size: 18px; flex: 0 0 auto; }
.escrow-banner.escrow-released {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
  border-color: rgba(34, 197, 94, 0.45);
}
.escrow-banner.escrow-refunded {
  background: linear-gradient(180deg, rgba(120, 120, 120, 0.10), rgba(120, 120, 120, 0.04));
  border-color: rgba(120, 120, 120, 0.45);
}
.escrow-text { line-height: 1.4; }

/* ---------- inline trust stats on offer rows ---------- */
.offer-trust-stats {
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: 0.2px;
}
.offer-trust-stats span:first-child {
  color: var(--accent);
}

/* ---------- dashboard stats strip + activity feed ---------- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 20px;
}
.dash-stat {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  transition: transform .12s ease, border-color .12s ease;
}
.dash-stat:hover { transform: translateY(-2px); border-color: var(--accent); }
.dash-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-soft); }
.dash-stat-value { font-size: 22px; font-weight: 700; margin-top: 2px; }

.dash-activity { margin: 0 0 22px; }
.dash-activity-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-activity-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---------- Road to Verified ---------- */
.verify-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 14px 0 22px;
}
@media (min-width: 720px) {
  .verify-bars { grid-template-columns: 1fr 1fr; }
}
.verify-bar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.verify-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.verify-bar-progress {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.verify-bar-track {
  position: relative;
  background: rgba(120, 120, 120, 0.18);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}
.verify-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #d4751c, #f4b942);
  border-radius: 999px;
  transition: width .9s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px rgba(244, 185, 66, 0.3);
}
.verify-bar-fill.filled {
  background: linear-gradient(90deg, #f5b800, #ffd700, #f5b800);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.55);
}
.verify-eligible {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0.02));
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 18px 0;
}
.verify-eligible h3 { margin: 0 0 6px; }
.verify-not-eligible { margin: 12px 0 4px; }
.verify-not-eligible button[disabled] { opacity: 0.55; cursor: not-allowed; }
.verify-already {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.03));
  border: 1px solid rgba(255, 215, 0, 0.55);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 14px 0 22px;
}
.verify-already-check { flex: 0 0 auto; display: inline-flex; align-items: center; }

/* ---------- pricing comparison (landing) ---------- */
.pricing-compare { margin: 44px 0; }
.pricing-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 22px;
}
@media (min-width: 760px) {
  .pricing-table { grid-template-columns: 1fr 1fr 1fr; }
}
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.pricing-card-us {
  border: 2px solid var(--accent);
  box-shadow: 0 8px 30px var(--accent-glow);
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-elev));
}
.pricing-card-us::before {
  content: 'Best value';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 999px;
}
.pricing-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.pricing-logo { font-size: 18px; font-weight: 700; }
.pricing-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.pricing-pill-bad {
  background: rgba(220, 60, 60, 0.10);
  border-color: rgba(220, 60, 60, 0.45);
  color: #d33;
}
.pricing-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.pricing-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pricing-rows li.pricing-divider {
  padding: 0;
  margin: 8px 0;
  border-top: 1px dashed var(--line);
}
.pricing-rows li.pricing-takehome {
  font-size: 15px;
  font-weight: 600;
}
.pricing-rows li.pricing-takehome strong { font-size: 22px; }
.pricing-good { color: #16a34a; }
.pricing-bad { color: #d33; }
.pricing-foot { text-align: center; margin-top: 18px; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- offers ---------- */
.offer-head { margin: 16px 0 24px; }
.offer-head h1 { margin: 12px 0 6px; }
.thread {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thread-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.thread-item.is-latest {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.thread-meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.thread-meta strong { color: var(--ink); }
.thread-num { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.thread-message { font-size: 13px; margin-top: 6px; }
.counter-details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.counter-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.counter-details summary::-webkit-details-marker { display: none; }
.counter-details[open] summary { margin-bottom: 12px; color: var(--accent-ink); }

.btn-danger { color: var(--red); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }

/* ---------- deadline / countdown ---------- */
.deadline-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.deadline-big {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 4px 0;
}
.deadline-box.urgent {
  background: #fff7ed;
  border-color: #fed7aa;
}
.deadline-box.urgent .deadline-big { color: #c2410c; }
.deadline-box.expired {
  background: var(--red-soft);
  border-color: #fecaca;
}
.deadline-box.expired .deadline-big { color: var(--red); }

.deadline-prompt {
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- dashboard top row ---------- */
.dash-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 24px;
}
.notif-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.notif-h { margin: 0 0 12px; font-size: 18px; }
.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.notif-list li {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 12px;
  font-size: 14px;
}

/* ---------- offer status colors (extending existing) ---------- */
.status-pending { background: #fef3c7; color: #92400e; }
.status-countered { background: #dbeafe; color: #1d4ed8; }
.status-accepted { background: var(--green-soft); color: var(--green); }
.status-declined { background: #f3f4f6; color: var(--muted); }

/* ---------- user dropdown ---------- */
.user-menu {
  position: relative;
}
.user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: background .12s ease, border-color .12s ease;
}
.user-btn:hover, .user-menu.open .user-btn {
  background: var(--bg-elev);
  border-color: var(--line);
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar.lg { width: 48px; height: 48px; font-size: 18px; }
.user-name { font-weight: 500; font-size: 14px; }
.caret { color: var(--muted); font-size: 11px; }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  z-index: 9999;
}
.user-menu.open .user-menu-panel { display: block; }
.menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.menu-name { font-weight: 700; font-size: 14px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.menu-item:hover {
  background: var(--bg-elev);
  text-decoration: none;
}
.menu-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent-ink);
}
.menu-item:hover .menu-icon { color: var(--accent); }
.menu-item-danger .menu-icon { color: var(--red); }
.menu-item-danger { color: var(--red); }
.menu-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}
.menu-form { margin: 0; }

/* ---------- clickable star rating ----------
   Stars render visually left-to-right with `flex-direction: row-reverse` so the
   `:checked ~ label` sibling selector cascades highlight to the LEFT siblings
   (visually) when you click a star.
   Empty state: hollow ☆ (white fill with dark stroke). Active: filled orange ★. */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
  line-height: 1;
}
.star-rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.star-rating label {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  width: 36px;
  height: 36px;
  position: relative;
  transition: transform .08s ease;
  font-size: 0; /* hide the empty label content; we use ::before */
}
.star-rating label:hover { transform: scale(1.12); }
.star-rating label::before {
  content: '☆';
  font-size: 36px;
  line-height: 1;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #555;                /* outline color so the star is visible on light bg */
  -webkit-text-stroke: 0;
  transition: content .12s, color .12s, text-shadow .12s;
}
.star-rating input:checked ~ label::before {
  content: '★';
  color: #f59e0b;             /* orange when selected (and to the right of selection) */
  text-shadow: 0 1px 2px rgba(245, 158, 11, 0.35);
}
.star-rating label:hover::before,
.star-rating label:hover ~ label::before {
  content: '★';
  color: #fbbf24;             /* lighter orange on hover preview */
}
.star-rating input:focus-visible + label::before {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

body.dark-mode .star-rating label::before { color: #ffffff; }
body.dark-mode .star-rating input:checked ~ label::before { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
body.dark-mode .star-rating label:hover::before,
body.dark-mode .star-rating label:hover ~ label::before { color: var(--accent-ink); }
body.dev-mode .star-rating label::before { color: #b3ffcb; }
body.dev-mode .star-rating input:checked ~ label::before,
body.dev-mode .star-rating label:hover::before,
body.dev-mode .star-rating label:hover ~ label::before {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}

/* ---------- deliverable submission ---------- */
.deliverable-form { padding-bottom: 6px; }
.del-upload-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; }
.del-upload-zone {
  position: relative;
  border: 2px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 22px 18px;
  text-align: center;
  transition: background .12s ease, border-color .12s ease;
  cursor: pointer;
}
.del-upload-zone.dragover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.del-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.del-upload-hint { pointer-events: none; }
.del-upload-hint strong { color: var(--ink); display: block; font-size: 14px; margin-bottom: 4px; }

.del-files-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.del-file-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.del-file-preview-row:last-child { border-bottom: none; }

/* ---------- delivered files (rendered post-submit) ---------- */
.deliverable-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.del-file {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.del-image-link img {
  max-width: 100%;
  max-height: 360px;
  display: block;
  border-radius: 6px;
  cursor: zoom-in;
}
.del-video {
  max-width: 100%;
  max-height: 360px;
  border-radius: 6px;
  background: #000;
  display: block;
}
.del-download {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.del-download:hover { text-decoration: none; color: var(--accent-ink); }
.del-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: 8px;
}
.del-fname { font-size: 14px; word-break: break-all; }
.del-meta { padding: 6px 0 0; }
.del-meta a { color: var(--accent-ink); }

body.dev-mode .del-file img,
body.dev-mode .del-video { border: 1px solid var(--line-strong); }

/* ---------- danger zone (account termination) ---------- */
.danger-zone {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px solid #fecaca;
}
.danger-h {
  color: var(--red);
  font-size: 18px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.danger-card {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 20px;
}
.danger-card.warn {
  background: #fff7ed;
  border-color: #fed7aa;
}
.danger-card h3 {
  color: var(--red);
  margin: 0 0 8px;
  font-size: 16px;
}
.danger-card.warn h3 { color: #92400e; }
.danger-card p { margin: 0 0 16px; line-height: 1.55; font-size: 14px; }
.danger-confirm {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 4px;
}
.danger-confirm summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--red);
  list-style: none;
}
.danger-confirm summary::-webkit-details-marker { display: none; }
.danger-confirm[open] summary { margin-bottom: 4px; }
.danger-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.danger-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
}
body.dev-mode .danger-card {
  background: rgba(255, 90, 90, 0.06);
  border-color: rgba(255, 90, 90, 0.4);
}
body.dev-mode .danger-card.warn {
  background: rgba(255, 200, 80, 0.06);
  border-color: rgba(255, 200, 80, 0.4);
}
body.dev-mode .danger-card h3 { color: #ff5c5c; }
body.dev-mode .danger-card.warn h3 { color: #ffd580; }

/* ---------- termination panel (settings page) ---------- */
.termination-panel {
  animation: termination-appear .3s ease;
}
@keyframes termination-appear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.termination-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 8px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  flex-wrap: wrap;
}
.termination-countdown {
  flex: 1;
  min-width: 240px;
}
.termination-countdown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #92400e;
  font-weight: 700;
  margin-bottom: 4px;
}
.termination-countdown-value {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.termination-countdown.urgent .termination-countdown-value {
  color: var(--red);
  animation: urgent-pulse 1s ease-in-out infinite;
}
@keyframes urgent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.termination-countdown.expired .termination-countdown-value {
  color: var(--red);
}
.termination-countdown-when {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.termination-cancel-form {
  margin: 0;
  flex-shrink: 0;
}
.termination-cancel-form .btn { white-space: nowrap; }
body.dev-mode .termination-row {
  background: var(--bg-elev);
  border-color: rgba(255, 200, 80, 0.4);
}
body.dev-mode .termination-countdown-value,
body.dev-mode .termination-countdown-label { color: #ffd580; }
@media (max-width: 600px) {
  .termination-row { flex-direction: column; align-items: stretch; }
  .termination-cancel-form .btn { width: 100%; }
}

/* ---------- termination banner (every page) ---------- */
.termination-banner {
  background: #fff7ed;
  color: #92400e;
  border-bottom: 1px solid #fed7aa;
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.termination-banner a {
  color: #92400e;
  text-decoration: underline;
  font-weight: 700;
  margin-left: 6px;
}
body.dev-mode .termination-banner {
  background: rgba(255, 200, 80, 0.08);
  color: #ffd580;
  border-color: rgba(255, 200, 80, 0.3);
}
body.dev-mode .termination-banner a { color: #ffd580; }

/* ---------- legal pages (terms, privacy) ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { margin: 0 0 8px; }
.legal h2 {
  margin: 32px 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.legal h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.legal p, .legal li { line-height: 1.65; color: var(--ink-soft); font-size: 15px; }
.legal ul { padding-left: 20px; margin: 8px 0 16px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent-ink); text-decoration: underline; }
.legal hr { border: none; border-top: 1px solid var(--line); margin: 32px 0 16px; }
.legal code {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* ---------- reset-password page ---------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.pw-toggle:hover { background: var(--surface); color: var(--ink); }
.pw-meter {
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.pw-meter-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .15s ease, background .15s ease;
}
.pw-hint { margin-top: 2px; }
.pw-match { margin-top: 4px; font-weight: 600; }
.pw-match.ok { color: var(--green); }
.pw-match.err { color: var(--red); }

body.dev-mode .pw-toggle { background: #050a06; border-color: var(--line-strong); color: var(--ink-soft); }
body.dev-mode .pw-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- inbox search bar ---------- */
.inbox-search {
  position: relative;
  margin: 16px 0 18px;
  display: flex;
  align-items: center;
}
.inbox-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.inbox-search input[type="search"] {
  width: 100%;
  padding: 12px 44px 12px 42px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}
.inbox-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.inbox-search input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.inbox-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg-elev);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
  font-family: inherit;
}
.inbox-search-clear:hover { background: var(--line); color: var(--ink); }
.inbox-no-results { margin-top: 12px; }
body.dev-mode .inbox-search input[type="search"] {
  background: #050a06;
  color: var(--ink);
  caret-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
body.dev-mode .inbox-search-icon { color: var(--accent); }
body.dev-mode .inbox-search-clear { background: var(--accent-soft); color: var(--accent); }

/* ---------- inbox ---------- */
.inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inbox-row {
  display: grid;
  grid-template-columns: 48px 1fr 100px;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.inbox-row:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  text-decoration: none;
}
.inbox-avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.inbox-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-body { min-width: 0; }
.inbox-top {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
  font-size: 14px;
}
.inbox-job {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.inbox-preview {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.inbox-time {
  text-align: right;
  font-size: 12px;
}
.inbox-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.inbox-wrap:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.inbox-wrap .inbox-row {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.inbox-wrap .inbox-row:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}
.inbox-actions {
  display: flex;
  gap: 14px;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.inbox-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--accent-ink);
  text-decoration: none;
  font-family: inherit;
}
.inbox-action-link:hover { text-decoration: underline; }
.inbox-action-danger { color: var(--red); }
.inbox-action-disabled { color: var(--muted); cursor: not-allowed; opacity: 0.7; }
body.dark-mode .inbox-action-link { color: var(--accent-ink); }
body.dark-mode .inbox-action-danger { color: var(--red); }

/* ---------- row actions / link-danger ---------- */
/* Note: don't put display:flex directly on a <td> — table cells need to stay
   display:table-cell or row layout breaks. Use text-align + inline children,
   and rely on inline-flex for any wrapper inside the cell that needs flex. */
.row-actions { text-align: right; white-space: nowrap; }
.row-actions > * { display: inline-block; vertical-align: middle; margin-left: 10px; }
.row-actions > *:first-child { margin-left: 0; }
.row-actions form.inline { display: inline-block; }
.btn-link-danger {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 0;
  text-decoration: none;
}
.btn-link-danger:hover { text-decoration: underline; }

.status-cancelled { background: #f3f4f6; color: var(--muted); }

/* ---------- settings: image upload UI ---------- */
.upload-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.upload-preview {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-preview.avatar-xl {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
}
.upload-preview.cover-preview {
  width: 320px;
  height: 110px;
  background: linear-gradient(135deg, #fdebd6 0%, #f5b89b 100%);
}
.cover-fallback {
  color: var(--muted);
  font-size: 13px;
  padding: 12px;
  text-align: center;
}
.upload-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.upload-controls .btn { cursor: pointer; }
.checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.checkbox input { width: auto; }

.avatar-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  color: #fff;
}
.avatar-xl-letter { font-size: 36px; }

/* ---------- notification badges ---------- */
.dot-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--surface);
  margin-left: 4px;
  vertical-align: middle;
}
.count-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: auto;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
body.dev-mode .dot-badge { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
body.dev-mode .count-badge { background: var(--accent); color: #001a08; box-shadow: 0 0 8px var(--accent-glow); }

/* ---------- dev directory pills + badges ---------- */
.dev-card-main { flex: 1; min-width: 0; }
.dev-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dev-meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.dev-pills { margin-top: 6px; }
.pill-completed {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.badge-top {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  color: #78350f;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}
.badge-rising {
  background: #dcfce7;
  color: #166534;
  box-shadow: inset 0 0 0 1px #86efac;
}
body.dev-mode .pill-completed { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
body.dev-mode .badge-top { background: var(--accent); color: #001a08; }
body.dev-mode .badge-rising { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- dispute UI ---------- */
.dispute-box {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dispute-side {
  border-left: 3px solid #f59e0b;
  padding-left: 12px;
}
.dispute-side-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400e;
  font-weight: 700;
  margin-bottom: 4px;
}
.dispute-side p { margin: 0; color: var(--ink); }
.dispute-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dispute-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.dispute-resolve {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dispute-resolve form { margin: 0; }
.dispute-trigger {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 12px;
}
.dispute-trigger summary {
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  font-weight: 500;
}
.dispute-trigger summary::-webkit-details-marker { display: none; }
.dispute-trigger[open] summary { margin-bottom: 8px; color: var(--ink); }
body.dev-mode .dispute-box {
  background: rgba(255, 200, 80, 0.06);
  border-color: rgba(255, 200, 80, 0.4);
}
body.dev-mode .dispute-side { border-left-color: #ffa500; }
body.dev-mode .dispute-side-label { color: #ffd580; }

/* status pill for disputed */
.status-disputed { background: #fef3c7; color: #92400e; }
body.dev-mode .status-disputed { background: #2a1a00; color: #ffaa44; }

/* ---------- mode toggle slider (header) ---------- */
.mode-toggle-form { margin: 0; }
.mode-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.mode-toggle-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
  font-family: inherit;
}
.mode-toggle-btn:hover { color: var(--ink); }
.mode-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 4px var(--accent-glow);
}
.mode-static {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
body.dark-mode .mode-static { background: var(--surface); border-color: var(--line-strong); color: var(--accent); }
body.dev-mode .mode-static { background: var(--accent); color: #001a08; border-color: var(--accent); }

.dev-tag {
  display: inline-block;
  background: #00ff66;
  color: #001a08;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.06em;
  animation: dev-pulse 2s ease-in-out infinite;
}
@keyframes dev-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 102, 0.6); }
  50% { box-shadow: 0 0 0 5px rgba(0, 255, 102, 0); }
}

/* ============================================================
   DARK MODE — pure black bg + white text + yellow accents
   ============================================================ */
body.dark-mode {
  --bg: #000000;
  --bg-elev: #0a0a0a;
  --surface: #111111;
  --ink: #ffffff;
  --ink-soft: #f0f0f0;
  --muted: #b0b0b0;
  --line: #2a2a2a;
  --line-strong: #404040;
  --accent: #ffd700;            /* yellow */
  --accent-ink: #ffe14d;
  --accent-soft: #1a1500;
  --accent-glow: rgba(255, 215, 0, 0.30);
  --green: #4ade80;
  --green-soft: #0e2a18;
  --red: #f87171;
  --red-soft: #2a1010;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow: 0 1px 2px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.6), 0 18px 40px rgba(0,0,0,0.5);
  background: #000 !important;
  color: #fff !important;
  color-scheme: dark;
}

/* Force white text everywhere there's hardcoded dark color or where elements use color: black/var(--ink) */
body.dark-mode *:not(input):not(textarea):not(select):not(.btn-primary):not(.bounty):not(.green):not(.red) {
  color: inherit;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode p, body.dark-mode li, body.dark-mode strong, body.dark-mode label, body.dark-mode div,
body.dark-mode span, body.dark-mode td, body.dark-mode th, body.dark-mode summary, body.dark-mode dt, body.dark-mode dd,
body.dark-mode a:not(.btn):not(.btn-primary) {
  color: #ffffff;
}
body.dark-mode .muted, body.dark-mode .small.muted {
  color: var(--muted) !important;
}
body.dark-mode a:not(.btn) { color: var(--accent); }
body.dark-mode a:not(.btn):hover { color: var(--accent-ink); }

/* Force background everywhere browsers might use a different default */
body.dark-mode html, body.dark-mode { background: var(--bg) !important; }

body.dark-mode .nav { background: rgba(0, 0, 0, 0.95) !important; border-bottom-color: var(--line) !important; backdrop-filter: blur(8px); }
body.dark-mode .nav-links a { color: #ffffff !important; }
body.dark-mode .nav-links a:hover { color: var(--accent) !important; }
body.dark-mode .brand-text { color: #ffffff; }
body.dark-mode .balance { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.3); }
body.dark-mode .container { color: #ffffff; }
body.dark-mode .footer-meta a { color: var(--accent); }
body.dark-mode .footer { background: #0a0a0a; border-top-color: var(--line); color: #ffffff; }
body.dark-mode .footer-brand strong { color: #ffffff; }
body.dark-mode .footer-brand .muted { color: var(--muted) !important; }
body.dark-mode .footer-links a { color: #ffffff !important; }

body.dark-mode .container { background: transparent; color: var(--ink); }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: var(--ink); }
body.dark-mode .lede, body.dark-mode .muted { color: var(--ink-soft); }

/* Inputs / forms */
body.dark-mode input, body.dark-mode textarea, body.dark-mode select {
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
}
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--muted); }
body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus {
  outline-color: var(--accent);
  border-color: var(--accent);
}
body.dark-mode .form { background: var(--surface); border-color: var(--line); }

/* Buttons */
body.dark-mode .btn-primary {
  background: var(--accent); color: #000 !important; border-color: var(--accent);
  font-weight: 700;
}
body.dark-mode .btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #000 !important; }
body.dark-mode .btn-outline {
  background: var(--surface); border-color: var(--line-strong); color: var(--ink);
}
body.dark-mode .btn-outline:hover { background: var(--bg-elev); border-color: var(--accent); }

/* Cards / surfaces */
body.dark-mode .card,
body.dark-mode .stat,
body.dark-mode .step,
body.dark-mode .cat,
body.dark-mode .side,
body.dark-mode .trust-strip,
body.dark-mode .wallet-card,
body.dark-mode .table,
body.dark-mode .bounty-box,
body.dark-mode .deadline-box,
body.dark-mode .submit-form,
body.dark-mode .notif-card,
body.dark-mode .review-item,
body.dark-mode .thread-item,
body.dark-mode .chat,
body.dark-mode .inbox-row,
body.dark-mode .dev-card,
body.dark-mode .profile-stats,
body.dark-mode .deliverable,
body.dark-mode .empty,
body.dark-mode .faq-item,
body.dark-mode .final-cta,
body.dark-mode .counter-details,
body.dark-mode .counter-details summary,
body.dark-mode .ticket-card,
body.dark-mode .upload-preview,
body.dark-mode .del-file,
body.dark-mode .del-files-preview,
body.dark-mode .del-upload-zone,
body.dark-mode .dispute-form,
body.dark-mode .dispute-trigger {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
body.dark-mode .card h3, body.dark-mode .cat h3, body.dark-mode .step h3 { color: var(--ink); }

/* Card hover */
body.dark-mode .card:hover, body.dark-mode .step:hover, body.dark-mode .cat:hover, body.dark-mode .dev-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 18px var(--accent-glow);
}

/* Pills / tags — yellow */
body.dark-mode .skill-pill, body.dark-mode .tag {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.3);
}
body.dark-mode .pill-completed { background: var(--accent-soft); color: var(--accent); }

/* Numbers / accents — yellow */
body.dark-mode .bounty,
body.dark-mode .stat-num,
body.dark-mode .wallet-amount,
body.dark-mode .bounty-big,
body.dark-mode .profile-stat-num,
body.dark-mode .deadline-big,
body.dark-mode .accent {
  color: var(--accent) !important;
}
body.dark-mode .serif-accent { color: var(--accent) !important; }
body.dark-mode .brand-tld { color: var(--accent) !important; }
body.dark-mode .eyebrow {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.3);
}

/* Tables */
body.dark-mode .table th { background: var(--bg-elev); color: var(--muted); }
body.dark-mode .table td { border-bottom-color: var(--line); }
body.dark-mode .table tr:hover td { background: var(--bg-elev); }

/* Footer + nav */
body.dark-mode .footer { background: var(--bg-elev); border-top-color: var(--line); }
body.dark-mode .footer-links a { color: var(--ink-soft); }
body.dark-mode .footer-meta a { color: var(--accent-ink); }

/* Hero */
body.dark-mode .hero-glow {
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 60%);
}
body.dark-mode .beyond { background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%); border-color: var(--line); }

/* Status pills */
body.dark-mode .status-open { background: rgba(74, 222, 128, 0.15); color: var(--green); }
body.dark-mode .status-in_progress { background: #001a3a; color: #66aaff; }
body.dark-mode .status-submitted { background: #2a1a00; color: #ffaa44; }
body.dark-mode .status-completed { background: var(--accent-soft); color: var(--accent); }
body.dark-mode .status-cancelled { background: #2a2e36; color: var(--muted); }
body.dark-mode .status-pending { background: #2a1a00; color: #ffaa44; }
body.dark-mode .status-pending_customer { background: #3a2e00; color: #ffd700; border: 1px solid #5a4500; }
body.dark-mode .status-overdue { background: #3a0a0a; color: #ff6666; border: 1px solid #6a1a1a; }
body.dark-mode .status-countered { background: #001a3a; color: #66aaff; }
body.dark-mode .status-accepted { background: rgba(74, 222, 128, 0.15); color: var(--green); }
body.dark-mode .status-declined { background: #2a2e36; color: var(--muted); }
body.dark-mode .status-disputed { background: #2a1a00; color: #ffaa44; }

/* Flash messages */
body.dark-mode .flash-success { background: rgba(74, 222, 128, 0.15); color: var(--green); border-bottom-color: rgba(74, 222, 128, 0.3); }
body.dark-mode .flash-error { background: rgba(248, 113, 113, 0.15); color: var(--red); border-bottom-color: rgba(248, 113, 113, 0.3); }
body.dark-mode .error-box { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: var(--red); }

/* Danger zone / termination */
body.dark-mode .danger-zone { border-top-color: rgba(248, 113, 113, 0.4); }
body.dark-mode .danger-card { background: rgba(248, 113, 113, 0.08) !important; border-color: rgba(248, 113, 113, 0.3) !important; }
body.dark-mode .danger-card.warn { background: rgba(255, 200, 80, 0.08) !important; border-color: rgba(255, 200, 80, 0.4) !important; }
body.dark-mode .danger-card h3 { color: var(--red); }
body.dark-mode .danger-card.warn h3 { color: #ffd580; }
body.dark-mode .danger-confirm { background: var(--surface); border-color: var(--line); }
body.dark-mode .danger-confirm summary { color: var(--red); }
body.dark-mode .termination-row { background: var(--bg-elev); border-color: rgba(255, 200, 80, 0.4); }
body.dark-mode .termination-countdown-value, body.dark-mode .termination-countdown-label { color: #ffd580; }
body.dark-mode .termination-banner { background: rgba(255, 200, 80, 0.08); color: #ffd580; border-color: rgba(255, 200, 80, 0.2); }
body.dark-mode .termination-banner a { color: #ffd580; }

/* Dispute panel */
body.dark-mode .dispute-box { background: rgba(255, 200, 80, 0.08); border-color: rgba(255, 200, 80, 0.4); }
body.dark-mode .dispute-side { border-left-color: #ffa500; }
body.dark-mode .dispute-side-label { color: #ffd580; }

/* Dropdown menu */
body.dark-mode .user-menu-panel { background: var(--surface); border-color: var(--line); }
body.dark-mode .menu-item { color: var(--ink); }
body.dark-mode .menu-item:hover { background: var(--bg-elev); }

/* Mode toggle */
body.dark-mode .mode-toggle { background: var(--surface); border-color: var(--line-strong); }
body.dark-mode .mode-toggle-btn.active { background: var(--accent); color: #1a0a02; }

/* Theme toggle button */
body.dark-mode .theme-toggle { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
body.dark-mode .theme-toggle:hover { background: var(--bg-elev); }

/* Chat */
body.dark-mode .chat { background: var(--bg-elev); border-color: var(--line); }
body.dark-mode .chat-msg.theirs { background: var(--surface); border-color: var(--line); }
body.dark-mode .chat-msg.mine { background: var(--accent-soft); border-color: rgba(255, 149, 85, 0.3); color: var(--ink); }
body.dark-mode .chat-meta strong { color: var(--ink); }

/* Star rating */
body.dark-mode .star-rating label { color: var(--line-strong); }
body.dark-mode .star-rating input:checked ~ label { color: var(--accent); }

/* Search bars + inputs */
body.dark-mode .search-bar input, body.dark-mode .inbox-search input[type="search"] {
  background: var(--bg-elev); color: var(--ink); border-color: var(--line-strong);
}
body.dark-mode .inbox-search-clear { background: var(--bg-elev); color: var(--ink-soft); }

/* Cover banner gradient (profile) — dark mode.
   Uses background-image only (NOT the shorthand) so background-size:cover and
   background-position:center from the base rule still apply when the user has
   uploaded a custom cover image via inline `background-image: url(...)`. */
body.dark-mode .profile-cover {
  background-color: #0a0a0a;
  background-image: linear-gradient(135deg, #1a1500 0%, #2a2200 60%, #ffd700 160%);
  border-color: var(--line);
}
body.dark-mode .profile-avatar { border-color: var(--bg); }

/* Code in legal pages */
body.dark-mode .legal code { background: var(--bg-elev); border-color: var(--line); color: var(--ink); }

/* Dispute resolve buttons should still work */
body.dark-mode .dispute-resolve form { color: var(--ink); }

/* Featured devs section */
body.dark-mode .dev-card-cta { color: var(--accent-ink); border-top-color: var(--line); }

/* Admin */
body.dark-mode .admin-nav { border-bottom-color: var(--line); }
body.dark-mode .admin-nav a { color: var(--muted); }
body.dark-mode .admin-nav a:hover { color: var(--ink); }
body.dark-mode .admin-nav a.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------- theme toggle button (sun/moon) ---------- */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  transition: background .12s ease;
}
.theme-toggle:hover { background: var(--bg-elev); }
body.dev-mode .theme-toggle { display: none; }

/* ---------- support widget ---------- */
.support-widget {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 200;
  font-family: inherit;
}
.support-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 4px var(--accent-glow);
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.support-bubble svg { width: 18px; height: 18px; }
.support-bubble:hover { transform: translateY(-2px); }
.support-bubble.hidden { display: none; }
.support-panel {
  width: 288px;             /* ~3 inches at 96dpi */
  height: 384px;            /* ~4 inches at 96dpi */
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  animation: support-pop .2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.support-panel[hidden] { display: none !important; }
.support-form { flex: 1; overflow-y: auto; }
.support-form label { font-size: 12px; gap: 3px; }
.support-form input, .support-form textarea {
  font-size: 13px;
  padding: 7px 10px;
}
.support-form textarea { min-height: 70px; }
.support-form .btn { padding: 8px 14px; font-size: 13px; }
.support-head { margin-bottom: 10px; }
.support-head strong { font-size: 14px; }
.support-head .small { font-size: 11px; }
@keyframes support-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.support-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.support-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
}
.support-close:hover { color: var(--ink); }
.support-form { display: flex; flex-direction: column; gap: 10px; }
.support-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.support-status { margin: 6px 0 0; font-size: 13px; min-height: 18px; }
.support-status.ok { color: var(--green); }
.support-status.err { color: var(--red); }
body.dev-mode .support-bubble { background: var(--accent); color: #001a08; box-shadow: 0 0 0 6px var(--accent-glow), 0 0 24px var(--accent-glow); }
body.dev-mode .support-panel { background: #0a1a0d; border-color: var(--accent); }

/* ---------- admin hub ---------- */
.admin-nav {
  display: flex;
  gap: 6px;
  margin: 8px 0 24px;
  border-bottom: 1px solid var(--line);
}
.admin-nav a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-nav a:hover { color: var(--ink); text-decoration: none; }
.admin-nav a.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.admin-action-toggle { display: inline-block; }
.admin-action-toggle summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; }
.admin-action-toggle summary::-webkit-details-marker { display: none; }
.admin-action-toggle .inline-form { margin-top: 4px; }
.ticket-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

/* featured devs cards on landing — slight visual distinction */
.featured-devs .dev-card { position: relative; }
.dev-card-cta {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-ink);
}

/* ============================================================
   DEV MODE — Matrix theme
   ============================================================ */
body.dev-mode {
  --bg: #050a06;
  --bg-elev: #0a1409;
  --surface: #0a1a0d;
  --ink: #b3ffcb;
  --ink-soft: #6bd99a;
  --muted: #4a8a5e;
  --line: #1a3a26;
  --line-strong: #2a5a3e;
  --accent: #00ff66;
  --accent-ink: #00cc55;
  --accent-soft: #0e2a1a;
  --accent-glow: rgba(0, 255, 102, 0.35);
  --green: #00ff66;
  --green-soft: #062012;
  --red: #ff5c5c;
  --red-soft: #200a0a;
  --shadow-sm: 0 0 0 1px rgba(0, 255, 102, 0.08);
  --shadow: 0 0 0 1px rgba(0, 255, 102, 0.10), 0 0 24px rgba(0, 255, 102, 0.06);
  --shadow-lg: 0 0 0 1px rgba(0, 255, 102, 0.15), 0 0 40px rgba(0, 255, 102, 0.10);

  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
  background: var(--bg);
  color: var(--ink);
}
body.dev-mode * { font-family: inherit; }
body.dev-mode .serif-accent {
  font-family: 'Instrument Serif', Georgia, serif;
}

/* matrix rain background — subtle scanline + radial glow */
body.dev-mode {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 102, 0.02) 0, rgba(0, 255, 102, 0.02) 1px, transparent 1px, transparent 3px),
    radial-gradient(circle at 50% 0%, rgba(0, 255, 102, 0.10) 0%, transparent 60%);
}

.matrix-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.18;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #00ff66;
  background:
    linear-gradient(180deg, rgba(0,255,102,0) 0%, rgba(0,255,102,0.03) 100%);
}
.matrix-rain::before {
  content: "01001100 01000001 01000010 01010011 00100000 01010111 01001000 01000101 01010010 01000101 00100000 01000001 01001001 00100000 01010100 01001000 01001001 01001110 01001011 01010011\A 11010110 10110001 00111100 11001010 10101010 01100110 11110000 11010101 10100011 01100101\A SECURE / ESCROW / 90/10 / DEV.MODE.ENGAGED\A > await jobs.find({ status: 'open' })\A > submitting deliverable...\A > funds released to wallet\A > customer.approved = true\A 01100100 01100101 01110110 01101101 01101111 01100100 01100101 01010100 01010010 01010101 01000101";
  position: absolute;
  top: -10%;
  left: 5%;
  white-space: pre;
  line-height: 1.6;
  animation: matrix-fall 28s linear infinite;
}
.matrix-rain::after {
  content: "ACCEPT / SUBMIT / RELEASE\A > offer.received\A > escrow.holding($120)\A > delivery.window: 14d\A 11001001 10100101 01111000 11001010\A claudework.ai · 90% to dev · 10% platform\A > deadline.notify({ in: '24h' })";
  position: absolute;
  top: 0%;
  right: 8%;
  white-space: pre;
  line-height: 1.6;
  animation: matrix-fall 36s linear infinite;
  animation-delay: -8s;
}
@keyframes matrix-fall {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(50%); }
}

/* nav + brand */
body.dev-mode .nav {
  background: rgba(5, 10, 6, 0.92);
  border-bottom-color: var(--line-strong);
  backdrop-filter: blur(8px);
}
body.dev-mode .brand-text { color: var(--ink); }
body.dev-mode .brand-tld { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
body.dev-mode .nav-links a { color: var(--ink-soft); }
body.dev-mode .nav-links a:hover { color: var(--accent); text-shadow: 0 0 6px var(--accent-glow); }
body.dev-mode .balance {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* page elements need to sit above the matrix rain (z-index: 0).
   .nav already has its own sticky z-index from the base styles — don't override it. */
body.dev-mode .container,
body.dev-mode .footer,
body.dev-mode .flash {
  position: relative;
  z-index: 1;
}

/* mode toggle styling */
body.dev-mode .mode-toggle {
  background: #050a06;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 102, 0.15);
}
body.dev-mode .mode-toggle-btn { color: var(--muted); }
body.dev-mode .mode-toggle-btn.active {
  background: var(--accent);
  color: #001a08;
  text-shadow: none;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* user avatar + dropdown */
body.dev-mode .user-avatar {
  background: linear-gradient(135deg, #1a3a26 0%, var(--accent) 100%);
  color: #001a08;
  box-shadow: 0 0 8px var(--accent-glow);
}
body.dev-mode .user-menu-panel { box-shadow: 0 0 24px var(--accent-glow), 0 0 0 1px var(--line-strong); }
body.dev-mode .menu-item:hover { background: var(--accent-soft); color: var(--accent); }
body.dev-mode .menu-item-danger { color: var(--red); }

/* inputs/buttons */
body.dev-mode input,
body.dev-mode textarea,
body.dev-mode select {
  background: #050a06;
  border-color: var(--line-strong);
  color: var(--ink);
}
body.dev-mode input:focus,
body.dev-mode textarea:focus,
body.dev-mode select:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}
body.dev-mode input::placeholder { color: var(--muted); }
body.dev-mode .btn-primary {
  background: var(--accent);
  color: #001a08;
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  font-weight: 700;
}
body.dev-mode .btn-primary:hover { background: #00cc55; box-shadow: 0 0 20px var(--accent-glow); color: #001a08; }
body.dev-mode .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
body.dev-mode .btn-outline:hover { background: var(--accent-soft); border-color: var(--accent); }

/* hero */
body.dev-mode .hero h1,
body.dev-mode h1, body.dev-mode h2, body.dev-mode h3 { color: var(--ink); }
body.dev-mode .serif-accent { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
body.dev-mode .eyebrow {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
body.dev-mode .lede, body.dev-mode .muted { color: var(--ink-soft); }
body.dev-mode .hero-glow {
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 60%);
}

/* cards / sections */
body.dev-mode .card,
body.dev-mode .stat,
body.dev-mode .step,
body.dev-mode .cat,
body.dev-mode .side,
body.dev-mode .trust-strip,
body.dev-mode .form,
body.dev-mode .wallet-card,
body.dev-mode .table,
body.dev-mode .bounty-box,
body.dev-mode .deadline-box,
body.dev-mode .submit-form,
body.dev-mode .notif-card,
body.dev-mode .review-item,
body.dev-mode .thread-item,
body.dev-mode .chat,
body.dev-mode .inbox-row,
body.dev-mode .dev-card,
body.dev-mode .profile-stats,
body.dev-mode .deliverable,
body.dev-mode .empty,
body.dev-mode .faq-item,
body.dev-mode .final-cta,
body.dev-mode .counter-details {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.dev-mode .card:hover, body.dev-mode .step:hover, body.dev-mode .cat:hover {
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}
body.dev-mode .card h3, body.dev-mode .cat h3 { color: var(--ink); }
body.dev-mode .tag {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
body.dev-mode .bounty, body.dev-mode .deadline-big, body.dev-mode .stat-num,
body.dev-mode .wallet-amount, body.dev-mode .bounty-big, body.dev-mode .profile-stat-num,
body.dev-mode .rating-stars {
  color: var(--accent);
}
body.dev-mode .checks li::before {
  background: var(--accent);
  color: #001a08;
}
body.dev-mode .skill-pill {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* tables */
body.dev-mode .table th { background: var(--bg-elev); color: var(--ink-soft); }
body.dev-mode .table tr:hover td { background: var(--accent-soft); }

/* status pills */
body.dev-mode .status { box-shadow: inset 0 0 0 1px currentColor; }
body.dev-mode .status-open { background: var(--accent-soft); color: var(--accent); }
body.dev-mode .status-in_progress { background: #001a3a; color: #66aaff; }
body.dev-mode .status-submitted { background: #2a1a00; color: #ffaa44; }
body.dev-mode .status-completed { background: var(--accent-soft); color: var(--accent); }
body.dev-mode .status-cancelled { background: #1a1a1a; color: #888; }
body.dev-mode .status-pending { background: #2a1a00; color: #ffaa44; }
body.dev-mode .status-countered { background: #001a3a; color: #66aaff; }
body.dev-mode .status-accepted { background: var(--accent-soft); color: var(--accent); }
body.dev-mode .status-declined { background: #1a1a1a; color: #888; }

/* footer */
body.dev-mode .footer { background: var(--bg-elev); border-top-color: var(--line-strong); }
body.dev-mode .footer-links a { color: var(--ink-soft); }

/* user menu icons in dev mode — SVG already inherits color via currentColor */
body.dev-mode .menu-icon { color: var(--accent); }
body.dev-mode .menu-item:hover .menu-icon { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
body.dev-mode .menu-item-danger .menu-icon { color: var(--red); }
body.dev-mode .user-menu-panel {
  background: #0a1a0d;
  border-color: var(--accent);
}

/* link-danger */
body.dev-mode .btn-link-danger { color: var(--red); }

/* hero compact variant for /beyond */
.hero.compact { padding: 56px 0 32px; margin-bottom: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .hero { padding: 48px 0 36px; margin-bottom: 32px; }
  .hero h1 { font-size: 38px; }
  .stats, .steps, .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .two-up { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .flow-arrow { display: none; }
  .flow-step { flex: 1 1 100%; }
  .job-grid { grid-template-columns: 1fr; }
  .nav { padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
  .nav-links { gap: 14px; flex-wrap: wrap; }
  .container { padding: 24px 20px 60px; }
  .footer { padding: 28px 20px; }
  .footer-inner, .footer-meta { flex-direction: column; align-items: flex-start; }
  .hide-sm { display: none; }
  .row-between { flex-direction: column; align-items: flex-start; }
  .final-cta h2 { font-size: 22px; }
  .final-cta { padding: 36px 22px; }
  .form-row { grid-template-columns: 1fr; }
  .dash-top { grid-template-columns: 1fr; }
  .profile-head > a.btn { margin-left: 0; }
  .beyond-grid { grid-template-columns: repeat(2, 1fr); }
  .beyond { padding: 32px 22px; }
  .profile-stats { grid-template-columns: 1fr; }
  .profile-stat { border-right: none; border-bottom: 1px solid var(--line); }
  .profile-stat:last-child { border-bottom: none; }
}
@media (max-width: 520px) {
  .trust-strip, .cat-grid { grid-template-columns: 1fr; }
}

/* ---------- transactions page ---------- */
.tx-header { margin: 8px 0 24px; }
.tx-header h1 { margin: 0 0 4px; }
.tx-summary { margin-bottom: 40px; }
.tx-summary-row { margin: 22px 0 10px; }
.tx-section-h {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}
.tx-stats { margin-bottom: 0; gap: 14px; }
.tx-stat .stat-num { font-size: 26px; }
.tx-stat .muted.small { margin-top: 4px; }
.tx-stat-good .stat-num { color: var(--green); }
.tx-stat-spent .stat-num { color: var(--ink); }
.tx-stat-pending {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 6%, var(--surface)));
}
.tx-stat-pending .stat-num { color: var(--accent); }

.tx-ledger { margin-top: 28px; }
.tx-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.tx-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tx-filter select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}
.tx-filter-bar {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(200px, 2fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tx-filter-field { display: flex; flex-direction: column; gap: 4px; }
.tx-filter-field input,
.tx-filter-field select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}
.tx-filter-actions { display: flex; gap: 8px; }
@media (max-width: 720px) {
  .tx-filter-bar { grid-template-columns: 1fr 1fr; }
  .tx-filter-search { grid-column: span 2; }
  .tx-filter-actions { grid-column: span 2; justify-content: flex-end; }
}
.dash-txn-foot {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.tx-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-table th.num { text-align: right; }
.tx-table .amount-pos { color: var(--green); font-weight: 600; }
.tx-table .amount-neg { color: var(--ink); font-weight: 600; }
.tx-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.tx-kind-payout         { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.tx-kind-escrow_hold    { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tx-kind-escrow_refund  { background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); }
.tx-kind-deposit,
.tx-kind-stripe_deposit { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.tx-kind-withdraw       { background: color-mix(in srgb, var(--red, #c0392b) 12%, transparent); color: var(--red, #c0392b); }
.tx-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.empty-state {
  border: 1px dashed var(--line-strong);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
}
.empty-state p { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; }
.empty-state p:last-child { margin-bottom: 0; }
/* In dark mode the default muted gray is too faint against pure black —
   brighten any .muted text inside an empty-state */
body.dark-mode .empty-state .muted,
body.dark-mode .empty-state p.muted { color: #d8d8d8; }

@media (max-width: 720px) {
  .tx-stats { grid-template-columns: repeat(2, 1fr); }
  .tx-ledger-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- pending-customer review card ---------- */
.dev-review-card {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 0 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.dev-review-card::before {
  content: 'AWAITING YOUR APPROVAL';
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
}
.dev-review-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dev-review-avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.dev-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dev-review-main { flex: 1; min-width: 0; }
.dev-review-name {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.dev-review-name a { color: var(--ink); text-decoration: none; }
.dev-review-name a:hover { text-decoration: underline; }
.dev-review-meta { margin: 6px 0 8px; }
.dev-review-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}
.dev-review-bio {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 8px 0;
}

.action-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

/* ---------- verified badge ---------- */
.verified-badge {
  display: inline-block;
  vertical-align: -3px;
  margin-left: 4px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.verified-badge:hover { transform: scale(1.08); transition: transform .15s ease; }
/* Header avatar overlay variant — small badge clipped to the avatar's bottom-right */
.verified-badge-overlay {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ---------- blog ---------- */
.blog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 32px;
}
.blog-header h1 { margin: 0; }
.blog-header > p { margin: 0; flex: 1; min-width: 200px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 64px;
}
.blog-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.blog-card-cover {
  height: 160px;
  background-color: var(--bg-elev);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
.blog-card-body { padding: 18px 20px 20px; }
.blog-card-title {
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.blog-card-excerpt {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.55;
}
.blog-card-meta { font-size: 13px; }

.blog-article {
  max-width: 760px;
  margin: 0 auto 64px;
}
.blog-article-cover {
  height: 360px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.blog-article-head { margin-bottom: 32px; }
.blog-article-head h1 {
  font-size: 40px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 12px 0 12px;
}
.blog-article-meta { font-size: 14px; }
.blog-article-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.blog-article-body h2 { font-size: 26px; margin: 36px 0 12px; letter-spacing: -0.015em; }
.blog-article-body h3 { font-size: 21px; margin: 28px 0 10px; }
.blog-article-body h4 { font-size: 17px; margin: 24px 0 8px; }
.blog-article-body p { margin: 0 0 18px; }
.blog-article-body ul, .blog-article-body ol { padding-left: 24px; margin: 0 0 18px; }
.blog-article-body li { margin-bottom: 6px; }
.blog-article-body a { color: var(--accent-ink); }
.blog-article-body code {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 0.9em;
}

.blog-edit-form { max-width: 760px; }
.blog-edit-form label { display: block; margin-bottom: 16px; }
.blog-edit-form input, .blog-edit-form textarea {
  width: 100%;
  margin-top: 4px;
}
.blog-edit-form textarea {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 14px;
  line-height: 1.55;
}
.inline-check { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }

/* ---------- affiliate dashboard ---------- */
.aff-card {
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface)));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin: 18px 0 28px;
  box-shadow: var(--shadow-sm);
}
.aff-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.aff-block { min-width: 180px; }
.aff-block-grow { flex: 1; min-width: 280px; }
.aff-code {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-ink);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.aff-link-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.aff-link-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 13px;
  background: var(--bg-elev);
}
.aff-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .aff-stats { grid-template-columns: repeat(2, 1fr); }
  .aff-row { flex-direction: column; }
}
.amount-pos { color: var(--green); font-weight: 600; }

.ref-notice {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ---------- Big Projects ---------- */
.bp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 12px 0 36px;
  flex-wrap: wrap;
}
.bp-header-text { flex: 1; min-width: 280px; }
.bp-header h1 { margin: 8px 0 12px; font-size: 36px; letter-spacing: -0.02em; }
.bp-header .lede { font-size: 16px; max-width: 640px; }

.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
  margin-bottom: 64px;
}
.bp-card {
  display: block;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 4%, var(--surface)) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.bp-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(212, 117, 28, 0.18);
  text-decoration: none;
}
.bp-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.bp-card-title { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; flex: 1; }
.bp-card-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.bp-card-stats {
  display: flex;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.bp-card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.bp-card-stats strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.bp-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  font-size: 13px;
}
.bp-card-author { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.bp-card-author a { color: inherit; }
.bp-card-date { white-space: nowrap; flex-shrink: 0; }

.bp-detail { max-width: 980px; margin: 0 auto 64px; }
.bp-detail-head { margin-bottom: 28px; }
.bp-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 6px; }
.bp-title-row h1 { margin: 0; font-size: 32px; letter-spacing: -0.02em; line-height: 1.2; flex: 1; min-width: 200px; }

.bp-overview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.bp-overview-text h3 { margin-top: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.bp-overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 14px;
  margin: 22px 0 18px;
}
.bp-stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; text-align: center; }
.bp-stat-num { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.bp-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 4px; }
.bp-stat-wide .bp-stat-num { color: var(--accent-ink); }

.bp-progress {
  height: 14px;
  background: var(--bg-elev);
  border-radius: 999px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.bp-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, white) 100%);
  border-radius: 999px;
  transition: width 0.6s ease;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}
.bp-progress-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--surface);
}

.bp-tasks { margin-bottom: 36px; }
.bp-tasks h2 { font-size: 22px; }
.bp-tasks-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bp-task {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow-sm);
}
.bp-task:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(212, 117, 28, 0.12);
}
.bp-task-num {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bp-task-body { flex: 1; min-width: 0; }
.bp-task-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.bp-task-desc { margin-bottom: 6px; }
.bp-task-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bp-task-arrow { font-size: 18px; color: var(--muted); transition: transform .14s ease, color .14s ease; }
.bp-task:hover .bp-task-arrow { color: var(--accent); transform: translateX(3px); }

.bp-new-task { margin-top: 18px; background: var(--bg-elev); border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px 22px; }
.bp-new-task[open] { border-color: var(--accent); border-style: solid; background: var(--surface); }
.bp-new-task summary { font-weight: 700; cursor: pointer; padding: 4px 0; }
.bp-new-task .form { margin-top: 16px; }

.bp-chat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-top: 28px; box-shadow: var(--shadow-sm); }
.bp-chat h2 { margin-top: 0; }
.bp-chat-stream { max-height: 480px; overflow-y: auto; padding: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.bp-msg { display: flex; gap: 10px; align-items: flex-start; animation: msg-in 0.25s ease; }
.bp-msg-mine { flex-direction: row-reverse; }
.bp-msg-avatar { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%); color: #fff; font-weight: 700; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.bp-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-msg-bubble { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; max-width: 70%; }
.bp-msg-mine .bp-msg-bubble { background: var(--accent-soft); border-color: var(--accent); }
.bp-msg-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.bp-msg-content { font-size: 14px; line-height: 1.5; }
.bp-chat-form { display: flex; gap: 10px; margin-top: 14px; }
.bp-chat-form textarea { flex: 1; resize: vertical; min-height: 70px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .bp-overview-stats { grid-template-columns: repeat(2, 1fr); }
  .bp-stat-wide { grid-column: span 2; }
}

/* Banner on a job page when it's part of a Big Project */
.bp-context-banner {
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 100%);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bp-context-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ---------- Job addendums ---------- */
.addendum-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 12px 0;
}
.addendum-pending {
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
  animation: addendum-attention 1.6s ease-in-out infinite;
}
@keyframes addendum-attention {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.addendum-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.addendum-actions { display: flex; gap: 8px; margin-top: 14px; }
.addendum-form-wrap { background: var(--bg-elev); border: 2px dashed var(--line); border-radius: 10px; padding: 14px 18px; margin-top: 12px; }
.addendum-form-wrap[open] { border-color: var(--accent); border-style: solid; }
.addendum-form-wrap summary { font-weight: 600; cursor: pointer; }
.addendum-history summary { padding: 8px 0; cursor: pointer; }
.addendum-resolved.addendum-accepted { border-left: 4px solid var(--green); }
.addendum-resolved.addendum-declined { border-left: 4px solid var(--muted); opacity: 0.75; }

/* ---------- Site-wide subtle hover/transition polish ---------- */
.btn { transition: transform .1s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.dev-card, .blog-card, .stat { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }

/* Confetti / celebration overlay (used on big-project completion + job approval) */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* ---------- overdue banner + action card ---------- */
.overdue-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 12px 0 22px;
  background: linear-gradient(90deg, #fee2e2 0%, #fff7f7 100%);
  border: 2px solid #dc2626;
  border-left-width: 6px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18);
  animation: overdue-banner-pulse 2.4s ease-in-out infinite;
}
@keyframes overdue-banner-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18); }
  50%      { box-shadow: 0 8px 28px rgba(220, 38, 38, 0.32); }
}
.overdue-banner-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.overdue-banner-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: #7f1d1d;
}
.overdue-banner-text strong { color: #991b1b; }
.overdue-banner .btn { flex-shrink: 0; }

.overdue-card {
  border: 2px solid #dc2626 !important;
  background: linear-gradient(180deg, var(--surface) 0%, #fee2e2 200%);
}
.overdue-card h4 { color: #991b1b; }

body.dark-mode .overdue-banner {
  background: linear-gradient(90deg, #2a0a0a 0%, #1a0505 100%);
  border-color: #dc2626;
}
body.dark-mode .overdue-banner-text { color: #ffb3b3; }
body.dark-mode .overdue-banner-text strong { color: #ff6666; }
body.dark-mode .overdue-card {
  background: linear-gradient(180deg, var(--surface) 0%, #2a0a0a 200%);
}

@media (max-width: 600px) {
  .overdue-banner { flex-direction: column; align-items: flex-start; }
}

/* ---------- review owner actions (three-dots menu, response, dispute form) ---------- */
.review-head { display: flex; align-items: flex-start; gap: 12px; }
.review-meta { flex: 1; min-width: 0; }
.review-menu { position: relative; flex-shrink: 0; }
.review-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
}
.review-menu summary::-webkit-details-marker { display: none; }
.review-menu summary:hover { background: var(--bg-elev); border-color: var(--line); color: var(--ink); }
.review-menu[open] summary { background: var(--bg-elev); border-color: var(--line); }
.review-menu-panel {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  min-width: 140px;
  z-index: 50;
}
.review-menu-item {
  display: block; width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.review-menu-item:hover:not(.disabled) { background: var(--bg-elev); }
.review-menu-item.disabled { color: var(--muted); cursor: default; opacity: 0.65; }
.review-menu-danger:not(.disabled) { color: var(--red, #c0392b); }

.review-response {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.review-response-head { margin-bottom: 4px; }
.review-form { margin-top: 10px; }
.review-form summary { padding: 6px 0; cursor: pointer; }
.review-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink); margin-bottom: 8px; }

/* ---------- staff mode toggle (header) ---------- */
.staff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.staff-toggle:hover { color: var(--ink); }
.staff-toggle .staff-toggle-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--muted);
  transition: background .15s ease, box-shadow .15s ease;
}
.staff-toggle.on {
  background: linear-gradient(135deg, #d4751c, #b25f12);
  color: #fff;
  border-color: #d4751c;
}
.staff-toggle.on .staff-toggle-dot { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); }

/* ---------- staff command bar (footer) ---------- */
.staff-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.96) 0%, rgba(0, 0, 0, 0.96) 100%);
  border-top: 2px solid #d4751c;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  z-index: 9000;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
.staff-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.staff-bar-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: #d4751c;
  color: #000;
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
#staff-cmd-form { display: flex; gap: 8px; flex: 1; min-width: 280px; }
#staff-cmd-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #0a0a0a;
  color: #ffd700;
  font-family: inherit;
  font-size: 13px;
}
#staff-cmd-input:focus { outline: 1px solid #d4751c; border-color: #d4751c; }
.staff-bar-output { flex-basis: 100%; font-size: 12px; color: #ddd; }
.staff-bar-output pre { white-space: pre-wrap; margin: 6px 0 0; padding: 8px 12px; background: #0a0a0a; border-radius: 6px; max-height: 240px; overflow-y: auto; color: #ddd; }
#staff-cmd-status.ok  { color: #4caa28; font-weight: 700; }
#staff-cmd-status.err { color: #ff6666; font-weight: 700; }

/* Push the support widget up so it doesn't collide with staff bar when active */
body.staff-mode { padding-bottom: 80px; }
body.staff-mode .support-widget { bottom: 90px; }

/* ---------- staff quick-action menu on user links ---------- */
.staff-quick { display: inline-block; position: relative; margin-left: 4px; vertical-align: middle; }
.staff-quick-trigger {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}
.staff-quick-trigger:hover { background: var(--accent); color: #fff; }
.staff-quick-pop {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  display: none;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: var(--shadow);
  z-index: 9100;
  min-width: 140px;
  padding: 4px;
}
.staff-quick.open .staff-quick-pop { display: flex; }
.staff-quick-pop button {
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 6px 10px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.staff-quick-pop button:hover { background: var(--bg-elev); }

/* ============================================================
   POLISH PASS — ambient depth, motion, micro-interactions.
   All effects below honor prefers-reduced-motion at the bottom.
   ============================================================ */

/* ---- Ambient depth: full-viewport gradient field with no visible "shape" ----
   Each layer holds 4-5 huge overlapping radial gradients. Each gradient extends
   its color all the way out to 100% (no abrupt cutoff at 60% creating an edge),
   the elements themselves are oversized (-40% inset on every side), and the
   blur is heavy. Result: there's never a perceptible "blob" or rectangle —
   just a smooth ambient color field that subtly drifts.

   Parallax shifts are 3-4x stronger than before so the 3D effect is genuinely
   felt rather than barely-perceptible. */
/* All ambient orb gradients removed. Background is solid var(--bg) (pure
   black in dark mode). Depth comes entirely from the floating gold particle
   canvas (see .bg-particles below + JS in foot.ejs). */

/* Vignette removed — it was darkening viewport edges, which created a visible
   rectangular boundary between the dim edges and the brighter center. The
   element class is kept (rendered but invisible) so views don't break. */
.bg-vignette { display: none; }

/* Particle canvas — fixed full-viewport, behind content. Solid black bg
   means particles need full opacity to read crisply. */
.bg-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}
body.dev-mode .bg-particles { display: none; }

/* Theme-driven particle color. JS reads this value at runtime and re-reads
   when the body class changes (theme toggle). Format: r, g, b — three numbers
   that will be slotted into rgba(). */
:root          { --particle-color: 234, 88, 12; }    /* light mode → deep orange (#EA580C) */
body.dark-mode { --particle-color: 255, 215, 0; }    /* dark mode → gold */
/* Override existing body::before that other things might use — defensive */
body { position: relative; }
/* Dev mode (matrix) keeps its own background — orbs would clash */
body.dev-mode::before, body.dev-mode::after { display: none; }

/* ---- Navbar: gain elevation when user scrolls past the top ---- */
.nav {
  transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.nav.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom-color: var(--line-strong);
}
body.dark-mode .nav.is-scrolled { box-shadow: 0 2px 16px rgba(255, 215, 0, 0.05); }

/* ---- Scroll reveal: content blocks fade up as they enter the viewport ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Subtle ambient pulse on the brand wordmark ---- */
.brand-tld {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0px transparent);
  transition: filter 0.4s ease;
}
.brand:hover .brand-tld {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* ---- Refined link/button micro-interactions ---- */
a {
  transition: color 0.15s ease;
}
.btn::after {
  /* shimmer streak that runs on hover for primary buttons */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: inherit;
}
.btn { position: relative; overflow: hidden; }
.btn-primary:hover::after { transform: translateX(100%); }

/* Improve focus rings — visible but not jarring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---- Card hover refinement: subtle accent glow ---- */
.dev-card, .blog-card, .bp-card, .stat {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}
.dev-card:hover, .blog-card:hover, .bp-card:hover {
  transform: translateY(-2px);
}

/* ---- Typography rhythm tightening for big headings ---- */
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.018em; }
h3 { letter-spacing: -0.012em; }

/* ---- Animated underline on plain text links inside content (not nav, not buttons) ---- */
article a:not(.btn):not(.tag),
.blog-article-body a,
.legal a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
  text-decoration: none;
}
article a:not(.btn):not(.tag):hover,
.blog-article-body a:hover,
.legal a:hover {
  background-size: 100% 1px;
}

/* ---- Stat tiles get a soft inner glow on hover ---- */
.stat:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- Avatar circles get a tiny inner highlight for depth ---- */
.dev-avatar, .profile-avatar, .user-avatar {
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Hero stays plain — its own ::before/::after were creating a visible
   yellow rectangle inside the hero section. Ambient color comes from the
   page-level body::before/::after gradient field instead. */
.hero { position: relative; }

/* ---- Smooth color transitions everywhere a theme switch happens ---- */
:root, body, .nav, .stat, .dev-card, .blog-card, .bp-card, .btn {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.24s;
  transition-timing-function: ease;
}

/* ---- Sticky-section emphasis: when h2 sticks to top of viewport, glow ---- */
section h2 {
  scroll-margin-top: 80px;
}

/* ---- Wallet pill gets a slow pulse if balance > 0 (looks alive) ---- */
.balance {
  transition: transform 0.15s ease;
}
.balance:hover { transform: scale(1.03); }

/* ---- Dark-mode-only: subtle shimmering border on stat tiles ---- */
body.dark-mode .stat {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 4%, var(--surface)));
}

/* ============================================================
   ACCESSIBILITY — honor reduced-motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn::after { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Settings: account-mode panel ---- */
.settings-mode-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 8px 0 28px;
  box-shadow: var(--shadow-sm);
}
.settings-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.settings-mode-text { flex: 1; min-width: 240px; }
.settings-mode-form { flex-shrink: 0; }

/* ============================================================
   POLISH PASS 2 — "behind glass" + more ambient motion
   ============================================================ */

/* ---- Noise/grain overlay: gives the entire viewport a subtle textured
   "behind glass" feel. SVG turbulence as data URI; sits just above the
   ambient orbs but below all content. Drifts very slowly to feel alive. */
.glass-grain { display: none; }
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -3%); }
  20%  { transform: translate(2%, -5%); }
  30%  { transform: translate(-4%, 2%); }
  40%  { transform: translate(3%, 4%); }
  50%  { transform: translate(-2%, -2%); }
  60%  { transform: translate(4%, 1%); }
  70%  { transform: translate(-3%, -4%); }
  80%  { transform: translate(2%, 3%); }
  90%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}
body.dark-mode .glass-grain { opacity: 0.08; }
body.dev-mode .glass-grain { display: none; }

/* ---- Front-layer accent: full-viewport, biggest parallax shift = closest
   "camera" depth. Two soft glows, no defined edge. */
.ambient-orb-3 { display: none; }
body.dev-mode .ambient-orb-3 { display: none; }

/* ---- Card spotlight: a soft radial highlight follows the cursor. Driven by
   --mx and --my CSS custom properties set from JS. Falls back to invisible
   when no cursor data has been set. */
.spotlight {
  position: relative;
}
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mx, -100px) var(--my, -100px),
              color-mix(in srgb, var(--accent) 22%, transparent) 0%,
              transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ---- 3D tilt for cards. JS sets --rx and --ry from cursor position. */
.tiltable {
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tiltable:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
}

/* ---- Gentle bob animation for primary CTAs in the hero ---- */
.hero .btn-lg {
  animation: cta-bob 3.6s ease-in-out infinite;
}
.hero .btn-lg:nth-child(2) { animation-delay: 0.4s; }
@keyframes cta-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.hero .btn-lg:hover { animation-play-state: paused; }

/* Hero conic gradient removed — was creating a visible bright rectangle
   inside the hero section. Ambient depth handled at the page level instead. */

/* ---- Number count-up: simple opacity transition while JS swaps text ---- */
.counter[data-count-target] {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* ---- Stat tile: subtle inner gradient that drifts on hover ---- */
.stat {
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(135deg,
    transparent 40%,
    color-mix(in srgb, var(--accent) 10%, transparent) 50%,
    transparent 60%);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.stat:hover::after {
  opacity: 1;
  animation: stat-shimmer 1.4s ease-in-out;
}
@keyframes stat-shimmer {
  to { transform: translateX(100%); }
}

/* ---- Reduced motion: kill all of the above ---- */
@media (prefers-reduced-motion: reduce) {
  .glass-grain { animation: none; }
  .ambient-orb-3 { animation: none; }
  .hero .btn-lg { animation: none; }
  .stat::after { display: none; }
  .tiltable:hover { transform: translateY(-3px); }
  .bg-particles { display: none; }
}

/* ============================================================
   FEED — Twitter-style timeline + composer
   ============================================================ */
.feed-header { margin: 8px 0 18px; }
.feed-header h1 { margin: 0 0 4px; }

.post-composer {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.post-composer-reply { margin: 14px 0 24px; }
.composer-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.composer-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.composer-body textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  resize: vertical;
  min-height: 56px;
  padding: 8px 14px;
  line-height: 1.45;
}
.composer-body textarea::placeholder { color: var(--muted); }
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.composer-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}
.composer-count.warn { color: #d97706; }
.composer-count.over { color: var(--red, #dc2626); font-weight: 700; }

.post-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 60px; }

.post-card {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.post-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.post-card-reply {
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
}
.post-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.post-body { flex: 1; min-width: 0; }
.post-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.post-author-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.post-author { font-weight: 700; color: var(--ink); text-decoration: none; }
.post-author:hover { text-decoration: underline; }
/* Inside the author group, badges sit RIGHT next to the name (override their
   own default margin-left so they don't double up with the gap) */
.post-author-group .verified-badge { margin-left: 4px; }
.post-author-group .staff-badge { margin-left: 4px; }
.post-time { color: var(--muted); }
.post-time:hover { color: var(--ink); text-decoration: underline; }
.post-content {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink);
}
.post-actions { display: flex; gap: 16px; }
.post-action-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.post-action-link:hover { background: var(--bg-elev); color: var(--accent); text-decoration: none; }

.post-delete-form { margin-left: auto; }
.post-delete-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.post-card:hover .post-delete-btn { opacity: 1; }
.post-delete-btn:hover { background: color-mix(in srgb, var(--red, #dc2626) 14%, transparent); color: var(--red, #dc2626); }

/* ---- Staff inline actions on post cards (only when staff mode is on) ---- */
.post-staff-actions { display: inline-flex; gap: 4px; margin-left: 4px; }
.post-staff-btn {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .15s ease, background .15s ease, transform .12s ease;
}
.post-card:hover .post-staff-btn { opacity: 1; }
.post-staff-btn:hover { transform: translateY(-1px); }
.post-staff-mute:hover { background: color-mix(in srgb, #d97706 18%, transparent); border-color: #d97706; }
.post-staff-ban:hover { background: color-mix(in srgb, var(--red, #dc2626) 18%, transparent); border-color: var(--red, #dc2626); }

.post-thread { max-width: 720px; margin: 0 auto 60px; }
.post-thread > .post-card:first-of-type { font-size: 17px; }
.post-thread > .post-card:first-of-type .post-content { font-size: 17px; }
.post-replies-h { margin: 24px 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.post-replies { display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   FEED 3-column layout (Twitter/X-inspired)
   ============================================================ */
.feed-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 24px;
  margin: 0 auto 60px;
  max-width: 1280px;
}
.feed-rail-left, .feed-rail-right { min-width: 0; }
.feed-rail-sticky { position: sticky; top: 80px; }
.feed-rail-h {
  font-size: 18px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.feed-post-btn {
  width: 100%;
  margin-top: 18px;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 999px;
}

.feed-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.feed-tab {
  padding: 12px 18px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color .15s ease;
}
.feed-tab:hover { color: var(--ink); text-decoration: none; }
.feed-tab.active { color: var(--ink); }
.feed-tab.active::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

.composer-hint { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Right rail cards ---- */
.rail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.rail-card-soft { background: var(--bg-elev); }
.rail-card-h {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.rail-dev {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: opacity .12s ease;
}
.rail-dev:last-of-type { border-bottom: none; }
.rail-dev:hover { opacity: 0.85; text-decoration: none; }
.rail-dev-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5b89b 0%, #d4571a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.rail-dev-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.rail-dev-body { flex: 1; min-width: 0; }
.rail-dev-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }

.rail-job {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: opacity .12s ease;
}
.rail-job:last-of-type { border-bottom: none; }
.rail-job:hover { opacity: 0.85; text-decoration: none; }
.rail-job-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; line-height: 1.3; }

.rail-link {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
}
.rail-link:hover { color: var(--accent); }

.rail-rules { margin: 0; padding-left: 18px; line-height: 1.6; }
.rail-rules li { margin-bottom: 4px; }
.rail-rules li:last-child { margin-bottom: 0; }

/* ---- Latest-blog rail card (clickable card link) ---- */
.rail-card-blog {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform .14s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .14s ease, box-shadow .14s ease;
}
.rail-card-blog:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 18%, transparent);
  text-decoration: none;
}
.rail-blog-cover {
  height: 110px;
  border-radius: 8px;
  background-color: var(--bg-elev);
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
}
.rail-blog-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.rail-blog-excerpt { margin: 0 0 8px; line-height: 1.5; }
.rail-blog-meta { font-size: 12px; }

/* ---- Modal composer overlay ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  animation: modal-fade-in 0.18s ease-out;
}
.modal-overlay[hidden] { display: none; }
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  animation: modal-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modal-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
}
.modal-drafts-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-drafts-btn:hover {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line);
}
.modal-drafts-btn .modal-drafts-count {
  display: inline-block;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.drafts-panel {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding: 10px 26px 14px;
}
.drafts-panel[hidden] { display: none; }
.drafts-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.drafts-panel-empty { padding: 8px 0; color: var(--ink-soft); font-size: 13px; }
.drafts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.drafts-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.draft-preview {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-time { font-size: 11px; color: var(--ink-soft); flex: 0 0 auto; }
.draft-load-btn, .draft-delete-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
}
.draft-load-btn:hover { border-color: var(--accent); color: var(--accent); }
.draft-delete-btn { color: #d33; }
.draft-delete-btn:hover { background: rgba(220, 60, 60, 0.1); border-color: rgba(220, 60, 60, 0.45); }
.draft-clear-all {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.draft-clear-all:hover { color: #d33; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 999px;
  transition: background .12s ease;
  display: grid;
  place-items: center;
}
.modal-close:hover { background: var(--bg-elev); }

.modal-composer {
  display: flex;
  gap: 14px;
  padding: 18px 18px 14px;
}
.composer-avatar.lg { width: 48px; height: 48px; font-size: 20px; }
.modal-composer-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.modal-privacy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  align-self: flex-start;
  color: var(--accent-ink);
  font-weight: 600;
}
#modal-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 18px;
  resize: none;
  min-height: 140px;
  padding: 8px 0;
  line-height: 1.45;
}
#modal-textarea::placeholder { color: var(--muted); font-size: 18px; }
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 6px;
}
.modal-foot-right { display: flex; align-items: center; gap: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive: collapse rails on narrow screens ---- */
@media (max-width: 1100px) {
  .feed-layout { grid-template-columns: 200px 1fr; }
  .feed-rail-right { display: none; }
}
@media (max-width: 720px) {
  .feed-layout { grid-template-columns: 1fr; }
  .feed-rail-left { display: none; }
}

/* ============================================================
   STAFF BADGE — gold scalloped + hyper-realistic fire animation
   Pure CSS. Multiple layered radial gradients animated independently
   to simulate real flame turbulence (asymmetric, irregular flicker).
   ============================================================ */
.staff-badge {
  --sb-size: 18px;
  display: inline-block;
  position: relative;
  width: var(--sb-size);
  height: var(--sb-size);
  margin-left: 4px;
  vertical-align: -3px;
  flex-shrink: 0;
  isolation: isolate;
}
.staff-badge .staff-badge-svg {
  position: relative;
  z-index: 2;
  display: block;
  filter: drop-shadow(0 0 2px rgba(255, 200, 0, 0.6));
}

/* Fire wrapper — sits behind the SVG. Tight horizontal extent so the halo
   doesn't visually bleed into adjacent text. Tongues still rise upward. */
.staff-badge-fire {
  position: absolute;
  left: -30%;
  right: -30%;
  top: -110%;
  bottom: -8%;
  z-index: 1;
  pointer-events: none;
  filter: blur(0.5px);
}

/* === Flame layers === */
/* Each layer is a pseudo-element built with multiple radial gradients
   stacked. Different durations + delays make them flicker out of phase. */

/* Layer 1: outer red glow halo (slowest, ambient) */
.staff-badge-fire::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 80%,
      rgba(255, 60, 0, 0.55) 0%,
      rgba(255, 30, 0, 0.35) 35%,
      rgba(180, 20, 0, 0.18) 60%,
      transparent 80%);
  filter: blur(8px);
  animation: staff-flame-glow 2.6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Layer 2: orange middle body (medium speed) */
.staff-badge-fire::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 12%;
  bottom: 5%;
  background:
    radial-gradient(ellipse 65% 85% at 50% 90%,
      rgba(255, 220, 60, 0.85) 0%,
      rgba(255, 140, 0, 0.75) 22%,
      rgba(255, 70, 0, 0.55) 45%,
      rgba(200, 30, 0, 0.30) 70%,
      transparent 88%);
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  filter: blur(2.5px);
  animation: staff-flame-body 1.4s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Inner bright tongue + secondary tongues — built with extra stacked gradients
   on the .staff-badge itself so they sit just behind the badge. */
.staff-badge::before {
  content: '';
  position: absolute;
  left: -35%;
  right: -35%;
  top: -100%;
  bottom: -5%;
  z-index: 0;
  pointer-events: none;
  background:
    /* Center tongue — bright yellow-white core */
    radial-gradient(ellipse 28% 55% at 50% 78%,
      rgba(255, 250, 200, 0.95) 0%,
      rgba(255, 230, 80, 0.85) 25%,
      rgba(255, 150, 0, 0.55) 50%,
      transparent 75%),
    /* Left tongue — slightly cooler */
    radial-gradient(ellipse 18% 45% at 30% 75%,
      rgba(255, 210, 60, 0.7) 0%,
      rgba(255, 100, 0, 0.5) 50%,
      transparent 80%),
    /* Right tongue */
    radial-gradient(ellipse 18% 42% at 70% 78%,
      rgba(255, 220, 80, 0.7) 0%,
      rgba(255, 110, 0, 0.55) 50%,
      transparent 80%);
  filter: blur(1.5px);
  animation: staff-flame-tongues 0.9s steps(6) infinite alternate;
  mix-blend-mode: screen;
}

/* A second-pass shimmer on the badge itself */
.staff-badge::after {
  content: '';
  position: absolute;
  left: -25%;
  right: -25%;
  top: -70%;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Tiny rising sparks */
    radial-gradient(circle 1.5px at 35% 30%, rgba(255, 240, 150, 0.9), transparent 70%),
    radial-gradient(circle 1px   at 60% 22%, rgba(255, 220, 80, 0.85), transparent 70%),
    radial-gradient(circle 1px   at 50% 8%,  rgba(255, 200, 60, 0.7),  transparent 70%),
    radial-gradient(circle 1px   at 25% 48%, rgba(255, 200, 80, 0.6),  transparent 70%);
  filter: blur(0.6px);
  animation: staff-flame-sparks 1.8s linear infinite;
  mix-blend-mode: screen;
}

/* === Keyframes === */

/* Outer glow: slow breathe + subtle hue shift */
@keyframes staff-flame-glow {
  0%   { transform: scale(1) translateY(0);     opacity: 0.85; }
  30%  { transform: scale(1.06) translateY(-1px); opacity: 1; }
  60%  { transform: scale(0.97) translateY(1px);  opacity: 0.75; }
  100% { transform: scale(1.04) translateY(-2px); opacity: 0.95; }
}

/* Middle body: tongue-like rise + sway */
@keyframes staff-flame-body {
  0%   { transform: scaleY(1) translateX(0); }
  20%  { transform: scaleY(1.08) translateX(-0.5px); }
  40%  { transform: scaleY(0.94) translateX(0.5px); }
  60%  { transform: scaleY(1.06) translateX(-0.3px); }
  80%  { transform: scaleY(0.98) translateX(0.4px); }
  100% { transform: scaleY(1.04) translateX(0); }
}

/* Tongues: stepped flicker (steps() makes it discrete = more "flame-like") */
@keyframes staff-flame-tongues {
  0%   { transform: scaleY(1) translateY(0)   skewX(0deg); opacity: 0.92; }
  16%  { transform: scaleY(1.18) translateY(-2px) skewX(-2deg); opacity: 1; }
  33%  { transform: scaleY(0.92) translateY(1px)  skewX(1.5deg); opacity: 0.85; }
  50%  { transform: scaleY(1.12) translateY(-1px) skewX(-1deg); opacity: 1; }
  66%  { transform: scaleY(0.96) translateY(2px)  skewX(2deg);  opacity: 0.88; }
  83%  { transform: scaleY(1.08) translateY(-2px) skewX(-1.5deg); opacity: 0.95; }
  100% { transform: scaleY(1.02) translateY(0)   skewX(0deg);   opacity: 0.9; }
}

/* Sparks: rising + fade */
@keyframes staff-flame-sparks {
  0%   { transform: translateY(2px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

/* Reduced-motion: kill all animation, keep a static glow */
@media (prefers-reduced-motion: reduce) {
  .staff-badge-fire::before,
  .staff-badge-fire::after,
  .staff-badge::before,
  .staff-badge::after {
    animation: none;
  }
}

/* ===========================================================================
   GLOBAL SCALE PASS — sleek down everything by ~15-25%.
   Applied as an override block at the bottom so the cascade wins without
   having to retouch every individual rule above. Goal: tighter hierarchy,
   less white-space waste, more polished feel without changing layout shape.
   =========================================================================== */

/* Base typography — tighten */
body { font-size: 14.5px; line-height: 1.5; }

/* Container — narrower + tighter padding */
.container { max-width: 1040px; padding: 22px 26px 60px; }

/* Headings */
h1 { font-size: 28px; margin: 0 0 12px; line-height: 1.15; }
h2 { font-size: 21px; margin: 0 0 6px; }
h3 { font-size: 15px; margin: 12px 0 4px; }
.lede { font-size: 16px; margin: 0 auto 20px; line-height: 1.55; max-width: 600px; }

/* Eyebrow — pill smaller */
.eyebrow { font-size: 11px; padding: 3px 8px; letter-spacing: 0.1em; }

/* Section heads */
.section-head { margin-bottom: 18px; }

/* Nav — slightly tighter */
.nav { padding: 10px 24px; }
.brand { font-size: 16px; }
.nav-links a { font-size: 13px; }

/* Buttons — sleeker */
.btn { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 10px 20px; font-size: 14px; border-radius: 10px; }

/* Hero — major reduction */
.hero { padding: 48px 0 36px; margin-bottom: 36px; }
.hero h1 { font-size: 44px; margin: 6px auto 14px; max-width: 760px; line-height: 1.08; letter-spacing: -0.03em; }
.hero .lede { font-size: 16.5px; margin: 0 auto 22px; max-width: 580px; }
.hero-foot { font-size: 12px; }
.hero-glow { width: 540px; height: 320px; top: -90px; }

/* Trust strip — tighter */
.trust-strip { padding: 14px 16px; gap: 10px; }
.trust-item { font-size: 13px; }
.trust-icon { font-size: 18px; }

/* Stats / counters */
.stats { margin: 0 0 40px; gap: 10px; }
.stat { padding: 14px 16px; }
.stat-num { font-size: 24px; }
.stat-label { font-size: 11.5px; }

/* Cards (job cards / general) */
.card { padding: 16px; gap: 8px; }
.card h3 { margin: 2px 0; font-size: 15px; }
.card p { font-size: 13.5px; }

/* Forms */
.form input, .form select, .form textarea, input[type="text"], input[type="email"],
input[type="number"], input[type="password"], textarea, select {
  padding: 8px 11px;
  font-size: 13.5px;
  border-radius: 8px;
}
.form label { font-size: 13px; }

/* Tables */
.table { font-size: 13.5px; }
.table th, .table td { padding: 9px 12px; }

/* Final CTA */
.final-cta { padding: 36px 0 12px; }
.final-cta h2 { font-size: 26px; }

/* Pricing comparison block — keep it readable but smaller */
.pricing-card { padding: 16px 18px; }
.pricing-logo { font-size: 16px; }
.pricing-rows li { padding: 6px 0; font-size: 13px; }
.pricing-rows li.pricing-takehome { font-size: 13.5px; }
.pricing-rows li.pricing-takehome strong { font-size: 18px; }

/* Two-up sections (For customers / For developers) */
.two-up .side { padding: 22px 24px; }
.checks li { font-size: 13.5px; padding: 5px 0 5px 26px; }

/* How-it-works flow */
.flow-step { padding: 16px; }
.flow-step h3 { font-size: 14px; }
.flow-num { width: 28px; height: 28px; font-size: 13px; }

/* Categories grid */
.cat { padding: 16px; }
.cat h3 { font-size: 14px; margin: 6px 0 4px; }
.cat-icon { font-size: 24px; }

/* FAQ */
.faq-item { padding: 12px 16px; }
.faq-item summary { font-size: 14.5px; }
.faq-item p { font-size: 13.5px; }

/* Dashboard stats strip — already tight, just tune */
.dash-stat { padding: 10px 12px; }
.dash-stat-value { font-size: 18px; }
.dash-stat-label { font-size: 10.5px; }

/* Job templates gallery */
.job-templates { padding: 14px 16px; margin: 12px 0 18px; }
.job-templates-heading { font-size: 14px; }
.job-template-card { padding: 10px 12px; }
.job-template-icon { font-size: 18px; margin-bottom: 4px; }
.job-template-title { font-size: 13px; }

/* Verify / Road to Verified bars */
.verify-bar-card { padding: 14px 16px; }
.verify-bar-track { height: 10px; }

/* Post cards (Dev Chat) */
.post-card { padding: 12px 14px; }

/* Wallet / dashboard */
.wallet-amount { font-size: 26px; }

/* Status pills slightly smaller */
.status, .tag, .pill-completed { font-size: 11px; padding: 2px 7px; }

/* Mobile keeps the existing breakpoint adjustments — but tighten further */
@media (max-width: 800px) {
  .container { padding: 16px 16px 48px; }
  .hero h1 { font-size: 32px; }
  .hero .lede { font-size: 15px; }
  h1 { font-size: 24px; }
  h2 { font-size: 19px; }
}

/* Add funds — highlighted pill so people see it as clickable */
.wallet-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.add-funds-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: #fff !important;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  text-decoration: none !important;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px var(--accent-glow);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.add-funds-pill:hover {
  background: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--accent-glow);
}
body.dark-mode .add-funds-pill {
  /* Stand out against the pure-black background with a brighter glow */
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.45), 0 0 16px rgba(255, 165, 0, 0.35);
}