@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------------------------------------------------------------------------
   Colour system: logo teal, slate, white.
   Brand teal = every primary action. Green = money moves. Blue = freelance
   accent. Amber/red = warning and error only. The logo itself is #0097b2;
   solids use a deeper shade of it so white button text stays readable.
   *-text variants exist because a colour light enough to read on the dark
   theme is too light to carry white button text. Solids use the base token,
   text on a tinted background uses the *-text token.
--------------------------------------------------------------------------- */
:root{
  color-scheme:light;   /* native controls, scrollbars and autofill follow the theme */
  --bg:#ffffff; --bg-2:#f5f7f8; --card:#ffffff; --card-2:#f4f6f7;
  --border: rgba(15,23,30,0.10); --border-strong: rgba(15,23,30,0.16);
  --fg:#0f1c24; --muted:#52606b; --muted-2:#5f6b75; /* 5.5:1 on white, 5.0:1 on card-2 */
  --field-border:#808b94; /* form field edges: 3.2:1 or more on every light surface */
  --brand:#007a91; --brand-hover:#00677a; --brand-text:#00768c; /* deeper logo teal: white text 5.0:1; teal text 4.7:1 on the teal tint */
  --brand-bg: rgba(0,151,178,0.10); --brand-bg-strong: rgba(0,151,178,0.20);
  --freelance:#1d4ed8; --freelance-text:#1d4ed8; /* white text 6.7:1 */
  --freelance-bg: rgba(37,99,235,0.10); --freelance-bg-strong: rgba(37,99,235,0.20);
  --green:#047857; --green-hover:#065f46; --green-text:#047857; /* pay button 5.5:1 (was #059669, 3.8:1) */
  --green-bg: rgba(5,150,105,0.10);
  --amber-text:#a8490a; /* 5.1:1 on the amber tint, 5.8:1 on white */ --amber-bg: rgba(217,119,6,0.12);
  --red:#dc2626; --red-hover:#b91c1c; --red-text:#b91c1c; --red-bg: rgba(220,38,38,0.10);
  --neutral-bg:#eff2f4; --neutral-text:#46535d;
  --shadow-card: 0 1px 2px rgba(15,23,30,0.05);
  --shadow-btn: 0 1px 2px rgba(15,23,30,0.10);
  --radius:20px;
  --star:#b7791f; /* rating stars: 3.6:1 on white */
  --loader-bg: rgba(255,255,255,0.55);
}
html.dark{
  color-scheme:dark;
  --bg:#1B1F23; --bg-2:#1F2429; --card:#23282E; --card-2:#2A3037; /* neutral charcoal */
  --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.17);
  --fg:#eef2f4; --muted:#a3adb5; --muted-2:#939ea7; /* 4.9:1 on card-2 */
  --field-border:#737e88; /* 3.2:1 or more on every dark surface */
  --brand:#007a91; --brand-hover:#0089a3; --brand-text:#4fc6dc;
  --brand-bg: rgba(0,151,178,0.18); --brand-bg-strong: rgba(0,151,178,0.28);
  --freelance:#1d4ed8; --freelance-text:#60a5fa;
  --freelance-bg: rgba(96,165,250,0.14); --freelance-bg-strong: rgba(96,165,250,0.24);
  --green:#047857; --green-hover:#059669; --green-text:#34d399;
  --green-bg: rgba(52,211,153,0.14);
  --amber-text:#fbbf24; --amber-bg: rgba(251,191,36,0.14);
  --red:#dc2626; --red-hover:#ef4444; --red-text:#f87171; --red-bg: rgba(248,113,113,0.14);
  --neutral-bg: rgba(255,255,255,0.07); --neutral-text:#c3ccd2;
  --shadow-card: none;
  --shadow-btn: none;
  --star:#d69e0b;
  --loader-bg: rgba(27,31,35,0.55);
}
*{box-sizing:border-box}
html,body{ margin:0; padding:0; }
/* Anchor jumps, scrollIntoView and keyboard focus stop below the sticky
   header (75px, 105px once the links wrap to a second row) instead of
   under it. */
html{ scroll-padding-top:90px; }
@media (max-width:900px){ html{ scroll-padding-top:120px; } }
body{
  background: var(--bg);
  color:var(--fg); font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; transition: background-color .3s, color .3s;
}
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.dollar{ font-weight:900; color:var(--fg); font-size:1.08em; margin-right:1px; }
.dollar.pay{ color:var(--green-text); }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.ico{ display:inline-block; vertical-align:-3px; flex:none; }
:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; }

/* ---------- header ---------- */
/* hidden until it has keyboard focus, then shown over the top-left corner */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:70; padding:10px 16px; border-radius:11px; background:var(--brand); color:#fff; font-size:14px; font-weight:700; }
.skip-link:focus{ top:12px; }
main:focus{ outline:none; }
header.site{ position:sticky; top:0; z-index:60; background: var(--card); border-bottom:1px solid var(--border); }
/* The header is drawn once the session is known; hold its height until then
   so the page doesn't jump down when it appears. */
header.site:empty{ min-height:75px; }
@media (max-width:900px){ header.site:empty{ min-height:105px; } }
.navrow{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-0.02em; color:var(--fg); }
.brand .ico{ color:var(--brand-text); }
.brand .brand-mark .ico{ color:#fff; }
.brand-mark{ width:34px; height:34px; border-radius:11px; background:#0097b2; /* logo teal, same in both themes */ display:flex; align-items:center; justify-content:center; color:#f6f4f1; font-weight:800; font-size:15px; }
nav.links{ display:flex; gap:26px; font-size:14.5px; font-weight:600; color:var(--muted); }
nav.links a.active, nav.links a:hover{ color:var(--brand-text); }
.navactions{ display:flex; align-items:center; gap:10px; }
.icon-btn{ width:40px; height:40px; border-radius:11px; border:1px solid var(--border-strong); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--fg); position:relative; }
.notif-badge{ position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; font-size:11px; font-weight:800; border-radius:100px; min-width:19px; height:19px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg); }

/* ---------- icon chip ----------
   The rounded tile behind an icon. This is the default size; the rules for
   particular places (.empty-state, .trust-card, .db-stat, ...) come after it
   and win. Without it, a chip in a panel no rule names (the booking box on a
   freelance listing, "Request sent" on a quest) stretched into a thin bar. */
.ic-chip{ width:48px; height:48px; border-radius:14px; background:var(--brand-bg); color:var(--brand-text); display:flex; align-items:center; justify-content:center; flex:none; }

/* ---------- notification centre ---------- */
.notif-item{ display:flex; gap:14px; align-items:flex-start; padding:16px 4px; border-bottom:1px solid var(--border); }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background:var(--brand-bg); border-radius:12px; padding:16px 14px; margin:2px 0; border-bottom:none; }
.notif-item .ic-chip{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.notif-item-body{ flex:1; min-width:0; }
.notif-item-body .n-title{ font-weight:800; font-size:13.5px; margin-bottom:2px; }
.notif-item-body .n-msg{ font-size:13px; color:var(--muted); line-height:1.5; white-space:pre-line; }   /* keeps the line breaks in announcements */
.notif-item-body .n-time{ font-size:12px; color:var(--muted-2); margin-top:6px; }
.notif-remove{ padding:0; font:inherit; flex:none; width:30px; height:30px; border-radius:9px; border:1px solid var(--border-strong); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); }
.notif-remove:hover{ color:var(--red-text); border-color:var(--red-text); }

