/* FxSVPS palette for the client area: Lagom's brand green becomes the
   header's amber.

   Lagom keeps its colour schemes as swappable palettes (colors/green.css,
   orange.css, …) and derives the rest with var() — 83 declarations read
   var(--brand-primary) alone. So only the palette needs restating here; every
   button, badge, alert, pill and gradient follows on its own.

   Two things are deliberately left green:
     --brand-success and friends. "Active", "Running" and a healthy gauge mean
     something by being green; turning them amber would say "warning".
     --svg-illustration-* — the artwork, not the interface.

   Delete this file and the portal is green again. */

:root{
  /* primary */
  --brand-primary:#FFC107;
  --brand-primary-lighter:#FFD75E;
  --brand-primary-lighter-2:#3A2E05;
  --brand-primary-darker:#C99200;
  --brand-primary-gradient-start:#FFC107;
  --brand-primary-gradient-end:#FFD75E;

  /* secondary */
  --brand-secondary:#E0A800;
  --brand-secondary-lighter:#FFD75E;
  --brand-secondary-darker:#8A6A00;
  --brand-secondary-gradient-start:#8A6A00;
  --brand-secondary-gradient-end:#E0A800;

  /* the same palette again for dark mode, which the portal runs in */
  --dark-mode-brand-primary:#FFC107;
  --dark-mode-brand-primary-lighter:#FFD75E;
  --dark-mode-brand-primary-darker:#C99200;
  --dark-mode-brand-primary-gradient-start:#FFC107;
  --dark-mode-brand-primary-gradient-end:#FFD75E;
  --dark-mode-brand-secondary:#E0A800;
  --dark-mode-brand-secondary-lighter:#FFD75E;
  --dark-mode-brand-secondary-darker:#8A6A00;

  /* a stray literal outside the palette */
  --gray-icons-hover:#FFC107;

  /* White on green reads; white on amber does not. Every fill that takes the
     brand colour gets dark ink instead. */
  --btn-primary-color:#140F00;
  --btn-primary-hover-color:#140F00;
  --btn-primary-active-color:#140F00;
  --btn-secondary-color:#140F00;
  --btn-secondary-hover-color:#140F00;
  --btn-secondary-active-color:#140F00;
  --nav-pills-link-active-color:#140F00;
  --alert-primary-text:#140F00;
  --alert-secondary-text:#140F00;
  --badge-primary-color:#140F00;
  --label-primary-color:#140F00;
  --label-secondary-color:#140F00;
  --range-slider-value-color:#140F00;
  --product-details-color:#140F00;
  --primary-block-color:#140F00;

  /* ── surfaces ──────────────────────────────────────────────────
     Lagom paints the portal in neutral greys: #121212 ground,
     #242424 panels, #2E2E2E dividers. Beside a header and footer
     built on blue-ink darks they read as washed out, which is what
     made the stat tiles look grey rather than dark.
     --ui-block-bg is the one that matters: --panel-bg reads it and
     --card-bg reads --panel-bg, so panels, cards and tiles all
     follow from this single value. */
  --ui-block-bg:#12161F;
  --ui-block-divider-color:rgba(255,255,255,.08);
  --dark-mode-body-bg:#080A0F;
  --dropdown-collapse-bg:#0F141C;
  --dropdown-bg:#12161F;
  --main-footer-bg:#06090D;
  --error-page-bg:#080A0F;
  --app-nav-top-bg:#0F141C;
  --mob-app-nav-bg:#0F141C;
  --mob-app-nav-header-bg:#0F141C;
  --mob-dropdown-nav-bg:#0F141C;
}

/* ── the service tile on Product Details ─────────────────────────────
   Lagom fills this 452x421 panel with the brand gradient, which was fine as a
   muted green but reads as a slab of highlighter in amber — and it sits right
   beside the dark Status panel, so the page lost its balance.
   Same idea, inverted: a dark card like its neighbour, with the amber spent on
   the icon, the hostname and a soft glow instead of the whole area. */
