/* ============================================================
   ScroodbyContractor — Shared Design System
   Brand: orange #ff6b00 / dark #1f2937 / gritty + trustworthy
   ============================================================ */

/* ---- Fonts: Archivo variable (width + weight axes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,800&display=swap');

:root {
  /* Brand */
  --orange:        #ff6b00;
  --orange-600:    #e85f00;
  --orange-700:    #c45000;
  --orange-100:    #ffe6d1;
  --orange-50:     #fff4ea;

  /* Dark / ink */
  --ink:           #1f2937;
  --ink-900:       #141b26;
  --ink-800:       #1f2937;
  --ink-700:       #374151;
  --ink-600:       #4b5563;
  --ink-500:       #6b7280;
  --ink-400:       #9ca3af;

  /* Neutrals */
  --bg:            #ffffff;
  --bg-soft:       #f6f7f9;
  --bg-softer:     #fafbfc;
  --line:          #e7e9ee;
  --line-strong:   #d4d8e0;

  /* Status */
  --green:         #14855a;
  --green-bg:      #e6f4ec;
  --amber:         #c47d00;
  --amber-bg:      #fbf0d6;
  --red:           #c4392f;
  --red-bg:        #fbe7e5;
  --blue:          #2563eb;

  /* Stars */
  --star:          #ff9d2e;
  --star-empty:    #dfe2e8;

  /* System */
  --radius:        14px;
  --radius-sm:     10px;
  --radius-lg:     22px;
  --shadow-sm:     0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow:        0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:     0 18px 50px rgba(16,24,40,.16);
  --maxw:          1200px;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Display = expanded heavy Archivo (industrial, gutsy) */
