/* Famestate UI refinement — Quicpanel (roneybhai1).
   Visual layer only: no markup contracts, no ids/classes that JS binds to.
   Every value below is either already in the theme or derived from it:
     ink #0c315c (body colour)   muted #7296b2 (label colour)
     soft #f2f4fa (input fill)   primary #1979c8 (.style-text-primary)
     accent #ff0000 (theme red)
   Cards keep the original Quicpanel drop shadow; only spacing, type and the
   shell chrome are normalised here. *//* ============================================================ 1. CARDS Quicpanel's original 20px radius and borderless fill, but the drop is split into an even ring plus a downward pass so the shadow reads on all four corners instead of only under the bottom edge. */ /* Quicpanel's original card: 20px radius, no border, and the opaque drop split into an even ring plus a downward pass so it reads on all four corners. */ .body .fs-no .card{
  padding: var(--fs-pad-card);
  border: 0;
  border-radius: 20px;
  box-shadow:
    0 0 14px -4px rgba(0, 0, 0, .55),
    0 4px 15px -3px rgba(0, 0, 0, .85);
}/* ============================================================ 2. SHELL Sidebar + top bar are one dark chrome, the way a panel you sit in all day reads: the content stays light, the navigation recedes. Surfaces and the brand ramp come from the marketing page (indigo -> purple). */ .body .component-sidebar{
  background: var(--fs-shell);
  border-right: 0;
}.body .component-sidebar__menu, .body .sidebar-block__left-menu{ background: transparent !important; }/* the rail is menu-only now that the avatar card is gone, so it gets a little breathing room up top and slightly roomier rows */ .body .component-sidebar__menu{ padding-top: 34px !important; }.body .component-sidebar__menu-item-link:hover{
  background: var(--fs-shell-2);
  color: var(--fs-shell-text);
}.body .sidebar-block__menu-item-icon, .body .component-sidebar__menu-item-link .sidebar-block__menu-item-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: none;
  font-size: var(--fs-t-h3);
  color: inherit;
  opacity: .8;
}/* active item carries the brand, not a flat block of colour */ .body .component-sidebar__menu-item-active .component-sidebar__menu-item-link, .body .component-sidebar__menu-item-link.component-sidebar__menu-item-link-active{
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 26, 48, .18);
  color: var(--fs-brand);
  font-weight: 700;
}.body .component-sidebar__menu-item-active .sidebar-block__menu-item-icon{ opacity: 1; }/* the wordmark sits on dark here */ .body .component-sidebar__menu-logo .fs-logo__type, .body .component-navbar-brand .fs-logo__type{ color: #fff; }/* ---- top bar ------------------------------------------------------------ Same indigo as the rail so the chrome reads as one surface; separation comes from a hairline, and the bar is inset past the rail on desktop so it never overlays (or casts onto) the sidebar. */ .body .sidebar-block__top.component-navbar, .body .component-navbar__navbar-private, .body .component-sidebar__menu-logo{
  background: var(--fs-shell);
  box-shadow: inset 0 -1px 0 var(--fs-shell-line);
  border-bottom: 0;
}.body .component-sidebar__menu-logo{
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--fs-4);
}
@media (min-width: 992px) {
  /* the theme pins this with an id selector (#block_82 .sidebar-block__top),
     which outranks any class chain here — hence !important on the geometry.
     Scoped to the PRIVATE navbar only: it sits beside the 250px sidebar rail
     in the signed-in shell. The PUBLIC navbar (marketing pages, no sidebar)
     must span the full width, so it is explicitly reset below. */
  .body .sidebar-block__top.component-navbar__navbar-private {
    left: 250px !important;
    right: 0 !important;
    width: auto !important;
  }
  .body .sidebar-block__top.component-navbar__navbar-public {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}.body .navbar-toggler span{ background: var(--fs-shell-text) !important; }/* ---- top bar menu items ------------------------------------------------- These were four different controls: Currency 102x42 with 9px/10px padding on a blue fill, Language 119x54 on an inline `brown` (off-palette), Account and Logout 109/102x54 on grey — three backgrounds, two heights, two paddings. One spec for all four; widths still follow their labels. */ .body .navbar-nav.hug{ display: flex; align-items: center; gap: var(--fs-2); margin: 0 var(--fs-4) 0 0; padding: 0; }/* the theme gives these items height:85%, which left each one a different height; let them size to their content and let the row centre them */ .body .navbar-nav.hug > li{ display: flex; align-items: center; height: 40px; margin: 0; padding: 0; }/* the currency control nests two wrappers before the button, and the theme puts padding:var(--fs-1) 0 0 on one and margin:5px 0 var(--fs-3) on the button — that was the var(--fs-1) the pill sat lower than its neighbours. Make the wrappers transparent to layout and zero the stray offsets. */ .body .fs-currency-item .balance-dropdown-container, .body .fs-currency-item .balance-dropdown{
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0;
}.body .fs-currency-item .balance-dropdown__namee{ margin: 0; }.body .navbar-nav.hug > li > a, .body .fs-currency-item .balance-dropdown__namee{
  display: inline-flex;
  align-items: center;
  gap: var(--fs-2);
  height: 40px;
  /* the theme ships margin:4px 5% 15px on these links — a percentage margin that
     made each pill sit at a different offset */
  margin: 0;
  padding: 0 var(--fs-4);
  border: 1px solid var(--fs-shell-line);
  border-radius: var(--fs-r-sm);
  background: var(--fs-shell-2);
  font-size: var(--fs-t-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--fs-shell-text);
  white-space: nowrap;
}.body .navbar-nav.hug > li > a:hover, .body .fs-currency-item .balance-dropdown__namee:hover{
  background: #1d2c49;
  border-color: #2c4066;
  color: #fff;
  text-decoration: none;
}/* icons: one size, one colour, no stray margins */ .body .navbar-nav.hug .component-navbar-nav-link-icon, .body .navbar-nav.hug .component-navbar-nav-link-icon > span{
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: var(--fs-t-body);
  color: var(--fs-shell-muted);
}/* the active page carries the brand tint */ .body .navbar-nav.hug > li > a.component-navbar-nav-link-active__navbar-private{
  background: var(--fs-brand-soft);
  border-color: rgba(79, 70, 229, .45);
  color: #fff;
}/* ---- balance pill ------------------------------------------------------- Sits first in the header nav so the figure is available on every page rather than being re-stated inside individual pages. It inherits the pill geometry above; only the two-part label and the accent fill are set here. */ .body .navbar-nav.hug > li > a.fs-bal{
  gap: var(--fs-2);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
}.body .navbar-nav.hug > li > a.fs-bal:hover{
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}.fs-bal__k{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fs-shell-muted);
}.fs-bal__v{
  font-size: var(--fs-t-body);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}/* ---- currency switcher -------------------------------------------------- Trigger shows the active currency (symbol + code) instead of the word "Currency"; rows put the full name on the left and symbol + code on the right. Markup keeps .currencies-item / data-rate-key / data-rate-symbol, which is the contract public/script.js binds to. */ .body .balance-dropdown__namee .fs-cur-sym{ margin-right: var(--fs-1); font-weight: 700; }.body .balance-dropdown__namee .fs-cur-code{ letter-spacing: .01em; }.body #currencies-list{
  min-width: 244px;
  padding: var(--fs-2);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-md);
  box-shadow: var(--fs-shadow);
  background: #fff;
}.body .balance-dropdown__item{ list-style: none; }.body .balance-dropdown__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-6);
  padding: var(--fs-2) var(--fs-3);
  border: 0;
  border-radius: var(--fs-r-xs);
  font-size: var(--fs-t-sm);
  color: var(--fs-ink);
}.body .balance-dropdown__link:hover{ background: var(--fs-soft); color: var(--fs-ink); text-decoration: none; }.body .fs-cur-tag{ flex: none; font-weight: 700; color: var(--fs-muted); white-space: nowrap; }.body .balance-dropdown__link.is-active{ background: var(--fs-soft); }.body .balance-dropdown__link.is-active .fs-cur-tag{ color: var(--fs-primary); }/* ---- collapsed (mobile) menu ------------------------------------------- The drawer reuses ul.navbar-nav.hug, so the pills need to stack full width and the panel needs to match the dark shell rather than sit on white. */ @media (max-width: 991px){
  .body .collapse.navbar-collapse,
  .body .component-navbar-collapse { background: var(--fs-shell); }
  .body .navbar-nav.hug { flex-direction: column; align-items: stretch; gap: var(--fs-2); margin: var(--fs-3) 0; padding: 0 var(--fs-3); }
  .body .navbar-nav.hug > li { width: 100%; }
  .body .navbar-nav.hug > li > a,
  .body .fs-currency-item .balance-dropdown__namee { width: 100%; justify-content: flex-start; }
  .body .fs-currency-item,
  .body .fs-currency-item .balance-dropdown-container,
  .body .fs-currency-item .balance-dropdown { width: 100%; }
  .body #currencies-list { width: 100%; }
  /* the collapsed menu items ship a light fill from the theme's own inline
     <style>, which loads after this sheet — hence the extra selector depth */
  .body .navbar-nav-sidebar-menu .component-navbar-nav-link__navbar-private,
  .body .component-sidebar__menu-item-link {
    background: transparent;
    color: var(--fs-shell-text);
  }
  .body .navbar-nav-sidebar-menu .component-navbar-nav-link__navbar-private:hover {
    background: var(--fs-shell-2);
    color: #fff;
  }
  .body .navbar-nav-sidebar-menu .component-navbar-nav-link-active__navbar-private {
    background: var(--fs-brand-soft);
    color: #fff;
  }
  .body .navbar-collapse { background: var(--fs-shell); }
  .body .component-sidebar__menu-item-link:hover { background: var(--fs-shell-2); }
  .body .component-sidebar__menu-item-active .component-sidebar__menu-item-link {
    background: var(--fs-brand-soft);
    color: #fff;
  }
  .body .collapse.navbar-collapse { min-height: 100vh; }
}/* the theme animates a diagonal sheen across .style-bg-primary / .btn-big-primary; it reads as a rendering artifact on these flat controls */ .body .balance-dropdown__namee:before, .body .navbar-nav.hug .btn-big-primary:before, .body .component-sidebar__menu-item-link:before{ content: none !important; }/* ============================================================ 3. TOP CARDS Were 116 / 101 / 101 / 92px tall with three different paddings. Equal height, one padding, tighter type, values carry the emphasis. */ .body .fs-no .fs-stat-row .card{ padding: 18px var(--fs-5); min-height: 96px; }.body .fs-no .fs-stat-row .totals-block__card{ align-items: center; gap: var(--fs-4); }.body .fs-no .fs-stat-row .totals-block__icon-preview{ width: 46px !important; height: 46px !important; border-radius: 13px; }.body .fs-no .fs-stat-row .totals-block__icon-preview img{ width: 100%; height: 100%; object-fit: contain; }.body .fs-no .fs-stat-row .totals-block__count-value{
  margin: 0;
  font-size: var(--fs-t-h3) !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fs-ink);
}.body .fs-no .fs-stat-row .totals-block__count-value font{ color: var(--fs-ink) !important; }.body .fs-no .fs-stat-row .totals-block__card-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  /* the theme tints this block; the card already provides the surface */
  background: transparent !important;
}.body .fs-no .fs-stat-row .totals-block__count{ line-height: 1.3; }/* the theme leaves the value and the caption on overlapping baselines here */ .body .fs-no .fs-stat-row .totals-block__card-name{ margin: 0; font-size: var(--fs-t-cap); line-height: 1.35; color: var(--fs-muted); }.body .fs-no .fs-stat-row .totals-block__card-name p{ margin: 0; }.body .fs-no .fs-stat-row .btn-big-primary{ margin-top: 0; padding: var(--fs-2) var(--fs-4); border-radius: var(--fs-r-field); font-size: var(--fs-t-sm); }/* ---- top-card Add button (inline colours removed from the markup) ------- */ .body .fs-no .fs-stat-row .btn-big-primary.fs-add{
  background: #fff;
  border: 1px solid var(--fs-line);
  color: var(--fs-accent);
  box-shadow: none;
}.body .fs-no .fs-stat-row .btn-big-primary.fs-add:hover{ background: var(--fs-soft); }.body .fs-no .totals .totals-block__card-left:last-child{ margin-left: auto; }.body .fs-no .fs-stat-row center{ display: contents; }/* search field — keep the icon buttons the JS binds to, just seat them properly */ .body .fs-no .search-dropdown .input-wrapper__prepend, .body .fs-no .search-dropdown .input-wrapper__append{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 0 var(--fs-4);
  border: 0;
  background: none;
  line-height: 1;
}.body .fs-no .search-dropdown .input-wrapper__prepend{ left: 0; }.body .fs-no .search-dropdown .input-wrapper__append{ right: 0; }.body .fs-no .search-dropdown .input-wrapper__prepend .fa-search{ color: var(--fs-muted) !important; font-size: var(--fs-t-sm); }.body .fs-no .search-dropdown .input-wrapper__append .fa-times{ color: var(--fs-muted); font-size: var(--fs-t-sm); }.body .fs-no #unique-input{ padding-left: var(--fs-8)!important; padding-right: var(--fs-8); }.body .fs-no .search-results{
  margin-top: var(--fs-2);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-field);
  box-shadow: var(--fs-shadow-sm);
  background: #fff;
  overflow: hidden;
}.body .fs-no .help-block.min-max{ margin-top: var(--fs-2); font-size: var(--fs-t-cap); color: var(--fs-muted); }/* ============================================================ 5. DESCRIPTION The service description is owner-authored content (emoji + <br>), so the markup cannot be restructured here — but it can breathe: lighter surface, real gaps between rows, calmer type. */ .body .fs-no #service_description{
  padding: var(--fs-3) var(--fs-4);
  border: 0;
  border-radius: var(--fs-r-field);
  background: var(--fs-soft);
  font-size: var(--fs-t-sm);
  line-height: 1.5;
  color: var(--fs-ink);
}.body .fs-no #service_description br{ display: block; content: ""; margin-top: var(--fs-2); }.body .fs-no .fs-note b{ font-weight: 700; }/* ============================================================ 7. TYPOGRAPHY */ .body .fs-no, .body .fs-af{ font-size: var(--fs-t-body); color: var(--fs-ink); }.body .fs-no .well{ padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }/* ---- footer ------------------------------------------------------------- One line, shell colour, so it closes the page instead of competing with it. The old four-column block was also duplicated: footer.twig ships one and neworder/coupon/massorder each inlined their own copy. */ .body .fs-foot{
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fs-foot-h);
  background: var(--fs-shell);
}.body .fs-foot__in{
  padding: 0 var(--fs-6);
  text-align: center;
  font-size: var(--fs-t-cap);
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}/* ---- page canvas + sticky footer --------------------------------------- The panel never set a page background — html/body were transparent, so the canvas was raw browser white and any space the content did not fill showed through under the footer. Paint it, and let the content column grow so the footer is pushed to the bottom on short pages instead of floating mid-screen. */ /* the token is declared on .body, which html cannot see — literal here */ html{ background: #f2f4fa; }.body{
  --fs-ink: #0c315c;
  --fs-muted: #7296b2;
  --fs-soft: #f2f4fa;
  --fs-soft-2: #e8f1fa;
  --fs-canvas: #f2f4fa;
  --fs-foot-h: 54px;
  --fs-line: #eaf6f0;
  --fs-primary: #1979c8;
  --fs-accent: #ff0000;

  --fs-r-card: 18px;
  --fs-r-field: 12px;
  --fs-r-pill: 999px;
  --fs-pad-card: 22px;
  --fs-gap: var(--fs-4);

  /* ── spacing: strict 8px scale (4 allowed as the half-step) ─────────── */
  --fs-1: 4px;  --fs-2: 8px;  --fs-3: 12px; --fs-4: 16px;
  --fs-5: 20px; --fs-6: 24px; --fs-7: 32px; --fs-8: 40px;
  --fs-9: 48px; --fs-10: 64px;

  /* ── type scale ────────────────────────────────────────────────────── */
  --fs-t-display: 30px; --fs-t-h1: 24px; --fs-t-h2: 19px; --fs-t-h3: 16px;
  --fs-t-body: 14px;    --fs-t-sm: 13px; --fs-t-cap: 12px; --fs-t-micro: 11px;
  --fs-lh-tight: 1.25;  --fs-lh: 1.5;    --fs-lh-loose: 1.65;
  --fs-w-med: 500; --fs-w-semi: 600; --fs-w-bold: 700;

  /* ── radius scale ──────────────────────────────────────────────────── */
  --fs-r-xs: 8px; --fs-r-sm: 10px; --fs-r-md: 12px; --fs-r-lg: 16px; --fs-r-xl: 18px;

  /* ── elevation ─────────────────────────────────────────────────────── */
  --fs-e0: none;
  --fs-e1: 0 1px 2px rgba(18, 22, 33, .06);
  --fs-e2: 0 10px 35px rgba(18, 22, 33, .06);
  --fs-e3: 0 16px 44px rgba(18, 22, 33, .11);

  /* ── semantic status (used by badges, alerts, validation) ──────────── */
  --fs-success: #0f9d6e; --fs-success-bg: #eaf6f0;
  --fs-warning: #b8730a; --fs-warning-bg: #fdf3e8;
  --fs-danger:  #d64545; --fs-danger-bg:  #fdeceb;
  --fs-info:    #1979c8; --fs-info-bg:    #e6ecf6;

  /* ── motion ────────────────────────────────────────────────────────── */
  --fs-t-fast: .15s; --fs-t-base: .2s; --fs-ease: cubic-bezier(.22,1,.36,1);

  /* shell — one solid brand indigo for navbar + sidebar, no shade split */
  --fs-shell: #4f46e5;
  --fs-shell-2: rgba(255, 255, 255, .12);
  --fs-shell-line: rgba(255, 255, 255, .16);
  --fs-shell-text: #ffffff;
  --fs-shell-muted: rgba(255, 255, 255, .74);

  /* brand ramp, lifted from the marketing page (indigo -> purple) */
  --fs-brand: #4f46e5;
  --fs-brand-2: #7c3aed;
  --fs-brand-soft: rgba(79, 70, 229, .16);

  /* navy outline, a touch thicker, plus a deeper lift so cards never read as
     empty white rectangles */
  --fs-line: #ccd8ea;
  --fs-border: 1.5px solid var(--fs-line);
  --fs-shadow: 0 1px 2px rgba(16, 26, 48, .05), 0 2px 6px rgba(16, 26, 48, .06), 0 16px 32px -16px rgba(16, 26, 48, .34);
  --fs-shadow-sm: 0 1px 2px rgba(16, 26, 48, .05), 0 10px 22px -14px rgba(16, 26, 48, .30);
 background: var(--fs-canvas); }.body .wrapper-content{
  display: flex;
  flex-direction: column;
  /* the footer renders INSIDE this column (pushed down with margin-top:auto), so
     the column must fill the whole viewport — otherwise it stops short and the
     canvas shows as a gap of exactly the footer's height beneath the footer.
     100vh here leaves no gap and no overshoot (verified: doc == viewport). */
  min-height: 100vh;
}.body .wrapper-content__header{ flex: none; }/* the theme pins .wrapper-content to 100vh; without min-height:0 the inner column refuses to shrink and the footer spills past the fold */ .body .wrapper-content__body{ display: flex; flex-direction: column; flex: 1; min-height: 0; }.body .fs-foot{ margin-top: auto; }/* ============================================================ 8. RESPONSIVE */ @media (max-width: 991px){
  .body .fs-no .card { padding: var(--fs-4); }
  .body .component-sidebar { border-right: 0; }
}
@media (max-width: 575px) {
  .body .fs-no .card { padding: var(--fs-4); border-radius: 14px; }
  .body .fs-no .fs-stat-row .card { padding: var(--fs-4); }
}/* ---- kill the leftover sheen everywhere in the shell --------------------- The theme animates a 35px diagonal white streak across .style-bg-primary and .btn-big-primary every 3.2s, via BOTH ::before and ::after depending on the element. It reads as a 2015 "glossy button" effect on a 2026 dashboard. Stopped on the shell only; nothing else about those elements changes. */ .body .sidebar-block__top .style-bg-primary:before, .body .sidebar-block__top .style-bg-primary:after, .body .sidebar-block__top .btn-big-primary:before, .body .sidebar-block__top .btn-big-primary:after, .body .navbar-nav.hug a:before, .body .navbar-nav.hug a:after, .body .sidebar-block__top .component-navbar-nav-link:before, .body .sidebar-block__top .component-navbar-nav-link:after, .body .navbar-nav.hug .balance-dropdown__namee:before, .body .navbar-nav.hug .balance-dropdown__namee:after{
  content: none !important;
  animation: none !important;
}/* ============================================================ 9. SHELL POLISH Refinements to the three shared components (top bar, sidebar rail, footer). Everything here is additive: no class the theme's JS binds to is renamed, and no rule above is edited. */ /* ---- focus, everywhere in the shell ------------------------------------- The theme ships `outline: 0` on its controls, which left keyboard users with no visible position at all. :focus-visible only shows for keyboard use, so mouse clicks look exactly as before. */ .body .component-sidebar__menu-item-link:focus-visible, .body .navbar-nav.hug > li > a:focus-visible, .body .navbar-nav-sidebar-menu a:focus-visible, .body .balance-dropdown__namee:focus-visible, .body .balance-dropdown__link:focus-visible, .body .navbar-toggler:focus-visible, .body .fs-top:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: var(--fs-r-sm);
}.body .balance-dropdown__link:focus-visible{ outline-color: var(--fs-brand); }/* ---- sidebar rail ------------------------------------------------------- A long menu had nowhere to go: the rail is position:fixed with the default overflow, so items past the fold were simply unreachable. */ .body .component-sidebar{
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}.body .component-sidebar::-webkit-scrollbar{ width: 6px; }.body .component-sidebar::-webkit-scrollbar-thumb{ border-radius: var(--fs-r-pill); background: rgba(255, 255, 255, .22); }.body .component-sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, .34); }.body .component-sidebar__menu-item-link{
  display: flex;
  align-items: center;
  gap: var(--fs-3);
  margin: 3px var(--fs-3);
  padding: var(--fs-3) var(--fs-4);
  border-radius: var(--fs-r-sm);
  font-size: var(--fs-t-body);
  font-weight: 600;
  color: var(--fs-shell-muted);
 transition: background-color .2s ease, color .2s ease; }/* the active row keeps its white pill, and gains a brand bar on the leading edge so the current page is readable at a glance, not only by contrast */ .body .component-sidebar__menu-item-active .component-sidebar__menu-item-link{
  position: relative;
  overflow: hidden;
}.body .component-sidebar__menu-item-active .component-sidebar__menu-item-link::after{
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--fs-brand);
}/* ---- top bar ------------------------------------------------------------ */ .body .navbar-nav.hug > li > a, .body .fs-currency-item .balance-dropdown__namee{ transition: background-color .2s ease, border-color .2s ease, color .2s ease; }/* account control: initial-avatar plus the username, in place of a generic person glyph and the word "Account" */ .body .navbar-nav.hug > li > a.fs-acct{ gap: var(--fs-2); padding-left: var(--fs-2); }.fs-av{
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--fs-r-pill);
  background: rgba(255, 255, 255, .22);
  font-size: var(--fs-t-cap);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}.fs-acct__n{ max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.body .navbar-nav.hug > li > a.fs-acct:hover .fs-av{ background: rgba(255, 255, 255, .34); }/* the currency dropdown opens with a short fade rather than appearing hard */ .body #currencies-list.show{ animation: fs-drop .16s ease; }
@keyframes fs-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }/* the hamburger is a real 44px target, and its bars carry the same easing as the rest of the shell */ .body .navbar-toggler{ display: grid; place-content: center; width: 44px; height: 44px; padding: 0; }/* ---- footer + back to top ----------------------------------------------- */ .body .fs-foot{ position: relative; gap: var(--fs-4); }.body .fs-top{
  display: inline-flex;
  align-items: center;
  gap: var(--fs-2);
  height: 32px;
  padding: 0 var(--fs-3);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--fs-r-pill);
  background: rgba(255, 255, 255, .10);
  font-size: var(--fs-t-cap);
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, visibility .2s;
}.body .fs-top:hover{ background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: #fff; text-decoration: none; }/* hidden until there is something to scroll back up from */ .body .fs-top[hidden]{ display: none; }
@media (max-width: 575px) {
  .body .fs-foot { flex-direction: column; gap: var(--fs-2); height: auto; padding: var(--fs-4) 0; }
}/* the name is only cramped on a narrow *top bar*; inside the mobile drawer the pill is full width, so it stays */ @media (min-width: 992px) and (max-width: 1199px){
  .fs-acct__n { max-width: 9ch; }
}

@media (prefers-reduced-motion: reduce) {
  .body .component-sidebar__menu-item-link,
  .body .navbar-nav.hug > li > a,
  .body .fs-top { transition: none; }
  .body #currencies-list.show { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Public (marketing) navbar — the app header now stands in for the old
   fs-nav across the marketing pages. It sits on the indigo shell surface
   with no sidebar beside it, so the logo goes white, the redundant
   hamburger is hidden once the links show inline, and the row is aligned
   on the token spacing.
   ═══════════════════════════════════════════════════════════════════ */

/* logo: on the indigo bar the whole lockup is Paper white, not red+ink */
.body .component-navbar__navbar-public .fs-logo__mark,
.body .component-navbar__navbar-public .fs-logo__type,
.body .component-navbar__navbar-public a:hover .fs-logo__type {
  color: #fff !important;
}

/* row spacing: brand left, actions right, on the token scale */
.body .component-navbar__navbar-public .navbar {
  padding: var(--fs-2) var(--fs-5);
  gap: var(--fs-4);
}
.body .component-navbar__navbar-public .sidebar-block__top-brand {
  display: flex; align-items: center;
}

@media (min-width: 992px) {
  /* the theme forces .navbar-toggler to display:grid everywhere; once the
     links are shown inline the hamburger is redundant, so hide it here. */
  .body .component-navbar__navbar-public .navbar-toggler {
    display: none !important;
  }
  /* the action buttons sit flush right */
  .body .component-navbar__navbar-public .navbar-collapse {
    justify-content: flex-end;
  }
}

@media (max-width: 991px) {
  /* on mobile only the hamburger shows; keep it comfortably tappable */
  .body .component-navbar__navbar-public .navbar-toggler {
    display: grid !important; width: 44px; height: 44px;
  }
}

/* Elevate the fixed public navbar so its edge over scrolling content reads as
   an intentional sticky header, not a hard cut into a light/white band. */
.body .component-navbar__navbar-public {
  box-shadow:
    inset 0 -1px 0 var(--fs-shell-line),
    0 6px 20px -8px rgba(12, 49, 92, .30) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PUBLIC (marketing) navbar — indigo, matching the indigo hero/brand. Scoped
   to the public navbar; the signed-in shell keeps indigo too. Logo light.
   ═══════════════════════════════════════════════════════════════════ */
.body .sidebar-block__top.component-navbar__navbar-public{
  background:linear-gradient(100deg, #3730a3 0%, #4f46e5 55%, #6366f1 100%) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14),
             0 6px 20px -8px rgba(55,48,163,.45) !important; }
.body .component-navbar__navbar-public .fs-logo__mark,
.body .component-navbar__navbar-public .fs-logo__type,
.body .component-navbar__navbar-public a:hover .fs-logo__type{ color:#e0e7ff !important; }
.body .component-navbar__navbar-public .navbar-nav.hug > li > a{
  border-color:rgba(255,255,255,.20); background:rgba(255,255,255,.12); color:#eef2ff; }
.body .component-navbar__navbar-public .navbar-nav.hug > li > a:hover{
  background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.38); color:#fff; }
.body .component-navbar__navbar-public .navbar-nav.hug .component-navbar-nav-link-icon,
.body .component-navbar__navbar-public .navbar-nav.hug .component-navbar-nav-link-icon > span{ color:rgba(238,242,255,.85); }
.body .component-navbar__navbar-public .navbar-toggler span{ background:#eef2ff !important; }

/* ============================================================ 10. SHELL v2
   Signed-in navbar polish: homepage brand lockup, balance+currency wallet
   cell, account label, and no stray toggler on desktop. Presentation only —
   no class the theme's JS binds to is renamed. */

/* ---- brand lockup (matches the public homepage navbar) ------------------ */
.body .fs-lock{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; }
.body .fs-lock__mk{ width:34px; height:34px; border-radius:9px; flex:none;
  box-shadow:0 3px 10px -3px rgba(0,0,0,.4); }
.body .fs-lock__type{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.24rem; font-weight:800; letter-spacing:-.03em; line-height:1; white-space:nowrap; }
.body .fs-lock__type b{ font-weight:800; color:#ffffff; }
.body .fs-lock__type .s{ font-weight:800; color:#c7d2fe; }
.body .component-navbar-brand a:hover .fs-lock__mk,
.body .component-navbar-logo a:hover .fs-lock__mk{ transform:translateY(-1px); transition:transform .15s ease; }
.body .component-navbar-brand a, .body .component-navbar-logo a{ text-decoration:none; }

/* ---- no toggler / kebab on desktop: the sidebar rail is the menu ------- */
@media (min-width: 992px){
  .body .component-navbar__navbar-private .navbar-toggler{ display:none !important; }
}

/* ---- wallet chip: balance + currency are ONE dropdown control ----------
   A single emerald chip [ 💳  $0  USD  ⌄ ]. Clicking it opens the currency
   switcher (with an Add Funds row on top). No second menu item. */
.body .navbar-nav.hug > li.fs-walletcell{ display:flex; align-items:center; height:40px; }
.body .fs-walletcell .balance-dropdown-container,
.body .fs-walletcell .balance-dropdown{ display:flex !important; height:100%; }
.body .fs-walletcell .balance-dropdown__namee{ display:inline-flex; align-items:center; gap:8px;
  height:40px; margin:0 !important; padding:0 7px 0 8px !important; cursor:pointer; white-space:nowrap;
  border:1px solid rgba(255,255,255,.20) !important; border-radius:var(--fs-r-pill) !important;
  background:rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
  color:#fff !important; transition:background-color .16s ease, border-color .16s ease, transform .16s ease; }
.body .fs-walletcell .balance-dropdown__namee:hover{ background:rgba(255,255,255,.17) !important;
  border-color:rgba(255,255,255,.30) !important; transform:translateY(-1px); }
.fs-wal-ic{ display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:8px;
  background:linear-gradient(135deg,#6366f1,#818cf8); color:#fff;
  box-shadow:0 3px 8px -3px rgba(79,70,229,.7); }
.fs-wal-ic svg{ width:14px; height:14px; }
.fs-wal-bal{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:#fff;
  font-variant-numeric:tabular-nums; }
.fs-wal-cur{ font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#e5e7ff; }
/* caret */
.body .fs-walletcell .balance-dropdown__namee::after{ content:""; width:6px; height:6px; margin:0 3px 0 -1px;
  border-right:2px solid rgba(255,255,255,.8); border-bottom:2px solid rgba(255,255,255,.8);
  transform:rotate(45deg) translateY(-1px); font-family:inherit !important; }
/* dropdown extras: Add Funds row + a small section label */
.body .fs-walletcell .balance-dropdown__head{ padding:9px 14px 4px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--fs-muted); }
.body .fs-walletcell .fs-wal-add{ border-bottom:1px solid var(--fs-soft); }
.body .fs-walletcell .fs-wal-add .balance-dropdown__link{ font-weight:700; color:var(--fs-brand); }
.body .fs-walletcell .fs-wal-add .balance-dropdown__link:hover{ background:var(--fs-brand-soft); }
.body .fs-walletcell .fs-wal-add .balance-dropdown__link .fs-cur-tag{ color:var(--fs-brand); font-size:16px; font-weight:800; }

/* ---- account label reads "Account" with the initial avatar ------------- */
.body .navbar-nav.hug > li > a.fs-acct .fs-acct__n{ font-weight:600; }

/* ════════════════════════════════════════════════════════════════════════════
   11. SIDEBAR — premium SaaS rail (Linear / Stripe / Vercel language, Famestate
   purple). Visual layer only: no id/name/route/JS hook is touched. Supersedes
   the flat indigo shell above via source order + matching specificity.
   ════════════════════════════════════════════════════════════════════════════ */
.body .sidebar-block__left.component-sidebar{
  display:flex; flex-direction:column; height:100vh;
  background:
    radial-gradient(560px 360px at 18% -2%, rgba(129,110,255,.22), transparent 64%),
    linear-gradient(180deg, #3a31b8 0%, #453dcf 48%, #5a52e6 100%);
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.08), 6px 0 26px -16px rgba(40,34,120,.45);
  overflow:hidden;
}
/* (removed the fractal-noise + mix-blend-mode overlay — blend modes force a
   full recomposite every frame and were a scroll-jank source.) */
.body .sidebar-block__left.component-sidebar > *{ position:relative; z-index:1; }

/* logo — 72px, glass container, PRO badge */
.body .component-sidebar__menu-logo{ height:72px !important; padding:0 22px !important; flex:none;
  border-bottom:1px solid rgba(255,255,255,.07); }
.body .component-sidebar__menu-logo .fs-lock__mk{ width:36px; height:36px; }
.body .component-sidebar__menu-logo .fs-lock__type{ display:inline-flex; align-items:center; }
.body .component-sidebar__menu-logo .fs-lock__type::after{ content:"PRO"; margin-left:8px; align-self:center;
  font-size:9px; font-weight:800; letter-spacing:.08em; color:#c7bcff; line-height:1;
  padding:3px 6px; border-radius:6px; background:rgba(124,92,255,.22); border:1px solid rgba(124,92,255,.4); }

/* menu list scrolls internally so the user card stays pinned */
.body .component-sidebar__menu, .body .sidebar-block__left-menu{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:14px 0 10px !important;
  scrollbar-width:thin; scrollbar-color:rgba(124,92,255,.5) transparent; }
.body .component-sidebar__menu::-webkit-scrollbar{ width:5px; }
.body .component-sidebar__menu::-webkit-scrollbar-track{ background:transparent; }
.body .component-sidebar__menu::-webkit-scrollbar-thumb{ border-radius:999px; background:rgba(124,92,255,.42); }
.body .component-sidebar__menu:hover::-webkit-scrollbar-thumb{ background:rgba(124,92,255,.6); }

/* menu item — 48px, radius 16, padding 18, gap 12, GPU-friendly transitions */
.body .component-sidebar__menu-item-link{
  min-height:46px; margin:2px 12px; padding:0 16px; gap:13px; border-radius:14px;
  border:1px solid transparent; font-size:15px; font-weight:500; letter-spacing:-.01em; line-height:1.2;
  color:rgba(255,255,255,.74);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.body .component-sidebar__menu-item-link .sidebar-block__menu-item-icon{
  width:20px; height:20px; flex:none; font-size:19px; opacity:.82; color:inherit;
  transition:color .2s ease, opacity .2s ease; }

/* hover — very soft lift, tiny translateX, soft shadow, 200ms */
.body .component-sidebar__menu-item-link:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); color:#fff;
  transform:translateX(2px); box-shadow:0 6px 16px -10px rgba(20,16,44,.5); }
.body .component-sidebar__menu-item-link:hover .sidebar-block__menu-item-icon{ opacity:1; color:#fff; }

/* active — refined soft purple gradient, light border, subtle shadow, tiny
   left indicator. No oversized glow, no scale. Overrides the old white pill. */
.body .component-sidebar__menu-item-active .component-sidebar__menu-item-link,
.body .component-sidebar__menu-item-link.component-sidebar__menu-item-link-active{
  background:linear-gradient(135deg, rgba(142,120,255,.9) 0%, rgba(110,94,238,.78) 100%) !important;
  color:#fff !important; font-weight:600 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 18px -10px rgba(72,58,168,.65), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.body .component-sidebar__menu-item-active .sidebar-block__menu-item-icon,
.body .component-sidebar__menu-item-link.component-sidebar__menu-item-link-active .sidebar-block__menu-item-icon{
  color:#fff !important; opacity:1 !important; }
.body .component-sidebar__menu-item-active .component-sidebar__menu-item-link::after{
  background:#fff !important; box-shadow:0 0 5px rgba(255,255,255,.5); top:13px; bottom:13px; width:3px; }

/* keyboard focus */
.body .component-sidebar__menu-item-link:focus-visible{ outline:2px solid #a78bfa; outline-offset:-2px; border-radius:16px; }

/* in-menu badges (e.g. ticket count) → premium pill */
.body .component-sidebar__menu-item-link .badge{ margin-left:auto; min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  font-size:11px; font-weight:800; background:#fff !important; color:#4f46e5 !important; box-shadow:0 2px 6px -2px rgba(0,0,0,.4); }

/* ---- user card, pinned bottom ---- */
.body .fs-uc{ flex:none; margin:8px 12px 10px; padding:12px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 26px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.body .fs-uc__main{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.body .fs-uc__av{ position:relative; flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-size:15px; font-weight:800; color:#fff; background:linear-gradient(135deg,#7c5cff,#5b4bff);
  box-shadow:0 6px 14px -6px rgba(91,75,255,.9); }
.body .fs-uc__on{ position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%;
  background:#22c55e; border:2px solid #1b1e3a; box-shadow:0 0 0 2px rgba(34,197,94,.25); }
.body .fs-uc__id{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.body .fs-uc__name{ font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.body .fs-uc__meta{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(255,255,255,.6); white-space:nowrap; }
.body .fs-uc__mdot{ width:6px; height:6px; border-radius:50%; background:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.22); }
/* settings shortcut on the right of the card */
.body .fs-uc__gear{ margin-left:auto; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:10px;
  font-size:13px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  transition:background .18s ease, color .18s ease, transform .18s ease; }
.body .fs-uc__main:hover .fs-uc__gear{ background:rgba(255,255,255,.15); color:#fff; transform:rotate(35deg); }
.body .fs-uc__foot{ display:flex; align-items:center; gap:7px; margin-top:11px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08); font-size:10.5px; font-weight:600; color:rgba(255,255,255,.45); letter-spacing:.02em; }
.body .fs-uc__dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); position:relative; }
.body .fs-uc__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#22c55e; animation:fs-uc-ping 2.2s ease infinite; }
@keyframes fs-uc-ping{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.6); opacity:0 } }
@media(prefers-reduced-motion:reduce){ .body .fs-uc__dot::after{ animation:none; } .body .component-sidebar__menu-item-active .component-sidebar__menu-item-link{ transform:none; } }

/* ── sidebar menu icons → correct modern Lucide glyph per SMM route ────────
   Overrides whatever icon class the `menus` DB row carried, at the class level
   (no markup / DB / route change). One library, one 24px grid, 2px stroke. */
.body .component-sidebar__menu-item-link[href^="/neworder"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href="/ "] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/massorder"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/orders"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/services"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/addfunds"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/affiliate"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/api"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/child-panels"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/tickets"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/refill"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/updates"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/transferfunds"] .sidebar-block__menu-item-icon > span{
  display:inline-block; width:20px; height:20px; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }

/* New order → shopping-cart */
.body .component-sidebar__menu-item-link[href^="/neworder"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href="/ "] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>"); }
/* Mass order → layers */
.body .component-sidebar__menu-item-link[href^="/massorder"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.84Z'/><path d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/><path d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.84Z'/><path d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/><path d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/></svg>"); }
/* Orders → clipboard-list */
.body .component-sidebar__menu-item-link[href^="/orders"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>"); }
/* Services → layout-grid */
.body .component-sidebar__menu-item-link[href^="/services"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>"); }
/* Add funds / Transfer funds → wallet */
.body .component-sidebar__menu-item-link[href^="/addfunds"] .sidebar-block__menu-item-icon > span,
.body .component-sidebar__menu-item-link[href^="/transferfunds"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2'/><path d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2'/><path d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/></svg>"); }
/* Affiliates → users */
.body .component-sidebar__menu-item-link[href^="/affiliate"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
/* API → code */
.body .component-sidebar__menu-item-link[href^="/api"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>"); }
/* Child panels → git-branch */
.body .component-sidebar__menu-item-link[href^="/child-panels"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='6' x2='6' y1='3' y2='15'/><circle cx='18' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M18 9a9 9 0 0 1-9 9'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='6' x2='6' y1='3' y2='15'/><circle cx='18' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M18 9a9 9 0 0 1-9 9'/></svg>"); }
/* Tickets → life-buoy */
.body .component-sidebar__menu-item-link[href^="/tickets"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m4.93 4.93 4.24 4.24'/><path d='m14.83 9.17 4.24-4.24'/><path d='m14.83 14.83 4.24 4.24'/><path d='m9.17 14.83-4.24 4.24'/><circle cx='12' cy='12' r='4'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m4.93 4.93 4.24 4.24'/><path d='m14.83 9.17 4.24-4.24'/><path d='m14.83 14.83 4.24 4.24'/><path d='m9.17 14.83-4.24 4.24'/><circle cx='12' cy='12' r='4'/></svg>"); }
/* Refill → refresh-cw */
.body .component-sidebar__menu-item-link[href^="/refill"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>"); }
/* Updates → megaphone */
.body .component-sidebar__menu-item-link[href^="/updates"] .sidebar-block__menu-item-icon > span{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>"); }

/* ════════════════════════════════════════════════════════════════════════════
   12. GLOBAL TYPOGRAPHY + light cross-page polish (applies to EVERY signed-in
   page: orders, services, add funds, tickets, affiliates, account, …).
   Modern Inter type at lighter weights; nothing structural changes.
   ════════════════════════════════════════════════════════════════════════════ */
.body,
.body input, .body button, .body textarea, .body select,
.body .card, .body table, .body .form-control{
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.body{ font-weight:400; letter-spacing:-.005em; }
/* The Simplify theme hard-sets font-family:Cairo on body, every heading and a
   few nav elements — which loaded after Plus Jakarta and replaced it. These
   rules match the theme's exact specificity; fs-ui.css loads AFTER the theme,
   so they win by source order. No !important → monospace/code keep their font. */
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6,
.body .component-navbar-nav-link,
.body .component-navbar-balance-item__navbar-private,
.body .component-sidebar__menu-item-link,
.body .navbar-dropdown__name{
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
/* headings use Bricolage Grotesque (display), body stays Hanken Grotesk —
   the same pairing Followiz uses. This rule is after the nav rule above, so it
   wins for headings only; nav/body keep Hanken. */
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6,
.body .totals-block__count-value, .body .card-title{
  font-family:'Bricolage Grotesque','Hanken Grotesk',-apple-system,'Segoe UI',sans-serif; }
.body h1, .body h2, .body h3, .body h4,
.body .totals-block__count-value, .body .card-title{
  font-weight:600; letter-spacing:-.015em; }
.body h5, .body h6{ font-weight:600; }
.body label, .body .control-label, .body th{ font-weight:500; }
.body p, .body td, .body .text-muted{ font-weight:400; }

/* ---- form controls: one calm, modern focus ring on every page ---------- */
.body .form-control{
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.body .form-control:focus, .body .form-control:focus-visible{
  border-color:var(--fs-brand) !important;
  box-shadow:0 0 0 3px var(--fs-brand-soft) !important; outline:0; }

/* ---- buttons: subtle press + smooth transition site-wide --------------- */
.body .btn, .body .btn-big-primary{ transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease; }
.body .btn:active, .body .btn-big-primary:active{ transform:translateY(1px); }

/* ---- links inside content ---------------------------------------------- */
.body .fs-no a:not(.btn):not(.component-navbar-nav-link):hover,
.body .wrapper-content a.fs-p-link:hover{ text-decoration:underline; }

/* ---- tables: lighter, more readable rows across list pages ------------- */
.body .table thead th{ font-weight:600; letter-spacing:.01em; color:var(--fs-muted); }
.body .table td, .body .table th{ vertical-align:middle; }

/* ── font: definitive enforcement, QuickPanel signed-in shell ONLY ─────────
   Scoped to .wrapper-sidebar-navbar (the authenticated wrapper) so the public
   marketing pages (#fs) are untouched. !important guarantees it beats the
   theme's Cairo on any page/element; monospace is re-asserted right after so
   code / format helpers / the mass-order box keep their mono font. */
.body .wrapper-sidebar-navbar,
.body .wrapper-sidebar-navbar p, .body .wrapper-sidebar-navbar a,
.body .wrapper-sidebar-navbar span, .body .wrapper-sidebar-navbar div,
.body .wrapper-sidebar-navbar li, .body .wrapper-sidebar-navbar td,
.body .wrapper-sidebar-navbar th, .body .wrapper-sidebar-navbar label,
.body .wrapper-sidebar-navbar input, .body .wrapper-sidebar-navbar select,
.body .wrapper-sidebar-navbar textarea, .body .wrapper-sidebar-navbar button,
.body .wrapper-sidebar-navbar .btn, .body .wrapper-sidebar-navbar .card,
.body .wrapper-sidebar-navbar table, .body .wrapper-sidebar-navbar summary,
.body .wrapper-sidebar-navbar h1, .body .wrapper-sidebar-navbar h2,
.body .wrapper-sidebar-navbar h3, .body .wrapper-sidebar-navbar h4,
.body .wrapper-sidebar-navbar h5, .body .wrapper-sidebar-navbar h6{
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important; }
/* headings → Bricolage Grotesque */
.body .wrapper-sidebar-navbar h1, .body .wrapper-sidebar-navbar h2,
.body .wrapper-sidebar-navbar h3, .body .wrapper-sidebar-navbar h4,
.body .wrapper-sidebar-navbar h5, .body .wrapper-sidebar-navbar h6,
.body .wrapper-sidebar-navbar .card-title,
.body .wrapper-sidebar-navbar .totals-block__count-value{
  font-family:'Bricolage Grotesque','Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important; }
/* keep code / format helpers / mass-order box monospace */
.body .wrapper-sidebar-navbar code, .body .wrapper-sidebar-navbar pre,
.body .wrapper-sidebar-navbar kbd, .body .wrapper-sidebar-navbar samp,
.body .wrapper-sidebar-navbar .fs-api-code, .body .wrapper-sidebar-navbar .fs-mass-ta,
.body .wrapper-sidebar-navbar #mass, .body .wrapper-sidebar-navbar .mx-ta,
.body .wrapper-sidebar-navbar .mx-code, .body .wrapper-sidebar-navbar .mx-tpl__v,
.body .wrapper-sidebar-navbar .mx-gutter, .body .wrapper-sidebar-navbar .adx-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; }

/* ════════════════════════════════════════════════════════════════════════════
   13. UNIVERSAL CARD HOVER — lift + indigo outline + glow on EVERY card/box in
   the signed-in panel (matches the marketing service-card interaction). The
   outline is a box-shadow ring, so it shows even on cards with border:0.
   ════════════════════════════════════════════════════════════════════════════ */
.body .wrapper-sidebar-navbar .card,
.body .wrapper-sidebar-navbar .fs-side,
.body .wrapper-sidebar-navbar .fs-guide,
.body .wrapper-sidebar-navbar .cpx-card,
.body .wrapper-sidebar-navbar .cpx-panel,
.body .wrapper-sidebar-navbar .cpx-steps li,
.body .wrapper-sidebar-navbar .cpx-faq,
.body .wrapper-sidebar-navbar .totals-block__card,
.body .wrapper-sidebar-navbar .nx-card,
.body .wrapper-sidebar-navbar .mx-card,
.body .wrapper-sidebar-navbar .mx-acc__i,
.body .wrapper-sidebar-navbar .mx-tpl__row,
.body .wrapper-sidebar-navbar .adx-card,
.body .wrapper-sidebar-navbar .apx-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.body .wrapper-sidebar-navbar .card:hover,
.body .wrapper-sidebar-navbar .fs-side:hover,
.body .wrapper-sidebar-navbar .fs-guide:hover,
.body .wrapper-sidebar-navbar .cpx-card:hover,
.body .wrapper-sidebar-navbar .cpx-panel:hover,
.body .wrapper-sidebar-navbar .cpx-steps li:hover,
.body .wrapper-sidebar-navbar .cpx-faq:hover,
.body .wrapper-sidebar-navbar .totals-block__card:hover,
.body .wrapper-sidebar-navbar .nx-card:hover,
.body .wrapper-sidebar-navbar .mx-card:hover,
.body .wrapper-sidebar-navbar .mx-acc__i:hover,
.body .wrapper-sidebar-navbar .mx-tpl__row:hover,
.body .wrapper-sidebar-navbar .adx-card:hover,
.body .wrapper-sidebar-navbar .apx-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 0 0 1.5px rgba(79,70,229,.30), 0 16px 34px -14px rgba(79,70,229,.34) !important;
  border-color:rgba(79,70,229,.45) !important; }
/* wallet card keeps its indigo fill but still lifts */
.body .wrapper-sidebar-navbar .nx-wallet:hover{ box-shadow:0 0 0 1.5px rgba(255,255,255,.5), 0 20px 40px -16px rgba(79,70,229,.8) !important; }
@media(prefers-reduced-motion:reduce){
  .body .wrapper-sidebar-navbar .card:hover,.body .wrapper-sidebar-navbar .nx-card:hover,
  .body .wrapper-sidebar-navbar .cpx-card:hover,.body .wrapper-sidebar-navbar .mx-card:hover,
  .body .wrapper-sidebar-navbar .fs-side:hover{ transform:none !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   14. UNIVERSAL CARD HOVER — MARKETING + CONTENT PAGES (loads on every page via
   header). Same lift + indigo outline + glow as the panel. !important so each
   page's own card hover is unified to this one interaction. Ring via box-shadow
   → shows on borderless cards too. Marketing/content pages wrap in #fs; legal
   pages use plain .lg-* ; api uses .apx-*.
   ════════════════════════════════════════════════════════════════════════════ */
#fs .fs-pcard, #fs .fs-svccard, #fs .fs-card, #fs .fs-tile, #fs .fs-feat,
#fs .fs-step, #fs .fs-livecard, #fs .fs-aud-item, #fs .fs-tm, #fs .fs-faq, #fs .fs-bw,
#fs .pg-card, #fs .pg-panel, #fs .pg-info, #fs .pg-comp, #fs .pg-inc, #fs .pg-bene,
#fs .pg-metric, #fs .pg-step, #fs .pg-cta, #fs .box,
.lg-body, .lg-toc, .lg-note, .apx-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; }
#fs .fs-pcard:hover, #fs .fs-svccard:hover, #fs .fs-card:hover, #fs .fs-tile:hover,
#fs .fs-feat:hover, #fs .fs-step:hover, #fs .fs-livecard:hover, #fs .fs-aud-item:hover,
#fs .fs-tm:hover, #fs .fs-faq:hover, #fs .fs-bw:hover,
#fs .pg-card:hover, #fs .pg-panel:hover, #fs .pg-info:hover, #fs .pg-comp:hover,
#fs .pg-inc:hover, #fs .pg-bene:hover, #fs .pg-metric:hover, #fs .pg-step:hover,
#fs .pg-cta:hover, #fs .box:hover,
.lg-body:hover, .lg-toc:hover, .lg-note:hover, .apx-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 0 0 1.5px rgba(79,70,229,.32), 0 16px 34px -14px rgba(79,70,229,.34) !important;
  border-color:rgba(79,70,229,.45) !important; }
@media(prefers-reduced-motion:reduce){
  #fs .fs-svccard:hover,#fs .pg-card:hover,#fs .pg-panel:hover,#fs .pg-metric:hover,
  #fs .pg-step:hover,#fs .pg-bene:hover,#fs .box:hover,.lg-body:hover,.lg-toc:hover,.apx-card:hover{
    transform:none !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   15. DECORATIVE `.bg` CLICK-THROUGH (panel-wide safety net). The theme drops a
   `<div class="bg">` into every page block (ticket-form, affiliate-block,
   new_order-block, …). It is `position:absolute` and spans the whole block, so
   left as-is it paints on top of the (static) page content and — although fully
   transparent — swallows every click, making buttons/links/inputs unresponsive.
   It is purely decorative and never needs pointer input, so we let clicks pass
   straight through it on every authenticated panel page at once. Panel-scoped
   (`.wrapper-sidebar-navbar`) so marketing/public pages are untouched. No visual
   change — pointer-events does not affect painting.
   ════════════════════════════════════════════════════════════════════════════ */
.body .wrapper-sidebar-navbar .bg{ pointer-events:none; }