.product-icon{
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(255,193,7,.13) 0%, transparent 62%),
    linear-gradient(180deg,#151A24 0%,#0E121A 100%) !important;
  border:1px solid rgba(255,193,7,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* the cube becomes an amber outline: its white faces would vanish on dark */
.product-icon svg path,
.product-icon svg rect,
.product-icon svg circle,
.product-icon svg polygon,
.product-icon svg line{
  stroke:#FFC107 !important;fill:none !important;
}
.product-icon .product-content{color:#EEF1F6 !important;font-weight:600}
.product-icon .product-footer{color:#FFC107 !important}
.product-icon .product-footer:hover{color:#FFD75E !important}

/* ── the VPS management panel on Service Details ─────────────────────
   The proxmoxnat module ships its own themes and runs the green one
   (.pmx-green), with its own surfaces: #141c19 cards on a green-tinted
   hairline. Those are the small tool cards — Download RDP, Snapshot and the
   rest — which is why they stayed green after Lagom's palette changed.

   Its <style> block is inline in the page and therefore lands after this
   file, so these rules carry one extra class to outrank it rather than
   relying on order.

   --live stays as it is, and so do the CPU/memory/disk gauge strokes: those
   report health, and an amber gauge would read as a warning. */
body .pmx-green #pmx{
  --surface:#12161F;
  --surface2:#171C27;
  --panel:rgba(18,22,31,.6);
  --line:rgba(255,255,255,.08);
  --gb:rgba(255,255,255,.08);
  --r1:#C99200;
  --r2:#FFC107;
  --grad:linear-gradient(135deg,#C99200,#FFC107);
}
/* the animated rule across the top of the panel */
body .pmx-green #pmx::before{
  background:linear-gradient(90deg,#C99200,#FFC107,#FFD75E,#FFC107,#C99200) !important;
  background-size:300% 100% !important;
}
/* icon discs and the primary action follow the amber gradient */
body .pmx-green #pmx .tool .ic{box-shadow:0 8px 20px -10px rgba(201,146,0,.85)}
body .pmx-green #pmx .act.primary{
  background:linear-gradient(135deg,rgba(201,146,0,.22),rgba(255,193,7,.10)) !important;
  border-color:rgba(255,193,7,.5) !important;
}
body .pmx-green #pmx .act.primary .ic{border-color:rgba(255,193,7,.4) !important}
body .pmx-green #pmxRebootOv .opt.sel,
body .pmx-green #pmxRebootOv .day.sel{
  border-color:#FFC107 !important;
  background:linear-gradient(135deg,rgba(201,146,0,.2),rgba(255,193,7,.08)) !important;
}
body .pmx-green #pmxLatOv .ltab.on{background:linear-gradient(135deg,#C99200,#FFC107) !important}

/* ── primary blocks: the Order Summary and its relatives ─────────────
   --primary-block-bg is var(--brand-primary-gradient-v), so the moment the
   brand turned amber the whole Order Summary became a bright slab — with
   --primary-block-*-color still set to light text on top of it. An earlier
   attempt set --primary-block-color, which is not a token Lagom has.
   Same treatment as the service tile: a dark card, amber kept for the edge
   and the figure that matters. */
:root{
  --primary-block-bg:linear-gradient(180deg,#151A24 0%,#0E121A 100%);
  --primary-block-border:1px solid rgba(255,193,7,.22);
  --primary-block-title-color:#EEF1F6;
  --primary-block-text-color:#A3ABBC;
  --primary-block-text-faded-color:#8B93A3;

  /* "Save 12%" rode a pink Lagom kept for savings labels (#F2367A on #4d2830),
     which reads as an error next to everything else here. */
  --label-savings-bg:rgba(255,193,7,.12);
  --label-savings-color:#FFC107;
  --main-header-banner-save-label-bg:rgba(255,193,7,.12);
  --main-header-banner-save-label-color:#FFC107;
}

/* the total is the one figure worth the accent */
.order-summary .summary-total,
.order-summary .total-due-today,
.order-summary .summary-container .h2,
.order-summary .summary-container h2{color:#FFC107}

/* Register sits on an amber fill, so it needs dark ink — the generic
   .fx-hdr a{color:inherit} reset was reaching it first. */
.fx-hdr .fx-acct a.is-primary,
.fx-hdr .fx-acct a.is-primary:hover{color:#140F00 !important}

/* ── the neutral grey ramp ───────────────────────────────────────────
   Form panels, select borders and input add-ons draw from Lagom's grey
   scale, which is pure neutral (#2B2B2B … #666666). Against surfaces that
   are now blue-ink it reads as a different material — that is why the
   select boxes looked like they belonged to another page.
   The same steps, shifted onto the theme's hue; the light end becomes the
   text ramp the header and footer already use.
   Two greens were hiding in here as well: the icon hover and the grey
   gradient, which was a dark green (#012214). */
:root{
  --dark-mode-gray-faded:#141922;
  --dark-mode-gray-lighter-4:#171C27;
  --dark-mode-gray-lighter-3:#2A3242;
  --dark-mode-gray-lighter-2:#3C4657;
  --dark-mode-gray-lighter:#8B93A3;
  --dark-mode-gray-base:#A3ABBC;
  --dark-mode-gray-darker:#EEF1F6;
  --dark-mode-gray-icons:#A3ABBC;
  --dark-mode-gray-icons-hover:#FFC107;
  --dark-mode-gray-gradient-start:#0A0E153D;
  --dark-mode-gray-gradient-end:#0A0E15;

  /* the select and its neighbours, stated directly as well: these are the
     ones on screen in the order form */
  --input-bg:#0F141C;
  --input-border-color:#2A3242;
  --input-group-addon-bg:#171C27;
}

/* correction to the ramp above: --gray-lighter-2 is not only a border colour,
   it is --text-faded-color and the Cancelled / Closed status labels. Moving it
   down with the rest took that text from 3.1:1 to 1.9:1 against a panel.
   Same hue as the ramp, back to the weight it had. */
:root{ --dark-mode-gray-lighter-2:#6E7A8D; }

/* ── the selected option ─────────────────────────────────────────────
   A chosen billing cycle or config option was marked by the amber radio dot
   alone; the card behind it went to #171C27, one step from its neighbours'
   #12161F — easy to miss at a glance.
   Selection is the one state on this page worth spending the brand colour on,
   so it gets the golden gradient. A wash, not a fill: these cards are 264x118
   and a solid amber slab is what made the product tile too loud earlier. */
.lagom .panel.panel-check{
  transition:background .22s ease, box-shadow .22s ease;
}
.lagom .panel.panel-check.checked{
  background:
    linear-gradient(135deg, rgba(255,193,7,.17) 0%, rgba(201,146,0,.06) 55%, rgba(255,193,7,.02) 100%),
    linear-gradient(180deg,#171C27 0%,#12161F 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,193,7,.45),
    0 6px 20px -12px rgba(255,193,7,.5) !important;
}
/* an unchosen card answers the cursor with a hint of the same edge */
.lagom .panel.panel-check:not(.checked):hover{
  box-shadow:inset 0 0 0 1px rgba(255,193,7,.22) !important;
}

/* the dropdowns take the same accent while they are being used */
.lagom select.form-control:focus,
.lagom .form-control:focus{
  border-color:#FFC107 !important;
  box-shadow:0 0 0 3px rgba(255,193,7,.12) !important;
}

/* ── rows you can click ──────────────────────────────────────────────
   The service rows on the dashboard, and every other list row that leads
   somewhere, had Lagom's neutral hover (--list-group-item-link-hover-bg, a
   flat grey wash). They get the same golden gradient as a selected card, so
   "this row is under the cursor" and "this option is chosen" speak with one
   voice.

   Applied as background-image, not background: whatever sets the row's
   background-color keeps doing so and the gradient composites over it.
   Only rows that actually go somewhere — [data-href], links, buttons,
   .list-group-item-action — so static list items don't light up under a
   cursor that can't click them. */
.lagom .list-group-item-content[data-href],
.lagom a.list-group-item,
.lagom button.list-group-item,
.lagom .list-group-item-action{
  transition:background-image .2s ease, box-shadow .2s ease;
}
.lagom .list-group-item-content[data-href]:hover,
.lagom a.list-group-item:hover,
.lagom button.list-group-item:hover,
.lagom .list-group-item-action:hover{
  background-image:linear-gradient(135deg, rgba(255,193,7,.17) 0%, rgba(201,146,0,.06) 55%, rgba(255,193,7,.02) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,193,7,.35) !important;
}

/* ── the faded end of the palette, which the first pass missed ───────
   The palette above restated --brand-primary-lighter-2 but not -3 and -4,
   and not the secondary gradient's dark-mode twins. Those four kept the
   green palette's values and surfaced wherever a "faded brand" tint is
   used — the active sidebar item (#112C1C) and the knowledgebase search
   band (#0D5935 -> #0F9555).
   Same steps as the green ramp they replace, in gold. */
:root{
  --brand-primary-lighter-3:#2A2105;
  --brand-primary-lighter-4:#241C04;
  --dark-mode-brand-primary-lighter-2:#3A2E05;
  --dark-mode-brand-primary-lighter-3:#2A2105;
  --dark-mode-brand-primary-lighter-4:#241C04;
  --dark-mode-brand-secondary-gradient-start:#8A6A00;
  --dark-mode-brand-secondary-gradient-end:#E0A800;
}

/* ── the knowledgebase / support search band ─────────────────────────
   Fixing the secondary gradient above turned this 889x152 band into a slab
   of solid amber — the same thing that made the product tile too loud.
   The token itself stays correct for everything that wants a brand fill;
   this one band, being large, gets the dark treatment instead, with the
   amber kept for the edge, the glow and the Search button already sitting
   inside it. */
.lagom .search-box.search-box-secondary{
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(255,193,7,.15) 0%, transparent 62%),
    linear-gradient(180deg,#151A24 0%,#0E121A 100%) !important;
  border:1px solid rgba(255,193,7,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── Continue: the order page's one real action ──────────────────────
   Lagom ships this as btn-primary-faded, a muted slab — it read as the
   least important control on a page whose whole purpose is to reach it,
   while Register and See plans in the header carried the brand colour.
   Same amber fill and dark ink as those, so the eye lands where the page
   wants it to. */
.lagom .btn-checkout:not(.disabled):not([disabled]),
.lagom .btn-checkout:not(.disabled):not([disabled]):focus{
  background:linear-gradient(135deg,#FFC107 0%,#FFD75E 100%) !important;
  border-color:#FFC107 !important;
  color:#140F00 !important;
  box-shadow:0 8px 22px -14px rgba(255,193,7,.9) !important;
}
.lagom .btn-checkout:not(.disabled):not([disabled]):hover,
.lagom .btn-checkout:not(.disabled):not([disabled]):active{
  background:linear-gradient(135deg,#FFD75E 0%,#FFC107 100%) !important;
  border-color:#FFD75E !important;
  color:#140F00 !important;
}
.lagom .btn-checkout i,
.lagom .btn-checkout .ls{color:#140F00 !important}

/* The cart's Checkout button shares this class and sits disabled until there
   is something to buy. A full amber fill would invite a click that does
   nothing, so the disabled state stays muted. */
.lagom .btn-checkout.disabled,
.lagom .btn-checkout[disabled]{
  background:#171C27 !important;
  border-color:#2A3242 !important;
  color:#6E7A8D !important;
  box-shadow:none !important;
}
.lagom .btn-checkout.disabled i,
.lagom .btn-checkout[disabled] i{color:#6E7A8D !important}

/* ── overlays above the ported header ────────────────────────────────
   The marketing header carries its own stacking order up to z-index
   99900 — fine on a site with no dialogs, but in the portal it sat on
   top of every modal, hiding the title bar and the close button behind
   the logo strip. The agreements dialog was the one that showed it.

   Raised here rather than inside each module: the header will outrank
   the next dialog too, whoever writes it. Backdrop first, box above it,
   both clear of 99900. */
.fxl-modal,
.modal,
.modal.in,
.modal.show,
.swal2-container,
.ui-dialog,
.pnotify-modal-overlay{ z-index:100010 !important }

.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show{ z-index:100000 !important }

/* A dialog taller than the screen has to scroll on its own, or its foot
   ends up somewhere no one can reach. */
.fxl-modal{ overflow-y:auto }

/* ── login, register and password reset ──────────────────────────────
   These pages paint .main-body with --brand-secondary-gradient-v, which
   became a full-screen slab of gold the moment the brand turned amber —
   1385x707 of it behind the sign-in card.
   Same treatment as the product tile and the knowledge base band: a dark
   ground with the amber spent on light rather than on area. The glow sits
   behind the card, so the card reads as lit rather than pasted on. */
.lagom.page-login .main-body,
.lagom.page-register .main-body,
.lagom.page-pwreset .main-body{
  background:
    radial-gradient(900px 420px at 50% 32%, rgba(255,193,7,.14) 0%, transparent 60%),
    radial-gradient(600px 300px at 12% 88%, rgba(201,146,0,.08) 0%, transparent 62%),
    linear-gradient(180deg,#0B0F16 0%,#080A0F 100%) !important;
}

/* The card itself: a defined edge and real depth, so it sits on the glow
   instead of floating in it. */
.lagom.page-login .main-body .ui-block,
.lagom.page-register .main-body .ui-block,
.lagom.page-pwreset .main-body .ui-block{
  /* The card's own surface is #12161F, near enough to the ground behind it
     that the edges disappeared. Lifted a step, with a real edge. */
  background:linear-gradient(180deg,#171C27 0%,#0F131B 100%) !important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95),
             0 0 0 1px rgba(255,193,7,.06),
             inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
}

/* A hairline of brand colour along the top: enough to say whose login this
   is without turning the page gold again. */
.lagom.page-login .main-body .ui-block::before,
.lagom.page-register .main-body .ui-block::before,
.lagom.page-pwreset .main-body .ui-block::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#FFC107 35%,#FFD75E 65%,transparent);
  opacity:.8;
}

/* ── the sign-in stage ───────────────────────────────────────────────
   Markup comes from includes/hooks/fxsvps_login.php, which inserts the
   panel as a sibling of .login. The form itself is untouched: WHMCS
   still owns the fields, the captcha and the POST. */
.fxlg-split{
  display:grid !important;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  align-items:center;
  gap:48px;
  max-width:1180px !important;
  width:100% !important;
}
.fxlg-split > .login{ width:100% !important; max-width:420px; margin:0 auto !important }

.fxlg-stage{
  position:relative;overflow:hidden;border-radius:18px;
  padding:32px 34px;min-height:440px;
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(760px 420px at 22% 18%, rgba(255,193,7,.11), transparent 62%),
    radial-gradient(520px 380px at 84% 92%, rgba(52,224,161,.05), transparent 65%),
    linear-gradient(160deg,#0C1017 0%,#070A10 72%);
}
.fxlg-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 35%,#000 20%,transparent 85%);
  mask-image:radial-gradient(70% 60% at 30% 35%,#000 20%,transparent 85%);
}
.fxlg-scan{
  position:absolute;left:0;right:0;height:170px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,193,7,.045),transparent);
  animation:fxlg-scan 7.5s linear infinite;
}
@keyframes fxlg-scan{0%{top:-170px}100%{top:100%}}

.fxlg-brand{display:flex;align-items:center;gap:11px;position:relative;z-index:2}
.fxlg-bolt{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#FFC107,#FFD75E);color:#140F00;font-size:18px;
  box-shadow:0 8px 22px -12px rgba(255,193,7,.9)}
.fxlg-brand b{font-size:19px;letter-spacing:-.4px;color:#EEF1F6}
.fxlg-since{font-size:9.5px;letter-spacing:.16em;color:#6E7A8D;
  border:1px solid rgba(255,255,255,.14);padding:4px 7px;border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace}

.fxlg-lede{position:relative;z-index:2;margin:26px 0 0}
.fxlg-lede h2{font-size:clamp(26px,2.5vw,38px);line-height:1.1;margin:0;
  letter-spacing:-1px;font-weight:700;color:#EEF1F6;max-width:14ch;text-wrap:balance}
.fxlg-lede h2 em{font-style:normal;color:#FFC107}
.fxlg-lede p{margin:14px 0 0;color:#A3ABBC;font-size:14px;line-height:1.65;max-width:40ch}

.fxlg-board{position:relative;z-index:2;margin-top:auto;padding-top:26px}
.fxlg-hero{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px}
.fxlg-n{font:700 52px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:-2px;
  background:linear-gradient(180deg,#fff,#FFD75E);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.fxlg-u{font:600 14px/1 ui-monospace,Menlo,monospace;color:#A3ABBC;padding-bottom:8px}
.fxlg-to{padding-bottom:7px;font-size:12px;color:#6E7A8D;line-height:1.5}
.fxlg-to b{display:block;color:#EEF1F6;font-size:13.5px}

.fxlg-nodes{display:grid;gap:7px;max-width:520px}
.fxlg-node{display:grid;grid-template-columns:15px 1fr 76px 50px;align-items:center;gap:12px;
  padding:9px 13px;border:1px solid rgba(255,255,255,.08);border-radius:9px;
  background:rgba(23,28,39,.55);opacity:0;transform:translateY(9px);
  animation:fxlg-rise .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fxlg-rise{to{opacity:1;transform:none}}
.fxlg-node.is-best{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.055)}
.fxlg-dot{width:7px;height:7px;border-radius:50%;background:#34E0A1;
  box-shadow:0 0 0 0 rgba(52,224,161,.55);animation:fxlg-pulse 2.6s ease-out infinite}
.fxlg-node.is-best .fxlg-dot{background:#FFC107;box-shadow:0 0 0 0 rgba(255,193,7,.6)}
@keyframes fxlg-pulse{70%{box-shadow:0 0 0 9px rgba(52,224,161,0)}
  100%{box-shadow:0 0 0 0 rgba(52,224,161,0)}}
.fxlg-city{font-size:13px;color:#EEF1F6}
.fxlg-city i{font-style:normal;color:#6E7A8D;font-size:11px;margin-left:7px;
  font-family:ui-monospace,Menlo,monospace}
.fxlg-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fxlg-bar > span{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#C99200,#FFC107);
  animation:fxlg-fill 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fxlg-fill{to{width:var(--w)}}
.fxlg-ms{font:600 12.5px/1 ui-monospace,Menlo,monospace;text-align:right;color:#A3ABBC}
.fxlg-node.is-best .fxlg-ms{color:#FFC107}

.fxlg-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.fxlg-chip{font:600 11px/1 ui-monospace,Menlo,monospace;color:#A3ABBC;
  border:1px solid rgba(255,255,255,.08);padding:7px 11px;border-radius:99px;
  display:flex;align-items:center;gap:7px;background:rgba(15,19,27,.6)}
.fxlg-d{width:5px;height:5px;border-radius:50%;background:#34E0A1}

@media (max-width:991px){
  .fxlg-split{grid-template-columns:1fr;gap:26px;max-width:520px !important}
  /* form first on a phone: the panel is context, not the task */
  .fxlg-stage{order:2;min-height:0;padding:28px 24px}
  .fxlg-split > .login{order:1;max-width:none}
  .fxlg-lede h2{max-width:none}
  .fxlg-board{padding-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .fxlg-scan{display:none}
  .fxlg-node{opacity:1;transform:none;animation:none}
  .fxlg-bar > span{width:var(--w);animation:none}
  .fxlg-dot{animation:none}
}

/* ── the sign-in card ────────────────────────────────────────────────
   Beside the latency panel the stock card read as a plain box: system
   labels, flat inputs, no texture. Same instrument language here —
   mono micro-labels like the SIN/IAD codes, inputs sunk into the card
   rather than sitting on it, amber kept for focus and the action.
   CSS only: the fields, the captcha and the button are WHMCS's. */
.fxlg-split > .login .login-wrapper{
  position:relative;overflow:hidden;border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 180px),
    linear-gradient(180deg,#171C27 0%,#0E121A 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
}
.fxlg-split > .login .login-wrapper::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#FFC107 35%,#FFD75E 65%,transparent);
  opacity:.85;
}
.fxlg-split > .login .login-body{padding:34px 32px 26px}

/* an eyebrow and a tighter title */
.fxlg-split .fxlg-eyebrow{
  font:600 10px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:#6E7A8D;
  display:block;margin:0 0 9px;
}
.fxlg-split > .login .login-title{
  font-size:23px !important;letter-spacing:-.5px;margin:0 0 24px !important;
  text-align:left !important;font-weight:700;color:#EEF1F6;
}

/* micro-labels, in the same mono as the node codes */
.fxlg-split > .login .login-form label{
  font:600 10px/1 ui-monospace,Menlo,Consolas,monospace !important;
  letter-spacing:.14em;text-transform:uppercase;color:#8B93A3 !important;
  margin-bottom:7px !important;
}
.fxlg-split > .login .login-form .d-flex.space-between{align-items:baseline}
.fxlg-split > .login .login-form .d-flex.space-between a{
  font:600 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;
  color:#FFC107;text-transform:uppercase;
}

/* inputs sunk into the card */
.fxlg-split > .login .login-form .form-control{
  background:#090D14 !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:9px !important;
  color:#EEF1F6 !important;
  height:auto !important;padding:12px 14px !important;font-size:14px !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45) !important;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.fxlg-split > .login .login-form .form-control::placeholder{color:#5A6474 !important}
.fxlg-split > .login .login-form .form-control:focus{
  border-color:#FFC107 !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 3px rgba(255,193,7,.13) !important;
}
.fxlg-split > .login .login-form .form-group{margin-bottom:17px}

/* remember me */
.fxlg-split > .login .login-form label.checkbox{
  font:400 12.5px/1.4 inherit !important;letter-spacing:0 !important;
  text-transform:none !important;color:#A3ABBC !important;
}

/* the action */
.fxlg-split > .login .login-form #login{
  border:0 !important;border-radius:9px !important;padding:13px !important;
  font-weight:600 !important;font-size:14px !important;letter-spacing:.01em;
  color:#140F00 !important;
  background:linear-gradient(135deg,#FFC107 0%,#FFD75E 100%) !important;
  box-shadow:0 14px 30px -18px rgba(255,193,7,.95) !important;
  transition:filter .16s ease, transform .12s ease;
}
.fxlg-split > .login .login-form #login:hover{filter:brightness(1.06)}
.fxlg-split > .login .login-form #login:active{transform:translateY(1px)}

/* captcha sits in its own well so it stops looking pasted on */
.fxlg-split > .login .login-captcha{
  margin:2px 0 18px;padding:10px;border-radius:9px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:center;
}

/* footer + the security strip the hook adds */
.fxlg-split > .login .login-footer{
  padding:16px 32px 20px !important;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.015);
  text-align:center;font-size:12.5px;
}
.fxlg-split > .login .login-footer a{color:#FFC107;font-weight:600}
.fxlg-split .fxlg-secure{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.055);
  font:400 10.5px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.06em;color:#5A6474;
}

@media (max-width:991px){
  .fxlg-split > .login .login-body{padding:28px 22px 22px}
  .fxlg-split > .login .login-footer{padding:14px 22px 18px !important}
}

/* The footer holds two separate statements; Lagom lays its own text out
   inline, so the security line landed beside "Not a member yet?" and
   broke the sentence over two lines. Stack them. */
.fxlg-split > .login .login-footer{
  display:flex !important;flex-direction:column;align-items:stretch;gap:0;
}
.fxlg-split > .login .login-footer > *{width:100%;text-align:center;float:none !important}
.fxlg-split > .login .login-footer .text-light{
  display:block;line-height:1.6;color:#A3ABBC;
}

/* ── the world on the sign-in stage ──────────────────────────────────
   Replaces the latency list. Drawn in SVG by the hook: no image, no
   mapping library, nothing fetched on the page where people type their
   password. */
.fxlg-map{position:relative;z-index:2;margin-top:auto;padding-top:22px}
#fxlg-world{width:100%;max-width:600px;display:block;overflow:visible}
.fxlg-dotland{fill:rgba(255,255,255,.13)}
.fxlg-route{
  stroke:rgba(255,193,7,.32);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:5 7;animation:fxlg-dash 2.4s linear infinite;
}
@keyframes fxlg-dash{to{stroke-dashoffset:-24}}
.fxlg-pulse{fill:#FFD75E}
.fxlg-pin{fill:#34E0A1}
.fxlg-pin.is-best{fill:#FFC107}
.fxlg-ring{fill:none;stroke:#FFC107;stroke-width:1.2;opacity:.85;
  animation:fxlg-ring 2.8s ease-out infinite}
@keyframes fxlg-ring{0%{r:4;opacity:.8}70%{r:15;opacity:0}100%{r:15;opacity:0}}
.fxlg-plabel{fill:#8B93A3;font:600 9px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.06em}
.fxlg-plabel.is-best{fill:#FFC107}

.fxlg-strip{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
.fxlg-leg{display:flex;flex-direction:column;gap:5px}
.fxlg-leg i{font:600 9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#6E7A8D;font-style:normal}
.fxlg-leg b{font:700 15px/1 ui-monospace,Menlo,monospace;color:#EEF1F6}
.fxlg-leg b.am{color:#FFC107}

@media (max-width:991px){
  .fxlg-map{padding-top:18px}
  .fxlg-plabel{font-size:8px}
  .fxlg-strip{gap:18px}
  .fxlg-leg b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .fxlg-route{animation:none}
}

/* Heading 4 is a noun phrase, not a sentence with a number in it — it
   reads better on two lines than squeezed onto three. */
/* Heading 2 is a full sentence: at a narrow measure it split "Welcome"
   from "back." and read as four stubs. Wider, it falls into three. */
.fxlg-lede h2{max-width:19ch}

/* ── a light travelling the border ───────────────────────────────────
   A conic gradient rotated behind a ring-shaped mask, so only the 1px
   edge is painted. The angle is animated through a registered custom
   property because plain CSS cannot interpolate an angle inside a
   gradient; where @property is unsupported the glint simply sits still
   in the top corner, which still looks deliberate.
   The panel needs a transparent border for the ring to sit in, and the
   mask must exclude the middle or the whole box would be washed amber. */
@property --fxlg-a{ syntax:'<angle>'; initial-value:0deg; inherits:false }

.fxlg-stage{border-color:transparent}
.fxlg-stage::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  z-index:4;
  background:conic-gradient(from var(--fxlg-a),
    rgba(255,255,255,.07) 0 62%,
    rgba(255,193,7,.55) 74%,
    #FFD75E 80%,
    rgba(255,193,7,.55) 86%,
    rgba(255,255,255,.07) 96% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:fxlg-border 9s linear infinite;
}
@keyframes fxlg-border{to{--fxlg-a:360deg}}

/* the same light on the sign-in card, a little quieter and out of step
   so the two edges do not pulse in unison */
.fxlg-split > .login .login-wrapper{border-color:transparent}
.fxlg-split > .login .login-wrapper::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:4;
  background:conic-gradient(from var(--fxlg-a),
    rgba(255,255,255,.08) 0 66%,
    rgba(255,193,7,.40) 78%,
    #FFD75E 84%,
    rgba(255,255,255,.08) 94% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:fxlg-border 9s linear infinite;
  animation-delay:-4.5s;
}

@media (prefers-reduced-motion:reduce){
  .fxlg-stage::after,
  .fxlg-split > .login .login-wrapper::after{animation:none}
}

/* ── VPS panel: tone variation across the tool cards ──────────────────
   Every disc carried the same amber, so a grid of eight read as one block of
   colour with different pictures on it. These four tones all sit inside the
   brand's own range - bright amber, burnt gold, honey, deep gold - so the
   grid gains a rhythm without becoming a palette.

   Paid add-ons drop to bronze. That is the one distinction here that carries
   information rather than decoration: it says "not included" before the price
   chip is read. The ones already paid for are live, so they wear the brand
   colour and stand out from the rest of that row. */
body .pmx-green #pmx .tools .tool:nth-child(4n+1) .ic{background:linear-gradient(135deg,#C99200,#FFC107)}
body .pmx-green #pmx .tools .tool:nth-child(4n+2) .ic{background:linear-gradient(135deg,#A8721B,#F0B429)}
body .pmx-green #pmx .tools .tool:nth-child(4n+3) .ic{background:linear-gradient(135deg,#B8860B,#FFD75E)}
body .pmx-green #pmx .tools .tool:nth-child(4n+4) .ic{background:linear-gradient(135deg,#8C6A12,#E0A800)}

body .pmx-green #pmx .st.paid + .tools .tool .ic{
  background:linear-gradient(135deg,#6A5524,#B08A3A);
  box-shadow:0 8px 20px -10px rgba(120,95,40,.9)}
body .pmx-green #pmx .st.paid + .tools .tool:has(.tag.on) .ic{
  background:linear-gradient(135deg,#C99200,#FFC107);
  box-shadow:0 8px 20px -10px rgba(201,146,0,.85)}

/* ── and the select animation ─────────────────────────────────────────
   What was there: a pale diagonal sliding across the card, a green drop
   shadow and an orange border light - the sweep is the shimmer every template
   ships with, and neither of those colours has been the brand for months.

   What replaces it: the border lights up amber from the top left, the card
   rises a little less than before, and - the part that was missing - a press
   has its own state. A click now feels like a button instead of the page
   quietly reflowing under the cursor. */
body .pmx-green #pmx .tool::after{display:none}

body .pmx-green #pmx .tool::before{
  background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(201,146,0,.35) 45%,transparent 70%);
  transition:opacity .25s ease}

body .pmx-green #pmx .tool:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 16px 34px -20px rgba(201,146,0,.75)!important}

body .pmx-green #pmx .tool:active{
  transform:translateY(-1px) scale(.985)!important;
  transition-duration:.09s}
body .pmx-green #pmx .tool:active .ic{transform:scale(.97)}

/* the same press on the Power row, so the two behave alike */
body .pmx-green #pmx .act:active{transform:translateY(0) scale(.985);transition-duration:.09s}
body .pmx-green #pmx .act:active .ic{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  body .pmx-green #pmx .tool,
  body .pmx-green #pmx .tool .ic,
  body .pmx-green #pmx .act,
  body .pmx-green #pmx .act .ic{transition:none!important;animation:none!important}
  body .pmx-green #pmx .tool:hover{transform:none!important}
}

/* ── side rail and its drawers ────────────────────────────────────────
   Task History and Latest Emails are fixed to the viewport, so they sit
   outside #pmx and restate their own tokens. Those were never updated when
   the brand turned amber: a grey slab hanging off the edge, a green active
   tab, a red one next to it, and green links inside. Restating the tokens
   here fixes nearly all of it at once, because everything in the drawer is
   drawn from them. */
body #pmxRail,
body .pmxdrw{
  --s:#12161F;               /* same surface as the panel */
  --s2:#171C27;
  --ln:rgba(255,255,255,.08);
  --tx:#EEF1F6;
  --mu:#A3ABBC;
  --fa:#8B93A3;
  --lv:#FFC107;              /* chrome accent: links, active chips, arrows */
}

/* The tabs themselves. Same card surface as the panel, with an amber hairline
   down the edge so they read as part of it rather than something bolted on. */
body #pmxRail .seg.task,
body #pmxRail .seg.mail{
  background:linear-gradient(180deg,#171C27,#12161F);
  color:#A3ABBC;
  box-shadow:inset 1px 0 0 rgba(255,193,7,.20);
}
body #pmxRail .seg:hover{color:#FFD75E}

/* Open state: one amber tab, dark text on it. Both tabs used to be different
   colours from each other - green and red - which suggested a meaning neither
   of them has. */
body #pmxRail .seg.task.on,
body #pmxRail .seg.mail.on{
  background:linear-gradient(160deg,#FFD75E,#C99200);
  color:#140F00;
  box-shadow:inset 1px 0 0 rgba(255,193,7,.55);
}

/* the filter chips at the top of Task History */
body .pmxdrw .fl span.on{
  border-color:rgba(255,193,7,.45);
  color:#FFC107;
  background:rgba(255,193,7,.11);
}

/* a hovered row lifts slightly in amber rather than plain white */
body .pmxdrw .pmxml:hover{background:rgba(255,193,7,.045)}

/* Status dots keep their own colours on purpose: green for done, amber for
   running, red for failed. Those say what happened, and are not brand. */

/* the mail reader sits over the list - keep it on the panel surface */
body .pmxdrw .pmxrd{background:var(--s)}

/* ── the drawer: narrower, and clear of the menu bar ──────────────────
   It was fixed to top:0 at z-index 9999, under a sticky site header sitting at
   99000 - so the menu bar was painted straight across the heading inside the
   drawer. Raising the drawer above the header would hide the nav instead;
   starting it below the header fixes the overlap and leaves the menu usable
   while the drawer is open. The header measures 105px on both desktop and
   phone, so one figure covers both. */
body .pmxdrw{
  top:105px;
  height:calc(100% - 105px);
  width:330px;
}