/**
 * SriLance shared UI — brand + Upwork-elegant controls for redesigned surfaces.
 * Scoped to .sl-fp / .sl-cd / .sl-fd / .sl-set / .sl-jobs / .sl-msg / .sl-fo / .sl-onboard
 * / .sl-prop / .sl-con — client + freelancer share the same type scale below.
 */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap");

:root {
  --sl-gold: #fbbe15;
  --sl-gold-dark: #e0a800;
  --sl-ink: #1a1a1a;
  --sl-muted: #6b6b6b;
  --sl-line: #e6e6e6;
  --sl-bg: #f4f4f4;
  --sl-card: #fff;
  --sl-icon-bg: #fff;
  --sl-icon-bg-hover: #f7f7f7;
  --sl-icon-border: #e8e8e8;
  --sl-icon-border-hover: #ddd;
  --sl-icon-fg: #5e6d55;
  --sl-font: "Nunito Sans", "Open Sans", Helvetica, Arial, sans-serif;
  /* Shared type tokens — use these on every new .sl-* page */
  --sl-fw-body: 400;
  --sl-fw-label: 500;
  --sl-fw-emphasis: 600;
  --sl-fw-display: 600;
  --sl-ls-tight: -0.015em;
  --sl-ls-display: -0.02em;
}

