/* ============================================================================
   FocalShift · shared MC page components (Vikinger / Network Hub system)
   Linked once by _mc_shellA.php so every redesigned page is pixel-consistent.
   Namespace: .fp-  (FocalShift 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:#8a8aa6;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:#9b9cb4;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:#9b9cb4;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. */
.mvn-fab{position:fixed;right:22px;bottom:22px;z-index:120}
.mvn-open{display:flex;align-items:center;height:60px;padding:0;border:0;background:transparent;cursor:pointer}
.mvn-hex{width:60px;height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(closest-side,rgba(97,93,250,.22),rgba(97,93,250,.08) 58%,rgba(97,93,250,0));filter:drop-shadow(0 5px 15px rgba(97,93,250,.42));transition:filter .2s}
.mvn-fab:hover .mvn-hex{filter:drop-shadow(0 12px 26px rgba(97,93,250,.52))}
.mvn-hex .mvn-ic{width:44px;height:44px;object-fit:contain;transition:transform .25s}
.mvn-fab:hover .mvn-hex .mvn-ic{transform:scale(1.08)}
/* the pill: subtle-square radius, translucent violet (hexagon-tone) bg, PINK text */
.mvn-fab .lbl{position:relative;z-index:1;display:flex;align-items:center;height:36px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;color:#ff2e93;font:800 12.5px/1 Inter,system-ui,sans-serif;background:rgba(97,93,250,.16);border:0;border-radius:0 9px 9px 0;box-shadow:0 9px 22px -14px rgba(97,93,250,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:translateX(-16px);padding:0;transition:max-width .32s cubic-bezier(.4,0,.2,1),opacity .2s .03s,padding .32s}
.mvn-fab:hover .lbl{max-width:124px;opacity:1;padding:0 15px 0 22px}
/* dismiss X — appears on hover at the hummingbird's top-right; hides Maven until the next page load */
.mvn-dismiss{position:absolute;top:-2px;left:42px;width:19px;height:19px;border-radius:50%;background:#2c2c44;color:#fff;border:2px solid #f4f5fb;font-size:8.5px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .15s,transform .15s,background .15s;z-index:6}
.mvn-fab:hover .mvn-dismiss{opacity:1;transform:scale(1);pointer-events:auto}
.mvn-dismiss:hover{background:#ff2e93}
.mvn-panel{position:fixed;right:24px;bottom:24px;z-index:121;width:392px;max-width:calc(100vw - 32px);height:564px;max-height:calc(100vh - 96px);background:#fff;border:1px solid #ececf4;border-radius:20px;box-shadow:0 34px 80px -22px rgba(40,38,90,.5);display:none;flex-direction:column;overflow:hidden;font-family:Inter,system-ui,sans-serif}
.mvn-panel.open{display:flex}
.mvn-panel.expanded{width:760px;height:calc(100vh - 56px)}
.mvn-hd{display:flex;align-items:center;gap:12px;padding:15px 14px 14px;border-bottom:1px solid #f1f1f8}
.mvn-hd .av{width:40px;height:40px;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.mvn-hd .av svg,.mvn-hd .av img{width:38px;height:38px;object-fit:contain}
.mvn-hd .id{flex:1;min-width:0}
.mvn-hd .id b{display:block;font-size:15px;font-weight:800;color:#2c2c44;letter-spacing:-.01em}
.mvn-hd .id small{font-size:11.5px;color:#16c43b;display:inline-flex;align-items:center;gap:5px}
.mvn-hd .id small::before{content:"";width:7px;height:7px;border-radius:50%;background:#16c43b}
.mvn-hd button{width:32px;height:32px;border:0;background:transparent;color:#9b9cb4;border-radius:8px;cursor:pointer;font-size:15px}
.mvn-hd button:hover{background:#f3f3fb;color:#615dfa}
.mvn-body{flex:1;overflow-y:auto;padding:18px 15px;background:#fafafe}
.mvn-msg{display:flex;gap:10px}
.mvn-msg .av{width:30px;height:30px;background:transparent;flex:0 0 30px;display:flex;align-items:center;justify-content:center}
.mvn-msg .av svg,.mvn-msg .av img{width:30px;height:30px;object-fit:contain}
.mvn-bub{background:#fff;border:1px solid #eef0f6;border-radius:5px 15px 15px 15px;padding:12px 14px;font-size:13.5px;color:#3a3a52;line-height:1.55}
.mvn-bub b{color:#2c2c44;font-weight:700}
.mvn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mvn-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#5b57ef;background:#fff;border:1px solid #e3e1fb;padding:8px 12px;border-radius:200px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.mvn-chip:hover{background:#615dfa;color:#fff;border-color:#615dfa}
.mvn-chip i{font-size:11px}
.mvn-ft{padding:12px;border-top:1px solid #f1f1f8;background:#fff}
.mvn-input{display:flex;align-items:center;gap:8px;border:1px solid #e6e6f2;border-radius:14px;padding:6px 6px 6px 14px}
.mvn-input input{flex:1;border:0;outline:0;font:500 14px Inter,sans-serif;color:#2c2c44;background:transparent}
.mvn-input .snd{width:36px;height:36px;border:0;border-radius:10px;background:#615dfa;color:#fff;cursor:pointer;flex:0 0 36px;font-size:14px}
.mvn-trust{font-size:10.5px;color:#a9aac0;text-align:center;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:5px}
@media(max-width:480px){.mvn-fab .lbl{display:none}.mvn-panel{right:8px;bottom:8px;width:calc(100vw - 16px);height:calc(100vh - 76px)}}
.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:#9b9cb4}  /* "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:#9b9cb4;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:#8a8aa6;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:#9b9cb4;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 <html>, 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 .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"]{}
/* Maven (locked asset — dark styled) */
.fs-dark .mvn-panel{background:#1a1b26 !important;border-color:#2b2c3e !important;color:#e9e9f2}
.fs-dark .mvn-bub,.fs-dark .mvn-chip,.fs-dark .mvn-input input{background:#23243a !important;color:#e9e9f2 !important;border-color:#2b2c3e !important}
.fs-dark .mvn-hd{border-color:#262738 !important}
/* 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 <style> hardcoded neutrals (ink #2c2c44 / muted / white cards) */
.fs-dark .vk .v-card,.fs-dark .vk [class*="hx-"][class*="card"],.fs-dark .vk .gl-card,.fs-dark .vk .se-card{background:#1a1b26 !important;border-color:#2b2c3e !important}
.fs-dark .vk .big,.fs-dark .vk .stat-n,.fs-dark .vk .num,.fs-dark .vk .val{color:#f4f4fb !important}
.fs-dark .vk .row{color:#bdbdd4 !important;border-top-color:#2b2c3e !important}
.fs-dark .vk .row b,.fs-dark .vk .row strong{color:#f4f4fb !important}
.fs-dark .vk .hx-money .big,.fs-dark .vk .hx-money .row,.fs-dark .vk .hx-money .row b{color:#f4f4fb !important}
.fs-dark .vk .hx-money .row{color:#bdbdd4 !important}
.fs-dark .vk h1,.fs-dark .vk h2,.fs-dark .vk h3,.fs-dark .vk h4{color:#f2f2fa !important}
.fs-dark .vk .v-card p,.fs-dark .vk .fp-card p,.fs-dark .vk .se-chk small,.fs-dark .vk .ur-role small{color:#9a9ab8 !important}
.fs-dark .vk .v-card .ci,.fs-dark .vk .se-chk .ci{background:#20212f !important}
/* keep gradient hero text white regardless of the above */
.fs-dark .vk [class*="hero"] h1,.fs-dark .vk [class*="hero"] h2,.fs-dark .vk [class*="hero"] p,.fs-dark .vk .hx-hero *{color:inherit !important}
/* dark mode — opportunity card (light gradient + dark text in light theme) */
.fs-dark .vk .hx-opp{background:linear-gradient(135deg,#221c3a,#172a33) !important;border-color:#34355099 !important}
.fs-dark .vk .hx-opp-h b{color:#b9a6ff !important}
.fs-dark .vk .hx-opp-tx b{color:#f4f4fb !important}
.fs-dark .vk .hx-opp-tx p{color:#b3b3cf !important}
/* dark mode — sidebar BYOK promo card (Tailwind bg-white/text-gray-900) */
.fs-dark .sidebar-footer{background:#1a1b26 !important;border-color:#2b2c3e !important}
.fs-dark .sidebar-footer .text-gray-900{color:#f4f4fb !important}
.fs-dark .sidebar-footer p{color:#b3b3cf}
.fs-dark .sidebar-footer .bg-white{background:#20212f !important;border-color:#34355a !important;color:#f4f4fb !important}
.fs-dark .sidebar-footer a.bg-white:hover{background:var(--vv) !important;color:#fff !important}

/* Apps Page Refinement r1 (Hans 22:36 recording, 00:00-00:55 / A01-A02): with the rail collapsed
   the content stretched full-width and KPI cards (AI credits / day streak / badges / sales / leads)
   became too wide. Cap the wrapper at the expanded-state content width so the column rhythm,
   gutters, and card proportions never change — only the horizontal offset does. */
body.mc-collapsed .page-wrapper{max-width:calc(100vw - 303px)!important}