/* ---------- confirm modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-box{ background:var(--card); border:1px solid var(--border-strong); border-radius:18px; padding:24px; max-width:380px; width:100%; }
.modal-box h4{ margin:0 0 8px; font-size:16px; }
.modal-box p{ margin:0 0 20px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.modal-actions{ display:flex; gap:10px; }
.modal-actions .btn{ flex:1; justify-content:center; }
.btn{ font-size:14px; font-weight:600; padding:10px 18px; min-height:44px; border-radius:11px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font-family:inherit; }
.btn-ghost{ border-color:var(--border-strong); background:var(--card); color:var(--fg); }
.btn-outline{ border:1px solid var(--border-strong); background:var(--card); color:var(--fg); }
.btn-outline:hover{ border-color:var(--brand-text); color:var(--brand-text); }
/* primary: every ordinary action on the site */
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-btn); }
.btn-primary:hover{ background:var(--brand-hover); }
/* pay: reserved for surfaces where real money moves */
.btn-pay{ background:var(--green); color:#fff; box-shadow:var(--shadow-btn); }
.btn-pay:hover{ background:var(--green-hover); }
/* danger: outlined on the page, solid only inside a confirm dialog */
.btn-danger{ background:var(--card); color:var(--red-text); border-color:var(--red-text); }
.btn-danger:hover{ background:var(--red-bg); }
.btn-danger-solid{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-danger-solid:hover{ background:var(--red-hover); }
.btn-lg{ font-size:15.5px; padding:15px 26px; border-radius:14px; }

/* ---------- hero / sections ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--neutral-bg); border:1px solid var(--border); padding:7px 13px; border-radius:100px; }
section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.section-head h2{ font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; }
.section-head p{ color:var(--muted); font-size:15px; max-width:520px; margin:0; }
.kicker{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text); margin-bottom:10px; }
.page-hero{ padding:44px 0 30px; }
.page-hero h1{ font-size:38px; font-weight:800; letter-spacing:-0.02em; margin:14px 0 10px; }
.page-hero p{ color:var(--muted); font-size:16px; max-width:600px; margin:0; }

/* ---------- tabbar / chips ---------- */
.tabbar{ display:inline-flex; gap:6px; padding:6px; border-radius:14px; background:var(--card); border:1px solid var(--border); margin-bottom:26px; flex-wrap:wrap; }
.tab{ padding:10px 18px; border-radius:10px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; border:0; background:none; font-family:inherit; }
.tab.active{ background:var(--brand); color:#fff; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.chip{ font-size:13px; font-weight:600; padding:8px 14px; border-radius:100px; border:1px solid var(--border-strong); background:var(--card); color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.chip.active{ background:var(--brand); color:#fff; border-color:var(--brand-text); }

/* ---------- cards ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:940px){ .cards-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:660px){ .cards-grid{ grid-template-columns:1fr; } }

.qcard{ position:relative; border-radius:18px; border:1px solid var(--border); background:var(--card); padding:20px; padding-left:24px; overflow:hidden; display:flex; flex-direction:column; height:100%; box-shadow:var(--shadow-card); }
.qcard.c-quest::before{ background:var(--brand); }
.qcard.c-freelance::before{ background:var(--freelance); }
.qcard.c-jobs::before{ background:var(--border-strong); }
.qcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.qcard-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.qcard-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 10px; border-radius:100px; }
.qcard-badge.c-quest{ background:var(--brand-bg); color:var(--brand-text); }
.qcard-badge.c-freelance{ background:var(--freelance-bg); color:var(--freelance-text); }
.qcard-badge.c-jobs{ background:var(--neutral-bg); color:var(--neutral-text); }
.qcard-fav{ width:32px; height:32px; border-radius:10px; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--muted-2); flex:none; background:var(--card); cursor:pointer; }
.qcard-fav.saved{ color:var(--brand-text); border-color:var(--brand-bg-strong); background:var(--brand-bg); }
.qcard-avatar{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; margin-bottom:12px; font-size:14px; }
.qcard h3{ font-size:16px; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em; }
.qcard .sub{ font-size:12.5px; color:var(--muted-2); margin-bottom:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.qcard p.desc{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 16px; flex:1; }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
/* metadata pills are deliberately uniform so the title and the pay figure lead */
.pill{ font-size:12px; font-weight:700; padding:6px 11px; border-radius:100px; display:inline-flex; align-items:center; gap:5px; background:var(--neutral-bg); color:var(--neutral-text); }
.qcard-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border); }
.qcard-foot .view{ font-size:13px; font-weight:700; color:var(--muted); }
.qcard-foot .apply{ font-size:13px; font-weight:600; padding:9px 15px; border-radius:10px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; gap:6px; }

/* ---------- buttons / forms ---------- */
.card-panel{ border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:26px; }
.field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin:0 0 6px; }
/* 16px text so phones don't zoom the page when a field is tapped; a
   3:1 edge so the field is visible without relying on its fill. */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],input[type=date],input[type=datetime-local],textarea,select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--field-border);
  background:var(--card); color:var(--fg); font-family:inherit; font-size:16px; margin-bottom:16px;
}
::placeholder{ color:var(--muted-2); opacity:1; }
input[readonly]{ background:var(--card-2); color:var(--muted); cursor:default; }
textarea{ min-height:110px; resize:vertical; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.radio-opt{ border:1px solid var(--border-strong); background:var(--card-2); padding:10px 16px; border-radius:12px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.radio-opt.active{ border-color:var(--brand-text); color:var(--brand-text); background:var(--brand-bg); }
button.radio-opt{ font-family:inherit; line-height:inherit; }
/* a tick on the chosen option, so the choice doesn't rest on colour alone */
.radio-opt.active::before{ content:""; display:inline-block; width:14px; height:14px; margin:0 6px -2px 0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- misc reusable blocks ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step-card{ border:1px solid var(--border); background:var(--card); border-radius:16px; padding:22px; }
.step-card .idx{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--muted-2); margin-bottom:12px; }
.step-card h4{ font-size:15px; font-weight:800; margin:0 0 8px; }
.step-card p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-card{ border:1px solid var(--border); background:var(--card); border-radius:16px; padding:22px; }
.trust-card .ic-chip{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }

table.fees{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
table.fees th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; padding:13px 16px; background:var(--card-2); border-bottom:1px solid var(--border); }
table.fees td{ padding:14px 16px; font-size:13.5px; border-bottom:1px solid var(--border); background:var(--card); }
table.fees tr:last-child td{ border-bottom:none; }
table.fees .rate{ font-weight:800; font-family:'JetBrains Mono',monospace; }   /* money and percentages only */

.banner{ border-radius:20px; padding:34px 36px; background:var(--brand-bg); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.banner h3{ font-size:20px; margin:0 0 6px; font-weight:800; }
.banner p{ margin:0; color:var(--muted); font-size:14px; max-width:460px; }

footer.site{ border-top:1px solid var(--border); padding:40px 0; margin-top:16px; }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-links{ display:flex; gap:22px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.foot-note{ font-size:12px; color:var(--muted-2); margin-top:16px; }
.foot-note.tight{ margin-top:6px; }
/* Social logos, the last row of the footer. Muted like the notes, teal on
   hover. The negative margin lines the first logo up with the text above. */
.foot-social{ display:flex; gap:4px; margin:14px 0 0 -10px; }
.foot-social a{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:var(--muted); transition:color .15s, background .15s; }
.foot-social a:hover{ color:var(--brand-text); background:var(--brand-bg); }
/* Phones: links in a tidy 3-column grid with 44px tap rows, and the notes
   spaced out so they read as separate lines, not one block. */
@media (max-width:600px){
  .foot-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 12px; width:100%; }
  .foot-links a{ min-height:44px; display:flex; align-items:center; }
  .foot-note, .foot-note.tight{ font-size:12.5px; line-height:1.55; margin-top:12px; }
  .foot-social a{ width:44px; height:44px; }
}

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state .empty-title, .empty-state h4{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--fg); letter-spacing:-0.01em; }
.empty-state p{ margin:0 auto; max-width:440px; line-height:1.55; }
.empty-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin-top:20px; }
.empty-actions .save-search{ min-height:44px; padding:10px 16px; }
.empty-state .ic-chip{ width:56px; height:56px; border-radius:16px; background:var(--brand-bg); color:var(--brand-text); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }

.badge-role{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:100px; background:var(--brand-bg); color:var(--brand-text); }

.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--fg); color:var(--bg); font-size:13.5px; font-weight:700; padding:13px 20px; border-radius:100px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:100; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.two-col{ display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.code-display{ display:flex; gap:8px; margin:14px 0 20px; }
/* six empty completion-code slots (codeSlots() in app.js) */
.code-slots{ display:inline-flex; gap:6px; }
.code-slots span{ width:22px; height:28px; border-radius:7px; border:1.5px solid var(--field-border); background:var(--card); }
.code-slots.sm span{ width:16px; height:20px; border-radius:5px; }

/* loading cards on the boards: grey placeholder lines */
.skeleton{ pointer-events:none; gap:10px; }
.skeleton .sk{ display:block; height:11px; border-radius:6px; background:var(--card-2); }
.skeleton .sk.t{ height:16px; width:80%; }
.skeleton .sk.w40{ width:40%; } .skeleton .sk.w60{ width:60%; } .skeleton .sk.w90{ width:90%; }
.skeleton .sk{ animation:sk-pulse 1.6s ease-in-out infinite; }
@keyframes sk-pulse{ 50%{ opacity:.5; } }
@media (prefers-reduced-motion: reduce){ .skeleton .sk{ animation:none; } }
.code-display span{ flex:1; text-align:center; font-size:22px; font-weight:700; padding:12px 0; border-radius:11px; border:1px solid var(--border-strong); background:var(--card-2); font-family:'JetBrains Mono',monospace; }

/* ---------- search bar ---------- */
.search-bar{ display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); background:var(--card); border-radius:14px; padding:12px 16px; margin-bottom:20px; color:var(--muted-2); max-width:440px; }
.search-bar input{ border:none; background:transparent; margin:0; padding:0; font-size:16px; color:var(--fg); flex:1; }
.search-bar input:focus{ outline:none; }