.display, h1, h2, .h-display {
  font-family: var(--sans);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.04;
  overflow-wrap: break-word;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
/* default inline-icon size; explicit width attrs and component rules override this */
svg:not([width]) { width: 1em; height: 1em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--orange); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-tight { max-width: 920px; }
.section { padding-block: 84px; }
.section-sm { padding-block: 52px; }
.bg-soft { background: var(--bg-soft); }
.bg-ink { background: var(--ink-900); color: #fff; }
.center { text-align: center; }

/* ---- Type scale ---- */
.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--orange); display:inline-block; }
.eyebrow.no-rule::before { display: none; }
h1 { font-size: clamp(38px, 6vw, 68px); margin: 0; overflow-wrap: break-word; }
h2 { font-size: clamp(30px, 4vw, 46px); margin: 0; overflow-wrap: break-word; }
h3 { font-family: var(--sans); font-weight: 800; font-size: 22px; margin: 0; line-height: 1.2; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-600); line-height: 1.6; }
.muted { color: var(--ink-500); }
.tiny { font-size: 13px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap; user-select: none;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(255,107,0,.28); }
.btn-primary:hover { background: var(--orange-600); box-shadow: 0 10px 26px rgba(255,107,0,.36); }
.btn-primary:focus-visible { outline: 3px solid var(--orange-100); outline-offset: 2px; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color:#fff; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-900); }

.btn-block { width: 100%; }
.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none;
}
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color:#fff; animation: spin .7s linear infinite;
}
.btn-ghost.is-loading::after { border-color: rgba(31,41,55,.3); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* status action buttons (admin) */
.btn-approve { background: var(--green); color:#fff; }
.btn-approve:hover { background:#0f6e4a; }
.btn-reject { background:#fff; color: var(--red); border-color: var(--red); }
.btn-reject:hover { background: var(--red); color:#fff; }
.btn-delete { background:#fff; color: var(--ink-600); border-color: var(--line-strong); }
.btn-delete:hover { background: var(--ink-900); color:#fff; border-color: var(--ink-900); }

/* ============================================================
   STARS  — usage: data-rating on .stars, JS fills; or static
   ============================================================ */
.stars { display: inline-flex; align-items: center; gap: 2px; --sz: 18px; }
.stars svg { width: var(--sz); height: var(--sz); display:block; }
.stars .s-full { color: var(--star); }
.stars .s-empty { color: var(--star-empty); }
.stars.sz-sm { --sz: 14px; }
.stars.sz-lg { --sz: 26px; }
.stars.sz-xl { --sz: 34px; }
.rating-num { font-stretch:125%; font-weight: 900; line-height: 1; }

/* interactive star picker */
.star-pick { display:inline-flex; gap: 4px; }
.star-pick button {
  background: none; border: none; padding: 2px; color: var(--star-empty);
  transition: transform .1s ease, color .1s ease; line-height: 0;
}
.star-pick button svg { width: 30px; height: 30px; }
.star-pick button:hover { transform: scale(1.12); }
.star-pick button.on { color: var(--star); }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.badge svg { width: 14px; height: 14px; }
.badge-verified { background: var(--green-bg); color: var(--green); }
.badge-verified.solid { background: var(--green); color:#fff; }

.status-pill {
  display:inline-flex; align-items:center; gap:7px;
  font-size: 12px; font-weight: 800; letter-spacing:.04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; line-height:1;
}
.status-pill::before { content:""; width:7px; height:7px; border-radius:50%; }
.status-pending  { background: var(--amber-bg); color: var(--amber); }
.status-pending::before { background: var(--amber); }
.status-approved { background: var(--green-bg); color: var(--green); }
.status-approved::before { background: var(--green); }
.status-rejected { background: var(--red-bg); color: var(--red); }
.status-rejected::before { background: var(--red); }

/* project chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px; line-height:1;
}
.chip svg { width: 14px; height: 14px; color: var(--ink-400); }
.chip-cost { color: var(--green); background: var(--green-bg); border-color: transparent; }

/* helpful votes */
.helpful { display:inline-flex; align-items:center; gap:10px; }
.vote-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-size: 13px; font-weight: 700; color: var(--ink-600);
  background:#fff; border:1.5px solid var(--line-strong); border-radius:999px;
  padding: 8px 14px; transition: all .14s ease;
}
.vote-btn svg { width:16px; height:16px; }
.vote-btn:hover { border-color: var(--orange); color: var(--orange); }
.vote-btn.voted { background: var(--orange-50); border-color: var(--orange); color: var(--orange-700); }

/* ============================================================
   CARDS
   ============================================================ */
.card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.review-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display:flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.review-card .rc-photo { aspect-ratio: 16/10; background: var(--bg-soft); position: relative; overflow:hidden; }
.review-card .rc-photo img { width:100%; height:100%; object-fit: cover; }
.review-card .rc-photo.noimg::after, .rc-photo.noimg::after { content:"Project photo"; position:absolute; inset:0; display:grid; place-items:center; color: var(--ink-400); font-size:13px; font-weight:600; background: repeating-linear-gradient(45deg,#eef0f3,#eef0f3 12px,#f4f5f7 12px,#f4f5f7 24px); }
.review-card .rc-photo .badge-verified { position:absolute; top:12px; right:12px; box-shadow: var(--shadow); }
.review-card .rc-body { padding: 18px 20px 20px; display:flex; flex-direction:column; gap: 12px; flex:1; }
.rc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rc-name { font-weight:800; font-size:17px; line-height:1.2; }
.rc-license { font-size:12px; color: var(--ink-500); font-weight:600; }
.rc-excerpt { color: var(--ink-600); font-size:14.5px; line-height:1.55; }
.rc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top: 4px; }

/* ============================================================
   FORMS
   ============================================================ */
.field { display:flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink-800); }
.field label .req { color: var(--orange); margin-left: 2px; }
.field .hint { font-size: 12.5px; color: var(--ink-500); }
.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background:#fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-50); background:#fff;
}
.textarea { resize: vertical; min-height: 130px; line-height:1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right: 40px; }

.field.error .input, .field.error .select, .field.error .textarea { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.field.success .input, .field.success .select { border-color: var(--green); }
.field .err-msg { font-size: 12.5px; color: var(--red); font-weight:600; display:none; align-items:center; gap:5px; }
.field.error .err-msg { display:flex; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-soft); color: var(--ink-400); cursor:not-allowed; }

.input-icon { position: relative; }
.input-icon .input { padding-left: 42px; }
.input-icon > svg { position:absolute; left:14px; top:50%; transform: translateY(-50%); width:18px; height:18px; color: var(--ink-400); pointer-events:none; }
.pw-toggle { position:absolute; right:12px; top:50%; transform: translateY(-50%); background:none; border:none; color: var(--ink-400); padding:4px; line-height:0; }
.pw-toggle:hover { color: var(--ink-700); }
.pw-toggle svg { width:20px; height:20px; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px){ .grid-2 { grid-template-columns: 1fr; } }

/* form section grouping */
.form-section { border:1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 22px; background:#fff; }
.form-section > .fs-head { display:flex; align-items:flex-start; gap:14px; margin-bottom: 22px; }
.fs-num {
  flex:none; width:34px; height:34px; border-radius:10px; background: var(--ink-900); color:#fff;
  display:grid; place-items:center; font-stretch:125%; font-weight:900; font-size:15px;
}
.fs-head h3 { margin-bottom: 2px; }
.fs-head p { margin:0; font-size:13.5px; color: var(--ink-500); }

/* dropzone */
.dropzone {
  border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg-softer);
  padding: 34px; text-align:center; transition: all .15s ease; cursor:pointer;
}
.dropzone:hover, .dropzone.drag { border-color: var(--orange); background: var(--orange-50); }
.dropzone svg.dz-ic { width:36px; height:36px; color: var(--orange); margin: 0 auto 10px; }
.dz-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:16px; }
.dz-thumb { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line); background: var(--bg-soft); }
.dz-thumb img { width:100%; height:100%; object-fit:cover; }
.dz-thumb .rm { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background: rgba(20,27,38,.78); color:#fff; border:none; display:grid; place-items:center; line-height:0; }
.dz-thumb .rm svg { width:13px; height:13px; }

/* ============================================================
   NAV (injected)
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  display:flex; align-items:center; justify-content: space-between; gap: 20px;
  padding: 14px 28px; background: rgba(20,27,38,.0);
  transition: background .25s ease, box-shadow .25s ease, padding .2s ease;
}
.nav.solid, .nav.scrolled, .nav.force-solid { background: var(--ink-900); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
/* transparent hero nav overlays the hero (no reserved strip) and sticks via fixed */
.nav.transparent { position: fixed; left:0; right:0; top:0; box-shadow:none; }
.nav.transparent.scrolled, .nav.transparent.force-solid { box-shadow: 0 6px 24px rgba(0,0,0,.18); }
/* contrast scrim so white nav content stays legible over light photos */
.nav.transparent::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,14,20,.55), rgba(10,14,20,0)); pointer-events:none; transition: opacity .25s ease; }
.nav.transparent.scrolled::before, .nav.transparent.force-solid::before { opacity:0; }
.nav.transparent .nav-inner { position:relative; }
.nav-inner { width:100%; max-width: 1280px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand img { height: 38px; width:auto; }
.brand-logo { height: 40px; width:auto; display:block; }
.footer .brand-logo { height: 46px; }
.brand-mark { color: var(--orange); display:grid; place-items:center; flex:none; }
.brand-mark svg { display:block; }
.brand-fallback { display:flex; flex-direction:column; line-height:.92; }
.brand-fallback .b1 { font-stretch:125%; font-weight:900; font-style:italic; font-size:24px; color: var(--orange); letter-spacing:-.02em; }
.brand-fallback .b2 { font-weight:800; font-size:9px; letter-spacing:.22em; color:#fff; }
.nav.light .brand-fallback .b2 { color: var(--ink); }
.nav-links { display:flex; align-items:center; gap: 4px; }
.nav-links a {
  color: rgba(255,255,255,.82); font-weight:600; font-size: 14.5px; padding: 9px 14px; border-radius: 999px;
  transition: color .14s ease, background .14s ease;
}
.nav-links a:hover { color:#fff; background: rgba(255,255,255,.1); }
.nav-links a.active { color:#fff; }
.nav-links a.active::after { content:""; display:block; height:2px; background: var(--orange); border-radius:2px; margin: 5px 14px 0; }
.nav.light .nav-links a { color: var(--ink-600); }
.nav.light .nav-links a:hover { color: var(--ink); background: var(--bg-soft); }
.nav.light .nav-links a.active { color: var(--ink); }
.nav-right { display:flex; align-items:center; gap: 12px; }
.nav-user { display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:700; font-size:14px; padding:6px 4px; }
.nav-user svg { width:17px; height:17px; opacity:.8; }
.nav.light .nav-user { color: var(--ink); }
.drawer-user { display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:16px; padding:14px 8px 4px; border-top:1px solid rgba(255,255,255,.1); margin-top:8px; }
.drawer-user svg { width:19px; height:19px; opacity:.8; }
.nav-social { display:flex; gap: 4px; }
.nav-social a { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color: rgba(255,255,255,.7); transition: all .14s ease; }
.nav-social a:hover { color:#fff; background: rgba(255,255,255,.12); }
.nav.light .nav-social a { color: var(--ink-500); }
.nav.light .nav-social a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-social svg { width:17px; height:17px; }
.nav-burger { display:none; background:none; border:none; color:#fff; padding:6px; }
.nav.light .nav-burger { color: var(--ink); }
.nav-burger svg { width:26px; height:26px; }

@media (max-width: 940px){
  .nav { padding-inline: 16px; }
  .nav-links, .nav-social { display:none; }
  .nav-burger { display:block; }
  /* on mobile the auth buttons live in the slide-in drawer, so the bar is just logo + burger */
  .nav-right .btn { display:none; }
  .nav-burger { margin-left: 4px; }
}

/* mobile drawer */
.drawer { position: fixed; inset:0; z-index: 200; display:none; }
.drawer.open { display:block; }
.drawer-scrim { position:absolute; inset:0; background: rgba(10,14,20,.55); backdrop-filter: blur(2px); }
.drawer-panel { position:absolute; right:0; top:0; bottom:0; width: min(320px, 84vw); background: var(--ink-900); padding: 24px; display:flex; flex-direction:column; gap:6px; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); }
.drawer.open .drawer-panel { transform: none; }
.drawer-panel a { color: rgba(255,255,255,.85); font-weight:700; font-size:18px; padding: 13px 8px; border-bottom:1px solid rgba(255,255,255,.08); }
.drawer-panel a.active { color: var(--orange); }
.drawer-close { align-self:flex-end; background:none; border:none; color:#fff; padding:6px; margin-bottom:8px; }
.drawer-close svg { width:26px; height:26px; }

/* ============================================================
   FOOTER (injected)
   ============================================================ */
.footer { background: var(--ink-900); color: rgba(255,255,255,.7); padding: 64px 0 28px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { color:#fff; font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
.footer a { color: rgba(255,255,255,.66); font-size:14.5px; display:block; padding: 5px 0; transition: color .14s ease; }
.footer a:hover { color: var(--orange); }
.footer .f-social { display:flex; gap:10px; margin-top:14px; }
.footer .f-social a { width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:grid; place-items:center; padding:0; }
.footer .f-social a:hover { background: var(--orange); color:#fff; }
.footer .f-social svg { width:18px; height:18px; }
.f-subscribe { display:flex; gap:8px; margin-top:18px; max-width:340px; }
.f-subscribe input { flex:1; min-width:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:10px 13px; color:#fff; font-size:14px; font-family:inherit; }
.f-subscribe input::placeholder { color:rgba(255,255,255,.45); }
.f-subscribe input:focus { outline:none; border-color:var(--orange); background:rgba(255,255,255,.1); }
.f-subscribe button { border:none; background:var(--orange); color:#fff; font-weight:700; border-radius:10px; padding:0 18px; font-size:14px; white-space:nowrap; transition:background .15s; }
.f-subscribe button:hover { background:var(--orange-600); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; text-align:center; font-size:13px; color: rgba(255,255,255,.45); }
@media (max-width: 760px){ .footer-grid { grid-template-columns: 1fr 1fr; gap:32px; } }

/* ============================================================
   MODAL (auth + confirms)
   ============================================================ */
.modal-scrim {
  position: fixed; inset:0; z-index: 300; background: rgba(10,14,20,.6); backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center; padding: 24px;
  opacity:0; transition: opacity .2s ease;
}
.modal-scrim.open { display:flex; opacity:1; }
.modal {
  background:#fff; border-radius: 20px; width:100%; max-width: 440px; box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98); transition: transform .24s cubic-bezier(.34,1.4,.4,1); overflow:hidden;
  max-height: calc(100vh - 48px); overflow-y:auto;
}
.modal-scrim.open .modal { transform: none; }
.modal-head { padding: 28px 28px 0; position: relative; }
.modal-head .mclose { position:absolute; top:18px; right:18px; background: var(--bg-soft); border:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color: var(--ink-500); transition: all .14s; }
.modal-head .mclose:hover { background: var(--ink-900); color:#fff; }
.modal-head .mclose svg { width:18px; height:18px; }
.modal-body { padding: 18px 28px 28px; }
.modal-tabs { display:flex; gap:6px; background: var(--bg-soft); padding:5px; border-radius:12px; margin-bottom: 22px; }
.modal-tabs button { flex:1; border:none; background:none; font-weight:700; font-size:14px; color: var(--ink-500); padding:10px; border-radius:9px; transition: all .15s; }
.modal-tabs button.on { background:#fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.modal-divider { display:flex; align-items:center; gap:12px; color: var(--ink-400); font-size:12.5px; margin: 20px 0; }
.modal-divider::before, .modal-divider::after { content:""; flex:1; height:1px; background: var(--line); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-wrap { position: fixed; bottom: 26px; left:50%; transform: translateX(-50%); z-index: 500; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast {
  display:flex; align-items:center; gap:11px; background: var(--ink-900); color:#fff;
  padding: 13px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); font-weight:600; font-size:14px;
  transform: translateY(20px); opacity:0; transition: all .3s cubic-bezier(.34,1.3,.4,1);
}
.toast.show { transform:none; opacity:1; }
.toast svg { width:19px; height:19px; flex:none; }
.toast.ok svg { color: #4ade80; }
.toast.warn svg { color: var(--orange); }
.toast.bad svg { color:#fb7185; }

/* ============================================================
   MISC
   ============================================================ */
.divider { height:1px; background: var(--line); border:0; margin: 0; }
.kicker-num { font-stretch:125%; font-weight:900; font-size: clamp(40px,6vw,72px); color: var(--orange); line-height:1; }
.fade-up { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in { opacity:1; transform:none; }

.empty-state { text-align:center; padding: 70px 24px; color: var(--ink-500); }
.empty-state .es-ic { width:64px; height:64px; border-radius:18px; background: var(--bg-soft); display:grid; place-items:center; margin:0 auto 18px; color: var(--ink-400); }
.empty-state .es-ic svg { width:30px; height:30px; }
.empty-state h3 { color: var(--ink-800); margin-bottom:6px; }

.skeleton { background: linear-gradient(90deg,#eef0f3 25%,#f6f7f9 50%,#eef0f3 75%); background-size:200% 100%; animation: shimmer 1.4s infinite; border-radius:8px; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* ---- Admin bars: graceful wrap on small screens ---- */
@media (max-width: 760px) {
  .admin-bar { flex-wrap: wrap; row-gap: 10px; }
  .admin-nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-user { margin-left: auto; }
  .admin-user > span { display: none; }   /* keep avatar + logout link, drop the name/role text */
}

/* ============================================================
   AD CREATIVES (native ads rendered from data)
   ============================================================ */
.ad-creative { position:relative; border-radius: var(--radius); overflow:hidden; color:#fff; isolation:isolate; }
.ad-creative .ad-flag { position:absolute; top:10px; right:10px; z-index:2; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); color:#fff; padding:3px 8px; border-radius:6px; }
.ad-creative .ad-inner { position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.ad-brand { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.ad-eyebrow { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:2px; }
.ad-headline { font-stretch:110%; font-weight:800; line-height:1.16; text-wrap:balance; }
.ad-sub { font-size:13.5px; line-height:1.45; font-weight:500; max-width:34ch; }
.ad-logo { height:30px; width:auto; max-width:120px; object-fit:contain; margin-bottom:4px; border-radius:4px; }
.ad-cta { display:inline-flex; align-items:center; align-self:flex-start; gap:6px; color:#10141a; font-weight:800; border-radius:999px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.ad-inner[style*="center"] .ad-cta { align-self:center; }

/* in-feed card (≈300×250, fills grid cell) */
.ad-infeed { min-height:300px; }
.ad-infeed .ad-inner { padding:22px; justify-content:flex-end; gap:12px; font-size:21px; }
.ad-infeed .ad-cta { padding:10px 16px; font-size:13.5px; }

/* leaderboard (wide banner) */
.ad-leaderboard { aspect-ratio: 970/250; width:100%; }
.ad-leaderboard .ad-inner { padding:30px 40px; justify-content:center; gap:14px; max-width:62%; font-size:clamp(22px,3vw,34px); }
.ad-leaderboard .ad-brand { font-size:13px; }
.ad-leaderboard .ad-cta { padding:12px 22px; font-size:15px; }
@media (max-width:640px){ .ad-leaderboard { aspect-ratio:728/220; } .ad-leaderboard .ad-inner { max-width:90%; padding:22px; } }

/* sidebar (300×600 half-page) */
.ad-sidebar { aspect-ratio:300/600; }
.ad-sidebar .ad-inner { padding:26px; justify-content:flex-end; gap:14px; font-size:24px; }
.ad-sidebar .ad-cta { padding:11px 18px; font-size:14px; }

/* detail banner (728×90) */
.ad-detail { aspect-ratio:728/90; }
.ad-detail .ad-inner { padding:0 26px; flex-direction:row; align-items:center; gap:18px; font-size:17px; }
.ad-detail .ad-brand { display:none; }
.ad-detail .ad-sub, .ad-detail .ad-logo, .ad-detail .ad-eyebrow { display:none; }
.ad-leaderboard .ad-sub { font-size:15px; max-width:46ch; }
.ad-sidebar .ad-sub { font-size:14px; }
.ad-detail .ad-headline { flex:1; }
.ad-detail .ad-cta { padding:9px 16px; font-size:13px; }

/* split layout: image one side, text panel the other */
.ad-creative.is-split { overflow:hidden; }
.ad-split { display:flex; height:100%; width:100%; }
.ad-split-img { flex:1; background-size:cover; background-position:center; min-height:100%; }
.ad-split-text { flex:1; display:flex; }
.ad-split-text .ad-inner { height:100%; }
.ad-sidebar.is-split .ad-split, .ad-infeed.is-split .ad-split { flex-direction:column; }
.ad-sidebar.is-split .ad-split-img, .ad-infeed.is-split .ad-split-img { min-height:46%; }
.ad-leaderboard.is-split .ad-split-img { flex:0 0 42%; }

/* tiny thumbnail (dashboard list) */
.ad-thumb { width:74px; height:56px; border-radius:9px; flex:none; background-size:cover; background-position:center; display:grid; place-items:center; color:#fff; font-weight:800; font-size:10px; text-align:center; padding:4px; line-height:1.1; overflow:hidden; }

/* sponsored wrapper used in the review grid */
.sponsored-cell { display:flex; flex-direction:column; }
.sponsored-cell .ad-creative { flex:1; }

/* ============================================================
   REGISTRATION GATE
   ============================================================ */
.gate-wrap { position:relative; }
.gate-blur { filter: blur(7px); pointer-events:none; user-select:none; opacity:.6; }
.gate-overlay { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:90px; background:linear-gradient(180deg, rgba(246,247,249,.4) 0%, rgba(246,247,249,.92) 38%, var(--bg-soft) 100%); z-index:5; }
.gate-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:40px; max-width:480px; text-align:center; }
.gate-card .gate-ic { width:64px; height:64px; border-radius:18px; background:var(--ink-900); color:#fff; display:grid; place-items:center; margin:0 auto 20px; }
.gate-card .gate-ic svg { width:30px; height:30px; }
.gate-card h2 { font-size:28px; }
.gate-card p { color:var(--ink-600); margin:12px 0 24px; }
.gate-perks { display:flex; flex-direction:column; gap:10px; text-align:left; margin:0 0 26px; }
.gate-perks li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-700); }
.gate-perks li svg { width:18px; height:18px; color:var(--green); flex:none; margin-top:2px; }

/* ============================================================
   PRINT (advertiser report)
   ============================================================ */
@media print {
  .no-print { display:none !important; }
  body { background:#fff !important; }
  .report-page { box-shadow:none !important; margin:0 !important; border:none !important; }
  @page { margin: 14mm; }
}

/* ============================================================
   RESOURCE PAGES (hiring guide / checklist / red flags)
   ============================================================ */
.rsc-head { background: var(--ink-900); color:#fff; padding: 96px 0 64px; position:relative; overflow:hidden; }
.rsc-head::after { content:""; position:absolute; right:-90px; top:-90px; width:380px; height:380px; border-radius:50%; background: radial-gradient(circle, rgba(255,107,0,.18), transparent 70%); }
.rsc-head .rsc-ic { width:60px; height:60px; border-radius:16px; display:grid; place-items:center; margin-bottom:20px; }
.rsc-head .rsc-ic svg { width:30px; height:30px; }
.rsc-head h1 { font-size: clamp(32px,5vw,52px); }
.rsc-head p { color: rgba(255,255,255,.74); max-width: 560px; font-size:17px; margin-top:14px; }
.rsc-body { padding: 56px 0 40px; }
.rsc-body .wrap { max-width: 820px; }
.rsc-block { margin-bottom: 40px; }
.rsc-block:last-child { margin-bottom:0; }
.rsc-block h2 { font-size: clamp(22px,3vw,28px); margin-bottom: 14px; }
.rsc-block p { color: var(--ink-600); font-size:16px; line-height:1.7; margin:0 0 14px; }
.rsc-num { display:flex; align-items:flex-start; gap:16px; padding: 18px 0; border-top:1px solid var(--line); }
.rsc-num:first-of-type { border-top:none; }
.rsc-num .n { flex:none; width:34px; height:34px; border-radius:10px; background:var(--ink-900); color:#fff; display:grid; place-items:center; font-stretch:125%; font-weight:900; font-size:15px; }
.rsc-num h3 { font-size:18px; margin:3px 0 6px; }
.rsc-num p { margin:0; font-size:15px; }
/* check / flag list rows */
.rsc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.rsc-list li { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow-sm); }
.rsc-list li .li-ic { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; margin-top:1px; }
.rsc-list li .li-ic svg { width:16px; height:16px; }
.rsc-list li .li-ic.ok { background:var(--green-bg); color:var(--green); }
.rsc-list li .li-ic.warn { background:var(--red-bg); color:var(--red); }
.rsc-list li h3 { font-size:16px; margin:0 0 3px; }
.rsc-list li p { font-size:14px; color:var(--ink-600); margin:0; line-height:1.55; }
.rsc-tip { background:var(--orange-50); border:1px solid var(--orange-100); border-radius:14px; padding:20px 22px; display:flex; gap:14px; align-items:flex-start; }
.rsc-tip .t-ic { flex:none; color:var(--orange); } .rsc-tip .t-ic svg { width:22px; height:22px; }
.rsc-tip p { margin:0; font-size:14.5px; color:var(--ink-700); line-height:1.6; }
.rsc-tip b { color:var(--ink); }
.rsc-cta { background:var(--bg-soft); border-top:1px solid var(--line); padding: 48px 0; text-align:center; }
.rsc-cta h2 { font-size: clamp(24px,3vw,32px); }
.rsc-cta p { color:var(--ink-600); max-width:480px; margin:12px auto 24px; }
.prof-warn { display:none; align-items:flex-start; gap:11px; background:var(--red-bg); border:1px solid #f3c0bb; border-radius:12px; padding:14px 16px; margin-top:14px; font-size:13.5px; color:#9a2820; line-height:1.55; }
.prof-warn.show { display:flex; }
.prof-warn > div:first-child { line-height:0; }
.prof-warn svg { width:18px; height:18px; flex:none; margin-top:1px; color:var(--red); }
.prof-warn b { color:var(--red); }
.prof-warn .pw-actions { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.prof-warn button { font-size:12.5px; font-weight:700; border-radius:8px; padding:7px 13px; border:1.5px solid var(--red); background:#fff; color:var(--red); }
.prof-warn button.fix { background:var(--red); color:#fff; }
.prof-warn button:hover { opacity:.9; }

.reviewing-banner { display:flex; align-items:center; gap:13px; background:var(--orange-50); border:1px solid var(--orange-100); border-radius:var(--radius); padding:15px 18px; margin-bottom:22px; }
.reviewing-banner .rb-ic { width:40px; height:40px; border-radius:11px; background:#fff; color:var(--orange); display:grid; place-items:center; flex:none; box-shadow:var(--shadow-sm); }
.reviewing-banner .rb-ic svg { width:20px; height:20px; }
.reviewing-banner .rb-l { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-700); font-weight:800; }
.reviewing-banner .rb-n { font-stretch:110%; font-weight:800; font-size:18px; color:var(--ink); }
.reviewing-banner a { margin-left:auto; font-size:13px; font-weight:700; color:var(--ink-600); }
.reviewing-banner a:hover { color:var(--ink); }