/* ═══════════════════════════════════════════════
   SKILLD — Mobile-first stylesheet
   Single centred column, scales up on desktop.
═══════════════════════════════════════════════ */

:root {
  --gd:  #1B4332;
  --gm:  #2D6A4F;
  --gl:  #40916C;
  --gp:  #D8F3DC;
  --am:  #EF9F27;
  --cr:  #FAF8F3;
  --ch:  #1A1A1E;
  --mu:  #6B7280;
  --bd:  #E5E7EB;
  --al:  #FEF3C7;

  --col: 640px;
  --gap: 1rem;
}

/* ── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cr);
  color: var(--ch);
  overflow-x: hidden;
}

/* ── BLOCK SYSTEM ───────────────────────────── */
.blk { width: 100%; }
.blk-in {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0.5rem var(--gap);
}

.blk-cream { background: var(--cr); }
.blk-hero  { padding-top: calc(22px + 1.25rem); }
.dash-header {
  padding: 0.35rem var(--gap) 0.2rem;
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blk-in-center { text-align: center; }
.blk-hero-sm { padding-top: calc(22px + 1.25rem); padding-bottom: 0.6rem; }
.blk-in-tight { padding-top: 0.35rem; }
.page-title-clamp { font-size: clamp(1.2rem, 4.5vw, 2rem); }
.blk-hero-no-bottom { padding-bottom: 0; }
.blk-tab-bar-wrap { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.page-label-tight { margin-bottom: 0.3rem; }
.page-title-spaced { margin-bottom: 1rem; }
.tab-bar-spaced { margin-bottom: 1.25rem; }
.trust-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* step-card merged into .card + .card-flex */
.step-connector {
  width: 2px; height: 18px; background: var(--bd);
  margin: 0 auto 0 calc(0.85rem + 16px);
}

/* ── How it works — trust strip ──────────────────────────────────── */
.trust-card {
  background: #fff; border: 0.5px solid var(--bd); border-radius: 10px;
  padding: 1.1rem 0.9rem;
}
.trust-item { display: flex; align-items: flex-start; gap: 0.65rem; }
.trust-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.trust-item span { font-size: 0.82rem; color: var(--mu); line-height: 1.55; }
.trust-item strong { color: var(--gd); }
.blk-white { background: #fff; }
.blk-dark  { background: var(--ch); }
.blk-green { background: var(--gd); }

/* ── PAGE HEADER CLASSES ─────────────────────────────────────── */
/* Defined here centrally — never redefine on individual pages   */
.page-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gl);
  margin-bottom: 0.3rem;
}
.page-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gd);
  margin-bottom: 0.4rem;
}
.page-title em { font-style: italic; color: var(--am); }
.page-sub { font-size: 0.88rem; color: var(--mu); line-height: 1.65; }
.form-label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--gd); margin-bottom: 0.25rem; }

/* ── NAV ────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #B7E4C7;
  border-bottom: 1.5px solid #9DD4B0;
}
.nav-in {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}
.nav-mascot { height: 24px; width: auto; }
.nav-logo-word {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -0.3px;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 1rem;
}
/* ⚠️ IMPORTANT: This rule excludes .btn-signin and .btn-signup intentionally.
   Never change this to .nav-links a {} — it will override button text colours.
   Always use :not(.btn-signin):not(.btn-signup) for any nav link colour rules. */
.nav-links a:not(.btn-signin):not(.btn-signup) {
  font-size: 0.8rem;
  color: var(--ch);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:not(.btn-signin):not(.btn-signup):hover { color: var(--gm); }
.nav-links a.active { color: var(--gd); font-weight: 500; }
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--gd);
  border-radius: 2px;
}
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(250,248,243,0.98);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gd);
  text-decoration: none;
}
.nav-mobile-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: var(--gd);
}