/* ---------- filter toolbar ---------- */
.board-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.board-toolbar .search-bar{ max-width:none; }
.filter-toggle-btn{ display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); background:var(--card); border-radius:14px; padding:12px 18px; font-weight:600; font-size:13.5px; color:var(--fg); cursor:pointer; white-space:nowrap; }
.filter-toggle-btn:hover{ border-color:var(--brand-text); }
.filter-toggle-btn.active{ border-color:var(--brand-text); color:var(--brand-text); background:var(--brand-bg); }
.filter-count{ background:var(--brand); color:#fff; font-size:12px; font-weight:800; border-radius:100px; padding:1px 6px; }
.filter-panel{ display:none; }
.filter-panel.open{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; border:1px solid var(--border-strong); background:var(--card-2); border-radius:14px; padding:18px; margin-bottom:20px; }
.filter-field label, .filter-field .filter-spacer{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); font-weight:700; margin-bottom:7px; }
.filter-field select, .filter-field input{ margin:0; }
.filter-actions .btn{ padding:12px 18px; }

/* ---------- card thumbnail ---------- */
.qcard-thumb{ width:calc(100% + 40px); margin:-20px -20px 0 -20px; height:120px; background-size:cover; background-position:center; border-bottom:1px solid var(--border); }
.qcard-thumb + .qcard-top{ margin-top:16px; }

/* ---------- image gallery (detail pages) ---------- */
.img-gallery{ display:grid; gap:8px; margin-bottom:20px; }
.img-gallery button{ position:relative; display:block; width:100%; padding:0; border:1px solid var(--border); border-radius:14px; background-color:var(--card-2); background-size:cover; background-position:center; cursor:zoom-in; overflow:hidden; }
.img-gallery button::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .15s ease; }
.img-gallery button:hover::after{ background:rgba(0,0,0,.08); }
.img-gallery-main{ aspect-ratio:16/10; max-height:420px; }
.img-gallery-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.img-gallery .img-gallery-thumb{ aspect-ratio:1/1; border-radius:10px; }
.img-gallery-count{ position:absolute; right:10px; bottom:10px; z-index:1; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:100px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:700; }
.img-gallery-more{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); color:#fff; font-size:18px; font-weight:800; }

/* ---------- photo viewer (opens over the page; always dark) ---------- */
.pv{ position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; background:rgba(8,10,12,.94); color:#fff; }
.pv-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top)); }
.pv-count{ font-size:13.5px; font-weight:700; color:rgba(255,255,255,.85); }
.pv-stage{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 72px; touch-action:pinch-zoom; }
.pv-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pv-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:100px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.pv-btn:hover{ background:rgba(255,255,255,.26); }
.pv :focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.pv-prev, .pv-next{ position:absolute; top:50%; transform:translateY(-50%); }
.pv-prev{ left:16px; }
.pv-next{ right:16px; }
.pv-prev svg{ transform:scaleX(-1); }
.pv-caption{ margin:0; padding:10px 16px 0; text-align:center; font-size:13.5px; color:rgba(255,255,255,.85); }
.pv-caption:empty{ display:none; }
.pv-strip{ display:flex; gap:8px; overflow-x:auto; padding:12px 16px; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
.pv-strip > :first-child{ margin-left:auto; }
.pv-strip > :last-child{ margin-right:auto; }
.pv-thumb{ flex:0 0 auto; width:56px; height:56px; padding:0; border:2px solid transparent; border-radius:8px; background-color:rgba(255,255,255,.08); background-size:cover; background-position:center; opacity:.55; cursor:pointer; }
.pv-thumb:hover{ opacity:.85; }
.pv-thumb[aria-current="true"]{ opacity:1; border-color:#fff; }
@media (max-width:640px){
  .pv-stage{ padding:0; }
  .pv-prev, .pv-next{ width:40px; height:40px; background:rgba(0,0,0,.45); }
  .pv-prev{ left:8px; }
  .pv-next{ right:8px; }
  .pv-img{ border-radius:0; }
}
@media (prefers-reduced-motion: no-preference){
  .pv{ animation:pv-in .16s ease-out; }
}
@keyframes pv-in{ from{ opacity:0; } }

/* ---------- image upload widget ---------- */
.img-upload-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.img-upload-thumb{ position:relative; width:92px; height:92px; border-radius:12px; background-size:cover; background-position:center; border:1px solid var(--border-strong); }
.img-upload-remove{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--fg); color:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.img-upload-add{ width:92px; height:92px; border-radius:12px; border:1.5px dashed var(--border-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--muted); cursor:pointer; font-size:12px; font-weight:700; text-align:center; }
.img-upload-add:hover{ border-color:var(--brand-text); color:var(--brand-text); }
button.img-upload-add, button.img-upload-remove, button.doc-file-remove, button.star-pick{ font-family:inherit; padding:0; }
button.img-upload-add{ background:none; }
button.img-upload-remove, button.doc-file-remove{ border:0; }
button.star-pick{ border:0; background:none; min-width:32px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; }
.doc-upload-box:focus-visible, .camera-box:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; }
.img-upload-hint{ font-size:12px; color:var(--muted-2); margin:0 0 16px; }
.img-upload-hint.warn{ color:var(--amber-text); font-weight:700; }

/* ---------- document upload (ID / proof of address / employer guarantee) ---------- */
.doc-upload-box{ border:1.5px dashed var(--border-strong); border-radius:14px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-align:center; color:var(--muted); font-size:12.5px; font-weight:700; margin-bottom:18px; min-height:100px; }
.doc-upload-box:hover{ border-color:var(--brand-text); color:var(--brand-text); }
.doc-upload-box.has-file{ border-style:solid; border-color:var(--green); cursor:default; padding:14px 16px; }
.doc-upload-box .ic-chip{ width:34px; height:34px; border-radius:10px; background:var(--brand-bg); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
.doc-file-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; }
.doc-file-info{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.doc-file-info b{ font-size:13px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-file-info span{ font-size:12px; color:var(--muted-2); font-weight:600; }
.doc-file-remove{ width:26px; height:26px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; color:var(--muted); }
.doc-file-remove:hover{ background:var(--red-bg); color:var(--red-text); }

/* ---------- signup stepper ---------- */
.step-track{ display:flex; align-items:center; gap:6px; margin-bottom:24px; }
.step-track .step-dot{ flex:1; height:4px; border-radius:100px; background:var(--border-strong); }
.step-track .step-dot.done{ background:var(--brand); }
.step-track .step-dot.current{ background:var(--brand); }
.step-label{ font-size:12px; font-weight:700; color:var(--brand-text); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.step-nav{ display:flex; gap:10px; margin-top:4px; }
.step-nav .btn{ flex:1; justify-content:center; }
.proof-type-row{ display:flex; gap:10px; margin-bottom:16px; }
.proof-type-row .chip{ flex:1; text-align:center; }
.star-row{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ color:var(--border-strong); }
.star-pick{ color:var(--field-border); }
.star.filled{ color:var(--amber-text); }
.star-pick{ cursor:pointer; }

/* ---------- social links ---------- */
.social-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.social-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); background:var(--card-2); border-radius:12px; padding:10px 12px; flex:1; min-width:220px; }
.social-item .ic-chip{ width:30px; height:30px; border-radius:9px; background:var(--brand-bg); color:var(--brand-text); display:flex; align-items:center; justify-content:center; flex:none; }
.social-item input{ margin:0; padding:8px 0; border:none; background:transparent; font-size:16px; }
.social-item input:focus{ outline:none; }

/* ---------- admin table ---------- */
table.admin-table{ width:100%; border-collapse:collapse; }
table.admin-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); }
table.admin-table td{ padding:12px; font-size:13.5px; border-bottom:1px solid var(--border); }
table.admin-table select{ margin:0; padding:7px 10px; font-size:12.5px; width:auto; }
.act-details summary{ cursor:pointer; font-size:12px; font-weight:700; color:var(--muted); margin-top:6px; }
.act-details table.admin-table td{ padding:6px 10px; font-size:12.5px; word-break:break-word; }
.admin-main .acct-toolbar select, .admin-main .acct-toolbar input[type=date]{ margin:0; width:auto; padding:7px 10px; font-size:12.5px; }
/* compact admin controls go back to 16px on phones so tapping one doesn't zoom the page */
@media (max-width:900px){ table.admin-table select, .admin-main .acct-toolbar select, .admin-main .acct-toolbar input[type=date]{ font-size:16px; } }