.sl-fp, .sl-cd, .sl-fd, .sl-set, .sl-jobs, .sl-msg, .sl-fo, .sl-onboard, .sl-prop,
.sl-con, .sl-con-list, .sl-offer, .sl-fin, .sl-nav, body.sl-app {
  font-family: var(--sl-font) !important;
  color: var(--sl-ink);
  font-weight: var(--sl-fw-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Shared typography (client + freelancer, all redesigned surfaces) ---- */
.sl-fp h1, .sl-cd h1, .sl-fd h1, .sl-jobs h1, .sl-prop h1, .sl-con h1,
.sl-con-list h1, .sl-msg h1, .sl-set h1, .sl-fo h1, .sl-onboard h1,
.sl-fp h2, .sl-cd h2, .sl-fd h2, .sl-jobs h2, .sl-prop h2, .sl-con h2,
.sl-con-list h2, .sl-msg h2, .sl-set h2, .sl-fo h2, .sl-onboard h2 {
  font-family: var(--sl-font) !important;
  font-weight: var(--sl-fw-display) !important;
  letter-spacing: var(--sl-ls-display);
  color: var(--sl-ink);
  line-height: 1.25;
}
.sl-fp h3, .sl-cd h3, .sl-fd h3, .sl-jobs h3, .sl-prop h3, .sl-con h3,
.sl-con-list h3, .sl-msg h3, .sl-set h3, .sl-fo h3, .sl-onboard h3,
.sl-fp h4, .sl-cd h4, .sl-fd h4, .sl-jobs h4, .sl-prop h4, .sl-con h4,
.sl-msg h4, .sl-set h4,
.sl-fp h5, .sl-cd h5, .sl-fd h5, .sl-jobs h5, .sl-prop h5, .sl-con h5,
.sl-msg h5, .sl-set h5 {
  font-family: var(--sl-font) !important;
  font-weight: var(--sl-fw-emphasis) !important;
  letter-spacing: var(--sl-ls-tight);
  color: var(--sl-ink);
  line-height: 1.35;
}
.sl-fp p, .sl-cd p, .sl-fd p, .sl-jobs p, .sl-prop p, .sl-con p,
.sl-con-list p, .sl-msg p, .sl-set p, .sl-fo p, .sl-onboard p {
  font-weight: var(--sl-fw-body);
  line-height: 1.45;
}
.sl-fp strong, .sl-cd strong, .sl-fd strong, .sl-jobs strong, .sl-prop strong,
.sl-con strong, .sl-con-list strong, .sl-msg strong, .sl-set strong,
.sl-fp b, .sl-cd b, .sl-fd b, .sl-jobs b, .sl-prop b, .sl-con b, .sl-msg b {
  font-weight: var(--sl-fw-emphasis);
}
.sl-fp small, .sl-cd small, .sl-fd small, .sl-jobs small, .sl-prop small,
.sl-con small, .sl-con-list small, .sl-msg small, .sl-set small,
.sl-fp .text-muted, .sl-cd .text-muted, .sl-fd .text-muted, .sl-jobs .text-muted,
.sl-prop .text-muted, .sl-con .text-muted, .sl-msg .text-muted {
  color: var(--sl-muted);
  font-weight: var(--sl-fw-body);
}
.sl-fp a, .sl-cd a, .sl-fd a, .sl-jobs a, .sl-prop a, .sl-con a, .sl-con-list a,
.sl-msg a:not(.sl-nav-link), .sl-set a {
  font-weight: var(--sl-fw-emphasis);
}

/* ---- Primary / ghost buttons (logo gold) ---- */
.sl-fp .sl-btn,
.sl-cd .sl-btn,
.sl-fd .sl-btn,
.sl-jobs .sl-btn,
.sl-con .sl-btn,
.sl-offer .sl-btn,
.sl-fin .sl-btn,
.sl-msg .sl-btn,
.sl-msg .blue_btn:not(.sl-msg-send),
.sl-con .blue_btn,
.sl-prop .sl-btn,
.sl-fo .sl-btn,
.sl-fo .blue_btn,
.sl-fo button.blue_btn,
.sl-fo input[type=submit].blue_btn,
.sl-onboard .sl-btn,
.sl-set .blue_btn,
.sl-set button.blue_btn,
.sl-set input.blue_btn {
  border-radius: 30px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: var(--sl-fw-emphasis) !important;
  font-family: var(--sl-font) !important;
  border: 1px solid var(--sl-gold) !important;
  background: var(--sl-gold) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sl-fp .sl-btn:hover,
.sl-cd .sl-btn:hover,
.sl-fd .sl-btn:hover,
.sl-jobs .sl-btn:hover,
.sl-con .sl-btn:hover,
.sl-offer .sl-btn:hover,
.sl-fin .sl-btn:hover,
.sl-msg .blue_btn:not(.sl-msg-send):hover,
.sl-con .blue_btn:hover,
.sl-prop .sl-btn:hover,
.sl-fo .blue_btn:hover,
.sl-fo .sl-btn:hover,
.sl-set .blue_btn:hover {
  background: var(--sl-gold-dark) !important;
  border-color: var(--sl-gold-dark) !important;
  color: #fff !important;
}
.sl-fp .sl-btn-ghost,
.sl-cd .sl-btn-ghost,
.sl-fd .sl-btn-ghost,
.sl-jobs .sl-btn-ghost,
.sl-con .sl-btn-ghost,
.sl-offer .sl-btn-ghost,
.sl-prop .sl-btn-ghost {
  background: #fff !important;
  color: var(--sl-ink) !important;
  border: 1px solid #ccc !important;
}
.sl-fp .sl-btn-ghost:hover,
.sl-cd .sl-btn-ghost:hover,
.sl-fd .sl-btn-ghost:hover,
.sl-jobs .sl-btn-ghost:hover,
.sl-con .sl-btn-ghost:hover,
.sl-offer .sl-btn-ghost:hover,
.sl-prop .sl-btn-ghost:hover {
  background: #fafafa !important;
  border-color: var(--sl-gold) !important;
  color: var(--sl-ink) !important;
}

/* ---- Upwork-like icon edit circles (light, centered) ---- */
.sl-fp-icon-btn,
.sl-cd-avatar-edit,
.sl-fp-avatar-edit {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--sl-icon-border) !important;
  background: var(--sl-icon-bg) !important;
  color: var(--sl-icon-fg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.sl-fp-icon-btn:hover,
.sl-fp-icon-btn:focus,
.sl-cd-avatar-edit:hover,
.sl-fp-avatar-edit:hover {
  background: var(--sl-icon-bg-hover) !important;
  border-color: var(--sl-icon-border-hover) !important;
  color: #333 !important;
  outline: none;
}
.sl-fp-icon-btn i,
.sl-fp-icon-btn .fa,
.sl-fp-icon-btn .fas,
.sl-cd-avatar-edit i,
.sl-fp-avatar-edit i {
  font-size: 13px !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  speak: none;
}
.sl-fp-icon-btn i::before,
.sl-fp-avatar-edit i::before,
.sl-cd-avatar-edit i::before {
  display: block;
  line-height: 1 !important;
  width: 1em;
  text-align: center;
}

/* Compact save/add circles that replace .blue_btn in profile editors */
.sl-fp .blue_btn,
.sl-fp button.blue_btn,
.sl-fp #lang-btn,
.sl-fp #addq,
.sl-fp #addc,
.sl-fp #exp-btn,
.sl-fp #updateBio,
.sl-fp #saveRateProfile,
.sl-fp #updateCat,
.sl-fp #updSkills {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--sl-icon-border) !important;
  background: var(--sl-icon-bg) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sl-fp .blue_btn::before,
.sl-fp button.blue_btn::before,
.sl-fp #lang-btn::before,
.sl-fp #addq::before,
.sl-fp #addc::before,
.sl-fp #exp-btn::before,
.sl-fp #updateBio::before,
.sl-fp #saveRateProfile::before,
.sl-fp #updateCat::before,
.sl-fp #updSkills::before {
  font-family: FontAwesome !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: var(--sl-icon-fg) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.sl-fp #lang-btn::before,
.sl-fp #addq::before,
.sl-fp #addc::before,
.sl-fp #exp-btn::before { content: "\f067"; }
.sl-fp #updateBio::before,
.sl-fp #saveRateProfile::before,
.sl-fp #updateCat::before,
.sl-fp #updSkills::before { content: "\f00c"; }

.sl-fp .blue_btn:hover,
.sl-fp #lang-btn:hover,
.sl-fp #addq:hover,
.sl-fp #addc:hover,
.sl-fp #exp-btn:hover,
.sl-fp #updateBio:hover,
.sl-fp #saveRateProfile:hover,
.sl-fp #updateCat:hover,
.sl-fp #updSkills:hover {
  background: var(--sl-icon-bg-hover) !important;
  border-color: var(--sl-icon-border-hover) !important;
}
.sl-fp .blue_btn:hover::before,
.sl-fp #lang-btn:hover::before,
.sl-fp #addq:hover::before,
.sl-fp #addc:hover::before,
.sl-fp #exp-btn:hover::before,
.sl-fp #updateBio:hover::before,
.sl-fp #saveRateProfile:hover::before,
.sl-fp #updateCat:hover::before,
.sl-fp #updSkills:hover::before {
  color: #333 !important;
}

/* Modal primary stays readable gold pill */
.modal .blue_btn {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 10px 22px !important;
  border-radius: 30px !important;
  background: var(--sl-gold) !important;
  border: 1px solid var(--sl-gold) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}
.modal .blue_btn::before { content: none !important; display: none !important; }

/* Avatar camera chip — light, not black */
.sl-fp-avatar-edit,
.sl-cd-avatar-edit {
  background: #fff !important;
  color: var(--sl-icon-fg) !important;
  border: 1px solid var(--sl-icon-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sl-fp-avatar-edit:hover,
.sl-cd-avatar-edit:hover {
  background: var(--sl-icon-bg-hover) !important;
  color: #333 !important;
}

/* Accent accents that match logo */
.sl-fp-rating .fa-star,
.sl-cd-rating .fa-star,
.sl-fd-rating .fa-star,
.sl-fd-stars .fa-star { color: var(--sl-gold) !important; }
.sl-fd-progress > span,
.sl-cd .sl-cd-progress > span { background: var(--sl-gold) !important; }

/* Settings active tab — gold not black */
.sl-set .tabs-left > li.active > a,
.sl-set .tabs-left > li > a.active,
.sl-set #protabs > li.active > a,
.sl-set #protabs > .active > a {
  background: var(--sl-gold) !important;
  color: #fff !important;
  border-color: var(--sl-gold) !important;
}
.sl-set .tabs-left > li > a:hover,
.sl-set #protabs > li > a:hover {
  border-color: var(--sl-gold) !important;
  color: var(--sl-ink) !important;
}

/* Quick-link hover on client dash — soft gold tint */
.sl-cd-links a:hover {
  background: #fff8e1 !important;
  color: var(--sl-ink) !important;
  border-color: var(--sl-gold) !important;
}

.sl-fp a, .sl-cd a, .sl-fd a, .sl-jobs a, .sl-prop a, .sl-con a { color: #8a6d00; }
.sl-fp a:hover, .sl-cd a:hover, .sl-fd a:hover, .sl-prop a:hover, .sl-con a:hover { color: #000; }

/* =========================================================
   App shell — role nav (freelancer / client) + messages panes
   Additive only; does not alter .sl-fp / .sl-cd / .sl-fd tokens
   ========================================================= */
html.sl-app, body.sl-app { background: #f7f7f7; }
body.sl-app {
  margin: 0;
  padding-left: 232px;
  min-height: 100vh;
  overflow-x: hidden;
}
body.sl-app .navigation-wrap { display: none !important; }

/* Shared app page canvas — breathing room from left nav (client + freelancer) */
body.sl-app .sl-jobs,
body.sl-app .sl-jp,
body.sl-app .sl-pv,
body.sl-app .sl-con-list,
body.sl-app .sl-prop,
body.sl-app .sl-offer,
body.sl-app .sl-fin,
body.sl-app .sl-fd,
body.sl-app .sl-cd,
body.sl-app .sl-set,
body.sl-app .sl-con > .container,
body.sl-app .sl-con .sl-con-wrap {
  max-width: 1120px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 32px 48px 96px !important;
  box-sizing: border-box !important;
}
@media (max-width: 1199px) {
  body.sl-app .sl-jobs,
  body.sl-app .sl-jp,
  body.sl-app .sl-pv,
  body.sl-app .sl-con-list,
  body.sl-app .sl-prop,
  body.sl-app .sl-offer,
  body.sl-app .sl-fin,
  body.sl-app .sl-fd,
  body.sl-app .sl-cd,
  body.sl-app .sl-set,
  body.sl-app .sl-con > .container,
  body.sl-app .sl-con .sl-con-wrap {
    padding: 24px 28px 80px !important;
  }
}
@media (max-width: 767px) {
  body.sl-app .sl-jobs,
  body.sl-app .sl-jp,
  body.sl-app .sl-pv,
  body.sl-app .sl-con-list,
  body.sl-app .sl-prop,
  body.sl-app .sl-offer,
  body.sl-app .sl-fin,
  body.sl-app .sl-fd,
  body.sl-app .sl-cd,
  body.sl-app .sl-set,
  body.sl-app .sl-con > .container,
  body.sl-app .sl-con .sl-con-wrap {
    padding: 20px 16px 72px !important;
  }
}

.sl-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 1200;
  background: #fff; border-right: 1px solid var(--sl-line);
  display: flex; flex-direction: column; padding: 12px 10px 16px;
  overflow: visible;
}
.sl-nav-brand { padding: 4px 8px 12px; }
.sl-nav-brand img { height: 34px; width: auto; display: block; }

.sl-nav-profile-wrap {
  margin: 0 2px 10px;
  list-style: none;
}
.sl-nav-profile-wrap > .sl-nav-flyout {
  top: 0;
  min-width: 280px;
  max-width: 320px;
}
.sl-nav-profile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 10px; margin: 0; border-radius: 10px; border: 0;
  background: transparent; cursor: pointer; font-family: var(--sl-font);
  text-align: left; text-decoration: none !important; color: var(--sl-ink) !important;
  transition: background .12s ease;
}
.sl-nav-profile:hover,
.sl-nav-profile-wrap.is-open > .sl-nav-profile,
.sl-nav-profile-wrap:hover > .sl-nav-profile { background: #f7f7f7; }
.sl-nav-profile img, .sl-nav-avatar-fallback,
.sl-nav-flyout-profile-head img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid #e5e5e5; flex-shrink: 0;
}
.sl-nav-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fafafa; color: #888;
}
.sl-nav-profile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sl-nav-profile-text strong {
  font-size: 13px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-nav-profile-text small { font-size: 11px; color: #888; }
.sl-nav-profile-chev { color: #bbb; font-size: 12px; }
.sl-nav-flyout-profile-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 12px;
}
.sl-nav-flyout-profile a i.fa {
  width: 18px; text-align: center; margin-right: 8px; color: #666;
}

.sl-nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sl-nav-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.sl-nav-item { position: relative; margin: 0; list-style: none; }
.sl-nav-link {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; background: transparent; border-radius: 8px;
  color: #222 !important; font-size: 14px; font-weight: 600; font-family: var(--sl-font);
  text-align: left; text-decoration: none !important; cursor: pointer;
  transition: background .12s ease;
}
.sl-nav-link i.fa:first-child { width: 18px; text-align: center; color: #555; font-size: 15px; }
.sl-nav-link span { flex: 1; }
.sl-nav-chev { color: #bbb; font-size: 12px; margin-left: auto; }
.sl-nav-item:hover > .sl-nav-link,
.sl-nav-item.is-active > .sl-nav-link,
.sl-nav-item.is-open > .sl-nav-link { background: #f3f3f3; }
.sl-nav-item.is-active > .sl-nav-link { box-shadow: inset 3px 0 0 var(--sl-gold); }

.sl-nav-flyout {
  display: none; position: absolute; top: 0; left: calc(100% - 2px);
  min-width: 220px; max-width: 280px; padding: 10px 0;
  background: #fff; border: 1px solid var(--sl-line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08); z-index: 1300;
}
/* Invisible bridge so the pointer can cross without closing the flyout */
.sl-nav-flyout::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -14px;
  width: 16px;
}
.sl-nav-item.is-open > .sl-nav-flyout,
.sl-nav-item.has-flyout:hover > .sl-nav-flyout { display: block; }
.sl-nav-flyout-label {
  padding: 4px 16px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #999;
}
.sl-nav-flyout a {
  display: block; padding: 9px 16px; color: #222 !important;
  text-decoration: none !important; font-size: 14px; font-weight: 600;
}
.sl-nav-flyout a:hover { background: #f7f7f7; }
.sl-nav-flyout hr { margin: 8px 0; border: 0; border-top: 1px solid #eee; }
.sl-nav-search { display: flex; gap: 6px; padding: 4px 12px 10px; }
.sl-nav-search input {
  flex: 1; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.sl-nav-search button {
  border: 1px solid var(--sl-line); background: #fff; border-radius: 8px; width: 36px; cursor: pointer;
}
.sl-nav-search button:hover { background: #f7f7f7; }
.sl-nav-switch {
  display: flex !important; align-items: center; gap: 10px;
}
.sl-nav-switch img, .sl-nav-switch > i {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; font-size: 36px; color: #ccc;
}
.sl-nav-switch span { display: flex; flex-direction: column; }
.sl-nav-switch small { color: #888; font-weight: 500; }

/* Bell inside sidebar */
.sl-nav .sl-nav-bell .sl-nav-link,
.sl-nav #srilanceFBellBtn,
.sl-nav #srilanceBellBtn {
  position: relative;
}
.sl-nav .notification-counter {
  position: absolute !important; top: 6px !important; left: 28px !important;
  margin: 0 !important; right: auto !important;
}
.sl-nav #srilanceFBellPanel,
.sl-nav #srilanceBellPanel {
  top: 0 !important; left: calc(100% - 2px) !important; right: auto !important;
  margin-top: 0 !important; width: 320px;
}
.sl-nav #srilanceFBellPanel::before,
.sl-nav #srilanceBellPanel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -14px;
  width: 16px;
}

.sl-nav-burger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 1250;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--sl-line);
  background: #fff; cursor: pointer;
}
.sl-nav-scrim {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 1190;
}
.sl-nav-pagebanner { margin-left: 0; }

@media (max-width: 991px) {
  body.sl-app { padding-left: 0; }
  .sl-nav {
    transform: translateX(-105%); transition: transform .2s ease;
  }
  body.sl-nav-open .sl-nav { transform: translateX(0); }
  body.sl-nav-open .sl-nav-scrim { display: block; }
  .sl-nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  .sl-nav-item.has-flyout:hover > .sl-nav-flyout { display: none; }
  .sl-nav-item.is-open > .sl-nav-flyout {
    position: static; box-shadow: none; border: 0; margin: 0 0 6px 12px; padding: 0;
  }
}

/* ---- Messages 3-pane ---- */
.sl-msg {
  max-width: none !important; margin: 0 !important; padding: 12px 16px 24px !important;
  font-family: var(--sl-font);
}
.sl-msg-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 260px;
  gap: 0;
  min-height: calc(100vh - 40px);
  background: #fff;
  border: 1px solid var(--sl-line);
  border-radius: 12px;
  overflow: hidden;
}
.sl-msg-list {
  border-right: 1px solid var(--sl-line);
  display: flex; flex-direction: column; min-height: 0; background: #fff;
}
.sl-msg-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px; border-bottom: 1px solid #f0f0f0;
}
.sl-msg-list-head h2 { font-size: 20px; font-weight: 600; margin: 0; }
.sl-msg-list-actions { display: flex; gap: 8px; font-size: 12px; }
.sl-msg-list-actions a { color: #8a6d00; text-decoration: none; font-weight: 700; }
.sl-msg-list-actions a.is-current { color: #222; }
.sl-msg-threads { overflow-y: auto; flex: 1; padding: 6px 0; }
.sl-msg-thread-item { cursor: pointer; }
.sl-msg-thread-item:hover { background: #f7f7f7; }
.sl-msg-thread-item.is-active {
  background: #f3f3f3;
  box-shadow: inset 3px 0 0 var(--sl-gold);
}
.sl-msg-thread-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
}
.sl-msg-avatar {
  width: 44px !important; height: 44px !important; border-radius: 50%;
  object-fit: cover; border: 1px solid #eee; flex-shrink: 0;
}
.sl-msg-thread-meta { min-width: 0; text-align: left; }
.sl-msg-thread-meta strong {
  display: block; font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-msg-thread-meta small {
  display: block; color: #888; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sl-msg-thread {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fafafa;
}
.sl-msg-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px;
}
.sl-msg-empty-inner { text-align: center; max-width: 360px; }
.sl-msg-empty-inner i { font-size: 48px; color: #ccc; margin-bottom: 12px; }
.sl-msg-empty-inner h3 { font-weight: 600; margin-bottom: 8px; }
.sl-msg-empty-inner p { color: #777; }
.sl-msg-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.sl-msg-active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sl-msg-active.hidden,
#chatbox.hidden,
#wait.hidden { display: none !important; }
#chatbox:not(.hidden) { display: flex !important; }

.sl-msg-bubble { text-align: left; margin-bottom: 14px; }
.sl-msg-bubble h6 { font-weight: 700; margin: 0 0 4px; font-size: 13px; }
.sl-msg-bubble p { margin: 0; font-size: 14px; line-height: 1.45; }
.sl-msg-bubble small { color: #999; font-size: 11px; }

.sl-msg-activity {
  margin: 14px auto;
  max-width: 92%;
  text-align: left;
}
.sl-msg-activity-inner {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f5f5f5; border: 1px solid #e8e8e8; border-radius: 10px;
  padding: 12px 14px;
}
.sl-msg-activity-inner > .fa-bolt {
  color: var(--sl-gold-dark); margin-top: 2px; font-size: 14px;
}
.sl-msg-activity-body p {
  margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #333; line-height: 1.4;
}
.sl-msg-activity-link {
  font-size: 13px; font-weight: 700; color: #8a6d00 !important; text-decoration: none;
}
.sl-msg-activity-link:hover { color: #000 !important; text-decoration: underline; }
.sl-msg-activity small { color: #999; font-size: 11px; font-weight: 500; }
.sl-msg-thread-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 18px; margin: 0; border: 0 !important; border-bottom: 1px solid var(--sl-line) !important;
  border-radius: 0 !important; background: #fff !important;
}
.sl-msg-thread-head h4 { margin: 0; font-size: 18px; font-weight: 600; }
.sl-msg-jobtitle { display: block; color: #777; margin-top: 2px; }
.sl-msg-status {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin-top: 6px; margin-left: 0 !important; left: auto !important;
  position: static !important; font-size: 13px; color: #666;
}
.sl-msg-status .fa-circle,
#status .fa-circle {
  margin: 0 !important; font-size: 10px !important; line-height: 1 !important;
  position: static !important;
}
.sl-msg-thread-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  margin: 0; border: 0 !important; border-radius: 0 !important; background: #fff !important;
  position: relative; padding: 0 0 76px;
}
.sl-msg-thread-body .chat_area {
  flex: 1; height: auto !important; max-height: none !important;
  overflow-y: auto; padding: 16px 18px 8px; text-align: left;
}
.sl-msg-thread-body .message { margin-bottom: 14px; }
.sl-msg-thread-body .message h6 { font-weight: 700; margin-bottom: 4px; }
.sl-msg-thread-body .message hr { display: none; }
.sl-msg-composer {
  position: absolute !important; left: 0; right: 0; bottom: 0;
  width: 100% !important; margin: 0 !important; padding: 12px 16px !important;
  border-top: 1px solid #f0f0f0; background: #fff !important; z-index: 5;
}
.sl-msg-composer-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.sl-msg-composer .form-control {
  flex: 1; min-width: 0; border-radius: 10px !important; border: 1px solid #e0e0e0 !important;
  height: 42px !important; margin: 0 !important; box-shadow: none !important;
}
.sl-msg .sl-msg-composer button.sl-msg-send,
.sl-msg .sl-msg-composer .blue_btn.sl-msg-send {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--sl-gold) !important;
  background: var(--sl-gold) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  float: none !important;
  position: relative !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.sl-msg .sl-msg-composer button.sl-msg-send:hover,
.sl-msg .sl-msg-composer .blue_btn.sl-msg-send:hover {
  background: var(--sl-gold-dark) !important;
  border-color: var(--sl-gold-dark) !important;
  color: #fff !important;
}
.sl-msg .sl-msg-composer button.sl-msg-send i,
.sl-msg .sl-msg-composer button.sl-msg-send i.fa,
.sl-msg .sl-msg-composer .blue_btn.sl-msg-send i {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  line-height: 14px !important;
  text-align: center !important;
  color: #fff !important;
  position: static !important;
  /* FA paper-plane glyph sits optically left — nudge to visual center */
  transform: translate(1px, 0) !important;
}
.sl-msg-composer .row,
.sl-msg-composer [class*="col-"] {
  margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important;
  flex: unset !important;
}
.sl-msg-threads { overflow-x: hidden; }
.sl-msg-thread-item { position: relative; overflow: hidden; }

.sl-msg-aside {
  border-left: 1px solid var(--sl-line); background: #fff; padding: 18px 16px;
  overflow-y: auto;
}
.sl-msg-aside.is-idle .sl-msg-aside-sections { opacity: .7; }
.sl-msg-aside-profile { text-align: center; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.sl-msg-aside-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 1px solid #eee; margin-bottom: 10px;
}
.sl-msg-aside-profile h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.sl-msg-aside-profile p { font-size: 13px; color: #777; margin: 0 0 10px; }
.sl-msg-aside-profile a { display: inline-block; margin: 4px 6px; font-weight: 700; color: #8a6d00; }
.sl-msg-aside-placeholder i { font-size: 48px; color: #ddd; }
.sl-msg-aside-sections details { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
.sl-msg-aside-sections summary {
  font-weight: 700; cursor: pointer; outline: none; list-style: none;
}
.sl-msg-aside-sections summary::-webkit-details-marker { display: none; }
.sl-msg-aside-sections p { font-size: 13px; margin: 8px 0 0; }

@media (max-width: 1199px) {
  .sl-msg-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .sl-msg-aside { display: none; }
  .sl-msg-aside.is-visible { display: block; position: absolute; right: 16px; top: 60px; width: 260px; border: 1px solid var(--sl-line); border-radius: 12px; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
}
@media (max-width: 767px) {
  .sl-msg { padding: 8px !important; }
  .sl-msg-shell { grid-template-columns: 1fr; min-height: calc(100vh - 80px); }
  .sl-msg-list { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--sl-line); }
}

/* ---- Contract detail (.sl-con) — layout only ---- */
.sl-con { padding-bottom: 40px; }
.sl-con .sl-con-wrap { max-width: 1100px; }
.sl-con ._card {
  background: #fff !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.sl-con-hero { margin-top: 16px; padding: 20px 22px !important; }
.sl-con-title {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  line-height: 1.3; color: #1a1a1a;
}
.sl-con-sub { margin: 6px 0 0; color: #888; font-size: 13px; }
.sl-con-party h2 { font-size: 16px; font-weight: 700; margin: 0; }
.sl-con-party small { color: #888; font-size: 12px; font-weight: 600; }
.sl-con-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: #f3f3f3; color: #333;
  border: 1px solid #e8e8e8; vertical-align: middle;
}
.sl-con-badge-ok { background: #eaf7ee; color: #1b7a3d; border-color: #cdead5; }
.sl-con-badge-danger { background: #fdecea; color: #b00020; border-color: #f5c2c0; }

.sl-con #protabs.nav-pills,
.sl-con .sl-con-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px; margin-bottom: 4px;
}
.sl-con #protabs .nav-item { margin: 0; }
.sl-con #protabs .nav-link {
  border-radius: 999px !important; padding: 8px 14px !important;
  font-weight: 700; font-size: 13px; color: #444 !important;
  background: transparent !important; border: 1px solid transparent !important;
}
.sl-con #protabs .nav-link:hover { background: #f7f7f7 !important; }
.sl-con #protabs .nav-link.active {
  background: #fff !important; color: #111 !important;
  border-color: var(--sl-line) !important;
  box-shadow: inset 0 -2px 0 var(--sl-gold);
}
.sl-con .blue_btn {
  border-radius: 30px !important; padding: 8px 18px !important;
  font-size: 13px !important; font-weight: 700 !important;
  background: var(--sl-gold) !important; border: 1px solid var(--sl-gold) !important;
  color: #fff !important; box-shadow: none !important;
}
.sl-con .blue_btn:hover {
  background: var(--sl-gold-dark) !important; border-color: var(--sl-gold-dark) !important;
}
.sl-con #srilanceMilestonesPanel ul li {
  padding: 10px 0; border-bottom: 1px solid #f2f2f2;
}
.sl-con #srilanceMilestonesPanel ul li:last-child { border-bottom: 0; }
.sl-con #srilancePaymentActivity ul {
  border-radius: 10px !important; border-color: var(--sl-line) !important;
}
.sl-con .tab-content { text-align: left; }
.sl-con h5 { font-weight: 600; }
.sl-con a { color: #8a6d00; }
.sl-con a:hover { color: #000; }

/* Contract list — lighter type + neat Upwork-like grid */
.sl-con-list {
  letter-spacing: -0.01em;
}
.sl-con-list .sl-btn,
.sl-con-list .sl-btn-ghost {
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
}

/* Shared list head: tabs + title + search / Filters / sort / total
   Use on any page that needs list filtering (contracts, jobs, proposals). */
.sl-list-head { margin: 0 0 18px; }
.sl-list-tabs {
  display: flex; align-items: center; gap: 22px;
  margin: 0 0 18px; padding: 0;
  border-bottom: 1px solid #ececec;
}
.sl-list-tab {
  position: relative;
  display: inline-block;
  padding: 0 0 12px;
  margin: 0;
  color: #6b6b6b !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sl-font);
}
.sl-list-tab:hover { color: #1a1a1a !important; }
.sl-list-tab.is-active {
  color: #1a1a1a !important;
}
.sl-list-tab.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: #1a1a1a; border-radius: 2px 2px 0 0;
}
.sl-list-title {
  margin: 0 0 16px !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  line-height: 1.25;
}
.sl-list-tools {
  display: flex;
  align-items: center;
  gap: 12px 14px;
  flex-wrap: wrap;
}
.sl-list-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 520px;
}
.sl-list-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a9a9a;
  font-size: 14px;
  pointer-events: none;
}
.sl-list-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px 10px 38px;
  font-family: var(--sl-font);
  font-size: 14px;
  font-weight: 400;
  color: #222;
  outline: none;
}
.sl-list-search input:focus {
  border-color: #cfcfcf;
  box-shadow: 0 0 0 3px rgba(251,190,21,.18);
}
.sl-list-filters-wrap { position: relative; }
.sl-list-filters-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid #dcdcdc; border-radius: 999px;
  background: #fff; color: #222;
  font-family: var(--sl-font); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.sl-list-filters-btn:hover { background: #f7f7f7; }
.sl-list-filters-btn.is-on {
  border-color: #1a1a1a;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}
.sl-list-filters-btn i { font-size: 14px; color: #555; }
.sl-list-filters-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 200px; padding: 8px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.sl-list-filters-panel[hidden] { display: none !important; }
.sl-list-filters-panel .sl-list-filter-opt {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; border-radius: 8px;
  padding: 10px 12px; cursor: pointer;
  font-family: var(--sl-font); font-size: 14px; font-weight: 600; color: #222;
}
.sl-list-filters-panel .sl-list-filter-opt:hover { background: #f5f5f5; }
.sl-list-filters-panel .sl-list-filter-opt.is-active {
  background: #f3f3f3;
  box-shadow: inset 3px 0 0 var(--sl-gold);
}
.sl-list-sort {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  color: #6b6b6b; font-size: 13px; font-weight: 600;
}
.sl-list-sort > span { white-space: nowrap; }
.sl-list-sort select {
  appearance: none;
  -webkit-appearance: none;
  height: 40px; padding: 0 34px 0 14px;
  border: 1px solid #dcdcdc; border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family: var(--sl-font); font-size: 13px; font-weight: 600; color: #222;
  cursor: pointer; outline: none;
}
.sl-list-sort select:focus {
  border-color: #cfcfcf;
  box-shadow: 0 0 0 3px rgba(251,190,21,.18);
}
.sl-list-total {
  color: #6b6b6b; font-size: 13px; font-weight: 600;
  white-space: nowrap; min-width: 4.5em; text-align: right;
}
[data-sl-item].is-filtered-out { display: none !important; }
.sl-list-empty {
  display: none;
  padding: 36px 16px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
.sl-list-empty.is-visible { display: block; }
@media (max-width: 767px) {
  .sl-list-sort { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .sl-list-total { margin-left: auto; }
}

.sl-stars { color: var(--sl-gold); white-space: nowrap; font-size: 12px; letter-spacing: 0; }
.sl-stars .fa { margin-right: 1px; }
.sl-stars b {
  color: #222; font-weight: 600; margin-left: 5px; font-size: 13px;
  letter-spacing: 0;
}
.sl-con-nofeedback { color: #8a8a8a; font-size: 13px; font-weight: 400; }

.sl-con-rows {
  padding: 0 8px !important;
  border-radius: 12px !important;
}
.sl-con-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 28px;
  align-items: center;
  padding: 28px 16px;
  border-bottom: 1px solid #e8e8e8;
}
.sl-con-row:last-child { border-bottom: 0; }
.sl-con-row-main { min-width: 0; }
.sl-con-row-main h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: #1a1a1a;
}
.sl-con-row-main h3 a {
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.sl-con-row-main h3 a:hover { color: #8a6d00 !important; }

.sl-con-row-meta {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(220px, 1.2fr);
  gap: 20px 48px;
  align-items: start;
}
.sl-con-row-party {
  display: flex; gap: 12px; align-items: center; min-width: 0;
}
.sl-con-row-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid #ececec; flex-shrink: 0;
}
.sl-con-row-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: #f4f4f4; color: #9a9a9a;
}
.sl-con-row-party strong {
  display: block; font-size: 14px; font-weight: 600; color: #222;
  line-height: 1.3; letter-spacing: -0.01em;
}
.sl-con-row-party small {
  display: block; color: #8a8a8a; font-size: 12px; font-weight: 400;
  margin-top: 3px; line-height: 1.35;
}
.sl-con-row-excerpt { min-width: 0; padding-top: 2px; }
.sl-con-row-excerpt-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-bottom: 6px; min-height: 24px;
}
.sl-con-list .sl-jobs-badge {
  font-size: 12px; font-weight: 500; padding: 3px 8px; letter-spacing: 0;
}
.sl-con-row-budget {
  font-size: 13px; color: #222; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.35;
}
.sl-con-row-feedback {
  margin: 8px 0 0; font-size: 13px; color: #6b6b6b; font-style: normal;
  font-weight: 400; line-height: 1.45; max-width: 380px;
}
.sl-con-row-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  align-self: center;
}
.sl-con-row-actions .sl-btn,
.sl-con-row-actions .sl-btn-ghost {
  white-space: nowrap;
  min-height: 36px;
  padding: 7px 14px !important;
  font-weight: 600 !important;
}
.sl-con-more {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e5e5;
  background: #fff; color: #5c5c5c; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.sl-con-more:hover { background: #f7f7f7; border-color: #ddd; }
.sl-con-more::after { display: none !important; }

@media (max-width: 900px) {
  .sl-con-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 12px;
  }
  .sl-con-row-meta { grid-template-columns: 1fr; gap: 14px; }
  .sl-con-row-actions { justify-content: flex-start; }
}

.sl-con-aside-party {
  display: flex; gap: 12px; align-items: center; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid #f0f0f0;
}
.sl-con-aside-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid #eee;
}
.sl-con-aside-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: #f5f5f5; color: #aaa; font-size: 22px;
}
.sl-con-aside-party strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sl-con-aside-party small { color: #8a8a8a; font-size: 12px; font-weight: 400; }
.sl-con-aside-rating { margin-bottom: 14px; }
.sl-con-aside-rating small { display: block; color: #8a8a8a; margin-top: 4px; font-size: 12px; font-weight: 400; }
.sl-con-aside-quote {
  margin: 8px 0 0; font-size: 13px; color: #555; font-style: normal; font-weight: 400; line-height: 1.45;
}
.sl-con-aside-jobtitle { font-size: 15px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.sl-con-aside-excerpt { font-size: 13px; color: #6b6b6b; font-weight: 400; line-height: 1.45; margin: 0 0 12px; }
.sl-con-aside-links { font-size: 13px; font-weight: 600; }

/* Shared status pills for list pages */
.sl-jobs-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #f3f3f3; color: #333; border: 1px solid #e8e8e8;
}
.sl-jobs-badge-ok { background: #eaf7ee; color: #1b7a3d; border-color: #cdead5; }
.sl-jobs-badge-warn { background: #fff6e0; color: #8a6d00; border-color: #f0e2b0; }

/* Hiring job posts — metric columns */
.sl-jobs-metrics {
  display: flex; gap: 28px; align-items: flex-start; text-align: left;
  margin-top: 12px;
}
.sl-jobs-metrics > div { min-width: 56px; }
.sl-jobs-metrics b {
  display: block; font-size: 16px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; color: #1a1a1a;
}
.sl-jobs-metrics span {
  font-size: 12px; color: #8a8a8a; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

/* Soften generic job-list titles when used with con-row */
.sl-jobs .sl-con-row-main h3,
.sl-jobs .sl-jobs-row h3 {
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}
.sl-jobs .sl-jobs-top h1 {
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

/* Nav bell badge — keep clear of label */
.sl-nav .notification-counter,
.sl-nav #ss {
  left: auto !important; right: 10px !important; top: 8px !important;
  margin: 0 !important; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px !important; border-radius: 999px !important; font-size: 11px !important;
}

/* ---- Finances (dual currency: USD + LKR stay separate) ---- */
.sl-fin-sub {
  margin: -8px 0 18px; color: #6b6b6b; font-size: 14px; font-weight: 400; max-width: 720px;
}
.sl-fin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.sl-fin-metric {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 16px 16px 14px; text-align: left; min-height: 118px;
}
.sl-fin-metric > label {
  display: block; font-size: 12px; font-weight: 600; color: #8a8a8a;
  margin: 0 0 10px; width: auto;
}
.sl-fin-dual { display: flex; flex-direction: column; gap: 8px; }
.sl-fin-dual-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.sl-fin-dual-row b {
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #1a1a1a;
}
.sl-fin-dual-row em {
  font-style: normal; font-size: 11px; font-weight: 600; color: #9a9a9a;
  text-transform: uppercase; letter-spacing: .04em;
}
.sl-fin-metric .sl-fin-note {
  display: block; margin-top: 10px; font-size: 12px; color: #6b6b6b; font-weight: 400;
}
.sl-fin-metric .sl-fin-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.sl-fin-metric .sl-btn, .sl-fin-metric .sl-btn-ghost {
  padding: 7px 12px !important; font-size: 12px !important; min-height: 32px;
}
.sl-fin-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
.sl-fin-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-fin-pill {
  appearance: none; border: 1px solid #e0e0e0; background: #fff; color: #555;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600;
  font-family: var(--sl-font); cursor: pointer;
}
.sl-fin-pill:hover { background: #f7f7f7; color: #222; }
.sl-fin-pill.is-active {
  border-color: #1a1a1a; color: #1a1a1a; box-shadow: inset 0 0 0 1px #1a1a1a;
}
.sl-fin-search {
  position: relative; flex: 1 1 220px; max-width: 320px; min-width: 180px;
}
.sl-fin-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #9a9a9a; font-size: 13px; pointer-events: none;
}
.sl-fin-search input {
  width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 999px;
  padding: 9px 14px 9px 34px; font-family: var(--sl-font); font-size: 13px; outline: none;
}
.sl-fin-search input:focus {
  border-color: #cfcfcf; box-shadow: 0 0 0 3px rgba(251,190,21,.18);
}
.sl-fin-amt { white-space: nowrap; font-weight: 600; }
.sl-fin-amt.is-in { color: #1b7a3d; }
.sl-fin-amt.is-out { color: #222; }
.sl-fin-ccy {
  display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600;
  color: #8a8a8a; text-transform: uppercase;
}
.sl-fin-empty { padding: 28px 8px; text-align: center; color: #888; font-size: 14px; }
.sl-fin table.dataTable thead th,
.sl-fin table.table thead th {
  background: #fff !important; color: #8a8a8a !important;
  border-bottom: 1px solid #ececec !important; font-size: 12px !important;
  font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.sl-fin .dataTables_wrapper .dataTables_length,
.sl-fin .dataTables_wrapper .dataTables_filter,
.sl-fin .dataTables_wrapper .dataTables_info,
.sl-fin .dataTables_wrapper .dataTables_paginate {
  font-size: 13px; color: #6b6b6b;
}
.sl-fin .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #fbbe15 !important; border-color: #fbbe15 !important; color: #fff !important;
}
.sl-fin-lifetime {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 22px 24px; margin-bottom: 16px; text-align: left;
}
.sl-fin-lifetime h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #6b6b6b; }
.sl-fin-lifetime .sl-fin-dual-row b { font-size: 28px; }
.sl-fin-jobrow {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr);
  gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; text-align: left;
}
.sl-fin-jobrow:last-child { border-bottom: 0; }
.sl-fin-jobrow h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.sl-fin-jobrow p { margin: 0; font-size: 13px; color: #6b6b6b; }
.sl-fin-jobrow .sl-fin-breakdown { text-align: right; font-size: 13px; color: #555; }
.sl-fin-jobrow .sl-fin-breakdown strong { display: block; margin-top: 6px; color: #1a1a1a; font-size: 15px; }
@media (max-width: 1100px) {
  .sl-fin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sl-fin-metrics { grid-template-columns: 1fr; }
  .sl-fin-jobrow { grid-template-columns: 1fr; }
  .sl-fin-jobrow .sl-fin-breakdown { text-align: left; }
}

/* ---- Find work (freelancer /jobs + saved-jobs) — Upwork-class search ---- */
body.sl-app .sl-jobs.sl-fw {
  max-width: 1240px !important;
  padding-top: 24px !important;
}
.sl-fw-top { margin: 0 0 18px; }
.sl-fw-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sl-fw-searchbar > .fa-search { color: #9a9a9a; font-size: 14px; flex: 0 0 auto; }
.sl-fw-searchbar input[type="search"] {
  flex: 1 1 auto;
  border: 0; outline: none; background: transparent;
  font-family: var(--sl-font); font-size: 15px; font-weight: 400;
  color: #222; min-width: 0; padding: 10px 4px;
}
.sl-fw-search-clear {
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #666 !important; text-decoration: none !important; font-size: 20px; line-height: 1;
}
.sl-fw-search-clear:hover { background: #f3f3f3; color: #111 !important; }
.sl-fw-search-go {
  border: 0; border-radius: 999px;
  background: var(--sl-gold, #fbbe15); color: #111;
  font-family: var(--sl-font); font-size: 13px; font-weight: 700;
  padding: 10px 18px; cursor: pointer;
}
.sl-fw-search-go:hover { filter: brightness(.97); }
.sl-fw-toplinks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  font-size: 13px; font-weight: 600;
}
.sl-fw-toplinks a {
  color: #8a6d00 !important; text-decoration: none !important;
}
.sl-fw-toplinks a:hover { color: #111 !important; }
.sl-fw-connects-pill {
  margin-left: auto;
  background: #fff6e0; border: 1px solid #f0e2b0; color: #8a6d00;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700;
}

.sl-fw-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.sl-fw-filters {
  position: sticky; top: 80px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 8px 4px 12px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.sl-fw-filters-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
}
.sl-fw-filters-head strong {
  font-size: 14px; font-weight: 700; color: #1a1a1a;
}
.sl-fw-filters-clear {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: #8a6d00; font-family: var(--sl-font); font-size: 12px; font-weight: 700;
  padding: 0;
}
.sl-fw-filters-close {
  display: none; border: 0; background: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: #666; margin-left: auto;
}
.sl-fw-fgroup {
  border-top: 1px solid #f0f0f0;
  padding: 4px 8px 10px;
}
.sl-fw-fgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 6px;
  font-size: 14px; font-weight: 700; color: #1a1a1a;
  display: flex; align-items: center; justify-content: space-between;
}
.sl-fw-fgroup > summary::-webkit-details-marker { display: none; }
.sl-fw-fgroup > summary::after {
  content: "▾"; font-size: 11px; color: #888; font-weight: 400;
}
.sl-fw-fgroup:not([open]) > summary::after { content: "▸"; }
.sl-fw-check {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; margin: 0;
  font-size: 13px; font-weight: 500; color: #333;
  cursor: pointer;
}
.sl-fw-check input { width: 15px; height: 15px; accent-color: #1a1a1a; flex: 0 0 auto; }
.sl-fw-check em {
  margin-left: auto; font-style: normal; color: #9a9a9a; font-size: 12px; font-weight: 500;
}

.sl-fw-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.sl-fw-resultline {
  margin: 0 !important; font-size: 14px; color: #555; font-weight: 400;
}
.sl-fw-resultline strong { color: #1a1a1a; font-weight: 700; }
.sl-fw-filters-mobile {
  display: none;
  align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid #dcdcdc; border-radius: 999px; background: #fff;
  font-family: var(--sl-font); font-size: 13px; font-weight: 700; cursor: pointer;
}
.sl-fw-toolbar .sl-list-sort { margin-left: auto; }

.sl-fw-feed {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 0 22px;
}
.sl-fw-card {
  position: relative;
  padding: 18px 0 16px;
  border-bottom: 1px solid #eee;
}
.sl-fw-card:last-of-type { border-bottom: 0; }
.sl-fw-card.is-filtered-out { display: none !important; }
.sl-fw-card:hover { background: linear-gradient(90deg, transparent, rgba(251,190,21,.04), transparent); }
.sl-fw-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 4px;
}
.sl-fw-posted {
  font-size: 12px; color: #8a8a8a; font-weight: 500;
}
.sl-fw-title {
  margin: 0 0 6px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.sl-fw-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}
.sl-fw-title a:hover { color: #8a6d00 !important; text-decoration: underline !important; }
.sl-fw-meta {
  margin: 0 0 8px !important;
  font-size: 13px;
  color: #555;
  font-weight: 600;
  line-height: 1.4;
}
.sl-fw-excerpt {
  margin: 0 0 10px !important;
  font-size: 14px;
  color: #444;
  line-height: 1.45;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sl-fw-mark {
  background: #ffe9a8;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.sl-fw-skills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px;
}
.sl-fw-skill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4f4f4;
  border: 1px solid #ebebeb;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
.sl-fw-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 12px; color: #6b6b6b; font-weight: 500;
}
.sl-fw-foot b { color: #1a1a1a; font-weight: 700; }
.sl-fw-ccy-pill {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: #8a6d00;
  background: #fff8e6; border: 1px solid #f0e2b0;
  border-radius: 999px; padding: 2px 8px;
}
.sl-fw-save {
  box-sizing: border-box;
  width: 36px; height: 36px;
  padding: 0; margin: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #8a8a8a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 36px;
}
.sl-fw-save i {
  display: block;
  font-size: 15px;
  line-height: 1;
  width: 15px;
  height: 15px;
  text-align: center;
  margin: 0;
}
.sl-fw-save:hover,
.sl-fw-save:focus {
  background: #fff8e6;
  border-color: transparent;
  color: #c9a227;
  outline: none;
  box-shadow: none;
}
.sl-fw-save.is-saved,
.sl-fw-save.is-saved:hover,
.sl-fw-save.is-saved:focus {
  color: #c9a227;
  background: #fff8e6;
  border-color: transparent;
  box-shadow: none;
}
.sl-fw-more { margin: 16px 0 8px; text-align: center; }
.sl-jobs-empty { padding: 36px 12px; text-align: center; color: #888; }
.sl-jobs-empty p { margin: 0 0 14px; font-size: 15px; }
.sl-list-empty {
  display: none; padding: 28px 8px; text-align: center; color: #888; font-size: 14px;
}
.sl-list-empty:not([hidden]) { display: block; }

@media (max-width: 980px) {
  .sl-fw-body { grid-template-columns: 1fr; }
  .sl-fw-filters-mobile { display: inline-flex; }
  .sl-fw-filters {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
    width: min(320px, 88vw);
    max-height: none;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.12);
  }
  .sl-fw.is-filters-open .sl-fw-filters { transform: translateX(0); }
  .sl-fw.is-filters-open::after {
    content: "";
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.35);
  }
  .sl-fw-filters-close { display: inline-block; margin-left: 0; }
  .sl-fw-filters-clear { margin-left: auto; }
  .sl-fw-connects-pill { margin-left: 0; }
}

/* ---- Client Find talent (/talent-marketplace) ---- */
.sl-tal-card {
  padding: 22px 0 20px;
  border-bottom: 1px solid #eee;
}
.sl-tal-card:last-of-type { border-bottom: 0; }
.sl-tal-card.is-filtered-out { display: none !important; }
.sl-tal-card:hover { background: linear-gradient(90deg, transparent, rgba(251,190,21,.04), transparent); }
.sl-tal-card-top {
  display: flex; gap: 16px; align-items: flex-start;
}
.sl-tal-avatar {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #eee;
  background: #f5f5f5;
  display: inline-flex; align-items: center; justify-content: center;
}
.sl-tal-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.sl-tal-avatar-fallback {
  font-size: 34px; color: #bbb;
}
.sl-tal-main { min-width: 0; flex: 1; }
.sl-tal-name-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  margin: 0 0 8px;
}
.sl-tal-id { min-width: 0; }
.sl-tal-name {
  display: inline-block;
  font-size: 13px; font-weight: 700; color: #8a6d00 !important;
  text-decoration: none !important; margin-bottom: 2px;
}
.sl-tal-name:hover { color: #111 !important; }
.sl-tal-title {
  margin: 0 0 2px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.sl-tal-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}
.sl-tal-title a:hover { color: #8a6d00 !important; }
.sl-tal-loc {
  margin: 0 !important;
  font-size: 13px; color: #6b6b6b; font-weight: 500;
}
.sl-tal-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center;
  flex: 0 0 auto;
}
.sl-tal-stats {
  margin: 0 0 10px !important;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 13px; color: #555; font-weight: 600;
}
.sl-tal-stats .fa-star,
.sl-tal-success .fa-shield { color: #c9a227; }
.sl-tal-rate { color: #1a1a1a; font-weight: 700; }
.sl-tal-related {
  margin: 0 0 10px !important;
  font-size: 13px; font-weight: 600; color: #8a6d00;
}
.sl-tal-insights {
  margin-top: 4px;
  background: #f7f7f7;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 12px 14px;
}
.sl-tal-insights-head {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  margin: 0 0 8px;
}
.sl-tal-insights-head strong {
  font-size: 13px; font-weight: 700; color: #1a1a1a;
}
.sl-tal-insights-head span {
  font-size: 11px; font-weight: 600; color: #9a9a9a;
}
.sl-tal-insights ul {
  margin: 0; padding: 0 0 0 18px;
}
.sl-tal-insights li {
  margin: 0 0 4px;
  font-size: 13px; color: #444; font-weight: 400; line-height: 1.45;
}
.sl-tal-insights li:last-child { margin-bottom: 0; }
.sl-fw-skill-more { color: #6b6b6b; }
.sl-tal-filter-note {
  margin: 4px 8px 8px;
  font-size: 12px; color: #8a8a8a; font-weight: 400; line-height: 1.4;
}
@media (max-width: 700px) {
  .sl-tal-name-row { flex-direction: column; }
  .sl-tal-actions { width: 100%; }
}

/* ---- Post a job & invite ---- */
.sl-invite { max-width: 920px; }
.sl-invite-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  margin: 0 0 18px;
}
.sl-invite-error {
  background: #fdecea; border: 1px solid #f5c2c0; color: #b00020;
  border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 14px; font-weight: 600;
}
.sl-invite-talent {
  display: flex; gap: 14px; align-items: center;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 14px 16px; margin: 0 0 18px;
}
.sl-invite-talent strong { display: block; font-size: 16px; font-weight: 700; }
.sl-invite-talent p { margin: 2px 0 6px !important; font-size: 14px; color: #555; }
.sl-invite-talent a { font-size: 13px; font-weight: 700; color: #8a6d00 !important; text-decoration: none !important; }
.sl-invite-form {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 8px 22px 24px;
}
.sl-invite-sec {
  padding: 18px 0 8px;
  border-bottom: 1px solid #f0f0f0;
}
.sl-invite-sec:last-of-type { border-bottom: 0; }
.sl-invite-sec h2 {
  margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #1a1a1a;
}
.sl-invite-optional {
  font-size: 12px; font-weight: 600; color: #8a8a8a; text-transform: uppercase;
  letter-spacing: .03em; margin-left: 6px;
}
.sl-invite-hint {
  margin: 0 0 10px !important; font-size: 13px; color: #666; line-height: 1.45;
}
.sl-invite-label {
  display: block; margin: 14px 0 6px;
  font-size: 13px; font-weight: 700; color: #1a1a1a;
}
.sl-invite-label span { font-weight: 500; color: #8a8a8a; }
.sl-invite-form input[type="text"],
.sl-invite-form input[type="number"],
.sl-invite-form textarea,
.sl-invite-form select {
  width: 100%; box-sizing: border-box;
  border: 1px solid #dcdcdc; border-radius: 10px;
  padding: 10px 12px; font-family: var(--sl-font); font-size: 14px; color: #222;
  background: #fff;
}
.sl-invite-form textarea { resize: vertical; min-height: 120px; }
.sl-invite-modes {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  margin: 16px 0 8px; padding-bottom: 8px;
}
.sl-invite-mode {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; margin: 0;
}
.sl-invite-opts {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 4px 0 8px;
}
.sl-invite-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-invite-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-invite-opt {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid #e2e2e2; border-radius: 12px; padding: 14px 14px 14px 36px;
  position: relative; cursor: pointer; margin: 0; background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.sl-invite-opt input {
  position: absolute; left: 12px; top: 16px; margin: 0; width: auto;
}
.sl-invite-opt strong { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.sl-invite-opt span { font-size: 12px; color: #666; line-height: 1.4; font-weight: 500; }
.sl-invite-opt.is-selected,
.sl-invite-opt:has(input:checked) {
  border-color: #fbbe15; background: #fffdf5;
  box-shadow: 0 0 0 1px #fbbe15;
}
.sl-invite-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 8px 0; font-size: 14px; font-weight: 600; cursor: pointer;
}
.sl-invite-check input { margin-top: 3px; width: auto; }
.sl-invite-money {
  display: flex; align-items: center; gap: 8px;
}
.sl-invite-money > span {
  font-weight: 700; font-size: 16px; min-width: 28px; color: #333;
}
.sl-invite-money input { flex: 1; }
.sl-invite-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sl-invite-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-invite-advanced-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 0; margin: 0 0 10px;
  font-family: var(--sl-font); font-size: 16px; font-weight: 700; color: #1a1a1a;
  cursor: pointer;
}
.sl-invite-advanced-toggle i { color: #888; transition: transform .15s ease; }
.sl-invite-advanced-toggle.is-collapsed i { transform: rotate(-90deg); }
.sl-invite-actions {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid #f0f0f0;
}
@media (max-width: 800px) {
  .sl-invite-opts-2,
  .sl-invite-opts-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sl-invite-head { flex-direction: column; }
  .sl-invite-grid,
  .sl-invite-grid-2 { grid-template-columns: 1fr; }
}

/* ---- Job post detail (freelancer view) ---- */
.sl-jp { max-width: 1120px; }
.sl-jp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}
.sl-jp-header { margin: 0 0 16px; }
.sl-jp-header h1 {
  margin: 0 0 8px !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
}
.sl-jp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 13px; color: #6b6b6b; font-weight: 600;
}
.sl-jp-meta .fa { margin-right: 4px; color: #888; }
.sl-jp-dot { color: #bbb; }

.sl-jp-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 14px;
}
.sl-jp-card h2 {
  margin: 0 0 12px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
}
.sl-jp-card h2 span { font-weight: 600; color: #888; font-size: 15px; }
.sl-jp-card h3 {
  margin: 14px 0 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #555 !important;
}
.sl-jp-card h3:first-of-type { margin-top: 0 !important; }
.sl-jp-desc {
  font-size: 15px; line-height: 1.65; color: #333; white-space: pre-wrap;
}
.sl-jp-attach { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.sl-jp-attach ul { margin: 0; padding: 0; list-style: none; }
.sl-jp-attach li { margin: 0 0 6px; }
.sl-jp-attach a { font-weight: 700; }

.sl-jp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.sl-jp-stat {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 16px 14px;
}
.sl-jp-stat > .fa {
  width: 28px; text-align: center; font-size: 18px; color: #8a6d00; margin-top: 2px;
}
.sl-jp-stat strong {
  display: block; font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1.3;
}
.sl-jp-stat small {
  display: block; margin-top: 3px; font-size: 12px; color: #777; font-weight: 600; line-height: 1.35;
}

.sl-jp-inline {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.sl-jp-k { font-size: 14px; font-weight: 800; color: #1a1a1a; }
.sl-jp-v { font-size: 14px; font-weight: 600; color: #444; }

.sl-jp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-jp-tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  background: #f3f3f3; color: #222;
  font-size: 13px; font-weight: 700; border: 1px solid #ececec;
}

.sl-jp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
.sl-jp-split > .sl-jp-card { margin: 0; }

.sl-jp-prefs { list-style: none; margin: 0; padding: 0; }
.sl-jp-prefs li {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #333; line-height: 1.4;
}
.sl-jp-prefs .fa-check-circle { color: #8a6d00; margin-top: 2px; }
.sl-jp-prefs .fa-circle-o { color: #bbb; margin-top: 2px; }

.sl-jp-activity { margin: 0; }
.sl-jp-activity > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
}
.sl-jp-activity > div:last-child { border-bottom: 0; }
.sl-jp-activity dt { margin: 0; font-weight: 600; color: #666; }
.sl-jp-activity dd { margin: 0; font-weight: 800; color: #1a1a1a; text-align: right; }

.sl-jp-history { display: flex; flex-direction: column; gap: 12px; }
.sl-jp-hist {
  padding: 14px 0 0; border-top: 1px solid #f0f0f0;
}
.sl-jp-hist:first-child { border-top: 0; padding-top: 0; }
.sl-jp-hist h3 { margin: 0 0 6px !important; font-size: 15px !important; font-weight: 800 !important; }
.sl-jp-hist-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; font-weight: 700; color: #777; margin-bottom: 6px;
}
.sl-jp-hist p { margin: 0 !important; font-size: 13px; color: #555; line-height: 1.5; }

.sl-jp-aside { position: sticky; top: 16px; }
.sl-jp-aside-card {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 16px; margin: 0 0 12px;
}
.sl-jp-aside-card h2 {
  margin: 0 0 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.sl-jp-aside-card .sl-jp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.sl-jp-apply,
a.sl-jp-apply.sl-btn,
.sl-jp-aside-card a.sl-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
  min-height: 44px;
  text-align: center;
}
.sl-jp-save,
button.sl-jp-save.sl-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
  min-height: 44px;
  border-color: #fbbe15 !important;
  color: #8a6d00 !important;
}
.sl-jp-save .fa {
  color: #fbbe15;
  margin-right: 6px;
  padding: 0 !important;
  position: static !important;
}
.sl-jp-save.is-saved {
  background: #fffdf5 !important;
}
.sl-jp-unsave {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sl-font); font-size: 12px; font-weight: 700; color: #888; text-align: center;
  position: relative !important; float: none !important;
}
.sl-jp-unsave:hover { color: #222; }
.sl-jp-connects {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f0f0;
  display: flex; flex-direction: column; gap: 8px;
}
.sl-jp-connects > div {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; color: #555;
}
.sl-jp-connects b { color: #1a1a1a; font-weight: 800; }

.sl-jp-client { list-style: none; margin: 0; padding: 0; }
.sl-jp-client li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 8px 0; border-bottom: 1px solid #f3f3f3;
  font-size: 13px; font-weight: 600; color: #222;
}
.sl-jp-client li:last-child { border-bottom: 0; }
.sl-jp-client .is-ok { color: #1a1a1a; }
.sl-jp-client .is-ok .fa-check-circle { color: #8a6d00; }
.sl-jp-client .is-muted { color: #888; }
.sl-jp-muted { color: #888; font-weight: 600; margin-right: 4px; }
.sl-jp-stars { color: #fbbe15; letter-spacing: 1px; }
.sl-jp-stars .fa-star-o { color: #d0d0d0; }

.sl-jp-linkbox { display: flex; gap: 8px; }
.sl-jp-linkbox input {
  flex: 1; min-width: 0;
  border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; font-family: var(--sl-font); color: #444;
  background: #fafafa;
}
.sl-jp-linkbox .sl-btn { flex-shrink: 0; padding: 8px 12px; font-size: 12px; }

@media (max-width: 960px) {
  .sl-jp-layout { grid-template-columns: 1fr; }
  .sl-jp-aside { position: static; }
  .sl-jp-stats,
  .sl-jp-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sl-jp-header h1 { font-size: 22px !important; }
}

/* ---- Freelancer public profile (/professional) ---- */
.sl-pv { max-width: 1120px; }
.sl-pv-hero {
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 20px 22px; margin: 0 0 16px; flex-wrap: wrap;
}
.sl-pv-hero-left { display: flex; gap: 16px; align-items: flex-start; min-width: 0; flex: 1 1 420px; }
.sl-pv-avatar {
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
  background: #eee center/cover no-repeat; border: 2px solid #f0f0f0;
}
.sl-pv-hero-meta h1 {
  margin: 0 0 6px !important; font-size: 26px !important; font-weight: 800 !important;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sl-pv-verified { color: #2f6fed; font-size: 16px; }
.sl-pv-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 13px; font-weight: 600; color: #6b6b6b; margin-bottom: 10px;
}
.sl-pv-sub .fa { margin-right: 4px; }
.sl-pv-dot { color: #bbb; }
.sl-pv-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-pv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; background: #f5f5f5;
  border: 1px solid #ececec; font-size: 12px; font-weight: 700; color: #333;
}
.sl-pv-badge-avail { color: #1a1a1a; }
.sl-pv-badge-avail .fa-circle { color: #2e7d32; font-size: 8px; }
.sl-pv-badge .fa-trophy,
.sl-pv-badge-rate .fa-star { color: #fbbe15; }
.sl-pv-hero-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; justify-content: flex-end;
}
.sl-pv-hero-actions .sl-btn,
.sl-pv-hero-actions .sl-btn-ghost {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 40px; margin: 0 !important; position: relative !important; float: none !important;
}

.sl-pv-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.sl-pv-card {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
  padding: 18px 20px; margin: 0 0 14px;
}
.sl-pv-card h2 {
  margin: 0 0 12px !important; font-size: 16px !important; font-weight: 800 !important;
}
.sl-pv-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center;
}
.sl-pv-stats strong { display: block; font-size: 16px; font-weight: 800; color: #1a1a1a; }
.sl-pv-stats span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: #777; }
.sl-pv-plain { margin: 0 !important; font-size: 14px; font-weight: 600; color: #333; }
.sl-pv-muted { margin: 8px 0 0 !important; font-size: 13px; color: #888; font-weight: 600; }
.sl-pv-list { list-style: none; margin: 0; padding: 0; }
.sl-pv-list li {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid #f3f3f3; font-size: 13px; font-weight: 600;
}
.sl-pv-list li:last-child { border-bottom: 0; }
.sl-pv-list li.is-ok { justify-content: flex-start; gap: 8px; }
.sl-pv-list li.is-ok .fa-check-circle { color: #2f6fed; }
.sl-pv-list strong { color: #1a1a1a; }
.sl-pv-list span { color: #666; font-weight: 600; }

.sl-pv-title-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sl-pv-headline {
  margin: 0 !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.3 !important;
  flex: 1 1 280px;
}
.sl-pv-rate { font-size: 20px; font-weight: 800; color: #1a1a1a; white-space: nowrap; }
.sl-pv-bio { font-size: 15px; line-height: 1.65; color: #333; white-space: pre-wrap; }
.sl-pv-more {
  margin-top: 8px; border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--sl-font); font-size: 13px; font-weight: 800; color: #8a6d00;
}

.sl-pv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-pv-tag {
  display: inline-flex; padding: 6px 12px; border-radius: 999px;
  background: #f3f3f3; border: 1px solid #ececec; font-size: 13px; font-weight: 700; color: #222;
}

.sl-pv-portfolio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.sl-pv-port {
  display: block; text-decoration: none !important; color: inherit !important;
  border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fafafa;
}
.sl-pv-port-thumb { height: 110px; background: #eee center/cover no-repeat; }
.sl-pv-port span {
  display: block; padding: 10px 12px; font-size: 12px; font-weight: 700; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sl-pv-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
  border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.sl-pv-tabs button {
  border: 0; background: transparent; padding: 8px 12px; border-radius: 8px;
  font-family: var(--sl-font); font-size: 13px; font-weight: 800; color: #666; cursor: pointer;
}
.sl-pv-tabs button.is-active { background: #fff8e1; color: #1a1a1a; box-shadow: inset 0 -2px 0 #fbbe15; }

.sl-pv-job { padding: 14px 0; border-top: 1px solid #f0f0f0; }
.sl-pv-job:first-child { border-top: 0; padding-top: 0; }
.sl-pv-job h3 { margin: 0 0 6px !important; font-size: 15px !important; font-weight: 800 !important; }
.sl-pv-job-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  font-size: 12px; font-weight: 700; color: #777; margin-bottom: 6px;
}
.sl-pv-stars { color: #fbbe15; }
.sl-pv-stars .fa-star-o { color: #d0d0d0; }
.sl-pv-stars b { color: #1a1a1a; margin-left: 4px; }
.sl-pv-quote { margin: 0 0 8px !important; font-size: 14px; color: #444; font-style: italic; line-height: 1.5; }
.sl-pv-job-earn { font-size: 13px; font-weight: 800; color: #1a1a1a; }

.sl-pv-cert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid #f0f0f0;
}
.sl-pv-cert:first-child { border-top: 0; padding-top: 0; }
.sl-pv-cert > .fa { color: #8a6d00; margin-top: 3px; }
.sl-pv-cert strong { display: block; font-size: 14px; font-weight: 800; }
.sl-pv-cert span { display: block; font-size: 12px; color: #777; font-weight: 600; margin: 2px 0 4px; }
.sl-pv-cert a { font-size: 12px; font-weight: 700; }

.sl-pv-emp article { padding: 12px 0; border-top: 1px solid #f0f0f0; }
.sl-pv-emp article:first-child { border-top: 0; padding-top: 0; }
.sl-pv-emp h3 { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 800 !important; }
.sl-pv-emp-meta { font-size: 12px; font-weight: 700; color: #777; margin-bottom: 6px; }
.sl-pv-emp p { margin: 0 !important; font-size: 13px; color: #444; line-height: 1.5; }

@media (max-width: 960px) {
  .sl-pv-layout { grid-template-columns: 1fr; }
  .sl-pv-portfolio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sl-pv-hero-meta h1 { font-size: 22px !important; }
  .sl-pv-portfolio { grid-template-columns: 1fr; }
  .sl-pv-stats { grid-template-columns: 1fr; text-align: left; }
}