/*
 * Workspace: signed-in account pages as an app, not a marketing page.
 * A fixed sidebar (logo, navigation, you), a slim top bar (page title, Chat, notifications, Post,
 * account menu) and one consistent look for headings, cards, tabs and stats.
 * Everything is scoped to body.is-workspace, so marketing pages are untouched.
 */
body.is-workspace {
  --ws-bg: #f4f7f6;
  --ws-panel: #fff;
  --ws-line: #e3ebe8;
  --ws-ink: #18352f;
  --ws-muted: #6a8182;
  --ws-accent: #087c66;
  --ws-forest: #003b37;
  --ws-soft: #e8f4f0;
  --ws-radius: 8px;
  --ws-side-w: 260px;
  --ws-top-h: 64px;
  background: var(--ws-bg);
  padding-bottom: 0;
}

/* The marketing chrome steps aside. */
body.is-workspace .site-header,
body.is-workspace #hero-home,
body.is-workspace #search-form,
body.is-workspace .site-foot,
body.is-workspace .tabbar,
body.is-workspace .info-strip { display: none !important; }
body.is-workspace #stage { padding: 0; margin: 0; max-width: none; }
body.is-workspace .account-hub { min-height: 100dvh; padding: 0; background: var(--ws-bg); }

/* ── Shell ── */
body.is-workspace .account-layout.ws {
  display: grid;
  grid-template-columns: var(--ws-side-w) minmax(0, 1fr);
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.ws-side, .ws-body, .ws-top, .ws-backdrop { display: none; }
body.is-workspace .ws-side {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--ws-panel);
  border-right: 1px solid var(--ws-line);
}
body.is-workspace .ws-body { display: flex; flex-direction: column; min-width: 0; }
/* The sidebar toggle sits where the page title was (collapse on desktop, drawer on phones). */
body.is-workspace .ws-menu { display: grid; }
.ws-menu:hover { background: #f2f7f5; }
.ws-menu-chevron { transition: transform .2s ease; transform-origin: 14px 12px; }
body.ws-collapsed .ws-menu-chevron { transform: scaleX(-1); }
.ws-brand { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--ws-top-h); padding: 0 18px 0 20px; border-bottom: 1px solid var(--ws-line); }
.ws-close, .ws-menu { display: none; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); background: #fff; color: var(--ws-ink); cursor: pointer; }
.ws-close svg, .ws-menu svg { width: 18px; height: 18px; }