/* ---------- account application detail (admin) ---------- */
.app-detail{ background:var(--card-2); border-radius:12px; padding:16px; margin:0 0 14px; }
.app-doc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
.app-doc-row:last-child{ border-bottom:none; }
.app-doc-label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); font-weight:700; flex:none; }
.app-doc-link{ display:flex; align-items:center; gap:8px; color:var(--brand-text); font-weight:700; text-decoration:none; }
.app-doc-link i{ color:var(--muted-2); font-style:normal; font-weight:600; }
.app-doc-thumb{ width:28px; height:28px; border-radius:7px; background-size:cover; background-position:center; border:1px solid var(--border-strong); flex:none; }
.app-doc-thumb-file{ display:flex; align-items:center; justify-content:center; background:var(--brand-bg); color:var(--brand-text); }
.status-pill{ font-size:12px; font-weight:700; padding:5px 10px; border-radius:100px; display:inline-block; }
.status-pill.applied{ background:var(--neutral-bg); color:var(--neutral-text); }
.status-pill.reviewing{ background:var(--amber-bg); color:var(--amber-text); }
.status-pill.interview{ background:var(--brand-bg); color:var(--brand-text); }
.status-pill.hired{ background:var(--green-bg); color:var(--green-text); }
.status-pill.rejected{ background:var(--red-bg); color:var(--red-text); }

/* ---------- customer service chat ---------- */
.chat-thread{ display:flex; flex-direction:column; gap:12px; max-height:480px; overflow-y:auto; padding:4px 2px; margin-bottom:16px; }
.chat-bubble{ max-width:78%; padding:11px 15px; border-radius:16px; font-size:13.5px; line-height:1.5; }
.chat-bubble .chat-meta{ font-size:12px; opacity:0.7; margin-top:4px; display:block; }
.chat-bubble.mine{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px; }
.chat-bubble.theirs{ align-self:flex-start; background:var(--card-2); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-input-row{ display:flex; gap:10px; align-items:flex-end; }
.chat-input-row textarea{ flex:1; margin:0; min-height:46px; max-height:120px; }
.chat-input-row button{ flex:none; height:46px; }
/* Photos in chats (phase 47) */
.chat-input-row .chat-attach{ width:46px; padding:0; justify-content:center; }
.chat-photo{ display:block; padding:0; margin:0 0 6px; border:0; background:none; cursor:zoom-in; border-radius:12px; overflow:hidden; max-width:260px; }
.chat-photo img{ display:block; width:100%; max-height:260px; object-fit:cover; }
.chat-photo:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; }
.chat-photo[disabled]{ cursor:default; font-size:12.5px; opacity:0.75; padding:8px 0; color:inherit; }
.chat-photo-wait{ display:block; font-size:12.5px; opacity:0.75; padding:8px 0; }
.chat-photo-preview{ display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--card-2); font-size:12.5px; color:var(--muted); }
.chat-photo-preview[hidden]{ display:none; }
.chat-photo-preview img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none; }
.chat-photo-preview span{ flex:1; min-width:0; }
.chat-photo-remove{ flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--fg); cursor:pointer; }

/* ---------- terms of service / privacy policy document ---------- */
.terms-doc{ font-size:14px; line-height:1.7; color:var(--muted); }
.terms-doc h2{ font-size:20px; line-height:1.35; font-weight:800; color:var(--fg); margin:0 0 8px; }
.terms-doc h3, .terms-doc h4{ font-size:14px; font-weight:800; color:var(--fg); margin:20px 0 8px; }   /* sections are h3 under the h2 title (v1.24.3; they were h4, skipping a level) */
.terms-doc p{ margin:0 0 12px; }
.terms-doc ul{ margin:0 0 12px; padding-left:20px; }
.terms-doc li{ margin-bottom:8px; }
.terms-doc b{ color:var(--fg); }
.terms-meta{ font-size:12.5px; color:var(--muted-2); }
.terms-doc .terms-table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:0 0 14px; display:table; }
.terms-doc .terms-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; padding:11px 13px; background:var(--card-2); border-bottom:1px solid var(--border); }
.terms-doc .terms-table td{ padding:11px 13px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:top; }
.terms-doc .terms-table tr:last-child td{ border-bottom:none; }
.terms-doc a{ color:var(--brand-text); font-weight:700; }
.terms-doc code{ font-size:12px; background:var(--card-2); border:1px solid var(--border); border-radius:6px; padding:1px 5px; color:var(--fg); white-space:nowrap; }
/* Narrow screens: each table row becomes a small card, first cell as its
   title and every other cell under its column heading (data-label, added
   by labelDocTables() in app.js). */
@media (max-width:620px){
  .terms-doc .terms-table, .terms-doc .terms-table tbody, .terms-doc .terms-table tr, .terms-doc .terms-table td{ display:block; width:auto; }
  .terms-doc .terms-table thead{ display:none; }
  .terms-doc .terms-table tr{ padding:12px 14px; border-bottom:1px solid var(--border); }
  .terms-doc .terms-table tr:last-child{ border-bottom:none; }
  .terms-doc .terms-table td{ padding:3px 0; border-bottom:none; }
  .terms-doc .terms-table td:first-child{ font-weight:800; color:var(--fg); padding-bottom:6px; }
  .terms-doc .terms-table td[data-label]:not(:first-child)::before{ content:attr(data-label); display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:800; margin-top:4px; }
}
.terms-divider{ border:none; border-top:2px dashed var(--border-strong); margin:28px 0; }

/* scrollable copy of the document shown inside the signup / login gate */
.terms-scroll{ max-height:min(58vh, 480px); overflow-y:auto; border:1px solid var(--border-strong); background:var(--card-2); border-radius:14px; padding:20px 22px; margin-bottom:14px; }
.terms-scroll .terms-doc h2{ font-size:17px; }
.terms-read-hint{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--amber-text); margin:0 0 14px; }
.terms-read-hint.done{ color:var(--green-text); }
.agree-row{ display:flex; align-items:flex-start; gap:11px; border:1px solid var(--border-strong); background:var(--card); border-radius:14px; padding:15px 16px; cursor:pointer; }
.agree-row.checked{ border-color:var(--brand-text); background:var(--brand-bg); }
.agree-row.disabled{ opacity:.55; cursor:not-allowed; }
.agree-row input[type=checkbox]{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--brand-text); flex:none; cursor:inherit; }
.agree-row span{ font-size:13px; line-height:1.6; color:var(--fg); font-weight:600; }
.agree-row a{ color:var(--brand-text); font-weight:600; }
.btn.btn-disabled{ opacity:.45; pointer-events:none; }

