/* ============================================================================
   FocalShift Ai Network Hub — shared component library (fs-components.css)
   Faithful Vikinger UI reproduction, re-skinned to the FocalShift brand.
   EVERY selector is scoped under `.fsv` (the page content wrapper) so nothing
   collides with HumHub's Bootstrap or the fixed chrome (.fslh header / .fsls rail).
   Vikinger source: ../network-hub-prototype/vikinger-src/css/styles.min.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. Tokens + scoped reset
   --------------------------------------------------------------------------- */
.fsv {
  --fs-violet:#615dfa;
  --fs-violet-d:#4f4be0;
  --fs-cyan:#41efff;
  --fs-ink:#2c2c44;
  --fs-muted:#8a8aa6;
  --fs-line:#ececf4;
  --fs-bg:#f4f5fb;
  --fs-pink:#ff2e93;
  --fs-gold:#f5b400;
  --fs-green:#16c43b;
  --fs-grad:linear-gradient(125deg,#5b57ef 0%,#6f5bf6 40%,#39c8e8 100%);
  --fs-radius:14px;
  --fs-shadow:0 1px 2px rgba(94,92,154,.05), 0 16px 34px -28px rgba(94,92,154,.5);
  --fs-shadow-lift:0 2px 6px rgba(94,92,154,.08), 0 26px 50px -26px rgba(94,92,154,.55);

  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--fs-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.fsv *, .fsv *::before, .fsv *::after { box-sizing:border-box; }
.fsv img { max-width:100%; }

/* ---------------------------------------------------------------------------
   1. Layout: content-grid + grid columns + simple responsive grids
   --------------------------------------------------------------------------- */
.fsv .content-grid {
  width:100%;
  max-width:1320px;         /* wider so content fills the band between rail + chat instead of floating centered */
  margin:0 auto;
  padding:16px 30px 80px;   /* tighter top gap below the locked header */
}
.fsv .content-grid.medium { max-width:760px; }
.fsv .content-grid.full { max-width:100%; }

/* 2/3 main + 1/3 sidebar layout (Hans: one main column + a right sidebar after the header) */
.fsv .grid.split-main { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
@media (max-width:900px){ .fsv .grid.split-main { grid-template-columns:1fr; } }

.fsv .grid {
  display:grid;
  grid-template-columns:1fr;
  grid-gap:24px;
  align-items:start;
}
.fsv .grid.split-2 { grid-template-columns:320px minmax(0,1fr); }
.fsv .grid.split-3 { grid-template-columns:280px minmax(0,1fr) 300px; }
.fsv .grid-column { min-width:0; }
.fsv .grid-column > * + * { margin-top:24px; }

.fsv-grid-2, .fsv-grid-3, .fsv-grid-4 {
  display:grid;
  gap:24px;
  align-items:start;
}
.fsv-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fsv-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fsv-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ---------------------------------------------------------------------------
   2. widget-box — the core white rounded card
   --------------------------------------------------------------------------- */
.fsv .widget-box {
  position:relative;
  padding:28px 26px;
  border-radius:var(--fs-radius);
  background-color:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
}
.fsv .widget-box.no-padding { padding:0; }
.fsv .widget-box.no-padding .widget-box-title { padding:28px 26px 0; }

.fsv .widget-box-title {
  font-size:16px;
  font-weight:700;
  color:var(--fs-ink);
  letter-spacing:-.01em;
}
.fsv .widget-box-title .highlighted { color:var(--fs-violet); }

.fsv .widget-box-text {
  font-size:14px;
  line-height:1.72;
  font-weight:500;
  color:var(--fs-ink);
}
.fsv .widget-box-text.light { color:var(--fs-muted); }

.fsv .widget-box-content { margin-top:24px; }
.fsv .widget-box-content:first-child { margin-top:0; }

.fsv .widget-box-settings {
  position:absolute;
  top:20px; right:18px;
  z-index:5;
}
.fsv .widget-box-settings .post-settings {
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:var(--fs-muted);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.fsv .widget-box-settings .post-settings:hover {
  background:rgba(97,93,250,.08);
  color:var(--fs-violet);
}

/* ---------------------------------------------------------------------------
   3. button system
   --------------------------------------------------------------------------- */
.fsv .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 22px;
  border:0;
  border-radius:10px;
  background-color:var(--fs-ink);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease,
             box-shadow .2s ease, transform .12s ease, filter .2s ease;
}
.fsv .button:hover { background-color:#1f2036; }
.fsv .button:active { transform:translateY(1px); }
.fsv .button.full { width:100%; }
.fsv .button.medium { height:50px; padding:0 26px; }
.fsv .button.small { height:38px; padding:0 16px; font-size:12.5px; }
.fsv .button.no-shadow { box-shadow:none; }

.fsv .button.primary {
  background-color:var(--fs-violet);
  box-shadow:0 10px 22px -12px rgba(97,93,250,.7);
}
.fsv .button.primary:hover { background-color:var(--fs-violet-d); }

.fsv .button.gradient {
  background:var(--fs-grad);
  box-shadow:0 12px 26px -14px rgba(97,93,250,.8);
}
.fsv .button.gradient:hover { filter:brightness(1.05); }

.fsv .button.secondary {
  background-color:#f3f3fb;
  color:var(--fs-ink);
  box-shadow:none;
}
.fsv .button.secondary:hover { background-color:#e9e9f6; color:var(--fs-violet); }

.fsv .button.ghost {
  background-color:transparent;
  color:var(--fs-muted);
  border:1px solid var(--fs-line);
  box-shadow:none;
}
.fsv .button.ghost:hover {
  background-color:rgba(97,93,250,.06);
  border-color:rgba(97,93,250,.3);
  color:var(--fs-violet);
}

.fsv .button-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f3f3fb;
  color:var(--fs-muted);
  font-size:15px;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease, transform .12s ease;
}
.fsv .button-icon:hover {
  background:rgba(97,93,250,.12);
  color:var(--fs-violet);
}
.fsv .button-icon.small { width:34px; height:34px; font-size:13px; }
.fsv .button-icon.gradient { background:var(--fs-grad); color:#fff; }

/* ---------------------------------------------------------------------------
   4. user-avatar — circular avatar wrapper + hexagon variant (main user only)
   --------------------------------------------------------------------------- */
.fsv .user-avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--fs-grad);
  position:relative;
  overflow:hidden;
  color:#fff;
  font-weight:700;
  font-size:14px;
}
.fsv .user-avatar img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.fsv .user-avatar.small  { width:28px; height:28px; font-size:11px; }
.fsv .user-avatar.medium { width:40px; height:40px; font-size:14px; }
.fsv .user-avatar.large  { width:56px; height:56px; font-size:18px; }
.fsv .user-avatar.xl     { width:72px; height:72px; font-size:22px; }

/* presence dot */
.fsv .user-avatar.online::after,
.fsv .user-avatar.away::after,
.fsv .user-avatar.offline::after {
  content:"";
  position:absolute;
  bottom:1px; right:1px;
  width:11px; height:11px;
  border:2px solid #fff;
  border-radius:50%;
  z-index:3;
}
.fsv .user-avatar.online::after  { background:var(--fs-green); }
.fsv .user-avatar.away::after    { background:var(--fs-gold); }
.fsv .user-avatar.offline::after { background:#c8c9db; }

/* HEXAGON — reserved for the main signed-in user's own avatar only */
.fsv .user-avatar.hexagon {
  border-radius:0;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:var(--fs-grad);
  padding:2px;
}
.fsv .user-avatar.hexagon img {
  border-radius:0;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.fsv .user-avatar.hexagon::after { display:none; }

/* avatar cluster (overlapping circles) */
.fsv .user-avatar-list { display:flex; }
.fsv .user-avatar-list .user-avatar { margin-left:-8px; border:2px solid #fff; box-sizing:content-box; }
.fsv .user-avatar-list .user-avatar:first-child { margin-left:0; }

/* ---------------------------------------------------------------------------
   5. user-short-description — compact identity block (sidebars)
   --------------------------------------------------------------------------- */
.fsv .user-short-description { text-align:center; }
.fsv .user-short-description.landscape {
  display:flex; align-items:center; gap:14px; text-align:left;
}
.fsv .user-short-description-avatar { margin:0 auto 14px; }
.fsv .user-short-description.landscape .user-short-description-avatar { margin:0; }

.fsv .user-short-description-title {
  font-size:18px;
  font-weight:700;
  color:var(--fs-ink);
  letter-spacing:-.01em;
}
.fsv .user-short-description-title a { color:var(--fs-ink); text-decoration:none; font-weight:700; }
.fsv .user-short-description-title a:hover { color:var(--fs-violet); }
.fsv .user-short-description-title.small { font-size:15px; }

.fsv .user-short-description-text {
  margin-top:8px;
  color:var(--fs-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.fsv .user-short-description-text.regular {
  font-size:13px; font-weight:500; text-transform:none; letter-spacing:0;
}

/* ---------------------------------------------------------------------------
   6. user-preview — member / creator profile card
   --------------------------------------------------------------------------- */
.fsv .user-preview {
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.fsv .user-preview:hover { box-shadow:var(--fs-shadow-lift); transform:translateY(-2px); }

.fsv .user-preview-cover {
  position:relative;
  height:100px;
  background:var(--fs-grad);
  background-size:cover;
  background-position:center;
}
.fsv .user-preview-cover::after {
  content:"";
  position:absolute; inset:0;
  opacity:.22; mix-blend-mode:soft-light; pointer-events:none;
  background:radial-gradient(120% 150% at 84% 90%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 50%);
}

.fsv .user-preview-info {
  position:relative;
  padding:0 26px 26px;
  text-align:center;
}
.fsv .user-preview-info .user-avatar {
  margin:-36px auto 14px;
  border:4px solid #fff;
  box-sizing:content-box;
}
.fsv .user-preview-name {
  font-size:18px;
  font-weight:700;
  color:var(--fs-ink);
  letter-spacing:-.01em;
}
.fsv .user-preview-name a { color:inherit; text-decoration:none; }
.fsv .user-preview-headline {
  margin-top:5px;
  font-size:12.5px;
  font-weight:500;
  color:var(--fs-muted);
}

.fsv .user-preview-info .user-stats,
.fsv .user-preview-info .profile-stats-inline { margin-top:20px; }

.fsv .user-preview-actions {
  display:flex;
  gap:10px;
  margin-top:22px;
}
.fsv .user-preview-actions .button { flex:1; }

/* user-stats — small inline stat group used inside previews */
.fsv .user-stats {
  display:flex;
  justify-content:center;
}
.fsv .user-stats .user-stat {
  position:relative;
  flex:1;
  padding:0 4px;
  text-align:center;
}
.fsv .user-stats .user-stat::after {
  content:"";
  position:absolute; top:6px; right:0;
  width:1px; height:22px;
  background:var(--fs-line);
}
.fsv .user-stats .user-stat:last-child::after { display:none; }
.fsv .user-stats .user-stat b {
  display:block;
  font-size:17px;
  font-weight:800;
  color:var(--fs-ink);
}
.fsv .user-stats .user-stat span {
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--fs-muted);
}

/* ---------------------------------------------------------------------------
   7. profile-stats — big-number horizontal stat group (profiles)
   --------------------------------------------------------------------------- */
.fsv .profile-stats {
  display:flex;
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
  padding:24px 20px;
}
.fsv .profile-stats .profile-stat {
  position:relative;
  flex:1;
  text-align:center;
  padding:0 8px;
}
.fsv .profile-stats .profile-stat::after {
  content:"";
  position:absolute; top:50%; right:0;
  transform:translateY(-50%);
  width:1px; height:34px;
  background:var(--fs-line);
}
.fsv .profile-stats .profile-stat:last-child::after { display:none; }
.fsv .profile-stats .profile-stat b {
  display:block;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--fs-ink);
  white-space:nowrap;
}
.fsv .profile-stats .profile-stat .grad {
  background:var(--fs-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.fsv .profile-stats .profile-stat span {
  display:block;
  margin-top:5px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fs-muted);
}

/* ---------------------------------------------------------------------------
   8. product-preview — marketplace gig / product card
   --------------------------------------------------------------------------- */
.fsv .product-preview {
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.fsv .product-preview:hover { box-shadow:var(--fs-shadow-lift); transform:translateY(-2px); }

.fsv .product-preview-image {
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--fs-grad);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.92);
  font-size:30px;
}
.fsv .product-preview-image::after {
  content:"";
  position:absolute; inset:0;
  opacity:.2; mix-blend-mode:soft-light; pointer-events:none;
  background:radial-gradient(120% 150% at 16% 14%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 46%);
}

.fsv .product-preview-info { padding:20px 22px 22px; }
.fsv .product-preview-title {
  font-size:15.5px;
  font-weight:700;
  color:var(--fs-ink);
  letter-spacing:-.01em;
  line-height:1.35;
}
.fsv .product-preview-title a { color:inherit; text-decoration:none; }
.fsv .product-preview-title a:hover { color:var(--fs-violet); }

.fsv .product-preview-author {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--fs-muted);
}
.fsv .product-preview-author a { color:var(--fs-ink); text-decoration:none; font-weight:600; }

.fsv .product-preview-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--fs-line);
}
.fsv .product-preview-price {
  font-size:16px;
  font-weight:800;
  color:var(--fs-ink);
}
.fsv .product-preview-price small {
  font-size:11px;
  font-weight:600;
  color:var(--fs-muted);
}

/* ---------------------------------------------------------------------------
   9. badge-list / badge-item — achievement shelf
   --------------------------------------------------------------------------- */
.fsv .badge-list {
  display:grid;
  grid-template-columns:repeat(auto-fit, 44px);
  justify-content:center;
  gap:14px;
}
.fsv .badge-list.align-left { justify-content:flex-start; }

.fsv .badge-item {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:48px;
  position:relative;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(135deg,#f0f0fb,#e6e7f6);
  color:var(--fs-violet);
  font-size:18px;
  transition:transform .14s ease, filter .14s ease;
}
.fsv .badge-item img {
  width:100%; height:100%;
  object-fit:contain;
}
.fsv .badge-item:hover { transform:translateY(-2px) scale(1.06); }
.fsv .badge-item.earned { background:var(--fs-grad); color:#fff; }
.fsv .badge-item .badge-item-text {
  position:relative; z-index:2;
  color:#fff; font-size:11px; font-weight:700;
}

/* ---------------------------------------------------------------------------
   10. tab-box / fsv-tabs — underline tab bar
   --------------------------------------------------------------------------- */
.fsv .tab-box {
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
  overflow:hidden;
}
.fsv .tab-box-options { display:flex; border-bottom:1px solid var(--fs-line); }
.fsv .tab-box-option {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  height:60px;
  color:var(--fs-muted);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.fsv .tab-box-option:hover { color:var(--fs-ink); }
.fsv .tab-box-option.active {
  color:var(--fs-violet);
  border-bottom-color:var(--fs-violet);
}
.fsv .tab-box-item-content { padding:26px 26px 32px; }

/* lightweight inline tab nav */
.fsv-tabs {
  display:flex;
  gap:26px;
  border-bottom:1px solid var(--fs-line);
}
.fsv-tabs a {
  position:relative;
  padding:12px 2px;
  font-size:14px;
  font-weight:600;
  color:var(--fs-muted);
  text-decoration:none;
  transition:color .18s ease;
}
.fsv-tabs a::after {
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--fs-violet);
  border-radius:2px;
  transform:scaleX(0);
  transition:transform .2s ease;
}
.fsv-tabs a:hover { color:var(--fs-ink); }
.fsv-tabs a.active { color:var(--fs-violet); }
.fsv-tabs a.active::after { transform:scaleX(1); }

/* ===========================================================================
   FocalShift monetization components (invented, in Vikinger spirit)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   11. fsv-tier — Patreon-style membership / support tier card
   --------------------------------------------------------------------------- */
.fsv-tier {
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
  padding:28px 26px;
  transition:box-shadow .25s ease, transform .25s ease;
}
.fsv-tier:hover { box-shadow:var(--fs-shadow-lift); transform:translateY(-2px); }

.fsv-tier-name {
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fs-muted);
}
.fsv-tier-price {
  margin-top:10px;
  font-size:38px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--fs-ink);
  line-height:1;
}
.fsv-tier-price .per {
  font-size:14px;
  font-weight:600;
  color:var(--fs-muted);
  letter-spacing:0;
}
.fsv-tier-desc {
  margin-top:10px;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  color:var(--fs-muted);
}
.fsv-tier-perks {
  list-style:none;
  margin:22px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--fs-line);
}
.fsv-tier-perks li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  font-weight:500;
  color:var(--fs-ink);
}
.fsv-tier-perks li + li { margin-top:12px; }
.fsv-tier-perks li i,
.fsv-tier-perks li .check {
  flex:0 0 auto;
  margin-top:1px;
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(97,93,250,.12);
  color:var(--fs-violet);
  font-size:9px;
}
.fsv-tier .button { margin-top:24px; }

/* featured variant */
.fsv-tier.featured {
  border-color:transparent;
  box-shadow:0 0 0 2px var(--fs-violet), var(--fs-shadow-lift);
}
.fsv-tier.featured .fsv-tier-price { color:var(--fs-violet); }
.fsv-tier-pill {
  position:absolute;
  top:-12px; left:50%;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 14px;
  border-radius:200px;
  background:var(--fs-grad);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 8px 18px -8px rgba(97,93,250,.8);
  white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   12. fsv-gig — Upwork-style service / "Hire me" card
   --------------------------------------------------------------------------- */
.fsv-gig {
  display:flex;
  flex-direction:column;
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px solid var(--fs-line);
  box-shadow:var(--fs-shadow);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.fsv-gig:hover { box-shadow:var(--fs-shadow-lift); transform:translateY(-2px); }
.fsv-gig-thumb {
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--fs-grad);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.9);
  font-size:28px;
}
.fsv-gig-thumb::after {
  content:"";
  position:absolute; inset:0;
  opacity:.2; mix-blend-mode:soft-light;
  background:radial-gradient(120% 150% at 16% 14%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 46%);
}
.fsv-gig-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.fsv-gig-title {
  font-size:15px;
  font-weight:700;
  color:var(--fs-ink);
  line-height:1.35;
  letter-spacing:-.01em;
}
.fsv-gig-provider {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--fs-muted);
}
.fsv-gig-provider b { color:var(--fs-ink); font-weight:600; }
.fsv-gig-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:16px;
}
.fsv-gig-price { font-size:13px; font-weight:600; color:var(--fs-muted); }
.fsv-gig-price b { display:block; font-size:17px; font-weight:800; color:var(--fs-ink); }

