/* 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; }
.fslh-logo { height: 48px; width: auto; display: block; }
.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: #8a8aa6;
  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: #9b9cb4; font-size: 11px;
  font-weight: 600; display: flex; align-items: center; gap: 3px; }

/* ---- 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: #8a8aa6;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.fslh-ic:hover { background: none; color: #ff2e93; }
.fsmsg>summary.fslh-ic,.fsnotif>summary.fslh-ic,.fslh-ic.fslh-theme{font-size:24px}
.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: #8a8aa6; margin: 0 0 8px; }
.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: #8a8aa6; }
.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: #8a8aa6; }
/* 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: #8a8aa6; }
.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: #8a8aa6; 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: #9b9cb4; 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 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: #9b9cb4;
  --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: #8a8aa6; 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,.humhub-modal,#globalModal,.humhub-flash,.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 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, .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:#9b9cb4; }
.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:#9b9cb4; }
.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; } }

/* 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)}

/* ringalign-0719: slim global scrollbars 3px, "Create New" purple #615dfa app-wide (replaces theme #7a13f0/5px); scrollbar-width gated to Firefox so webkit width is honored in Chrome */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#615dfa;border-radius:10px}
@layer base{::-webkit-scrollbar-thumb:hover{background:#615dfa !important}}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:#615dfa transparent}}