/* ---------- quest completion flow: step list (shared with index.html's copy) ---------- */
.flow-step{ display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--muted); padding:8px 0; }
.flow-step .num{ width:22px; height:22px; border-radius:6px; background:var(--brand-bg); color:var(--brand-text); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.flow-step.active{ color:var(--fg); }
.flow-step.active .num{ background:var(--brand); color:#fff; }

/* ---------- device-camera capture (quest before/after photos) ---------- */
.camera-box{ border:1.5px dashed var(--border-strong); border-radius:14px; padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-align:center; color:var(--muted); font-size:13px; font-weight:700; }
.camera-box:hover{ border-color:var(--brand-text); color:var(--brand-text); }
.camera-box .ic-chip{ width:38px; height:38px; border-radius:11px; background:var(--brand-bg); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
.camera-hint{ margin:0; font-size:12px; font-weight:600; color:var(--muted-2); }
.camera-photo{ position:relative; height:200px; border-radius:14px; background-size:cover; background-position:center; background-color:var(--card-2); border:1px solid var(--border); overflow:hidden; }
.camera-badge{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; padding:9px 12px; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent); }
.camera-badge span{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#fff; }
/* A before/after photo that opens in the photo viewer */
button.camera-photo{ display:block; width:100%; padding:0; font:inherit; text-align:left; cursor:zoom-in; }

/* before/after photos as reviewed by the poster ahead of releasing the code */
.photo-review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px; }
@media (max-width:520px){ .photo-review-grid{ grid-template-columns:1fr; } }
.photo-review-label{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted-2); margin:0 0 8px; }

/* ---------- insurance verification (phase 11) ----------
   The one deliberately glassy element on the site: a translucent teal chip
   with a light backdrop blur, so it reads as a quiet "seal" over any card
   background rather than another flat metadata pill. Teal already means
   "verified" (the ID-verified pill), so the badge borrows it. */
.ins-badge{
  position:relative; display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
  border-radius:100px; font-weight:800; line-height:1; white-space:nowrap;
  color:var(--brand-text);
  background:color-mix(in srgb, var(--brand) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,122,145,0.08);
  -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
}
html.dark .ins-badge{
  background:color-mix(in srgb, var(--brand) 16%, transparent);
  border-color:color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.ins-badge .ico{ vertical-align:0; }
.ins-badge.ins-sm{ font-size:12px; padding:3px 6px; gap:3px; }
.ins-badge.ins-md{ font-size:12px; padding:5px 10px; }
.ins-badge.ins-lg{ font-size:12.5px; padding:7px 12px; gap:6px; }
.ins-badge-group{ display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; }
.ins-slot:empty{ display:none; }

/* tooltip: one fixed-position element placed by assets/insurance.js, so it
   isn't clipped by cards with overflow:hidden (every .qcard is). */
.ins-tip{
  position:fixed; z-index:300; left:0; top:0; pointer-events:none;
  max-width:min(260px, calc(100vw - 16px)); padding:7px 10px; border-radius:10px;
  font-size:12px; font-weight:700; line-height:1.4; text-align:center;
  color:#fff; background:rgba(15,23,30,0.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s;
}
.ins-tip.show{ opacity:1; transform:translateY(0); }
html.dark .ins-tip{ background:rgba(238,242,244,0.96); color:#0f1c24; }
.ins-badge:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* member page */
.ins-type-card{ margin-bottom:18px; }
.ins-type-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ins-type-head h3{ margin:0 0 4px; font-size:16px; display:flex; align-items:center; gap:8px; }
.ins-type-head p{ margin:0; font-size:13px; color:var(--muted); line-height:1.6; max-width:52ch; }
.ins-banner{ margin-top:16px; padding:14px 16px; border-radius:14px; font-size:13.5px; line-height:1.6; border:1px solid var(--border); background:var(--card-2); }
.ins-banner b{ font-weight:800; }
.ins-banner.pending{ background:var(--amber-bg); border-color:transparent; }
.ins-banner.approved{ background:var(--green-bg); border-color:transparent; }
.ins-banner.expired{ background:var(--amber-bg); border-color:transparent; }
.ins-banner.rejected{ background:var(--red-bg); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.ins-banner .ins-banner-title{ display:flex; align-items:center; gap:7px; font-weight:800; margin-bottom:4px; }
.ins-banner.pending .ins-banner-title, .ins-banner.expired .ins-banner-title{ color:var(--amber-text); }
.ins-banner.approved .ins-banner-title{ color:var(--green-text); }
.ins-banner.rejected .ins-banner-title{ color:var(--red-text); }
.ins-admin-note{ margin:10px 0 4px; padding:12px 14px; border-radius:12px; background:var(--card); border-left:4px solid var(--red); font-size:14px; font-weight:600; color:var(--fg); white-space:pre-wrap; overflow-wrap:anywhere; }
.ins-form{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.ins-form input[type=date]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--field-border);
  background:var(--card); color:var(--fg); font-family:inherit; font-size:16px; margin-bottom:16px;
}
.ins-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:560px){ .ins-form .grid-2{ grid-template-columns:1fr; } }
.ins-field-error{ margin:-10px 0 14px; font-size:12px; font-weight:700; color:var(--red-text); }
.ins-form .has-error input, .ins-form .has-error select{ border-color:var(--red-text); }
.ins-form .has-error .doc-upload-box{ border-color:var(--red-text); }
.ins-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* admin review */
.admin-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.modal-box.modal-wide{ max-width:820px; max-height:calc(100vh - 40px); overflow-y:auto; }
.ins-review-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; }
@media (max-width:760px){ .ins-review-grid{ grid-template-columns:1fr; } }
.ins-viewer{ width:100%; height:460px; max-width:100%; border:1px solid var(--border); border-radius:12px; background:var(--card-2); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--muted); font-size:13px; }
.ins-viewer iframe{ width:100%; height:100%; border:0; background:#fff; }
.ins-viewer img{ max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:760px){ .ins-viewer{ height:320px; } }
.ins-detail-list{ margin:0 0 14px; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13px; }
.ins-detail-list dt{ color:var(--muted-2); font-weight:700; }
.ins-detail-list dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.ins-expired-text{ color:var(--red-text); font-weight:800; }
/* v1.15.0: red flags and the approval checklist */
.ins-flags{ margin:0 0 14px; padding:12px 14px; border-radius:12px; font-size:12.5px; line-height:1.55; background:var(--card-2); border:1px solid var(--border); }
.ins-flags.has-flags{ background:var(--amber-bg); border-color:transparent; }
.ins-flags-title{ display:flex; align-items:center; gap:6px; font-weight:700; margin-bottom:4px; }
.ins-flags.has-flags .ins-flags-title{ color:var(--amber-text); }
.ins-flags ul{ margin:4px 0 0; padding-left:18px; }
.ins-flags li{ margin:3px 0; }
.ins-flags li.strong{ color:var(--red-text); font-weight:700; }
.ins-flags .ins-flags-note{ margin:6px 0 0; color:var(--muted); }
.ins-checklist{ display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
.ins-checklist .agree-row{ padding:10px 12px; border-radius:12px; }
.ins-checklist .agree-row span{ font-size:12.5px; line-height:1.5; }
.ins-confirm-hint{ margin:-2px 0 12px; font-size:12px; line-height:1.55; color:var(--muted); }


/* ---------- job application screening (phase 12) ---------- */
.apply-back{ font-size:13px; font-weight:700; color:var(--muted); display:flex; width:fit-content; align-items:center; gap:6px; margin-bottom:14px; }
.apply-back .ico{ transform:rotate(180deg); }
.apply-state-chip{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.apply-card .step-track{ margin-bottom:18px; }
.apply-count{ margin:-10px 0 14px; font-size:12px; font-weight:700; color:var(--muted-2); text-align:right; }
.apply-count.over{ color:var(--red-text); }
.apply-error{ margin:-8px 0 14px; font-size:12.5px; font-weight:700; color:var(--red-text); }
.apply-error[hidden]{ display:none; }
.apply-error-box{ margin:16px 0 0; padding:12px 14px; border-radius:12px; background:var(--red-bg); }
.apply-req, .apply-opt{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:100px; margin-left:6px; vertical-align:1px; }
.apply-req{ background:var(--brand-bg); color:var(--brand-text); }
.apply-opt{ background:var(--neutral-bg); color:var(--neutral-text); }
.apply-intro{ margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.apply-survey-count{ position:sticky; top:84px; z-index:2; display:inline-block; margin:0 0 16px; padding:7px 13px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--brand-text); background:var(--brand-bg); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.apply-survey-count.over{ color:var(--red-text); background:var(--red-bg); }
.apply-q{ display:flex; gap:8px; align-items:flex-start; color:var(--fg); font-size:13.5px; line-height:1.5; }
.apply-q-num{ flex:none; min-width:22px; height:22px; padding:0 5px; border-radius:6px; background:var(--brand-bg); color:var(--brand-text); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.apply-ai-note{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 16px; padding:12px 14px; border-radius:12px; background:var(--card-2); border:1px solid var(--border); font-size:12.5px; line-height:1.6; color:var(--muted); }
.apply-ai-note .ico{ flex:none; margin-top:2px; color:var(--brand-text); }
.apply-ai-note a{ color:var(--brand-text); font-weight:700; }

/* screening-question editor (post.html, job-applicants.html) */
.sq-hint{ margin:0 0 12px; font-size:12.5px; line-height:1.55; color:var(--muted-2); }
.sq-hint.warn{ color:var(--amber-text); font-weight:700; }
.sq-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sq-row{ display:flex; align-items:center; gap:8px; }
.sq-row .sq-input{ margin:0; flex:1; min-width:0; }
.sq-num{ flex:none; width:22px; height:22px; border-radius:6px; background:var(--brand-bg); color:var(--brand-text); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.sq-row-actions{ display:flex; gap:4px; flex:none; }
.sq-btn{ min-width:30px; height:30px; padding:0 8px; border-radius:8px; border:1px solid var(--border-strong); background:var(--card); color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.sq-btn:hover:not([disabled]){ border-color:var(--brand-text); color:var(--brand-text); }
.sq-btn[disabled]{ opacity:.35; cursor:default; }
.sq-btn.sq-remove:hover{ border-color:var(--red-text); color:var(--red-text); }
.sq-add[disabled]{ opacity:.45; cursor:not-allowed; }
.sq-suggest{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; }
.sq-suggest-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); margin-right:4px; }
.sq-chip{ font-size:12px; padding:6px 11px; text-align:left; }
.sq-list-readonly{ margin:0 0 10px; padding-left:20px; font-size:13.5px; line-height:1.6; }
.sq-list-readonly li{ margin-bottom:4px; }
@media (max-width:520px){ .sq-row{ flex-wrap:wrap; } .sq-row .sq-input{ flex-basis:calc(100% - 30px); } .sq-row-actions{ margin-left:30px; } }

/* employer applicants page */
.apl-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
@media (max-width:700px){ .apl-stats{ grid-template-columns:1fr 1fr; } }
.apl-stat{ border:1px solid var(--border); background:var(--card); border-radius:14px; padding:14px 16px; }
.apl-stat b{ display:block; font-size:22px; font-weight:800; }
.apl-stat span{ font-size:12px; color:var(--muted-2); }
.apl-layout{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:940px){ .apl-layout{ grid-template-columns:minmax(0,1fr); } .apl-side-col{ order:-1; } }
.apl-h3{ margin:0 0 6px; font-size:16px; display:flex; align-items:center; gap:7px; }
.apl-help{ margin:0 0 14px; font-size:12.5px; line-height:1.6; color:var(--muted); }
.apl-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.apl-match{ font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.apl-match.busy{ color:var(--brand-text); }
.apl-match.ok{ color:var(--green-text); }
.apl-match.warn{ color:var(--amber-text); }
.apl-match.muted{ color:var(--muted-2); }
.apl-filters{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px; background:var(--card-2); border:1px solid var(--border); }
.apl-filters .chip{ font-size:12.5px; padding:7px 12px; }
.chip-count{ font-size:12px; opacity:.7; }
.apl-search{ margin:0 !important; }
.apl-filter-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); }
.apl-filter-label span{ text-transform:none; letter-spacing:0; font-weight:600; margin-left:6px; }
.chip.label-filter.must{ background:var(--green-bg); color:var(--green-text); border-color:var(--green-text); }
.chip.label-filter.mustNot{ background:var(--red-bg); color:var(--red-text); border-color:var(--red-text); }
.apl-toggle-row{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.apl-toggle-row input{ width:16px; height:16px; accent-color:var(--brand-text); }
.apl-summary{ margin:14px 0 10px; font-size:12.5px; color:var(--muted); }
.apl-bulk{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.apl-bulk .btn{ font-size:12.5px; padding:8px 12px; }
.apl-bulk .btn[disabled]{ opacity:.4; cursor:not-allowed; }
.apl-list{ display:flex; flex-direction:column; gap:10px; }
.apl-divider{ margin:8px 0 2px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); }
.apl-card{ border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--card); }
.apl-card.sec-hidden{ background:var(--card-2); opacity:.85; }
.apl-row{ display:flex; gap:12px; align-items:flex-start; }
.apl-check{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--brand-text); }
.apl-who{ flex:1; min-width:0; }
.apl-who b{ font-size:14.5px; overflow-wrap:anywhere; }
.apl-meta{ display:block; font-size:12px; color:var(--muted-2); margin:2px 0 8px; }
.apl-meta .pill{ font-size:12px; padding:2px 7px; }
.apl-status{ width:auto !important; margin:0 !important; padding:7px 10px !important; font-size:12.5px !important; flex:none; }
.verdict-row{ display:flex; flex-wrap:wrap; gap:5px; }
.verdict-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px 3px 3px; border-radius:100px; background:var(--neutral-bg); color:var(--neutral-text); max-width:100%; }
.verdict-mark{ width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:var(--card); flex:none; }
.verdict-chip.match{ background:var(--green-bg); color:var(--green-text); }
.verdict-chip.partial{ background:var(--amber-bg); color:var(--amber-text); }
.verdict-chip.no_match{ background:var(--red-bg); color:var(--red-text); }
.verdict-chip.unclear, .verdict-chip.pending{ background:var(--neutral-bg); color:var(--muted-2); }
.verdict-chip.na{ background:transparent; border:1px dashed var(--border-strong); color:var(--muted-2); padding:2px 8px 2px 2px; }
.apl-toggle{ margin:10px 0 0 30px; padding:0; border:none; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--brand-text); cursor:pointer; }
.apl-hidden-toggle{ margin:10px 0 0; }
.apl-hidden-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.apl-detail{ margin:12px 0 0 30px; padding-top:12px; border-top:1px solid var(--border); }
.apl-qa{ margin-bottom:12px; }
.apl-q{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); margin-bottom:4px; }
.apl-qa p{ margin:0; font-size:13.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.apl-reasons{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); }
.apl-docs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.apl-doc{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:10px; border:1px solid var(--border-strong); font-size:12.5px; font-weight:700; color:var(--brand-text); text-decoration:none; max-width:100%; }
.apl-doc i{ font-style:normal; font-weight:600; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
.apl-doc-off{ color:var(--muted-2); }
.apl-more{ align-self:center; }
@media (max-width:560px){
  .apl-row{ flex-wrap:wrap; }
  .apl-who{ flex-basis:calc(100% - 40px); }
  .apl-status{ margin-left:30px !important; }
  .apl-detail, .apl-toggle{ margin-left:0; }
}
.lbl-group{ padding:12px 0; border-top:1px solid var(--border); }
.lbl-q{ display:flex; gap:8px; align-items:flex-start; font-size:13px; font-weight:700; line-height:1.5; margin-bottom:8px; }
.lbl-item{ display:flex; gap:8px; align-items:flex-start; justify-content:space-between; padding:8px 10px; border-radius:10px; background:var(--card-2); margin-bottom:6px; }
.lbl-item-text{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.lbl-item-text b{ font-size:13px; overflow-wrap:anywhere; }
.lbl-item-text span{ font-size:12px; color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }
.lbl-item-actions{ display:flex; gap:4px; flex:none; }
.lbl-add{ padding:0; border:none; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--brand-text); cursor:pointer; }
.lbl-form{ padding:12px; border-radius:12px; border:1px solid var(--brand-text); background:var(--brand-bg); margin-bottom:6px; }
.lbl-form input, .lbl-form textarea{ background:var(--card); margin-bottom:10px; }
.lbl-form textarea{ min-height:70px; }
.lbl-form-actions{ display:flex; gap:8px; justify-content:flex-end; }
.lbl-form-actions .btn{ font-size:12.5px; padding:8px 12px; }

/* ===========================================================================
   v1.16.0 UI refresh — patterns chosen from the competitor study
   (Figma: "Questies UI Refresh"). Home A search-first, Browse/Detail split by
   product (quests + jobs: list + preview + sticky price card; freelance:
   picture grid + trust-first profile), Dashboard A (rail + "Needs you").
=========================================================================== */
.star-row > .ico{ color:var(--star); }

/* ---------- header: icon nav ---------- */
nav.links{ gap:4px; }
nav.links a{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:11px; }
nav.links a.active{ background:var(--brand-bg); }
/* "More" button and its menu (placed by setupMoreMenu in app.js). */
.nav-more{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:11px; border:0; background:none; font:inherit; color:inherit; cursor:pointer; white-space:nowrap; flex:none; }
.nav-more:hover, .nav-more[aria-expanded="true"], .nav-more.active{ color:var(--brand-text); }
.nav-more[aria-expanded="true"], .nav-more.active{ background:var(--brand-bg); }
.nav-more .ico:last-child{ transition:transform .15s ease; }
.nav-more[aria-expanded="true"] .ico:last-child{ transform:rotate(180deg); }
.nav-more-menu{ position:fixed; z-index:70; min-width:200px; padding:6px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(15,23,30,0.14); }
.nav-more-menu[hidden]{ display:none; }
.nav-more-menu a{ display:flex; align-items:center; gap:9px; min-height:44px; padding:0 12px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--fg); }
.nav-more-menu a:hover, .nav-more-menu a:focus-visible, .nav-more-menu a[aria-current="page"]{ background:var(--brand-bg); color:var(--brand-text); }
.navactions .show-sm{ display:none; }
/* Narrow screens: the links drop to a second header row (scrolling sideways
   if they don't fit) rather than a phone-app tab bar at the bottom. */