/* ---------------------------------------------------------------------------
   13. fsv-paid — the "$" paid-action button convention (network-wide signal)
   --------------------------------------------------------------------------- */
.fsv-paid {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:42px;
  padding:0 22px;
  border:0;
  border-radius:200px;
  background:var(--fs-grad);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 12px 26px -14px rgba(97,93,250,.85);
  transition:filter .2s ease, transform .12s ease, box-shadow .2s ease;
}
.fsv-paid:hover { filter:brightness(1.05); box-shadow:0 16px 30px -14px rgba(97,93,250,.9); }
.fsv-paid:active { transform:translateY(1px); }
.fsv-paid::before {
  content:"$";
  font-weight:800;
  font-size:15px;
  line-height:1;
}
.fsv-paid.solid {
  background:var(--fs-violet);
  box-shadow:0 12px 26px -14px rgba(97,93,250,.7);
}
.fsv-paid.small { height:36px; padding:0 16px; font-size:12.5px; }
.fsv-paid.full { display:flex; width:100%; }

/* ---------------------------------------------------------------------------
   14. fsv-status-pill — profile status chip (dot + label)
   --------------------------------------------------------------------------- */
.fsv-status-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border-radius:200px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  background:#f3f3fb;
  color:var(--fs-ink);
}
.fsv-status-pill::before {
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}
.fsv-status-pill.open-work { background:rgba(22,196,59,.12); color:var(--fs-green); }
.fsv-status-pill.hiring    { background:rgba(97,93,250,.12); color:var(--fs-violet); }
.fsv-status-pill.collab    { background:rgba(35,200,232,.16); color:#0a9bb0; }

/* ---------------------------------------------------------------------------
   15. fsv-section-head — section header row (title left, "See all" right)
   --------------------------------------------------------------------------- */
.fsv-section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.fsv-section-head h2,
.fsv-section-head .title {
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--fs-ink);
}
.fsv-section-head .subtitle {
  margin-top:3px;
  font-size:13px;
  font-weight:500;
  color:var(--fs-muted);
}
.fsv-section-head .see-all {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--fs-violet);
  text-decoration:none;
  white-space:nowrap;
}
.fsv-section-head .see-all:hover { color:var(--fs-violet-d); }

/* ---------------------------------------------------------------------------
   16. fsv-rating — star rating row
   --------------------------------------------------------------------------- */
.fsv-rating {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
}
.fsv-rating .stars {
  display:inline-flex;
  gap:2px;
  color:var(--fs-gold);
  font-size:13px;
}
.fsv-rating .stars .empty { color:#dcdce8; }
.fsv-rating .score { font-weight:800; color:var(--fs-ink); }
.fsv-rating .count { font-weight:500; color:var(--fs-muted); }

/* ---------------------------------------------------------------------------
   17. fsv-empty — friendly empty-state block
   --------------------------------------------------------------------------- */
.fsv-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:48px 28px;
  border-radius:var(--fs-radius);
  background:#fff;
  border:1px dashed var(--fs-line);
}
.fsv-empty-icon {
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(97,93,250,.08);
  color:var(--fs-violet);
  font-size:26px;
  margin-bottom:16px;
}
.fsv-empty-title {
  font-size:16px;
  font-weight:700;
  color:var(--fs-ink);
}
.fsv-empty-text {
  margin-top:6px;
  max-width:340px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.55;
  color:var(--fs-muted);
}
.fsv-empty .button,
.fsv-empty .fsv-paid { margin-top:20px; }

/* ---------------------------------------------------------------------------
   Mobile responsive — collapse grids + stack cards (<=760px)
   --------------------------------------------------------------------------- */