/* ── BUTTONS ────────────────────────────────── */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.125rem 0.65rem;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s;
  border: none;
  white-space: nowrap;
}
.btn-primary     { background: #FEF3C7; border: 1.5px solid #856404; color: #856404; }
.btn-primary:hover { background: #FDE68A; }
.btn-mint        { background: #B7E4C7; border: 1.5px solid #40916C; color: #1B4332; }
.btn-mint:hover  { background: #9DD4B0; }
.select-filter { font-family:'DM Sans',sans-serif; font-size:0.8rem; padding:0.2rem 0.5rem; border:1.5px solid #40916C; border-radius:6px; background:#fff; color:#1A1A1E; cursor:pointer; }
.select-filter:focus { outline:none; border-color:#1B4332; }
.btn-amber       { background: #FEF3C7; border: 1.5px solid #EF9F27; color: #856404; }
.btn-amber:hover { background: #FDE68A; }
.btn-danger      { background: transparent; border: 1.5px solid #DC2626; color: #DC2626; }
.btn-danger:hover { background: #FEE2E2; }
/* btn-google — Google OAuth button. Same size as .btn. White bg per Google brand guidelines. */
.btn-google      { background: #fff; border: 1.5px solid var(--bd); color: var(--ch); }
.btn-google:hover { border-color: var(--gl); }
/* btn-outline REMOVED — use btn-primary, btn-mint, or btn-danger */
/* btn-block — full-width variant for card-contained buttons (auth forms etc.) */
.btn-block { display: flex; width: 100%; }
/* btn-ghost — neutral/secondary button for cancel and non-destructive dismiss actions */
.btn-ghost      { background: #fff; border: 1px solid #D1D5DB; color: #6B7280; }
.btn-ghost:hover { background: #F9FAFB; border-color: #9CA3AF; }
/* ── BUTTONS — nav & footer ─────────────────────
   btn-signin:      amber fill — nav & footer strip (matches Dashboard / Sign out buttons)
   btn-signin-light: ghost cream outline — use ONLY on dark backgrounds (currently unused)
   btn-signup:      amber fill — same as btn-signin
   ⚠️ btn-signup uses amber ghost style — keep consistent with btn-signin
      it as long as the :not() selectors above are maintained.
   ⚠️ NEVER use .btn-signup inside a container that has a blanket 'a { color: ... }' rule
      without adding :not(.btn-signup) to that rule first. ──────────────────────────── */
.btn-signin { background: #FEF3C7; border: 1.5px solid #856404; color: #856404; padding: 0.125rem 0.65rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: background 0.15s; display: inline-flex; align-items: center; cursor: pointer; }
.btn-signin:hover { background: #FDE68A; }
.btn-signin-light { background: transparent; border: 1.5px solid #FEF3C7; color: #FEF3C7; padding: 0.125rem 0.65rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; }
.btn-signin-light:hover { background: rgba(254,243,199,0.1); }
.btn-signup { background: #FEF3C7; border: 1.5px solid #856404; color: #856404; padding: 0.125rem 0.65rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: background 0.15s; display: inline-flex; align-items: center; }
.btn-signup:hover { background: #FDE68A; }

/* ── HERO ───────────────────────────────────── */
.hero-blk {
  background: var(--cr);
  padding-top: calc(44px + 0.75rem);
  padding-bottom: 0.5rem;
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.hero-in {
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gp);
  color: var(--gd);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gl);
  animation: pulse 2s infinite;
}
.hero-h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.8rem, 6.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gd);
  margin-bottom: 0.3rem;
}
.hero-h1 em { font-style: italic; color: var(--am); }
.hero-img {
  width: 55%;
  max-width: 240px;
  margin: 0.15rem auto 0.4rem;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(27,67,50,0.12));
}
.hero-sub {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mu);
  max-width: 480px;
  margin: 0 auto 0.5rem;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.hero-stats {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 0.5px solid var(--bd);
  width: 100%;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gd);
  line-height: 1;
}
.stat-label {
  font-size: 0.68rem;
  color: var(--mu);
  margin-top: 3px;
  line-height: 1.4;
}

/* ── FOOTER ─────────────────────────────────── */
footer { background: var(--ch); }

.footer-cta { background: #B7E4C7; border-top: 1.5px solid #9DD4B0; }
.footer-cta .blk-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.footer-cta h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1B4332;
  margin-bottom: 0.1rem;
}
.footer-cta p { font-size: 0.8rem; color: #2D6A4F; }

.footer-body .blk-in {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
  margin-bottom: 1.25rem;
}
.footer-brand {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
}
.footer-brand h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
}
.footer-brand p { font-size: 0.78rem; color: rgba(255,255,255,0.4); line-height: 1.6; }
.footer-swish {
  width: 70px; height: 3px;
  background: linear-gradient(90deg, var(--am) 60%, transparent);
  border-radius: 2px;
  margin-top: 0.5rem;
}
.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6rem;
}
.footer-col a {
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: rgba(255,255,255,0.8); }
.footer-bottom {
  padding-top: 1rem;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.footer-bottom a { color: rgba(255,255,255,0.3); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom-links { display: flex; gap: 1.25rem; }

/* ── ANIMATIONS ─────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── DESKTOP ────────────────────────────────── */
@media (min-width: 700px) {
  :root { --col: 720px; --gap: 1.25rem; }
  .nav-links { display: flex; }
  .nav-hamburger { display: none; }
  .hero-in { text-align: left; align-items: flex-start; }
  .hero-img { margin: 0 auto; }
  .hero-cta { justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; }
  .footer-links { grid-template-columns: 2fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-cta .blk-in { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 1000px) {
  :root { --col: 900px; }
}

/* ── STAT CARDS ─────────────────────────────── */
.card-row {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.5rem;
}
.card-stat {
  flex: 1;
  min-width: 120px;
  max-width: 180px;
  background: #fff;
  border: 0.5px solid var(--bd);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
  text-align: center;
}
.card-stat .stat-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gd);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.card-stat .stat-label {
  font-size: 0.7rem;
  color: var(--mu);
  line-height: 1.4;
}


/* ── SUBSCRIBE PAGE ──────────────────────────────────────────────── */
.sub-wrap { margin: 0 auto; }
.sub-header { margin-bottom: 1.5rem; }
.sub-title { font-size: 1.3rem; line-height: 1.2; }
.sub-no-trades-warn { background: #FEF3C7; border: 1.5px solid #FCD34D; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.sub-warn-text { color: #92400E; }
.sub-warn-link { font-weight: 600; }
.sub-price-val { font-weight: 600; color: #1B4332; }
.sub-total-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 1rem; }
.sub-total-label { font-weight: 700; color: #1B4332; }
.sub-total-amount { font-weight: 700; color: #1B4332; font-size: 1.15rem; }
.sub-included-box { background: #F0FAF3; border: 1px solid #9DD4B0; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.8rem; color: #2D6A4F; line-height: 1.5; }
.sub-small-print { margin-top: 0.6rem; font-size: 0.72rem; color: #9CA3AF; }
.sub-none-hint { font-size: 0.82rem; color: #856404; margin: 0.25rem 0 0; }
.sub-error-box { margin-top: 1rem; padding: 0.75rem; background: #FEE2E2; border-radius: 6px; color: #991B1B; font-size: 0.85rem; }
/* ── FAQ CARDS ───────────────────────────────── */
.faq-card {
  background: #fff;
  border: 0.5px solid var(--bd);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.faq-card:hover { border-color: var(--gl); }
.faq-card.open  { border-color: var(--gl); }
.faq-card .faq-q {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gd);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
}
.faq-card .faq-arrow { color: var(--am); transition: transform 0.2s; flex-shrink: 0; font-size: 1.5rem; line-height: 1; }
.faq-card.open .faq-arrow { transform: rotate(180deg); }
.faq-card .faq-a {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #374151;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s;
}
.faq-card.open .faq-a { max-height: 300px; padding-top: 0.5rem; }

/* ── PROFILE VIEW — stacked label/value (Bible spec) ─────────── */
/* ── Profile utility classes ──────────────────────────────────── */
.check-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--gd); cursor: pointer; margin-bottom: 0.75rem; }
.cred-hint { font-size: 0.7rem; color: var(--mu); margin-top: 0.15rem; }
.no-data-note-pad { padding: 0.35rem 0; }
.profile-field { padding: 0.35rem 0; border-bottom: 0.5px solid var(--bd); }
.profile-field:last-of-type { border-bottom: none; }
.profile-field-label { display: block; font-size: 0.72rem; font-weight: 500; color: var(--mu); margin-bottom: 0.15rem; }
.profile-field-value { display: block; font-size: 0.82rem; color: #333; font-weight: 400; }
/* ═══════════════════════════════════════════════════════════════════
   APP SHELL — additional styles for the modular app architecture
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 0.5px solid var(--bd);
  border-radius: 10px;
  padding: 0.9rem 0.85rem;
  cursor: default;
  transition: box-shadow 0.15s;
}
.card[data-route], .card[onclick] { cursor: pointer; }
.card[data-route]:hover, .card[onclick]:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.card-flex { display: flex; align-items: flex-start; gap: 0.75rem; }
.card-col  { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.card-row-stretch { margin-top: 0.5rem; align-items: stretch; }

/* ── Feature card internals (reason/step/cost shared) ─────────────── */
.card-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.card-label { font-size: 0.68rem; color: var(--mu); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.card-title { font-size: 0.88rem; font-weight: 500; color: var(--gd); display: block; margin-bottom: 0.2rem; }
.card-body  { font-size: 0.8rem; color: var(--mu); line-height: 1.6; margin: 0; }
.card-num   { font-size: 1.8rem; font-weight: 700; color: var(--gd); line-height: 1; }
.card-note  { font-size: 0.72rem; color: var(--mu); margin-top: 0.25rem; line-height: 1.4; }
.card-cost  { text-align: center; flex: 1; min-width: 120px; }

/* ── Step number badge ────────────────────────────────────────────── */
.step-num-ho {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff3cd; color: #856404; border: 1.5px solid #ffc107;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Earn note (how Skilld earns box) ────────────────────────────── */
.earn-note       { background: var(--gp); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.75rem 0.85rem; margin-top: 0.4rem; }
.earn-note-label { font-size: 0.75rem; font-weight: 500; color: var(--gd); margin-bottom: 0.25rem; }
.earn-note-body  { font-size: 0.78rem; color: var(--gm); line-height: 1.65; margin: 0; }
.earn-note-link  { color: var(--gd); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ── Trade grid ───────────────────────────────────────────────────── */
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.4rem; margin-top: 0.5rem; }
.trade-card { background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.65rem 0.5rem; text-align: center; transition: border-color 0.2s, transform 0.2s; }
.trade-card:hover { border-color: var(--gl); transform: translateY(-2px); }
.trade-icon { font-size: 1.2rem; margin-bottom: 0.25rem; }
.trade-name { font-size: 0.72rem; font-weight: 500; color: var(--gd); line-height: 1.3; }

/* ── Tab buttons ──────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #ffc107;
  width: 100%;
}
.tab-btn {
  padding: 0.17rem 0.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  border-style: none;
  background: #fff3cd;
  color: #856404;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
.tab-btn.active, .tab-btn:hover {
  background: #B7E4C7;
  color: #1B4332;
}

/* ── Trade buttons ────────────────────────────────────────────────── */
.trade-btn {
  padding: 0.125rem 0.65rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 20px;
  border: 1.5px solid #9DD4B0;
  background: #fff;
  color: #40916C;
  cursor: pointer;
  transition: all 0.15s;
}
.trade-btn.selected { background: #B7E4C7; color: #1B4332; border-color: #40916C; }
.trade-btn.locked   { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; }

/* ── Suburb pills ─────────────────────────────────────────────────── */
.suburb-pill {
  padding: 0.125rem 0.65rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 20px;
  border: 1.5px solid #fcd34d;
  background: #fff;
  color: #856404;
  cursor: pointer;
  transition: all 0.15s;
}
.suburb-pill.selected { background: #FEF3C7; color: #856404; border-color: #856404; }

/* ── Form elements in modules ─────────────────────────────────────── */
.form-group     { margin-bottom: 0.85rem; }
/* .form-label defined globally above — matches marketing pages */
.form-hint      { font-size: 0.72rem; color: var(--mu); margin-top: 0.25rem; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  box-sizing: border-box;
  color: #1A1A1E;
  background: #fff;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #1B4332;
}
.form-textarea  { min-height: 90px; resize: vertical; }

/* ── Credential status badges ─────────────────────────────────────── */
.cred-badge-verified { background: #D1FAE5; color: #065F46; font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.cred-badge-pending  { background: #FEF3C7; color: #92400E; font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.cred-badge-none     { background: #F3F4F6; color: #6B7280; font-size: 0.68rem; font-weight: 500; padding: 2px 8px; border-radius: 20px; }

/* ── for-tradies specific ─────────────────────────────────────────── */
.card-dashed { border-style: dashed; }
.text-gd { color: var(--gd); }
.coming-badge-pill {
  display: inline-block; font-size: 0.62rem; font-weight: 500;
  padding: 0.15rem 0.55rem; border-radius: 20px;
  background: var(--al); color: #854F0B;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.3rem;
}

/* ── Pricing formula box ──────────────────────────────────────────── */
.pricing-box { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 1.25rem; margin-top: 0.5rem; }
.pricing-eyebrow { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gl); margin-bottom: 0.4rem; }
.pricing-formula { font-size: 2rem; font-weight: 700; color: var(--gd); line-height: 1.1; margin-bottom: 0.25rem; }
.pricing-formula .pf-desc { font-size: 1rem; font-weight: 400; color: var(--mu); }
.pricing-sub { font-size: 0.8rem; color: var(--mu); margin-bottom: 1rem; }
.pricing-table { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1rem; }
.pricing-row { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 0.3rem 0.5rem; border-radius: 4px; }
.pricing-row.shaded { background: var(--cr); }
.pricing-row-label { color: var(--mu); }
.pricing-row-value { font-weight: 600; color: var(--gd); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.pricing-features li { font-size: 0.8rem; color: var(--ch); display: flex; gap: 7px; }
.pricing-features li span { color: var(--gl); flex-shrink: 0; }
.pricing-note { font-size: 0.8rem; color: var(--mu); margin-top: 0.5rem; line-height: 1.6; }

/* ── Verify note / why-we-verify box ─────────────────────────────── */
.verify-note { background: var(--gp); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.75rem 0.85rem; margin-top: 0.4rem; }
.verify-note p { font-size: 0.8rem; color: var(--gd); line-height: 1.65; margin: 0; }

/* ── join.html ───────────────────────────────────────────────────── */
.auth-card { background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.85rem; }
.auth-google-btn { margin-bottom: 0.75rem; }
.auth-send-btn { margin-top: 0.25rem; }
.form-hint-center { text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.auth-divider-line { flex: 1; height: 0.5px; background: var(--bd); }
.auth-divider-text { font-size: 0.72rem; color: var(--mu); }
.auth-sent { display: none; text-align: center; padding: 0.5rem 0; }
.auth-sent-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
.auth-sent-title { font-size: 0.88rem; font-weight: 500; color: var(--gd); margin-bottom: 0.2rem; }
.auth-reset { font-size: 0.72rem; color: var(--mu); margin-top: 0.5rem; }
.auth-reset a { color: var(--gl); }
.auth-next { margin-top: 0.5rem; }
.next-num { width: 36px; height: 36px; border-radius: 50%; background: #fff3cd; color: #856404; border: 1.5px solid #ffc107; font-family: 'DM Sans',sans-serif; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.popia-note { background: var(--gp); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.65rem 0.75rem; margin-top: 0.4rem; font-size: 0.75rem; color: var(--gd); line-height: 1.55; }
.popia-note a { color: var(--gm); }
.error-box { background: #FEE2E2; border: 0.5px solid #FCA5A5; border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 0.78rem; color: #991B1B; margin-top: 0.5rem; }

/* ── login.html ──────────────────────────────────────────────────── */
.login-wrap {
  min-height: calc(100vh - 44px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(44px + 2rem) 1rem 2rem;
  background: var(--cr);
}
.login-card {
  width: 100%; max-width: 400px;
  background: #fff; border: 0.5px solid var(--bd);
  border-radius: 12px; padding: 1.75rem 1.5rem 1.25rem;
}
.login-logo { text-align: center; margin-bottom: 1.25rem; }
.login-logo-word { font-family: 'DM Sans',sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--gd); letter-spacing: -0.3px; }
.login-heading { font-family: 'DM Sans',sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--gd); text-align: center; margin-bottom: 0.2rem; }
.login-sub { font-size: 0.8rem; color: var(--mu); text-align: center; margin-bottom: 1.25rem; line-height: 1.55; }
.redirect-note { display: none; background: var(--gp); border: 0.5px solid var(--bd); border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 0.78rem; color: var(--gd); line-height: 1.55; margin-bottom: 0.75rem; }
.divider-row { display: flex; align-items: center; gap: 0.75rem; margin: 0.85rem 0; }
.divider-row hr { flex: 1; border: none; border-top: 0.5px solid var(--bd); }
.divider-row span { font-size: 0.72rem; color: var(--mu); white-space: nowrap; }
.sent-icon { font-size: 2.5rem; text-align: center; margin-bottom: 0.75rem; }
.bottom-divider { border: none; border-top: 0.5px solid var(--bd); margin: 1rem 0; }
.login-footer { font-size: 0.68rem; color: var(--mu); text-align: center; margin-top: 1rem; line-height: 1.6; }
.login-footer a { color: var(--gl); }
.login-back { font-size: 0.72rem; color: var(--mu); text-align: center; line-height: 1.7; }
.login-back a { color: var(--gl); }
.login-signup { font-size: 0.78rem; color: var(--mu); text-align: center; }
.login-signup a { color: var(--gl); font-weight: 500; }

/* ── contact.html ────────────────────────────────────────────────── */
.contact-item { display: flex; align-items: flex-start; gap: 0.75rem; background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.75rem 0.85rem; }
.contact-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--gp); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.contact-label { font-size: 0.65rem; color: var(--mu); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.contact-value { color: var(--gd); font-weight: 500; text-decoration: none; font-size: 0.85rem; }
.contact-value:hover { color: var(--gm); }
.contact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.response-box { background: var(--cr); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.75rem 0.85rem; margin-top: 0.4rem; }
.response-box-label { font-size: 0.68rem; color: var(--gl); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.response-list { display: flex; flex-direction: column; gap: 0.2rem; }
.response-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.25rem 0; border-bottom: 0.5px solid var(--bd); }
.response-row:last-child { border-bottom: none; }
.response-row-label { color: var(--mu); }
.response-row-value { color: var(--gd); font-weight: 500; }
.response-row-value.amber { color: #856404; }
.member-note { background: var(--gp); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.75rem 0.85rem; margin-top: 0.4rem; }
.member-note-title { font-size: 0.8rem; font-weight: 500; color: var(--gd); margin-bottom: 0.2rem; }
.member-note p { font-size: 0.78rem; color: var(--gm); line-height: 1.6; margin: 0; }
.member-note a { color: var(--gl); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.72rem; color: var(--mu); text-align: center; margin-top: 0.5rem; }
.page-sub-spaced { margin-bottom: 0.75rem; }

/* ── trust.html ──────────────────────────────────────────────────── */
.card-row-wrap { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; align-items: stretch; }
.strike-card { flex: 1; min-width: 160px; }
.strike-num { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; }
.strike-1 .strike-num { color: var(--am); }
.strike-2 .strike-num { color: #E86D2A; }
.strike-3 .strike-num { color: #B91C1C; }

.escrow-box { background: var(--cr); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.85rem; margin-top: 0.4rem; }
.escrow-box-label { font-size: 0.7rem; color: var(--gl); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.escrow-box-sub { font-size: 0.78rem; color: var(--mu); line-height: 1.6; margin-bottom: 0.65rem; }
.escrow-split { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.escrow-mini-card { flex: 1; min-width: 80px; background: #fff; border: 0.5px solid var(--bd); border-radius: 8px; padding: 0.6rem; text-align: center; }
.escrow-mini-icon { font-size: 0.85rem; }
.escrow-mini-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mu); margin: 3px 0; }
.escrow-mini-pct { font-size: 1.4rem; font-weight: 700; color: var(--gd); }
.escrow-mini-note { font-size: 0.65rem; color: var(--mu); }

.warning-box { background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 10px; padding: 0.85rem; margin-top: 0.5rem; display: flex; align-items: flex-start; gap: 0.75rem; }
.warning-box-icon { font-size: 1.2rem; flex-shrink: 0; }
.warning-box-title { font-size: 0.88rem; color: var(--gd); display: block; font-weight: 500; margin-bottom: 0.3rem; }
.warning-box p { font-size: 0.8rem; color: var(--mu); line-height: 1.65; margin: 0 0 0.4rem; }
.warning-box p:last-child { margin: 0; }

.badge-optional { font-size: 0.72rem; font-weight: 400; color: var(--mu); }

/* ── post-a-job.html ─────────────────────────────────────────────── */
.upload-zone { border: 2px dashed var(--bd); border-radius: 10px; padding: 1.25rem; text-align: center; cursor: pointer; background: var(--cr); transition: all 0.2s; }
.upload-zone:hover { border-color: var(--gl); background: #fff; }
.upload-zone-text { font-size: 0.82rem; color: var(--mu); }
.upload-zone-text strong { color: var(--gd); }
.login-prompt { background: var(--gp); border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.85rem; text-align: center; }
.login-prompt h3 { font-size: 1.1rem; color: var(--gd); margin-bottom: 0.35rem; }
.login-prompt p { font-size: 0.8rem; color: var(--mu); margin-bottom: 0.75rem; line-height: 1.6; }
.btn-row-center { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.verify-banner { background: #FEF3C7; border: 1.5px solid #EF9F27; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.verify-banner-pending { background: #E0F2FE; border: 1.5px solid #7DD3FC; border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.verify-banner-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.05rem; }
.verify-banner-body { flex: 1; }
.verify-banner-title { font-size: 0.85rem; font-weight: 700; color: #856404; margin-bottom: 0.2rem; }
.verify-banner-pending .verify-banner-title { color: #0369A1; }
.verify-banner-text { font-size: 0.78rem; color: #856404; line-height: 1.55; margin-bottom: 0.5rem; }
.verify-banner-pending .verify-banner-text { color: #0369A1; }
.btn-locked { background: #d1d5db !important; color: #9ca3af !important; cursor: not-allowed !important; border: none !important; }
.btn-locked:hover { background: #d1d5db !important; }
.job-next-note { background: var(--gp); border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 0.75rem; color: var(--gd); line-height: 1.6; margin-bottom: 0.65rem; }
.lock-note { display: none; text-align: center; margin-top: 0.5rem; font-size: 0.75rem; color: #856404; line-height: 1.5; }
.lock-note a { color: #856404; font-weight: 600; }
.trust-strip-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 0.5px solid var(--bd); }
.trust-strip-item { font-size: 0.78rem; color: var(--mu); display: flex; align-items: center; gap: 5px; }
.photo-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 0.5px solid var(--bd); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── choose-role.html ────────────────────────────────────────────── */
.role-cards-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.role-card-row {
  background: #fff; border: 1.5px solid var(--bd); border-radius: 10px;
  padding: 0.65rem 0.85rem; cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; gap: 0.75rem; width: 100%; box-sizing: border-box;
}
.role-card-row:hover { border-color: var(--gd); background: #f8fdf9; }
.role-card-row.selected { border-color: var(--gd); background: #f0faf3; }
.role-icon-sm { font-size: 1.4rem; flex-shrink: 0; }
.role-body { flex: 1; }
.role-title { font-size: 0.88rem; font-weight: 700; color: var(--gd); margin-bottom: 0.15rem; }
.role-desc { font-size: 0.78rem; color: var(--mu); line-height: 1.5; }
.role-check {
  display: none; width: 20px; height: 20px; flex-shrink: 0;
  background: var(--gd); border-radius: 50%;
  align-items: center; justify-content: center;
  color: #fff; font-size: 0.72rem; font-weight: 700;
}
.both-note {
  background: #FEF3C7; border: 0.5px solid #FCD34D;
  border-radius: 10px; padding: 0.65rem 0.85rem;
  font-size: 0.78rem; color: #92400E; line-height: 1.6;
  display: none; margin-top: 0.75rem;
}
.loading-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(255,255,255,0.9); z-index: 999;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
}
.loading-overlay.show { display: flex; }
@keyframes spin { to { transform: rotate(360deg); } }
/* .spinner replaced by .skilld-spinner — see above */
.loading-msg { font-size: 0.88rem; color: var(--gd); font-weight: 500; }
.role-hint { font-size: 0.72rem; color: var(--mu); text-align: center; margin-top: 0.75rem; line-height: 1.6; }
#continue-btn { margin-top: 0.5rem; }
.blk-in-narrow { max-width: 640px; }

/* ── app-verify.html ─────────────────────────────────────────────── */
.verify-card { background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 1.5rem 1.25rem; margin-bottom: 1rem; }
.verify-card-center { padding: 2.5rem 1.25rem; text-align: center; }
.upload-zone.uploaded { border-color: var(--gd); background: #f0faf3; cursor: default; pointer-events: none; }
.upload-preview { margin-bottom: 1rem; }
.id-preview { width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px; margin-top: 0.75rem; border: 0.5px solid var(--bd); }
.verify-spinner { display: none; }
.verify-spinner.active { display: block; }
.spin-icon { display: inline-block; font-size: 2rem; animation: spin 1s linear infinite; }
.success-state { display: none; }
.success-state.active { display: block; }
.verify-intro { font-size: 0.85rem; color: var(--mu); line-height: 1.65; margin: 0 0 1.25rem; }
.verify-security-note { background: #f0faf3; border: 1px solid var(--gd); border-radius: 8px; padding: 0.65rem 0.75rem; font-size: 0.78rem; color: var(--gd); line-height: 1.55; margin-bottom: 1.25rem; }
.verify-field-label { font-size: 0.78rem; font-weight: 600; color: #666; display: block; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; }
.verify-field-label-doc { margin-bottom: 0.5rem; }
.upload-zone-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.upload-zone-title { font-size: 0.85rem; font-weight: 600; color: var(--gd); margin-bottom: 0.2rem; }
.upload-zone-sub { font-size: 0.75rem; color: var(--mu); }
.upload-ready-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.upload-ready-text { font-size: 0.85rem; font-weight: 600; color: var(--gd); }
.verify-id-input { width: 100%; padding: 0.65rem 0.75rem; border: 1.5px solid var(--bd); border-radius: 6px; font-family: 'DM Sans',sans-serif; font-size: 0.9rem; color: var(--ch); box-sizing: border-box; margin-bottom: 0.75rem; outline: none; transition: border-color 0.15s; }
.verify-id-input:focus { border-color: var(--gd); }
.verify-note { font-size: 0.72rem; color: var(--mu); text-align: center; margin-top: 0.5rem; }
.verify-spinner-title { font-size: 0.9rem; font-weight: 600; color: var(--gd); margin: 1rem 0 0.25rem; }
.verify-spinner-sub { font-size: 0.8rem; color: var(--mu); margin: 0; }
.success-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.success-title { font-size: 1.3rem; font-weight: 700; color: var(--gd); margin-bottom: 0.4rem; }
.success-sub { font-size: 0.88rem; color: var(--mu); line-height: 1.65; margin-bottom: 1.5rem; }
.sandbox-badge { background: #FEF3C7; border: 0.5px solid #ffc107; border-radius: 6px; padding: 0.4rem 0.75rem; font-size: 0.72rem; color: #856404; font-weight: 600; text-align: center; margin-bottom: 1rem; }

/* ── app-tp-onboarding.html ──────────────────────────────────────── */
.progress-bar { display: flex; gap: 4px; margin-bottom: 1.5rem; }
.progress-step { flex: 1; height: 4px; border-radius: 2px; background: var(--bd); transition: background 0.3s; }
.progress-step.done { background: var(--gd); }
.progress-step.active { background: var(--am); }
.step-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--am); margin-bottom: 0.4rem; }
.step-title { font-size: 1.1rem; font-weight: 700; color: var(--gd); margin-bottom: 0.75rem; }
.step-desc { font-size: 0.82rem; color: var(--mu); margin: 0 0 1rem; line-height: 1.6; }
.step-desc-sm { margin: 0 0 0.75rem; }
.price-display { background: #f0faf3; border: 1px solid var(--gd); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; text-align: center; }
.price-display .amount { font-size: 2rem; font-weight: 700; color: var(--gd); }
.price-display .period { font-size: 0.82rem; color: #666; }
.price-display .hint { font-size: 0.75rem; color: #6B7280; margin-top: 0.25rem; }
.town-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.town-btn { padding: 0.5rem 1rem; border: 0.5px solid var(--bd); border-radius: 20px; background: #fff; cursor: pointer; font-family: 'DM Sans',sans-serif; font-size: 0.85rem; font-weight: 500; color: #444; transition: all 0.15s; }
.town-btn:hover { border-color: #856404; color: #856404; }
.town-btn.selected { border-color: #856404; background: #FEF3C7; color: #856404; }
.area-section-label { font-size: 0.75rem; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.breakdown { background: var(--cr); border: 0.5px solid var(--bd); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.breakdown-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: #444; padding: 0.3rem 0; border-bottom: 0.5px solid #eee; }
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row.total { font-weight: 700; color: var(--gd); font-size: 0.95rem; padding-top: 0.5rem; margin-top: 0.25rem; border-top: 1.5px solid var(--gd); border-bottom: none; }
.breakdown-row.muted { color: #6B7280; font-size: 0.78rem; }
.sub-note { background: #fff3cd; border: 0.5px solid #ffc107; border-radius: 8px; padding: 0.75rem; font-size: 0.78rem; color: #856404; line-height: 1.6; margin-bottom: 1rem; }
.sub-terms { font-size: 0.75rem; color: var(--mu); line-height: 1.6; margin-bottom: 1rem; }
.sub-terms a { color: var(--gm); }
.nav-btns { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.verify-tip { font-size: 0.82rem; color: var(--gd); font-weight: 500; background: #f0faf3; border: 1px solid var(--gd); border-radius: 8px; padding: 0.65rem 0.75rem; margin-bottom: 1rem; }
.id-field-label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--gd); margin-bottom: 0.3rem; }
.id-field-hint { font-size: 0.72rem; color: var(--mu); margin-top: 0.25rem; }
.id-input { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--bd); border-radius: 6px; font-family: 'DM Sans',sans-serif; font-size: 0.9rem; color: var(--ch); background: #fff; outline: none; box-sizing: border-box; transition: border-color 0.2s; }
.onboarding-security-note { background: var(--gp); border-radius: 8px; padding: 0.65rem 0.75rem; font-size: 0.75rem; color: var(--gd); line-height: 1.55; margin-bottom: 1rem; }
.complete-state { display: none; text-align: center; padding: 2rem 0; }
.complete-state.active { display: block; }
.complete-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.complete-title { font-size: 1.3rem; font-weight: 700; color: var(--gd); margin-bottom: 0.4rem; }
.complete-sub { font-size: 0.88rem; color: var(--mu); line-height: 1.65; margin-bottom: 1.5rem; }
.upload-status { font-size: 0.85rem; color: #6B7280; }
.upload-done-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.upload-done-text { font-size: 0.85rem; font-weight: 600; color: var(--gd); }
.upload-done-sub { font-size: 0.75rem; color: #666; margin-top: 0.2rem; }

/* ── app.html — shell ─────────────────────────────────────────────── */
#app-view { min-height: calc(100vh - 44px); padding-top: 44px; }

/* Skeleton loading */
.skeleton-card { background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 1rem; margin-bottom: 0.75rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
@keyframes ring-colour {
  0%,100% { border-top-color: #40916C; border-right-color: #6FCF9B; }
  50%      { border-top-color: #EF9F27; border-right-color: #FAC775; }
}
.skilld-spinner { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 64px; height: 64px; }
.skilld-spinner-ring { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #E8F5EE; border-top-color: #40916C; border-right-color: #6FCF9B; animation: spin-cw 1.2s linear infinite, ring-colour 3s ease-in-out infinite; }
.skilld-spinner-img { width: 36px; height: 36px; animation: spin-ccw 1.2s linear infinite; object-fit: contain; }
.skilld-spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; }
.skilld-spinner-text { font-size: 0.88rem; color: var(--gd); font-weight: 500; }
.skel { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 4px; }
.skel-title  { height: 18px; width: 55%; margin-bottom: 10px; }
.skel-line   { height: 13px; width: 85%; margin-bottom: 7px; }
.skel-line-s { height: 13px; width: 45%; margin-bottom: 7px; }
.skel-badge  { height: 22px; width: 70px; border-radius: 20px; display: inline-block; }

/* Error card */
.error-card { background: #fff; border: 0.5px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 10px; padding: 1rem 1.1rem; margin: 1rem 0; }
.error-card-title { font-size: 0.88rem; font-weight: 600; color: #991b1b; margin-bottom: 0.3rem; }
.error-card-msg   { font-size: 0.8rem; color: #555; margin-bottom: 0.75rem; line-height: 1.5; }

/* Empty state */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #6B7280; }
.empty-state-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.empty-state-text { font-size: 0.88rem; line-height: 1.6; }

/* App nav */
.app-nav-link { font-size: 0.8rem; color: var(--gm); font-weight: 500; text-decoration: none; cursor: pointer; }
.app-nav-link:hover { color: var(--gd); }
.nav-link { cursor: pointer; }

/* ── dashboard.js ────────────────────────────────────────────────── */
.dash-heading { font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 0.35rem; }
.dash-heading-amber { color: #EF9F27; }
.dash-heading-green { color: #1B4332; }
.dash-verify-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: 0.65rem; font-weight: 700; cursor: default; flex-shrink: 0; }
.dash-verify-badge.verified   { background: #40916C; color: #fff; }
.dash-verify-badge.unverified { background: #9ca3af; color: #fff; }
.dash-tab-wrap { padding: 0.25rem var(--gap) 0.5rem; max-width: var(--col); margin: 0 auto; }
.dash-post-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #40916C; margin-bottom: 0.2rem; }
.dash-post-title { font-size: 1rem; font-weight: 700; color: #1B4332; margin-bottom: 0.75rem; }
.filter-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.filter-row-lg { gap: 0.5rem; }
.job-title { font-size: 0.88rem; font-weight: 600; color: var(--gd); flex: 1; margin-right: 0.5rem; }
.job-meta { font-size: 0.78rem; color: var(--mu); }
.job-meta-spaced { margin-bottom: 0.35rem; }
.job-questions { font-size: 0.78rem; color: #854F0B; font-weight: 600; margin-top: 0.2rem; }
.job-flag { font-size: 0.78rem; font-weight: 600; margin-top: 0.3rem; }
.job-desc { font-size: 0.8rem; color: #555; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.job-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.35rem; }
.job-header-center { align-items: center; margin-bottom: 0.35rem; }
.card-mb { margin-bottom: 0.6rem; }
.card-mb-lg { margin-bottom: 0.75rem; }
.card-section-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mu); margin-bottom: 0.6rem; }
.card-section-label-spaced { margin-bottom: 0.75rem; }
.data-row-inline { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 0.5px solid var(--bd); font-size: 0.82rem; }
.data-row-inline:last-of-type { border-bottom: none; }
.data-row-label { color: var(--mu); }
.data-row-value { font-weight: 500; }
.data-row-value-green { color: #065f46; font-weight: 700; }
.data-row-value-red { color: #DC2626; }
.badge-verified-sm { background: #d1fae5; color: #065f46; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.badge-pending-sm  { background: #dbeafe; color: #1e40af; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.badge-warn-sm     { background: #fef3c7; color: #92400e; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.badge-open-sm     { font-size: 0.72rem; font-weight: 500; color: #1B4332; background: #D8F3DC; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.success-box { display: none; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.65rem 0.85rem; font-size: 0.82rem; color: #065f46; margin-bottom: 0.75rem; }
.error-box-profile { display: none; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 0.65rem 0.85rem; font-size: 0.82rem; color: #991b1b; margin-bottom: 0.75rem; }
.profile-header { display: flex; align-items: center; gap: 0.85rem; }
.avatar-circle { width: 56px; height: 56px; border-radius: 50%; background: #B7E4C7; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #1B4332; overflow: hidden; cursor: pointer; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 1.1rem; font-weight: 700; color: #1B4332; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-role { font-size: 0.75rem; color: #555; margin-top: 1px; }
.profile-photo-hint { font-size: 0.72rem; color: #6B7280; margin-top: 2px; }
.profile-info { flex: 1; min-width: 0; }
.profile-actions { display: none; flex-direction: column; gap: 0.3rem; flex-shrink: 0; }
.profile-actions-bottom { display: flex; justify-content: flex-end; }
.profile-actions-bottom-edit { display: none; justify-content: flex-end; gap: 0.3rem; }
.sub-stat-box { background: #f0faf3; border-radius: 8px; padding: 0.65rem; display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.sub-stat-label { font-size: 0.68rem; color: var(--mu); }
.sub-stat-value { font-size: 1.2rem; font-weight: 700; color: var(--gd); }
.sub-stat-right { text-align: right; }
.trade-pills-wrap { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.no-data-note { font-size: 0.82rem; color: #6B7280; margin: 0; }
.area-city-label { font-size: 0.72rem; font-weight: 600; color: var(--gd); margin-bottom: 0.3rem; }
.area-pills-wrap { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.area-accordion { border: 0.5px solid var(--bd); border-radius: 8px; overflow: hidden; margin-bottom: 0.4rem; }
.area-accordion-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem; background: #FAF8F3; cursor: pointer; gap: 0.5rem; }
.area-accordion-hdr.has-selected { background: #FEF3C7; }
.area-accordion-left { display: flex; flex-direction: column; gap: 0.1rem; }
.area-accordion-city { font-size: 0.82rem; font-weight: 600; color: #1B4332; }
.area-accordion-count { font-size: 0.68rem; color: #6B7280; }
.area-accordion-hdr.has-selected .area-accordion-count { color: #856404; }
.area-accordion-chevron { font-size: 0.75rem; color: #6B7280; flex-shrink: 0; }
.area-accordion-body { padding: 0.5rem 0.75rem 0.65rem; border-top: 0.5px solid var(--bd); background: #fff; }
.area-accordion-select-all { font-size: 0.68rem; color: #856404; font-weight: 600; cursor: pointer; margin-bottom: 0.4rem; text-decoration: underline; text-underline-offset: 2px; }
.area-accordion-nested { margin: 0 -0.75rem; border-bottom: 0.5px solid var(--bd) !important; }
.area-accordion-nested .area-accordion-body { padding: 0.5rem 1.25rem 0.65rem; }
.city-select-all { display: block; background: none; border: none; padding: 0; font-size: 0.7rem; color: #856404; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; margin-bottom: 0.3rem; }
.city-select-all:hover { color: #6B5300; }
.addr-card { border-radius: 8px; padding: 0.65rem 0.75rem; margin-bottom: 0.4rem; }
.addr-card-default { border: 1px solid #1B4332; }
.addr-card-normal { border: 1px solid var(--bd); }
.addr-label { font-size: 0.82rem; font-weight: 700; color: var(--gd); margin-bottom: 0.2rem; }
.addr-default-badge { font-size: 0.68rem; font-weight: 500; color: #1B4332; margin-left: 6px; }
.addr-detail { font-size: 0.78rem; color: #666; line-height: 1.5; }
.addr-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.addr-form { display: none; background: #f9fafb; border-radius: 8px; padding: 0.85rem; margin-bottom: 0.75rem; border: 1px solid var(--bd); }
.addr-form-title { font-size: 0.82rem; font-weight: 700; color: var(--gd); margin-bottom: 0.6rem; }
.addr-input-wrap { position: relative; }
.required { color: #DC2626; font-weight: 700; margin-left: 1px; }
.pj-saved-addrs { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.25rem; }
.card-clickable { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.card-clickable:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-color: #9DD4B0; }
.card-tap-hint { font-size: 0.75rem; color: #856404; margin-top: 0.4rem; text-align: right; }
.pj-saved-addr { padding: 0.45rem 0.75rem; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 0.82rem; color: #1B4332; cursor: pointer; background: #fff; }
.pj-saved-addr:hover { background: #F0FDF4; border-color: #9DD4B0; }
.pj-saved-addr-default { border-color: #9DD4B0; background: #F0FDF4; }
.pj-saved-addr-active { border-color: #1B4332; background: #D8F3DC; font-weight: 500; }
.addr-suggestions { display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); z-index: 100; max-height: 220px; overflow-y: auto; }
.addr-hint { font-size: 0.68rem; color: var(--mu); margin-top: 0.2rem; }
.addr-suggestion-item { padding: 0.55rem 0.85rem; cursor: pointer; border-bottom: 1px solid #f3f4f6; font-size: 0.82rem; color: #1B4332; line-height: 1.35; }
.addr-suggestion-item:last-child { border-bottom: none; }
.addr-suggestion-item:hover { background: #F0FDF4; }
.addr-suggestion-main { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-suggestion-sub { font-size: 0.74rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-row-wrap { display: flex; justify-content: space-between; align-items: center; }
.cred-label { font-size: 0.82rem; font-weight: 500; color: var(--gd); }
.cred-actions { display: flex; align-items: center; gap: 0.35rem; }
.cred-add-row { margin-top: 0.65rem; display: flex; gap: 0.5rem; align-items: center; }
.doc-upload-zone { border: 1.5px dashed var(--bd); border-radius: 8px; padding: 0.85rem; text-align: center; cursor: pointer; }
.doc-upload-label { font-size: 0.82rem; color: var(--mu); }
.verified-note { font-size: 0.82rem; color: #065f46; }
.verified-id-note { font-size: 0.8rem; color: #555; margin-top: 0.25rem; }
.pending-note { font-size: 0.82rem; color: #1e40af; }
.unverified-note { font-size: 0.82rem; color: #555; margin-bottom: 0.75rem; line-height: 1.5; }
.quote-section-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mu); margin-bottom: 0.5rem; }
.quote-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.quote-name { font-size: 0.88rem; font-weight: 600; color: var(--gd); }
.quote-verified { font-size: 0.72rem; color: #065F46; }
.quote-price { font-size: 1rem; font-weight: 700; color: var(--gd); }
.quote-meta { font-size: 0.75rem; color: var(--mu); margin-bottom: 0.5rem; }
.form-label-opt { color: var(--mu); font-weight: 400; }
.trade-hint { font-size: 0.78rem; color: #065f46; min-height: 1.1em; margin-bottom: 0.35rem; }
.form-hint-trade { margin-bottom: 0.5rem; }
.sub-suspended { font-size: 0.85rem; color: #DC2626; font-weight: 600; margin-bottom: 0.5rem; }
.sub-suspended-note { font-size: 0.8rem; color: #6B7280; margin-bottom: 0.65rem; }
.sub-none { font-size: 0.85rem; color: #6B7280; margin-bottom: 0.65rem; }
.profile-bio { font-size: 0.8rem; color: #555; margin-top: 0.5rem; font-style: italic; }

/* ── skilld.js — nav/footer/notifications ───────────────────────── */
.tier-table-card { background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 0.9rem 0.85rem; }
.tier-table-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gd); margin-bottom: 0.5rem; }
.tier-feature-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0; }
.tier-feature-item { font-size: 0.82rem; color: #333; display: flex; gap: 7px; }
.tier-feature-check { color: #2d6a4f; flex-shrink: 0; }
.footer-cta-strip { background: #FEF3C7; border-top: 1px solid #EF9F27; }
.footer-cta-heading { font-size: 1.1rem; font-weight: 700; color: var(--gd); margin-bottom: 0.2rem; }
.footer-cta-sub { font-size: 0.8rem; color: #856404; margin-bottom: 0.65rem; }
.footer-body-row { font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.footer-row { font-size: 0.78rem; }
.footer-row-label { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-right: 0.5rem; }
.footer-link { color: rgba(255,255,255,0.35); text-decoration: none; }
.footer-sep { color: rgba(255,255,255,0.2); margin: 0 0.35rem; }
.footer-legal { padding-top: 0.75rem; border-top: 0.5px solid rgba(255,255,255,0.08); font-size: 0.7rem; color: rgba(255,255,255,0.3); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.footer-legal-sep { color: rgba(255,255,255,0.15); }
.footer-legal-link { color: rgba(255,255,255,0.3); text-decoration: none; }
.notif-bell-icon { font-size: 1.1rem; line-height: 1; }
.notif-badge { position: absolute; top: -4px; right: -6px; background: #DC2626; color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.notif-empty { padding: 1.25rem; text-align: center; color: #6B7280; font-size: 0.85rem; }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0.85rem; border-bottom: 0.5px solid var(--bd); }
.notif-header-label { font-size: 0.78rem; font-weight: 700; color: var(--gd); }
.notif-mark-read { font-size: 0.72rem; color: #2d6a4f; background: none; border: none; cursor: pointer; font-family: 'DM Sans',sans-serif; font-weight: 600; }
.notif-title { font-size: 0.82rem; color: var(--gd); margin-bottom: 2px; }
.notif-title-unread { font-weight: 700; }
.notif-body { font-size: 0.75rem; color: #666; line-height: 1.45; }
.notif-time { font-size: 0.72rem; color: #6B7280; margin-top: 3px; }
.footer-signup-gap { margin-left: 0.5rem; }
.footer-row-center { font-size: 0.78rem; text-align: center; margin-bottom: 0.75rem; }
.footer-legal-center { padding-top: 0.75rem; border-top: 0.5px solid rgba(255,255,255,0.08); font-size: 0.7rem; color: rgba(255,255,255,0.3); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; }
@media (max-width: 560px) { #hiw-tabs { flex-wrap: wrap; } }

/* ── Job detail / quote / completion / review shared ─────────────── */
.jd-section-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mu); margin-bottom: 0.4rem; }
.jd-job-card { border: 1.5px solid #EF9F27 !important; }
.jd-title { font-size: 1rem; font-weight: 700; color: var(--gd); margin-bottom: 0.35rem; }
.jd-meta { font-size: 0.8rem; color: var(--mu); line-height: 1.55; margin-bottom: 0.5rem; }
.jd-desc { font-size: 0.82rem; color: #444; line-height: 1.6; margin-bottom: 0.75rem; }
.jd-photo-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.jd-photo { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 0.5px solid var(--bd); cursor: pointer; }
.jd-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 0.5px solid var(--bd); }
.jd-quote-card      { border: 1.5px solid #40916C; border-radius: 10px; margin-bottom: 0.6rem; overflow: hidden; background: var(--wh); }
.jd-quote-accepted  { border-color: #40916C; }
.jd-quote-price     { font-size: 1.3rem; font-weight: 700; color: var(--gd); }
.jd-qc-header       { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.65rem; cursor: pointer; gap: 10px; }
.jd-qc-header:hover { background: #f5fdf7; }
.jd-qc-left         { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jd-qc-name-row     { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jd-qc-name         { font-size: 0.82rem; font-weight: 600; color: var(--gd); }
.jd-qc-biz          { font-size: 0.72rem; color: var(--mu); }
.jd-qc-meta-row     { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jd-qc-rating       { font-size: 0.72rem; color: var(--mu); }
.jd-qc-cert         { font-size: 0.68rem; font-weight: 600; background: #B7E4C7; color: #1B4332; padding: 0px 5px; border-radius: 20px; }
.jd-qc-right        { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.jd-qc-price        { font-size: 0.88rem; font-weight: 600; color: var(--gd); text-align: right; }
.jd-qc-days         { font-size: 0.68rem; color: var(--mu); text-align: right; }
.jd-qc-chev         { font-size: 14px; color: var(--mu); transition: transform 0.2s; flex-shrink: 0; }
.jd-qc-body         { display: none; border-top: 1px solid #40916C; }
.jd-qc-body.open    { display: block; }
.jd-qc-tp           { background: #B7E4C7; padding: 0.4rem 0.65rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.jd-qc-tp-row       { display: flex; gap: 5px; align-items: baseline; }
.jd-qc-tp-label     { font-size: 0.68rem; color: #2D6A4F; flex-shrink: 0; }
.jd-qc-tp-val       { font-size: 0.72rem; font-weight: 600; color: #1B4332; }
.jd-qc-tp-about     { grid-column: 1/-1; font-size: 0.7rem; color: #1B4332; line-height: 1.45; margin-top: 2px; }
.jd-qc-tp-about-lbl { font-size: 0.68rem; color: #2D6A4F; margin-bottom: 1px; }
.jd-qc-quote-sect   { border-left: 3px solid #EF9F27; background: var(--wh); padding: 0.4rem 0.65rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.jd-qc-q-label      { font-size: 0.68rem; color: var(--mu); flex-shrink: 0; }
.jd-qc-q-val        { font-size: 0.72rem; font-weight: 600; color: var(--gd); }
.jd-qc-approach     { grid-column: 1/-1; font-size: 0.7rem; color: #333; line-height: 1.45; margin-top: 2px; }
.jd-qc-approach-lbl { font-size: 0.68rem; color: var(--mu); margin-bottom: 1px; }
.jd-qc-actions      { grid-column: 1/-1; display: flex; gap: 6px; padding-top: 6px; border-top: 0.5px solid var(--bd); margin-top: 3px; }
.jd-quote-meta { font-size: 0.78rem; color: var(--mu); margin: 0.2rem 0 0.5rem; }
.jd-quote-text { font-size: 0.82rem; color: #444; line-height: 1.55; }
.jd-tradie-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
.jd-tradie-avatar { width: 40px; height: 40px; border-radius: 50%; background: #B7E4C7; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--gd); flex-shrink: 0; overflow: hidden; }
.jd-tradie-name { font-size: 0.88rem; font-weight: 600; color: var(--gd); }
.jd-tradie-rating { font-size: 0.75rem; color: var(--mu); }
.jd-status-banner { border-radius: 8px; padding: 0.65rem 0.85rem; margin-bottom: 0.75rem; font-size: 0.82rem; line-height: 1.55; }
.jd-status-info { background: #EFF6FF; border: 0.5px solid #BFDBFE; color: #1E40AF; }
.jd-status-warn { background: #FEF3C7; border: 0.5px solid #FCD34D; color: #92400E; }
.jd-status-success { background: #F0FDF4; border: 0.5px solid #BBF7D0; color: #065F46; }
.jd-status-danger { background: #FEF2F2; border: 0.5px solid #FECACA; color: #991B1B; }
.qf-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mu); margin-bottom: 0.35rem; }
.qf-field-wrap { margin-bottom: 0.75rem; }
.qf-hint { font-size: 0.72rem; color: var(--mu); margin-top: 0.25rem; line-height: 1.5; }
.qf-price-display { background: #f0faf3; border: 1px solid var(--gd); border-radius: 8px; padding: 0.65rem 0.85rem; margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.qf-price-label { font-size: 0.75rem; color: var(--mu); }
.qf-price-value { font-size: 1.2rem; font-weight: 700; color: var(--gd); }

/* ── Quote form toggle ── */
.qf-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.qf-toggle input { opacity: 0; width: 0; height: 0; }
.qf-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #D1D5DB; border-radius: 24px; transition: background 0.2s; }
.qf-toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.qf-toggle input:checked + .qf-toggle-slider { background: var(--gd, #2D6A4F); }
.qf-toggle input:checked + .qf-toggle-slider:before { transform: translateX(18px); }

/* ── Stage breakdown (HO quote view) ── */
.qf-stage-breakdown { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; padding: 0.75rem; margin-top: 0.75rem; }
.qf-stage-breakdown-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #065F46; margin-bottom: 0.5rem; }
.qf-stage-breakdown-row { display: grid; grid-template-columns: 1.5rem 1fr 3rem 5rem; gap: 0.25rem; align-items: center; padding: 0.3rem 0; border-bottom: 0.5px solid #D1FAE5; }
.qf-stage-breakdown-row:last-of-type { border-bottom: none; }
.qf-stage-breakdown-total { display: grid; grid-template-columns: 1.5rem 1fr 3rem 5rem; gap: 0.25rem; align-items: center; padding-top: 0.4rem; margin-top: 0.2rem; border-top: 1.5px solid #6EE7B7; }
.qf-stage-breakdown-num { font-size: 0.9rem; color: #065F46; }
.qf-stage-breakdown-desc { font-size: 0.78rem; color: #333; }
.qf-stage-breakdown-pct { font-size: 0.75rem; font-weight: 600; color: #065F46; text-align: right; }
.qf-stage-breakdown-amt { font-size: 0.78rem; color: #1B4332; text-align: right; }
.comp-upload-zone { border: 2px dashed var(--bd); border-radius: 10px; padding: 1.5rem; text-align: center; cursor: pointer; background: var(--cr); transition: all 0.2s; margin-bottom: 0.75rem; }
.comp-upload-zone:hover { border-color: var(--gd); background: #fff; }
.comp-photo-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.comp-photo { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; border: 0.5px solid var(--bd); }
.review-stars { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; }
.review-star { font-size: 1.8rem; cursor: pointer; opacity: 0.3; transition: opacity 0.15s; }
.review-star.active { opacity: 1; }
.sub-manage-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 0.5px solid var(--bd); font-size: 0.82rem; }
.sub-manage-row:last-child { border-bottom: none; }
.vo-total { font-size: 1.1rem; font-weight: 700; color: var(--gd); }
.verify-inline-card { background: #fff; border: 0.5px solid var(--bd); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; }

/* ── Admin modals (suburb add + edit) ────────────────────────────── */
.admin-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: none; align-items: center; justify-content: center; }
.admin-modal-overlay.open { display: flex; }
.admin-modal { background: #fff; border-radius: 12px; padding: 1.5rem; width: min(480px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; }
.admin-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.admin-modal-title { font-size: 0.95rem; font-weight: 700; color: #1B4332; margin: 0; }
.admin-modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #6B7280; line-height: 1; padding: 0; }
.admin-modal-body { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.admin-modal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: 0.5rem; }
.admin-modal-footer-right { display: flex; gap: 0.5rem; }

/* ── TP Profile Modal ───────────────────────────────────────────── */
.tp-modal-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.tp-modal-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #B7E4C7; }
.tp-modal-avatar-placeholder { width: 56px; height: 56px; border-radius: 50%; background: #D8F3DC; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.tp-modal-title-block { flex: 1; }
.tp-modal-name { font-size: 0.95rem; font-weight: 700; color: #1B4332; line-height: 1.3; }
.tp-modal-verified { font-size: 0.75rem; color: #40916C; font-weight: 500; margin-top: 0.15rem; }
.tp-modal-stats { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tp-modal-stat { background: #F0FDF4; border: 1px solid #D8F3DC; border-radius: 8px; padding: 0.4rem 0.65rem; text-align: center; min-width: 60px; }
.tp-stat-val { display: block; font-size: 0.88rem; font-weight: 700; color: #1B4332; }
.tp-stat-lbl { display: block; font-size: 0.68rem; color: #6B7280; margin-top: 0.1rem; }
.tp-modal-section { margin-bottom: 0.85rem; }
.tp-modal-section-label { font-size: 0.72rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.tp-modal-trades { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tp-trade-pill { background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.75rem; color: #856404; }
.tp-cred-pill { background: #F0FDF4; border-color: #9DD4B0; color: #1B4332; }
.tp-modal-bio { font-size: 0.82rem; color: #555; line-height: 1.55; margin: 0; }
.tp-review-item { border-top: 1px solid #F3F4F6; padding-top: 0.6rem; margin-top: 0.6rem; }
.tp-review-item:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.tp-review-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.tp-review-stars { font-size: 0.78rem; }
.tp-review-meta { font-size: 0.72rem; color: #6B7280; }
.tp-review-comment { font-size: 0.8rem; color: #555; line-height: 1.45; }

/* ── Payment Method Modal ────────────────────────────────────────── */
.sk-pay-modal { background:#fff; border-radius:12px; padding:1.5rem 1.25rem; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.25); font-family:'DM Sans',sans-serif; }
.sk-pay-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.sk-pay-title { font-size:0.95rem; font-weight:700; color:#1B4332; }
.sk-pay-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:#6B7280; line-height:1; }
.sk-pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1rem; }
.sk-pay-method { border:2px solid #E5E7EB; border-radius:8px; padding:0.75rem; cursor:pointer; transition:border 0.15s, background 0.15s; }
.sk-pay-method.selected { border-color:#1B4332; background:#F0FAF3; }
.sk-pay-method-top { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.3rem; }
.sk-pay-radio { accent-color:#1B4332; }
.sk-pay-method-name { font-weight:700; color:#1B4332; font-size:0.9rem; }
.sk-pay-method-note { font-size:0.78rem; color:#6B7280; }
.sk-pay-method-amount { font-size:1rem; font-weight:700; color:#1B4332; margin-top:0.25rem; }
.sk-pay-method-hint { font-size:0.7rem; color:#9CA3AF; }
.sk-pay-escrow-note { background:#F9FAFB; border-radius:6px; padding:0.6rem 0.75rem; margin-bottom:1rem; font-size:0.8rem; color:#6B7280; line-height:1.5; }
.sk-pay-footer { display:flex; justify-content:flex-end; gap:0.5rem; }

/* ── Job locked state ────────────────────────────────────────────── */
.jd-locked-banner { display:flex; align-items:flex-start; gap:0.75rem; background:#EFF6FF; border-color:#BFDBFE; }
.jd-locked-icon { font-size:1.2rem; flex-shrink:0; margin-top:0.1rem; }
.jd-locked-content { flex:1; }
.jd-locked-title { font-size:0.85rem; font-weight:700; color:#1E40AF; margin-bottom:0.2rem; }
.jd-locked-body { font-size:0.8rem; color:#3B82F6; line-height:1.5; }

/* ── TP Feed — Traffic light quote status ────────────────────────── */
.feed-section-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#6B7280; margin-bottom:0.5rem; }
.feed-quoted-card { border-left:4px solid transparent; }
.feed-quoted-pending { border-left-color:#EF9F27; }
.feed-quoted-won     { border-left-color:#40916C; background:#F0FAF3; }
.feed-quoted-lost    { border-left-color:#E5E7EB; opacity:0.75; }
.feed-tl-row  { display:flex; align-items:center; gap:0.6rem; }
.feed-tl-dot  { font-size:1rem; flex-shrink:0; }
.feed-tl-meta { flex:1; min-width:0; }
.feed-tl-title { font-size:0.85rem; font-weight:600; color:#1B4332; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-tl-sub   { font-size:0.75rem; color:#6B7280; margin-top:0.1rem; }
.feed-tl-label { font-size:0.72rem; font-weight:700; white-space:nowrap; flex-shrink:0; padding:0.15rem 0.4rem; border-radius:4px; }
.feed-tl-label-yellow { background:#FEF3C7; color:#856404; }
.feed-tl-label-green  { background:#D8F3DC; color:#1B4332; }
.feed-tl-label-red    { background:#FEE2E2; color:#991B1B; }

/* ── TP Job Detail — Escrow funded banner ───────────────────────── */
.jd-escrow-banner  { display:block; background:#F0FAF3; border-color:#9DD4B0; }
.jd-escrow-content { }
.jd-escrow-title   { font-size:0.85rem; font-weight:700; color:#1B4332; margin-bottom:0.2rem; }
.jd-escrow-body    { font-size:0.8rem; color:#40916C; line-height:1.5; word-break:break-word; overflow-wrap:break-word; }
@media (max-width: 480px) {
  .jd-escrow-banner .btn-sm { display:flex; width:100%; box-sizing:border-box; white-space:normal; text-align:center; }
}

/* ── Terms Modal — full-screen coverage ─────────────────────────── */
.terms-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.terms-modal-overlay.open { display: flex; }
.terms-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: min(860px, 92vw);
  height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  font-family: 'DM Sans', sans-serif;
}
.terms-modal-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5E7EB;
  background: #B7E4C7;
  flex-shrink: 0;
}
.terms-modal-header-title { font-size:0.95rem; font-weight:600; color:#1B4332; flex:1; }
.terms-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.terms-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid #E5E7EB;
  flex-shrink: 0;
  background: #FAFAFA;
}
/* Mobile: full screen, no rounded corners, no padding */
@media (max-width: 600px) {
  .terms-modal-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
  .terms-modal { border-radius: 0; max-width: 100%; height: 100%; max-height: 100%; width: 100%; }
}

/* ── HO Job Detail — Quote card tradie name pill ─────────────────── */

/* ── Completion flow ─────────────────────────────────────────────── */
.comp-section-title { font-size: 0.82rem; font-weight: 700; color: var(--gd); margin-bottom: 0.35rem; }
.comp-instructions  { font-size: 0.82rem; color: #555; line-height: 1.6; margin-bottom: 0.75rem; }
.comp-terms         { font-size: 0.75rem; color: var(--mu); line-height: 1.6; background: #f9f9f9; border: 1px solid var(--bd); border-radius: 8px; padding: 0.65rem 0.75rem; margin: 0.75rem 0; }
.comp-submit-hint   { font-size: 0.72rem; color: var(--mu); text-align: center; margin-top: 0.35rem; }
.comp-msg           { font-size: 0.82rem; padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; }
.comp-strike-warning { font-size: 0.78rem; color: #92400E; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 8px; padding: 0.65rem 0.75rem; line-height: 1.6; margin-bottom: 0.5rem; }

/* Upload zone */
.comp-upload-zone   { position: relative; border: 2px dashed var(--bd); border-radius: 10px; padding: 1.75rem 1rem; text-align: center; cursor: pointer; background: var(--cr, #fafaf8); transition: border-color 0.2s, background 0.2s; margin-bottom: 0.75rem; }
.comp-upload-zone:hover { border-color: var(--gd); background: #fff; }
.comp-upload-icon   { font-size: 1.75rem; margin-bottom: 0.25rem; }
.comp-upload-label  { font-size: 0.85rem; font-weight: 600; color: #333; }
.comp-upload-sub    { font-size: 0.72rem; color: var(--mu); margin-top: 0.2rem; }

/* Preview grid */
.comp-preview-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.comp-preview-grid-ho { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 400px) {
  .comp-preview-grid, .comp-preview-grid-ho { grid-template-columns: repeat(2, 1fr); }
}
.comp-preview-item  { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--bd); }
.comp-preview-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-preview-remove { position: absolute; top: 4px; right: 4px; background: rgba(220,38,38,0.9); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 0.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Status cards */
.comp-status-card    { text-align: center; padding: 2rem 1.25rem; }
.comp-status-waiting { background: #FFFBEB; border: 1px solid #FCD34D; }
.comp-status-done    { background: #F0FDF4; border: 1px solid #BBF7D0; }
.comp-status-icon    { font-size: 2rem; margin-bottom: 0.5rem; }
.comp-status-title   { font-size: 0.95rem; font-weight: 700; color: #333; margin-bottom: 0.35rem; }
.comp-status-body    { font-size: 0.82rem; color: #555; line-height: 1.6; }

/* Lightbox */
.comp-lightbox      { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.comp-lightbox-img  { max-width: 100%; max-height: 90vh; border-radius: 8px; object-fit: contain; }
/* ── Invite picker ───────────────────────────────────────────── */
.invite-tp-card        { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.invite-tp-card:hover  { border-color: #40916C; }
.invite-selected       { border-color: #40916C !important; background: #F0FDF4; }

/* ── Star rating ─────────────────────────────────────────────── */
.rating-stars       { display: flex; gap: 0.5rem; margin: 1rem 0 0.25rem; }
.star-btn           { background: none; border: none; font-size: 2rem; cursor: pointer; color: #D1D5DB; padding: 0; line-height: 1; transition: color 0.15s, transform 0.1s; }
.star-btn:hover,
.star-btn.star-active { color: #F59E0B; }
.star-btn:hover     { transform: scale(1.15); }
.rating-star-label  { font-size: 0.82rem; color: var(--mu); min-height: 1.2em; }

/* ── Rate button (soft amber — distinct from primary actions) ─── */
.btn-rate           { background: #FFFDF5; color: #92400E; border: 1.5px solid #F59E0B; border-radius: 8px; padding: 5px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; }
.btn-rate:hover     { background: #FEF3C7; }