@media (max-width:900px){
  .navactions .hide-sm{ display:none; }
  .navactions .show-sm{ display:inline; }
  /* links are 44px tall to tap; the row gap and bottom padding shrink by
     the same amount so the header stays the height it was */
  .navrow{ flex-wrap:wrap; height:auto; padding-top:12px; row-gap:0; }
  nav.links{ order:3; flex-basis:100%; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin:0 -4px; }
  nav.links::-webkit-scrollbar{ display:none; }
  nav.links a{ white-space:nowrap; flex:none; min-height:44px; }
  .nav-more{ min-height:44px; }
}
@media (max-width:480px){
  nav.links{ gap:0; }
  nav.links a, .nav-more{ padding:8px 9px; gap:6px; font-size:13.5px; }
}
/* Phones: the five items (Quests, Freelance, Jobs, Post, More) fit the row
   without sideways scrolling, so More is never hidden off the edge. Items
   stretch to share any spare room. Each step down trades a little decoration
   for room: More drops its leading icon (the chevron still says it opens),
   then the icons shrink, then below 370px the board links go text-only. The
   steps line up with the page margin (24px a side, 16px from 380px down).
   Rows stay 44px tall to tap. */
@media (max-width:480px){
  nav.links a, .nav-more{ flex:1 0 auto; justify-content:center; padding:8px 5px; gap:5px; }
  .nav-more .ico:first-child{ display:none; }
}
@media (max-width:440px){
  nav.links a, .nav-more{ padding:8px 4px; gap:4px; font-size:13px; }
  nav.links a .ico, .nav-more .ico{ width:14px; height:14px; }
}
@media (max-width:380px){
  nav.links a, .nav-more{ padding:8px 5px; }
}
@media (max-width:369px){
  nav.links a .ico{ display:none; }
  nav.links a, .nav-more{ padding:8px 6px; }
}
/* The smallest phones (320–380px): a 16px side margin and narrower header
   buttons so Log in and Sign up stay on the logo's row. */