@media (max-width:760px) {
  .fsv-grid-2, .fsv-grid-3, .fsv-grid-4 { grid-template-columns:1fr; }
  .fsv .grid.split-2,
  .fsv .grid.split-3 { grid-template-columns:1fr; }
  .fsv .content-grid { padding:24px 16px 72px; }
  .fsv .user-preview-actions { flex-direction:column; }
  .fsv .profile-stats { flex-wrap:wrap; gap:18px 0; }
  .fsv .profile-stats .profile-stat { flex:0 0 50%; }
  .fsv .profile-stats .profile-stat:nth-child(2)::after { display:none; }
  .fsv-section-head { flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ============================================================================
   Color variety — pull the hexagon cyan + the full Vikinger accent range so the
   UI isn't mono-violet. Thumbnails / covers rotate hue by grid position.
   ============================================================================ */
.fsv .fsv-g1, .fsv [class*="fsv-grid"] > :nth-child(8n+1) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+1) .product-preview-image { background:linear-gradient(135deg,#615dfa,#41efff)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+2) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+2) .product-preview-image { background:linear-gradient(135deg,#23d2e2,#1fb6a8)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+3) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+3) .product-preview-image { background:linear-gradient(135deg,#ff5e9c,#9b5cff)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+4) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+4) .product-preview-image { background:linear-gradient(135deg,#4d7cff,#23d2e2)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+5) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+5) .product-preview-image { background:linear-gradient(135deg,#2fd17a,#1fc8a9)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+6) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+6) .product-preview-image { background:linear-gradient(135deg,#ff9f43,#ff5e8a)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+7) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+7) .product-preview-image { background:linear-gradient(135deg,#ffc14d,#ff8a3d)!important; }
.fsv [class*="fsv-grid"] > :nth-child(8n+8) .fsv-gig-thumb, .fsv [class*="fsv-grid"] > :nth-child(8n+8) .product-preview-image { background:linear-gradient(135deg,#1fc8db,#4d7cff)!important; }
/* user-preview covers rotate too (override fs-brand's !important gradient) */
.fsv [class*="fsv-grid"] > :nth-child(5n+2) .user-preview-cover { background-image:linear-gradient(135deg,#23d2e2,#1fb6a8)!important; }
.fsv [class*="fsv-grid"] > :nth-child(5n+3) .user-preview-cover { background-image:linear-gradient(135deg,#ff5e9c,#9b5cff)!important; }
.fsv [class*="fsv-grid"] > :nth-child(5n+4) .user-preview-cover { background-image:linear-gradient(135deg,#2fd17a,#1fc8a9)!important; }
.fsv [class*="fsv-grid"] > :nth-child(5n+5) .user-preview-cover { background-image:linear-gradient(135deg,#ff9f43,#ff5e8a)!important; }
.fsv [class*="fsv-grid"] > :nth-child(5n+1) .user-preview-cover { background-image:linear-gradient(135deg,#615dfa,#41efff)!important; }
/* category chips: a spectrum instead of all violet */
.fsv .fsv-cat{ display:inline-flex; align-items:center; padding:7px 15px; border-radius:200px; font-size:12.5px; font-weight:600; text-decoration:none; background:#f3f3fb; color:#5b5b76; transition:filter .15s ease; }
.fsv .fsv-cat:hover{ filter:brightness(.97); }
.fsv .fsv-cat.c1{ background:rgba(97,93,250,.12); color:#615dfa; }
.fsv .fsv-cat.c2{ background:rgba(35,210,226,.16); color:#0a9bb0; }
.fsv .fsv-cat.c3{ background:rgba(255,94,156,.14); color:#d6307a; }
.fsv .fsv-cat.c4{ background:rgba(47,209,122,.16); color:#1a9e58; }
.fsv .fsv-cat.c5{ background:rgba(255,159,67,.16); color:#d97a16; }
.fsv .fsv-cat.c6{ background:rgba(77,124,255,.14); color:#3b62d6; }
/* varied profile-stat numbers (not all violet gradient) */
.fsv .profile-stats .profile-stat:nth-child(2) b{ color:#0a9bb0; }
.fsv .profile-stats .profile-stat:nth-child(3) b{ color:#d6307a; }
.fsv .profile-stats .profile-stat:nth-child(4) b{ color:#1a9e58; }
.fsv .profile-stats .profile-stat:nth-child(5) b{ color:#d97a16; }

/* ============================================================================
   Hashtags + @mentions (Vikinger feed style) — colored, rounded, on HumHub posts
   ============================================================================ */
.wall-entry a[href*="/tag"], .wall-entry a.hashtag, a.hashtag,
.s2_stream a[href*="keyword"], .markdown-render a[href*="/dashboard/dashboard/index?keyword"]{
  color:#615dfa; font-weight:600; text-decoration:none;
}
.wall-entry a[href*="/tag"]:hover, a.hashtag:hover{ text-decoration:underline; }
.atwho-view .atwho-cur, .atwho-view li.atwho-cur{ background:#615dfa!important; }
/* @mention chips in posts */
.wall-entry a.user-tag, .wall-entry a[href^="/u/"], .markdown-render a[href^="/u/"]{
  color:#0a9bb0; font-weight:600; background:rgba(35,210,226,.12); padding:1px 6px; border-radius:6px; text-decoration:none;
}
.wall-entry a[href^="/u/"]:hover{ background:rgba(35,210,226,.2); }

/* ============================================================================
   Public profile header (.fsv-pubhead) — centered hex avatar flanked by action
   buttons + social links, per Hans's sketch. Followed by tabs + 2/3 main / 1/3 side.
   ============================================================================ */
.fsv .fsv-pubhead{ text-align:center; padding:30px 26px 26px; overflow:hidden; }
.fsv .fsv-pubhead-cover{ position:absolute; left:0; right:0; top:0; height:120px; background:var(--fs-grad); }
.fsv .fsv-pubhead.has-cover{ position:relative; padding-top:78px; }
.fsv .fsv-pubhead-row{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; position:relative; }
.fsv .fsv-pubhead-actions{ display:flex; gap:10px; align-items:center; }
.fsv .fsv-pubhead .user-avatar.hexagon{ width:112px; height:112px; font-size:34px; border:0; flex:0 0 auto; box-shadow:0 18px 40px -18px rgba(94,92,154,.6); }
.fsv .fsv-pubhead-name{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--fs-ink); margin-top:16px; }
.fsv .fsv-pubhead-headline{ font-size:14px; font-weight:500; color:var(--fs-muted); margin-top:4px; }
.fsv .fsv-pubhead-pills{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.fsv .fsv-pubhead-social{ display:flex; justify-content:center; gap:9px; margin-top:14px; }
.fsv .fsv-pubhead-social a{ width:38px; height:38px; border-radius:50%; background:#f3f3fb; color:#8a8aa6; display:flex; align-items:center; justify-content:center; font-size:15px; text-decoration:none; transition:.15s; }
.fsv .fsv-pubhead-social a:hover{ color:#fff; transform:translateY(-2px); }
.fsv .fsv-pubhead-social a.tw:hover{ background:#1da1f2; }
.fsv .fsv-pubhead-social a.ig:hover{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.fsv .fsv-pubhead-social a.in:hover{ background:#0a66c2; }
.fsv .fsv-pubhead-social a.web:hover{ background:#615dfa; }
@media (max-width:820px){
  .fsv .fsv-pubhead-row{ flex-direction:column; gap:16px; }
  .fsv .fsv-pubhead-actions{ width:100%; justify-content:center; }
}

/* ============================================================================
   fsv-post — an interactive feed post (on profiles + the feed). Engage: react,
   comment, share. Members-only posts show a locked overlay + unlock CTA.
   ============================================================================ */
.fsv .fsv-post{ background:#fff; border:1px solid var(--fs-line); border-radius:var(--fs-radius); box-shadow:var(--fs-shadow); overflow:hidden; }
.fsv .fsv-post + .fsv-post{ margin-top:20px; }
.fsv .fsv-post-head{ display:flex; align-items:center; gap:12px; padding:18px 20px 0; }
.fsv .fsv-post-head .meta{ flex:1; min-width:0; }
.fsv .fsv-post-head .meta b{ font-size:14.5px; font-weight:700; color:var(--fs-ink); }
.fsv .fsv-post-head .meta span{ display:block; font-size:12px; color:var(--fs-muted); }
.fsv .fsv-post-acc{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:200px; }
.fsv .fsv-post-acc.pub{ color:#0a9bb0; background:rgba(35,210,226,.14); }
.fsv .fsv-post-acc.mem{ color:#d97a16; background:rgba(255,159,26,.14); }
.fsv .fsv-post-text{ padding:13px 20px 4px; font-size:14.5px; line-height:1.62; color:var(--fs-ink); }
.fsv .fsv-post-text a{ color:var(--fs-violet); font-weight:600; text-decoration:none; }
.fsv .fsv-post-media{ margin:12px 0 0; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-size:30px; }
.fsv .fsv-post-foot{ display:flex; align-items:center; gap:4px; padding:8px 12px; border-top:1px solid var(--fs-line); margin-top:14px; }
.fsv .fsv-post-act{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:0; border-radius:9px; background:none; color:var(--fs-muted); font:600 13px inherit; cursor:pointer; transition:.15s; }
.fsv .fsv-post-act:hover{ background:#f6f6fb; color:var(--fs-ink); }
.fsv .fsv-post-act.liked{ color:#ff2e93; }
.fsv .fsv-post-act.liked i{ font-weight:900; }
.fsv .fsv-post-act.share{ margin-left:auto; }
/* members-only locked post */
.fsv .fsv-post.locked .fsv-post-text,
.fsv .fsv-post.locked .fsv-post-media{ filter:blur(7px); opacity:.55; pointer-events:none; user-select:none; }
.fsv .fsv-post-lock{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:18px 20px 22px; border-top:1px solid var(--fs-line); }
.fsv .fsv-post-lock .ic{ width:46px; height:46px; border-radius:50%; background:rgba(255,159,26,.14); color:#d97a16; display:flex; align-items:center; justify-content:center; font-size:18px; }
.fsv .fsv-post-lock b{ font-size:14px; color:var(--fs-ink); }
.fsv .fsv-post-lock span{ font-size:12.5px; color:var(--fs-muted); }

/* compact comment composer revealed under a post */
.fsv .fsv-post-comments{ display:none; padding:4px 16px 16px; border-top:1px solid var(--fs-line); }
.fsv .fsv-post-comments.show{ display:block; }
.fsv .fsv-post-comment{ display:flex; gap:10px; padding:10px 0; }
.fsv .fsv-post-comment .b{ background:#f4f4fb; border-radius:12px; padding:9px 13px; font-size:13px; color:#3e3f5e; }
.fsv .fsv-post-comment .b b{ color:var(--fs-ink); font-size:12.5px; display:block; }
.fsv .fsv-post-cbox{ display:flex; gap:9px; align-items:center; margin-top:8px; }
.fsv .fsv-post-cbox input{ flex:1; height:40px; border:1px solid var(--fs-line); background:#f7f7fb; border-radius:200px; padding:0 16px; font:13.5px inherit; outline:none; }
.fsv .fsv-post-cbox input:focus{ border-color:#d8d8ee; background:#fff; }
.fsv .fsv-post-cbox button{ width:40px; height:40px; border:0; border-radius:50%; background:var(--fs-violet); color:#fff; cursor:pointer; }

/* ============================================================================
   Hire a HUMAN vs deploy an AI AGENT — marketplace differentiator.
   ============================================================================ */
.fsv .fsv-gig-thumb{ position:relative; }
.fsv .fsv-typebadge{ position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:200px; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.94); box-shadow:0 6px 16px -6px rgba(45,45,80,.4); }
.fsv .fsv-typebadge.ai{ color:#5b57ef; }
.fsv .fsv-typebadge.human{ color:#0a9bb0; }
/* AI agent cards get a distinct, consistent tech gradient + sheen (override the hue rotation) */
.fsv .fsv-gig.ai .fsv-gig-thumb{ background:linear-gradient(135deg,#5b57ef 0%,#23d2e2 100%)!important; }
.fsv .fsv-gig.ai .fsv-gig-thumb::after{ content:""; position:absolute; inset:0; opacity:.3; background:radial-gradient(circle at 22% 28%, rgba(255,255,255,.55),transparent 42%), radial-gradient(circle at 82% 74%, rgba(255,255,255,.4),transparent 38%); }
.fsv .fsv-gig.ai{ box-shadow:0 1px 2px rgba(94,92,154,.05), 0 16px 34px -26px rgba(91,87,239,.55); border-color:rgba(97,93,250,.22); }
.fsv .ai-ava{ width:22px; height:22px; border-radius:6px; flex:0 0 auto; background:linear-gradient(135deg,#5b57ef,#23d2e2); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; }
.fsv .fsv-ai-tagline{ font-size:12.5px; color:var(--fs-muted); margin-top:10px; line-height:1.4; }
.fsv .fsv-ai-model{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#5b57ef; background:rgba(97,93,250,.1); padding:3px 8px; border-radius:6px; margin-top:10px; }

/* Human / AI filter toggle (segmented) */
.fsv .fsv-htoggle{ display:inline-flex; background:#fff; border:1px solid var(--fs-line); border-radius:12px; padding:4px; box-shadow:var(--fs-shadow); gap:2px; }
.fsv .fsv-htoggle button{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px; border:0; border-radius:8px; background:none; color:var(--fs-muted); font:600 13px inherit; cursor:pointer; transition:.15s; }
.fsv .fsv-htoggle button:hover{ color:var(--fs-ink); }
.fsv .fsv-htoggle button.sel{ color:#fff; }
.fsv .fsv-htoggle button.sel[data-type="all"]{ background:var(--fs-ink); }
.fsv .fsv-htoggle button.sel[data-type="human"]{ background:#0a9bb0; }
.fsv .fsv-htoggle button.sel[data-type="ai"]{ background:linear-gradient(135deg,#5b57ef,#23d2e2); }

/* ============================================================================
   Social home feed extras — stories reel, event cards, community rows (Vikinger).
   ============================================================================ */
/* stories reel */
.fsv .fsv-stories{ display:flex; gap:15px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:22px; scrollbar-width:none; }
.fsv .fsv-stories::-webkit-scrollbar{ display:none; }
.fsv .fsv-story{ flex:0 0 auto; width:70px; text-align:center; cursor:pointer; }
.fsv .fsv-story .ring{ width:64px; height:64px; margin:0 auto; border-radius:50%; padding:3px; background:linear-gradient(135deg,#5b57ef,#ff5e9c,#ffb14d); display:flex; }
.fsv .fsv-story.seen .ring{ background:#dcdce8; }
.fsv .fsv-story .ring .user-avatar{ width:100%; height:100%; border:2px solid #fff; box-sizing:border-box; }
.fsv .fsv-story .nm{ font-size:11.5px; font-weight:500; color:#5b5b76; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsv .fsv-story.add .ring{ background:#fff; border:2px dashed #d0d0e2; align-items:center; justify-content:center; color:#615dfa; font-size:22px; }
.fsv .fsv-story.add .nm{ color:#615dfa; font-weight:600; }

/* event card (sidebar) */
.fsv .fsv-event{ display:flex; gap:13px; align-items:center; padding:13px 0; border-top:1px solid var(--fs-line); }
.fsv .fsv-event:first-child{ border-top:0; padding-top:2px; }
.fsv .fsv-event .date{ width:48px; flex:0 0 auto; border-radius:10px; overflow:hidden; border:1px solid var(--fs-line); text-align:center; }
.fsv .fsv-event .date .mo{ background:var(--fs-grad); color:#fff; font-size:9px; font-weight:800; letter-spacing:.05em; padding:2px 0; }
.fsv .fsv-event .date .day{ font-size:18px; font-weight:800; color:var(--fs-ink); padding:3px 0; }
.fsv .fsv-event .info{ flex:1; min-width:0; }
.fsv .fsv-event .info b{ font-size:13.5px; font-weight:700; color:var(--fs-ink); display:block; line-height:1.3; }
.fsv .fsv-event .info span{ font-size:12px; color:var(--fs-muted); }
.fsv .fsv-event .going{ font-size:11px; color:var(--fs-violet); font-weight:600; }

/* community / suggestion compact row */
.fsv .fsv-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--fs-line); }
.fsv .fsv-row:first-child{ border-top:0; }
.fsv .fsv-row .ic{ width:40px; height:40px; flex:0 0 auto; border-radius:11px; background:var(--fs-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }
.fsv .fsv-row .t{ flex:1; min-width:0; }
.fsv .fsv-row .t b{ font-size:13.5px; font-weight:700; color:var(--fs-ink); display:block; }
.fsv .fsv-row .t span{ font-size:12px; color:var(--fs-muted); }
.fsv .fsv-row .btn-follow{ height:32px; padding:0 14px; border:1px solid var(--fs-line); border-radius:200px; background:#fff; color:var(--fs-violet); font:600 12.5px inherit; cursor:pointer; }
.fsv .fsv-row .btn-follow:hover{ background:rgba(97,93,250,.08); border-color:rgba(97,93,250,.3); }
.fsv .fsv-row .btn-follow.following{ background:rgba(97,93,250,.1); border-color:transparent; }

/* ============================================================================
   X.com-style post action bar (reply · repost · like · views · bookmark · share)
   + verified check badge.
   ============================================================================ */
.fsv .fsv-post-foot{ justify-content:space-between; gap:0; padding:6px 10px 8px; }
.fsv .fsv-post-act{ gap:7px; padding:0 9px; height:34px; border-radius:200px; }
.fsv .fsv-post-act span{ font-size:13px; }
.fsv .fsv-post-act.reply:hover{ color:#0a9bb0; background:rgba(35,210,226,.12); }
.fsv .fsv-post-act.repost:hover, .fsv .fsv-post-act.repost.on{ color:#16c43b; background:rgba(22,196,59,.12); }
.fsv .fsv-post-act.repost.on i{ font-weight:900; }
.fsv .fsv-post-act.like:hover, .fsv .fsv-post-act.like.liked{ color:#ff2e93; background:rgba(255,46,147,.12); }
.fsv .fsv-post-act.views{ cursor:default; }
.fsv .fsv-post-act.views:hover{ color:#0a9bb0; }
.fsv .fsv-post-act.bm:hover, .fsv .fsv-post-act.bm.on{ color:#615dfa; background:rgba(97,93,250,.12); }
.fsv .fsv-post-act.bm.on i{ font-weight:900; }
.fsv .fsv-post-act.sh:hover{ color:#615dfa; background:rgba(97,93,250,.12); }
.fsv .fsv-post-end{ display:flex; gap:2px; margin-left:0; }
/* verified / premium check */
.fsv .fsv-verified{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--fs-grad); color:#fff; font-size:8px; margin-left:4px; vertical-align:middle; flex:0 0 auto; }
/* For You / Following feed tabs */
.fsv .fsv-feedtabs{ display:flex; background:#fff; border:1px solid var(--fs-line); border-radius:var(--fs-radius); box-shadow:var(--fs-shadow); overflow:hidden; margin-bottom:20px; }
.fsv .fsv-feedtabs a{ flex:1; text-align:center; padding:15px 0; font-size:14.5px; font-weight:700; color:var(--fs-muted); text-decoration:none; position:relative; transition:.15s; }
.fsv .fsv-feedtabs a:hover{ background:#f7f7fb; color:var(--fs-ink); }
.fsv .fsv-feedtabs a.active{ color:var(--fs-ink); }
.fsv .fsv-feedtabs a.active::after{ content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:52px; height:3px; border-radius:3px; background:var(--fs-grad); }

/* ============================================================================
   Gig / job DETAIL page (Upwork+Fiverr hybrid) — reviewed BEFORE hiring:
   breadcrumb, hero, about, included, preview files, reviews, FAQ, package buy-box,
   and the preliminary "contact before you hire" chat with the off-platform guard.
   ============================================================================ */
.fsv .fsv-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fs-muted); margin-bottom:16px; }
.fsv .fsv-crumb a{ color:var(--fs-muted); text-decoration:none; }
.fsv .fsv-crumb a:hover{ color:var(--fs-violet); }
.fsv .fsv-crumb i{ font-size:9px; color:#c9cad8; }
.fsv .fsv-crumb span{ color:var(--fs-ink); font-weight:600; }

.fsv .fsv-gigd-intro > * + *{ margin-top:16px; }
.fsv .fsv-gigd-title{ margin:0; font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--fs-ink); line-height:1.2; }
.fsv .fsv-gigd-seller{ display:flex; align-items:center; gap:12px; }
.fsv .fsv-gigd-seller .who{ display:flex; flex-direction:column; }
.fsv .fsv-gigd-seller .who b{ display:flex; align-items:center; gap:2px; font-size:14.5px; color:var(--fs-ink); }
.fsv .fsv-gigd-seller .who span{ font-size:12.5px; color:var(--fs-muted); }
.fsv .fsv-gigd-seller .rt{ margin-left:auto; }
.fsv .ai-ava.lg{ width:44px; height:44px; border-radius:12px; font-size:14px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#23d2e2,#615dfa); color:#fff; font-weight:800; flex:0 0 auto; }

.fsv .fsv-gigd-hero{ position:relative; height:300px; border-radius:var(--fs-radius); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92); font-size:84px; overflow:hidden; box-shadow:var(--fs-shadow); }
.fsv .fsv-gigd-hero.ai{ background:linear-gradient(135deg,#1b1b2e,#2a2350 60%,#23d2e2); }
.fsv .fsv-gigd-hero .fsv-typebadge{ position:absolute; top:16px; left:16px; }

.fsv .fsv-gigd-p{ margin:0 0 12px; font-size:14.5px; line-height:1.75; color:#43435f; }
.fsv .fsv-gigd-p:last-child{ margin-bottom:0; }
.fsv .fsv-gigd-sub{ font-size:13px; font-weight:500; color:var(--fs-muted); }
.fsv .fsv-gigd-incl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
@media (max-width:620px){ .fsv .fsv-gigd-incl{ grid-template-columns:1fr; } }
.fsv .fsv-gigd-incl li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#43435f; }
.fsv .fsv-gigd-incl li i{ color:var(--fs-green); margin-top:2px; }

/* preview files */
.fsv .fsv-files{ display:flex; flex-direction:column; gap:10px; }
.fsv .fsv-file{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--fs-line); border-radius:12px;
  text-decoration:none; transition:.15s; background:#fff; }
.fsv .fsv-file:hover{ border-color:rgba(97,93,250,.4); box-shadow:var(--fs-shadow); transform:translateY(-1px); }
.fsv .fsv-file .ic{ width:42px; height:42px; flex:0 0 auto; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,46,147,.1); color:#ff2e93; font-size:18px; }
.fsv .fsv-file .t{ display:flex; flex-direction:column; min-width:0; }
.fsv .fsv-file .t b{ font-size:13.5px; color:var(--fs-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsv .fsv-file .t span{ font-size:11.5px; color:var(--fs-muted); }
.fsv .fsv-file .dl{ margin-left:auto; color:var(--fs-muted); font-size:15px; }
.fsv .fsv-file:hover .dl{ color:var(--fs-violet); }

/* reviews */
.fsv .fsv-review{ display:flex; gap:12px; padding:16px 0; border-top:1px solid var(--fs-line); }
.fsv .fsv-review:first-child{ padding-top:0; border-top:0; }
.fsv .fsv-review .b{ flex:1; min-width:0; }
.fsv .fsv-review .h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fsv .fsv-review .h b{ font-size:13.5px; color:var(--fs-ink); }
.fsv .fsv-review .h span{ font-size:12px; color:var(--fs-muted); }
.fsv .fsv-review .h .stars{ color:#f5b400; font-size:11px; }
.fsv .fsv-review p{ margin:6px 0 0; font-size:13.5px; line-height:1.6; color:#43435f; }

/* faq */
.fsv .fsv-faq{ padding:14px 0; border-top:1px solid var(--fs-line); }
.fsv .fsv-faq:first-child{ padding-top:0; border-top:0; }
.fsv .fsv-faq b{ display:block; font-size:14px; color:var(--fs-ink); margin-bottom:5px; }
.fsv .fsv-faq p{ margin:0; font-size:13.5px; line-height:1.6; color:#43435f; }

/* buy box (sticky package selector) */
.fsv .fsv-gigd-buy{ position:sticky; top:90px; border:1px solid var(--fs-line); border-radius:var(--fs-radius); background:#fff;
  box-shadow:var(--fs-shadow-lift); overflow:hidden; }
.fsv .fsv-pkgtabs{ display:flex; border-bottom:1px solid var(--fs-line); }
.fsv .fsv-pkgtabs button{ flex:1; padding:14px 0; border:0; background:none; font:700 13px inherit; color:var(--fs-muted); cursor:pointer;
  position:relative; transition:.15s; }
.fsv .fsv-pkgtabs button:hover{ color:var(--fs-ink); }
.fsv .fsv-pkgtabs button.sel{ color:var(--fs-violet); }
.fsv .fsv-pkgtabs button.sel::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--fs-grad); }
.fsv .fsv-pkg{ padding:22px 22px 24px; }
.fsv .fsv-pkg-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.fsv .fsv-pkg-price{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--fs-ink); }
.fsv .fsv-pkg-pop{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--fs-grad);
  padding:4px 9px; border-radius:200px; }
.fsv .fsv-pkg-meta{ display:flex; gap:18px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--fs-line); }
.fsv .fsv-pkg-meta span{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#43435f; }
.fsv .fsv-pkg-meta i{ color:var(--fs-violet); }
.fsv .fsv-pkg-feat{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:11px; }
.fsv .fsv-pkg-feat li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:#43435f; }
.fsv .fsv-pkg-feat li i{ color:var(--fs-green); margin-top:2px; font-size:12px; }
.fsv .fsv-gigd-contact{ width:100%; margin-top:10px; height:44px; border:1px solid var(--fs-line); border-radius:10px; background:#fff;
  color:var(--fs-ink); font:600 13.5px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:.15s; }
.fsv .fsv-gigd-contact:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); background:rgba(97,93,250,.04); }
.fsv .fsv-gigd-trust{ display:flex; gap:9px; padding:14px 22px; background:#f7f7fb; border-top:1px solid var(--fs-line);
  font-size:12px; line-height:1.5; color:var(--fs-muted); }
.fsv .fsv-gigd-trust i{ color:var(--fs-green); margin-top:1px; }

/* ---- preliminary contact chat (Fiverr-style) + off-platform guard ---- */
.fsgc-overlay{ position:fixed; inset:0; z-index:1200; display:none; align-items:flex-end; justify-content:flex-end; padding:0 24px 24px;
  background:rgba(20,20,40,.32); }
.fsgc-overlay.open{ display:flex; }
.fsgc{ width:400px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 120px); background:#fff; border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(20,20,50,.55); display:flex; flex-direction:column; overflow:hidden;
  font-family:'Inter',system-ui,sans-serif; }
.fsgc-head{ display:flex; align-items:center; gap:11px; padding:15px 16px; border-bottom:1px solid #ececf4; }
.fsgc-head .who{ display:flex; flex-direction:column; min-width:0; }
.fsgc-head .who b{ font-size:14px; color:#2c2c44; display:flex; align-items:center; gap:3px; }
.fsgc-head .who span{ font-size:11.5px; color:#16c43b; display:flex; align-items:center; gap:5px; }
.fsgc-head .who span::before{ content:""; width:7px; height:7px; border-radius:50%; background:#16c43b; }
.fsgc-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:#9b9cb4; cursor:pointer; font-size:14px; }
.fsgc-head .x:hover{ background:#e9e9f6; color:#615dfa; }
.fsgc-guard{ display:flex; gap:9px; padding:10px 16px; background:rgba(97,93,250,.07); border-bottom:1px solid #ececf4;
  font-size:11.5px; line-height:1.45; color:#5b5b76; }
.fsgc-guard i{ color:#615dfa; margin-top:1px; }
.fsgc-thread{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:#fafafe; }
.fsgc-msg{ max-width:80%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.fsgc-msg.them{ align-self:flex-start; background:#fff; border:1px solid #ececf4; color:#2c2c44; border-bottom-left-radius:5px; }
.fsgc-msg.me{ align-self:flex-end; background:var(--fs-grad,linear-gradient(125deg,#5b57ef,#39c8e8)); color:#fff; border-bottom-right-radius:5px; }
.fsgc-day{ align-self:center; font-size:11px; color:#9b9cb4; }
.fsgc-warn{ margin:0 16px; padding:11px 13px; border-radius:12px; background:rgba(255,46,147,.08); border:1px solid rgba(255,46,147,.25);
  font-size:12px; line-height:1.5; color:#c01f6d; display:none; gap:9px; }
.fsgc-warn.show{ display:flex; }
.fsgc-warn i{ margin-top:1px; }
.fsgc-compose{ display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid #ececf4; }
.fsgc-compose textarea{ flex:1; resize:none; height:42px; max-height:110px; border:1px solid #e4e4f0; border-radius:12px; padding:11px 13px;
  font:500 13.5px 'Inter',system-ui,sans-serif; color:#2c2c44; outline:none; transition:.15s; }
.fsgc-compose textarea:focus{ border-color:rgba(97,93,250,.5); }
.fsgc-compose textarea.bad{ border-color:rgba(255,46,147,.6); background:rgba(255,46,147,.03); }
.fsgc-send{ width:42px; height:42px; flex:0 0 auto; border:0; border-radius:12px; background:var(--fs-grad,linear-gradient(125deg,#5b57ef,#39c8e8));
  color:#fff; font-size:15px; cursor:pointer; }
.fsgc-send:hover{ filter:brightness(1.05); }
@media (max-width:560px){ .fsgc-overlay{ padding:0; } .fsgc{ width:100%; height:100%; max-height:100%; border-radius:0; } }

/* ============================================================================
   JOBS BOARD (ZipRecruiter / Indeed / LinkedIn-style) — free to post & apply.
   ============================================================================ */
/* search bar */
.fsv .fsv-jobsearch{ display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.fsv .fsv-jobsearch .f{ flex:1; min-width:180px; position:relative; }
.fsv .fsv-jobsearch .f i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--fs-muted); font-size:14px; }
.fsv .fsv-jobsearch input{ width:100%; height:46px; border:1px solid var(--fs-line); border-radius:12px; padding:0 14px 0 40px;
  font:500 14px inherit; color:var(--fs-ink); outline:none; background:#fff; transition:.15s; }
.fsv .fsv-jobsearch input:focus{ border-color:rgba(97,93,250,.5); box-shadow:0 0 0 4px rgba(97,93,250,.08); }

/* segmented job-type quick filter (reuses htoggle look) */
.fsv .fsv-jrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.fsv .fsv-jcount{ font-size:13px; color:var(--fs-muted); }
.fsv .fsv-jcount b{ color:var(--fs-ink); }

/* job card */
.fsv .fsv-job{ display:block; position:relative; padding:20px 22px; border-radius:var(--fs-radius); background:#fff;
  border:1px solid var(--fs-line); box-shadow:var(--fs-shadow); text-decoration:none; color:inherit;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.fsv .fsv-job + .fsv-job{ margin-top:14px; }
.fsv .fsv-job:hover{ box-shadow:var(--fs-shadow-lift); transform:translateY(-2px); border-color:rgba(97,93,250,.25); }
.fsv .fsv-job-top{ display:flex; align-items:flex-start; gap:14px; }
.fsv .fsv-job-logo{ width:48px; height:48px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px; }
.fsv .fsv-job-h{ flex:1; min-width:0; }
.fsv .fsv-job-title{ font-size:16.5px; font-weight:700; color:var(--fs-ink); letter-spacing:-.01em; display:flex; align-items:center; gap:6px; }
.fsv .fsv-job-co{ font-size:13px; color:var(--fs-muted); margin-top:3px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.fsv .fsv-job-co b{ color:#43435f; font-weight:600; }
.fsv .fsv-job-co .vrf{ color:var(--fs-violet); font-size:11px; }
.fsv .fsv-save{ flex:0 0 auto; width:38px; height:38px; border:1px solid var(--fs-line); border-radius:10px; background:#fff;
  color:var(--fs-muted); cursor:pointer; font-size:15px; transition:.15s; }
.fsv .fsv-save:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); }
.fsv .fsv-save.on{ background:rgba(97,93,250,.1); border-color:rgba(97,93,250,.4); color:var(--fs-violet); }
.fsv .fsv-save.on i{ font-weight:900; }

.fsv .fsv-jchips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.fsv .fsv-jchip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:8px;
  background:#f4f4fb; color:#43435f; font-size:12px; font-weight:600; }
.fsv .fsv-jchip i{ color:var(--fs-violet); font-size:11px; }
.fsv .fsv-jchip.pay{ background:rgba(22,196,59,.1); color:#0f9b30; }
.fsv .fsv-jchip.pay i{ color:#0f9b30; }

/* match bar */
.fsv .fsv-match{ margin-top:14px; }
.fsv .fsv-match-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.fsv .fsv-match-lbl{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.fsv .fsv-match-lbl i{ font-size:12px; }
.fsv .fsv-match.strong .fsv-match-lbl{ color:#0f9b30; }
.fsv .fsv-match.good .fsv-match-lbl{ color:#c98a00; }
.fsv .fsv-match.low .fsv-match-lbl{ color:var(--fs-muted); }
.fsv .fsv-match-sub{ font-size:12px; color:var(--fs-muted); }
.fsv .fsv-match-track{ height:6px; border-radius:200px; background:#ececf4; overflow:hidden; }
.fsv .fsv-match-fill{ height:100%; border-radius:200px; }
.fsv .fsv-match.strong .fsv-match-fill{ background:linear-gradient(90deg,#16c43b,#3ad15f); }
.fsv .fsv-match.good .fsv-match-fill{ background:linear-gradient(90deg,#f5b400,#ffc94d); }
.fsv .fsv-match.low .fsv-match-fill{ background:#c9cad8; }

/* status badges */
.fsv .fsv-jbadges{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.fsv .fsv-jbadge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:200px;
  letter-spacing:.01em; }
.fsv .fsv-jbadge i{ font-size:10px; }
.fsv .fsv-jbadge.new{ color:#615dfa; background:rgba(97,93,250,.1); }
.fsv .fsv-jbadge.urgent{ color:#ff2e93; background:rgba(255,46,147,.1); }
.fsv .fsv-jbadge.early{ color:#0a9bb0; background:rgba(35,210,226,.14); }
.fsv .fsv-jbadge.apps{ color:var(--fs-muted); background:#f4f4fb; }

.fsv .fsv-job-foot{ display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:15px; border-top:1px solid var(--fs-line); }
.fsv .fsv-job-foot .ago{ font-size:12.5px; color:var(--fs-muted); }
.fsv .fsv-job-foot .sp{ margin-left:auto; }
.fsv .fsv-apply{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border:0; border-radius:10px;
  background:var(--fs-grad); color:#fff; font:700 13px inherit; cursor:pointer; text-decoration:none; box-shadow:0 12px 24px -14px rgba(97,93,250,.8); }
.fsv .fsv-apply:hover{ filter:brightness(1.05); }
.fsv .fsv-apply.applied{ background:rgba(22,196,59,.12); color:#0f9b30; box-shadow:none; pointer-events:none; }

/* "Recommended for you" matched strip */
.fsv .fsv-jrec{ border:1px solid rgba(97,93,250,.22); border-radius:var(--fs-radius); background:linear-gradient(180deg,rgba(97,93,250,.05),rgba(97,93,250,0));
  padding:18px 20px; margin-bottom:18px; }
.fsv .fsv-jrec-h{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--fs-violet); margin-bottom:4px; }
.fsv .fsv-jrec-s{ font-size:12.5px; color:var(--fs-muted); }

/* invite-to-apply note (employer→candidate) */
.fsv .fsv-invite{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:12px; margin-top:14px;
  background:rgba(35,210,226,.08); border:1px solid rgba(35,210,226,.22); font-size:13px; color:#0a7d8f; }
.fsv .fsv-invite i{ font-size:16px; }
.fsv .fsv-invite b{ color:#086576; }

/* ---- job DETAIL ---- */
.fsv .fsv-jobd-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.fsv .fsv-howmatch{ display:flex; flex-direction:column; gap:14px; }
.fsv .fsv-howmatch-row{ }
.fsv .fsv-howmatch-row b{ font-size:12.5px; color:var(--fs-muted); text-transform:uppercase; letter-spacing:.04em; }
.fsv .fsv-skillset{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.fsv .fsv-skill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:200px; }
.fsv .fsv-skill.have{ color:#0f9b30; background:rgba(22,196,59,.1); }
.fsv .fsv-skill.miss{ color:var(--fs-muted); background:#f4f4fb; }
.fsv .fsv-skill i{ font-size:10px; }
.fsv .fsv-co-card .row{ display:flex; align-items:center; gap:8px; font-size:13px; color:#43435f; padding:7px 0; }
.fsv .fsv-co-card .row i{ width:18px; color:var(--fs-violet); }
.fsv .fsv-reqs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.fsv .fsv-reqs li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#43435f; }
.fsv .fsv-reqs li i{ color:var(--fs-violet); margin-top:3px; font-size:12px; }

/* ---- easy-apply modal ---- */
.fsap-overlay{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,20,40,.4); }
.fsap-overlay.open{ display:flex; }
.fsap{ width:480px; max-width:100%; max-height:calc(100vh - 60px); overflow-y:auto; background:#fff; border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(20,20,50,.55); font-family:'Inter',system-ui,sans-serif; }
.fsap-head{ display:flex; align-items:flex-start; gap:12px; padding:20px 22px 0; }
.fsap-head .t b{ display:block; font-size:17px; font-weight:800; color:#2c2c44; }
.fsap-head .t span{ font-size:13px; color:#8a8aa6; }
.fsap-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:#9b9cb4; cursor:pointer; font-size:14px; }
.fsap-body{ padding:18px 22px 22px; }
.fsap-card{ display:flex; align-items:center; gap:12px; padding:13px; border:1px solid #ececf4; border-radius:12px; margin-bottom:14px; }
.fsap-card .who b{ display:block; font-size:14px; color:#2c2c44; }
.fsap-card .who span{ font-size:12px; color:#8a8aa6; }
.fsap-card .edit{ margin-left:auto; font-size:12.5px; font-weight:600; color:#615dfa; text-decoration:none; }
.fsap-label{ font-size:12.5px; font-weight:700; color:#43435f; margin:0 0 7px; }
.fsap textarea{ width:100%; min-height:96px; resize:vertical; border:1px solid #e4e4f0; border-radius:12px; padding:12px 13px;
  font:500 13.5px 'Inter',system-ui,sans-serif; color:#2c2c44; outline:none; }
.fsap textarea:focus{ border-color:rgba(97,93,250,.5); }
.fsap-free{ display:flex; align-items:center; gap:8px; font-size:12px; color:#0f9b30; margin:12px 0 16px; }
.fsap-go{ width:100%; height:48px; border:0; border-radius:12px; background:var(--fs-grad,linear-gradient(125deg,#5b57ef,#39c8e8));
  color:#fff; font:700 14px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.fsap-go:hover{ filter:brightness(1.05); }
.fsap-done{ text-align:center; padding:30px 22px 26px; }
.fsap-done .chk{ width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:rgba(22,196,59,.12); color:#16c43b;
  display:flex; align-items:center; justify-content:center; font-size:26px; }
.fsap-steps{ display:flex; flex-direction:column; gap:0; margin:18px 0 4px; text-align:left; }
.fsap-step{ display:flex; align-items:center; gap:11px; padding:9px 0; font-size:13px; color:#8a8aa6; }
.fsap-step.on{ color:#2c2c44; font-weight:600; }
.fsap-step .d{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; border:2px solid #e4e4f0; display:flex; align-items:center; justify-content:center; font-size:10px; }
.fsap-step.on .d{ border-color:#16c43b; background:#16c43b; color:#fff; }

/* ============================================================================
   Team-vote hiring — bring the whole team in on a hire: candidate card, votes,
   live tally, "Schedule interview" (→ Connect Call / Zoom) + "Proceed to hire".
   ============================================================================ */
.fsvote-overlay{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,20,40,.42); }
.fsvote-overlay.open{ display:flex; }
.fsvote{ width:480px; max-width:100%; max-height:calc(100vh - 60px); overflow-y:auto; background:#fff; border-radius:18px; box-shadow:0 30px 70px -20px rgba(20,20,50,.55); font-family:'Inter',system-ui,sans-serif; }
.fsvote-head{ display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid #ececf4; }
.fsvote-head b{ font-size:17px; font-weight:800; color:#2c2c44; }
.fsvote-head .sub{ font-size:12px; color:#9b9cb4; }
.fsvote-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:#9b9cb4; cursor:pointer; font-size:14px; }
.fsvote-body{ padding:18px 22px 22px; }
.fsvote-cand{ display:flex; align-items:center; gap:13px; padding:14px; border:1px solid #ececf4; border-radius:14px; margin-bottom:16px; }
.fsvote-cand .info{ flex:1; min-width:0; }
.fsvote-cand .info b{ display:flex; align-items:center; gap:3px; font-size:15px; color:#2c2c44; }
.fsvote-cand .info span{ font-size:12.5px; color:#8a8aa6; }
.fsvote-cand .prof{ font-size:12.5px; font-weight:600; color:#615dfa; text-decoration:none; white-space:nowrap; }
.fsvote-cand .prof:hover{ text-decoration:underline; }
.fsvote-tally{ margin-bottom:18px; }
.fsvote-bar{ display:flex; height:9px; border-radius:200px; overflow:hidden; background:#ececf4; margin-bottom:8px; }
.fsvote-bar .hire{ background:#16c43b; transition:width .25s ease; }
.fsvote-bar .maybe{ background:#f5b400; transition:width .25s ease; }
.fsvote-bar .pass{ background:#ff2e93; transition:width .25s ease; }
.fsvote-legend{ display:flex; gap:16px; font-size:12px; font-weight:600; }
.fsvote-legend .h{ color:#0f9b30; } .fsvote-legend .m{ color:#c98a00; } .fsvote-legend .p{ color:#c01f6d; }
.fsvote-list{ display:flex; flex-direction:column; gap:4px; margin-bottom:18px; }
.fsvote-row{ display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:11px; }
.fsvote-row:hover{ background:#f7f7fb; }
.fsvote-row .who{ flex:1; min-width:0; }
.fsvote-row .who b{ font-size:13px; color:#2c2c44; }
.fsvote-row .who b .you{ font-size:11px; font-weight:500; color:#9b9cb4; }
.fsvote-row .who span{ display:block; font-size:11px; color:#9b9cb4; }
.fsvote-pills{ display:flex; gap:4px; flex:0 0 auto; }
.fsvote-pill{ width:32px; height:30px; border:1px solid #ececf4; border-radius:8px; background:#fff; cursor:pointer; font-size:13px; transition:.13s; display:flex; align-items:center; justify-content:center; }
.fsvote-pill:hover{ border-color:#cfcfe6; }
.fsvote-pill.sel.hire{ background:rgba(22,196,59,.14); border-color:rgba(22,196,59,.5); }
.fsvote-pill.sel.maybe{ background:rgba(245,180,0,.16); border-color:rgba(245,180,0,.5); }
.fsvote-pill.sel.pass{ background:rgba(255,46,147,.12); border-color:rgba(255,46,147,.5); }
.fsvote-row.read .fsvote-pill{ cursor:default; opacity:.5; } .fsvote-row.read .fsvote-pill.sel{ opacity:1; }
.fsvote-actions{ display:flex; gap:10px; }
.fsvote-actions > *{ flex:1; height:46px; border-radius:12px; font:700 13.5px inherit; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; }
.fsvote-sched{ border:1px solid var(--fs-line); background:#fff; color:var(--fs-ink); }
.fsvote-sched:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); }
.fsvote-hire{ border:0; background:var(--fs-grad); color:#fff; box-shadow:0 12px 24px -14px rgba(97,93,250,.8); }
.fsvote-hire:hover{ filter:brightness(1.05); }
.fsvote-note{ display:flex; gap:8px; margin-top:14px; font-size:11.5px; color:var(--fs-muted); }
.fsvote-note i{ color:var(--fs-violet); margin-top:1px; }
/* the "decide with team" trigger on the buy-box */
.fsv-teamcta{ width:100%; margin-top:10px; height:44px; border:1px dashed rgba(97,93,250,.4); border-radius:10px; background:rgba(97,93,250,.04); color:var(--fs-violet); font:600 13.5px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:.15s; }
.fsv-teamcta:hover{ background:rgba(97,93,250,.09); }
.fsv-teamcta .av{ display:inline-flex; margin-left:2px; }
.fsv-teamcta .av span{ width:20px; height:20px; border-radius:50%; border:2px solid #fff; margin-left:-7px; font-size:8px; font-weight:700; color:#fff; display:inline-flex; align-items:center; justify-content:center; }

/* ============================================================================
   Group scheduling — find a meet-&-greet time that works for the team AND the
   candidate, with candidate counter-proposals (When2meet × Calendly, → PULSE/Zoom).
   ============================================================================ */
.fsmeet-overlay{ position:fixed; inset:0; z-index:1250; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,20,40,.45); }
.fsmeet-overlay.open{ display:flex; }
.fsmeet{ width:560px; max-width:100%; max-height:calc(100vh - 56px); overflow-y:auto; background:#fff; border-radius:18px; box-shadow:0 30px 70px -20px rgba(20,20,50,.55); font-family:'Inter',system-ui,sans-serif; }
.fsmeet-head{ display:flex; align-items:flex-start; gap:10px; padding:18px 22px; border-bottom:1px solid #ececf4; }
.fsmeet-head b{ font-size:17px; font-weight:800; color:#2c2c44; }
.fsmeet-head .sub{ font-size:12.5px; color:#9b9cb4; margin-top:2px; }
.fsmeet-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:#9b9cb4; cursor:pointer; font-size:14px; }
.fsmeet-body{ padding:18px 22px 22px; }
.fsmeet-cap{ font-size:13px; font-weight:700; color:#2c2c44; margin-bottom:13px; }
.fsmeet-cap span{ display:block; font-size:11.5px; font-weight:500; color:#9b9cb4; margin-top:2px; }
.fsmeet-slots{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:16px; }
@media (max-width:560px){ .fsmeet-slots{ grid-template-columns:repeat(2,1fr); } }
.fsmeet-slot{ border:1px solid #ececf4; border-radius:13px; background:#fff; padding:12px 8px 10px; cursor:pointer; text-align:center; transition:.14s; }
.fsmeet-slot:hover{ border-color:rgba(97,93,250,.4); }
.fsmeet-slot.best{ border-color:rgba(22,196,59,.5); background:rgba(22,196,59,.05); box-shadow:0 10px 24px -16px rgba(22,196,59,.6); }
.fsmeet-slot.picked{ border-color:rgba(97,93,250,.55); background:rgba(97,93,250,.06); }
.fsmeet-slot .d{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#615dfa; }
.fsmeet-slot .dt{ font-size:11px; color:#9b9cb4; }
.fsmeet-slot .tm{ font-size:13.5px; font-weight:700; color:#2c2c44; margin:5px 0 7px; }
.fsmeet-slot .av{ font-size:11px; font-weight:600; color:#16c43b; }
.fsmeet-slot .av .x{ color:#c01f6d; }
.fsmeet-slot .me{ margin-top:7px; font-size:10.5px; font-weight:700; padding:3px 0; border-radius:6px; background:#f3f3fb; color:#8a8aa6; }
.fsmeet-slot.iamfree .me{ background:rgba(97,93,250,.14); color:#615dfa; }
.fsmeet-best{ font-size:13px; color:#43435f; margin-bottom:16px; padding:11px 14px; border-radius:11px; background:#f7f7fb; }
.fsmeet-best b{ color:#0f9b30; }
.fsmeet-go{ width:100%; height:46px; border:0; border-radius:12px; background:var(--fs-grad,linear-gradient(125deg,#5b57ef,#39c8e8)); color:#fff; font:700 14px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.fsmeet-go:hover{ filter:brightness(1.05); }
.fsmeet-go.ghost{ background:#fff; border:1px solid var(--fs-line); color:var(--fs-ink); }
.fsmeet-go.ghost:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); filter:none; }
/* candidate response card */
.fsmeet-resp{ display:flex; gap:12px; padding:15px; border-radius:14px; border:1px solid #ececf4; margin-bottom:16px; }
.fsmeet-resp.warn{ border-color:rgba(245,180,0,.4); background:rgba(245,180,0,.06); }
.fsmeet-resp.ok{ border-color:rgba(22,196,59,.4); background:rgba(22,196,59,.05); }
.fsmeet-resp .ic{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; }
.fsmeet-resp.warn .ic{ background:rgba(245,180,0,.16); color:#c98a00; }
.fsmeet-resp.ok .ic{ background:rgba(22,196,59,.16); color:#0f9b30; }
.fsmeet-resp .b b{ font-size:14px; color:#2c2c44; }
.fsmeet-resp .b p{ margin:3px 0 0; font-size:12.5px; line-height:1.5; color:#5b5b76; }
.fsmeet-chip{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:6px 12px; border-radius:200px; background:#fff; border:1px solid rgba(97,93,250,.3); font-size:12.5px; font-weight:700; color:#615dfa; }
.fsmeet-actions{ display:flex; gap:10px; }
.fsmeet-actions > *{ flex:1; }
.fsmeet-done{ text-align:center; padding:18px 10px 8px; }
.fsmeet-done .chk{ width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:rgba(22,196,59,.12); color:#16c43b; display:flex; align-items:center; justify-content:center; font-size:26px; }
.fsmeet-summary{ text-align:left; margin:16px 0; padding:14px 16px; border-radius:12px; background:#f7f7fb; font-size:13px; }
.fsmeet-summary div{ display:flex; align-items:center; gap:9px; padding:5px 0; color:#43435f; }
.fsmeet-summary i{ width:18px; color:#615dfa; }

/* ============================================================================
   AI Dream Team builder — describe a project → AI proposes roles → matched
   network talent (human + AI) → assemble a team → drop into a Focus Board + invite.
   ============================================================================ */
.fsv .fsdt-brief{ border:1px solid var(--fs-line); border-radius:var(--fs-radius); background:#fff; box-shadow:var(--fs-shadow); padding:22px 24px; margin-bottom:24px; }
.fsv .fsdt-brief h3{ margin:0 0 4px; font-size:17px; font-weight:800; color:var(--fs-ink); letter-spacing:-.01em; }
.fsv .fsdt-brief p.sub{ margin:0 0 14px; font-size:13px; color:var(--fs-muted); }
.fsv .fsdt-brief textarea{ width:100%; min-height:84px; resize:vertical; border:1px solid var(--fs-line); border-radius:12px; padding:13px 14px; font:500 14px inherit; color:var(--fs-ink); outline:none; transition:.15s; }
.fsv .fsdt-brief textarea:focus{ border-color:rgba(97,93,250,.5); box-shadow:0 0 0 4px rgba(97,93,250,.08); }
.fsv .fsdt-examples{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.fsv .fsdt-ex{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:200px; background:#f4f4fb; color:#43435f; border:0; cursor:pointer; transition:.14s; }
.fsv .fsdt-ex:hover{ background:rgba(97,93,250,.1); color:var(--fs-violet); }
.fsv .fsdt-suggest{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 22px; border:0; border-radius:12px; background:var(--fs-grad); color:#fff; font:700 14px inherit; cursor:pointer; box-shadow:0 12px 26px -14px rgba(97,93,250,.8); }
.fsv .fsdt-suggest:hover{ filter:brightness(1.05); }

.fsv .fsdt-rolesintro{ display:flex; align-items:center; gap:10px; margin:4px 0 16px; }
.fsv .fsdt-rolesintro .ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(97,93,250,.12); color:var(--fs-violet); }
.fsv .fsdt-rolesintro b{ font-size:14px; color:var(--fs-ink); } .fsv .fsdt-rolesintro span{ font-size:12.5px; color:var(--fs-muted); }

.fsv .fsdt-role{ border:1px solid var(--fs-line); border-radius:var(--fs-radius); background:#fff; box-shadow:var(--fs-shadow); padding:18px 20px; margin-bottom:18px; }
.fsv .fsdt-role-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fsv .fsdt-role-head .ic{ width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--fs-grad); color:#fff; font-size:16px; }
.fsv .fsdt-role-head .t b{ display:block; font-size:15px; font-weight:700; color:var(--fs-ink); }
.fsv .fsdt-role-head .t span{ font-size:12.5px; color:var(--fs-muted); }
.fsv .fsdt-role-head .tag{ margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:200px; }
.fsv .fsdt-role-head .tag.human{ background:rgba(97,93,250,.1); color:var(--fs-violet); } .fsv .fsdt-role-head .tag.ai{ background:rgba(35,210,226,.16); color:#0a9bb0; }
.fsv .fsdt-cands{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:620px){ .fsv .fsdt-cands{ grid-template-columns:1fr; } }
.fsv .fsdt-cand{ border:1px solid var(--fs-line); border-radius:12px; padding:13px; transition:.15s; }
.fsv .fsdt-cand:hover{ border-color:rgba(97,93,250,.35); box-shadow:var(--fs-shadow); }
.fsv .fsdt-cand-top{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.fsv .fsdt-cand-top .info{ min-width:0; flex:1; } .fsv .fsdt-cand-top .info b{ display:block; font-size:13.5px; color:var(--fs-ink); }
.fsv .fsdt-cand-top .info span{ display:block; font-size:11.5px; color:var(--fs-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsv .fsdt-fit{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.fsv .fsdt-fit .track{ flex:1; height:6px; border-radius:200px; background:#ececf4; overflow:hidden; }
.fsv .fsdt-fit .fill{ height:100%; border-radius:200px; background:linear-gradient(90deg,#16c43b,#3ad15f); }
.fsv .fsdt-fit .pct{ font-size:11.5px; font-weight:800; color:#0f9b30; }
.fsv .fsdt-cand-foot{ display:flex; align-items:center; gap:8px; }
.fsv .fsdt-cand-foot .rate{ font-size:12px; font-weight:700; color:#43435f; margin-right:auto; }
.fsv .fsdt-add{ height:34px; padding:0 14px; border:0; border-radius:9px; background:var(--fs-violet); color:#fff; font:700 12.5px inherit; cursor:pointer; }
.fsv .fsdt-add:hover{ background:var(--fs-violet-d); } .fsv .fsdt-add.added{ background:rgba(22,196,59,.14); color:#0f9b30; pointer-events:none; }
.fsv .fsdt-view{ height:34px; width:34px; border:1px solid var(--fs-line); border-radius:9px; background:#fff; color:var(--fs-muted); cursor:pointer; }
.fsv .fsdt-view:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); }

/* assembled team panel (sticky sidebar) */
.fsv .fsdt-team{ position:sticky; top:90px; border:1px solid var(--fs-line); border-radius:var(--fs-radius); background:#fff; box-shadow:var(--fs-shadow-lift); overflow:hidden; }
.fsv .fsdt-team-head{ padding:18px 20px 14px; border-bottom:1px solid var(--fs-line); }
.fsv .fsdt-team-head b{ font-size:15px; font-weight:800; color:var(--fs-ink); }
.fsv .fsdt-team-head span{ display:block; font-size:12px; color:var(--fs-muted); margin-top:2px; }
.fsv .fsdt-team-list{ padding:8px 14px; min-height:60px; max-height:340px; overflow-y:auto; }
.fsv .fsdt-team-empty{ padding:26px 10px; text-align:center; font-size:12.5px; color:var(--fs-muted); }
.fsv .fsdt-member{ display:flex; align-items:center; gap:10px; padding:8px 6px; }
.fsv .fsdt-member .info{ flex:1; min-width:0; } .fsv .fsdt-member .info b{ display:block; font-size:13px; color:var(--fs-ink); }
.fsv .fsdt-member .info span{ display:block; font-size:11px; color:var(--fs-muted); }
.fsv .fsdt-member .rm{ width:26px; height:26px; border:0; border-radius:7px; background:#f3f3fb; color:#9b9cb4; cursor:pointer; font-size:11px; }
.fsv .fsdt-member .rm:hover{ background:rgba(255,46,147,.12); color:#ff2e93; }
.fsv .fsdt-team-foot{ padding:16px 20px; border-top:1px solid var(--fs-line); background:#f7f7fb; }
.fsv .fsdt-team-foot .tot{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:14px; }
.fsv .fsdt-team-foot .tot b{ color:var(--fs-ink); }
.fsv .fsdt-create{ width:100%; height:46px; border:0; border-radius:11px; background:var(--fs-grad); color:#fff; font:700 13.5px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.fsv .fsdt-create:hover{ filter:brightness(1.05); } .fsv .fsdt-create:disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.fsv .fsdt-invite{ width:100%; height:42px; margin-top:9px; border:1px solid var(--fs-line); border-radius:11px; background:#fff; color:var(--fs-ink); font:600 13px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.fsv .fsdt-invite:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); } .fsv .fsdt-invite:disabled{ opacity:.45; cursor:not-allowed; }
.fsv .fsdt-note{ display:flex; gap:8px; padding:12px 20px; font-size:11.5px; color:var(--fs-muted); }
.fsv .fsdt-note i{ color:var(--fs-violet); margin-top:1px; }

/* ---- Dream Team: pipeline strip + org-chart view + candidate sources ---- */
.fsv .fsdt-pipeline{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.fsv .fsdt-pseg{ flex:1; min-width:120px; border:1px solid var(--fs-line); border-radius:13px; background:#fff; box-shadow:var(--fs-shadow); padding:13px 15px; }
.fsv .fsdt-pseg b{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--fs-ink); display:flex; align-items:center; gap:7px; }
.fsv .fsdt-pseg b i{ font-size:13px; }
.fsv .fsdt-pseg span{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--fs-muted); }
.fsv .fsdt-pseg.suggested b i{ color:var(--fs-violet); }
.fsv .fsdt-pseg.invited b i{ color:#f5a623; }
.fsv .fsdt-pseg.accepted b i{ color:#16c43b; }
.fsv .fsdt-pseg.contact b i{ color:#0a9bb0; }

.fsv .fsdt-views{ display:inline-flex; background:#fff; border:1px solid var(--fs-line); border-radius:11px; padding:4px; box-shadow:var(--fs-shadow); margin-bottom:18px; gap:2px; }
.fsv .fsdt-views button{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; border:0; border-radius:8px; background:none; color:var(--fs-muted); font:600 13px inherit; cursor:pointer; transition:.15s; }
.fsv .fsdt-views button.sel{ background:var(--fs-grad); color:#fff; }

/* org chart */
.fsv .fsdt-chartwrap{ border:1px solid var(--fs-line); border-radius:var(--fs-radius); background:#fff; box-shadow:var(--fs-shadow); padding:26px 18px 30px; margin-bottom:18px; overflow-x:auto; }
.fsv .fsdt-chart{ display:flex; flex-direction:column; align-items:center; min-width:660px; }
.fsv .fsdt-lead{ display:flex; align-items:center; gap:11px; padding:11px 18px; border-radius:14px; background:var(--fs-grad); color:#fff; box-shadow:0 14px 30px -16px rgba(97,93,250,.85); }
.fsv .fsdt-lead .av{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.fsv .fsdt-lead b{ font-size:14px; font-weight:700; } .fsv .fsdt-lead span{ display:block; font-size:11px; opacity:.85; }
.fsv .fsdt-stem{ width:2px; height:20px; background:var(--fs-line); }
.fsv .fsdt-bus{ position:relative; display:flex; gap:18px; padding-top:20px; }
.fsv .fsdt-bus::before{ content:""; position:absolute; top:0; left:84px; right:84px; height:2px; background:var(--fs-line); }
.fsv .fsdt-onode{ position:relative; width:168px; border:1.5px solid var(--fs-line); border-radius:14px; background:#fff; padding:14px 12px; text-align:center; transition:.18s; }
.fsv .fsdt-onode::before{ content:""; position:absolute; top:-20px; left:50%; width:2px; height:20px; background:var(--fs-line); transform:translateX(-1px); }
.fsv .fsdt-onode .role{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:700; color:var(--fs-muted); margin-bottom:10px; }
.fsv .fsdt-onode .role i{ color:var(--fs-violet); }
.fsv .fsdt-onode .seat{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.fsv .fsdt-onode .seat .ava{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,#615dfa,#41efff); }
.fsv .fsdt-onode .seat b{ font-size:13px; color:var(--fs-ink); }
.fsv .fsdt-onode .ostatus{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:200px; }
.fsv .fsdt-onode .ostatus.invited{ background:rgba(245,166,35,.14); color:#c98a00; }
.fsv .fsdt-onode .ostatus.accepted{ background:rgba(22,196,59,.14); color:#0f9b30; }
/* open seat */
.fsv .fsdt-onode.open{ border-style:dashed; }
.fsv .fsdt-onode .openseat{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.fsv .fsdt-onode .openseat .ring{ width:42px; height:42px; border-radius:50%; border:2px dashed #c9cad8; display:flex; align-items:center; justify-content:center; color:#b6b7cb; font-size:15px; }
.fsv .fsdt-onode .openseat .lbl{ font-size:11.5px; font-weight:700; color:var(--fs-violet); }
.fsv .fsdt-onode .openseat .cnt{ font-size:10.5px; color:var(--fs-muted); }
.fsv .fsdt-onode.filled{ border-color:rgba(22,196,59,.4); }

/* candidate source badge */
.fsv .fsdt-src{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:200px; margin-left:6px; vertical-align:middle; }
.fsv .fsdt-src.network{ background:rgba(97,93,250,.1); color:var(--fs-violet); }
.fsv .fsdt-src.inbound{ background:rgba(255,159,67,.16); color:#c46a00; }
.fsv .fsdt-inboundcta{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:12px; margin-bottom:18px; background:rgba(255,159,67,.08); border:1px solid rgba(255,159,67,.25); font-size:12.5px; color:#a85a00; }
.fsv .fsdt-inboundcta i{ font-size:16px; } .fsv .fsdt-inboundcta b{ color:#8a4a00; }
.fsv .fsdt-inboundcta a{ margin-left:auto; font-weight:700; color:#c46a00; text-decoration:none; white-space:nowrap; }
.fsv .fsdt-member .stat{ font-size:9.5px; font-weight:800; text-transform:uppercase; padding:2px 6px; border-radius:200px; }
.fsv .fsdt-member .stat.invited{ background:rgba(245,166,35,.14); color:#c98a00; }
.fsv .fsdt-member .stat.accepted{ background:rgba(22,196,59,.14); color:#0f9b30; }

/* ============================================================================
   Dream Team — member detail side panel: click a person (org chart or list) →
   slide-in profile + messaging + what they're working on, relevant to the board.
   ============================================================================ */
.fsmp-overlay{ position:fixed; inset:0; z-index:1300; display:none; }
.fsmp-overlay.open{ display:block; }
.fsmp-overlay .scrim{ position:absolute; inset:0; background:rgba(20,20,40,.28); opacity:0; transition:opacity .2s ease; }
.fsmp-overlay.open .scrim{ opacity:1; }
.fsmp{ position:absolute; top:0; right:0; height:100%; width:392px; max-width:100%; background:#fff; box-shadow:-24px 0 60px -28px rgba(20,20,50,.5); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .26s cubic-bezier(.16,1,.3,1); font-family:'Inter',system-ui,sans-serif; }
.fsmp-overlay.open .fsmp{ transform:none; }
.fsmp-head{ position:relative; padding:22px 20px 18px; background:var(--fs-grad); color:#fff; }
.fsmp-head .x{ position:absolute; top:14px; right:14px; width:30px; height:30px; border:0; border-radius:8px; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; font-size:13px; }
.fsmp-head .x:hover{ background:rgba(255,255,255,.3); }
.fsmp-head .who{ display:flex; align-items:center; gap:13px; }
.fsmp-head .ava{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.22); color:#fff; font-weight:800; font-size:18px; }
.fsmp-head .nm b{ display:flex; align-items:center; gap:5px; font-size:18px; font-weight:800; }
.fsmp-head .nm span{ font-size:12.5px; opacity:.9; }
.fsmp-head .chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.fsmp-head .chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:200px; background:rgba(255,255,255,.18); }
.fsmp-body{ flex:1; overflow-y:auto; padding:18px 20px; }
.fsmp-sec{ margin-bottom:20px; }
.fsmp-sec h4{ margin:0 0 11px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--fs-muted); }
.fsmp-facts{ display:flex; flex-direction:column; gap:9px; }
.fsmp-facts .row{ display:flex; align-items:center; gap:9px; font-size:13px; color:#43435f; }
.fsmp-facts .row i{ width:18px; color:var(--fs-violet); }
.fsmp-facts .row .stars{ color:#f5b400; font-size:12px; }
.fsmp-skills{ display:flex; flex-wrap:wrap; gap:6px; }
.fsmp-skill{ font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:200px; background:#f4f4fb; color:#43435f; }
.fsmp-task{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--fs-line); border-radius:11px; margin-bottom:8px; }
.fsmp-task .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.fsmp-task .t{ flex:1; min-width:0; } .fsmp-task .t b{ display:block; font-size:13px; color:var(--fs-ink); }
.fsmp-task .t span{ font-size:11px; color:var(--fs-muted); }
.fsmp-board{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:rgba(97,93,250,.06); border:1px solid rgba(97,93,250,.18); font-size:13px; color:#43435f; }
.fsmp-board i{ color:var(--fs-violet); font-size:15px; } .fsmp-board b{ color:var(--fs-ink); }
/* chat */
.fsmp-chat{ border:1px solid var(--fs-line); border-radius:14px; overflow:hidden; }
.fsmp-chat-thread{ max-height:180px; overflow-y:auto; padding:12px; background:#fafafe; display:flex; flex-direction:column; gap:9px; }
.fsmp-msg{ max-width:82%; padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.5; }
.fsmp-msg.them{ align-self:flex-start; background:#fff; border:1px solid var(--fs-line); color:var(--fs-ink); border-bottom-left-radius:4px; }
.fsmp-msg.me{ align-self:flex-end; background:var(--fs-grad); color:#fff; border-bottom-right-radius:4px; }
.fsmp-warn{ margin:0; padding:9px 12px; font-size:11.5px; line-height:1.45; color:#c01f6d; background:rgba(255,46,147,.08); border-top:1px solid rgba(255,46,147,.2); display:none; gap:7px; }
.fsmp-warn.show{ display:flex; }
.fsmp-compose{ display:flex; align-items:flex-end; gap:7px; padding:9px 10px; border-top:1px solid var(--fs-line); background:#fff; }
.fsmp-compose textarea{ flex:1; resize:none; height:38px; max-height:90px; border:1px solid var(--fs-line); border-radius:10px; padding:9px 11px; font:500 13px 'Inter',system-ui,sans-serif; color:var(--fs-ink); outline:none; }
.fsmp-compose textarea:focus{ border-color:rgba(97,93,250,.5); } .fsmp-compose textarea.bad{ border-color:rgba(255,46,147,.6); }
.fsmp-send{ width:38px; height:38px; flex:0 0 auto; border:0; border-radius:10px; background:var(--fs-grad); color:#fff; cursor:pointer; }
.fsmp-foot{ display:flex; gap:9px; padding:14px 20px; border-top:1px solid var(--fs-line); }
.fsmp-foot button{ flex:1; height:42px; border-radius:11px; font:700 12.5px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; }
.fsmp-foot .prof{ border:1px solid var(--fs-line); background:#fff; color:var(--fs-ink); } .fsmp-foot .prof:hover{ border-color:rgba(97,93,250,.4); color:var(--fs-violet); }
.fsmp-foot .sched{ border:0; background:var(--fs-grad); color:#fff; }
/* make people clickable */
.fsv .fsdt-cand-top{ cursor:pointer; border-radius:8px; padding:3px; margin:-3px -3px 6px; transition:background .14s; }
.fsv .fsdt-cand-top:hover{ background:#f6f6fc; }
.fsv .fsdt-onode .seat{ cursor:pointer; }
@media (max-width:560px){ .fsmp{ width:100%; } }

/* ---- Assemble (Dream Team): project-type select + collaboration-tier filter ---- */
.fsv .fsdt-field{ margin-bottom:13px; }
.fsv .fsdt-field label{ display:block; font-size:12px; font-weight:700; color:#43435f; margin-bottom:6px; }
.fsv .fsdt-select{ width:100%; height:44px; border:1px solid var(--fs-line); border-radius:11px; padding:0 14px; font:500 14px inherit; color:var(--fs-ink); background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%238a8aa6' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center; -webkit-appearance:none; appearance:none; cursor:pointer; outline:none; transition:.15s; }
.fsv .fsdt-select:focus{ border-color:rgba(97,93,250,.5); box-shadow:0 0 0 4px rgba(97,93,250,.08); }
.fsv .fsdt-collabrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.fsv .fsdt-collabrow .lbl{ font-size:12.5px; font-weight:700; color:#43435f; }
.fsv .fsdt-collab{ display:inline-flex; background:#fff; border:1px solid var(--fs-line); border-radius:11px; padding:4px; box-shadow:var(--fs-shadow); gap:2px; }
.fsv .fsdt-collab button{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border:0; border-radius:8px; background:none; color:var(--fs-muted); font:600 12.5px inherit; cursor:pointer; transition:.15s; }
.fsv .fsdt-collab button:hover{ color:var(--fs-ink); }
.fsv .fsdt-collab button.sel{ background:var(--fs-grad); color:#fff; }
.fsv .fsdt-collab button i{ font-size:11px; }
.fsv .fsdt-collabbadge{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:200px; margin-left:6px; vertical-align:middle; }
.fsv .fsdt-collabbadge.free{ background:rgba(22,196,59,.13); color:#0f9b30; }
.fsv .fsdt-collabbadge.paid{ background:rgba(97,93,250,.1); color:var(--fs-violet); }
.fsv .fsdt-collabbadge.premium{ background:rgba(245,180,0,.16); color:#c98a00; }
.fsv .fsdt-cand.hide{ display:none; }
.fsv .fsdt-norole{ padding:10px 12px; border:1px dashed var(--fs-line); border-radius:10px; font-size:12px; color:var(--fs-muted); text-align:center; }

/* ---- Assemble: shared modal (invite + create board) + cleaner candidate card ---- */
.fsasm-overlay{ position:fixed; inset:0; z-index:1250; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,20,40,.42); }
.fsasm-overlay.open{ display:flex; }
.fsasm{ width:500px; max-width:100%; max-height:calc(100vh - 56px); overflow-y:auto; background:#fff; border-radius:18px; box-shadow:0 30px 70px -20px rgba(20,20,50,.55); font-family:'Inter',system-ui,sans-serif; }
.fsasm-head{ display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--fs-line); }
.fsasm-head .av{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,#615dfa,#41efff); }
.fsasm-head .t b{ display:block; font-size:16px; font-weight:800; color:var(--fs-ink); }
.fsasm-head .t span{ font-size:12.5px; color:var(--fs-muted); }
.fsasm-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:#9b9cb4; cursor:pointer; font-size:14px; }
.fsasm-body{ padding:18px 22px 22px; }
.fsasm-field{ margin-bottom:15px; }
.fsasm-field > label{ display:block; font-size:12px; font-weight:700; color:#43435f; margin-bottom:6px; }
.fsasm-field input[type=text], .fsasm-field select, .fsasm-field textarea{ width:100%; border:1px solid var(--fs-line); border-radius:11px; padding:11px 13px; font:500 14px inherit; color:var(--fs-ink); outline:none; transition:.15s; background:#fff; }
.fsasm-field textarea{ min-height:84px; resize:vertical; }
.fsasm-field input:focus, .fsasm-field select:focus, .fsasm-field textarea:focus{ border-color:rgba(97,93,250,.5); box-shadow:0 0 0 4px rgba(97,93,250,.08); }
.fsasm-field textarea.bad{ border-color:rgba(255,46,147,.6); }
.fsasm-seg{ display:flex; gap:7px; flex-wrap:wrap; }
.fsasm-seg button{ height:36px; padding:0 14px; border:1px solid var(--fs-line); border-radius:9px; background:#fff; color:#43435f; font:600 12.5px inherit; cursor:pointer; transition:.14s; display:inline-flex; align-items:center; gap:6px; }
.fsasm-seg button i{ font-size:11px; }
.fsasm-seg button.sel{ border-color:transparent; background:var(--fs-grad); color:#fff; }
.fsasm-half{ display:flex; gap:12px; } .fsasm-half > *{ flex:1; }
.fsasm-warn{ display:none; gap:8px; margin:0 0 14px; padding:10px 13px; border-radius:11px; background:rgba(255,46,147,.08); border:1px solid rgba(255,46,147,.25); font-size:12px; line-height:1.5; color:#c01f6d; }
.fsasm-warn.show{ display:flex; }
.fsasm-preview{ padding:12px 14px; border-radius:12px; background:#f7f7fb; border:1px solid var(--fs-line); margin-bottom:15px; }
.fsasm-preview .h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--fs-muted); margin-bottom:8px; }
.fsasm-preview .row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#43435f; padding:3px 0; }
.fsasm-preview .row i{ width:16px; color:var(--fs-violet); }
.fsasm-preview .avs{ display:inline-flex; } .fsasm-preview .avs span{ width:22px; height:22px; border-radius:50%; border:2px solid #fff; margin-left:-7px; font-size:8px; font-weight:700; color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.fsasm-go{ width:100%; height:46px; border:0; border-radius:12px; background:var(--fs-grad); color:#fff; font:700 14px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.fsasm-go:hover{ filter:brightness(1.05); }
.fsasm-note{ display:flex; gap:8px; margin-top:12px; font-size:11.5px; color:var(--fs-muted); } .fsasm-note i{ color:var(--fs-violet); margin-top:1px; }
/* cleaner fit line: source as a subtle icon, no big badge */
.fsv .fsdt-fit .srcicon{ font-size:11px; }
.fsv .fsdt-fit .srcicon.network{ color:var(--fs-violet); } .fsv .fsdt-fit .srcicon.inbound{ color:#c46a00; }
.fsv .fsdt-fit .inbtag{ font-size:10.5px; font-weight:700; color:#c46a00; }