/* Zäme – one stylesheet for the whole marketplace.
   Calm, light surfaces; readable grey text; Swiss red only where it guides an action.
   Replaces the former style.css + hero-v2/v3 + swiss-ui override stack. */

@font-face {
  font-family: 'Patrick Hand';
  src: url('assets/fonts/PatrickHand-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Calm bluish surfaces; no warm/brown tints. */
  --bg: #eef3f6;
  --surface: #ffffff;
  --surface-soft: #f5f8fa;
  --fill: #e6edf2;
  --line: #d9e2e8;
  --line-strong: #b8c6cf;

  --text: #3a4044;
  --text-2: #586066;
  --text-3: #666d72;
  --heading: #41484d;
  --placeholder: #767c80;

  /* Muted brick/coral: a quiet Swiss accent, never the dominant colour. */
  --accent: #1a5d8c;
  --accent-hover: #154c73;
  --accent-soft: #eaf2f8;
  --accent-tint: #dfecf6;
  --accent-tint-hover: #d2e4f2;
  --accent-line: #c6dbea;
  --accent-mark: #5d93bd;
  --on-tint: #12232c;
  --focus: rgba(26, 93, 140, .18);

  --ok: #2f6b4c;
  --ok-bg: #e9f3ec;
  --info: #2e5b80;
  --info-bg: #e9f0f6;
  --warn: #7a5712;
  --warn-bg: #fbf2dd;
  --warn-line: #ecdcb1;
  --danger: #a8281f;
  --danger-bg: #fbecea;
  --neutral-bg: #edf0f3;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(42, 38, 32, .05);
  --shadow: 0 1px 2px rgba(42, 38, 32, .04), 0 6px 18px rgba(42, 38, 32, .06);
  --shadow-lg: 0 18px 50px rgba(30, 28, 24, .2);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: 'Patrick Hand', 'Segoe Print', cursive;
  --page: 1140px;
  --topbar: 64px;
  --bottom-nav: 66px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 500; line-height: 1.25; letter-spacing: -.005em; }
p, figure, dl, dd, ol, ul { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.noscript { margin: 24px auto; max-width: 600px; padding: 16px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); }

.eyebrow { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.meta { color: var(--text-2); font-size: 15px; }
.count-pill { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-2); font-size: 13px; font-weight: 600; }
.inline-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #dfecf6; color: var(--on-tint); font-size: 12px; font-weight: 600; line-height: 1; }
.chip, .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 500; }

/* ---------- Buttons and links ---------- */
.primary, .secondary, .ghost, .warning-action, .danger-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 10px;
  font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
/* Primary actions: dark text of normal weight on a very light warm tint – never red on red. */
.primary { background: var(--accent-tint); border-color: var(--accent-line); color: var(--on-tint); }
.primary:hover:not(:disabled) { background: var(--accent-tint-hover); border-color: #c6dbea; color: var(--on-tint); }
.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.secondary:hover:not(:disabled) { background: var(--surface-soft); border-color: #b8bfc8; }
.ghost { background: transparent; color: var(--text-2); }
.ghost:hover:not(:disabled) { background: var(--fill); color: var(--text); }
.warning-action { background: var(--surface); border-color: var(--warn-line); color: var(--warn); }
.warning-action:hover:not(:disabled) { background: var(--warn-bg); }
.danger-action { background: var(--surface); border-color: #e6b8b3; color: var(--danger); }
.danger-action:hover:not(:disabled) { background: var(--danger-bg); }
.big { min-height: 52px; padding: 0 22px; font-size: 16.5px; }
.compact { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
.full { width: 100%; }

.text-link, .inline-legal-link, .auth-link-button, .auth-back-button, .trust-report-button, .danger-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; border: 0; background: none;
  font-size: 15px; font-weight: 500; text-align: left; text-decoration: none;
}
.text-link, .auth-link-button, .auth-back-button { color: var(--accent); }
.text-link .icon { width: 18px; height: 18px; }
.text-link:hover, .auth-link-button:hover, .auth-back-button:hover { text-decoration: underline; }
.inline-legal-link { display: inline; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); }
.trust-report-button { color: var(--text-2); font-size: 14px; font-weight: 400; text-decoration: underline; text-decoration-color: var(--line-strong); }
.trust-report-button:hover { color: var(--danger); }
.danger-link { padding: 8px 2px; color: var(--danger); }
.danger-link:hover { text-decoration: underline; }
.danger-link.compact { min-height: 0; padding: 6px 0; font-size: 14.5px; }

/* ---------- Form controls ---------- */
label { display: grid; gap: 6px; color: var(--text); font-size: 15px; font-weight: 500; }
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23586066' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background-color: #eef2f5; color: var(--text-2); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 8px; color: var(--text); font-size: 15px; font-weight: 500; }
.field-help, .location-picker > small { display: block; color: var(--text-2); font-size: 13.5px; font-weight: 400; line-height: 1.45; }
.char-count { justify-self: end; color: var(--text-3); font-size: 13px; font-weight: 400; }
.two { display: grid; gap: 14px; }
.checkrow { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.consent-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 15px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.consent-row input { margin-top: 2px; }
.money { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.money input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; }
.money > span { display: grid; place-items: center; padding: 0 14px; border-left: 1px solid var(--line); background: var(--surface-soft); color: var(--text-2); font-size: 15px; font-weight: 500; }
.location-picker { display: grid; gap: 8px; }
.location-picker-row.is-three-step, .profile-location-selects.is-three-step { display: grid; gap: 10px; }
.select-wrap { display: block; }
.image-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Status ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--neutral-bg); color: var(--text-2);
  font-size: 13px; font-weight: 500; line-height: 1.35; white-space: nowrap;
}
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-open, .status-accepted { background: var(--ok-bg); color: var(--ok); }
.status-assigned, .status-sent { background: var(--info-bg); color: var(--info); }
.status-in_progress { background: var(--warn-bg); color: var(--warn); }
.status-completed { background: var(--neutral-bg); color: #474e53; }
.status-cancelled { background: var(--danger-bg); color: var(--danger); }
.status-rejected, .status-withdrawn { background: var(--neutral-bg); color: var(--text-2); }

.notice { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); color: var(--text); font-size: 15px; }
.empty { display: grid; justify-items: center; gap: 12px; padding: 32px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-2); font-size: 15.5px; text-align: center; }
.empty h3 { font-size: 18px; }
.compact-empty { padding: 24px 16px; border: 0; background: none; }

/* ---------- App frame ---------- */
.prelaunch-banner { padding: 6px 16px; background: var(--fill); color: var(--text-2); font-size: 13px; line-height: 1.4; text-align: center; }

