/* NET-LIGHT-TOKENS (ruling 351) — the shell's faint/alert light<->dark pair.
LIGHT: same hue and saturation, the minimum lightness that clears WCAG AA 4.5:1 on every
light surface the shell paints (#ffffff #fdfdfd #eef0f9 #f4f4fb #f3f3fb).
DARK: today's literal, byte for byte — no dark pixel moves.
Every call site below reads the var with its light value as the fallback, so a page that
somehow renders without this sheet still gets the passing colour, never an inherited one. */
:root{--fsn-faint:#6a6a8c;--fsn-faint-2:#6b6b8b;--fsn-faint-3:#6c6c7b;--fsn-faint-4:#6a6b8d;--fsn-alert:#d71e24;}
html.fs-dark,body.fs-dark,html[data-theme="dark"],body[data-theme="dark"]{--fsn-faint:#8a8aa6;--fsn-faint-2:#8a8aa5;--fsn-faint-3:#9a9aa6;--fsn-faint-4:#9b9cb4;--fsn-alert:#e5484d;}
/* FocalShift Ai Network Hub — brand treatments that replace Vikinger's off-brand stock imagery.
The cheesy gaming-collage cover (img/cover/*.jpg) is swapped for the FocalShift signature
gradient (cyan #41efff -> violet #615dfa, the same gradient used on the XP bar + avatar rings)
with a faint concentric-ring "focal shift" motif. Beats the inline background via !important. */
.navigation-widget-cover,
.navigation-widget-cover.liquid,
.profile-header-cover,
.cover {
background-image:
radial-gradient(120% 140% at 14% 16%, rgba(65,239,255,.55) 0%, rgba(65,239,255,0) 44%),
radial-gradient(130% 150% at 86% 88%, rgba(97,93,250,.6) 0%, rgba(97,93,250,0) 48%),
linear-gradient(125deg, #5b57ef 0%, #6f5bf6 40%, #39c8e8 100%) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative;
}
.navigation-widget-cover > img,
.profile-header-cover > img,
.cover > img { display: none !important; }
/* card covers (Space cards, member previews, video boxes) + page hero banners — same brand gradient */
.user-preview-cover, .user-preview-cover.liquid,
.video-box-cover-image, .video-box-cover-image.liquid,
.product-preview-image, .product-preview-image.liquid,
.marketplace-category-cover, .marketplace-category-cover.liquid,
.section-banner {
background-image:
radial-gradient(120% 150% at 16% 14%, rgba(65,239,255,.5) 0%, rgba(65,239,255,0) 46%),
radial-gradient(130% 150% at 84% 90%, rgba(97,93,250,.62) 0%, rgba(97,93,250,0) 50%),
linear-gradient(130deg, #5b57ef 0%, #6f5bf6 42%, #39c8e8 100%) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative;
}
.user-preview-cover > img,
.video-box-cover-image > img { display: none !important; }
/* the off-brand cartoon illustration in the page hero — drop it; the gradient + title carry it */
.section-banner-icon { display: none !important; }
/* concentric "focal shift" ripple motif — offset rings, soft-light, very subtle */
.navigation-widget-cover::after,
.profile-header-cover::after,
.user-preview-cover::after,
.section-banner::after {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
mix-blend-mode: soft-light;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Ccircle cx='372' cy='96' r='30'/%3E%3Ccircle cx='372' cy='96' r='66'/%3E%3Ccircle cx='372' cy='96' r='104'/%3E%3Ccircle cx='372' cy='96' r='146'/%3E%3Ccircle cx='372' cy='96' r='190'/%3E%3C/g%3E%3C/svg%3E")
right center / cover no-repeat;
}
/* FocalShift LOCKED network header — self-contained port for the Vikinger prototype.
Reproduces the live MC top bar (logo + search + XP bar + language + hex-avatar dropdown)
WITHOUT Tailwind/Preline, scoped so nothing leaks into the Vikinger body. The Vikinger
`.header` wrapper (80px, fixed, z-10000) is reused so the page's content offset is unchanged;
only its violet skin is overridden to the locked white bar. Avatars: HEX here only. */
/* ---- override Vikinger's violet bar -> locked white bar (keep 80px / fixed / offset) ---- */
.header.fslh {
display: flex; align-items: center; justify-content: space-between;
background: #fff !important; padding: 0 26px;
box-shadow: 0 1px 0 0 rgba(94,92,154,.10), 0 6px 24px -18px rgba(94,92,154,.45);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.fslh *, .fslh *::before, .fslh *::after { box-sizing: border-box; }
/* ---- left: logo + search ---- */
.fslh-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.fslh-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.fslh-logo { height: 48px; width: auto; display: block; max-width: none; }
.fslh-mark { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
border-radius: 10px; background: linear-gradient(135deg,#615dfa,#41efff); }
.fslh-mark svg { width: 19px; height: 19px; }
.fslh-word { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #2c2c44; }
.fslh-word b { color: #615dfa; font-weight: 800; }
.fslh-toggle { width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; color: var(--fsn-faint,#6a6a8c);
font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fslh-toggle:hover { background: #f3f3fb; color: #615dfa; }
.fslh-search { position: relative; }
.fslh-search input { width: 320px; height: 40px; border: 1px solid #ececf4; background: #f7f7fb; border-radius: 10px;
padding: 0 40px 0 16px; font-size: 13.5px; color: #3e3f5e; font-family: inherit; outline: none; }
.fslh-search input::placeholder { color: #a6a7bd; }
.fslh-search input:focus { border-color: #d8d8ee; background: #fff; }
.fslh-search .k { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 26px; min-width: 26px;
padding: 0 7px; border-radius: 7px; background: #fff; border: 1px solid #ececf4; color: var(--fsn-faint-4,#6a6b8d); font-size: 11px;
font-weight: 600; display: flex; align-items: center; gap: 3px; }
.fslh-sres { position: absolute; left: 0; top: calc(100% + 8px); width: 380px; max-height: 440px; overflow-y: auto;
background: #fff; border: 1px solid #ececf4; border-radius: 13px; box-shadow: 0 20px 50px -18px rgba(40,38,90,.42);
padding: 8px; z-index: 90; }
.fslh-sres b.g { display: block; margin: 8px 6px 4px; font: 800 10px Inter,sans-serif; letter-spacing: .08em;
text-transform: uppercase; color: var(--fsn-faint-4,#6a6b8d); }
.fslh-sres a.r { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; text-decoration: none; }
.fslh-sres a.r:hover { background: #f5f5fb; }
.fslh-sres a.r i { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: rgba(97,93,250,.12);
color: #615dfa; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.fslh-sres a.r .t { min-width: 0; }
.fslh-sres a.r .t b { display: block; font: 600 13px Inter,sans-serif; color: #23233a; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.fslh-sres a.r .t span { display: block; font: 400 11.5px Inter,sans-serif; color: var(--fsn-faint-2,#6b6b8b); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.fslh-sres .none { padding: 14px 8px; text-align: center; font: 500 12.5px Inter,sans-serif; color: var(--fsn-faint-2,#6b6b8b); }
.fs-dark .fslh-sres { background: #14182a; border-color: #262b40; }
.fs-dark .fslh-sres a.r:hover { background: rgba(97,93,250,.16); }
.fs-dark .fslh-sres a.r .t b { color: #e6e7f0; }
/* ---- right cluster ---- */
.fslh-right { display: flex; align-items: center; gap: 14px; }
/* moon + flag are a tight pair sitting just left of the avatar */
.fslh-theme + .fslh-fl { margin-left: -8px; }
.fslh-fl + .fslh-dd { margin-left: 2px; }
.fslh-icons { display: flex; align-items: center; gap: 4px; }
.fslh-ic { position: relative; width: 38px; height: 38px; border: 0; background: none; border-radius: 50%; color: var(--fsn-faint,#6a6a8c);
font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.fslh-ic:hover { background: none; color: #4cbb17; }
.fslh-ic .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
background: #ff2e93; border: 1.5px solid #fff; }
/* XP bar (LEVEL · RANK + gradient next-level fill) */
.fslh-xp { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 4px 6px; border-radius: 8px;
text-decoration: none; }
.fslh-xp:hover { background: rgba(127,127,150,.08); }
.fslh-xp b { color: #3e3f5e; font-weight: 700; font-size: 10px; letter-spacing: .04em; line-height: 1; }
.fslh-tr { height: 6px; width: 100%; border-radius: 200px; background: rgba(127,127,150,.18); overflow: hidden; }
.fslh-fi { height: 100%; border-radius: 200px; background: linear-gradient(90deg,#41efff,#615dfa); display: block; }
/* language flag */
.fslh-fl { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: block;
border: .5px solid rgba(127,127,150,.5); cursor: pointer; }
.fslh-fl svg { width: 18px; height: 18px; display: block; }
/* hex avatar (journey ring + level badge) */
.fslh-hex { position: relative; display: inline-flex; line-height: 0; width: 42px; cursor: pointer; background: none; border: 0; padding: 0; }
.fslh-hex .lv { position: absolute; left: 50%; bottom: -7%; transform: translateX(-50%); width: 42%; height: 38%;
clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: #fff; display: flex; align-items: center; justify-content: center; }
.fslh-hex .lv b { width: 84%; height: 84%; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
background: #45437f; color: #fff; font-weight: 700; font-size: 9px; display: flex; align-items: center; justify-content: center; }
/* ---- dropdown ---- */
.fslh-dd { position: relative; }
.fslh-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 460px; max-width: calc(100vw - 32px);
background: #fff; border: 1px solid #ececf4; border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(45,45,80,.45);
padding: 18px; z-index: 12000; display: none; }
.fslh-dd.open .fslh-menu { display: block; }
.fslh-mhead { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; }
.fslh-mname { font-weight: 700; color: #2c2c44; font-size: 15px; margin: 0 0 2px; }
.fslh-mrole { font-size: 12px; color: var(--fsn-faint,#6a6a8c); margin: 0 0 8px; }
.fslh-mrole-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.fslh-cogql{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:#615dfa;flex:none;text-decoration:none;transition:background .15s,color .15s}
.fslh-cogql svg{width:22px !important;height:22px !important;stroke-width:1.6 !important}
.fslh-cogql:hover{background:none;color:#4cbb17}
html.fs-dark .fslh-cogql{color:#8f8bff}
html.fs-dark .fslh-cogql:hover{background:none;color:#4cbb17}
/* avdrop-0729 (Hans): name + verification check + cog on ONE line. The cog keeps its
link, its colors and its kelly hover — only its box shrinks to sit inline. */
.fslh-nmline{display:inline-flex;align-items:center;gap:2px;min-width:0}
.fslh-nmline .fslh-mname{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fslh-cogql.fslh-cogin{width:33px;height:33px;border-radius:9px;margin-left:2px}
.fslh-cogql.fslh-cogin svg{width:24px !important;height:24px !important}.fslh-menu::before{content:"";position:absolute;top:-7px;right:16px;width:12px;height:12px;background:#fff;border-left:1px solid #ececf4;border-top:1px solid #ececf4;transform:rotate(45deg);border-top-left-radius:3px}html.fs-dark .fslh-menu::before{background:#1a1b26;border-color:#2b2c3e}
html.fs-dark .fslh-mname{color:#fff}
.fslh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fslh-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11px; padding: 3px 9px; border-radius: 200px; }
.fslh-chip.rank { color: #5b57e0; background: rgba(97,93,250,.10); }
.fslh-chip.mas { color: #0a8a98; background: rgba(35,210,226,.13); }
.fslh-setup { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #615dfa; text-decoration: none; flex-shrink: 0; }
.fslh-setup span { font-size: 10px; font-weight: 700; color: var(--fsn-faint,#6a6a8c); }
.fslh-stats { display: flex; gap: 8px; padding: 14px 0; border-top: 1px solid #f0f0f7; }
.fslh-stat { flex: 1; text-align: center; background: #f7f7fb; border-radius: 10px; padding: 9px 4px; }
.fslh-stat b { display: block; font-weight: 800; color: #2c2c44; font-size: 16px; }
.fslh-stat span { font-size: 11px; color: var(--fsn-faint,#6a6a8c); }
/* dark mode (pbp1 row 14) — hexagon-dropdown stat boxes were white in dark */
.fs-dark .fslh-stat { background: #23243a; }
.fs-dark .fslh-stat b { color: #eef0fb; }
.fs-dark .fslh-stat span { color: #8f91ac; }
/* badge shelf — the user's recent achievement artwork (real PNGs), in the network-wide dropdown */
.fslh-badges { padding: 14px 0 4px; border-top: 1px solid #f0f0f7; }
.fslh-badges-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.fslh-badges-head span { font-size: 12px; font-weight: 700; color: var(--fsn-faint,#6a6a8c); }
.fslh-badges-head a { font-size: 12px; font-weight: 600; color: var(--fsls-accent, #615dfa); text-decoration: none; }
.fslh-badges-row { display: flex; align-items: center; gap: 8px; }
.fslh-badges-row img { width: 34px; height: 37px; object-fit: contain; flex: 0 0 auto;
filter: drop-shadow(0 4px 8px rgba(45,45,80,.16)); transition: transform .12s ease; }
.fslh-badges-row img:hover { transform: translateY(-2px) scale(1.06); }
.fslh-badges-more { margin-left: 2px; display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; border-radius: 50%; background: #f3f3fb; color: #6e6f8a; font-size: 12px;
font-weight: 700; text-decoration: none; }
.fslh-badges-more:hover { background: rgba(97,93,250,.1); color: #615dfa; }
.fslh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 14px 0; border-top: 1px solid #f0f0f7; }
.fslh-coltitle { padding: 0 10px 6px; font-size: 10.5px; font-weight: 700; color: var(--fsn-faint,#6a6a8c); text-transform: uppercase; letter-spacing: .07em; }
.fslh-link { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px;
color: #3e3f5e; text-decoration: none; }
.fslh-link i { width: 17px; text-align: center; color: var(--fsn-faint-4,#6a6b8d); font-size: 14px; }
.fslh-link:hover { background: rgba(97,93,250,.07); color: #615dfa; }
.fslh-link:hover i { color: #615dfa; }
.fslh-link small { margin-left: auto; color: #b6b7cb; font-size: 11.5px; }
.fslh-soon { margin-left: auto; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #ff2e93; background: rgba(255,46,147,.12); padding: 2px 6px; border-radius: 200px; }
.fslh-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #f0f0f7; }
.fslh-out { color: #ff2e93; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.fslh-admin { color: #615dfa; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; text-decoration: none; }
@media (max-width: 1100px){ .fslh-search input { width: 200px; } .fslh-xp { display: none; } }
@media (max-width: 760px){ .fslh-search, .fslh-icons { display: none; } }
/* FocalShift Network Hub — left rail, ported from the StackPosts network sidebar used across the
FocalShift Ai tools (PULSE/Influencer/Inbound). Self-contained + scoped (.fsls-), no Tailwind/Alpine.
Behaviour: 70px icon rail that hover-expands to 236px (smooth), logo header, icon-box menu items
with FocalShift-accent active state, uppercase section labels that fade in when expanded.
Replaces Vikinger's .navigation-widget; the Vikinger body content keeps its own layout. */
:root {
--fsls-bg: #ffffff;
--fsls-text: #5b5b76;
--fsls-muted: var(--fsn-faint-4,#6a6b8d);
--fsls-accent: #615dfa;
--fsls-accent-rgb: 97, 93, 250;
--fsls-border: #e9e9f2;
--fsls-w: 70px;
--fsls-w-open: 236px;
}
.fsls {
position: fixed; inset: 80px auto 0 0; z-index: 140; /* sits BELOW the locked 80px header */
width: var(--fsls-w); min-width: var(--fsls-w);
background: var(--fsls-bg);
border-right: 1px solid var(--fsls-border);
border-top: 1px solid var(--fsls-border);
display: flex; flex-direction: column;
overflow: visible;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
transition: width .52s cubic-bezier(.16,1,.3,1), min-width .52s cubic-bezier(.16,1,.3,1);
}
.fsls:hover, .fsls.pinned { width: var(--fsls-w-open); min-width: var(--fsls-w-open);
box-shadow: 0 24px 50px -30px rgba(45,45,80,.4); }
.fsls * { box-sizing: border-box; }
/* slim top holding the pin toggle (the FocalShift logo lives in the locked header above) */
.fsls-head { position: relative; height: 14px; }
/* collapse/pin toggle on the right edge */
.fsls-toggle { position: absolute; right: -12px; top: 26px;
width: 24px; height: 24px; border-radius: 7px; border: 1px solid #e2e2ee; background: #fff;
color: var(--fsn-faint,#6a6a8c); font-size: 8px; display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 6px 14px -12px rgba(15,23,42,.3); }
.fsls-toggle:hover { color: var(--fsls-accent); border-color: #cfcfe6; }
/* scroll area */
.fsls-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px; scrollbar-width: none; }
.fsls-scroll::-webkit-scrollbar { display: none; }
/* sections */
.fsls-sec + .fsls-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fsls-border); }
.fsls-label { height: 18px; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--fsls-muted); white-space: nowrap; overflow: hidden;
opacity: 0; transition: opacity .14s ease; }
.fsls:hover .fsls-label, .fsls.pinned .fsls-label { opacity: 1; }
.fsls-label::after { content: '•••'; color: #c9cad8; letter-spacing: normal; }
.fsls:hover .fsls-label::after, .fsls.pinned .fsls-label::after { content: ''; }
/* items */
.fsls-item { position: relative; display: flex; align-items: center; height: 40px; border-radius: 12px;
text-decoration: none; color: var(--fsls-text); padding-left: 45px; padding-right: 12px;
transition: background-color .15s ease, color .15s ease; }
/* plain icons — NO border/box around them (matches the other FocalShift apps) */
.fsls-ic { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
color: #6e6f8a; font-size: 18px; transition: color .12s ease; }
.fsls-tx { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: 13.5px; font-weight: 500; opacity: 0; transform: translateX(-6px);
transition: opacity .14s ease, transform .14s ease; }
.fsls:hover .fsls-tx, .fsls.pinned .fsls-tx { opacity: 1; transform: none; }
.fsls-badge { margin-left: 6px; flex-shrink: 0; font-size: 7px; font-weight: 800; letter-spacing: .02em;
text-transform: uppercase; padding: 2px 4px; border-radius: 5px; opacity: 0; transition: opacity .14s ease;
color: var(--fsls-accent); background: rgba(var(--fsls-accent-rgb), .08); border: 1px solid rgba(var(--fsls-accent-rgb), .16); }
.fsls:hover .fsls-badge, .fsls.pinned .fsls-badge { opacity: 1; }
.fsls-count { margin-left: auto; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 200px;
background: #ff2e93; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center;
justify-content: center; opacity: 0; transition: opacity .14s ease; }
.fsls:hover .fsls-count, .fsls.pinned .fsls-count { opacity: 1; }
.fsls-item:hover { color: #2c2c44; }
.fsls-item:hover .fsls-ic { color: var(--fsls-accent); }
/* active = full-row pill (the icon just recolors — no box) */
.fsls-item.active { background: rgba(var(--fsls-accent-rgb), .12); color: var(--fsls-accent); }
.fsls-item.active .fsls-ic { color: var(--fsls-accent); }
.fsls-item.active .fsls-tx { font-weight: 600; color: var(--fsls-accent); }
/* Create CTA — accent pill (collapses to a circle button) */
.fsls-create { display: flex; align-items: center; height: 44px; margin: 2px 0 12px; border-radius: 14px;
background: linear-gradient(120deg, #615dfa, #41efff); color: #fff; text-decoration: none;
box-shadow: 0 14px 26px -16px rgba(var(--fsls-accent-rgb), .9); overflow: hidden;
transition: border-radius .3s ease; }
.fsls-create-ic { width: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.fsls-create-tx { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
opacity: 0; transform: translateX(-6px); transition: opacity .14s ease, transform .14s ease; }
.fsls:hover .fsls-create-tx, .fsls.pinned .fsls-create-tx { opacity: 1; transform: none; }
.fsls:not(:hover):not(.pinned) .fsls-create { width: 46px; margin-left: 0; border-radius: 50%; }
.fsls-create:hover { filter: brightness(1.04); }
/* push Vikinger's own left nav out and offset the in-flow body content to clear the fixed rail
(the fixed locked header + fixed right chat widget ignore body padding, so only the feed shifts) */
.navigation-widget.navigation-widget-desktop { display: none !important; }
body { padding-left: 0; box-sizing: border-box; } /* rail clearance handled once by #layout-content margin-left below (was double-offset → big left gap) */
/* hub-layout.css — structural glue to host the ported .fslh header + .fsls rail inside HumHub.
The prototype's fs-locked-header.css / fs-leftrail.css only skin the chrome; Vikinger's CORE css
supplied the .header positioning + body offsets. We re-supply those here for HumHub, and shift
HumHub's #layout-content to clear the fixed 70px rail + fixed 64px header. */
:root{ --fs-h:64px; --fs-rail:70px; }
/* base position for the locked header (fs-locked-header.css only restyles it) */
.header.fslh{
position:fixed; top:0; left:0; right:0; height:var(--fs-h); z-index:1100;
}
/* the rail sits below the header */
.fsls{ inset:var(--fs-h) auto 0 0 !important; }
/* HumHub chrome we replaced — hide the originals if present */
#topbar-first, #topbar-second{ display:none !important; }
/* offset HumHub content to clear the fixed header + rail */
body{ padding-top:0 !important; }
#layout-content{
margin-left:var(--fs-rail) !important; padding-top:calc(var(--fs-h) + 18px) !important;
transition:margin-left .2s ease;
}
/* Our focalshift view templates ALSO wrap their markup in #layout-content, which nests inside
HumHub's own #layout-content. Without this, the rail margin-left (70px), the chat padding-right
(76px) and the header padding-top all get applied TWICE — that was the big left gap + the
header-to-hero gap. Neutralize the nested duplicate so each offset is applied exactly once. */
#layout-content #layout-content{ margin-left:0 !important; padding-right:0 !important; padding-top:0 !important; }
#layout-content > .container{ max-width:1180px !important; }
/* Vikinger feed proportions: feed | widgets */
#layout-content .layout-content-container.col-lg-8{ flex:0 0 64% !important; max-width:64% !important; }
#layout-content .layout-sidebar-container.col-lg-4{ flex:0 0 36% !important; max-width:36% !important; }
/* harness-only: suppress dynamic-XHR modal + error toast for clean shots */
.modal,.modal-backdrop,#globalModal,.alert-fixed,.growl,.toast-container{ display:none !important; }
@media (max-width:991px){
.fsls{ display:none !important; }
#layout-content{ margin-left:0 !important; }
}
/* ============================================================================
Network app-switcher (next to the logo) — navigate the whole FocalShift Ai network.
Active app = purple highlight + a glowing "you're here" dot. Same on every header.
============================================================================ */
.fsnav { position: relative; }
.fsnav-btn { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:#5b5b76; font-size:17px; cursor:pointer; transition:background .15s, color .15s; }
.fsnav-btn:hover { background:transparent; color:#4cbb17; } .fsnav.open .fsnav-btn { background:rgba(var(--fsls-accent-rgb),0.1); color:var(--fsls-accent); }
.fsnav-menu { position:absolute; top:calc(100% + 10px); left:0; z-index:1200; width:290px; padding:8px; border-radius:16px; background:#fff; border:1px solid #ececf4; box-shadow:0 28px 60px -22px rgba(20,20,50,.4); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.fsnav.open .fsnav-menu { opacity:1; visibility:visible; transform:none; }
.fsnav-title { padding:8px 10px 6px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fsn-faint-4,#6a6b8d); }
.fsnav-item { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:11px; text-decoration:none; transition:background .14s ease; }
.fsnav-item:hover { background:#f6f6fc; }
.fsnav-ic { display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto; border-radius:9px; background:color-mix(in srgb, var(--c) 15%, transparent); color:var(--c); font-size:15px; }
.fsnav-tx { display:flex; flex-direction:column; min-width:0; }
.fsnav-tx b { font-size:12.5px; font-weight:700; color:#2c2c44; line-height:1.2; text-transform:uppercase; letter-spacing:.04em; }
.fsnav-tx small { font-size:11px; color:var(--fsn-faint-4,#6a6b8d); }
.fsnav-dot { margin-left:auto; width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:transparent; }
.fsnav-item.active { background:rgba(var(--fsls-accent-rgb),0.1); }
.fsnav-item.active .fsnav-tx b { color:var(--fsls-accent); }
.fsnav-item.active .fsnav-tx small { color:var(--fsls-accent); opacity:.7; }
.fsnav-item.active .fsnav-dot { background:#16c43b; animation:fsnav-pulse 1.8s infinite; }
@keyframes fsnav-pulse { 0%{box-shadow:0 0 0 0 rgba(22,196,59,.55);} 70%{box-shadow:0 0 0 7px rgba(22,196,59,0);} 100%{box-shadow:0 0 0 0 rgba(22,196,59,0);} }
@media (max-width:560px){ .fsnav-menu { width:264px; } }
/* multi-account switcher (#35) */
.fslh-accts{padding:12px 0 10px;border-top:1px solid #f0f0f7}
.fslh-acct{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;font-size:13.5px;color:#3e3f5e;cursor:pointer}
.fslh-acct i{width:17px;text-align:center;color:var(--fsn-faint-4,#6a6b8d);font-size:14px}
.fslh-acct:hover{background:rgba(97,93,250,.07)}
.fslh-acct.on{cursor:default}
.fslh-acct.on i{color:#16c43b}
.fslh-acct small{margin-left:auto;color:#16c43b;font-size:11px;font-weight:700}
.fslh-acct-x{margin-left:auto;background:none;border:0;color:#b6b7cb;font-size:15px;cursor:pointer;padding:0 4px;border-radius:6px}
.fslh-acct-x:hover{color:#ff2e93}
.fs-dark .fslh-accts{border-top-color:rgba(255,255,255,.05)}
.fs-dark .fslh-acct{color:#c9cbe0}
/* r111: hexagon-dropdown dividers — very faint in dark mode (Hans) */
.fs-dark .fslh-stats,.fs-dark .fslh-badges,.fs-dark .fslh-cols,.fs-dark .fslh-foot{border-top-color:rgba(255,255,255,.05)}
/* ============================================================================
FocalShift Ai Network Hub — shared component library (fs-components.css)
Faithful Vikinger UI reproduction, re-skinned to the FocalShift Ai 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:var(--fsn-faint,#6a6a8c);
--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; }
/* DM voice notes (#34) */
.snc-mic,.snc-clip{background:none;border:1px solid var(--fs-line,#d9dcec);border-radius:8px;cursor:pointer;padding:7px 9px;color:inherit}
.snc-fcard{display:flex;align-items:center;gap:8px;font:600 12.5px Inter,sans-serif;text-decoration:none;color:inherit;border:1px solid var(--fs-line,#d9dcec);border-radius:10px;padding:8px 11px;max-width:230px}
.snc-fcard small{font-weight:500;opacity:.6;white-space:nowrap}
.snc-fcard .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snc-img{max-width:210px;max-height:170px;border-radius:10px;display:block}
.snc-mic.rec{color:#ff5d7e;border-color:#ff5d7e;animation:sncrec 1.2s infinite}
@keyframes sncrec{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.snc-mic.rec{animation:none}}
.snc-vdur{font:600 10.5px Inter;opacity:.7;margin-left:6px}
/* 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 Ai 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:var(--fsn-faint,#6a6a8c); 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:var(--fsn-faint-4,#6a6b8d); 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:var(--fsn-faint-4,#6a6b8d); }
.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:var(--fsn-faint,#6a6a8c); }
.fsap-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:var(--fsn-faint-4,#6a6b8d); 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:var(--fsn-faint,#6a6a8c); }
.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:var(--fsn-faint,#6a6a8c); }
.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:var(--fsn-faint-4,#6a6b8d); }
.fsvote-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:var(--fsn-faint-4,#6a6b8d); 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:var(--fsn-faint,#6a6a8c); }
.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:var(--fsn-faint-4,#6a6b8d); }
.fsvote-row .who span{ display:block; font-size:11px; color:var(--fsn-faint-4,#6a6b8d); }
.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:var(--fsn-faint-4,#6a6b8d); margin-top:2px; }
.fsmeet-head .x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:#f3f3fb; color:var(--fsn-faint-4,#6a6b8d); 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:var(--fsn-faint-4,#6a6b8d); 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:var(--fsn-faint-4,#6a6b8d); }
.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:var(--fsn-faint,#6a6a8c); }
.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 FocusBoard + 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:var(--fsn-faint-4,#6a6b8d); 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,") 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:var(--fsn-faint-4,#6a6b8d); 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; }
/* ============================================================================
FocalShift Ai · shared MC page components (Vikinger / Network Hub system)
Linked once by _mc_shellA.php so every redesigned page is pixel-consistent.
Namespace: .fp- (FocalShift Ai page). Builds on the .vk token system in the shell.
============================================================================ */
/* ---- page head ---- */
.fp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.fp-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kk,#615dfa);margin-bottom:10px}
.fp-kicker .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:200px;background:color-mix(in srgb,var(--kk,#615dfa) 12%,#fff);color:var(--kk,#615dfa);text-transform:none;letter-spacing:0;font-size:11px}
.fp-head h1{margin:0 0 5px;font-size:25px;font-weight:800;letter-spacing:-.02em;color:#2c2c44}
.fp-head p{margin:0;font-size:13.5px;color:var(--fsn-faint,#6a6a8c);max-width:680px;line-height:1.55}
.fp-act{display:flex;gap:9px;align-items:center}
.fp-ghost{height:40px;padding:0 16px;border:1px solid var(--vl);border-radius:10px;background:#fff;color:#5b5b78;font:700 13px inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.fp-ghost:hover{border-color:#cfd0e6;color:#2c2c44}
/* ---- KPI strip (auto-fit, accent left-bar, icon, value, label, delta) ---- */
.fp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:18px}
.fp-kpi{position:relative;border:1px solid var(--vl);border-radius:14px;padding:15px 16px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.fp-kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--kc,#615dfa)}
.fp-kpi .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kc,#615dfa);background:color-mix(in srgb,var(--kc,#615dfa) 13%,#fff);margin-bottom:11px}
.fp-kpi .n{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1;color:#2c2c44}
.fp-kpi .l{font-size:11px;color:var(--vm);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-top:5px}
.fp-kpi .d{position:absolute;top:15px;right:14px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:200px}
.fp-kpi .d.up{color:#0f9b30;background:rgba(22,196,59,.12)}
.fp-kpi .d.down{color:#c01f6d;background:rgba(255,46,147,.1)}
.fp-kpi .d.flat{color:var(--fsn-faint-4,#6a6b8d);background:#f4f4fb}
/* ---- card + card header ---- */
.fp-card{border:1px solid var(--vl);border-radius:14px;padding:20px;background:#fff;box-shadow:var(--sh)}
.fp-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.fp-ch h2{margin:0;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:#2c2c44;display:flex;align-items:center;gap:9px}
.fp-ch h2 i{color:var(--vv)}
.fp-ch .sub{font-size:12px;color:var(--vm)}
.fp-ch a.more{font-size:12.5px;font-weight:700;color:var(--vv);text-decoration:none}
/* ---- table tools (search + filter chips above a table) ---- */
.fp-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fp-search{flex:1;min-width:180px;height:38px;border:1px solid var(--vl);border-radius:10px;padding:0 13px 0 36px;font:500 13px inherit;color:var(--vi);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238a8aa6' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center;outline:none}
.fp-chiprow{display:inline-flex;gap:6px}
.fp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#5b5b78;background:#f4f4fb;padding:8px 13px;border-radius:200px;cursor:pointer;border:0}
.fp-chip.on{background:var(--grad);color:#fff}
/* ---- meters / progress bars ---- */
.fp-bar{height:7px;border-radius:200px;background:#eef0f6;overflow:hidden}
.fp-bar i{display:block;height:100%;border-radius:200px;background:linear-gradient(90deg,#41efff,#615dfa)}
.fp-meter{padding:10px 0;border-top:1px solid #f3f3fb}
.fp-meter:first-child{border-top:0}
.fp-meter .t{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px}
.fp-meter .t b{font-weight:700;color:#2c2c44}.fp-meter .t span{color:var(--vm)}
/* ---- rating stars ---- */
.fp-stars{display:inline-flex;gap:2px;color:#f5b400;font-size:12px}
.fp-rating-big{display:flex;align-items:center;gap:14px}
.fp-rating-big .num{font-size:40px;font-weight:800;letter-spacing:-.03em;color:#2c2c44;line-height:1}
/* ---- two-column page grid ---- */
.fp-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:18px;align-items:start}
.fp-col{display:flex;flex-direction:column;gap:18px}
/* ---- list rows (generic) ---- */
.fp-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid #f3f3fb}
.fp-row:first-child{border-top:0}
.fp-row .tx{flex:1;min-width:0}
.fp-row .tx b{font-size:13px;font-weight:700;color:#2c2c44}
.fp-row .tx small{display:block;font-size:11.5px;color:var(--vm)}
/* ---- empty/help ---- */
.fp-note{font-size:12px;color:var(--fsn-faint-4,#6a6b8d);display:flex;align-items:center;gap:7px;margin-top:10px}
@media(max-width:1100px){.fp-grid{grid-template-columns:1fr}}
/* ============================================================================
BALANCED BRAND PALETTE — Network Hub (Vikinger): violet #615dfa + cyan #41efff
brand pair, used purposefully. White cards + neutral text dominate; the brand
gradient carries featured tiles, bars and buttons; green/amber/red reserved for
status only. Not rainbow, not mono — the Network Hub balance. (Hans 2026-06-15)
============================================================================ */
:root{--fs-violet:#615dfa;--fs-cyan:#41efff;--fs-grad:linear-gradient(135deg,#615dfa,#41efff);--fs-soft:rgba(97,93,250,.12)}
/* KPI: NO blue left accent bar — instead a very-light pink glow around each box */
.fp-kpi::after,.dh-kpi::after,.pg-kpi::after{display:none!important}
.fp-kpi,.dh-kpi,.pg-kpi{border-color:#edeef5!important;box-shadow:0 0 0 1px rgba(94,92,154,.04),0 7px 20px -12px rgba(94,92,154,.22)!important;cursor:pointer;transition:transform .14s,box-shadow .14s}
.fp-kpi:hover,.dh-kpi:hover,.pg-kpi:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(94,92,154,.07),0 14px 30px -14px rgba(94,92,154,.34)!important}
/* actionable KPI: clickable card -> drill deeper. "View →" affordance reveals on hover */
a.fp-kpi{text-decoration:none;color:inherit;display:block}
.fp-kpi .kgo{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:11px;font-weight:700;color:var(--fs-violet);opacity:.55;transition:opacity .14s,gap .14s}
.fp-kpi:hover .kgo{opacity:1;gap:8px}
/* ============================================================================
ASK MAVEN — global AI assistant bubble (lower-right, every page)
============================================================================ */
/* Ask Maven FAB — hummingbird encased in a hexagon (very light glow, no fill).
Hover: a pill opens out to the right saying "Ask Maven"; the hexagon stays as the left cap.
Leave: condenses back into the hexagon with the bird centered. */
.fp-kpi .ic,.dh-kpi .ic,.pg-kpi .ic{color:var(--fs-violet)!important;background:var(--fs-soft)!important}
/* kickers */
.fp-kicker,.dh-kicker,.pg-kicker,.ad-kicker{color:var(--fs-violet)!important}
.fp-kicker .pill,.pg-kicker .pill{background:var(--fs-soft)!important;color:var(--fs-violet)!important}
/* featured tiles -> brand-gradient chips (violet->cyan), white glyph */
.dh-tool .ti,.ad-gh .gi,.ad-card .ci,.pg-tie .th .ti{background:var(--fs-grad)!important;color:#fff!important}
.dh-tool:hover,.ad-card:hover{border-color:#cdcbf7!important}
.dh-topen,.ad-card .go{color:var(--fs-violet)!important}
.ad-kicker .lock{background:#f1f1f7!important;color:#6c6c86!important}
/* meters / progress bars -> brand gradient */
.fp-bar i,.pg-bar i{background:var(--fs-grad)!important}
/* ============================================================================
TONE-DOWN PASS (Hans 2026-06-15): less blue, neutral left rail, no icon chips,
and magenta reserved as the gamification/achievement accent (differentiation).
============================================================================ */
/* LEFT ICON RAIL (#sidebar-tabs) -> neutral gray, kill the rotating gradient glow */
#sidebar-tabs a.active .sidebar-icon{background-color:#ececf1!important;color:#52526a!important}
#sidebar-tabs a.active:before,.tab-item li a.active:before{display:none!important}
/* ACTIVE MENU ITEM (.tab-item panels) -> deep-purple TEXT only, no box/border/bg.
#sidebar-tab id prefix beats the high-specificity Dreams AI active rules. */
#sidebar-tab .tab-item li a.active{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;overflow:visible!important}
#sidebar-tab .tab-item li a.active,#sidebar-tab .tab-item li a.active i,#sidebar-tab .tab-item li a.active span{color:#5711f6!important;font-weight:700!important}
/* HOVER on menu items -> text highlight only, NO background box (match active).
Kills the persistent tinted hover panel the Dreams AI shell paints. */
#sidebar-tab .tab-item ul > li > a:hover,
.sidebar-twocol.sidebar .sidebar-right .tab-item ul > li > a:hover{background:transparent!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important}
#sidebar-tab .tab-item ul > li > a:hover,
#sidebar-tab .tab-item ul > li > a:hover i,
#sidebar-tab .tab-item ul > li > a:hover span,
.sidebar-twocol.sidebar .sidebar-right .tab-item ul > li > a:hover{color:#5711f6!important}
/* KPI ICONS -> drop the tinted background chip; just the glyph */
.fp-kpi .ic,.dh-kpi .ic,.pg-kpi .ic{background:transparent!important;width:auto!important;height:auto!important;font-size:18px!important;margin-bottom:9px!important;box-shadow:none!important}
/* MAGENTA = gamification / achievements (the pop of pink, away from the blue) */
.dh-jbar i{background:linear-gradient(90deg,#ff2e93,#ff79b6)!important}
.fslh-xp .fslh-fi{background:linear-gradient(90deg,#5b57ef,#6f5bf6 45%,#41efff)!important} /* quest bar = Vikinger violet→cyan (matches the popover) */
/* ===== header progress bar — gamification XP / goal dual-mode (Goals feature) ===== */
/* keep the fs-chrome COLUMN layout: title-row on top (label + toggle to its right), full-width bar centered below */
.fslh-xp[data-fs-headerbar]{align-items:stretch}
.fslh-xprow{display:flex;align-items:center;justify-content:space-between;gap:8px;line-height:1}
.fslh-xplabel{text-decoration:none;display:inline-flex;align-items:center;min-width:0;flex:1}
.fslh-xplabel b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.06em;font-weight:800;font-size:9.5px;color:#3e3f5e}
.fslh-xplabel.fslh-nogoal b{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:10px;color:var(--fsn-faint-4,#6a6b8d)} /* "No current goals to monitor." — calm, informational, sentence case */
.fslh-xp[data-fs-headerbar]{padding:3px 7px}
.fslh-xp[data-fs-headerbar] .fslh-tr{height:5px}
.fslh-xptoggle{width:20px;height:20px;border:0;background:transparent;color:var(--fsn-faint-4,#6a6b8d);cursor:pointer;border-radius:6px;font-size:10.5px;display:flex;align-items:center;justify-content:center;flex:0 0 20px}
.fslh-xptoggle:hover{background:rgba(127,127,150,.18);color:#615dfa}
.fslh-fi.goal{background:linear-gradient(90deg,#08a86b,#2bd46a 52%,#7af0c0)!important} /* goal bar = richer green gradient (deep green → emerald → mint) */
/* header-bar hover popover: the toggling heading + bar (gamification vs goal) */
.fslh-xp[data-fs-headerbar]{position:relative}
.fslh-pop{position:absolute;top:calc(100% + 10px);right:0;width:248px;background:#fff;border:1px solid #ececf4;border-radius:13px;box-shadow:0 16px 38px -12px rgba(40,40,70,.30);padding:14px 15px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .15s,transform .15s,visibility .15s;z-index:80;text-align:left}
.fslh-xp[data-fs-headerbar]:hover .fslh-pop{opacity:1;visibility:visible;transform:none}
.fslh-pop-h{font-size:12px;font-weight:800;color:#2c2c44;line-height:1.35;margin-bottom:10px}
.fslh-pop-bar{height:7px;border-radius:200px;background:#eef0f6;overflow:hidden;margin-bottom:9px}
.fslh-pop-bar span{display:block;height:100%;border-radius:200px;background:linear-gradient(90deg,#5b57ef,#6f5bf6 45%,#41efff);transition:width .35s}
.fslh-pop.goal .fslh-pop-bar span{background:linear-gradient(90deg,#08a86b,#2bd46a 52%,#7af0c0)}
.fslh-pop-sub{font-size:11.5px;color:var(--fsn-faint,#6a6a8c);margin-bottom:11px}
.fslh-pop-cta{font-size:11.5px;font-weight:700;color:#5711f6;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.fslh-pop-cta:hover{gap:8px}
/* ============================================================================
FOCALSHIFT VISUAL ENGINE — _charts.php component styles + draw-in animation.
Pure-SVG charts, brand-matched. Each page picks the widgets it needs so no
two pages read the same. Respects prefers-reduced-motion.
========================================================================== */
.fc{overflow:visible}
@keyframes fcDraw{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}
@keyframes fcRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fcGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fc-draw{stroke-dasharray:600;animation:fcDraw 1.1s cubic-bezier(.5,0,.2,1) forwards}
.fc-ring{animation:fcDraw 1s ease-out forwards}
.fc-rise{transform-origin:bottom;animation:fcRise .7s cubic-bezier(.4,0,.2,1) both}
.fc-grow{transform-origin:left;animation:fcGrow .8s cubic-bezier(.4,0,.2,1) both}
@media(prefers-reduced-motion:reduce){.fc-draw,.fc-ring,.fc-rise,.fc-grow{animation:none;stroke-dasharray:none}}
/* radial gauge */
.fc-radial{margin:0 auto}
/* donut + legend */
.fc-donut{display:flex;align-items:center;gap:18px}
.fc-donut.has-legend{justify-content:flex-start}
.fc-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.fc-li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#5b5b78}
.fc-li .dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.fc-li .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-li b{color:#2c2c44;font-weight:700}
/* horizontal bars */
.fc-bars{display:flex;flex-direction:column;gap:13px}
.fc-bar .fc-bl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.fc-bar .fc-bl span{color:#5b5b78;font-weight:600}.fc-bar .fc-bl b{color:#2c2c44;font-weight:700}
.fc-bt{height:8px;border-radius:200px;background:#eef0f6;overflow:hidden}
.fc-bt i{display:block;height:100%;border-radius:200px}
/* columns */
.fc-cols{display:flex;align-items:flex-end;gap:7px}
.fc-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}
.fc-colbar{width:100%;max-width:34px;border-radius:7px 7px 4px 4px;min-height:3px}
.fc-cx{font-size:10.5px;color:var(--fsn-faint-4,#6a6b8d);font-weight:600}.fc-cx.on{color:#615dfa;font-weight:800}
/* heatmap */
.fc-heat{display:grid;gap:4px}
.fc-hcol{display:flex;flex-direction:column;gap:4px}
.fc-hc{display:block;width:100%;aspect-ratio:1;border-radius:3px;min-height:11px}
/* funnel */
.fc-funnel{display:flex;flex-direction:column;gap:12px}
.fc-fn .fc-fnh{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.fc-fn .fc-fnh span{color:#5b5b78;font-weight:600}
.fc-fn .fc-fnh b{color:#2c2c44;font-weight:800}
.fc-fn .fc-fnh em{font-style:normal;font-weight:700;color:#0f9b30;font-size:11px;margin-left:4px}
.fc-fnbar{height:24px;border-radius:7px;min-width:26px}
/* stat tile (richer KPI) */
.fc-stat{position:relative;border:1px solid var(--vl);border-radius:14px;padding:14px 15px 8px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.fc-st-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.fc-st-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,#fff);flex:0 0 30px}
.fc-st-l{font-size:11px;color:var(--vm);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-st-d{font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:200px;white-space:nowrap}
.fc-st-d.up{color:#0f9b30;background:rgba(22,196,59,.12)}
.fc-st-d.down{color:#c01f6d;background:rgba(255,46,147,.1)}
.fc-st-n{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#2c2c44;line-height:1}
/* leaderboard */
.fc-lb{display:flex;flex-direction:column}
.fc-lbr{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid #f3f3fb}
.fc-lbr:first-child{border-top:0}
.fc-lbn{width:20px;flex:0 0 20px;text-align:center;font-size:12px;font-weight:800;color:#b6b7c9}
.fc-lbn.r1{color:#d4a017}.fc-lbn.r2{color:#9aa0ad}.fc-lbn.r3{color:#cd7f32}
.fc-lba{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.fc-lbx{flex:1;min-width:0}.fc-lbx b{display:block;font-size:13px;font-weight:700;color:#2c2c44}
.fc-lbx small{font-size:11px;color:var(--vm)}
.fc-lbt{height:5px;border-radius:200px;background:#eef0f6;overflow:hidden;margin-top:5px}
.fc-lbt i{display:block;height:100%;border-radius:200px}
.fc-lbs{font-size:13.5px;font-weight:800;color:#2c2c44;white-space:nowrap}
/* ---- collapsible secondary rail: hover the icon rail to open (stays open); pink X juts out to close ---- */
.mc-collapse-btn,.mc-raildot{display:none!important} /* kill the old chevron button + earlier pink dot */
.sidebar-twocol.sidebar .sidebar-right{transition:width .24s cubic-bezier(.4,0,.2,1),opacity .2s,padding .24s}
.page-wrapper{transition:margin-left .24s ease}
/* pink X close button — juts out of the menu's top-right corner */
.mc-railx{position:absolute;top:9px;right:-11px;width:22px;height:22px;border-radius:50%;background:#ff2e93;border:2px solid #fff;color:#fff;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:35;padding:0;box-shadow:0 5px 13px -3px rgba(255,46,147,.55);transition:background .15s,transform .15s}
.mc-railx:hover{background:#ff5fae;transform:scale(1.14)}
/* collapsed: reflow content via the --sidenav-width var + hide the menu panel (out-specifies the base width rule) */
body.mc-collapsed{--sidenav-width:82px}
body.mc-collapsed .two-col-sidebar .sidebar-twocol.sidebar .sidebar-right{width:0!important;min-width:0!important;padding-left:0!important;padding-right:0!important;opacity:0;pointer-events:none;overflow:hidden}
body.mc-collapsed .mc-railx{display:none} /* X hidden while collapsed (menu closed) */
@media(max-width:1100px){.mc-railx{display:none}}
/* ============================================================================
DARK / NIGHT MODE — toggled by the header moon/sun (.fslh-theme); class
`fs-dark` on , persisted (localStorage fs_theme), applied pre-paint.
Styles (does not redesign) the locked assets + every Vikinger component.
============================================================================ */
.fs-dark body{background:#0e0f17 !important;color:#e9e9f2}
.fs-dark .vk{--vi:#e9e9f2;--vm:#9a9ab8;--vl:#2b2c3e;--sh:0 1px 2px rgba(0,0,0,.4),0 16px 34px -28px rgba(0,0,0,.7);color:#e9e9f2}
.fs-dark .vk code{background:#23243a;color:#9fb4ff}
/* cards / tiles / panels → dark surface */
.fs-dark .fp-card,.fs-dark .v-card,.fs-dark .fc-stat,.fs-dark .fp-kpi,.fs-dark .dh-kpi,.fs-dark .pg-kpi,.fs-dark .intg-card,.fs-dark .gl-stat,.fs-dark .gl-path,.fs-dark .tw-proj,.fs-dark .se-note-amber,.fs-dark .ib-launch a,.fs-dark .nw-quick a,.fs-dark .aff-stats div,.fs-dark .au-ev .cat,.fs-dark .qs-plan,.fs-dark .fc-lba{background:#1a1b26 !important;border-color:#2b2c3e !important}
.fs-dark .fp-card,.fs-dark .v-card{box-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 36px -26px rgba(0,0,0,.8) !important}
.fs-dark .gl-aff{background:linear-gradient(135deg,#16241d,#13212a) !important;border-color:#1f3a2e !important}
.fs-dark .fp-kpi:hover,.fs-dark .dh-kpi:hover,.fs-dark .pg-kpi:hover{box-shadow:0 0 0 1px rgba(150,150,200,.12),0 16px 32px -16px rgba(0,0,0,.9) !important}
/* text */
.fs-dark .fp-head h1,.fs-dark .vk .pagehead h1,.fs-dark .fp-ch h2,.fs-dark .fc-st-n,.fs-dark .gl-stat b,.fs-dark .fp-kpi .n,.fs-dark .pg-kpi .n,.fs-dark h1,.fs-dark h2,.fs-dark h4,.fs-dark h5{color:#f2f2fa !important}
.fs-dark .muted,.fs-dark .fp-head p,.fs-dark .fp-ch .sub,.fs-dark .fp-note,.fs-dark .fc-st-l,.fs-dark small{color:#9a9ab8 !important}
.fs-dark b,.fs-dark strong,.fs-dark td,.fs-dark .fp-row b,.fs-dark .au-ev .tx b,.fs-dark .tw-proj b,.fs-dark .fc-lbx b,.fs-dark .se-chk b,.fs-dark .ur-role b{color:#e9e9f2}
/* tables */
.fs-dark table th{background:#222433 !important;color:#c7c7de !important;border-color:#2b2c3e !important}
.fs-dark table,.fs-dark td,.fs-dark th,.fs-dark tr{border-color:#262738 !important}
.fs-dark tr.rowlink:hover{background:#20212f !important}
/* inputs / chips / bars */
.fs-dark .fp-search,.fs-dark .v-input,.fs-dark input,.fs-dark select,.fs-dark textarea,.fs-dark .gl-g input,.fs-dark .gl-g select,.fs-dark .aff-link input{background:#14151f !important;border-color:#2b2c3e !important;color:#e9e9f2 !important}
.fs-dark .fp-chip{background:#23243a !important;color:#b8b8d0 !important}
.fs-dark .fp-bar,.fs-dark .fc-bt,.fs-dark .pg-bar,.fs-dark .fc-lbt,.fs-dark .gl-pbar,.fs-dark .fc-heat,.fs-dark .fslh-pop-bar,.fs-dark .tw-proj .bt,.fs-dark .se-chk+.se-chk{background:#262738}
.fs-dark .fp-row,.fs-dark .fp-meter,.fs-dark .au-ev,.fs-dark .nw-sig,.fs-dark .se-chk,.fs-dark .ur-role,.fs-dark .fc-lbr,.fs-dark .cal-up,.fs-dark .cal-call,.fs-dark .gl-step,.fs-dark .op-rec,.fs-dark .ib-insight,.fs-dark .pg-bk,.fs-dark .pg-step{border-color:#262738 !important}
.fs-dark .fc-donut svg circle:first-child,.fs-dark .fc-area line{stroke:#262738}
/* header (locked asset — dark styled) */
.fs-dark .fslh,.fs-dark .navbar-header{background:#13141d !important;border-color:#262738 !important}
.fs-dark .fslh-search input{background:#1b1c28 !important;border-color:#2b2c3e !important;color:#e9e9f2 !important}
.fs-dark .fslh-ic,.fs-dark .fslh-link{color:#b8b8d0}
.fs-dark .fslh-menu,.fs-dark .fsnav-menu{background:#1a1b26 !important;border-color:#2b2c3e !important}
.fs-dark .fsnav-item:hover .fsnav-tx b,html.fs-dark .fsnav-item:hover .fsnav-tx b,.dark .fsnav-item:hover .fsnav-tx b{color:#1d1e2b !important}
.fs-dark .fsnav-item:hover .fsnav-tx small,html.fs-dark .fsnav-item:hover .fsnav-tx small,.dark .fsnav-item:hover .fsnav-tx small{color:#5b5b76 !important}
.fs-dark .fslh-xplabel b{color:#cdcde0}
/* left rail (locked asset — dark styled) */
.fs-dark .sidebar.sidebar-twocol,.fs-dark .sidebar-right,.fs-dark .sidebar-left{background:#13141d !important;border-color:#262738 !important}
.fs-dark .mc-wshead b,.fs-dark .menu-title{color:#e9e9f2 !important}
.fs-dark #sidebar-tab .tab-item li a{color:#9a9ab8}
.fs-dark #sidebar-tab .tab-item li a:hover,.fs-dark #sidebar-tab .tab-item li a.active{color:#a99bff !important}
.fs-dark #sidebar-tabs a.active .sidebar-icon{background:#2b2c3e !important;color:#cdcde0 !important}
.fs-dark .byok-required,.fs-dark [class*="bg-white"]{}
/* keep brand gradients/heroes vivid; just darken their plain neighbors */
.fs-dark .fc-st-ic,.fs-dark .fp-kpi .ic{background:#23243a !important}
/* dark mode — catch inline-styled hardcoded light surfaces + dark ink (mainly the custom landing) */
.fs-dark .vk [style*="2c2c44"]{color:#ececf4 !important}
.fs-dark .vk [style*="background:#fff"],.fs-dark .vk [style*="background:#ffffff"],.fs-dark .vk [style*="background:white"]{background:#1a1b26 !important}
.fs-dark .vk [style*="#f4f4fb"],.fs-dark .vk [style*="#f7f7fb"],.fs-dark .vk [style*="#fbfbff"]{background:#20212f !important}
.fs-dark .hx-opp,.fs-dark .dh-card,.fs-dark [class*="-tie"]{background:#1a1b26 !important;border-color:#2b2c3e !important}
.fs-dark .fc-st-n,.fs-dark .gl-plan .hero{color:#f2f2fa !important}
/* dark mode — structural catch-all: beats page-level