/* Sidebar content (the old card styles are undone here). */
body.is-workspace .account-sidebar {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin: 0;
  padding: 14px 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
}
body.is-workspace .account-area-switch { margin: 0 0 14px; padding: 3px; border-radius: var(--ws-radius); background: #eef3f1; }
body.is-workspace .account-area-switch a { min-height: 32px; border-radius: 6px; font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
body.is-workspace .account-side-nav { display: block; flex: 1; order: 0; margin: 0; padding: 0; }
body.is-workspace .account-side-primary { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
body.is-workspace .account-side-group { margin: 0 0 6px; }
body.is-workspace .account-side-group-label { padding: 14px 10px 6px; color: #8a9c98; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
body.is-workspace .account-side-nav a,
body.is-workspace .account-side-nav button {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  color: #3c5853;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
body.is-workspace .account-side-nav a:hover { background: #f2f7f5; color: var(--ws-forest); }
body.is-workspace .account-side-nav a[aria-current="page"] { background: var(--ws-soft); color: var(--ws-forest); font-weight: 800; }
body.is-workspace .account-side-nav a[aria-current="page"] .ui-icon { color: var(--ws-accent); }
body.is-workspace .account-side-nav .ui-icon { width: 18px; height: 18px; flex: none; color: #6f8a84; }
body.is-workspace .account-side-count { position: static; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; background: #e4572e; font-size: 11px; }
body.is-workspace .account-side-sell { margin: 12px 0 4px; border-radius: var(--ws-radius); }

.ws-side-foot { display: grid; gap: 4px; flex: none; margin: 12px -12px 0; padding: 10px 12px 14px; border-top: 1px solid var(--ws-line); background: var(--ws-panel); position: sticky; bottom: 0; }

/* Top bar: page title on the left, the header's own controls on the right. */
body.is-workspace .ws-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ws-top-h);
  padding: 0 28px;
  border-bottom: 1px solid var(--ws-line);
  background: #ffffffeb;
  backdrop-filter: blur(10px);
}
.ws-top-spacer { flex: 1; }
.ws-actions .header-actions { display: flex; align-items: center; gap: 4px; margin: 0; }
/* In the workspace: Chat, Favourites and notifications as icons; no "For business" (it's in the sidebar). */
.ws-actions .hdr-text,
.ws-actions .hdr-biz { display: none !important; }
.ws-actions .hdr-link.hdr-desk, .ws-actions .hdr-icon.hdr-desk { display: inline-flex; width: 40px; min-height: 40px; justify-content: center; padding: 0; border-radius: 50%; }
.ws-actions .hdr-badge { left: auto; right: 0; top: 2px; }
.ws-actions .hdr-add { margin-left: 6px; }

/* ── Page content ── */
body.is-workspace .account-main { width: 100%; max-width: 1240px; box-sizing: border-box; margin: 0 auto; padding: 28px 32px 56px; }
body.is-workspace .account-head { margin: 0 0 22px; }
body.is-workspace .account-head h1 { margin: 0 0 4px; color: var(--ws-ink); font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
body.is-workspace .account-head p { color: var(--ws-muted); font-size: 14px; }
body.is-workspace .account-card,
body.is-workspace .job-profile-panel,
body.is-workspace .inbox-app { border: 1px solid var(--ws-line); border-radius: var(--ws-radius); background: var(--ws-panel); box-shadow: 0 1px 2px #003b3706; }
body.is-workspace .account-card { padding: 20px 22px; margin: 0 0 18px; }
body.is-workspace .account-card-head { align-items: center; margin: 0 0 14px; }
body.is-workspace .account-card-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
body.is-workspace .account-stats { gap: 14px; margin-bottom: 18px; }
body.is-workspace .account-stat { padding: 18px 20px; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); background: var(--ws-panel); box-shadow: 0 1px 2px #003b3706; }
body.is-workspace .account-stat strong { color: var(--ws-forest); font-size: 26px; letter-spacing: -.02em; }
body.is-workspace .account-stat span { color: var(--ws-muted); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.is-workspace .account-empty-panel { border-radius: var(--ws-radius); }
/* Tab strips look the same everywhere. */
body.is-workspace .account-main [role="tablist"]:not(.inbox-filters) { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--ws-radius); background: #eaf0ee; width: fit-content; max-width: 100%; }
body.is-workspace .account-main [role="tablist"]:not(.inbox-filters) [role="tab"] { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #4d6b63; font-size: 13px; font-weight: 700; box-shadow: none; }
body.is-workspace .account-main [role="tablist"]:not(.inbox-filters) [role="tab"][aria-selected="true"] { background: #fff; color: var(--ws-forest); box-shadow: 0 1px 3px #003b3718; }
/* The inbox fills the workspace height. */
body.is-workspace .inbox-app { height: clamp(520px, calc(100dvh - var(--ws-top-h) - 170px), 900px); }

/* ── Phones and tablets: the sidebar slides in from the left ── */
@media (max-width: 960px) {
  body.is-workspace .account-layout.ws { grid-template-columns: minmax(0, 1fr); }
  body.is-workspace .ws-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 86vw);
    height: auto;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px #003b3733;
    z-index: 90;
  }
  body.is-workspace.ws-nav-open .ws-side { transform: none; }
  body.is-workspace .ws-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 85; background: #0b1f1c66; }
  body.is-workspace .ws-menu, body.is-workspace .ws-close { display: grid; }
  body.is-workspace .ws-top { padding: 0 14px; gap: 8px; }
  body.is-workspace .account-main { padding: 20px 16px 40px; }
  body.is-workspace .account-head h1 { font-size: 22px; }
  /* Show the header's controls (they're marked desktop-only on marketing pages). */
  .ws-actions .hdr-desk { display: inline-flex !important; }
  /* Post becomes a round + button (the marketing header hides its icon on phones). */
  .ws-actions .hdr-add span { display: none; }
  .ws-actions .hdr-add { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
  .ws-actions .hdr-add .ui-icon { display: block !important; width: 20px; height: 20px; }
  body.is-workspace .inbox-app { height: calc(100dvh - var(--ws-top-h) - 150px); }
}
@media (prefers-reduced-motion: reduce) { body.is-workspace .ws-side { transition: none; } }

/* ── Dashboard ── */
.dash { color: var(--ws-ink, #18352f); }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.dash-head h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.dash-head p { margin: 0; color: var(--ws-muted, #6a8182); font-size: 14px; }
.dash-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-head-actions a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 800; }
.dash-head-actions .ui-icon { width: 16px; height: 16px; }

.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.dash-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'icon label' 'value value' 'delta delta'; align-items: center; gap: 10px 10px; padding: 18px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px #003b3706; transition: border-color .15s ease, box-shadow .15s ease; }
.dash-kpi:hover { border-color: #b9d6cd; box-shadow: 0 6px 18px #003b370f; }
.dash-kpi-icon { grid-area: icon; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--ws-soft, #e8f4f0); color: var(--ws-accent, #087c66); }
.dash-kpi-icon .ui-icon { width: 18px; height: 18px; }
.dash-kpi-label { grid-area: label; color: var(--ws-muted, #6a8182); font-size: 13px; font-weight: 700; }
.dash-kpi strong { grid-area: value; color: var(--ws-forest, #003b37); font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.dash-kpi strong small { color: var(--ws-muted, #6a8182); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.dash-delta { grid-area: delta; justify-self: start; padding: 2px 8px; border-radius: 999px; background: #eef3f1; color: #66807a; font-size: 12px; font-weight: 800; }
.dash-delta.is-up { background: #e3f6ee; color: #0b6b4f; }
.dash-delta.is-down { background: #fdebe4; color: #a03a17; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 18px; align-items: start; }
/* Two columns side by side: the shorter one follows the longer one down (JS picks it and its top: followShorterColumns). */
body.is-workspace .is-follow { position: sticky; top: var(--follow-top, 84px); align-self: start; }
.dash-col { display: grid; gap: 18px; min-width: 0; }
.dash-col > .account-card { margin: 0; }
.dash-card { min-width: 0; padding: 20px 22px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; box-shadow: 0 1px 2px #003b3706; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.dash-card-head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.dash-card-head a { color: #006d60; font-size: 13px; font-weight: 800; text-decoration: none; }
.dash-card-head a:hover { text-decoration: underline; }
.dash-empty { margin: 0; color: var(--ws-muted, #6a8182); font-size: 13.5px; }
.dash-clear { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 6px; background: #f3faf7; }
.dash-clear > .ui-icon { flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: #dff2ea; color: var(--ws-accent, #087c66); }
.dash-clear strong { font-size: 14px; }
.dash-clear p { margin: 2px 0 0; color: var(--ws-muted, #6a8182); font-size: 13px; }
.dash-clear a { color: #006d60; font-weight: 800; }
.dash-card .order-tasks { margin-bottom: 10px; }

.dash-list { display: grid; gap: 2px; }
.dash-row, .dash-msg { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 6px; color: inherit; text-decoration: none; }
.dash-row:hover, .dash-msg:hover { background: #f2f7f5; }
.dash-row > .ui-icon { flex: none; width: 16px; height: 16px; margin-left: auto; color: #8a9c98; transform: rotate(-90deg); }
.dash-row.is-quiet strong { color: var(--ws-muted, #6a8182); }
.dash-row-main { display: grid; gap: 2px; min-width: 0; }
.dash-row-main strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-main small { overflow: hidden; color: var(--ws-muted, #6a8182); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.dash-msg.is-unread strong { font-weight: 800; }
.dash-msg.is-unread small { color: #2c4a43; }
.dash-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #dfe8e5; color: #7d948f; overflow: hidden; }
.dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-avatar .ui-icon { width: 58%; height: 58%; margin-top: 14%; }
.dash-dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #e4572e; }
.dash-note { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid #eef2f0; }
.dash-note:last-child { border-bottom: 0; }
.dash-note strong { font-size: 13.5px; }
.dash-note.is-unread strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e4572e; vertical-align: middle; }
.dash-note small { display: -webkit-box; overflow: hidden; color: var(--ws-muted, #6a8182); font-size: 12.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-note time { color: #8a9c98; font-size: 11.5px; }

.dash-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-bottom: 2px; border-bottom: 1px solid #e3ebe8; }
.dash-chart span { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #2aad78, #0a8f6f); opacity: .9; }
.dash-chart span:hover { opacity: 1; background: #003b37; }
.dash-chart-x { display: flex; justify-content: space-between; margin-top: 6px; color: #8a9c98; font-size: 11.5px; }

.dash-table { display: grid; }
.dash-tr { display: grid; grid-template-columns: minmax(0, 1fr) 80px 90px 100px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef2f0; font-size: 14px; font-variant-numeric: tabular-nums; }
.dash-tr:last-child { border-bottom: 0; }
.dash-tr > span:not(:first-child) { text-align: right; }
.dash-th { padding-top: 0; color: #8a9c98; font-size: 12px; font-weight: 700; }
.dash-td-listing { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-td-listing img, .dash-td-listing > i { flex: none; width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #f0ebe2; }
.dash-td-listing > span { display: grid; min-width: 0; }
.dash-td-listing a, .dash-td-listing > span { overflow: hidden; color: var(--ws-ink, #18352f); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.dash-td-listing small { color: #8a9c98; font-size: 12px; font-weight: 600; }

.dash-tip { background: linear-gradient(135deg, #f0faf6, #fff); }
.dash-tip strong { display: block; margin-bottom: 4px; font-size: 14px; }
.dash-tip p { margin: 0; color: #4d6b63; font-size: 13px; line-height: 1.5; }
.dash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-quick a { display: grid; justify-items: start; gap: 8px; padding: 12px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; color: var(--ws-ink, #18352f); font-size: 13px; font-weight: 700; text-decoration: none; }
.dash-quick a:hover { border-color: #b9d6cd; background: #f6faf8; }
.dash-quick .ui-icon { width: 20px; height: 20px; color: var(--ws-accent, #087c66); }

@media (max-width: 1180px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dash-head { flex-direction: column; align-items: stretch; }
  .dash-head-actions a { flex: 1; justify-content: center; }
  .dash-kpi { padding: 14px; }
  .dash-kpi strong { font-size: 22px; }
  .dash-card { padding: 16px; }
  .dash-tr { grid-template-columns: minmax(0, 1fr) 60px 70px; }
  .dash-tr > span:nth-child(4) { display: none; }
}

/* No shouty uppercase labels in the workspace: small labels read in sentence case. */
body.is-workspace .account-main :is(.listing-kind, .perf-head, .perf-table-head, .bulk-table-head, .seller-ad-status, .plan-badge, .sc-step-kicker, .sc-switcher-label, .store-link-label, .lead-status, .inbox-kind, .account-settings dt) { text-transform: none; letter-spacing: 0; }
body.is-workspace .account-main .listing-kind { font-size: 12px; }


/* ── Collapsed sidebar (desktop): an icon rail; the logo becomes the logomark ── */
@media (min-width: 961px) {
  body.is-workspace .account-layout.ws { transition: grid-template-columns .2s ease; }
  body.is-workspace.ws-collapsed { --ws-side-w: 72px; }
  body.ws-collapsed .ws-brand { justify-content: center; padding: 0; }
  body.ws-collapsed .ws-brand .brand-name { display: none; }
  body.ws-collapsed .account-sidebar { padding: 12px 10px 0; overflow-x: hidden; }
  body.ws-collapsed .account-area-switch { display: none; }
  /* Group names become thin dividers. */
  body.ws-collapsed .account-side-group-label { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--ws-line); color: transparent; font-size: 0; }
  body.ws-collapsed .account-side-nav a { position: relative; justify-content: center; padding: 10px 0; gap: 0; }
  body.ws-collapsed .ws-side-back { justify-content: center; padding: 6px; gap: 0; border-color: transparent; background: none; }
  body.ws-collapsed .ws-side-back > .ui-icon { display: none; }
  /* Labels stay for screen readers, hidden from view. */
  body.ws-collapsed .account-side-nav a > span:not(.account-side-count),
  body.ws-collapsed .ws-side-back-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.ws-collapsed .account-side-count { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  body.ws-collapsed .ws-side-foot { padding: 10px 10px 14px; margin: 12px -10px 0; }
  body.ws-collapsed .account-side-sell { justify-content: center; padding: 10px 0; }
  body.ws-collapsed .account-side-sell span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { body.is-workspace .account-layout.ws, .ws-menu-chevron { transition: none; } }

/* ── One page header everywhere (the dashboard's): title and a line on the left, actions on the right ── */
body.is-workspace .account-main .account-head,
body.is-workspace .account-main .plans-welcome,
body.is-workspace .inbox-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
}
body.is-workspace .account-main .account-head > :not(a):not(button):not(.btn-teal):not(.btn-outline):not(.page-head-actions),
body.is-workspace .account-main .plans-welcome > :not(a):not(button) { grid-column: 1; }
body.is-workspace .account-main .account-head > :is(a, button, .btn-teal, .btn-outline),
body.is-workspace .account-main .plans-welcome > :is(a, button) { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 800; }
body.is-workspace .account-main :is(.account-head, .plans-welcome, .dash-head) h1,
body.is-workspace .inbox-head h1 { margin: 0 0 4px; color: var(--ws-ink); font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
body.is-workspace .account-main :is(.account-head, .plans-welcome) p,
body.is-workspace .inbox-head p { margin: 0; color: var(--ws-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
  body.is-workspace .account-main .account-head,
  body.is-workspace .account-main .plans-welcome { grid-template-columns: minmax(0, 1fr); }
  body.is-workspace .account-main .account-head > :is(a, button, .btn-teal, .btn-outline) { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 10px; }
}

/* My Afrocurve rows: icon, title and blurb, count, chevron. */
.dash-row .dash-kpi-icon { flex: none; }
.dash-count { flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--ws-forest, #003b37); color: #fff; font-size: 11px; font-weight: 800; line-height: 22px; text-align: center; }
.dash-count + .ui-icon { margin-left: 8px !important; }
.dash-row .dash-count { margin-left: auto; }

/* ── Job Profile: dashboard cards; experience and education full width ── */
body.is-workspace .job-profile-panel { padding: 20px 22px; }
body.is-workspace .job-profile-section-head { margin-bottom: 16px; }
body.is-workspace .job-profile-section-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
body.is-workspace .job-profile-section-head p { margin-top: 4px; font-size: 13px; }
.job-profile-stack { display: grid; gap: 18px; }
.job-profile-stack .job-acc-entry { display: grid; gap: 14px 16px; margin: 0 0 12px; padding: 16px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; background: #fafcfb; }
.job-profile-stack .job-acc-entry[data-entry="experience"] { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.job-profile-stack .job-acc-entry[data-entry="education"] { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
.job-profile-stack .job-acc-entry .account-span { grid-column: 1 / -1; }
.job-entry-remove { grid-column: 1 / -1; justify-self: end; min-height: 32px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: #a03a17; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.job-entry-remove:hover { background: #fdebe4; }
/* Profile completeness, compact in the header. */
.dash-head .job-profile-progress { display: grid; gap: 8px; min-width: 180px; padding: 12px 14px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; }
.dash-head .job-profile-progress > div { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; }
.dash-head .job-profile-progress strong { color: var(--ws-forest, #003b37); font-size: 20px; }
.dash-head .job-profile-progress span { color: var(--ws-muted, #6a8182); font-size: 12px; font-weight: 700; }
.dash-head .job-profile-progress i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: #e3ebe8; }
.dash-head .job-profile-progress b { display: block; height: 100%; border-radius: 99px; background: var(--ws-accent, #087c66); }
@media (max-width: 860px) {
  .job-profile-stack .job-acc-entry[data-entry="experience"],
  .job-profile-stack .job-acc-entry[data-entry="education"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .job-profile-stack .job-acc-entry[data-entry] { grid-template-columns: minmax(0, 1fr); }
  .dash-head .job-profile-progress { min-width: 0; }
}

/* Back to marketplace: a small card at the foot of the sidebar. */
.ws-side-back { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: linear-gradient(135deg, #f1faf7, #fff); color: var(--ws-ink, #18352f); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ws-side-back:hover { border-color: #b9d6cd; box-shadow: 0 4px 14px #003b370f; }
.ws-side-back-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: #23e5db; color: var(--ws-forest, #003b37); }
.ws-side-back-icon .ui-icon { width: 19px; height: 19px; }
.ws-side-back-copy { display: grid; min-width: 0; }
.ws-side-back-copy strong { font-size: 13.5px; }
.ws-side-back-copy small { color: var(--ws-muted, #6a8182); font-size: 12px; }
.ws-side-back > .ui-icon { flex: none; width: 16px; height: 16px; margin-left: auto; color: #8a9c98; transform: rotate(180deg); transition: transform .15s ease; }
.ws-side-back:hover > .ui-icon { transform: rotate(180deg) translateX(-2px); color: var(--ws-forest, #003b37); }

/* First paint on a refresh of an account page: the workspace shell, never the marketing home underneath. */
body.ws-booting #view-account { display: block !important; }
body.ws-booting #view-home, body.ws-booting #view-list, body.ws-booting #view-ad { display: none !important; }

/* ── Verification and Business pages ── */
.verify-card { padding-bottom: 8px; }
.verify-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #eef2f0; }
.verify-card .account-card-head + .verify-row { border-top: 0; }
.verify-thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #dfe8e5; color: #7d948f; }
.verify-thumb.is-square { border-radius: 8px; }
.verify-thumb img { width: 100%; height: 100%; object-fit: cover; }
.verify-thumb .ui-icon { width: 55%; height: 55%; }
.verify-copy { display: grid; gap: 3px; min-width: 0; }
.verify-copy strong { color: var(--ws-ink, #18352f); font-size: 14.5px; }
.verify-copy small { color: var(--ws-muted, #6a8182); font-size: 13px; line-height: 1.45; }
.verify-action { display: flex; justify-content: flex-end; min-width: 96px; }
.verify-action .btn-teal { min-height: 38px; padding: 0 16px; border-radius: 6px; font-weight: 800; }
.listing-row-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 640px) {
  .verify-row { grid-template-columns: 44px minmax(0, 1fr); }
  .verify-row .status-pill { grid-column: 2; justify-self: start; }
  .verify-action { grid-column: 1 / -1; justify-content: stretch; }
  .verify-action .btn-teal { width: 100%; }
}

/* ── Settings pages (Profile, Settings, Safety & privacy): what on the left, controls on the right ── */
.settings { display: grid; gap: 0; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; }
.settings-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 16px 40px; padding: 24px 26px; border-top: 1px solid #eef2f0; }
.settings-row:first-child { border-top: 0; }
.settings-row-head h2 { margin: 0 0 6px; color: var(--ws-ink, #18352f); font-size: 15px; font-weight: 800; }
.settings-row-head p { margin: 0; color: var(--ws-muted, #6a8182); font-size: 13px; line-height: 1.5; }
.settings-row-head a { color: #006d60; font-weight: 700; }
.settings-row-body { min-width: 0; }
.settings-row-body .account-form-grid { gap: 14px; }
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.settings-actions.is-start { justify-content: flex-start; margin: 0; }
body.is-workspace .settings-actions :is(.btn-teal, .btn-outline, .btn-danger),
body.is-workspace .settings-line :is(.btn-teal, .btn-outline),
body.is-workspace .settings-inline .btn-teal,
body.is-workspace .settings-list-row .btn-outline { width: auto; min-height: 40px; margin: 0; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 800; }
.settings-checks { display: grid; gap: 10px; }
.settings-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--ws-ink, #18352f); font-size: 14px; }
.settings-line .status-pill { margin-left: 6px; }
.settings-inline { display: flex; gap: 10px; align-items: center; }
.settings-inline select { flex: 1; min-width: 0; min-height: 42px; }
.settings-list { display: grid; }
.settings-list-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eef2f0; }
.settings-list-row:first-child { border-top: 0; padding-top: 0; }
.settings-list-row strong { display: block; font-size: 14px; }
.settings-list-row small { color: var(--ws-muted, #6a8182); font-size: 12.5px; }
.settings-note { margin: 0; color: #4d6b63; font-size: 14px; line-height: 1.55; }
.settings-row.is-danger .settings-row-head h2 { color: #a03a17; }
.btn-danger { display: inline-flex; align-items: center; border: 1px solid #e7b9a8; background: #fff5f1; color: #a03a17; cursor: pointer; font: inherit; }
.btn-danger:hover { background: #fdebe4; }
.profile-photo-row { display: flex; align-items: center; gap: 16px; }
body.is-workspace .profile-photo { display: grid; place-items: center; width: 72px; height: 72px; flex: none; overflow: hidden; border-radius: 50%; background: #dfe8e5; color: #7d948f; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo .ui-icon { width: 55%; height: 55%; margin-top: 14%; }
.profile-photo-row .muted { margin: 6px 0 0; font-size: 12.5px; }
body.is-workspace .profile-avatar-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 800; cursor: pointer; }
.profile-block { margin-left: auto; color: #a03a17 !important; }
@media (max-width: 760px) {
  .settings-row { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; gap: 12px; }
  .settings-actions { justify-content: stretch; }
  .settings-actions > * { flex: 1; justify-content: center; }
}

/* ── Wallet and Transactions ── */
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.is-workspace .account-main .account-head > .page-head-actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
body.is-workspace .page-head-actions :is(.btn-teal, .btn-outline) { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 800; }
body.is-workspace .page-head-actions .ui-icon { width: 16px; height: 16px; }
.txn-list { display: grid; }
.txn-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #eef2f0; }
.txn-row:first-child { border-top: 0; padding-top: 0; }
.txn-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; }
.txn-icon.is-in { background: #e3f6ee; color: #0b6b4f; }
.txn-icon.is-out { background: #f3efe9; color: #8a5a2b; }
.txn-copy { display: grid; gap: 2px; min-width: 0; }
.txn-copy strong { overflow: hidden; color: var(--ws-ink, #18352f); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.txn-copy small { overflow: hidden; color: var(--ws-muted, #6a8182); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.txn-amount { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.txn-amount.is-credit { color: #0b6b4f; }
.txn-amount.is-debit { color: #18352f; }
@media (max-width: 640px) {
  body.is-workspace .account-main .account-head > .page-head-actions { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .page-head-actions > * { flex: 1; justify-content: center; }
}

/* ── Notifications ── */
.note-list { padding: 4px 22px; }
.note-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid #eef2f0; }
.note-item:first-child { border-top: 0; }
.note-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eef3f1; color: #4d6b63; }
.note-item.is-unread .note-icon { background: #e3f6ee; color: #087c66; }
.note-icon .ui-icon { width: 19px; height: 19px; }
.note-copy { display: grid; gap: 3px; min-width: 0; }
.note-copy strong { color: var(--ws-ink, #18352f); font-size: 14.5px; }
.note-item.is-unread .note-copy strong::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #e4572e; vertical-align: middle; }
.note-copy p { margin: 0; color: #4d6b63; font-size: 13.5px; line-height: 1.5; }
.note-copy .note-actions { margin-top: 6px; }
.note-item time { color: #8a9c98; font-size: 12px; white-space: nowrap; }
body.is-workspace .push-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.is-workspace .push-card[hidden] { display: none; }
body.is-workspace .push-card h2 { margin: 0 0 4px; font-size: 15px; }
body.is-workspace .push-card p { margin: 0; font-size: 13px; }
body.is-workspace .push-card .btn-outline { flex: none; min-height: 38px; padding: 0 16px; border-radius: 6px; font-weight: 800; }
@media (max-width: 640px) {
  .note-list { padding: 4px 16px; }
  .note-item { grid-template-columns: 36px minmax(0, 1fr); }
  .note-item time { grid-column: 2; }
}

/* ── Bulk upload ── */
.bulk-steps { margin-bottom: 18px; }
.bulk-cats { display: inline; }
.bulk-cats summary { display: inline; color: #006d60; font-weight: 700; cursor: pointer; }
.bulk-cats p { margin: 6px 0 0; color: #4d6b63; font-size: 12.5px; line-height: 1.6; }
.bulk-drop { padding: 4px 0 0; }

/* ── Orders, sales and deliveries: cards like My listings ── */

/* ── B2B sourcing workspace ── */
.b2b-workspace { display: grid; gap: 18px; }
.b2b-head-actions { display: flex; gap: 8px; align-items: center; }
.b2b-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.b2b-tabs a { flex: none; padding: 9px 13px; border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 800; text-decoration: none; }
.b2b-tabs a[aria-current="page"] { background: var(--forest); color: #fff; }
.b2b-business-pick { display: grid; grid-template-columns: auto minmax(180px, 320px); align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 800; }
.b2b-business-pick select { min-height: 40px; }
.b2b-list { display: grid; gap: 12px; }
.b2b-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, auto); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--ws-radius, 8px); background: #fff; }
.b2b-card h2 { margin: 8px 0 5px; font-size: 18px; }
.b2b-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.b2b-card dl { display: grid; grid-template-columns: repeat(3, minmax(80px, 1fr)); gap: 12px; margin: 0; }
.b2b-card dl div { min-width: 0; }
.b2b-card dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.b2b-card dd { margin: 4px 0 0; font-weight: 800; overflow-wrap: anywhere; }
.b2b-card > button { justify-self: start; }
.b2b-empty { padding: 44px 20px; border: 1px dashed var(--line); border-radius: var(--ws-radius, 8px); text-align: center; background: #fff; }
.b2b-empty h2 { margin: 0 0 6px; }.b2b-empty p { margin: 0; color: var(--muted); }
.b2b-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--ws-radius, 8px); background: #fff; }
.b2b-form h2, .b2b-span { grid-column: 1 / -1; }
.b2b-form label { display: grid; align-content: start; gap: 6px; color: var(--forest); font-size: 13px; font-weight: 800; }
.b2b-form input, .b2b-form select, .b2b-form textarea { width: 100%; min-height: 42px; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; }
.b2b-form textarea { resize: vertical; }.b2b-form small { color: var(--muted); font-weight: 400; }
.b2b-form .b2b-check { display: flex; grid-template-columns: auto 1fr; align-items: center; }
.b2b-form .b2b-check input { width: 18px; min-height: 18px; }
.b2b-notice { margin: 0; padding: 12px; border-radius: 6px; background: #eef8f5; color: var(--forest); }
@media (max-width: 760px) { .b2b-card, .b2b-form { grid-template-columns: 1fr; }.b2b-card dl, .b2b-span, .b2b-form h2 { grid-column: 1; }.b2b-card dl { grid-template-columns: 1fr 1fr; } }
body.is-workspace .order-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.is-workspace .order-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--ws-line, #dfe8e6); border-radius: var(--ws-radius, 8px); background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px #003b3706; transition: border-color .15s ease, box-shadow .15s ease; }
body.is-workspace .order-card:hover { border-color: #a9c8c1; box-shadow: 0 8px 24px #003b370d; }
body.is-workspace .order-card img, body.is-workspace .order-card-ph { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: #f0ebe2; }
body.is-workspace .order-card-main { display: grid; gap: 3px; min-width: 0; }
body.is-workspace .order-card-main strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
body.is-workspace .order-card-main small { color: var(--ws-muted, #6a8182); font-size: 12.5px; }
body.is-workspace .order-card-main .status-pill { justify-self: start; }
body.is-workspace .order-card-amount { color: var(--ws-forest, #003b37); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Performance: the dashboard's header, KPI cards and two columns; one button size throughout ── */
.perf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 6px; font-size: 13.5px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; }
.perf-btn .ui-icon { width: 16px; height: 16px; }
.perf-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.perf-head-bar .perf-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.perf-range-bar { display: flex; align-items: center; gap: 8px; }
.perf-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--ws-radius, 8px); background: #eaf0ee; }
.perf-seg > :is(a, button) { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #4d6b63; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }
.perf-seg > :is(a, button):hover { color: var(--ws-forest, #003b37); }
.perf-seg > [aria-current="true"], .perf-seg > [aria-selected="true"] { background: #fff; color: var(--ws-forest, #003b37); box-shadow: 0 1px 3px #003b3718; }
.perf-seg.is-small > :is(a, button) { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.perf-custom { position: relative; }
.perf-custom > summary { list-style: none; }
.perf-custom > summary::-webkit-details-marker { display: none; }
.perf-custom[data-active] > summary { border-color: var(--ws-accent, #087c66); background: var(--ws-soft, #e8f4f0); color: var(--ws-forest, #003b37); }
.perf-custom-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 10px; width: 260px; padding: 14px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; box-shadow: 0 12px 32px #003b371f; }
.perf-custom-panel label { display: grid; gap: 4px; color: var(--ws-muted, #6a8182); font-size: 12.5px; font-weight: 700; }
.perf-custom-panel input[type="date"] { min-height: 38px; padding: 6px 10px; border: 1px solid #d5dfda; border-radius: 6px; background: #f7faf9; font: inherit; color: var(--ws-ink, #18352f); }
.perf-notice { margin: -8px 0 16px; padding: 10px 14px; border-radius: 6px; background: #fff8e6; color: #6b4e00; font-size: 13.5px; }
.perf-notice a { color: inherit; font-weight: 800; }
.perf .dash-kpi { cursor: default; align-content: start; }
.perf .dash-kpi:hover { border-color: var(--ws-line, #e3ebe8); box-shadow: 0 1px 2px #003b3706; }
.dash-delta em { font-style: normal; font-weight: 700; opacity: .75; }
.perf-chart-top { display: flex; align-items: baseline; gap: 8px; margin: -4px 0 12px; }
.perf-chart-top strong { color: var(--ws-forest, #003b37); font-size: 22px; letter-spacing: -.02em; }
.perf-chart-top span { color: var(--ws-muted, #6a8182); font-size: 13px; }
.perf-chart { height: 180px; }
.perf-table-toggle { margin-top: 14px; }
.perf-table-toggle summary { color: #006d60; font-size: 13px; font-weight: 800; cursor: pointer; }
.perf-note { margin: -6px 0 8px; font-size: 12.5px; }
.perf-table-tools { display: flex; align-items: center; gap: 8px; }
.perf-table-tools select { min-height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; background-color: #fff; color: var(--ws-ink, #18352f); font: inherit; font-size: 13.5px; font-weight: 700; }
.dash-tr.perf-tr { grid-template-columns: 22px minmax(0, 1fr) 70px 84px 96px 70px; }
.perf-tr input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ws-accent, #087c66); }
.perf-tr.is-ended .dash-td-listing a { color: var(--ws-muted, #6a8182); }
.perf-tr small { display: block; color: #8a9c98; font-size: 12px; }
.perf-count { min-width: 22px; padding: 2px 8px; border-radius: 999px; background: var(--ws-soft, #e8f4f0); color: var(--ws-accent, #087c66); font-size: 12px; font-weight: 800; text-align: center; }
.perf .perf-recs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.perf .perf-recs li { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; padding: 12px 0; border: 0; border-bottom: 1px solid #eef2f0; border-radius: 0; background: none; }
.perf .perf-recs li:first-child { padding-top: 0; }
.perf .perf-recs li:last-child { padding-bottom: 0; border-bottom: 0; }
.perf .perf-recs strong { font-size: 14px; }
.perf .perf-recs p { margin: 0 0 6px; color: var(--ws-muted, #6a8182); font-size: 13px; line-height: 1.5; }
.perf-terms { display: grid; gap: 10px; margin: 0; }
.perf-terms dt { font-size: 13.5px; font-weight: 800; }
.perf-terms dd { margin: 2px 0 0; color: #4d6b63; font-size: 13px; line-height: 1.5; }
.perf .perf-compare-card { border-radius: 6px; }
.perf .perf-compare-card header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .perf-range-bar { flex-wrap: wrap; }
  .perf-range-bar .perf-seg { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .perf-range-bar .perf-seg > a { flex: 1; justify-content: center; }
  .perf-range-bar .perf-custom { flex: 1; }
  .perf-range-bar .perf-custom > summary { width: 100%; }
  .perf-custom-panel { left: 0; right: auto; width: auto; min-width: 100%; }
  .dash-tr.perf-tr { grid-template-columns: 22px minmax(0, 1fr) 56px 64px; }
  .dash-tr.perf-tr > :nth-child(5), .dash-tr.perf-tr > :nth-child(6) { display: none; }
  .perf .dash-card-head { flex-wrap: wrap; }
}
/* The summary strip may contain a link (e.g. Saved searches). */
.listing-summary > a { display: block; padding: 16px 20px; border-right: 1px solid #e6eeec; color: inherit; text-decoration: none; }
.listing-summary > a:hover { background: #f6faf8; }
.listing-summary > a strong { display: block; margin-bottom: 3px; color: #18352f; font-size: 22px; letter-spacing: -.03em; }
.listing-summary > a span { color: #006d60; font-size: 12px; font-weight: 700; }

/* ── Team: members and invites as rows, roles explained beside them ── */
.team-row { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
.team-you { color: var(--ws-muted, #6a8182); font-weight: 600; }
.team-role select { min-height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; background-color: #fff; color: var(--ws-ink, #18352f); font: inherit; font-size: 13.5px; font-weight: 700; }
.team-actions { gap: 8px; }
.team-actions :is(.btn-outline, .btn-teal) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 6px; font-size: 13.5px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.team-actions .ui-icon, .team-link .ui-icon { width: 16px; height: 16px; }
.btn-outline.is-danger { border-color: #f0cfc4; color: #a03a17; }
.btn-outline.is-danger:hover { border-color: #a03a17; background: #fdf1ec; }
.team-empty { padding: 4px 0 12px; }
.team-roles > div { padding: 10px 12px; margin: 0 -12px; border-radius: 6px; }
.team-roles > div.is-current { background: var(--ws-soft, #e8f4f0); }
.team-roles-foot { margin-top: 12px; font-size: 12.5px; }
.team-role-choice { display: grid; gap: 10px; margin: 0 0 4px; padding: 0; border: 0; }
.team-role-choice legend { margin-bottom: 8px; color: var(--ws-ink, #18352f); font-size: 14px; font-weight: 800; }
.team-role-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 8px; cursor: pointer; }
.team-role-option:has(input:checked) { border-color: var(--ws-accent, #087c66); background: #f3faf7; box-shadow: 0 0 0 1px var(--ws-accent, #087c66) inset; }
.modal .team-role-option, .team-role-option { display: flex; flex-direction: row; }
.modal .team-role-option input[type="radio"], .team-role-option input[type="radio"] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--ws-accent, #087c66); }
.team-role-option span { display: grid; gap: 3px; }
.team-role-option strong { font-size: 14.5px; }
.team-role-option small { color: var(--ws-muted, #6a8182); font-size: 13px; line-height: 1.45; }
.team-link { display: flex; gap: 8px; margin: 4px 0 8px; }
.team-link input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; background: #f7faf9; font: inherit; font-size: 13.5px; color: var(--ws-ink, #18352f); }
.team-link .btn-teal { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 6px; font-weight: 800; }
@media (max-width: 640px) {
  .team-row { grid-template-columns: 44px minmax(0, 1fr); }
  .team-row .team-role, .team-row .status-pill { grid-column: 2; justify-self: start; }
  .team-actions { grid-column: 1 / -1; }
  .team-actions > * { flex: 1; }
  .team-row:has(.team-role) { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .team-row:has(.team-role) .verify-copy { grid-column: 2 / -1; }
  .team-row:has(.team-role) .team-role { grid-column: 2; grid-row: 2; }
  .team-row:has(.team-role) .team-actions { grid-column: 3; grid-row: 2; min-width: 0; }
  .team-row .team-actions:empty { display: none; }
}
.modal .team-link > :is(input, button) { box-sizing: border-box; height: 44px; min-height: 0; margin: 0; }

/* My Listings: status and "Premium until …" side by side. */
.listing-row-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pill.is-premium { background: #fff1e0; color: #8a4b00; }
/* A row whose ••• menu is open sits above the rows after it (its hover lift makes it a stacking context). */
.unified-listings .listing-row { position: relative; }
.unified-listings .listing-row:has(.listing-actions-menu[open]) { z-index: 30; }

/* ── A listing's own page (/account/listing): header, summary, tabs, then the tab ── */
.lp-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--ws-muted, #6a8182); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.lp-back:hover { color: var(--ws-forest, #003b37); }
.lp-back .ui-icon { width: 16px; height: 16px; }
.lp-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 0 0 18px; }
.lp-thumb { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; background: #f0ebe2; }
.lp-thumb.is-empty { display: grid; place-items: center; background: var(--ws-soft, #e8f4f0); color: var(--ws-accent, #087c66); }
.lp-thumb.is-empty .ui-icon { width: 30px; height: 30px; }
.lp-head-copy { display: grid; gap: 4px; min-width: 0; }
.lp-head-copy h1 { margin: 0; color: var(--ws-ink, #18352f); font-size: 24px; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.lp-head-copy p { margin: 0; color: var(--ws-muted, #6a8182); font-size: 14px; }
.lp-actions { position: relative; }
.lp .listing-summary { margin-bottom: 18px; }
.lp-tabs { margin: 0 0 18px; flex-wrap: wrap; }
.lp-tabs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; color: #4d6b63; font-size: 13px; font-weight: 700; text-decoration: none; }
.lp-tabs a[aria-selected="true"] { background: #fff; color: var(--ws-forest, #003b37); box-shadow: 0 1px 3px #003b3718; }
.lp-lead { margin: 0 0 6px; color: var(--ws-ink, #18352f); font-weight: 700; }
.lp-text { margin: 0; color: #4d6b63; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.lp-facts { display: grid; gap: 10px; margin: 0; }
.lp-facts dt { color: var(--ws-muted, #6a8182); font-size: 12.5px; }
.lp-facts dd { margin: 2px 0 0; color: var(--ws-ink, #18352f); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.lp-facts a { color: #006d60; }
.lp-cta { margin-top: 12px; min-height: 38px; padding: 0 14px; border-radius: 6px; font-weight: 800; }
/* The existing tools inside a tab: cards in the workspace style, no second page header. */
.lp-body .dir-acc:not(.job-acc) > header.account-head, .lp-body .account-head.is-embedded { display: none; }
/* One applicant: their name and the way back to the list stay. */
.lp-body .job-acc > header.account-head { margin: 0 0 14px; }
.lp-body .job-acc > header.account-head h1 { font-size: 20px; }
.lp-body .job-acc > header.account-head a { color: #006d60; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.lp-body .account-card { margin: 0 0 16px; padding: 20px 22px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; box-shadow: 0 1px 2px #003b3706; }
.lp-body .account-card-head h2 { font-size: 16px; }
.lp-body .auth-submit { width: auto; min-height: 40px; padding: 0 18px; border-radius: 6px; }
.lp-body .account-empty-panel { border-radius: var(--ws-radius, 8px); }
@media (max-width: 760px) {
  .lp-head { grid-template-columns: 60px minmax(0, 1fr); }
  .lp-thumb { width: 60px; height: 60px; }
  .lp-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .lp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
.lp-actions > .btn-outline { min-height: 40px; padding: 9px 15px; border-color: #003b37; background: #003b37; color: #fff; }
.dash-card-head .btn-link { padding: 0; border: 0; background: none; color: #006d60; font-size: 13px; font-weight: 800; cursor: pointer; }
.dash-card-head .btn-link:hover { text-decoration: underline; }
/* A job's applicants on its listing page: one card, a full-width row each. */
.lp-body .job-acc-list { margin: 0; padding: 4px 20px; list-style: none; border: 1px solid var(--ws-line, #e3ebe8); border-radius: var(--ws-radius, 8px); background: #fff; box-shadow: 0 1px 2px #003b3706; }
.lp-body .job-acc-list > li { border-top: 1px solid #eef2f0; }
.lp-body .job-acc-list > li:first-child { border-top: 0; }
.lp-body .job-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 0; color: inherit; text-decoration: none; }
.lp-body .job-acc-row:hover strong { color: #006d60; }
.lp-body .job-acc-row-main { display: grid; gap: 2px; min-width: 0; }
.lp-body .listing-status-tabs { margin-bottom: 14px; }
/* A running boost on My Listings / a listing's page: the card's badge + "until …". */
.promo-until { display: inline-flex; align-items: center; gap: 6px; color: var(--ws-muted, #6a8182); font-size: 12px; font-weight: 700; }
.promo-until .promo-badge { padding: 4px 8px 4px 6px; font-size: 10.5px; box-shadow: none; }
.promo-until .promo-badge svg { width: 11px; height: 11px; }

/* B2B lifecycle controls and supplier invitations. */
.b2b-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.b2b-invite { display: flex; gap: 8px; margin: 12px 0; }
.b2b-invite input { flex: 1; min-width: 0; }
.b2b-invited { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.b2b-invited li, .b2b-supplier-results > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ws-line, #e3ebe8); }
.b2b-supplier-results span { display: grid; }
.b2b-supplier-results small { color: var(--ws-muted, #6a8182); }
.b2b-revisions { display: grid; gap: 10px; margin-top: 16px; }
.b2b-revision { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 12px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; }
.b2b-revision small { grid-column: 1 / -1; color: var(--ws-muted, #6a8182); }
/* B2B: files, recommended suppliers and match markers. */
.b2b-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.b2b-detail-grid > .account-card { margin: 0; }
.b2b-files { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.b2b-files li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; }
.b2b-files li > span:not(.b2b-file-icon) { display: grid; flex: 1; min-width: 0; }
.b2b-files strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-files small { color: var(--ws-muted, #6a8182); }
.b2b-file-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; background: #eef8f5; color: var(--forest); }
.b2b-file-icon .ui-icon { width: 18px; height: 18px; }
.b2b-file-get { min-height: 34px; padding: 0 12px; border: 1px solid var(--forest); border-radius: 999px; background: #fff; color: var(--forest); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.b2b-file-form { display: grid; gap: 10px; }
.b2b-file-form > button { justify-self: start; }
.b2b-file-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 800; color: var(--forest); }
.b2b-file-form select { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; }
.b2b-file-pick span { color: var(--muted); font-weight: 400; font-size: 12px; }
.b2b-file-form .order-error { grid-column: 1 / -1; margin: 0; }
.b2b-recs { display: grid; gap: 0; }
.b2b-rec { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ws-line, #e3ebe8); }
.b2b-rec:first-child { border-top: 0; }
.b2b-rec-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 10px; background: #eef3f1; color: #7d918c; }
.b2b-rec-logo img { width: 100%; height: 100%; object-fit: cover; }
.b2b-rec-logo .ui-icon { width: 20px; height: 20px; }
.b2b-rec-text { display: grid; flex: 1; min-width: 0; }
.b2b-rec-text a { color: inherit; }
.b2b-rec-text small { color: var(--ws-muted, #6a8182); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-verified { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: #e3f4ec; color: #0a7d5c; font-size: 11px; font-weight: 800; }
.b2b-card-kicker { margin: 8px 0 0 !important; font-weight: 800; color: var(--forest) !important; }
.b2b-card-kicker a, .b2b-card h2 a { color: inherit; }
.status-pill.is-match { margin-left: 6px; background: #fff4d6; color: #8a5a00; }
.b2b-card.is-focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(0, 59, 55, .12); }
.b2b-card-actions { grid-column: 1 / -1; }
.b2b-message-form { padding: 0; border: 0; margin-top: 12px; }
@media (max-width: 760px) {
}
/* B2B: plan usage, load more, offering photos, insights. */
.b2b-limits { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; background: #eef8f5; color: var(--forest); font-size: 14px; }
.b2b-limits.is-full { background: #fff4e5; color: #8a4b00; }
.b2b-limits a { color: inherit; font-weight: 800; }
.b2b-more { display: flex; justify-content: center; padding: 6px 0; }
.b2b-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.b2b-photos figure { display: grid; gap: 4px; margin: 0; }
.b2b-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.b2b-photos figcaption { font-size: 12px; font-weight: 800; color: var(--forest); }
.b2b-photo-add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed var(--forest); border-radius: 6px; font-weight: 800; color: var(--forest); cursor: pointer; }
.b2b-photo-add input { max-width: 220px; }
.b2b-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.b2b-chart { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: 8px 0; }
.b2b-bar { flex: 1; min-width: 2px; height: max(2px, var(--h)); border-radius: 3px 3px 0 0; background: var(--forest); opacity: .85; }
.b2b-table-wrap { overflow-x: auto; }
.b2b-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.b2b-table th, .b2b-table td { padding: 10px 8px; border-top: 1px solid var(--ws-line, #e3ebe8); text-align: left; }
.b2b-table th { color: var(--muted); font-weight: 700; }
.b2b-table td:not(:first-child), .b2b-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.b2b-form select[multiple] { min-height: 150px; padding: 6px; }
/* Products workspace. */
.b2b-product-main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.b2b-product-photo { width: 72px; height: 72px; flex: none; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); }
.b2b-product-photo.is-blank { display: grid; place-items: center; background: #eef3f1; color: #7d918c; }
.b2b-product-photo.is-blank .ui-icon { width: 26px; height: 26px; }
.b2b-fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
.b2b-fieldset legend { padding: 0 6px; font-weight: 800; color: var(--forest); font-size: 13px; }
.b2b-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.b2b-form-row label[hidden] { display: none; }
.b2b-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.dir-acc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }

/* Phase 8 dashboards: seven business numbers (six for professionals). One row of equal cards on
   desktop — icon and change badge on top, the number, then the label (always two lines' room). */
.dash-kpis--wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dash-kpis--wide .dash-kpi { grid-template-columns: auto 1fr; grid-template-areas: 'icon delta' 'value value' 'label label'; align-content: start; align-items: center; gap: 12px 8px; padding: 16px 14px; }
.dash-kpis--wide .dash-kpi-icon { width: 30px; height: 30px; }
.dash-kpis--wide .dash-kpi-icon .ui-icon { width: 16px; height: 16px; }
.dash-kpis--wide .dash-delta { justify-self: end; align-self: center; font-size: 11px; padding: 2px 7px; }
.dash-kpis--wide .dash-kpi strong { font-size: 26px; }
.dash-kpis--wide .dash-kpi-label { align-self: start; margin-top: -6px; font-size: 12.5px; line-height: 1.3; min-height: 2.6em; overflow-wrap: anywhere; }
@media (min-width: 1280px) { .dash-kpis--wide { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dash-kpis--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpis--wide > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.saved-row { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.saved-row > span:last-child { display: grid; }
.saved-thumb { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #eaf4ef; color: #1b6b58; font-weight: 800; }
.saved-thumb img { width: 100%; height: 100%; object-fit: cover; }
.boost-row { align-items: center; }
.boost-row > div:first-child { display: grid; gap: 3px; }
.boost-row .status-pill { justify-self: start; }

/* Plan usage (roadmap Phase 8). */
.plan-usage-note { margin: 6px 0 10px; color: #4d6662; font-size: 13px; }
.plan-usage-note.is-full { color: #8a4b00; font-weight: 600; }
.plan-usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.plan-usage-item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #e4ecec; border-radius: 4px; background: #fff; }
.plan-usage-item span { color: #5c7471; font-size: 13px; }
.plan-usage-item strong { color: #18352f; font-size: 15px; }
.plan-usage-item i { display: block; height: 4px; border-radius: 2px; background: #e8efed; overflow: hidden; }
.plan-usage-item i b { display: block; height: 100%; background: #0a8f6a; }
/* Listing page header: status pill on the same line as category · town. */
.lp-head-copy .lp-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Status pills sit on the same line as the category · town text. */
.listing-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.listing-row-line > small { margin: 0; }
.listing-row-line .listing-row-pills { margin-top: 0; }
/* Dashboard business switcher (accounts with several businesses): the name in the greeting line. */
.dash-switch { position: relative; display: inline-flex; align-items: center; vertical-align: baseline; }
.dash-switch select { appearance: none; -webkit-appearance: none; max-width: 260px; margin: 0; padding: 3px 26px 3px 10px; border: 1px solid var(--ws-line, #e3ebe8); border-radius: 6px; background: #fff; color: var(--ws-forest, #003b37); font: inherit; font-weight: 800; text-overflow: ellipsis; cursor: pointer; }
.dash-switch select:hover { border-color: #b9d6cd; }
.dash-switch select:focus-visible { outline: 2px solid var(--ws-accent, #087c66); outline-offset: 2px; }
.dash-switch .ui-icon { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--ws-muted, #6a8182); pointer-events: none; }