@media (max-width:380px){
  .wrap{ padding-left:16px; padding-right:16px; }
  .navrow{ column-gap:10px; }
  .navactions{ gap:6px; }
  .navactions .btn{ padding:10px 12px; font-size:13.5px; }
}

/* ---------- shared bits ---------- */
.avatar{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; flex:none; position:relative; background:var(--brand); background-size:cover; background-position:center; }
.avatar.sm{ width:26px; height:26px; font-size:11px; }
.list-row .avatar.sm{ vertical-align:middle; margin-right:6px; }   /* a requester's or booker's photo beside their name (v1.56.1) */
.tag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:7px; }
.tag.q{ background:var(--brand-bg); color:var(--brand-text); }
.tag.f{ background:var(--freelance-bg); color:var(--freelance-text); }
.tag.j{ background:var(--neutral-bg); color:var(--neutral-text); }
.tag.g{ background:var(--green-bg); color:var(--green-text); }
.price{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; font-variant-numeric:tabular-nums; }
.escrow-note{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:12px; background:var(--brand-bg); color:var(--brand-text); font-size:12.5px; font-weight:700; line-height:1.5; }
.status-strip{ display:flex; gap:6px; flex-wrap:wrap; }
.status-strip span{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:100px; background:var(--card-2); color:var(--muted-2); }
.status-strip span.on{ background:var(--green-bg); color:var(--green-text); }
.results-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:700; color:var(--muted); margin:0 0 12px; }