.topbar { position: sticky; top: 0; z-index: 60; width: min(calc(var(--page) + 40px), 100% - 16px); margin: 0 auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
.topbar-inner { display: flex; align-items: center; gap: 12px; width: min(var(--page), 100% - 16px); height: var(--topbar); margin: 0 auto; }

/* Lighthouse and wordmark sit on one baseline: the tower's ground line is the text baseline. */
.logo { display: inline-flex; align-items: baseline; gap: 2px; margin-right: auto; padding: 4px 4px 4px 0; border: 0; background: none; color: var(--heading); text-decoration: none; }
.logo-mark { display: block; width: 32px; height: 40px; flex: 0 0 auto; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-copy { font-family: var(--font-hand); font-size: 31px; font-weight: 400; line-height: 1; letter-spacing: .01em; color: #4b5257; white-space: nowrap; }
.logo-suffix { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }

.desktop-nav { display: none; align-items: center; gap: 4px; }
.mobile-offerten { display: inline-flex; margin-left: auto; }
.navigation-choices {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;max-width:900px}
.navigation-choice {display:flex;flex-direction:column;gap:9px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-align:left}
.navigation-choice strong {font-size:21px}
.navigation-choice span {font-size:15px;color:var(--muted)}
.navigation-choice:hover {border-color:#93b4ee;background:#f4f8ff}
.navigation-choice:focus-visible {outline:2px solid #2563eb;outline-offset:3px}
.nav-link, .nav-icon { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-size: 15px; font-weight: 500; }
.nav-link:hover, .nav-icon:hover { background: var(--fill); color: var(--text); }
.nav-link.active-nav, .nav-icon.active-nav { background: #edf4ff; color: #1d4ed8; box-shadow: inset 0 -3px 0 #2563eb; }
.nav-icon { width: 42px; justify-content: center; padding: 0; }
.nav-icon .icon { width: 22px; height: 22px; }
.nav-icon .inline-badge { position: absolute; top: 2px; right: 0; margin: 0; }
.nav-notifications { gap: 6px; white-space: nowrap; }
.nav-notifications .icon { width: 18px; height: 18px; }
.nav-notifications .inline-badge { margin-left: 0; }
@media (min-width: 960px) and (max-width: 1099px) {
  .desktop-nav { gap: 0; }
  .desktop-nav .nav-link { padding-left: 7px; padding-right: 7px; font-size: 14px; }
  .desktop-nav .nav-create { margin-left: 2px; padding-left: 10px; padding-right: 10px; font-size: 14px; }
  .topbar-inner { gap: 8px; }
}
.nav-create { margin-left: 8px; }
.avatar-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 14.5px; font-weight: 500; white-space: nowrap; min-width: 0; max-width: 50%; margin-left: auto; }
#accountBtnLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .account-btn-icon { display: none; }
.avatar-btn:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.avatar-btn.active-nav { border-color: #c6d9fa; background: #edf4ff; color: #1d4ed8; box-shadow: inset 0 -3px 0 #2563eb; }
.account-btn-icon { display: grid; place-items: center; color: var(--text-2); }
.account-btn-icon .icon { width: 24px; height: 24px; stroke-width: 1.6; }
/* Notifications already have their own badge (bell / bottom nav); no second copy on the account button. */
#desktopAccountBadge { display: none !important; }
.nav-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #dfecf6; color: var(--on-tint); font-size: 11px; font-weight: 600; }

main { width: min(var(--page), 100% - 32px); margin: 0 auto; padding: 20px 0 calc(var(--bottom-nav) + 40px); }
.page { display: none; }
.page.active { display: block; animation: page-in .18s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-head { display: grid; gap: 4px; margin-bottom: 20px; }
.page-head h2 { font-size: clamp(25px, 4.5vw, 31px); }
.page-head p { max-width: 62ch; color: var(--text-2); font-size: 16px; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.page-head-row > div { display: grid; gap: 4px; }
.page-head-compact { margin-bottom: 14px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; justify-self: start; width: max-content; margin: 0 0 6px -6px; padding: 6px 8px 6px 2px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 15px; font-weight: 500; }
.back-link:hover { background: var(--fill); color: var(--text); }
.back-link .icon { width: 20px; height: 20px; }

.legal-footer { border-top: 1px solid var(--line); background: var(--surface-soft); }
.legal-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; width: min(var(--page), 100% - 32px); margin: 0 auto; padding: 20px 0 calc(var(--bottom-nav) + 24px + env(safe-area-inset-bottom)); }
.legal-footer-brand { font-family: var(--font-hand); font-size: 24px; line-height: 1; color: var(--text-2); }
.legal-footer-identity { display: grid; gap: 4px; }
.legal-footer-company { color: var(--text-2); font-size: 13px; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.legal-footer nav button, .legal-footer nav a { padding: 6px 0; border: 0; background: none; color: var(--text-2); font-size: 14px; text-decoration: none; }
.legal-footer nav button:hover, .legal-footer nav a:hover { color: var(--accent); text-decoration: underline; }

.bottom-nav { position: fixed; inset: auto 0 0; z-index: 70; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bottom-nav button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 2px 0; border: 0; border-radius: 10px; background: none; color: var(--text-2); }
.bottom-nav small { font-size: 12px; font-weight: 500; line-height: 1.2; }
.bottom-nav-icon { display: grid; place-items: center; height: 26px; }
.bottom-nav-icon .icon { width: 24px; height: 24px; }
.bottom-nav button.active-nav { color: var(--accent); }
.bottom-nav .bottom-plus .bottom-nav-icon { width: 34px; height: 30px; border-radius: 10px; background: var(--accent-tint); color: var(--on-tint); }
.bottom-nav .bottom-plus .bottom-nav-icon .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.bottom-nav .inline-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }

.toast { position: fixed; left: 50%; bottom: calc(var(--bottom-nav) + 16px + env(safe-area-inset-bottom)); z-index: 500; width: max-content; max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border-radius: 12px; background: #33393d; color: #fff; font-size: 15px; line-height: 1.45; text-align: center; box-shadow: var(--shadow-lg); transform: translateX(-50%); }

/* ---------- Home ---------- */
.home-hero { display: grid; gap: 28px; align-items: center; padding-top: 8px; }
.home-intro { display: grid; justify-items: start; }
.project-guide {display:grid;gap:7px;padding:15px 18px;border:1px solid #dce6f4;border-radius:12px;background:#f1f6fc;color:#304a67}
.project-guide p {margin:0;font-size:14px;line-height:1.5}
.project-guide small {font-size:12px;line-height:1.5;color:#526885}
.home-entry-groups {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;margin-top:22px}
.home-entry-group {display:grid;grid-template-rows:auto 1fr 1fr;gap:8px;min-width:0}
.home-entry-group h2 {margin:0 0 2px;font-size:15px;font-weight:700;color:#315c83}
.home-entry-group .navigation-choice {gap:4px;padding:14px 18px;border-radius:12px}
.home-entry-group .navigation-choice strong {font-size:17px;font-weight:600}
.home-entry-group .navigation-choice span {font-size:14px;line-height:1.4}
.home-project-entry {display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:18px;font-size:14px;color:var(--text-2)}
.home-discovery-tabs {margin:0 0 16px;max-width:100%;flex-wrap:wrap}
.home-discovery-more {display:flex;justify-content:flex-end;margin-top:14px}
.home-listing-view{display:none}
@media(min-width:900px){
 .home-listing-view{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
 .home-listing-view-label{padding:0 8px;font-size:13px;color:var(--text-2)}
 .home-listing-view button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--text-2);font-size:13px;white-space:nowrap}
 .home-listing-view button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
 .home-listing-view button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .home-listing-view svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
 #heroPreviewTasks[data-listing-view="list"],#homeServiceList[data-listing-view="list"]{grid-template-columns:minmax(0,1fr)}
 #heroPreviewTasks[data-listing-view="grid2"],#homeServiceList[data-listing-view="grid2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
 #heroPreviewTasks[data-listing-view="grid3"],#homeServiceList[data-listing-view="grid3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
 #heroPreviewTasks[data-listing-view] .preview-task{min-width:0;min-height:88px;grid-template-columns:64px minmax(0,1fr) minmax(110px,auto);padding:12px}
 #heroPreviewTasks[data-listing-view] .preview-thumb{width:64px;height:64px}
 #heroPreviewTasks[data-listing-view="grid3"] .preview-task{grid-template-columns:48px minmax(0,1fr);gap:6px 10px}
 #heroPreviewTasks[data-listing-view="grid3"] .preview-thumb{grid-row:1/3;width:48px;height:64px}
 #heroPreviewTasks[data-listing-view="grid3"] .preview-task-details{grid-column:2;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;text-align:left}
 #homeServiceList[data-listing-view]:not([data-listing-view="list"]) .service-result{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px}
 #homeServiceList[data-listing-view]:not([data-listing-view="list"]) .service-result-info{grid-column:1/-1}
 #homeServiceList[data-listing-view]:not([data-listing-view="list"]) .service-result-price{text-align:left}
 #heroPreviewTasks[data-listing-view]>.empty,#homeServiceList[data-listing-view]>.empty{grid-column:1/-1}
}
@media(max-width:899px){#heroPreviewTasks[data-listing-view],#homeServiceList[data-listing-view]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px) {.home-entry-groups {grid-template-columns:1fr}}
.home-kicker { color: var(--text-2); font-size: 15px; }
#homeTitle { margin: 6px 0 10px; font-family: var(--font-hand); font-size: clamp(48px, 9vw, 70px); font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--heading); }
.home-lead { max-width: 36ch; color: var(--text-2); font-size: 19px; line-height: 1.45; }
.entry-paths { display: grid; gap: 12px; width: 100%; margin-top: 26px; }
.entry-choice { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: 16px; width: 100%; min-height: 108px; padding: 22px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); text-align: left; box-shadow: 0 3px 12px rgba(48,57,65,.06); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.entry-choice:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.entry-choice:active { transform: translateY(1px); }
.entry-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--fill); color: var(--on-tint); }
.entry-icon .icon { width: 28px; height: 28px; }
.entry-copy { display: grid; gap: 2px; min-width: 0; }
.entry-title { color: var(--heading); font-size: 22px; font-weight: 500; line-height: 1.3; }
.entry-copy small { color: var(--text-2); font-size: 15px; line-height: 1.4; }
.entry-arrow { color: var(--text-3); }
.entry-choice:hover .entry-arrow { color: var(--accent); }
.welcome-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--text-2); font-size: 15px; }
.welcome-note button { margin-left: 8px; }
.welcome-note .icon { width: 18px; height: 18px; color: var(--text-3); }
.home-visual { display: block; overflow: hidden; border-radius: 18px; background: var(--fill); box-shadow: var(--shadow); }
.home-visual img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }

.home-section { margin-top: 48px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.home-section h2 { font-size: 22px; }
.latest-list { display: grid; gap: 10px; }
.preview-task { display: grid; grid-template-columns: 104px minmax(0, 1fr) 100px; align-items: center; gap: 12px; width: 100%; min-height: 152px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.preview-task:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.preview-thumb { position: relative; width: 104px; height: 116px; overflow: hidden; border-radius: 10px; background: var(--fill); color: var(--text-3); }
.preview-thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.preview-thumb-icon { position: absolute; inset: 0; display: grid; place-items: center; }
.preview-thumb-icon svg { width: 28px; height: 28px; }
.preview-task-copy { display: grid; gap: 1px; min-width: 0; }
.preview-task-title { color: var(--heading); font-size: 15px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.preview-task-meta { overflow: hidden; color: var(--text-2); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.preview-task-details { display: grid; justify-items: end; gap: 8px; min-width: 0; text-align: right; }
.preview-task-details .preview-task-meta { max-width: 100%; white-space: normal; font-size: 13px; }
.preview-task-price { color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap; }
@media (max-width: 479px) {
  .preview-task { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; min-height: 144px; padding: 14px; }
  .preview-thumb { grid-row: 1 / 3; width: 96px; height: 112px; }
  .preview-task-details { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
  .preview-task-details .preview-task-meta { font-size: 12.5px; }
  .preview-task-price { font-size: 14px; }
  .entry-choice { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; padding: 18px 16px; }
  .entry-icon { width: 44px; height: 44px; }
  .entry-icon .icon { width: 24px; height: 24px; }
  .entry-title { font-size: 20px; }
}

.home-steps h2 { margin-bottom: 16px; }
.steps { display: grid; gap: 12px; padding: 0; list-style: none; }
.steps li { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.steps h3 { margin-bottom: 2px; font-size: 17px; }
.steps p { color: var(--text-2); font-size: 15px; }
.step-no { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1.5px solid var(--accent-line); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1; }

/* ---------- Find tasks ---------- */
.job-search { display: grid; gap: 0; padding: 6px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.job-search-field { display: grid; gap: 2px; padding: 10px 12px; border-radius: 11px; cursor: text; }
.job-search-field + .job-search-field { border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; }
.job-search-field:focus-within { background: var(--surface-soft); box-shadow: inset 0 0 0 2px var(--accent-line); }
.job-search-label { color: var(--text-2); font-size: 13px; font-weight: 600; }
.searchbox { display: flex; align-items: center; gap: 10px; }
.searchbox .icon { color: var(--text-3); }
.job-search .searchbox input { min-height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16.5px; }
.job-search .searchbox input:focus { box-shadow: none; }
.job-search .searchbox input::-webkit-search-cancel-button { cursor: pointer; }
.job-search-submit { min-height: 46px; margin: 4px 6px 6px; border-radius: 11px; }

.job-filterbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cat sort"; gap: 12px; margin: 16px 0 4px; }
.job-filterbar #filters { display: contents; }
.category-filter { grid-area: cat; display: grid; gap: 6px; }
#jobSortControl { grid-area: sort; }
.filter-label, #jobSortLabel { color: var(--text-2); font-size: 13px; font-weight: 600; }
.sort-label { position: relative; display: grid; gap: 6px; }
.sort-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; text-align: left; }
.sort-trigger svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.sort-label.open .sort-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.sort-label.open .sort-trigger svg { transform: rotate(180deg); }
.sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; min-width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.sort-menu button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 15px; text-align: left; white-space: nowrap; }
.sort-menu button:hover, .sort-menu button:focus-visible { background: var(--fill); }
.sort-menu button.active { background: var(--accent-soft); color: var(--on-tint); font-weight: 500; }

.job-search-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 18px 0 12px; color: var(--text-2); font-size: 15px; }
.job-search-count b { color: var(--text); font-weight: 600; }
.match-hint { display: flex; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--info-bg); color: var(--info); font-size: 14.5px; }

.job-grid { display: grid; gap: 12px; }
.job { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: 1fr auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.job:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.job:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--focus); }
.job > .job-media { grid-row: 1 / span 2; height: 100%; min-height: 132px; }
.job-summary { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px 0; }
.job-category { color: var(--text-2); font-size: 13px; font-weight: 500; }
.job h3 { display: -webkit-box; overflow: hidden; margin-bottom: 4px; font-size: 16.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.job .meta { display: flex; align-items: flex-start; gap: 6px; font-size: 14.5px; line-height: 1.4; }
.job .meta .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--text-3); }
.job .meta span { min-width: 0; }
.job-offer-state { justify-self: start; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--info-bg); color: var(--info); font-size: 13px; font-weight: 500; }
.job-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 10px 14px 12px; }
.job-budget { display: grid; }
.job-budget small { color: var(--text-2); font-size: 13px; }
.job .price { color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.job-open-cta { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 500; white-space: nowrap; }
.job-open-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.job-open-cta:focus-visible { outline: none; }
.jobs-more { display: flex; justify-content: center; margin-top: 20px; }
.jobs-more span { color: var(--text-2); font-weight: 400; }
#emptyJobs { margin-top: 4px; }

/* Task photos and avatars */
.job-media, .detail-media { position: relative; overflow: hidden; background: var(--fill); }
.job-media img, .detail-media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.job-media-fallback-visual { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.job-media-fallback-visual svg { width: 34px; height: 34px; }

.mini-avatar, .conversation-avatar, .public-profile-avatar, .avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #ebe6df; color: #5a5148; font-weight: 600; line-height: 1; }
.mini-avatar { width: 36px; height: 36px; font-size: 15px; }
.mini-avatar.large, .conversation-avatar.large { width: 48px; height: 48px; font-size: 18px; }
.conversation-avatar { width: 44px; height: 44px; font-size: 17px; font-weight: 400; }
.mini-avatar > img, .conversation-avatar > img, .public-profile-avatar > img, .avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback-layer { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---------- Modals ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(32, 34, 36, .46); }
.modal-card { position: relative; width: 100%; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: var(--shadow-lg); animation: sheet-in .2s ease-out; }
@keyframes sheet-in { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-close { position: sticky; top: 0; z-index: 5; float: right; display: grid; place-items: center; width: 40px; height: 40px; margin: -2px -2px 8px 12px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); font-size: 24px; line-height: 1; box-shadow: var(--shadow-sm); }
.modal-close:hover { background: var(--fill); color: var(--text); }
.modal-card h2 { font-size: 23px; }

/* Task details */
.detail-category { color: var(--text-2); font-size: 14px; font-weight: 500; }
.detail-head h2, .manage-head h2 { margin: 4px 0 12px; font-size: clamp(22px, 4vw, 27px); }
.detail-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; }
.detail-facts li { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 15px; }
.detail-facts .icon { width: 18px; height: 18px; color: var(--text-3); }
.detail-card .modal-close { position: absolute; top: 18px; right: 18px; float: none; margin: 0; }
.detail-card .detail-head { padding-right: 46px; }
.detail-card .detail-head h2 { margin: 0 0 10px; font-size: 23px; font-weight: 500; line-height: 1.3; }
.detail-budget { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 16px; }
.detail-budget .price { color: var(--text); font-size: 20px; font-weight: 500; line-height: 1.2; }
.detail-budget small { color: var(--text-2); font-size: 14px; }
.detail-summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 16px; margin: 22px 0; }
.detail-media { width: 100%; height: 128px; margin: 0; border-radius: var(--radius); }
.detail-description { min-width: 0; }
.detail-description > p { color: var(--text); font-size: 15px; line-height: 1.6; white-space: pre-line; }
.detail-card .detail-facts { gap: 8px 16px; }
.detail-card .detail-facts li { color: var(--text-2); font-size: 14px; }
.detail-owner-section .person-profile-link { padding: 6px 0; border: 0; }
.detail-owner-section .detail-owner-label { margin: 0 0 4px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.detail-owner-section .person-profile-cta { font-size: 14px; }
.detail-owner-section .detail-trust-row { margin-top: 10px; }
.detail-owner-section .trust-status.is-compact { font-size: 13px; }
.detail-owner-section .person-copy, .detail-owner-section .person-copy b { min-width: 0; overflow-wrap: anywhere; }
.detail-owner-section .trust-report-button { min-height: 44px; }
.detail-card .demo-direct-accept { gap: 0; }
.detail-section { padding: 18px 0; border-top: 1px solid var(--line); }
.detail-media + .detail-section { border-top: 0; }
.detail-section h3, .detail-action h3, .selected-worker-box h3 { margin-bottom: 8px; font-size: 16.5px; }
.detail-section > p { color: var(--text); font-size: 16px; line-height: 1.6; white-space: pre-line; }
.equipment-service-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 14px; background: var(--warn-bg); border-color: var(--warn-line); color: #5f4a1c; }
.equipment-service-notice strong { display: block; color: #5a4512; font-weight: 600; }
.person-profile-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; transition: background-color .15s ease, border-color .15s ease; }
.person-profile-link:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.person-copy { display: grid; gap: 1px; min-width: 0; }
.person-copy b { color: var(--heading); font-size: 16px; font-weight: 500; }
.person-copy span { color: var(--text-2); font-size: 14px; }
.person-profile-cta { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--accent); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.person-profile-cta .icon { width: 18px; height: 18px; }
.detail-trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 10px; }
.trust-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-soft); border: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; }
.trust-status strong { display: block; color: var(--text); font-weight: 500; }
.trust-status small { display: block; color: var(--text-2); font-size: 13.5px; }
.trust-status-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-bg); color: var(--text-2); font-size: 12px; font-weight: 700; font-style: normal; }
.trust-status.is-verified .trust-status-icon { background: var(--ok-bg); color: var(--ok); }
.trust-status.is-compact { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 14px; }
.trust-status.is-compact strong { color: var(--text-2); font-weight: 400; }
.detail-action { padding-top: 18px; border-top: 1px solid var(--line); }
.apply-box { display: grid; gap: 12px; }
.apply-box h3 { margin: 0; font-size: 19px; }
.apply-box > p { color: var(--text-2); font-size: 15px; }
.apply-box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#jobModal .detail-card:has(.sent-proposal) { background: var(--bg); }
.sent-proposal { padding: 16px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--surface); }
.sent-proposal-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--on-tint); overflow-wrap: anywhere; }
.sent-proposal-total strong { font-size: 20px; font-weight: 600; }
.sent-proposal-next { margin: 0; }
.sent-proposal-details summary { cursor: pointer; color: var(--accent); font-weight: 500; min-height: 44px; padding: 12px 0; }
.sent-proposal-details[open] summary { margin-bottom: 8px; }
.sent-proposal .danger-link { justify-self: start; min-height: 44px; }
.withdraw-confirm { width: min(420px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); }
.withdraw-confirm::backdrop { background: rgba(20, 35, 50, .55); }
.withdraw-confirm h3 { margin: 0 0 10px; }
.withdraw-confirm p { margin: 0; line-height: 1.5; color: var(--text-2); }
.withdraw-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.withdraw-confirm-actions button { min-height: 44px; padding: 0 16px; }
.owner-job-action-kicker { color: var(--text-2); font-size: 14px; font-weight: 500; }
.transparent-offer-form { display: grid; gap: 12px; }
.detail-summary-no-media { display: block; }
.detail-trust-collapsed { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.detail-trust-collapsed summary, .offer-extra summary { cursor: pointer; }
.offer-extra label { display: block; margin-top: 8px; }
@media (max-width: 479px) {
  .simple-task-detail .detail-budget { margin-bottom: 8px; }
  .simple-task-detail .detail-summary-no-media { margin: 12px 0; }
  .simple-task-detail .detail-owner-section { padding: 8px 0; }
  .simple-task-detail .detail-action { padding-top: 10px; }
  .simple-task-detail .apply-box { gap: 9px; }
}
.offer-total-preview { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.offer-total-preview[hidden] { display: none; }
.offer-total-preview strong { color: var(--text); font-size: 19px; font-weight: 600; }
.earnings-note { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.declaration-saved { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 14.5px; }
.declaration-saved .icon { width: 18px; height: 18px; }
.risk-job-notice { display: grid; gap: 2px; padding: 12px 14px; border-left: 3px solid #c89a3a; border-radius: 8px; background: var(--warn-bg); color: #5f4a1c; font-size: 14.5px; }
.risk-job-notice strong { color: #5a4512; font-weight: 600; }
.transparent-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.transparent-offer-grid > span { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface); }
.transparent-offer-grid small { color: var(--text-2); font-size: 13px; }
.transparent-offer-grid b { color: var(--text); font-size: 15.5px; font-weight: 500; }
.transparent-offer-grid .transparent-offer-total { background: var(--surface-soft); }
.transparent-offer-grid .transparent-offer-total b { font-size: 17px; font-weight: 600; }
.offer-note { display: grid; gap: 2px; margin-top: 10px; color: var(--text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.offer-summary-note { overflow-wrap: anywhere; }
.offer-note small { color: var(--text-2); font-size: 13px; }

/* Manage a posted task */
.manage-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.progress-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 22px 0 18px; padding: 0; list-style: none; }
.progress-steps li { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 2px; color: var(--text-3); font-size: 13px; line-height: 1.3; text-align: center; }
.progress-steps li:not(:first-child)::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.progress-steps li.is-done::before, .progress-steps li.is-current::before { background: #9cc2ac; }
.progress-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text-3); font-size: 13px; font-weight: 600; }
.progress-dot .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.progress-steps .is-done .progress-dot { border-color: #9cc2ac; background: var(--ok-bg); color: var(--ok); }
.progress-steps .is-current .progress-dot { border-color: var(--accent-mark); color: var(--on-tint); }
.progress-steps .is-current { color: var(--heading); font-weight: 500; }
.progress-cancelled { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0; padding: 12px 14px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-size: 15px; }
.next-step { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.next-step h3 { font-size: 17px; }
.next-step p { color: var(--text-2); font-size: 15px; }
.workflow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; }
.review-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 14.5px; font-weight: 500; }
.review-done .icon { width: 18px; height: 18px; }
.selected-worker-box { margin-top: 22px; }
.selected-worker-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; }
.manage-primary-action { margin: 18px 0; }
.modal-card.active-task-card { width: min(540px, 100%); }
.active-task-card .manage-head { padding-right: 44px; }
.active-task-card .transparent-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.active-task-card .transparent-offer-grid > span { min-width: 0; padding: 10px 12px; gap: 4px; }
.active-task-card .transparent-offer-grid small, .active-task-card .transparent-offer-grid b { white-space: normal; overflow-wrap: anywhere; }
.active-task-when { margin: 6px 0 18px; color: var(--text-2); line-height: 1.6; }
.active-task-card .active-task-person { flex-wrap: wrap; }
.active-task-card .active-task-state { padding: 14px 16px; border-radius: 10px; background: var(--surface-soft); color: var(--heading); font-size: 16px; }
@media (min-width: 760px) {
  .modal-card.active-task-card { width: min(860px, 100%); padding: 32px 40px 36px; }
  .active-task-card .active-task-price { margin: 24px 0; }
  .active-task-card .active-task-actions { margin: 24px 0; }
}
.active-task-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.active-task-price strong { color: var(--heading); font-size: 28px; font-weight: 500; }
.active-task-price > span { color: var(--text-2); font-size: 13px; }
.active-task-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.active-task-profile { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 400; text-align: left; }
.active-task-state { margin: 18px 0 10px; color: var(--text-2); font-size: 14px; }
.active-task-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 18px 0; }
.active-task-actions .primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.active-task-actions .primary:hover:not(:disabled), .active-task-actions .primary:focus-visible { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.active-task-actions .primary:disabled { background: #edf0f2; border-color: #d9dfe3; color: #69757b; opacity: 1; }
.active-task-details > .danger-link { display: block; margin: 24px 0 0 auto; }
.active-task-details > p { margin: 12px 0; color: var(--text-2); font-size: 14px; }
.active-task-details .task-payment-status { margin: 16px 0; }
.active-task-details .offer-list { margin: 16px 0; }
.active-task-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 14px 0 26px; }
.active-task-overview .active-task-person { align-items: flex-start; gap: 14px; }
.active-task-overview .active-task-profile { align-items: center; }
.active-task-person-copy { display: grid; gap: 5px; }
.active-task-person-copy strong { color: var(--heading); font-size: 17px; font-weight: 600; }
.active-task-person-copy small { color: var(--text-2); font-size: 12px; font-weight: 400; }
.active-task-overview .active-task-price { display: grid; justify-items: end; gap: 4px; margin: 0; }
.active-task-overview .active-task-price strong { font-size: 29px; font-weight: 650; line-height: 1.2; }
.active-task-overview .active-task-price > span { color: var(--text-2); font-size: 12px; }
.active-task-next-step { margin: 0 0 26px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.active-task-next-step.is-payment { border-color: #c5d8ff; background: #eff5ff; }
.active-task-next-step.is-completed { border-color: #cae4d4; background: #f2faf5; }
.active-task-card .is-completed .active-task-state { color: #24613f; }
.active-task-settlement { margin-top: 20px; padding-top: 16px; border-top: 1px solid #d6e8dd; display: grid; gap: 5px; }
.active-task-settlement > span { font-size: 12px; color: #567462; }
.active-task-settlement > strong { font-size: 15px; font-weight: 600; color: #294e38; }
.active-task-settlement > small { font-size: 12px; color: #567462; }
.text-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: #49627c; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-btn:hover { color: #1d4ed8; background: transparent; }
.text-btn:focus-visible { outline: 3px solid #b9d0ff; outline-offset: 3px; border-radius: 3px; }
.active-task-help { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -10px 0 22px; color: #6c7886; font-size: 13px; flex-wrap: wrap; }
.active-task-step-label { color: #4f6583; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.active-task-card .active-task-next-step .active-task-state { margin: 8px 0; padding: 0; background: transparent; border-radius: 0; color: #172b4d; font-size: 23px; font-weight: 650; }
.active-task-next-step > p { max-width: 570px; margin: 0; color: #4a5e79; font-size: 14px; line-height: 1.6; }
.active-task-card .active-task-next-step .active-task-actions { margin: 22px 0 0; }
@media (max-width: 540px) {
  .active-task-overview { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .active-task-overview .active-task-price { justify-items: start; }
  .active-task-next-step { padding: 20px; }
}
.selected-worker-trust > summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.selected-worker-trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.manage-offers { margin-top: 26px; }
.manage-offers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.manage-offers-head h3 { font-size: 18px; }
.manage-offers-count { display: inline-grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.offer-transparency-note, .manage-offers-history-note { margin: 4px 0 12px; color: var(--text-2); font-size: 14px; }
.offer-list { display: grid; gap: 12px; }
.offer-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.offer-card.offer-selected { border-color: #c5dccd; box-shadow: inset 3px 0 0 #7fae93; }
.offer-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.offer-card .offer-worker { padding: 0; border: 0; background: none; }
.offer-card .offer-worker:hover { background: none; }
.offer-card .offer-worker:hover b { color: var(--accent); }
.offer-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.offer-moderation-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.offer-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Keep the decision visible; expand the breakdown and history on demand. */
#manageDetail .manage-head h2 { max-width: 650px; margin: 8px 0 10px; font-size: clamp(21px, 3vw, 25px); font-weight: 500; }
.manage-budget-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--text-2); font-size: 14px; }
.manage-budget-inline strong { color: var(--text); font-weight: 500; }
#manageDetail .manage-offers { margin-top: 22px; }
#manageDetail .manage-offers-head { margin-bottom: 12px; }
#manageDetail .manage-offers-head h3 { font-size: 17px; font-weight: 500; }
.offer-card-simple .offer-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.offer-card-simple .mini-avatar.large { width: 40px; height: 40px; flex: 0 0 40px; font-size: 17px; }
.offer-card-simple .person-copy b { font-size: 15px; }
.offer-card-simple .person-copy span { font-size: 13px; }
.offer-summary-price { display: grid; gap: 2px; text-align: right; }
.offer-summary-price small { color: var(--text-2); font-size: 12px; }
.offer-summary-price strong { color: var(--heading); font-size: 20px; font-weight: 500; white-space: nowrap; }
.offer-summary-note { margin: 0 0 8px; color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.offer-summary-schedule { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.offer-summary-schedule .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.offer-more { margin-top: 12px; font-size: 13px; }
.offer-more summary, .offer-history > summary, .manage-more > summary { width: fit-content; cursor: pointer; color: var(--text-2); padding: 8px 0; }
.offer-more[open] summary { margin-bottom: 8px; }
.offer-more .offer-note { display: none; }
.offer-more .offer-moderation-actions { margin-top: 12px; }
.offer-unverified-note { color: var(--text-2); font-size: 12px; }
.offer-card-simple .offer-footer { margin-top: 8px; padding-top: 12px; }
.offer-card-simple .offer-actions { gap: 8px; }
.offer-history { margin-top: 18px; font-size: 14px; }
.manage-more { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.manage-description { margin: 12px 0; white-space: pre-line; line-height: 1.6; }
@media (max-width: 479px) {
  .offer-card-simple { padding: 14px; }
  .offer-card-simple .offer-card-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .offer-summary-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; text-align: left; }
  .offer-summary-price strong { font-size: 19px; }
  .offer-card-simple .offer-footer { display: grid; }
  .offer-card-simple .offer-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; }
}

/* ---------- Create a task ---------- */
.task-payment-modal { z-index: 240; }
.task-problem-modal { z-index: 250; }
.modal-card.task-problem-card { width: min(720px, 100%); padding: 24px 28px; }
.task-problem-card h2 { margin: 6px 0 8px; font-size: 27px; color: #172b4d; }
.task-problem-context { margin: 0 0 16px; color: var(--text-2); font-size: 14px; }
.task-problem-card form > label, .task-problem-card #taskProblemFields > label { display: block; margin: 14px 0 7px; font-weight: 650; color: #233851; }
.task-problem-card select, .task-problem-card textarea { width: 100%; min-width: 0; font: inherit; font-size: 15px; color: #26384b; background: #fff; border: 1px solid #b7c6d7; border-radius: 9px; padding: 12px; }
.task-problem-card textarea { resize: vertical; line-height: 1.55; }
.task-problem-card select:focus, .task-problem-card textarea:focus { outline: 3px solid #c5d8ff; border-color: #2563eb; }
.task-problem-hint, .task-problem-privacy { font-size: 13px; line-height: 1.55; color: #56697f; }
.task-problem-hint { margin: 0 0 10px; }
.task-problem-count { display: block; text-align: right; color: var(--text-2); margin-top: 6px; }
.task-problem-payment { margin: 16px 0 12px; padding: 14px 16px; border: 1px solid #e6c98d; border-radius: 12px; background: #fff8e9; color: #69470e; }
.task-problem-payment strong { display: block; font-size: 15px; }
.task-problem-payment p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; }
.task-problem-next { margin: 22px 0; padding: 18px 20px; background: #eff5ff; border-radius: 12px; color: #314d73; }
.task-problem-next h3, .task-support-description h3, .task-support-replies h3 { margin: 0 0 9px; font-size: 16px; }
.task-problem-next p, .task-problem-next li { font-size: 14px; line-height: 1.6; }
.task-problem-next p { margin: 0; }
.task-problem-next ol { padding-left: 19px; margin: 0; }
.task-problem-next li + li { margin-top: 6px; }
.task-problem-actions { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--line); background: #fff; }
.task-problem-explanation { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #48668d; }
.task-problem-explanation summary { cursor: pointer; font-weight: 600; }
.task-problem-explanation p { margin-bottom: 0; }
.task-problem-actions .primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.task-problem-actions .primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.task-problem-actions .primary:disabled { background: #e9eef5; border-color: #dce4ed; color: #66778a; cursor: default; opacity: 1; }
.task-problem-error { color: #b42318; font-size: 14px; }
.task-support-state { margin: 22px 0; }
.task-support-state p { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.task-support-description { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.task-support-description p, .task-support-replies article p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.task-support-description small { color: var(--text-2); }
.task-support-replies article { padding: 14px 16px; background: #f5f7fa; border-radius: 10px; margin: 10px 0; }
.task-support-replies article time { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
@media(max-width: 540px) { .task-problem-card h2 { font-size: 24px; } .task-problem-payment,.task-problem-next { padding: 16px; } .task-problem-actions { display: grid; grid-template-columns: 1fr; } .task-problem-actions .primary { grid-row: 1; } }
.task-payment-card { max-width: 480px; }
.payment-demo-label, .task-payment-status small { color: var(--text-2); font-size: 12px; }
.task-payment-card h2 { margin: 10px 0 8px; font-size: 23px; font-weight: 500; }
.task-payment-task { color: var(--text-2); font-size: 14px; }
.task-payment-total { margin: 16px 0 20px; color: var(--heading); font-size: 30px; font-weight: 500; }
.task-payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.task-payment-methods button { display: grid; place-content: center; gap: 3px; min-height: 70px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 17px; }
.task-payment-methods button small { font-size: 11px; font-weight: 400; }
.task-payment-methods button[aria-pressed="true"] { border: 2px solid #596971; background: #f1f4f6; }
.task-payment-explanation { margin: 14px 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.task-payment-card > div > .full { margin-top: 10px; }
.task-payment-error { margin: 12px 0; color: #8c3f34; font-size: 14px; }
.task-payment-test-options { margin-top: 18px; font-size: 13px; color: var(--text-2); }
.task-payment-test-options summary { cursor: pointer; padding: 8px 0; }
.task-payment-test-options button { margin: 6px 6px 0 0; }
.task-payment-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.task-payment-status p { margin-top: 3px; font-size: 14px; }
.task-payment-status strong { font-weight: 500; }
.task-payment-split { flex-basis: 100%; color: var(--text-2); font-size: 12px; }
.task-payment-split summary { width: fit-content; cursor: pointer; }
.task-payment-split p { margin: 8px 0; font-size: 12px; line-height: 1.6; }

/* ---------- Create a task ---------- */
.form-page { max-width: 780px; margin: 0 auto; }
.panel { padding: 4px 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.form-step { display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.form-step:first-child { border-top: 0; }
.form-step h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.form-step-extras { display: grid; gap: 10px; }
.job-form-steps .form-step { gap: 12px; padding: 18px 0; }
.job-form-steps .form-step h3 { font-size: 16px; font-weight: 500; }
.job-form-steps label { gap: 5px; font-size: 14px; }
.job-form-steps #desc { min-height: 84px; height: 84px; }
.job-form-steps.is-project #desc {min-height:132px;height:132px}
.job-form-steps .char-count { display: none; }
.job-form-steps label:focus-within .char-count { display: block; }
.form-optional > summary { width: fit-content; color: var(--text-2); font-size: 14px; cursor: pointer; }
.form-optional[open] > summary { margin-bottom: 12px; }
.form-price-help p { margin: 10px 0 0; text-align: left; }
.option-row { display: flex; grid-template-columns: none; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 400; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.option-row:hover { border-color: #b8bfc8; }
.option-row:has(input[type="checkbox"]:checked) { border-color: var(--accent-mark); background: var(--accent-soft); }
.option-row input[type="checkbox"] { width: 20px; height: 20px; }
.option-copy { display: grid; gap: 1px; }
.option-copy b { color: var(--text); font-size: 15.5px; font-weight: 500; }
.option-copy small { color: var(--text-2); font-size: 13.5px; }
.image-upload-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.image-upload-empty { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.image-upload-empty .icon { width: 22px; height: 22px; }
.image-preview { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 15px; font-weight: 500; }
.image-preview img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; }
.image-field { display: grid; gap: 4px; }
.image-remove { justify-self: start; font-size: 14px; }
.equipment-details { display: grid; }
.form-step-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.job-location-summary { display: flex; align-items: center; }
.job-location-summary-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--text-2); border: 1px solid var(--line); }
.job-location-summary-copy { display: grid; gap: 2px; min-width: 0; }
.job-location-summary-copy b { color: var(--text); font-size: 16px; font-weight: 500; }
.job-location-summary-copy small { color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.form-step-when { display: grid; gap: 14px; align-items: end; }
.job-schedule-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.job-date-time { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 6px; }
.job-date-time input, .job-date-time select { min-width: 0; max-width: 100%; padding-inline: 8px; }
@media (max-width: 639px) { .job-schedule-row { grid-template-columns: minmax(0, 1fr); } }
/* iOS Safari: datum/vreme ima širok nativni minimum; fields must shrink inside the form card. */
#jobForm .job-schedule-row label { min-width: 0; }
#jobForm .job-schedule-row input[type="date"] {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.price-guidance { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.form-budget-row { display: grid; grid-template-columns: minmax(0, 190px) 88px minmax(0, 1fr); align-items: end; gap: 18px; }
.form-budget-row .checkrow { align-self: center; margin-top: 20px; }
.form-submit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-submit > .form-note { grid-column: 1 / -1; }
.form-attachments > summary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); text-align: center; list-style: none; }
.form-attachments > summary::-webkit-details-marker { display: none; }
.form-attachments .form-step-extras { padding-bottom: 12px; }
@media (max-width: 479px) {
  .form-budget-row { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; }
  .form-budget-row .checkrow { grid-column: 1 / -1; margin: 0; }
  .form-submit { grid-template-columns: minmax(0, 1fr); }
}
.form-note { color: var(--text-2); font-size: 13.5px; line-height: 1.5; text-align: center; }

/* ---------- My tasks ---------- */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--fill); }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-size: 15px; font-weight: 500; white-space: nowrap; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface); color: var(--heading); box-shadow: var(--shadow-sm); }
.segmented-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(60, 56, 50, .08); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.segmented-count:empty { display: none; }
.activity-controls {display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:18px}
.activity-switcher {margin-bottom:0}

.pending-review-section {display:flex;align-items:center;min-width:0;margin-left:auto}
.pending-review-list > button,.pending-review-picker > summary {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text-2);font-size:15px;font-weight:500}
.pending-review-picker {position:relative}
.pending-review-picker > summary {cursor:pointer;list-style:none;white-space:nowrap}
.pending-review-picker > summary::-webkit-details-marker {display:none}
.pending-review-picker > summary:hover {color:var(--text)}
.pending-review-picker > summary:focus-visible {outline:2px solid #2563eb;outline-offset:2px}
.pending-review-options {position:absolute;right:0;top:calc(100% + 8px);z-index:12;width:min(560px,calc(100vw - 64px));padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);max-height:50vh;overflow:auto}
.pending-review-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--warn-line); }
.pending-review-card:first-child { border-top: 0; }
.review-page-subtitle { margin-bottom: 12px; font-size: 17px; }
.review-page-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.review-page-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
.review-page-item:first-child { border-top: 0; }
.review-page-item p { margin-top: 4px; color: var(--text-2); }
.pending-review-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pending-review-copy { display: grid; gap: 1px; min-width: 0; }
.pending-review-copy strong { color: var(--heading); font-size: 16px; font-weight: 500; }
.pending-review-copy span { color: var(--text-2); font-size: 14px; }

.task-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.task-list:has(> .empty) { border: 0; background: none; overflow: visible; }
.task-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; align-items: start; padding: 14px; border-top: 1px solid var(--line); }
.task-row:first-child { border-top: 0; }
.activity-row { position: relative; }
.activity-row-open { position: absolute; inset: 0; z-index: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
.activity-row-open:hover { background: var(--surface-soft); }
.activity-row-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.activity-row > :not(.activity-row-open) { position: relative; z-index: 1; pointer-events: none; }
.activity-row-actions button, .activity-row-actions a { pointer-events: auto; }
.activity-row-media { grid-row: 1 / 3; }
.activity-row-media .job-media { width: 96px; height: 112px; border-radius: 10px; }
.activity-row-media .job-media-fallback-visual svg { width: 24px; height: 24px; }
.activity-task-context { display: grid; gap: 3px; min-width: 0; }
.activity-task-context h4 { color: var(--heading); font-size: 16.5px; font-weight: 500; }
.activity-task-context .meta { font-size: 14.5px; }
.activity-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.activity-row-note { color: var(--text-2); font-size: 14px; }
.activity-offer-breakdown { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; color: var(--text-2); font-size: 14px; }
.activity-row-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.activity-price { color: var(--text); font-size: 17px; font-weight: 600; white-space: nowrap; }
.activity-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.activity-row-actions:empty { display: none; }
.activity-row > .activity-row-tags { grid-column: 2; display: grid; align-content: center; justify-items: start; gap: 7px; margin: 0; }
.activity-row .activity-task-context h4 { font-size: 15px; font-weight: 500; line-height: 1.4; }
.activity-row .activity-row-note { font-size: 13px; }
.activity-row .activity-price { font-size: 15px; font-weight: 500; }

/* ---------- Messages ---------- */
.messages-shell { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.conversation-panel { display: flex; flex-direction: column; min-height: 0; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-title h3 { font-size: 16px; }
.conversation-list { flex: 1; min-height: 0; overflow-y: auto; }
.conversation-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.conversation-item:hover { background: var(--surface-soft); }
.conversation-item.active { background: #f2f4f7; box-shadow: inset 3px 0 0 var(--accent-mark); }
.conversation-copy { display: grid; gap: 1px; min-width: 0; }
.conversation-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conversation-name { overflow: hidden; color: var(--heading); font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.conversation-line time { flex: 0 0 auto; color: var(--text-3); font-size: 13px; }
.conversation-task, .conversation-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-task { color: var(--text); font-size: 14.5px; font-weight: 400; }
.conversation-preview { color: var(--text-2); font-size: 14px; font-weight: 400; }
.conversation-item.has-unread .conversation-preview { color: var(--text-2); font-weight: 400; }
.conversation-unread { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #dfecf6; color: var(--on-tint); font-size: 12px; font-weight: 500; }
.chat-panel { display: none; flex-direction: column; min-width: 0; min-height: 0; }
.messages-shell.is-chat-open .conversation-panel { display: none; }
.messages-shell.is-chat-open .chat-panel { display: flex; height: calc(100dvh - var(--topbar) - var(--bottom-nav) - 60px); min-height: 420px; }
#messages:has(.messages-shell.is-chat-open) .page-head { display: none; }
.messages-shell:not(.is-chat-open) .conversation-item.active { background: none; box-shadow: none; }
.messages-shell:has(.compact-empty) .chat-panel { display: flex; }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-back { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--text-2); }
.chat-back:hover { background: var(--fill); }
.chat-back .icon { width: 22px; height: 22px; }
.chat-head .chat-person-link { width: auto; min-width: 0; padding: 4px 10px 4px 4px; border: 0; background: none; }
.chat-head .chat-person-link:hover { background: var(--fill); }
.chat-person-copy { display: grid; min-width: 0; }
.chat-person-copy h3 { overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-copy span { color: var(--accent); font-size: 13.5px; font-weight: 500; }
.chat-task-context { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #f3f5f7; }
.chat-task-copy { display: grid; min-width: 0; }
.chat-task-copy strong { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-task-copy em { color: var(--text-2); font-size: 13.5px; font-style: normal; }
.message-thread { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 18px 14px; background: #fafbfc; }
.message-row { display: flex; }
.message-row.mine { justify-content: flex-end; }
.message-bubble { max-width: min(520px, 84%); padding: 9px 13px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface); }
.message-row.mine .message-bubble { border-color: var(--accent-line); border-radius: 14px 14px 4px 14px; background: var(--accent-soft); }
.message-row.mine .message-bubble p { color: var(--on-tint); }
.message-bubble p { color: var(--text); font-size: 15.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.message-bubble time { display: block; margin-top: 3px; color: var(--text-3); font-size: 13px; text-align: right; }
.thread-intro { margin: auto; max-width: 38ch; color: var(--text-2); font-size: 14.5px; text-align: center; }
.message-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.message-composer textarea { min-height: 46px; max-height: 140px; resize: none; border-radius: 12px; }
.message-composer .primary { min-height: 46px; }
.chat-empty { display: grid; justify-items: center; gap: 10px; margin: auto; padding: 32px 20px; color: var(--text-2); text-align: center; }
.chat-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--fill); color: var(--text-2); }
.chat-empty h3 { font-size: 18px; }

/* ---------- Notifications ---------- */
.notification-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.notification-list:has(> .empty) { border: 0; background: none; }
.notification-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 20px; }
.notification-row { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-top: 1px solid var(--line); }
.notification-row:first-child { border-top: 0; }
.notification-row.is-unread { background: var(--surface-soft); box-shadow: inset 3px 0 0 #bcc6d0; }
.notification-item { display: grid; flex: 1; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 14px 0 14px 16px; border: 0; background: none; text-align: left; }
.notification-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--text-2); font-size: 17px; font-weight: 600; }
.notification-icon .icon { width: 20px; height: 20px; }
.kind-offer .notification-icon { background: var(--fill); color: var(--text); }
.kind-offer-status .notification-icon { background: var(--ok-bg); color: var(--ok); }
.kind-job-status .notification-icon, .kind-message .notification-icon { background: var(--info-bg); color: var(--info); }
.kind-review .notification-icon { background: var(--warn-bg); color: var(--warn); }
.notification-copy { display: grid; gap: 2px; min-width: 0; }
.notification-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--heading); font-size: 16px; font-weight: 500; }
.notification-copy > span { color: var(--text-2); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.notification-copy time { color: var(--text-3); font-size: 13px; }
.notification-row.is-read .notification-copy strong { font-weight: 400; color: var(--text); }
.notification-new { padding: 1px 8px; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 13px; font-weight: 500; }
.notification-open { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; min-height: 40px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 15px; font-weight: 500; white-space: nowrap; }
.notification-open:hover { background: var(--fill); }
.notification-open .icon { width: 18px; height: 18px; }

/* ---------- Account ---------- */
/* Compact identity, two clear choices, then short lists. No framed hero card. */
.account-workspace { display: grid; gap: 22px; max-width: 1140px; margin: 0 auto; }
.account-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.account-title-actions { display: flex; align-items: center; gap: 12px; }
.account-title-mobile-profile { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.account-title-mobile-profile[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.profile-identity .profile-open-button { display: none; }
.account-identity:empty { display: none; }
.profile-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.identity-avatar { width: 44px; height: 44px; background: var(--accent-tint); color: var(--on-tint); font-size: 17px; font-weight: 500; }
.profile-identity-copy { display: grid; min-width: 0; }
.profile-identity-actions { display: grid; flex: 0 0 auto; justify-items: end; gap: 2px; margin-left: auto; }
.profile-identity-actions .profile-open-button { min-height: 34px; padding: 5px 14px; }
.profile-sign-out { min-height: 30px; padding: 3px 2px; font-size: 13px; font-weight: 400; }
.profile-identity-copy h2 { overflow: hidden; color: var(--on-tint); font-size: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.profile-sub { color: var(--text-2); font-size: 15px; }
.moderation-account-banner { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); font-size: 14.5px; }
.moderation-account-banner > span { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: currentColor; color: inherit; font-weight: 700; }
.moderation-account-banner.is-blocked { background: var(--danger-bg); color: var(--danger); }
.moderation-account-banner.is-warning { background: var(--warn-bg); color: var(--warn); }
.moderation-account-banner strong { display: block; }
.moderation-account-banner p, .moderation-account-banner small { color: var(--text); }

.account-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-tile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); color: var(--on-tint); text-align: left; transition: background-color .15s ease, border-color .15s ease; }
.choice-tile:hover { background: var(--accent-tint); border-color: #c6dbea; }
.choice-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--surface); color: var(--on-tint); }
.choice-label { font-size: 15px; font-weight: 500; line-height: 1.3; }

.account-actions { display: grid; gap: 22px; }
.account-area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-area { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.account-area h3 { padding: 18px 14px 12px; color: var(--heading); font-size: 18px; text-align: center; }
.account-area .overview-row { border-top: 1px solid var(--line); }
.account-area .overview-copy b { white-space: normal; }
.account-count { display: grid; place-items: center; flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: 14px; font-weight: 600; }
.account-communication { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-identity .account-communication { margin-left: auto; }
@media (max-width: 760px) { .account-area-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .profile-identity .account-communication { order: 3; flex-basis: 100%; margin-left: 0; } }
@media (max-width: 600px) {
  .account-title-row { gap: 8px; }
  .account-title-actions { gap: 10px; }
}
.account-communication-link { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 400; text-align: left; }
.account-communication-link[aria-pressed="true"], .profile-open-button[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.account-communication-link > .icon { color: var(--text-2); }
.account-communication-link > .conversation-unread { margin-left: auto; }
.overview-section { display: grid; gap: 8px; }
.overview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.overview-head h3 { color: var(--on-tint); font-size: 17px; font-weight: 500; }
.overview-head .text-link { font-size: 14.5px; }
.overview-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.overview-task-list { display: grid; gap: 12px; overflow: visible; border: 0; border-radius: 0; background: none; }
.overview-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.overview-row:first-child { border-top: 0; }
.overview-row:hover { background: var(--surface-soft); }
.overview-row > .icon { margin-left: auto; color: var(--text-3); }
.overview-row.is-attention { background: #fdf9ef; }
.overview-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.overview-copy b { overflow: hidden; color: var(--on-tint); font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.overview-copy > span { overflow: hidden; color: var(--text-2); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.overview-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.overview-meta > span:last-child { overflow: hidden; color: var(--text-2); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.overview-meta .status-badge { flex: 0 0 auto; padding-top: 2px; padding-bottom: 2px; }
.overview-task-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px 172px;
  gap: 16px; min-height: 88px; padding: 16px;
}
.overview-task-row .overview-copy { gap: 6px; }
.overview-task-row .overview-copy b { font-size: 15px; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.overview-task-detail { min-width: 0; color: var(--text-2); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.overview-task-status { padding: 0; border-radius: 0; background: transparent; font-size: 14.5px; font-weight: 500; white-space: normal; }
.overview-task-status::before { flex: 0 0 7px; }
.overview-task-row > .icon { margin-left: 0; }
.overview-task-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.overview-task-open { position: absolute; inset: 0; z-index: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; }
.overview-task-open:hover { background: var(--surface-soft); }
.overview-task-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.overview-task-item > .overview-task-row { border-top: 0; }
.overview-task-row { position: relative; z-index: 1; pointer-events: none; }
.overview-task-state { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.overview-task-state > small { color: var(--text-2); font-size: 13px; }
.overview-task-chat { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 8px; margin-right: 10px; border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 400; }
.overview-task-chat { position: relative; z-index: 2; }
.overview-task-chat:hover { text-decoration: underline; }
.overview-task-chat > .icon { width: 16px; height: 16px; }
.overview-task-chat .conversation-unread { min-width: 18px; height: 18px; font-size: 11px; }
.overview-chat-row { display: grid; grid-template-columns: 44px minmax(140px, .85fr) minmax(0, 1.15fr) 26px; gap: 16px; min-height: 88px; padding: 18px 20px; }
.overview-chat-row .overview-copy b { font-size: 14px; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
.overview-chat-task { min-width: 0; color: var(--text-2); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.overview-chat-row > .conversation-unread, .overview-chat-row > .icon { justify-self: end; margin-left: 0; }
@media (max-width: 639px) {
  .overview-task-row { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 16px; }
  .overview-task-detail { font-size: 14px; }
  .overview-task-status { justify-self: start; font-size: 13px; }
  .overview-chat-row { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 5px 12px; padding: 16px; }
  .overview-chat-row > .conversation-avatar { grid-column: 1; grid-row: 1 / 3; }
  .overview-chat-row .overview-copy { grid-column: 2; grid-row: 1; }
  .overview-chat-task { grid-column: 2; grid-row: 2; font-size: 14px; }
  .overview-chat-row > .conversation-unread, .overview-chat-row > .icon { grid-column: 3; grid-row: 1 / 3; }
}
.overview-empty { padding: 14px; color: var(--text-2); font-size: 14.5px; }

.profile-photo-row { display: flex; align-items: center; gap: 16px; }
.profile-avatar-editor { position: relative; display: block; flex: 0 0 auto; width: 72px; height: 72px; cursor: pointer; }
.profile-avatar-editor .avatar { width: 72px; height: 72px; background: var(--accent-tint); color: var(--on-tint); font-size: 28px; font-weight: 500; }
.profile-avatar-edit { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); }
.profile-avatar-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.profile-avatar-editor:hover .profile-avatar-edit, .profile-avatar-editor:focus-within .profile-avatar-edit { color: var(--on-tint); border-color: var(--line-strong); }
.profile-avatar-editor:focus-within { border-radius: 50%; box-shadow: 0 0 0 3px var(--focus); }
.profile-photo-copy { display: grid; gap: 2px; min-width: 0; }
.profile-facts { display: grid; gap: 1px; color: var(--text); font-size: 14.5px; }
.profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 0 16px; }
.profile-avatar-actions .text-link { font-size: 14.5px; }
.profile-avatar-help { color: var(--text-2); font-size: 14px; }
.profile-avatar-help:empty { display: none; }

.profile { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.profile:empty { display: none; }
.profile:has(> .profile-details:not([open])) { display: none; }
.account-workspace:has(> .profile.is-editing) > .account-choices,
.account-workspace:has(> .profile.is-editing) > .account-actions,
.account-workspace:has(> .profile.is-signed-out) > .account-choices,
.account-workspace:has(> .profile.is-signed-out) > .account-actions { display: none; }
.profile-signed-out { display: grid; justify-items: center; gap: 10px; padding: 28px 20px; text-align: center; }
.profile-signed-out .avatar { width: 64px; height: 64px; font-size: 26px; }
.profile-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; list-style: none; cursor: pointer; }
.profile-details > summary::-webkit-details-marker { display: none; }
.profile-details > summary:hover { background: var(--surface-soft); }
.profile-details-title { display: grid; gap: 1px; }
.profile-details-title strong { color: var(--on-tint); font-size: 15.5px; font-weight: 500; }
.profile-details-title small { color: var(--text-2); font-size: 14px; }
.profile-details > summary .chevron { color: var(--text-3); transition: transform .15s ease; }
.profile-details[open] > summary .chevron { transform: rotate(90deg); }
.profile-details-body { display: grid; gap: 16px; padding: 16px; }
.profile-details-body .profile-avatar-editor,
.profile-details-body .profile-avatar-editor .avatar { width: 52px; height: 52px; }
.profile-details-body .profile-facts { font-size: 13px; }
.profile-details-body .profile-photo-row { gap: 12px; }
.profile-details-body #profileBio { min-height: 76px; resize: vertical; }
.profile-bio { display: grid; gap: 8px; }
.profile-bio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-bio-head h3 { font-size: 14px; font-weight: 500; }
.profile-bio-head .text-link { min-height: 30px; padding: 3px 0; font-size: 14px; }
.profile-bio-text { color: var(--text); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-bio-text.is-empty { color: var(--text-2); font-size: 14px; }
.profile-section { border-top: 1px solid var(--line); }
.profile-section > summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; }
.profile-section > summary::-webkit-details-marker { display: none; }
.profile-section > summary::after { content: '+'; margin-left: auto; color: var(--text-2); font-size: 18px; font-weight: 400; }
.profile-section[open] > summary::after { content: '−'; }
.profile-section > summary small { color: var(--text-2); font-size: 12px; font-weight: 400; }
.profile-section-body { display: grid; gap: 12px; padding-bottom: 14px; }
.profile-section .worker-profile-editor { padding-top: 0; border-top: 0; }
.profile-section .skill-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-section .skill-option-card { gap: 6px; min-height: 40px; padding: 6px 8px; font-size: 13px; }
.profile-section .skill-option-icon svg { width: 16px; height: 16px; }
.profile-section .profile-public-previews { display: grid; justify-items: start; }
.profile-section .profile-public-preview { font-size: 14px; text-align: left; }
.profile-account-fields { display: grid; gap: 12px; }
.profile-location-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-location-summary > span { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.profile-location-summary strong { font-size: 14px; font-weight: 500; }
.profile-location-summary #profileSavedLocation { color: var(--text-2); overflow-wrap: anywhere; }
.profile-trust-panel { display: grid; gap: 8px; }
.profile-trust-panel > p { color: var(--text-2); font-size: 14px; }
.profile-public-previews { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-public-label { color: var(--text-2); font-size: 14px; }
.profile-form { display: grid; gap: 16px; }
.profile-registration-lock { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 14px; }
.profile-registration-lock strong { display: block; color: var(--text); font-size: 15px; font-weight: 500; }
.profile-registration-lock small { display: block; color: var(--text-2); font-size: 14px; }
.profile-core-fields { display: grid; gap: 14px; }
.profile-location-field { display: grid; gap: 8px; }
.profile-location-label { color: var(--text); font-size: 15px; font-weight: 500; }
.profile-location-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.worker-profile-editor { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.worker-profile-editor-head { display: grid; gap: 2px; }
.worker-profile-editor-head h3 { font-size: 17px; }
.worker-profile-editor-head p, .skill-picker > p { color: var(--text-2); font-size: 14.5px; }
.skill-picker { display: grid; gap: 8px; }
.skill-picker > legend { margin-bottom: 0; }
.skill-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.skill-option { position: relative; display: block; }
.skill-option input { position: absolute; inset: 0; opacity: 0; }
.skill-option-card { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 400; cursor: pointer; }
.skill-option-card b { font-weight: 400; }
.skill-option-icon { display: grid; place-items: center; color: var(--text-2); }
.skill-option-icon svg { width: 20px; height: 20px; }
.skill-check { margin-left: auto; color: var(--accent); font-weight: 700; opacity: 0; }
.skill-option input:checked + .skill-option-card { border-color: var(--accent-mark); background: var(--accent-soft); color: var(--on-tint); }
.skill-option input:checked + .skill-option-card .skill-check { opacity: 1; }
.skill-option input:focus-visible + .skill-option-card { box-shadow: 0 0 0 3px var(--focus); }
.worker-profile-inactive { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-soft); border: 1px solid var(--line); }
.worker-profile-inactive > div { display: grid; gap: 2px; max-width: 56ch; }
.worker-profile-inactive h3 { font-size: 16px; }
.worker-profile-inactive p { color: var(--text-2); font-size: 14.5px; }
.account-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 0 2px; color: var(--text-2); font-size: 14px; }
.profile-session-actions .text-link { font-size: 14px; }
.account-session-info .text-link { padding: 0; font-size: 14px; }
.account-admin-panel { padding: 6px 0; border: 0; background: none; color: var(--text-3); font-size: 14px; text-decoration: underline; text-decoration-color: var(--line-strong); }
.account-admin-panel:hover { color: var(--text); }

/* ---------- Public profile ---------- */
.public-profile-modal { align-items: center; padding: 16px 12px; }
.public-profile-modal .public-profile-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); border-radius: 18px; }
.public-profile-card .modal-close { position: absolute; top: 18px; right: 18px; float: none; margin: 0; }
.public-profile-identity { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding-right: 38px; }
.public-profile-avatar { flex: 0 0 auto; width: 48px; height: 48px; font-size: 21px; }
.public-profile-name { display: grid; gap: 2px; min-width: 0; }
.public-profile-card .public-profile-name h2 { font-size: 20px; font-weight: 500; }
.public-profile-name p { color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.public-profile-role { color: var(--text-2); font-size: 12px; }
.public-profile-name .icon { width: 17px; height: 17px; color: var(--text-3); }
.public-profile-account-type { color: var(--text-2); font-size: 14px; }
.public-profile-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 10px; color: var(--text-2); font-size: 13px; }
.public-profile-rating { color: var(--text); font-size: 15px; font-weight: 500; }
.public-profile-rating > span { color: var(--text-2); font-size: 13px; font-weight: 400; }
.public-profile-card .trust-status.is-compact { font-size: 12px; margin-bottom: 12px; }
.public-profile-bio { margin: 0 0 14px; color: var(--text); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-profile-section { padding: 16px 0; border-top: 1px solid var(--line); }
.public-profile-section h3 { margin-bottom: 8px; font-size: 16.5px; }
.public-profile-section > p { color: var(--text); font-size: 15.5px; line-height: 1.6; }
.trust-status + .public-profile-section { margin-top: 14px; }
.public-profile-equipment > p:not(.public-profile-muted) { color: var(--text); font-size: 15.5px; }
.public-profile-more { padding: 0; }
.public-profile-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; list-style: none; cursor: pointer; color: var(--text); font-size: 14px; font-weight: 500; }
.public-profile-more > summary::-webkit-details-marker { display: none; }
.public-profile-more > summary::after { content: '+'; flex: 0 0 auto; color: var(--text-2); font-size: 18px; font-weight: 400; }
.public-profile-more[open] > summary::after { content: '−'; }
.public-profile-more-body { padding: 2px 0 12px; }
.public-profile-more-body > .public-profile-services { margin-bottom: 10px; }
.public-profile-more-body > .public-profile-services:last-child { margin-bottom: 0; }
.public-profile-more-body .public-profile-equipment > p { font-size: 14.5px; line-height: 1.55; }
.public-profile-reviews .public-profile-more-body { display: grid; gap: 12px; }
.public-profile-services { display: flex; flex-wrap: wrap; gap: 6px; }
.public-profile-services span { padding: 5px 12px; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 14px; }
.public-profile-muted { color: var(--text-2); font-size: 15px; }
.public-profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.public-profile-section-head h3 { margin: 0; }
.public-review-item { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.public-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.public-review-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
.public-review-person > span:last-child { min-width: 0; }
.public-review-person .mini-avatar { width: 30px; height: 30px; font-size: 13px; font-weight: 400; }
.public-review-person.person-profile-link { width: auto; }
.public-review-person.person-profile-link:hover { background: none; }
.public-review-person.person-profile-link:hover b { color: var(--accent); }
.public-review-person b { display: block; color: var(--heading); font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.public-review-person small { display: block; color: var(--text-2); font-size: 12px; font-weight: 400; }
.public-review-stars { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: #94600f; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.public-review-task { margin-top: 10px; color: var(--text-2); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.public-review-comment { margin-top: 6px; color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.public-profile-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.public-profile-loading { padding: 32px 0; color: var(--text-2); text-align: center; }

/* ---------- Sign-in, review, legal ---------- */
.auth-card form, #registerFields { display: grid; gap: 14px; }
.auth-card h2 { margin-bottom: 6px; }
.auth-purpose, .auth-intro { color: var(--text-2); font-size: 15px; }
.auth-benefits { display: grid; gap: 4px; margin: 10px 0 16px; padding: 0; list-style: none; }
.auth-benefits li { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; }
.auth-benefits span { color: var(--ok); font-weight: 700; }
.auth-demo-note { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--info-bg); color: var(--info); font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 16px; }
.auth-location-picker { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.auth-link-button { justify-self: start; font-size: 14.5px; }
.auth-status { margin-top: 10px; color: var(--danger); font-size: 14.5px; }
.auth-status:empty { display: none; }
.auth-status.is-success { color: var(--ok); }
.auth-confirmation { display:grid; gap:14px; padding-top:8px; }
.auth-confirmation p { color:var(--text); line-height:1.5; }
.auth-confirmation-email { font-weight:600; overflow-wrap:anywhere; }
.auth-confirmation small { color:var(--text-2); }
.auth-confirmation button { justify-self:start; }
.auth-confirmation:focus { outline:none; }
.auth-street-row { display:grid; grid-template-columns:minmax(0, 2fr) minmax(90px, 1fr); gap:10px; }
.private-address-form { display:grid; gap:10px; padding:16px; border:1px solid var(--border); border-radius:12px; }
.private-address-form h3, .private-address-form p { margin:0; }
.private-address-form p { color:var(--text-2); line-height:1.45; }
.private-address-form button { justify-self:start; }
.private-job-address { margin:16px 0; padding:14px; border:1px solid var(--border); border-radius:12px; }
.private-job-address p { margin:6px 0; }
.private-job-address small { color:var(--text-2); }
.auth-back-button { margin-top: 8px; }
.review-kicker { color: var(--text-2); font-size: 14px; font-weight: 500; }
.review-task-context { margin: 4px 0 16px; color: var(--text-2); font-size: 15px; }
#reviewForm { display: grid; gap: 14px; }
.legal-updated { margin: 4px 0 14px; color: var(--text-2); font-size: 14px; }
.legal-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; }
.legal-tabs::-webkit-scrollbar { display: none; }
.legal-content h3 { margin: 18px 0 6px; font-size: 17px; }
.legal-content p { margin: 0 0 10px; color: var(--text); font-size: 15.5px; line-height: 1.65; }
.legal-company-address { color: var(--text); font-size: 15.5px; font-style: normal; line-height: 1.65; }
.legal-notice { margin-bottom: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--warn-bg); color: #5f4a1c; font-size: 15px; line-height: 1.55; }
.legal-source { color: var(--text-2) !important; font-size: 14px !important; }
#reportForm { display: grid; gap: 14px; margin-top: 12px; }
.report-status { color: var(--text-2); font-size: 14.5px; }
.report-status:empty { display: none; }
.report-status.is-error { color: var(--danger); }
.report-status.is-success { color: var(--ok); }

/* ---------- Administration ---------- */
.admin-shell { max-width: 1000px; margin: 0 auto; }
.admin-sectionhead > div { width: 100%; }
.admin-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-title-row h2 { min-width: 0; margin: 0; }
.admin-title-row button { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; font-size: 13px; }
.admin-role-badge { color: var(--text-2); }
.admin-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.admin-summary article { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.admin-summary span { color: var(--text-2); font-size: 13px; }
.admin-summary b { color: var(--heading); font-size: 16px; font-weight: 500; }
.admin-summary small { color: var(--text-2); font-size: 13px; }
.admin-view-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.admin-view-head h3 { font-size: 16px; font-weight: 500; }
.admin-status-filter { width: 132px; margin-left: auto; }
.admin-status-filter select { min-height: 38px; padding: 7px 9px; font-size: 14px; }
.admin-view-head p { color: var(--text-2); font-size: 14.5px; }
.admin-search { display: flex; gap: 8px; width: min(100%, 420px); }
.admin-list { display: grid; gap: 12px; }
.admin-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.admin-card.is-blocked { border-color: #e6b8b3; }
.admin-disclosure { display: block; padding: 0; }
.admin-disclosure-summary { display: grid; gap: 8px; padding: 16px; cursor: pointer; list-style: none; }
.admin-disclosure-summary::-webkit-details-marker { display: none; }
.admin-disclosure-summary:hover { background: var(--surface-soft); border-radius: inherit; }
.admin-disclosure-description { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-disclosure-hint { display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-size: 13px; }
.admin-disclosure-hint::after { content: '+'; color: var(--text-2); font-size: 18px; }
.admin-disclosure[open] > summary .admin-disclosure-hint::after { content: '−'; }
.admin-disclosure-body { display: grid; gap: 12px; margin: 0 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.admin-disclosure-body .admin-card-actions { gap: 8px; }
.admin-disclosure-body .admin-reason-field { padding-top: 4px; }
.admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-card-head h4 { margin-top: 6px; font-size: 17px; }
.admin-card-title { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; }
.admin-card-subtitle { display: block; color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.admin-card-head p { color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.admin-card-head time { flex: 0 0 auto; color: var(--text-3); font-size: 13px; }
.admin-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-2); font-size: 13px; font-weight: 500; }
.admin-status.is-open { background: var(--warn-bg); color: var(--warn); }
.admin-status.is-reviewing { background: var(--info-bg); color: var(--info); }
.admin-status.is-resolved, .admin-status.is-active { background: var(--ok-bg); color: var(--ok); }
.admin-status.is-blocked { background: var(--danger-bg); color: var(--danger); }
.admin-report-parties, .admin-user-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-2); font-size: 14px; }
.admin-report-parties b, .admin-user-stats b { color: var(--text); font-weight: 600; }
.admin-reference { padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); color: var(--text-2); font-size: 14px; }
.admin-report-message { color: var(--text); font-size: 15px; }
.admin-context-ids { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-context-ids:empty { display: none; }
.admin-context-ids code { padding: 2px 6px; border-radius: 6px; background: var(--fill); color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.admin-reason-field textarea { min-height: 80px; }
.admin-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-user-rating { display: grid; justify-items: end; flex: 0 0 auto; }
.admin-user-rating b { color: var(--heading); font-size: 20px; font-weight: 600; }
.admin-user-rating span { color: var(--text-2); font-size: 13px; }
.admin-block-reason, .admin-warning-reason { padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.admin-block-reason { background: var(--danger-bg); color: var(--danger); }
.admin-warning-reason { background: var(--warn-bg); color: var(--warn); }
.admin-block-reason p, .admin-warning-reason p { color: var(--text); }
.admin-apr-panel { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-apr-panel > div:first-child { display: grid; gap: 1px; }
.admin-apr-panel strong { color: var(--text); font-size: 15px; font-weight: 500; }
.admin-apr-panel small { color: var(--text-2); font-size: 13.5px; }
.admin-history summary { color: var(--accent); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.admin-user-history { margin-top: 8px; padding-left: 18px; color: var(--text); font-size: 14px; }
.admin-user-history li + li { margin-top: 8px; }
.admin-user-history small { display: block; color: var(--text-2); }
.admin-history-empty { margin-top: 6px; color: var(--text-2); font-size: 14px; }
.admin-empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-2); text-align: center; }
.admin-audit-card > p { color: var(--text); font-size: 15px; }
.admin-audit-card > small { color: var(--text-2); font-size: 13.5px; }

/* ---------- Larger phones ---------- */
@media (min-width: 560px) {
  .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transparent-offer-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transparent-offer-form .offer-total-preview { grid-column: 1 / -1; }
  .transparent-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-visual { display: block; }
  .job { grid-template-columns: 132px minmax(0, 1fr); }
  .admin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Small phones: keep both schedule fields inside the form card. */
@media (max-width: 759px) {
  .job-filterbar .filter-label, #jobSortLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .job-search-field { padding: 8px 10px; }
}

/* Phone typography: shorter headings and quieter supporting copy. */
@media (max-width: 639px) {
  .page-head h2 { font-size: 22px; }
  .page-head p { font-size: 15px; line-height: 1.45; }
  #homeTitle { font-size: 40px; }
  .home-kicker { font-size: 14px; }
  .home-lead { font-size: 16px; }
  .entry-choice { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; min-height: 100px; padding: 16px; }
  .entry-icon { width: 44px; height: 44px; }
  .entry-icon .icon { width: 24px; height: 24px; }
  .entry-title { font-size: 18px; }
  .entry-copy small { font-size: 14px; }
  .welcome-note { font-size: 14px; }
  .home-section h2 { font-size: 20px; }
  .job-search { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; }
  .job-search-field { min-width: 0; padding: 6px 10px; }
  .job-search-field + .job-search-field { border-top: 0; border-left: 1px solid var(--line); border-radius: 0 11px 11px 0; }
  .job-search-submit { grid-column: 1 / -1; }
  .job-search .searchbox input { font-size: 16px; }
  .sort-trigger { font-size: 14px; }
  .job h3 { font-size: 15.5px; }
  .job .price { font-size: 16px; }
}

@media (max-width: 560px) {
  .job-schedule-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .person-profile-cta { font-size: 0; gap: 0; }
  .person-profile-cta .icon { width: 20px; height: 20px; }
  .offer-actions { width: 100%; margin-left: 0; }
  .offer-card-head { flex-direction: column; gap: 10px; }
  .notification-open { font-size: 0; gap: 0; padding: 0 4px; }
  .notification-open .icon { width: 22px; height: 22px; }
  .offer-actions > button { flex: 1; }
}

@media (max-width: 359px) {
  .logo-copy { font-size: 28px; }
  .avatar-btn { padding-right: 10px; }
  #accountBtnLabel { font-size: 13.5px; }
  .entry-choice { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; padding: 14px; }
  .entry-icon { width: 40px; height: 40px; }
  .job { grid-template-columns: 88px minmax(0, 1fr); }
  .job-foot { flex-wrap: wrap; }
  .progress-steps li { font-size: 12px; }
  .segmented button { padding: 0 12px; }
  .job-filterbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cat" "sort"; gap: 10px; }
  .sort-trigger { white-space: nowrap; }
  .bottom-nav small { font-size: 11px; }
  .choice-tile { gap: 10px; padding: 10px 12px; }
  .choice-icon { width: 30px; height: 30px; }
  .choice-icon .icon { width: 18px; height: 18px; }
  .choice-label { font-size: 15px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 760px) {
  main { padding-top: 28px; }
  .modal { align-items: center; padding: 32px; }
  .modal-card { width: min(720px, 100%); max-height: calc(100dvh - 64px); padding: 28px 32px 32px; border-radius: 18px; }
  .modal-wide { width: min(860px, 100%); }
  .detail-card .detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px 24px; }
  .detail-card .detail-head h2 { margin: 0; }
  .detail-card .detail-budget { margin: 0; }
  .detail-card .detail-facts { grid-column: 1 / -1; }
  .detail-summary { grid-template-columns: 144px minmax(0, 1fr); gap: 22px; margin: 24px 0; }
  .detail-media { height: 144px; }
  .auth-card { width: min(680px, 100%); }
  .review-card { width: min(540px, 100%); }
  .public-profile-card { width: min(560px, 100%); }
  .legal-modal-card { width: min(780px, 100%); }

  .home-section { margin-top: 56px; }
  .latest-list { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { flex-direction: column; gap: 10px; }

  .job-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
  .job-search-field + .job-search-field { border-top: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .job-search-field:focus-within { border-radius: 11px; }
  .job-search-submit { min-width: 120px; margin: 0 4px 0 6px; }
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .job { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .job > .job-media { grid-row: auto; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .job-summary { padding: 14px 16px 0; }
  .job h3 { font-size: 17px; }
  .job-foot { padding: 12px 16px 16px; }

  .location-picker-row.is-three-step, .profile-location-selects.is-three-step { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-step-when { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .panel { padding: 8px 28px 26px; }
  .form-step { padding: 24px 0; }

  .task-row { grid-template-columns: 112px minmax(0, 1.35fr) minmax(150px, .8fr) minmax(150px, auto); align-items: center; gap: 18px; padding: 14px 18px; }
  .activity-row-media { grid-row: auto; }
  .activity-row-media .job-media { width: 112px; height: 112px; }
  .activity-row > .activity-row-tags { grid-column: auto; min-width: 0; }
  .activity-row-side { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: end; align-content: start; gap: 10px; padding-top: 0; border-top: 0; text-align: right; }
  .activity-row-actions { flex-direction: column; align-items: flex-end; gap: 6px; }

  .messages-shell { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100dvh - var(--topbar) - 190px); min-height: 520px; }
  .conversation-panel { border-right: 1px solid var(--line); }
  .messages-shell .chat-panel, .messages-shell.is-chat-open .chat-panel { display: flex; height: auto; min-height: 0; }
  .messages-shell.is-chat-open .conversation-panel { display: flex; }
  .messages-shell:not(.is-chat-open) .conversation-item.active { background: #f2f4f7; box-shadow: inset 3px 0 0 var(--accent-mark); }
  #messages:has(.messages-shell.is-chat-open) .page-head { display: grid; }
  .chat-back { display: none; }
  .chat-head { padding: 12px 16px; }
  .message-thread { padding: 20px; }

  .profile-core-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-location-field { grid-column: 1 / -1; }
  .admin-apr-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-apr-panel > div:first-child, .admin-apr-panel > .admin-card-actions { grid-column: 1 / -1; }
}

/* ---------- Desktop ---------- */
@media (min-width: 960px) {
  :root { --bottom-nav: 0px; }
  .topbar { border-radius: 0; background: #fff; }
  .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; }
  .topbar-inner::after { content: none; }
  .topbar-inner > .avatar-btn { justify-self: end; min-width: 0; max-width: 100%; }
  #accountBtnLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo { justify-self: start; margin: 0; }
  .desktop-nav { display: flex; }
  .desktop-nav .nav-link, .avatar-btn { border: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 44px; padding: 0 12px; color: var(--text-2); font-size: 15px; }
  .desktop-nav .nav-link:hover, .avatar-btn:hover { background: transparent; color: var(--text); }
  .desktop-nav .nav-link.active-nav, .avatar-btn.active-nav { color: var(--heading); background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
  .account-btn-icon { display: none; }
  .mobile-offerten { display: none; }
  .avatar-btn { display: inline-flex; }
  .bottom-nav { display: none; }
  main { padding-bottom: 72px; }
  .legal-footer-inner { padding-bottom: 24px; }
  .toast { bottom: 28px; }
  .messages-shell { height: calc(100dvh - var(--topbar) - 180px); }

  .job-filterbar { grid-template-columns: 240px minmax(0, 1fr) 210px; grid-template-areas: "cat . sort"; align-items: end; gap: 16px; }
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-top: 24px; }
  .home-visual img { aspect-ratio: 4 / 3; }
  .entry-paths { margin-top: 30px; }
}

@media (min-width: 1100px) {
  .latest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-task { grid-template-columns: 64px minmax(0, 1fr) minmax(150px, auto); min-height: 88px; padding: 12px; }
  .preview-thumb { width: 64px; height: 64px; }
  .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar, .bottom-nav, .prelaunch-banner, .legal-footer, .toast { display: none !important; }
  body { background: #fff; }
}
.service-entry,.service-page-head {display:flex;align-items:center;justify-content:space-between;gap:24px}
.service-entry {padding:24px;border:1px solid #dbe4ed;border-radius:18px;background:#f4f8ff}
.service-entry h2,.service-entry p {margin:0 0 6px}
.service-actions {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.service-actions-end {justify-content:flex-end;margin-top:18px}
.service-tabs {width:max-content;max-width:100%;margin:16px 0 24px}
.service-search,.service-form-row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.service-search {margin:0 0 24px}
.service-price-fields {grid-template-columns:1fr 1fr 1fr}
.service-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#serviceList,#homeServiceList {grid-template-columns:1fr;gap:10px}
.service-result {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:start;padding:18px 22px;border:1px solid #dce3eb;border-radius:12px;background:#fff;min-width:0}
.service-result-info {min-width:0}
.service-result-info summary {display:grid;gap:5px;list-style:none;cursor:pointer}
.service-result-info summary::-webkit-details-marker {display:none}
.service-result-info summary strong {font-size:17px;line-height:1.4;color:#203446;overflow-wrap:anywhere}
.service-result-info summary:hover strong {color:#1d4ed8;text-decoration:underline}
.service-result-info summary:focus-visible {outline:2px solid #2563eb;outline-offset:4px;border-radius:3px}
.service-result-info summary span {font-size:13px;color:#667281;overflow-wrap:anywhere}
.service-result-description {padding-top:14px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.service-result-description p {margin:5px 0 0}
.service-result-price {display:grid;gap:5px;min-width:0;text-align:right}
.service-result-price strong {font-size:18px;line-height:1.4;color:#203446}
.service-result-price small {font-size:12px;color:#637186;max-width:240px}
.service-result-action button {min-height:42px;white-space:nowrap}
@media(max-width:650px) {
 .service-result {grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:16px}
 .service-result-info {grid-column:1 / -1}
 .service-result-price {text-align:left}
 .service-result-price strong {font-size:16px}
}
.service-card,.service-request-card,.service-editor {padding:24px;border:1px solid #dce3eb;border-radius:16px;background:#fff;min-width:0}
.service-card {display:flex;flex-direction:column}
.service-card h3,.service-request-card h3 {font-size:21px;color:#203446;line-height:1.3;margin:14px 0 6px}
.service-card-top {display:flex;align-items:center;justify-content:space-between;gap:12px}
.service-category {font-size:12px;font-weight:700;color:#526885;letter-spacing:.03em}
.service-provider {font-size:14px;color:#667281;margin:0 0 14px}
.service-description {line-height:1.6;overflow-wrap:anywhere;margin:0 0 20px}
.service-card-price {display:grid;gap:4px;margin-top:auto}
.service-card-price strong {font-size:20px;color:#203446}
.service-card-price small,.service-quote small {display:block;color:#637186;font-size:13px}
.service-request-list {display:grid;gap:16px}
.service-request-card>p {overflow-wrap:anywhere}
.service-request-card.service-request-compact {display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px}
.service-request-details {flex:1;min-width:0}
.service-request-details > summary {display:flex;align-items:center;gap:16px;min-height:40px;cursor:pointer;list-style:none}
.service-request-details > summary::-webkit-details-marker {display:none}
.service-request-name {display:grid;gap:3px;flex:1;min-width:0}
.service-request-name strong {overflow-wrap:anywhere;color:var(--heading)}
.service-request-name small {color:var(--text-2)}
.service-request-total,.service-request-more {white-space:nowrap}
.service-request-more {font-size:14px;color:var(--text-2)}
.service-request-expanded {display:grid;gap:8px;padding:14px 0 4px;border-top:1px solid var(--line);color:var(--text-2);overflow-wrap:anywhere}
.service-request-expanded .text-link {justify-self:start}
.service-request-next {display:flex;align-items:center;gap:8px;min-height:40px;flex-wrap:wrap}
@media(max-width:700px) {.service-request-card.service-request-compact {flex-wrap:wrap}.service-request-details {flex-basis:100%}.service-request-details > summary {flex-wrap:wrap;gap:8px}.service-request-name {flex-basis:100%}}
.service-quote {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid #e3e8f0;border-bottom:1px solid #e3e8f0}
.service-quote strong {font-size:24px;color:#163456;white-space:nowrap}
.service-quote-highlight {background:#edf4ff;border:1px solid #d4e3fa;border-radius:12px;padding:18px;margin:20px 0 8px}
.service-editor {max-width:820px;margin:0 0 24px}
.service-editor label,.service-search label,.service-booking-card form>label,.service-form-row>label {display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px;margin-bottom:16px}
.service-editor label.service-confirm {display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:13px;font-weight:400;line-height:1.6}
.service-confirm input {width:18px;height:18px;min-width:18px;margin-top:2px}
.service-booking-card {max-width:760px;width:calc(100% - 32px);padding:32px}
.service-booking-card h2 {padding-right:30px}
.service-next-step {padding:15px 18px;background:#f4f7fa;border-radius:12px;font-size:14px;line-height:1.6;color:#47596d}
.service-next-step strong {display:block;color:#243d58}
#services .primary,#myServices .primary,.service-booking-card .primary {background:#2563eb;border-color:#2563eb;color:#fff}
#services .primary:hover,#myServices .primary:hover,.service-booking-card .primary:hover {background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#services .primary:focus-visible,#myServices .primary:focus-visible,.service-booking-card .primary:focus-visible {outline:3px solid #a9c8ff;outline-offset:3px}
#serviceStatus:empty {display:none}
#myServiceStatus:empty {display:none}
@media(max-width:700px) {
 .service-entry,.service-page-head {align-items:flex-start;flex-direction:column;gap:14px}
 .service-entry {padding:20px}
 .service-list,.service-form-row,.service-price-fields,.service-search {grid-template-columns:1fr}
 .service-search,.service-form-row {gap:0}
 .service-card,.service-request-card,.service-editor {padding:20px}
 .service-tabs {width:100%;display:flex}
 .service-tabs button {flex:1;font-size:13px;padding:10px 8px;white-space:nowrap}
 .service-booking-card {padding:24px 20px}
 .service-quote {align-items:flex-start}
 .service-quote strong {font-size:21px}
 .service-card-top {align-items:flex-start;flex-wrap:wrap}
 .service-actions button {max-width:100%;white-space:normal}
}

/* Compact buyer request: quantity and calculated total form one price row. */
.service-booking-card {padding:26px 30px}
.service-booking-card h2 {margin:5px 0 4px;font-size:23px;line-height:1.25}
.service-booking-card .service-provider {margin-bottom:16px;font-size:13px}
.service-amount-row {display:grid;grid-template-columns:124px minmax(0,1fr);align-items:center;gap:22px;padding:14px 16px;margin:0 0 16px;border:1px solid #d4e3fa;border-radius:12px;background:#edf4ff}
.service-quantity-field {display:flex;flex-direction:column;gap:5px;margin:0;font-size:13px;font-weight:600}
.service-quantity-field input {width:100%;height:40px;min-height:40px;padding:8px 10px;background:#fff}
.service-fixed-quantity input {display:none}
.service-amount-row .service-quote {margin:0;padding:0;border:0;border-radius:0;background:transparent;gap:16px;min-width:0}
.service-calculation {font-size:13px;line-height:1.5}
.service-calculation small {font-size:12px}
.service-total {text-align:right}
.service-total strong {font-size:25px;line-height:1.35}
.service-booking-card form>label,.service-booking-card .service-form-row>label,.service-schedule-row>label {display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13px;font-weight:600;min-width:0}
.service-schedule-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.service-booking-card input:not([type=checkbox]) {min-height:42px;height:42px;padding:8px 12px;font-size:14px;min-width:0}
#serviceRequestDetails {min-height:60px;height:60px;padding:9px 12px;font-size:14px;line-height:1.4;resize:vertical}
.service-scope {font-size:13px;color:#5b6a7b;margin:0 0 16px}
.service-scope summary {cursor:pointer;list-style-position:inside}
.service-scope p {margin:8px 0 5px;line-height:1.5}
.service-booking-footer {display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #e2e8f0;padding-top:14px}
.service-booking-footer p {font-size:13px;color:#5d6a79;line-height:1.4;margin:0}
.service-booking-footer button {margin-left:auto}
@media(max-width:600px) {
 .service-booking-card {padding:22px 20px}
 .service-amount-row {grid-template-columns:94px minmax(0,1fr);gap:12px;padding:12px}
 .service-amount-row .service-quote {display:flex;flex-direction:column;align-items:flex-end;gap:4px}
 .service-calculation {font-size:12px;text-align:right}
 .service-total strong {font-size:23px}
 .service-booking-footer {gap:10px}
 .service-booking-footer button {font-size:13px;padding:11px 13px;white-space:normal}
 .service-schedule-row {grid-template-columns:repeat(2,minmax(0,1fr))}
 .service-schedule-row>label:first-child {grid-column:1 / -1}
}


/* ---------- Ordinary task: compact "Preis vorschlagen" ---------- */
.price-proposal { gap: 14px; }
.price-proposal-head { display: grid; gap: 4px; }
.price-proposal-head p { color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.price-proposal-head b { color: var(--text); font-weight: 500; }
.price-proposal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.price-proposal-facts > div { display: grid; gap: 1px; padding: 10px 12px; background: var(--surface-soft); }
.price-proposal-facts dt { color: var(--text-2); font-size: 13px; font-weight: 500; }
.price-proposal-facts dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 500; }
.price-proposal-facts small { display: block; color: var(--text-2); font-size: 13px; font-weight: 400; }
.price-proposal-label { color: var(--text); font-size: 15px; font-weight: 500; }
.price-stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; margin-top: -6px; }
.price-step { height: 56px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 24px; line-height: 1; }
.price-step:hover { background: var(--accent-soft); border-color: var(--accent-mark); }
#offerAmount { appearance: textfield; -moz-appearance: textfield; }
#offerAmount::-webkit-outer-spin-button, #offerAmount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-money { height: 56px; }
.price-money input { text-align: center; font-size: 26px !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-proposal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: -4px; color: var(--text-2); font-size: 13.5px; }
.budget-chip { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.budget-chip.is-within { background: var(--ok-bg); color: var(--ok); }
.budget-chip.is-over { background: var(--warn-bg); color: var(--warn); }
.price-proposal-options { border-top: 1px solid var(--line); }
.price-option { padding: 8px 0; border-bottom: 1px solid var(--line); }
.add-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 500; text-align: left; }
.add-option span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); font-size: 17px; line-height: 1; }
.option-open { display: grid; gap: 6px; padding: 4px 0 6px; }
.option-open[hidden] { display: none; }
.option-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.option-head label { font-size: 15px; }
.switch-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 400; cursor: pointer; }
.switch-row input { position: absolute; left: 0; width: 44px; height: 26px; margin: 0; opacity: 0; }
.switch-track { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch-row input:checked + .switch-track { background: var(--accent); }
.switch-row input:checked + .switch-track::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-copy { display: grid; gap: 1px; min-width: 0; }
.switch-copy b { color: var(--text); font-size: 15px; font-weight: 500; }
.switch-copy small { color: var(--text-2); font-size: 13.5px; }
.offer-tools-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--text); font-size: 14.5px; }
.offer-tools-line .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); }
/* Total and send stay in view at the bottom of the task sheet. */
.price-proposal-bar { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px -16px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.price-proposal-sum { display: grid; min-width: 0; line-height: 1.2; }
.price-proposal-sum small { color: var(--text-2); font-size: 13px; font-weight: 500; }
.price-proposal-sum strong { color: var(--text); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-proposal-sum span { color: var(--text-2); font-size: 12.5px; }
.price-proposal-bar .primary { flex: 0 0 auto; padding: 0 20px; }
@media (min-width: 760px) {
  .price-proposal-bar { bottom: -32px; margin: 4px -32px -32px; padding: 14px 32px 16px; border-radius: 0 0 18px 18px; }
}
.price-proposal-bar .primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.price-proposal-bar .primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* The ordinary proposal has no chat/message before the owner's acceptance. */
.price-proposal-facts { grid-template-columns: minmax(0, 1fr); }
.price-proposal-facts > div { display: flex; align-items: baseline; gap: 10px; }
.price-proposal-facts dd small { display: inline; margin-left: 6px; }
.price-proposal-options { border: 0; border-radius: 10px; padding: 0 12px; background: var(--surface-soft); }
.price-proposal-options .price-option:last-child { border-bottom: 0; }
.price-proposal .offer-declaration { font-size: 14px; line-height: 1.45; }
.price-proposal .offer-declaration small { display: block; margin-top: 4px; color: var(--text-2); font-size: 12px; }
.price-proposal-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; background: var(--surface-soft); }
.proposal-chat-hint { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.4; color: var(--accent); }
.proposal-chat-hint .icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.price-proposal-bar .primary { padding: 0 12px; font-size: 14px; }
@media (max-width: 359px) {
  .price-proposal-bar { grid-template-columns: 1fr; }
  .price-proposal-sum { grid-template-columns: 1fr auto; align-items: center; }
  .price-proposal-sum span { grid-column: 1 / -1; }
  .price-proposal-bar .primary { width: 100%; }
}

/* ---------- Home and Mein Konto: same calm, bluish structure ---------- */
.public-profile-page { max-width: 1060px; margin: auto; }
.public-profile-page > .back-link { margin-bottom: 20px; }
.public-profile-page #publicProfileDetail { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.public-profile-page .public-profile-avatar { width: 80px; height: 80px; flex: 0 0 80px; font-size: 32px; }
.public-profile-page .public-profile-name h2 { font-size: 28px; line-height: 1.2; }
.public-profile-page .public-profile-name p { font-size: 15px; }
.public-profile-page .public-profile-summary { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px; margin: 20px 0; background: var(--surface-soft); border-radius: 12px; font-size: 16px; }
.public-profile-page .public-profile-section { margin-top: 20px; padding-top: 20px; }
.public-profile-page .public-profile-section h3 { font-size: 20px; margin-bottom: 12px; }
.public-profile-listings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.public-listing-card { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); text-align: left; color: var(--text); }
.public-listing-card > span, .public-listing-card small { font-size: 14px; color: var(--accent); }
.public-listing-card strong { font-size: 18px; }
@media(max-width:600px) {
 .public-profile-page #publicProfileDetail { padding: 20px 16px; }
 .public-profile-page .public-profile-identity { padding-right: 0; align-items: flex-start; }
 .public-profile-page .public-profile-avatar { width: 64px; height: 64px; flex-basis: 64px; }
 .public-profile-page .public-profile-name h2 { font-size: 24px; overflow-wrap: anywhere; }
 .public-profile-listings { grid-template-columns: 1fr; }
}
.home-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
#homeTitle { font-size: clamp(38px, 6.2vw, 58px); }
.home-entry-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.home-entry-group { display: grid; grid-template-rows: none; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.home-entry-group h2 { margin: 0; color: var(--accent); font-size: 15px; font-weight: 600; }
.home-entry-mobile-toggle { display: none; }
.home-quote-mobile-link { display: none; }
.home-discovery-mobile { display: none; }
@media (max-width: 600px) {
  .home-discovery-tabs { display: none; }
  .home-discovery-mobile { display: block; margin-bottom: 16px; }
  .home-discovery-open { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; min-height: 48px; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 600; text-align: left; }
  .home-discovery-open > :last-child { justify-self: end; }
  .home-discovery-dialog { width: min(340px, calc(100% - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--text); box-shadow: var(--shadow-lg); }
  .home-discovery-dialog::backdrop { background: rgba(18, 35, 44, .45); }
  .home-discovery-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
  .home-discovery-dialog-head button { border: 0; background: transparent; font-size: 26px; }
  .home-discovery-dialog > button { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: left; }
  .home-entry-group:has(.home-entry-mobile-toggle) { padding: 0; gap: 0; }
  .home-entry-desktop-title { display: none; }
  .home-entry-mobile-toggle { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; padding: 16px 40px; border: 0; border-radius: 14px; background: transparent; color: var(--accent); font: inherit; font-size: 16px; cursor: pointer; text-align: center; }
  .home-entry-mobile-toggle > span { position: absolute; right: 16px; }
  .home-entry-mobile-toggle:focus-visible { outline: 3px solid #95bce8; outline-offset: 2px; }
  .home-entry-group:has(.home-entry-mobile-toggle) .home-entry-hint,
  .home-entry-group:has(.home-entry-mobile-toggle) .navigation-choice { display: none; }
  .home-entry-group.home-entry-expanded .home-entry-hint { display: block; margin: 0 16px 8px; }
  .home-entry-group.home-entry-expanded .navigation-choice { display: grid; margin: 0 12px 8px; }
  .home-entry-group:has(.home-quote-mobile-link) { padding: 0; gap: 0; }
  .home-entry-group:has(.home-quote-mobile-link) h2,
  .home-entry-group:has(.home-quote-mobile-link) .home-entry-hint,
  .home-entry-group:has(.home-quote-mobile-link) .navigation-choice { display: none; }
  .home-quote-mobile-link { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; padding: 16px 40px; border: 0; border-radius: 14px; background: transparent; color: var(--accent); font: inherit; font-size: 16px; font-weight: 600; text-align: center; }
  .home-quote-mobile-link > span { position: absolute; right: 16px; }
  .home-quote-mobile-link:focus-visible { outline: 3px solid #95bce8; outline-offset: 2px; }
}
.equipment-service-notice, .risk-job-notice, .task-problem-payment, .legal-notice { background: var(--accent-soft); border-color: var(--accent-line); color: var(--on-tint); }
.overview-row.is-attention { background: var(--accent-soft); }
#manageModal .modal-card { background: var(--bg); }
#manageModal .offer-card { background: var(--surface); }
.home-entry-hint { margin: -6px 0 2px; color: var(--text-2); font-size: 13.5px; }
.home-entry-group .navigation-choice { padding: 12px 14px; border-color: var(--line); background: var(--surface-soft); }
.home-entry-group .navigation-choice:hover { border-color: var(--accent-mark); background: var(--accent-soft); }
.home-entry-group .navigation-choice span { color: var(--text-2); }
.home-visual { display: none; }
@media (min-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); align-items: start; gap: 18px 36px; }
  .home-intro { display: contents; }
  .home-kicker, #homeTitle { grid-column: 1; }
  .home-kicker { grid-row: 1; align-self: end; }
  #homeTitle { grid-row: 2; align-self: start; margin-top: 0; }
  .home-visual img { max-height: 240px; }
  .home-visual { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .home-visual img { aspect-ratio: 4 / 3; object-fit: cover; }
  .home-entry-groups { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
  .home-intro > .welcome-note { grid-column: 1 / -1; }
}

.account-workspace { gap: 18px; }
.account-communication { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-communication-link { justify-content: flex-start; min-height: 48px; padding: 10px 14px; background: var(--surface); }
.account-communication-link .icon { width: 20px; height: 20px; color: var(--accent); }
.account-communication-link:hover { border-color: var(--accent-mark); background: var(--accent-soft); }
.account-communication-link .conversation-unread { margin-left: auto; background: var(--accent-tint); color: var(--on-tint); }
.account-area h3 { padding: 14px 16px 10px; color: var(--accent); font-size: 15px; font-weight: 600; text-align: left; }
.account-area .overview-row { min-height: 52px; }
.account-count { background: var(--accent-soft); color: var(--on-tint); }
@media (min-width: 761px) {
  .account-communication { display: flex; grid-template-columns: none; }
}

.account-header {display:grid;gap:18px;max-width:1140px;margin:0 auto 24px}
.account-header.hidden {display:none}
.account-header .account-communication-link.active-nav {background:#e7f1fa;border-color:#b9d5eb;color:#17629a}
.in-account .page.active > .page-head .back-link,.in-account #admin .admin-sectionhead .back-link {display:none}
@media(max-width:959px){
.account-header {gap:10px;margin-bottom:18px}
.account-header .account-communication {display:flex;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:6px;padding-bottom:3px}
.account-header .account-communication-link {flex:0 0 auto;min-height:44px;padding:8px 10px}
}

.account-header { position: sticky; top: var(--topbar); z-index: 40; background: var(--bg, #edf4f7); padding: 12px 0; }
.account-header {min-width:0;grid-template-columns:minmax(0,1fr)}
.account-header > * {min-width:0}
@media(max-width:959px){
.account-header .account-communication {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;min-width:0}
.account-header .account-communication-link {position:relative;flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;font-size:11px;min-width:0}
.account-header .account-communication-link .conversation-unread {position:absolute;right:2px;top:0;font-size:10px;min-width:16px;height:16px}
.account-header .profile-open-button {display:none}
}
.compact-offer-history {margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.compact-offer-history h4 {font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:8px}
.withdrawn-offer-row {display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;padding:5px 0;color:var(--text-2)}
.withdrawn-offer-row > :first-child {flex:1;min-width:100px}
.manage-task-actions {margin-top:20px}

.manage-head .manage-title-context { margin: 12px 0 3px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-2); }
.manage-head .manage-title-context + h2 { margin-top: 0; }
/* Local account and registration improvements, shared desktop/mobile. */
[hidden]{display:none!important}
.place-results{display:grid;gap:6px;max-height:230px;overflow:auto;margin:8px 0}
.place-result{display:grid;text-align:left;gap:4px;background:#f0f6fb;border:1px solid #c8d9e8;border-radius:10px;padding:12px;min-height:52px}
.place-result small{color:#536878}.place-result:focus-visible{outline:3px solid #2477bd}
#authPlaceStatus{font-size:13px;line-height:1.5;min-height:1.4em;color:#42617a}
.auth-place-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:10px}.auth-place-controls label{min-width:0}.auth-location-picker #authLocate{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:46px;min-height:46px;min-width:0;margin:0;padding:5px 8px}.auth-location-picker #authLocate svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.auth-location-picker #authLocate span{font-size:13px;line-height:1.2;white-space:normal;text-align:left}.auth-location-picker small{display:block;line-height:1.5}
.delete-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.delete-actions .danger{background:#b62b24;color:white;border:0;border-radius:9px;padding:12px 16px}
.account-delete-section{border-top:1px solid #d6e1ea;margin-top:24px;padding-top:20px}.account-delete-section p{font-size:14px}
#deleteAccountStatus{line-height:1.6;color:#80322c}
#publicProfileDetail{padding:0;background:transparent;border:0}
.public-profile-identity{padding:36px;background:linear-gradient(100deg,#fff 34%,#f0f7fbb3 70%,#edf5f8);border-radius:20px;min-height:220px;position:relative;isolation:isolate;overflow:hidden}
.public-profile-identity:after{content:'';position:absolute;inset:0 0 0 45%;background:linear-gradient(90deg,#f7fbfd,transparent),url('assets/zaeme-landscape-20261108.png') center/cover;opacity:.5;z-index:-1}
.public-profile-name h2{font-size:36px;line-height:1.2}.public-profile-avatar{width:112px;height:112px;flex:0 0 112px;font-size:40px}
.public-profile-summary{background:transparent;margin:16px 0}.public-profile-rating{padding:10px 16px;border-radius:10px;background:#e5f1f9;color:#175a86;font-weight:600}
.public-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 32px}.public-profile-stats>div{display:flex;align-items:center;gap:14px;background:white;border:1px solid #d2dfe9;border-radius:14px;padding:20px}.public-profile-stats strong{font-size:30px;color:#225d83}.public-profile-stats span{font-size:15px}
.public-profile-section>h3{font-size:24px}.public-profile-section>p{color:#627482}
.public-profile-listings{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.public-listing-card{overflow:hidden;min-width:0;gap:10px;background:#fff}.public-listing-card .job-media{width:100%;height:180px;aspect-ratio:auto}.public-listing-card .job-media img{width:100%;height:100%;object-fit:cover}.public-listing-card strong{font-size:21px}.public-services-heading{grid-column:1/-1;margin:20px 0 0}
@media(max-width:600px){.public-profile-identity{padding:22px 16px;min-height:180px;gap:16px}.public-profile-name h2{font-size:25px}.public-profile-avatar{width:72px;height:72px;flex-basis:72px;font-size:28px}.public-profile-stats{grid-template-columns:1fr;gap:8px;margin:20px 0}.public-profile-stats>div{padding:12px 16px}.public-profile-stats strong{font-size:24px;min-width:30px}.public-profile-listings{grid-template-columns:1fr}.public-profile-section>h3{font-size:22px}.delete-actions{flex-wrap:wrap}.hero-visual img{object-position:62% center}}
.review-switcher{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;background:#dfeef8;border-top:1px solid #adc8dc;padding:14px;margin-top:24px}.review-switcher a{background:white;color:#225d83;padding:8px 12px;border-radius:8px;text-decoration:none;font-size:13px}
.everyday-help{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:28px;margin:30px 0 42px;padding:22px;background:#fff;border:1px solid #d6e2ea;border-radius:18px}.everyday-help img{width:100%;height:150px;object-fit:cover;border-radius:12px}.everyday-help h2{font-size:24px;margin:0 0 10px}.everyday-help p{margin:0;line-height:1.6;color:#546977}@media(max-width:600px){.everyday-help{grid-template-columns:1fr;gap:16px;padding:16px;margin:22px 0}.everyday-help img{height:170px}.everyday-help h2{font-size:22px}}
.home-visual img{object-fit:contain;object-position:center}@media(max-width:700px){.home-visual{display:block!important;margin:18px 0 0;height:auto;min-height:0}.home-visual img{width:100%;height:auto;border-radius:16px;aspect-ratio:4/3}}
@media(min-width:1000px){.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,40%)}.home-visual img{max-height:340px}}
.home-support{margin:0 0 8px;color:var(--text-2);font-size:16px;line-height:1.6;max-width:58ch}
@media(max-width:600px){.logo-copy{font-size:clamp(21px,6vw,27px)}}
@media(min-width:900px){.home-lead{grid-column:1;grid-row:3;margin:0}.home-support{grid-column:1;grid-row:4}.home-visual{grid-row:1 / span 4}}
.proposal-price-choice{display:grid;gap:8px;margin:14px 0}.proposal-price-choice button{min-height:44px;width:100%}.price-proposal [hidden]{display:none!important}
.workflow-priority{background:#eaf3fa;border:1px solid #c9dfed;border-radius:16px;padding:16px;margin:16px 0 22px}.workflow-priority .apply-box{margin:0;padding:0;border:0;background:transparent}.workflow-priority .next-step{font-size:16px;line-height:1.5;color:#243e50}.workflow-priority .next-step strong{display:inline-block;font-size:20px;margin-bottom:5px}.workflow-role{font-size:13px;color:#526575}.workflow-priority .primary{background:#17618b;color:white;margin-bottom:10px}
.workflow-priority p.next-step{display:block;padding:0;border:0;background:transparent;min-height:0}.workflow-priority p.next-step strong{margin-bottom:4px}
.review-breakdown{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.review-breakdown>span{display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:9px;border:1px solid #d4e0e8;font-size:14px}.review-breakdown b{font-size:18px}.review-breakdown small{font-size:11px;opacity:.85}.review-positive{background:#edf7f1;color:#246345}.review-neutral{background:#f4f6f8;color:#4d5964}.review-negative{background:#fff0ee;color:#993c32;border-color:#ebc1ba!important}.review-breakdown-unavailable{font-size:12px;color:#65717d}
.person-review-summary .review-breakdown,.profile-review-summary .review-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:450px;gap:6px}
.person-review-summary .review-breakdown>span,.profile-review-summary .review-breakdown>span{flex-wrap:wrap;justify-content:center;gap:4px;padding:6px;font-size:12px}
.person-review-summary .review-breakdown small,.profile-review-summary .review-breakdown small{flex-basis:100%;text-align:center}
.profile-review-summary{margin:0 0 16px}.person-review-summary{margin:6px 0}
/* Keep the white profile card full width, with readable fields and nearby actions. */
.profile.is-editing .profile-details-body>form{width:100%;max-width:680px;box-sizing:border-box}
.profile.is-editing .profile-bio-head,.profile.is-editing .profile-location-summary{justify-content:flex-start;gap:16px;flex-wrap:wrap}
.profile.is-editing .auth-street-row{grid-template-columns:minmax(0,1fr) 110px}
.profile.is-editing .private-address-form{padding-inline:0}
/* Read and act on a notification in one place instead of across the page. */
#notifications .page-head-row{display:grid;justify-items:start;gap:12px}
#notifications{width:min(100%,800px);margin-inline:auto}
.notification-row{display:grid;grid-template-columns:40px minmax(0,1fr);padding-right:0}
.notification-item{grid-column:1/-1;padding:14px 16px 0}
.notification-copy>span{max-width:70ch}
.notification-open{grid-column:2;justify-self:start;margin:2px 0 10px 12px;padding:0 6px;font-size:14px;gap:4px;color:var(--on-tint)}
.page-head .category-intro{max-width:none;line-height:1.65}
.navigation-choices{max-width:none;width:100%}
/* Fee disclosure shares the accepted total; it never adds a client surcharge. */
.offer-commission{display:grid;grid-template-columns:1fr;gap:8px 16px;padding:10px 0;color:var(--text-2)}
.offer-commission>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.offer-commission strong{font-size:15px;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.offer-commission .offer-worker-share strong{color:var(--accent)}
.offer-commission p,.offer-commission-note{font-size:12px;line-height:1.45;color:var(--text-2);margin:0}
.offer-commission p{grid-column:1/-1}.offer-commission-note{margin:12px 0}
.transparent-offer-form>.offer-commission,.price-proposal-sum>.offer-commission{grid-column:1/-1}
.price-proposal-sum>.offer-commission{padding:7px 0 0;gap:6px 16px}
.price-proposal-sum .offer-commission span{font-size:11px;grid-column:auto}
.price-proposal-sum .offer-commission strong{font-size:14px}
/* One decision area, with one amount per row and both choices together. */
.price-proposal .price-proposal-bar{position:static;display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px}
.price-proposal-sum{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline}
.price-proposal-sum>strong{font-size:17px;text-align:right}
.price-proposal-sum>#offerTotalBreakdown{grid-column:1/-1}
.price-proposal-sum>#offerTotalBreakdown:empty{display:none}
.price-proposal-sum>.offer-commission{display:grid;grid-template-columns:1fr;gap:7px;padding:0}
.price-proposal-sum .offer-commission>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.price-proposal-sum .offer-commission span{font-size:13px}
.price-proposal-sum .offer-worker-share{padding-top:8px;border-top:1px solid var(--line)}
.price-proposal-sum .offer-worker-share strong{font-size:19px}
.price-proposal-bar .proposal-price-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.price-proposal-bar .proposal-price-choice button{width:100%;min-height:44px;padding:10px 12px;font-size:14px}
.price-proposal-bar .proposal-price-choice button[hidden]{display:none}
.price-proposal-bar .offer-commission-note{margin:0}
.offer-commission .offer-commission-calculation{align-items:baseline;color:var(--text-2);font-size:12px}
.offer-commission-calculation #offerCommissionPreview{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.price-proposal-sum .offer-commission-calculation span{font-size:12px}
.price-proposal-sum .offer-commission-calculation #offerCommissionPreview{font-size:17px;font-weight:600}
#offerCustomPrice:not([hidden]){display:grid;gap:10px}
#offerCustomPrice .price-proposal-label{margin:0;line-height:1.4}
#offerCustomPrice .price-stepper{margin-top:0}
#offerCustomPrice .price-proposal-meta{display:grid;justify-items:center;gap:6px;margin:0;text-align:center}
.detail-card .open-task-detail .detail-head{padding:16px 46px 14px 16px;background:var(--surface-soft);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.detail-card .open-task-detail .detail-summary{padding:0 16px 16px;margin:0 0 16px;background:var(--surface-soft);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px}
@media(max-width:600px){.price-proposal-bar .proposal-price-choice{grid-template-columns:1fr}}
/* Profile photo enlargement is independent of the profile upload control. */
.profile-photo-zoom{padding:0;border:2px solid transparent;cursor:zoom-in;background:var(--surface-soft)}
.profile-photo-zoom:disabled{cursor:default;opacity:1}.profile-photo-zoom:hover:not(:disabled){border-color:var(--accent)}
.profile-photo-zoom:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.profile-photo-open{overflow:hidden}
.profile-photo-viewer{padding:0;border:0;border-radius:16px;width:min(720px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:auto;color:var(--text);background:var(--surface);overflow:auto}
.profile-photo-viewer::backdrop{background:rgba(16,35,48,.72)}
.profile-photo-viewer-card{padding:16px}.profile-photo-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.profile-photo-viewer-head h2{margin:0;font-size:18px;overflow-wrap:anywhere}.profile-photo-viewer-head button{flex:none;width:44px;height:44px;padding:0;font-size:26px}
.profile-photo-viewer-card>img{display:block;width:100%;height:auto;max-height:calc(100dvh - 140px);object-fit:contain;border-radius:8px}
.profile-photo-viewer-card>img[hidden],.profile-photo-viewer-card>p[hidden]{display:none}
/* Profile summaries are direct filters, including before a person is selected. */
.review-breakdown>button{display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:9px;border:1px solid #d4e0e8;font:inherit;font-size:14px;cursor:pointer}
.review-breakdown>button:hover{box-shadow:inset 0 0 0 1px currentColor}
.review-breakdown>button:focus-visible,.public-profile-stats>button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.person-review-summary .review-breakdown>button,.profile-review-summary .review-breakdown>button{flex-wrap:wrap;justify-content:center;gap:4px;padding:6px;font-size:12px}
.public-review-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.public-review-filters button[aria-pressed="true"],.public-profile-stats>button[aria-pressed="true"]{background:#e3f0fa;border-color:#7daacb;color:#174e72}
.public-profile-stats>button{display:flex;align-items:center;gap:14px;background:white;border:1px solid #d2dfe9;border-radius:14px;padding:20px;text-align:left;font:inherit;cursor:pointer}
.public-profile-stats>button:hover{border-color:var(--accent)}
#publicProfileReviewList,#publicProfileListingsSection{scroll-margin-top:110px}
.public-profile-visibility-note{font-size:14px;color:var(--text-2)}
@media(max-width:600px){.public-profile-stats>button{padding:12px 16px}.review-breakdown>button{flex:1 1 0;justify-content:center;flex-wrap:wrap;gap:4px;padding:8px 6px;font-size:12px}.review-breakdown>button small{flex-basis:100%;text-align:center}}
.review-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:480px;gap:8px}
.review-breakdown>button.review-count{appearance:none;position:relative;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;min-width:0;height:56px;min-height:56px;padding:18px 6px 6px;gap:6px;border:1px solid #d4e0e8;border-radius:10px;box-shadow:none;line-height:1.2;text-align:center;font-weight:400}
.review-breakdown>button.review-count b{font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.review-breakdown>button.review-count .review-count-label{font-size:14px;white-space:nowrap}
.review-breakdown>button.review-count small{position:absolute;top:5px;right:6px;white-space:nowrap;font-size:10px;line-height:1.2;opacity:1}
.review-breakdown>button.review-count:hover{border-color:currentColor;box-shadow:0 1px 3px rgba(16,35,48,.1)}
@media(max-width:380px){.review-breakdown{gap:5px}.review-breakdown>button.review-count{gap:3px;padding:18px 2px 6px}.review-breakdown>button.review-count .review-count-label{font-size:12px}}
/* Profile belongs to the person's identity; sign-out stays beside the account title. */
.account-header .profile-identity>.account-identity-profile-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:46px;padding:10px 16px;white-space:nowrap;font-size:15px;font-weight:600;color:var(--accent);background:#deedf8;border:1px solid #9bc4e1;border-radius:10px;box-shadow:0 1px 2px rgba(16,35,48,.06)}
.account-header .profile-identity>.account-identity-profile-button:hover{background:#cee4f4;border-color:var(--accent)}
/* Account identity stays quiet, distinct from the section navigation. */
.topbar #accountBtn{gap:7px;min-height:40px;padding:0 10px;border:1px solid #dce2e5;border-radius:10px;background:#fff;color:var(--text);box-shadow:none;font-weight:500}
.topbar #accountBtn.active-nav{background:#f5f6f6;border-color:#cbd3d7;color:var(--text);box-shadow:none}
.topbar #accountBtn:hover{background:#f0f2f3;border-color:#bfc9ce}
.topbar #accountBtn:focus-visible{outline:2px solid #657780;outline-offset:3px}
.topbar #accountBtn .account-btn-icon{display:grid;flex:0 0 auto;color:#65727a}
.topbar #accountBtn .account-btn-icon .icon{width:20px;height:20px}
@media(max-width:600px){.account-header .profile-identity-copy{flex:1 1 0;min-width:0}}
/* Begin with the two directions; show category navigation only after a choice. */
.account-side-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.account-side-card{display:grid;align-content:start;gap:10px;min-width:0;min-height:164px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.account-side-card strong{font-size:22px;line-height:1.25;color:var(--on-tint)}
.account-side-card>span{font-size:14px;line-height:1.5;color:var(--text-2);max-width:42ch}
.account-side-card small{font-size:13px;color:var(--accent);font-weight:600}
.account-side-card:hover{background:var(--surface-soft);border-color:var(--accent-line)}
.account-side-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.account-side-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.account-side-head>div{display:grid;gap:8px}.account-side-head h3{margin:0;font-size:22px;color:var(--heading)}
.account-side-head>.text-link{flex:0 0 auto;font-size:14px}
.work-safety-fields{display:grid;gap:8px;margin-top:12px;max-width:680px}
.work-safety-fields.hidden{display:none}
.work-safety-fields .field-help{margin:0;line-height:1.5}
.work-safety-notice{display:grid;gap:6px;padding:12px 14px;margin:12px 0;border:1px solid #d5e1e8;border-radius:10px;background:var(--surface-soft)}
.work-safety-notice p,.work-safety-notice small{margin:0;line-height:1.45}
.work-safety-notice small{color:var(--text-2)}
.work-safety-blocked{border-color:#decdb3;background:#fff9ee}
@media(max-width:600px){.account-side-choices{grid-template-columns:1fr;gap:12px}.account-side-card{min-height:140px;padding:18px}.account-side-card strong{font-size:21px}.account-side-head{align-items:flex-start;flex-wrap:wrap;gap:12px}.account-side-head>.text-link{font-size:13px}}