/* ---------- browse B: category rail + picture grid (all three boards) ---------- */
.browse-layout{ display:grid; gap:20px; align-items:start; }
.browse-layout.is-empty{ display:block; }   /* nothing posted: no rail, so no rail column */
@media (min-width:1000px){
  .browse-layout{ grid-template-columns:210px minmax(0,1fr); }
  .browse-layout .chip-row{ flex-direction:column; align-items:stretch; gap:4px; position:sticky; top:96px; }
  .browse-layout .chip-row .chip{ border:none; background:transparent; border-radius:10px; padding:10px 12px; justify-content:flex-start; }
  .browse-layout .chip-row .chip.active{ background:var(--brand-bg); color:var(--brand-text); }
  .browse-layout.f .chip-row .chip.active{ background:var(--freelance-bg); color:var(--freelance-text); }
  .browse-layout.j .chip-row .chip.active{ background:var(--neutral-bg); color:var(--fg); }
  .browse-layout .rail-title{ display:block; }
}
.rail-title{ display:none; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:4px 12px 6px; }
.browse-layout .cards-grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.gcard{ display:flex; flex-direction:column; border-radius:16px; border:1px solid var(--border); background:var(--card); overflow:hidden; box-shadow:var(--shadow-card); height:100%; }
.gcard:hover{ border-color:var(--border-strong); }
.gcard .thumb{ position:relative; aspect-ratio:16/9; max-width:100%; background:linear-gradient(135deg,var(--freelance-bg),var(--freelance-bg-strong)); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:var(--freelance-text); }
.gcard .thumb .tag{ position:absolute; left:10px; top:10px; background:var(--card); }
.gcard .thumb.q{ background-color:transparent; background-image:linear-gradient(135deg,var(--brand-bg),var(--brand-bg-strong)); color:var(--brand-text); }
.gcard .thumb.j{ background-color:transparent; background-image:linear-gradient(135deg,var(--neutral-bg),var(--card-2)); color:var(--neutral-text); }
.gcard .thumb[style*="background-image"]{ background-size:cover; background-position:center; }
.thumb-initial{ width:56px; height:56px; border-radius:16px; background:var(--neutral-text); color:#fff; font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.gcard .gmeta{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--muted); }
.gcard .gmeta span{ display:inline-flex; align-items:center; gap:5px; }
.gcard .gmeta.posted{ font-size:12px; margin-top:-4px; }
.gcard .gmeta.posted:empty{ display:none; }
.gcard .body{ padding:13px 15px 15px; display:flex; flex-direction:column; gap:8px; flex:1; }
.gcard .seller{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; min-width:0; }
.gcard .seller .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gcard h3{ margin:0; font-size:14.5px; font-weight:700; line-height:1.4; }
.gcard .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.gcard .foot b{ font-size:14.5px; color:var(--fg); }
.gcard .foot span{ display:inline-flex; align-items:center; gap:5px; }

/* ---------- detail pages: sticky price card + phone action bar ---------- */
.price-card{ border:1px solid var(--border); background:var(--card); border-radius:18px; padding:20px; display:grid; gap:12px; }
@media (min-width:901px){ .price-card.sticky{ position:sticky; top:96px; } }
.price-card .lbl{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.price-card .big{ font-size:36px; line-height:1; }
.price-split{ display:grid; gap:6px; font-size:13px; }
.price-split div{ display:flex; justify-content:space-between; gap:10px; }
.price-split .you{ font-weight:800; }
.price-split .you .price{ color:var(--green-text); }
.mbar{ display:none; }
@media (max-width:900px){
  .mbar{ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:65; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--card); border-top:1px solid var(--border); box-shadow:0 -8px 24px -16px rgba(15,23,30,.35); }
  .mbar .btn{ margin-left:auto; }
  .mbar .sub{ display:block; font-size:12px; color:var(--muted-2); }
  body.has-mbar{ padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- trust-first profile header (freelance detail) ---------- */
.pro-head{ display:grid; gap:18px; padding:26px; border-radius:22px; background:linear-gradient(180deg,var(--freelance-bg),transparent); border:1px solid var(--border); margin-bottom:22px; }
@media (min-width:901px){ .pro-head{ grid-template-columns:1fr 1.1fr; align-items:center; } }
.pro-who{ display:flex; gap:16px; align-items:center; }
.pro-who .avatar{ width:84px; height:84px; border-radius:26px; font-size:30px; background:var(--freelance); }
.pro-who .seal{ position:absolute; right:-6px; bottom:-6px; width:28px; height:28px; border-radius:50%; background:var(--card); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
.pro-who h1{ margin:6px 0 4px; font-size:30px; font-weight:800; letter-spacing:-0.02em; }
.pro-head.q{ background:linear-gradient(180deg,var(--brand-bg),transparent); }
.pro-head.q .pro-who .avatar{ background:var(--brand); }
.pro-head.j{ background:linear-gradient(180deg,var(--neutral-bg),transparent); }
.pro-head.j .pro-who .avatar{ background:var(--neutral-text); }
.pro-who .avatar.no-seal .seal{ display:none; }
.pro-head .status-strip{ margin-bottom:8px; }
.stat-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px){ .stat-tiles{ grid-template-columns:repeat(4,1fr); } }
.stat-tile{ padding:12px 14px; border-radius:13px; background:var(--card); border:1px solid var(--border); }
.stat-tile b{ display:flex; align-items:center; gap:5px; font-size:18px; font-weight:800; }
.stat-tile span{ font-size:12px; color:var(--muted); }

/* ---------- dashboard A: numbers + "Needs you" ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
@media (min-width:800px){ .kpi-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.kpi{ padding:14px 16px; border-radius:16px; border:1px solid var(--border); background:var(--card); display:grid; gap:4px; min-width:0; }
.kpi small{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); }
.kpi b{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.kpi span{ font-size:12px; color:var(--muted-2); }
.setup-strip{ display:grid; grid-template-columns:auto 1fr 1fr; gap:10px 14px; align-items:center; padding:14px 16px; margin:0 0 14px; border-radius:16px; border:1px solid var(--amber-text); background:var(--amber-bg); }
@media (max-width:900px){ .setup-strip{ grid-template-columns:1fr; } }
.setup-title{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--amber-text); white-space:nowrap; }
.setup-step{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--card); min-width:0; }
.setup-step .ic{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--amber-bg); color:var(--amber-text); }
.setup-step.done .ic{ background:var(--green-bg); color:var(--green-text); }
.setup-step .t{ flex:1; min-width:0; }
.setup-step .t b{ display:block; font-size:13.5px; }
.setup-step .t span{ font-size:12px; color:var(--muted); }
.setup-step .btn{ min-height:38px; padding:7px 13px; font-size:13px; }
.pipeline{ border:1px solid var(--border); background:var(--card); border-radius:18px; padding:16px; margin:0 0 20px; }
.pipe-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pipe-head h3{ margin:0; font-size:17px; font-weight:800; }
.pipe-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.pipe-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:1100px){ .pipe-cols{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(240px,78%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; } .pipe-col{ scroll-snap-align:start; } }
.pipe-col{ display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; background:var(--card-2); border:1px solid var(--border); min-width:0; align-content:start; }
.pipe-col.code{ background:var(--green-bg); border-color:var(--green-text); }
.pipe-col-head{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; }
.pipe-col.code .pipe-col-head{ color:var(--green-text); }
.pipe-col-head span{ margin-left:auto; font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.pipe-card{ display:grid; gap:7px; padding:11px 12px; border-radius:12px; background:var(--card); border:1px solid var(--border); }
.pipe-card:hover{ border-color:var(--border-strong); }
.pipe-card b{ font-size:13.5px; line-height:1.35; overflow-wrap:anywhere; }
.pipe-card .r{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.pipe-card .btn{ min-height:36px; padding:7px 12px; font-size:12.5px; }
.pipe-empty{ margin:0; font-size:12.5px; color:var(--muted-2); }

button.chip{ font-family:inherit; min-height:38px; }

/* ---------- save this search (phase 15) ---------- */
.results-head{ flex-wrap:wrap; }
.save-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.save-search{ font:inherit; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:7px 13px; border-radius:100px; border:1px solid var(--border-strong); background:var(--card); color:var(--fg); cursor:pointer; }
.save-search:hover{ border-color:var(--brand-text); color:var(--brand-text); }
.save-search[aria-checked="true"]{ background:var(--brand-bg); border-color:var(--brand-bg-strong); color:var(--brand-text); }
.save-search.subtle{ border-color:transparent; background:transparent; color:var(--muted); }
.save-search:disabled{ opacity:.6; cursor:progress; }
.saved-on{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--brand-text); }
.saved-list .list-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.saved-list .list-row:last-child{ border-bottom:none; }
.saved-list .meta{ font-size:12px; color:var(--muted-2); }

/* ---------- loading screen (v1.22.0) ----------
   See-through overlay with the logo Q and a teal arc spinning around it.
   Built and removed by QLoader in app.js. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.q-loader{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; background:var(--loader-bg); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.q-loader.on{ opacity:1; }
.q-loader-mark{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.q-loader-ring{ position:absolute; inset:0; width:100%; height:100%; animation:q-spin .9s linear infinite; }
.q-loader-track, .q-loader-arc{ fill:none; stroke-width:5; }
.q-loader-track{ stroke:var(--brand-bg-strong); }
.q-loader-arc{ stroke:var(--brand-text); stroke-linecap:round; stroke-dasharray:72 217; }
.q-loader-q{ width:52px; height:52px; fill:#0097b2; }
@keyframes q-spin{ to{ transform:rotate(360deg); } }
@keyframes q-pulse{ 50%{ opacity:.35; } }
/* Reduce transparency: a solid backdrop instead of a blurred see-through one */
@media (prefers-reduced-transparency: reduce){
  .q-loader{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg); }
}
@media (prefers-reduced-motion: reduce){
  .q-loader-ring{ animation:q-pulse 1.6s ease-in-out infinite; }
}