/* First2Host client portal — WHMCS 9 / Nexus child theme */

:root {
    /* Nexus system variables: retained because the parent theme consumes them. */
    --white: #fff;
    --neutral-50: #f8faff;
    --neutral-100: #f3f6fb;
    --neutral-200: #e4eaf3;
    --neutral-300: #d2dce9;
    --neutral-400: #9aa9bf;
    --neutral-500: #71809e;
    --neutral-600: #52617d;
    --neutral-700: #3d4c6d;
    --neutral-800: #263451;
    --neutral-900: #101a34;
    --neutral-950: #070d20;
    --primary-50: #edf5ff;
    --primary-100: #dcecff;
    --primary-200: #bddaff;
    --primary-300: #91c1ff;
    --primary-400: #5ca0ff;
    --primary-500: #2e86ff;
    --primary-600: #1267ff;
    --primary-700: #174fd7;
    --primary-800: #183faa;
    --primary-900: #183781;
    --primary-950: #0e214f;
    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);
    --success: #159f74;
    --success-lifted: #087a5a;
    --success-accented: #075f49;
    --info: #1475e8;
    --info-lifted: #125dbe;
    --info-accented: #174b93;
    --notice: #6547d7;
    --notice-lifted: #5033bb;
    --notice-accented: #422b93;
    --warning: #d48413;
    --warning-lifted: #ae680a;
    --warning-accented: #86510b;
    --error: #df4862;
    --error-lifted: #bd314d;
    --error-accented: #97263e;
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);
    --text-inverted: var(--white);
    --text-muted: #5f6f8a;
    --text-lifted: var(--neutral-600);
    --text-accented: var(--neutral-700);
    --text: var(--neutral-900);
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: #070a35;
    --yellow-200: #fff0a6;
    --yellow-300: #ffda58;
    --teal-300: #68f0d7;
    --teal-400: #25cdb4;
    --emerald-300: #68f0c5;
    --pink-400: #ed69ae;
    --text-xs: .625rem;
    --text-sm: .75rem;
    --text-md: .875rem;
    --text-lg: 1rem;
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;
    --rounding-sm: .5rem;
    --rounding-md: .75rem;
    --rounding-lg: 1rem;
    --letter-spacing: 0em;
    --disabled-opacity: 35%;

    --f2h-navy-950: #02051b;
    --f2h-navy-925: #04082a;
    --f2h-navy-900: #070a35;
    --f2h-navy-850: #08123d;
    --f2h-navy-800: #0a1848;
    --f2h-navy-750: #0c2058;
    --f2h-blue-700: #1744dc;
    --f2h-blue-600: #1267ff;
    --f2h-blue-500: #2e86ff;
    --f2h-cyan-400: #3edfff;
    --f2h-green-500: #24c995;
    --f2h-green-300: #68f0c5;
    --f2h-amber-500: #f3a525;
    --f2h-red-500: #e84e68;
    --f2h-canvas: #f3f6fb;
    --f2h-surface: #ffffff;
    --f2h-surface-muted: #f8faff;
    --f2h-ink: #101a34;
    --f2h-ink-soft: #3d4c6d;
    --f2h-muted: #5f6f8a;
    --f2h-line: #dce4f1;
    --f2h-line-strong: #c9d5e7;
    --f2h-radius-xs: 8px;
    --f2h-radius-sm: 12px;
    --f2h-radius-md: 16px;
    --f2h-radius-lg: 22px;
    --f2h-radius-xl: 30px;
    --f2h-shadow-sm: 0 8px 26px rgba(30, 58, 108, .08);
    --f2h-shadow-md: 0 18px 50px rgba(28, 55, 106, .12);
    --f2h-shadow-lg: 0 34px 90px rgba(0, 10, 45, .24);
    --f2h-wrap: 1420px;
    --f2h-ease: cubic-bezier(.22, .8, .2, 1);
}

/* --------------------------------------------------------------------------
   Order catalogue product stage
   The catalogue is an outcome-led visual selector. Product configuration is
   intentionally handed to the live website assemblers rather than duplicated.
   -------------------------------------------------------------------------- */

.f2h-order-stage,
.f2h-order-stage * {
    box-sizing: border-box;
}

.f2h-order-stage {
    --f2h-stage-text: #f6f9ff;
    --f2h-stage-copy: #c0cee2;
    --f2h-stage-muted: #8ea2be;
    --f2h-stage-blue: #5bcaff;
    --f2h-stage-violet: #9d85ff;
    --f2h-stage-mint: #61e5c0;
    width: 100%;
    color: var(--f2h-stage-copy);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.f2h-order-stage :where(button, a) {
    font: inherit;
}

.f2h-order-stage :where(h1, h2, p, ul) {
    margin-top: 0;
    text-shadow: none;
}

.f2h-stage-intro {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.25fr) auto;
    gap: clamp(24px, 3vw, 54px);
    align-items: end;
    margin: 0 0 20px;
    padding: 0 4px;
}

.f2h-stage-intro-copy h1 {
    margin: 5px 0 0;
    color: var(--f2h-stage-text);
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 820;
    letter-spacing: -.045em;
    line-height: 1;
}

.f2h-stage-kicker,
.f2h-stage-scene-label {
    color: #69dcff;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-stage-intro > p {
    max-width: 720px;
    margin: 0;
    color: #becce0;
    font-size: 16px;
    font-weight: 520;
    line-height: 1.62;
}

.f2h-stage-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.f2h-stage-availability,
.f2h-stage-cart {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(113, 151, 205, .2);
    border-radius: 999px;
    color: #b8c8dc;
    background: rgba(9, 24, 50, .62);
    font-size: 13px;
    font-weight: 750;
}

.f2h-stage-availability i,
.f2h-stage-live-note i,
.f2h-stage-health i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--f2h-stage-mint);
    box-shadow: 0 0 12px rgba(97, 229, 192, .8);
}

.f2h-stage-cart {
    color: #eaf3ff;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.f2h-stage-cart:hover,
.f2h-stage-cart:focus-visible {
    border-color: rgba(91, 202, 255, .62);
    color: #fff;
    background: rgba(22, 91, 158, .48);
    text-decoration: none;
    outline: none;
}

.f2h-stage-layout {
    display: grid;
    grid-template-columns: clamp(264px, 18vw, 304px) minmax(0, 1fr);
    min-height: 640px;
    overflow: hidden;
    border: 1px solid rgba(118, 158, 218, .24);
    border-radius: 24px;
    background: #061126;
    box-shadow: 0 28px 80px rgba(0, 4, 24, .34), inset 0 1px rgba(255, 255, 255, .05);
}

.f2h-stage-rail {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    padding: 20px 0;
    border-right: 1px solid rgba(116, 153, 205, .18);
    background:
        radial-gradient(circle at 0 0, rgba(101, 72, 220, .2), transparent 45%),
        linear-gradient(180deg, rgba(10, 24, 52, .98), rgba(5, 15, 34, .98));
}

.f2h-stage-choice {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 15px 21px;
    border: 0;
    border-radius: 0;
    color: #8498b5;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.f2h-stage-choice::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(#a58cff, #4ed7ff);
    box-shadow: 0 0 18px rgba(93, 203, 255, .5);
    content: "";
    opacity: 0;
    transition: opacity .18s ease;
}

.f2h-stage-choice:hover,
.f2h-stage-choice:focus-visible,
.f2h-stage-choice[aria-selected="true"] {
    color: #fff;
    background: linear-gradient(90deg, rgba(92, 71, 202, .23), rgba(38, 111, 174, .08), transparent);
    outline: none;
}

.f2h-stage-choice[aria-selected="true"]::before {
    opacity: 1;
}

.f2h-stage-index {
    color: #607694;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.f2h-stage-choice[aria-selected="true"] .f2h-stage-index {
    color: #72d9ff;
}

.f2h-stage-choice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.f2h-stage-choice-copy strong {
    color: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.f2h-stage-choice-copy small {
    overflow: hidden;
    color: #8296b2;
    font-size: 13px;
    font-weight: 520;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f2h-stage-choice[aria-selected="true"] .f2h-stage-choice-copy small {
    color: #afc1d8;
}

.f2h-stage-choice-arrow {
    color: #536b8d;
    font-size: 29px;
    font-weight: 300;
    line-height: 1;
}

.f2h-stage-choice[aria-selected="true"] .f2h-stage-choice-arrow {
    color: #60d3ff;
}

.f2h-stage-viewport {
    position: relative;
    min-width: 0;
    min-height: 640px;
    overflow: hidden;
    isolation: isolate;
    background: #07142c;
}

.f2h-stage-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding: clamp(34px, 3.4vw, 56px);
    color: var(--f2h-stage-copy);
    background:
        radial-gradient(circle at 82% 22%, rgba(26, 149, 221, .2), transparent 31%),
        radial-gradient(circle at 64% 100%, rgba(109, 72, 220, .17), transparent 35%),
        linear-gradient(135deg, #081631, #061027 72%);
}

.f2h-stage-scene[hidden] {
    display: none !important;
}

.f2h-stage-scene::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(125, 162, 218, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 162, 218, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    mask-image: linear-gradient(115deg, transparent 5%, #000 55%, #000 100%);
}

.f2h-stage-scene.is-hosting,
.f2h-stage-scene.is-reseller {
    background:
        linear-gradient(90deg, rgba(4, 13, 32, .99) 0%, rgba(5, 17, 39, .96) 42%, rgba(5, 17, 39, .38) 74%, rgba(5, 17, 39, .17) 100%),
        url('../images/order/hosting-stage.webp') center right / cover no-repeat;
}

.f2h-stage-scene.is-reseller {
    background-position: 68% center;
    filter: saturate(.96);
}

.f2h-stage-scene.is-dedicated {
    background:
        linear-gradient(90deg, rgba(3, 11, 27, .99) 0%, rgba(4, 14, 32, .94) 44%, rgba(5, 16, 34, .5) 72%, rgba(5, 16, 34, .26) 100%),
        url('../images/order/dedicated-stage.webp') center / cover no-repeat;
}

.f2h-stage-scene.is-cloud {
    background:
        linear-gradient(90deg, rgba(3, 10, 26, .995) 0%, rgba(4, 14, 33, .98) 37%, rgba(5, 17, 39, .72) 59%, rgba(5, 16, 34, .2) 100%),
        linear-gradient(0deg, rgba(3, 9, 23, .38), rgba(3, 9, 23, 0) 54%),
        url('../images/order/cloud-stage-servers.png') center right / cover no-repeat;
}

.f2h-stage-scene-copy {
    position: relative;
    z-index: 3;
    width: min(610px, 58%);
}

.f2h-stage-scene-copy h2 {
    margin: 11px 0 15px;
    color: var(--f2h-stage-text);
    font-size: clamp(38px, 4vw, 59px);
    font-weight: 830;
    letter-spacing: -.05em;
    line-height: .99;
}

.f2h-stage-scene-copy p {
    max-width: 590px;
    margin: 0;
    color: #bdcbe0;
    font-size: 16.5px;
    font-weight: 520;
    line-height: 1.62;
}

.f2h-stage-use-list {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: min(610px, 58%);
    margin: 23px 0 0;
    padding: 0;
    list-style: none;
}

.f2h-stage-use-list li {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(120, 158, 214, .24);
    border-radius: 999px;
    color: #cfdbeb;
    background: rgba(7, 23, 49, .7);
    font-size: 13px;
    font-weight: 700;
}

.f2h-stage-proof,
.f2h-stage-platforms {
    position: absolute;
    z-index: 4;
    top: 44px;
    right: 40px;
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 55px;
    padding: 10px 14px;
    border: 1px solid rgba(137, 170, 220, .22);
    border-radius: 14px;
    background: rgba(6, 18, 40, .76);
    box-shadow: 0 15px 42px rgba(0, 4, 21, .24);
}

.f2h-stage-proof > span,
.f2h-stage-platforms > span {
    color: #8499b7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-stage-proof img,
.f2h-stage-platforms img {
    width: auto;
    max-width: 76px;
    height: 25px;
    object-fit: contain;
}

.f2h-stage-proof img.is-wide {
    max-width: 88px;
    height: 22px;
}

.f2h-stage-site-fleet {
    position: absolute;
    right: 44px;
    bottom: 68px;
    z-index: 3;
    width: min(340px, 32%);
    overflow: hidden;
    border: 1px solid rgba(125, 162, 216, .24);
    border-radius: 16px;
    color: #d8e4f2;
    background: rgba(5, 17, 38, .82);
    box-shadow: 0 18px 50px rgba(0, 4, 20, .28);
}

.f2h-stage-site-fleet > span {
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(125, 162, 216, .16);
    color: #8da2be;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.f2h-stage-site-fleet > div {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(125, 162, 216, .1);
    font-size: 13px;
}

.f2h-stage-site-fleet > div:last-child {
    border-bottom: 0;
}

.f2h-stage-site-fleet strong {
    color: #dbe7f5;
    font-weight: 720;
}

.f2h-stage-site-fleet em {
    color: #62e1bd;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.f2h-stage-cta {
    position: absolute;
    bottom: 39px;
    left: clamp(34px, 3.4vw, 56px);
    z-index: 6;
    display: inline-flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    min-height: 51px;
    padding: 0 20px;
    border: 1px solid rgba(117, 222, 255, .48);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(105deg, #5645d3, #147ab5);
    box-shadow: 0 13px 30px rgba(25, 95, 179, .26), inset 0 1px rgba(255, 255, 255, .18);
    font-size: 15px;
    font-weight: 820;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.f2h-stage-cta:hover,
.f2h-stage-cta:focus-visible {
    border-color: rgba(137, 232, 255, .85);
    color: #fff;
    background: linear-gradient(105deg, #6857e2, #168cc7);
    box-shadow: 0 16px 38px rgba(25, 112, 207, .35), 0 0 0 4px rgba(95, 198, 255, .1);
    text-decoration: none;
    outline: none;
}

.f2h-stage-cta > span {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.f2h-stage-live-note,
.f2h-stage-health {
    position: absolute;
    right: 40px;
    bottom: 45px;
    z-index: 5;
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: #a9bad0;
    font-size: 12px;
    font-weight: 750;
}

.f2h-stage-live-note.is-top {
    top: 44px;
    bottom: auto;
}

.f2h-stage-location-count {
    position: absolute;
    top: 38px;
    right: 42px;
    z-index: 4;
    display: flex;
    gap: 9px;
    align-items: baseline;
}

.f2h-stage-location-count strong {
    color: #fff;
    font-size: 36px;
    font-weight: 850;
    letter-spacing: -.05em;
    line-height: 1;
}

.f2h-stage-location-count span {
    color: #8fa4c1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-stage-platforms {
    top: auto;
    right: 38px;
    bottom: 76px;
    min-height: 48px;
    padding: 8px 12px;
    gap: 11px;
}

.f2h-stage-platforms img {
    max-width: 55px;
    height: 22px;
}

.f2h-stage-map {
    position: absolute;
    right: 1.8%;
    bottom: 96px;
    z-index: 2;
    width: min(72%, 890px);
    aspect-ratio: 1200 / 620;
    opacity: .94;
}

.f2h-stage-map::before {
    position: absolute;
    inset: 10% 3% 2%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(26, 132, 207, .14), transparent 66%);
    content: "";
    filter: blur(22px);
}

.f2h-stage-map > img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .47;
    object-fit: fill;
    filter: saturate(.78) brightness(1.2);
}

.f2h-stage-node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 9px;
    height: 9px;
    border: 2px solid rgba(218, 249, 255, .92);
    border-radius: 50%;
    background: #4fd9ff;
    box-shadow: 0 0 0 4px rgba(79, 217, 255, .16), 0 0 15px rgba(79, 217, 255, .92);
    cursor: help;
    transform: translate(-50%, -50%);
}

.f2h-stage-node::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(89, 219, 255, .28);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

.f2h-stage-node::after {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    z-index: 10;
    padding: 6px 9px;
    border: 1px solid rgba(118, 196, 239, .35);
    border-radius: 7px;
    color: #f5fbff;
    background: rgba(5, 17, 39, .96);
    box-shadow: 0 8px 22px rgba(0, 4, 20, .34);
    content: attr(data-city);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .14s ease, transform .14s ease;
    white-space: nowrap;
}

.f2h-stage-node:hover::after,
.f2h-stage-node:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.f2h-stage-node:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
}

.f2h-stage-metal-spec {
    position: absolute;
    right: 42px;
    bottom: 70px;
    z-index: 3;
    width: min(420px, 39%);
    overflow: hidden;
    border: 1px solid rgba(133, 170, 221, .28);
    border-radius: 17px;
    background: rgba(5, 16, 36, .84);
    box-shadow: 0 20px 55px rgba(0, 4, 20, .36);
}

.f2h-stage-metal-spec > div {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 15px 17px;
    border-bottom: 1px solid rgba(133, 170, 221, .14);
}

.f2h-stage-metal-spec > div:last-child {
    border-bottom: 0;
}

.f2h-stage-metal-spec small {
    color: #7f95b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-stage-metal-spec strong {
    color: #e3edf9;
    font-size: 14px;
    font-weight: 770;
}

.f2h-stage-secondary {
    display: flex;
    gap: 9px 26px;
    align-items: center;
    min-height: 62px;
    overflow-x: auto;
    padding: 12px 6px 0;
    white-space: nowrap;
    scrollbar-width: thin;
}

.f2h-stage-secondary > span {
    color: #687f9e;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-stage-secondary a {
    color: #b2c2d7;
    font-size: 13px;
    font-weight: 720;
    text-decoration: none;
}

.f2h-stage-secondary a:hover,
.f2h-stage-secondary a:focus-visible {
    color: #6ed9ff;
    text-decoration: none;
    outline: none;
}

@media (max-width: 1320px) {
    .f2h-stage-intro {
        grid-template-columns: minmax(270px, .9fr) minmax(320px, 1.2fr);
    }

    .f2h-stage-tools {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .f2h-stage-scene-copy {
        width: min(600px, 65%);
    }

    .f2h-stage-map {
        width: min(70%, 800px);
    }
}

@media (max-width: 1050px) {
    .f2h-stage-layout {
        grid-template-columns: 1fr;
        min-height: 760px;
    }

    .f2h-stage-rail {
        grid-template-rows: none;
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        overflow-x: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(116, 153, 205, .18);
    }

    .f2h-stage-choice {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height: 88px;
        padding: 14px 15px;
    }

    .f2h-stage-choice::before {
        top: auto;
        right: 10px;
        bottom: 0;
        left: 10px;
        width: auto;
        height: 3px;
        border-radius: 4px 4px 0 0;
    }

    .f2h-stage-choice-arrow {
        display: none;
    }

    .f2h-stage-choice-copy strong {
        font-size: 14px;
    }

    .f2h-stage-choice-copy small {
        font-size: 11px;
    }

    .f2h-stage-viewport {
        min-height: 670px;
    }
}

@media (max-width: 760px) {
    body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container {
        width: min(calc(100% - 24px), 1540px);
    }

    .f2h-stage-intro {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .f2h-stage-intro-copy h1 {
        font-size: 35px;
    }

    .f2h-stage-intro > p {
        font-size: 15px;
    }

    .f2h-stage-tools {
        grid-column: auto;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 2px;
    }

    .f2h-stage-layout {
        min-height: 775px;
        border-radius: 18px;
    }

    .f2h-stage-rail {
        grid-template-columns: repeat(5, 148px);
    }

    .f2h-stage-viewport {
        min-height: 684px;
    }

    .f2h-stage-scene {
        padding: 29px 24px;
    }

    .f2h-stage-scene-copy,
    .f2h-stage-use-list {
        width: 100%;
    }

    .f2h-stage-scene-copy h2 {
        margin-bottom: 12px;
        font-size: clamp(36px, 11vw, 47px);
    }

    .f2h-stage-scene-copy p {
        font-size: 15.5px;
        line-height: 1.55;
    }

    .f2h-stage-proof,
    .f2h-stage-site-fleet,
    .f2h-stage-live-note,
    .f2h-stage-health,
    .f2h-stage-metal-spec {
        display: none;
    }

    .f2h-stage-location-count {
        top: 285px;
        right: 24px;
    }

    .f2h-stage-location-count strong {
        font-size: 28px;
    }

    .f2h-stage-map {
        right: -8%;
        bottom: 123px;
        width: 116%;
    }

    .f2h-stage-platforms {
        right: 20px;
        bottom: 83px;
        left: 20px;
        justify-content: center;
        overflow: hidden;
    }

    .f2h-stage-platforms > span {
        display: none;
    }

    .f2h-stage-platforms img {
        max-width: 48px;
        height: 20px;
    }

    .f2h-stage-scene.is-cloud {
        background-position: 57% center;
    }

    .f2h-stage-cta {
        right: 24px;
        bottom: 23px;
        left: 24px;
    }

    .f2h-stage-secondary {
        min-height: 56px;
        padding-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-order-stage *,
    .f2h-order-stage *::before,
    .f2h-order-stage *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

html {
    scroll-behavior: smooth;
    background: #02061d;
}

body.f2h-shell {
    min-width: 320px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--f2h-ink);
    background: #02061d;
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

body.f2h-shell::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 4% 2%, rgba(46, 134, 255, .08), transparent 28rem),
        radial-gradient(circle at 96% 14%, rgba(49, 88, 255, .07), transparent 34rem);
}

body.f2h-shell :where(
    .f2h-brand-bar-inner,
    .f2h-client-bar-inner,
    .f2h-admin-session > .container,
    .f2h-page-banner-inner,
    #main-body > .container,
    .f2h-site-footer > .container
) {
    width: min(calc(100% - 48px), var(--f2h-wrap));
    max-width: var(--f2h-wrap);
}

body.f2h-shell a {
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.f2h-shell a:hover {
    text-decoration: none;
}

body.f2h-shell .primary-content :where(p, li, td, .markdown-content) a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):hover,
body.f2h-shell .primary-content :where(p, li, td, .markdown-content) a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.f2h-shell :focus-visible {
    outline: 3px solid #1267ff;
    outline-offset: 3px;
}

.f2h-skip-link {
    position: fixed;
    z-index: 9999;
    top: -100px;
    left: 12px;
    padding: 10px 14px;
    border-radius: var(--f2h-radius-xs);
    color: #fff;
    background: var(--f2h-blue-600);
    box-shadow: var(--f2h-shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: none;
}

.f2h-skip-link:focus-visible {
    top: 12px;
    color: #fff;
    opacity: 1;
    pointer-events: auto;
}

/* Header */

.f2h-site-header {
    position: relative;
    z-index: 1030;
    color: #fff;
    background: var(--f2h-navy-925);
}

.f2h-brand-bar {
    position: relative;
    min-height: 76px;
    border-bottom: 1px solid rgba(105, 155, 245, .13);
    background:
        radial-gradient(circle at 22% -120%, rgba(42, 128, 255, .28), transparent 31rem),
        linear-gradient(112deg, #030622 0%, #071039 54%, #071c4b 100%);
}

.f2h-brand-bar::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(99, 157, 244, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 157, 244, .12) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}

.f2h-brand-bar-inner {
    position: relative;
    z-index: 1;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.f2h-brand {
    flex: 0 0 auto;
}

.f2h-brand img {
    display: block;
    width: 166px;
    height: auto;
}

.f2h-market-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-inline: auto;
}

.f2h-market-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    color: #aebfda;
    font-size: 13px;
    font-weight: 680;
    white-space: nowrap;
}

.f2h-market-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .055);
}

.f2h-brand-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.f2h-language-toggle--chrome,
.f2h-status-link,
.f2h-noc-link,
.f2h-cart-link,
.f2h-menu-toggle {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(95, 150, 238, .24);
    border-radius: 12px;
    color: #d7e3f7;
    background: rgba(10, 31, 79, .56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}

.f2h-language-toggle--chrome:hover,
.f2h-status-link:hover,
.f2h-cart-link:hover,
.f2h-menu-toggle:hover {
    color: #fff;
    border-color: rgba(87, 178, 255, .56);
    background: rgba(18, 56, 126, .68);
    transform: translateY(-1px);
}

.f2h-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #8a9bb5;
    box-shadow: none;
}

.f2h-noc-link {
    border-color: rgba(138, 99, 255, .34);
    color: #eeeaff;
    background: linear-gradient(135deg, rgba(92, 58, 190, .64), rgba(22, 67, 132, .72));
}

.f2h-noc-link:hover {
    color: #fff;
    border-color: rgba(158, 132, 255, .68);
    background: linear-gradient(135deg, rgba(112, 73, 220, .76), rgba(34, 91, 171, .8));
    box-shadow: 0 10px 26px rgba(74, 48, 164, .28);
    transform: translateY(-1px);
}

.f2h-noc-icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    border: 1px solid rgba(156, 132, 255, .34);
    border-radius: 8px;
    color: #aa94ff;
    background: rgba(44, 30, 100, .54);
}

.f2h-noc-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.f2h-cart-count,
.f2h-notification-count {
    min-width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #8a63ff, #4b87ff);
    box-shadow: 0 0 0 3px rgba(138, 99, 255, .08);
    font-size: 10px;
    font-weight: 850;
}

.f2h-menu-toggle,
.f2h-language-toggle--chrome {
    width: 42px;
    padding: 0;
    cursor: pointer;
}

body.f2h-shell .f2h-language-toggle--chrome {
    display: none;
}

.f2h-language-toggle--tools {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(100, 148, 226, .2);
    border-radius: 10px;
    color: #b9cae2;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
}

.f2h-language-toggle--tools:hover {
    color: #fff;
    border-color: rgba(76, 176, 255, .5);
}

.f2h-language-toggle--footer {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(92, 145, 232, .22);
    border-radius: 9px;
    color: #8ca5ca;
    background: rgba(12, 34, 85, .45);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.f2h-language-toggle--footer:hover {
    color: #fff;
    border-color: rgba(80, 190, 255, .42);
    background: rgba(22, 67, 143, .52);
}

.f2h-client-bar {
    min-height: 58px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(88, 145, 242, .2);
    background: rgba(6, 16, 55, .98);
    box-shadow: 0 14px 34px rgba(0, 5, 27, .16);
}

.f2h-client-bar-inner {
    min-height: 58px;
    display: flex;
    align-items: stretch;
}

.f2h-portal-label {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-right: 21px;
    margin-right: 10px;
    border-right: 1px solid rgba(113, 157, 231, .16);
    color: #fff;
    font-size: 13px;
    font-weight: 780;
    white-space: nowrap;
}

.f2h-portal-label:hover {
    color: #fff;
}

.f2h-portal-mark {
    min-width: 31px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(80, 180, 255, .42);
    border-radius: 8px;
    color: #dff7ff;
    background: linear-gradient(135deg, #1267ff, #3141d3);
    box-shadow: 0 8px 18px rgba(13, 76, 222, .28);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
}

.f2h-client-bar .navbar-collapse {
    min-width: 0;
    align-items: stretch;
}

.f2h-primary-nav,
.f2h-secondary-nav {
    gap: 0;
    align-items: stretch;
}

.f2h-primary-nav > li,
.f2h-secondary-nav > li {
    position: relative;
    display: flex !important;
    align-items: stretch;
}

.f2h-primary-nav > .collapsable-dropdown.d-none {
    display: none !important;
}

.f2h-primary-nav > li > a,
.f2h-secondary-nav > li > a {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 2px solid transparent;
    color: #9fb2d0;
    font-size: 12px;
    font-weight: 710;
    white-space: nowrap;
}

.f2h-primary-nav > li > a:hover,
.f2h-primary-nav > li.active > a,
.f2h-primary-nav > li.current > a,
.f2h-secondary-nav > li > a:hover {
    color: #fff;
    border-bottom-color: var(--f2h-cyan-400);
    background: rgba(255, 255, 255, .035);
}

.f2h-primary-nav .badge,
.f2h-secondary-nav .badge {
    margin-left: 5px;
    color: #dffaff;
    background: rgba(46, 134, 255, .22);
}

.f2h-primary-nav .dropdown-menu,
.f2h-secondary-nav .dropdown-menu {
    min-width: 230px;
    margin-top: 0;
    padding: 8px;
    border: 1px solid rgba(113, 157, 231, .2);
    border-radius: 14px;
    background: #081640;
    box-shadow: 0 24px 64px rgba(0, 5, 28, .34);
}

.f2h-primary-nav .dropdown-item,
.f2h-secondary-nav .dropdown-item {
    padding: 0;
    border-radius: 9px;
    color: #b9c8df;
    background: transparent;
}

.f2h-primary-nav .dropdown-item > a,
.f2h-secondary-nav .dropdown-item > a {
    display: block;
    padding: 9px 10px !important;
    border-radius: 9px;
    color: inherit;
}

.f2h-primary-nav .dropdown-item:hover,
.f2h-primary-nav .dropdown-item > a:hover,
.f2h-secondary-nav .dropdown-item:hover,
.f2h-secondary-nav .dropdown-item > a:hover {
    color: #fff;
    background: rgba(46, 134, 255, .12);
}

.f2h-client-tools {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.f2h-kb-search {
    width: 154px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(100, 148, 226, .2);
    border-radius: 10px;
    color: #8ea6c9;
    background: rgba(255, 255, 255, .035);
}

.f2h-kb-search-submit {
    width: 22px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    padding: 0;
    border: 0;
    color: #8ea6c9;
    background: transparent;
    cursor: pointer;
}

.f2h-kb-search-submit:hover,
.f2h-kb-search-submit:focus-visible {
    color: #fff;
}

.f2h-kb-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.f2h-kb-search input::placeholder {
    color: #8398ba;
}

.f2h-notification-button {
    position: relative;
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(100, 148, 226, .2);
    border-radius: 10px;
    color: #b9cae2;
    background: rgba(255, 255, 255, .035);
}

.f2h-notification-button:hover {
    color: #fff;
    border-color: rgba(76, 176, 255, .5);
}

.f2h-notification-button .f2h-notification-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 9px;
}

.f2h-active-account {
    max-width: 190px;
    height: 37px;
    display: flex;
    align-items: stretch;
    align-self: center;
    overflow: hidden;
    border: 1px solid rgba(100, 148, 226, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
}

.f2h-active-account-name,
.f2h-account-switch {
    display: inline-flex;
    align-items: center;
    color: #b9cae2;
}

.f2h-active-account-name {
    min-width: 0;
    flex: 1 1 auto;
    gap: 7px;
    padding: 0 9px;
    border: 0;
    border-radius: 9px 0 0 9px;
    color: #d3def0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.f2h-active-account-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f2h-account-switch {
    width: 34px;
    min-height: 35px;
    justify-content: center;
    flex: 0 0 34px;
    border-left: 1px solid rgba(100, 148, 226, .18);
    border-radius: 0 9px 9px 0;
}

.f2h-account-chevron {
    margin-left: 1px;
    color: #7f96b8;
    font-size: 8px;
    transition: transform .18s ease;
}

.f2h-account-nav-item.show .f2h-account-chevron {
    transform: rotate(180deg);
}

.f2h-secondary-nav.f2h-account-nav {
    align-items: center;
}

.f2h-secondary-nav.f2h-account-nav > .f2h-account-nav-item {
    min-width: 0;
    align-items: center;
}

.f2h-account-nav .f2h-active-account > .f2h-account-switch {
    min-height: 35px;
    padding: 0;
    border-bottom: 0;
}

.f2h-account-nav .f2h-account-nav-item > .dropdown-menu {
    min-width: 260px;
}

.f2h-active-account-name:hover,
.f2h-account-switch:hover {
    color: #fff;
    background: rgba(46, 134, 255, .12);
}

body.f2h-shell .f2h-active-account-name:focus-visible,
body.f2h-shell .f2h-account-switch:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 3px #56d9ff;
}

.f2h-mobile-product-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(113, 157, 231, .15);
}

.f2h-mobile-product-nav a {
    padding: 9px 10px;
    border-radius: 9px;
    color: #adbeda;
    background: rgba(255, 255, 255, .03);
    font-size: 12px;
    font-weight: 680;
}

.f2h-admin-session {
    padding: 8px 0;
    color: #301b00;
    background: #ffd88c;
    font-size: 12px;
    font-weight: 700;
}

.f2h-admin-session .container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.f2h-admin-session a {
    margin-left: auto;
    color: #301b00;
    text-decoration: underline;
}

/* Page heading and layout */

.f2h-page-banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 8% 0%, rgba(39, 135, 255, .24), transparent 28rem),
        radial-gradient(circle at 92% 140%, rgba(62, 223, 255, .12), transparent 26rem),
        linear-gradient(118deg, #07123c 0%, #0a2059 58%, #0b2a68 100%);
}

.f2h-page-banner::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .2;
    background-image:
        linear-gradient(rgba(95, 153, 239, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 153, 239, .12) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.f2h-page-banner-inner {
    position: relative;
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-block: 23px;
}

.f2h-page-kicker {
    display: block;
    margin-bottom: 5px;
    color: #7fdff8;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-page-title {
    margin: 0;
    color: #fff;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 750;
    letter-spacing: -.035em;
}

.f2h-page-banner .master-breadcrumb {
    background: transparent;
}

.f2h-page-banner .breadcrumb {
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    color: #b6c7e3;
    background: transparent;
    font-size: 12px;
}

.f2h-page-banner .breadcrumb-item,
.f2h-page-banner .breadcrumb-item a {
    color: #aebfda;
}

.f2h-page-banner .breadcrumb-item.active {
    color: #fff;
}

.f2h-page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: #6c83a9;
}

.f2h-main {
    min-height: 560px;
}

body.f2h-shell #main-body {
    min-height: 500px;
    padding: 44px 0 64px;
    background: transparent;
}

.f2h-sidebar-column {
    margin-bottom: 24px;
}

body.f2h-shell .primary-content > h1:first-child,
body.f2h-shell .primary-content > h2:first-child {
    margin-top: 0;
}

/* Shared controls */

body.f2h-shell :where(.btn) {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 720;
    box-shadow: none;
}

body.f2h-shell :where(.btn-sm, .btn-xs, .btn-group-sm > .btn) {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 12px;
}

body.f2h-shell :where(.input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-text, .input-group-sm > .btn) {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 12px;
}

body.f2h-shell :where(.btn-lg, .btn-group-lg > .btn) {
    min-height: 50px;
    padding: 12px 20px;
    border-radius: 13px;
    font-size: 16px;
}

body.f2h-shell :where(.input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-text, .input-group-lg > .btn) {
    min-height: 50px;
    padding: 12px 20px;
    border-radius: 13px;
    font-size: 16px;
}

body.f2h-shell :where(.btn-primary) {
    border-color: #1964f2;
    color: #fff;
    background: linear-gradient(135deg, #1267ff 0%, #225be9 57%, #313dd4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 11px 24px rgba(20, 87, 222, .2);
}

body.f2h-shell :where(.btn-primary:not(:disabled):not(.disabled):hover, .btn-primary:not(:disabled):not(.disabled):focus) {
    border-color: #3594ff;
    color: #fff;
    background: linear-gradient(135deg, #1973dc 0%, #225be9 57%, #313dd4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 15px 31px rgba(20, 87, 222, .28);
}

body.f2h-shell :where(.btn-success) {
    border-color: #159f74;
    color: #fff;
    background: linear-gradient(135deg, #087a5a 0%, #0b7055 58%, #075f49 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 11px 24px rgba(10, 116, 86, .2);
}

body.f2h-shell :where(.btn-success:not(:disabled):not(.disabled):hover, .btn-success:not(:disabled):not(.disabled):focus) {
    border-color: #37d2a1;
    color: #fff;
    background: linear-gradient(135deg, #0b8565 0%, #0d7f62 58%, #0f765b 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 15px 31px rgba(10, 116, 86, .26);
}

body.f2h-shell :where(.btn-default, .btn-secondary),
.f2h-btn-secondary {
    border: 1px solid var(--f2h-line-strong);
    color: var(--f2h-ink-soft);
    background: #fff;
}

body.f2h-shell :where(.btn-default:not(:disabled):not(.disabled):hover, .btn-secondary:not(:disabled):not(.disabled):hover),
.f2h-btn-secondary:hover {
    border-color: #94b8ed;
    color: #1549be;
    background: #f8fbff;
}

body.f2h-shell :where(.btn-danger) {
    border-color: #a82b45;
    color: #fff;
    background: #bd314d;
}

body.f2h-shell :where(.form-control, select.form-control, .custom-select) {
    min-height: 44px;
    border: 1px solid var(--f2h-line-strong);
    border-radius: 11px;
    color: var(--f2h-ink);
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(20, 43, 81, .025);
    font-size: 14px;
}

body.f2h-shell :where(textarea.form-control) {
    min-height: 128px;
}

body.f2h-shell :where(.form-control-sm, .input-group-sm > .form-control, .input-group-sm > .custom-select) {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 12px;
}

body.f2h-shell :where(.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .custom-select) {
    min-height: 50px;
    padding: 10px 15px;
    border-radius: 13px;
    font-size: 16px;
}

body.f2h-shell :where(.input-group-xs > .form-control, .input-group-xs > .custom-select, .input-group-xs > .input-group-prepend > .input-group-text, .input-group-xs > .input-group-append > .input-group-text, .input-group-xs > .input-group-prepend > .btn, .input-group-xs > .input-group-append > .btn, .btn-group-xs > .btn) {
    min-height: 30px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 11px;
}

body.f2h-shell :where(.form-control:focus, .custom-select:focus) {
    border-color: #4596f5;
    box-shadow: 0 0 0 4px rgba(29, 116, 242, .12);
}

body.f2h-shell :where(.form-control)::placeholder {
    color: #5f6f8a;
}

body.f2h-shell :where(label, .form-control-label) {
    color: #364662;
    font-size: 12px;
    font-weight: 720;
}

body.f2h-shell :where(.input-group-text) {
    border-color: var(--f2h-line-strong);
    color: #647796;
    background: #f6f9fe;
}

body.f2h-shell :where(.card, .panel) {
    overflow: visible;
    border: 1px solid rgba(176, 196, 226, .72);
    border-radius: var(--f2h-radius-md);
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(244, 248, 255, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 38px rgba(28, 55, 106, .09);
}

body.f2h-shell :where(.card-header, .panel-heading) {
    padding: 15px 18px;
    border-bottom: 1px solid rgba(174, 196, 229, .68);
    color: var(--f2h-ink);
    background:
        linear-gradient(90deg, rgba(28, 102, 236, .08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 248, 255, .78));
}

body.f2h-shell :where(.card-title, .panel-title) {
    color: var(--f2h-ink);
    font-size: 15px;
    font-weight: 760;
    letter-spacing: -.015em;
}

body.f2h-shell :where(.card-body, .panel-body) {
    padding: 19px;
}

body.f2h-shell :where(.card-footer, .panel-footer) {
    padding: 13px 18px;
    border-top: 1px solid rgba(174, 196, 229, .68);
    background: rgba(238, 244, 253, .64);
}

body.f2h-shell :where(.list-group-item) {
    padding: 13px 18px;
    border-color: var(--f2h-line);
    color: var(--f2h-ink-soft);
    background: #fff;
}

body.f2h-shell :where(a.list-group-item:not(.disabled):hover, .list-group-item-action:not(.disabled):hover) {
    color: #174bb6;
    background: #f7faff;
}

body.f2h-shell :where(.list-group-item.active) {
    border-color: #d5e5fb;
    color: #1248b6;
    background: #edf5ff;
}

body.f2h-shell :where(.badge) {
    padding: 5px 8px;
    border-radius: 999px;
    font-weight: 740;
}

body.f2h-shell :where(.badge-primary, .label-primary) {
    color: #15459e;
    background: #dfedff;
}

body.f2h-shell :where(.badge-success, .label-success, .status-active) {
    color: #087052;
    background: #d9f8ee;
}

body.f2h-shell :where(.badge-warning, .label-warning, .status-pending) {
    color: #805000;
    background: #fff0ca;
}

body.f2h-shell :where(.badge-danger, .label-danger, .status-suspended, .status-cancelled, .status-terminated) {
    color: #9f2440;
    background: #ffe1e7;
}

body.f2h-shell :where(.alert) {
    padding: 14px 17px;
    border-width: 1px;
    border-radius: 12px;
    box-shadow: var(--f2h-shadow-sm);
}

body.f2h-shell :where(.alert-info) {
    border-color: #c9e5ff;
    color: #175182;
    background: #eaf6ff;
}

body.f2h-shell :where(.alert-success) {
    border-color: #bfeedd;
    color: #0c624a;
    background: #e9fbf5;
}

body.f2h-shell :where(.alert-warning) {
    border-color: #f1d99f;
    color: #76500a;
    background: #fff8e6;
}

body.f2h-shell :where(.alert-danger) {
    border-color: #f1bdc7;
    color: #8a273a;
    background: #fff0f3;
}

/* Global network notice: this component sits directly below the application
   chrome, outside #main-body, so give it the same restrained NOC treatment
   without altering alerts used inside customer and module pages. */
body.f2h-shell > .network-issue-alert {
    --f2h-network-notice-accent: #8b70f5;
    --f2h-network-notice-icon: #dcd4ff;
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    overflow: hidden;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-top: 1px solid rgba(77, 135, 242, .28);
    border-bottom: 1px solid rgba(133, 105, 247, .26);
    border-radius: 0;
    color: #dbe7fb;
    background:
        radial-gradient(circle at 8% -190%, rgba(46, 134, 255, .29), transparent 29rem),
        radial-gradient(circle at 91% 240%, rgba(108, 72, 222, .25), transparent 30rem),
        linear-gradient(103deg, #050a23 0%, #081334 54%, #0b1637 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 30px rgba(0, 2, 18, .2);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

body.f2h-shell > .network-issue-alert::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, .025) 49%, transparent 64%);
}

body.f2h-shell > .network-issue-alert.alert-warning {
    --f2h-network-notice-accent: #d99a3d;
    --f2h-network-notice-icon: #ffd897;
    border-top-color: rgba(222, 158, 62, .34);
    border-bottom-color: rgba(141, 91, 32, .38);
    background:
        radial-gradient(circle at 8% -190%, rgba(218, 145, 45, .19), transparent 29rem),
        radial-gradient(circle at 91% 240%, rgba(108, 72, 222, .2), transparent 30rem),
        linear-gradient(103deg, #080b20 0%, #0b142e 54%, #0c1633 100%);
}

body.f2h-shell > .network-issue-alert > .container {
    width: min(calc(100% - 48px), var(--f2h-wrap, 1320px));
    max-width: var(--f2h-wrap, 1320px);
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 9px;
}

body.f2h-shell > .network-issue-alert > .container > .fas:first-child {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(139, 112, 245, .48);
    border-radius: 10px;
    color: var(--f2h-network-notice-icon);
    background: rgba(107, 78, 211, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 7px 18px rgba(0, 2, 16, .2);
    font-size: 13px;
}

body.f2h-shell > .network-issue-alert.alert-warning > .container > .fas:first-child {
    border-color: rgba(218, 154, 61, .48);
    background: rgba(170, 104, 31, .15);
}

body.f2h-shell > .network-issue-alert .alert-link {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
    padding: 7px 12px;
    float: none !important;
    border: 1px solid rgba(139, 112, 245, .38);
    border-radius: 999px;
    color: #ece8ff;
    background: rgba(104, 75, 205, .13);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

body.f2h-shell > .network-issue-alert.alert-warning .alert-link {
    border-color: rgba(218, 154, 61, .34);
    color: #ffe0aa;
    background: rgba(170, 104, 31, .12);
}

body.f2h-shell > .network-issue-alert .alert-link:hover,
body.f2h-shell > .network-issue-alert .alert-link:focus-visible {
    border-color: rgba(163, 140, 255, .67);
    color: #fff;
    background: rgba(112, 81, 219, .29);
    box-shadow: 0 0 0 3px rgba(116, 91, 225, .12);
    text-decoration: none;
}

@media (max-width: 767.98px) {
    body.f2h-shell > .network-issue-alert > .container {
        width: calc(100% - 30px);
        min-height: 0;
        flex-wrap: wrap;
        gap: 9px 11px;
        padding-block: 11px;
    }

    body.f2h-shell > .network-issue-alert .alert-link {
        margin-left: 42px;
    }
}

body.f2h-shell :where(.table) {
    color: var(--f2h-ink-soft);
    background: #fff;
}

body.f2h-shell :where(.table thead th) {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--f2h-line-strong);
    color: #5f6f8a;
    background: #f6f9fd;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.f2h-shell :where(.table td) {
    padding: 14px;
    border-color: var(--f2h-line);
    vertical-align: middle;
}

body.f2h-shell :where(.table-hover tbody tr:hover) {
    background: #f8fbff;
}

body.f2h-shell :where(.dataTables_wrapper, .table-container) {
    border: 1px solid rgba(176, 196, 226, .72);
    border-radius: var(--f2h-radius-md);
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(244, 248, 255, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 14px 38px rgba(28, 55, 106, .09);
}

body.f2h-shell :where(.dataTables_wrapper) {
    overflow: visible;
}

body.f2h-shell :where(.dataTables_wrapper .table, .table-container .table) {
    margin-bottom: 0;
}

body.f2h-shell :where(.nav-tabs) {
    gap: 5px;
    border-bottom-color: var(--f2h-line);
}

body.f2h-shell :where(.nav-tabs .nav-link) {
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--f2h-muted);
    font-size: 13px;
    font-weight: 700;
}

body.f2h-shell :where(.nav-tabs .nav-link:not(.disabled):hover, .nav-tabs .nav-link.active) {
    border-bottom-color: var(--f2h-blue-600);
    color: #164fbd;
    background: transparent;
}

body.f2h-shell :where(.pagination .page-link) {
    min-width: 37px;
    min-height: 37px;
    display: grid;
    place-items: center;
    margin: 0 3px;
    padding: 7px;
    border: 1px solid var(--f2h-line);
    border-radius: 9px;
    color: #405474;
    background: #fff;
}

body.f2h-shell :where(.pagination .active .page-link) {
    border-color: var(--f2h-blue-600);
    color: #fff;
    background: var(--f2h-blue-600);
}

/* Paint-only compatibility layer for core WHMCS and third-party module output. */

body.f2h-shell :where(.modal-content, .popover, .dropdown-menu, .well, .jumbotron) {
    border: 1px solid rgba(176, 196, 226, .76);
    border-radius: var(--f2h-radius-md);
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(242, 247, 255, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 22px 58px rgba(15, 38, 84, .16);
}

body.f2h-shell :where(.modal-header, .popover-header) {
    border-bottom: 1px solid rgba(174, 196, 229, .68);
    color: var(--f2h-ink);
    background:
        linear-gradient(90deg, rgba(22, 103, 255, .09), transparent 48%),
        rgba(247, 250, 255, .86);
}

body.f2h-shell :where(.modal-footer) {
    border-top: 1px solid rgba(174, 196, 229, .68);
    background: rgba(239, 245, 254, .7);
}

body.f2h-shell :where(.dropdown-item, .select2-results__option) {
    color: var(--f2h-ink-soft);
}

body.f2h-shell :where(.dropdown-item:hover, .dropdown-item:focus, .select2-results__option--highlighted) {
    color: #1248b6;
    background: #edf5ff;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) {
    min-width: 0;
    max-width: 100%;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) > * {
    max-width: 100%;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) :where(img, video) {
    max-width: 100%;
    height: auto;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) :where(canvas, svg) {
    max-width: 100%;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) :where(iframe) {
    max-width: 100%;
    border: 1px solid rgba(176, 196, 226, .72);
    border-radius: var(--f2h-radius-sm);
    background: #071426;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) :where(.row, [class*="col-"]) {
    min-width: 0;
}

body.f2h-shell :where(.module-client-area, .moduleoutput, .module-output) :where(.table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Nexus emits ProductDetails hook output in unclassified direct wrappers. */
body.f2h-shell #tabOverview > div {
    min-width: 0;
    max-width: 100%;
}

body.f2h-shell #tabOverview > div :where(img, video) {
    max-width: 100%;
    height: auto;
}

body.f2h-shell #tabOverview > div :where(canvas, svg, iframe) {
    max-width: 100%;
}

body.f2h-shell #tabOverview > div :where(.row, [class*="col-"]) {
    min-width: 0;
}

body.f2h-shell #tabOverview > div :where(.table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.f2h-shell :where(.select2-container, .bootstrap-select, .iti, .input-group) {
    max-width: 100%;
}

/* Sidebar */

body.f2h-shell .card-sidebar {
    margin-bottom: 17px !important;
}

body.f2h-shell .card-sidebar .card-header {
    min-height: 54px;
    padding: 14px 16px;
}

body.f2h-shell .card-sidebar .card-title {
    width: 100%;
    margin: 0;
    font-size: 14px;
}

body.f2h-shell .card-sidebar .card-title > i:first-child {
    margin-right: 7px;
    color: var(--f2h-blue-600);
}

body.f2h-shell .card-sidebar .card-minimise {
    margin-top: 4px;
    color: #9aabc3;
    font-size: 10px;
}

body.f2h-shell .card-sidebar .list-group-item {
    padding: 11px 15px;
    border-left: 3px solid transparent;
    font-size: 14px;
}

body.f2h-shell .card-sidebar .list-group-item.active {
    border-left-color: var(--f2h-blue-600);
}

.sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sidebar-menu-item-icon-wrapper {
    width: 22px;
    color: #6b7f9f;
    text-align: center;
}

.sidebar-menu-item-label {
    flex: 1;
}

.sidebar-menu-item-badge {
    margin-left: auto;
}

/* Authentication */

body.f2h-template-login .f2h-main,
body.f2h-template-password-reset-container .f2h-main,
body.f2h-template-clientregister .f2h-main {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 9% 8%, rgba(20, 103, 255, .24), transparent 34rem),
        radial-gradient(circle at 86% 18%, rgba(62, 223, 255, .13), transparent 30rem),
        linear-gradient(135deg, #02051b 0%, #06103a 56%, #07245a 100%);
}

body.f2h-template-login .f2h-main::before,
body.f2h-template-password-reset-container .f2h-main::before,
body.f2h-template-clientregister .f2h-main::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .26;
    background-image:
        linear-gradient(rgba(76, 145, 240, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 145, 240, .13) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(135deg, #000, transparent 82%);
}

body.f2h-template-login #main-body,
body.f2h-template-password-reset-container #main-body,
body.f2h-template-clientregister #main-body {
    position: relative;
    z-index: 1;
    min-height: 720px;
    display: flex;
    align-items: center;
    padding: 68px 0 76px;
}

body.f2h-template-login #main-body > .container,
body.f2h-template-password-reset-container #main-body > .container,
body.f2h-template-clientregister #main-body > .container {
    width: min(calc(100% - 48px), 1240px);
    max-width: 1240px;
}

body.f2h-template-login .primary-content,
body.f2h-template-password-reset-container .primary-content,
body.f2h-template-clientregister .primary-content {
    padding-inline: 15px;
}

.f2h-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(120, 171, 246, .2);
    border-radius: 28px;
    background: rgba(8, 22, 65, .62);
    box-shadow: 0 42px 120px rgba(0, 3, 23, .48);
    backdrop-filter: blur(20px);
}

.f2h-auth-story {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(42px, 6vw, 76px);
    border-right: 1px solid rgba(111, 163, 242, .17);
}

.f2h-auth-story::after {
    position: absolute;
    width: 380px;
    height: 380px;
    right: -190px;
    bottom: -220px;
    content: "";
    border: 1px solid rgba(80, 166, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 52px rgba(64, 128, 255, .04), 0 0 0 104px rgba(64, 128, 255, .025);
}

.f2h-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #79def6;
    font-size: 10px;
    font-weight: 830;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-eyebrow > span {
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--f2h-cyan-400), var(--f2h-blue-500));
}

.f2h-auth-display {
    max-width: 630px;
    margin: 17px 0 19px;
    color: #fff;
    font-size: clamp(36px, 4.2vw, 62px);
    font-weight: 720;
    line-height: 1.03;
    letter-spacing: -.055em;
}

.f2h-auth-display strong {
    color: transparent;
    background: linear-gradient(96deg, #6cdcfb 0%, #85b3ff 48%, #ac9cff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: inherit;
}

.f2h-auth-story > p {
    max-width: 570px;
    margin: 0;
    color: #aebfda;
    font-size: 16px;
    line-height: 1.75;
}

.f2h-auth-capabilities {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.f2h-auth-capabilities > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.f2h-auth-capability-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex: 0 0 39px;
    border: 1px solid rgba(94, 170, 255, .24);
    border-radius: 11px;
    color: #78dff9;
    background: rgba(23, 76, 151, .28);
}

.f2h-auth-capabilities strong,
.f2h-auth-capabilities small {
    display: block;
}

.f2h-auth-capabilities strong {
    color: #eef6ff;
    font-size: 13px;
}

.f2h-auth-capabilities small {
    margin-top: 2px;
    color: #849aba;
    font-size: 11px;
}

.f2h-auth-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 42px;
    color: #91a8c9;
    font-size: 11px;
}

.f2h-auth-trust a {
    margin-left: 5px;
    color: #8bdff3;
    font-weight: 700;
}

.f2h-auth-trust > i {
    color: #61dff7;
    font-size: 11px;
}

.f2h-auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 4.6vw, 62px);
    color: var(--f2h-ink);
    background: #fff;
}

.f2h-auth-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 30px;
}

.f2h-auth-mark {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    flex: 0 0 47px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(145deg, #07113d, #0a2b6d);
    box-shadow: 0 11px 25px rgba(17, 72, 166, .2);
}

.f2h-auth-mark img {
    width: 37px;
    height: auto;
}

.f2h-auth-panel .f2h-eyebrow {
    color: #3975da;
}

.f2h-auth-panel-heading h1 {
    margin: 5px 0 4px;
    color: var(--f2h-ink);
    font-size: clamp(25px, 3vw, 33px);
    font-weight: 760;
    letter-spacing: -.04em;
}

.f2h-auth-panel-heading p {
    margin: 0;
    color: var(--f2h-muted);
    font-size: 12px;
}

.f2h-login-form .form-group {
    margin-bottom: 19px;
}

.f2h-login-form label {
    margin-bottom: 7px;
    color: #344561;
    font-size: 12px;
    font-weight: 740;
}

.f2h-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.f2h-label-row a {
    margin-bottom: 7px;
    color: #2763c7;
    font-size: 11px;
    font-weight: 700;
}

.f2h-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.f2h-input-wrap > i {
    position: absolute;
    z-index: 2;
    left: 15px;
    color: #8495b0;
    font-size: 13px;
    pointer-events: none;
}

body.f2h-shell .f2h-input-wrap .form-control {
    height: 50px;
    padding-left: 43px;
    padding-right: 52px;
    border-color: #d4ddea;
    border-radius: 12px;
    background: #fbfcff;
}

.f2h-reveal-password {
    position: absolute;
    z-index: 2;
    right: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #778aa7;
    background: transparent;
}

.f2h-reveal-password:hover {
    color: #275fbd;
    background: #edf4ff;
}

.f2h-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 1px 0 20px;
    cursor: pointer;
    user-select: none;
}

.f2h-checkbox-row input {
    position: absolute;
    opacity: 0;
}

.f2h-checkbox-row > span[aria-hidden="true"] {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid #c8d4e5;
    border-radius: 5px;
    background: #fff;
}

.f2h-checkbox-row input:checked + span[aria-hidden="true"] {
    border-color: var(--f2h-blue-600);
    background: var(--f2h-blue-600);
}

.f2h-checkbox-row input:checked + span[aria-hidden="true"]::after {
    width: 8px;
    height: 5px;
    content: "";
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translateY(-1px) rotate(-45deg);
}

.f2h-checkbox-row input:focus-visible + span[aria-hidden="true"] {
    outline: 3px solid #1267ff;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff;
}

body.f2h-shell .f2h-login-button {
    width: 100%;
    min-height: 51px;
    justify-content: space-between;
    padding-inline: 18px;
    border-radius: 12px;
}

.f2h-auth-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    color: var(--f2h-muted);
    font-size: 12px;
}

.f2h-auth-register a {
    color: #2763c7;
    font-weight: 740;
}

.f2h-captcha {
    margin-bottom: 18px;
}

.f2h-auth-panel .linked-accounts,
.f2h-auth-panel .providerPreLinking,
.f2h-auth-panel .social-signin-btns {
    margin-top: 22px;
}

/* Dashboard */

.f2h-dashboard-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 30px;
    align-items: center;
    margin-bottom: 22px;
    padding: clamp(27px, 4vw, 42px);
    border: 1px solid rgba(85, 153, 244, .24);
    border-radius: var(--f2h-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 92% -20%, rgba(62, 223, 255, .18), transparent 22rem),
        linear-gradient(125deg, #07123d 0%, #0b2c73 68%, #0a4386 100%);
    box-shadow: 0 24px 62px rgba(24, 56, 116, .19);
}

.f2h-dashboard-hero::after {
    position: absolute;
    width: 290px;
    height: 290px;
    right: -126px;
    bottom: -190px;
    content: "";
    border: 1px solid rgba(113, 200, 255, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(70, 148, 255, .045), 0 0 0 80px rgba(70, 148, 255, .025);
}

.f2h-dashboard-copy,
.f2h-dashboard-noc {
    position: relative;
    z-index: 1;
}

.f2h-dashboard-copy :where(h1, h2) {
    margin: 9px 0 8px;
    color: #fff;
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 740;
    letter-spacing: -.045em;
}

.f2h-dashboard-copy p {
    max-width: 680px;
    margin: 0;
    color: #b8c8e2;
    font-size: 14px;
    line-height: 1.7;
}

.f2h-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 23px;
}

.f2h-dashboard-actions .f2h-btn-secondary {
    border-color: rgba(119, 175, 255, .34);
    color: #eaf3ff;
    background: rgba(255, 255, 255, .065);
}

.f2h-dashboard-actions .f2h-btn-secondary:hover {
    border-color: rgba(119, 198, 255, .66);
    color: #fff;
    background: rgba(255, 255, 255, .11);
}

.f2h-dashboard-noc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 19px;
    border: 1px solid rgba(88, 235, 203, .22);
    border-radius: 17px;
    background: linear-gradient(150deg, rgba(10, 73, 92, .68), rgba(5, 34, 67, .74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 34px rgba(0, 12, 38, .2);
}

.f2h-dashboard-noc .f2h-noc-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 12px;
}

.f2h-dashboard-noc .f2h-noc-icon svg {
    width: 21px;
    height: 21px;
}

.f2h-dashboard-noc span,
.f2h-dashboard-noc strong,
.f2h-dashboard-noc small {
    display: block;
}

.f2h-dashboard-noc div > span {
    color: #7ce6cb;
    font-size: 9px;
    font-weight: 820;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.f2h-dashboard-noc strong {
    margin: 2px 0;
    color: #fff;
    font-size: 17px;
}

.f2h-dashboard-noc small {
    color: #9db9ca;
    font-size: 10px;
}

.f2h-dashboard-noc > a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(101, 235, 206, .26);
    border-radius: 11px;
    color: #dffff6;
    background: rgba(255, 255, 255, .055);
}

.f2h-dashboard-noc > a span {
    display: none;
}

.f2h-dashboard-noc > a:hover {
    color: #fff;
    border-color: rgba(101, 235, 206, .6);
    background: rgba(255, 255, 255, .1);
    transform: translateY(-1px);
}

.f2h-account-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.f2h-stat-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--f2h-line);
    border-radius: var(--f2h-radius-md);
    color: var(--f2h-ink);
    background: #fff;
    box-shadow: var(--f2h-shadow-sm);
}

.f2h-stat-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    border-radius: 3px 0 0 3px;
    background: var(--f2h-blue-600);
    opacity: 0;
    transition: opacity .18s ease;
}

.f2h-stat-card:hover {
    color: var(--f2h-ink);
    border-color: #b8d2f4;
    box-shadow: var(--f2h-shadow-md);
    transform: translateY(-2px);
}

.f2h-stat-card:hover::before {
    opacity: 1;
}

.f2h-stat-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #1d61d3;
    background: #eaf3ff;
}

.f2h-stat-domains .f2h-stat-icon {
    color: #08745c;
    background: #e0f8f0;
}

.f2h-stat-support .f2h-stat-icon {
    color: #6b43c1;
    background: #f0eaff;
}

.f2h-stat-invoices .f2h-stat-icon {
    color: #86600d;
    background: #fff2d7;
}

.f2h-stat-invoices.has-attention .f2h-stat-icon {
    color: #ad2f47;
    background: #ffe7ec;
}

.f2h-stat-copy {
    min-width: 0;
}

.f2h-stat-copy small,
.f2h-stat-copy strong,
.f2h-stat-copy > span {
    display: block;
}

.f2h-stat-copy small {
    overflow: hidden;
    color: var(--f2h-muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.f2h-stat-copy strong {
    margin: 1px 0;
    color: var(--f2h-ink);
    font-size: 24px;
    line-height: 1.2;
}

.f2h-stat-copy > span {
    overflow: hidden;
    color: #5f6f8a;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f2h-stat-arrow {
    color: #a6b4c9;
    font-size: 11px;
}

.f2h-quick-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 22px;
    padding: 10px 12px;
    border: 1px solid var(--f2h-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
}

.f2h-quick-actions > span {
    margin-right: 3px;
    color: #70809b;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.f2h-quick-actions a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 9px;
    color: #455977;
    font-size: 11px;
    font-weight: 690;
}

.f2h-quick-actions a:hover {
    color: #174db5;
    background: #edf4ff;
}

.f2h-addon-output {
    margin-bottom: 20px;
}

.f2h-home-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.f2h-panel-wide {
    grid-column: 1 / -1;
}

.f2h-home-panel {
    height: 100%;
    overflow: visible !important;
    margin: 0;
}

.f2h-home-panel .card-header {
    justify-content: space-between;
    gap: 16px;
}

.f2h-panel-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.f2h-panel-title .card-title {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f2h-panel-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    border-radius: 9px;
    color: #2365ce;
    background: #eaf3ff;
    font-size: 12px;
}

.f2h-panel-action {
    border: 1px solid var(--f2h-line);
    color: #3f5678;
    background: #fff;
}

.f2h-home-panel .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.f2h-home-panel .list-group-item > span:first-child {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Glass operations system */

body.f2h-authenticated {
    --f2h-canvas: #030711;
    --f2h-surface: #091426;
    --f2h-surface-muted: #0c1930;
    --f2h-ink: #f2f6ff;
    --f2h-ink-soft: #c0cce0;
    --f2h-muted: #8696b1;
    --f2h-line: rgba(119, 151, 207, .18);
    --f2h-line-strong: rgba(130, 164, 224, .28);
    --text: #f2f6ff;
    --text-muted: #8696b1;
    --text-lifted: #c0cce0;
    --text-accented: #dbe5f7;
    --border-muted: rgba(119, 151, 207, .15);
    --border: rgba(119, 151, 207, .22);
    --border-lifted: rgba(137, 173, 234, .34);
    --bg: #091426;
    --bg-muted: #07101f;
    --bg-lifted: #0c1930;
    --bg-accented: #10213c;
    color: var(--f2h-ink-soft);
    background: #02050d;
    color-scheme: dark;
}

body.f2h-authenticated .f2h-main {
    position: relative;
    color: var(--f2h-ink-soft);
    background:
        radial-gradient(circle at 12% 3%, rgba(120, 56, 255, .1), transparent 32rem),
        radial-gradient(circle at 86% 8%, rgba(46, 134, 255, .08), transparent 28rem),
        linear-gradient(180deg, #050917 0%, #02060f 100%);
}

body.f2h-template-clientareahome .f2h-page-banner {
    display: none;
}

body.f2h-template-clientareahome #main-body {
    padding-top: 32px;
}

.f2h-glass {
    border: 1px solid rgba(121, 153, 213, .22);
    background: linear-gradient(145deg, rgba(12, 26, 50, .86), rgba(5, 14, 29, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 26px 70px rgba(0, 2, 12, .3);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
}

/* Authenticated core and module surfaces receive paint only, never layout. */

body.f2h-authenticated :where(#main-body) :where(.card, .panel, .well, .jumbotron, .mc-promo-manage, .mc-promo-login, .dataTables_wrapper, .table-container) {
    border-color: rgba(119, 151, 207, .2);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 42px rgba(0, 2, 12, .2);
}

body.f2h-authenticated :where(#main-body) :where(.card-header, .panel-heading) {
    border-bottom-color: rgba(119, 151, 207, .18);
    color: var(--f2h-ink);
    background:
        linear-gradient(90deg, rgba(121, 72, 244, .13), transparent 42%),
        rgba(8, 19, 38, .74);
}

body.f2h-authenticated :where(#main-body) :where(.card-title, .panel-title) {
    color: var(--f2h-ink);
}

body.f2h-authenticated :where(#main-body) :where(.card-footer, .panel-footer) {
    border-top-color: rgba(119, 151, 207, .18);
    background: rgba(6, 15, 30, .62);
}

body.f2h-authenticated :where(#main-body) :where(.list-group-item) {
    border-color: rgba(119, 151, 207, .15);
    color: var(--f2h-ink-soft);
    background: rgba(7, 17, 34, .68);
}

body.f2h-authenticated :where(#main-body) :where(a.list-group-item:not(.disabled):hover, .list-group-item-action:not(.disabled):hover) {
    color: #fff;
    background: rgba(39, 69, 123, .3);
}

body.f2h-authenticated :where(#main-body) :where(.list-group-item.active) {
    border-color: rgba(117, 93, 244, .42);
    color: #fff;
    background: linear-gradient(90deg, rgba(114, 69, 239, .28), rgba(19, 54, 101, .24));
}

body.f2h-authenticated :where(#main-body) :where(.form-control, select.form-control, .custom-select) {
    border-color: rgba(126, 157, 210, .27);
    color: #eaf1ff;
    background-color: rgba(5, 14, 29, .76);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}

body.f2h-authenticated :where(#main-body) :where(.btn-default, .btn-secondary) {
    border-color: rgba(126, 157, 215, .26);
    color: #c0cce0;
    background: rgba(10, 23, 46, .72);
}

body.f2h-authenticated :where(#main-body) :where(.btn-default, .btn-secondary):not(:disabled):not(.disabled):hover {
    border-color: rgba(151, 113, 255, .48);
    color: #fff;
    background: rgba(91, 55, 184, .18);
}

body.f2h-authenticated :where(#main-body) :where(.form-control, .custom-select):focus {
    border-color: #6b7fff;
    background-color: rgba(8, 20, 41, .92);
    box-shadow: 0 0 0 4px rgba(100, 94, 246, .14), inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.f2h-authenticated :where(#main-body) :where(.form-control)::placeholder {
    color: #7687a4;
}

body.f2h-authenticated :where(#main-body) :where(label, .form-control-label) {
    color: #b8c5da;
}

body.f2h-authenticated :where(#main-body) :where(.input-group-text) {
    border-color: rgba(126, 157, 210, .27);
    color: #91a3c0;
    background: rgba(13, 28, 53, .88);
}

body.f2h-authenticated :where(#main-body) :where(.table) {
    color: var(--f2h-ink-soft);
    background: transparent;
}

body.f2h-authenticated :where(#main-body) :where(.table thead th) {
    border-color: rgba(119, 151, 207, .2);
    color: #91a4c5;
    background: rgba(14, 29, 54, .82);
}

body.f2h-authenticated :where(#main-body) :where(.table td) {
    border-color: rgba(119, 151, 207, .14);
}

body.f2h-authenticated :where(#main-body) :where(.table-hover tbody tr:hover) {
    color: #fff;
    background: rgba(36, 65, 113, .25);
}

body.f2h-authenticated :where(#main-body) .table-hover > tbody > tr:hover {
    color: #fff;
    background: rgba(36, 65, 113, .25);
}

body.f2h-authenticated :where(#main-body) .table-sm > :where(thead, tbody, tfoot) > tr > :where(th, td) {
    padding: .4rem;
}

body.f2h-authenticated :where(#main-body) :where(.table-striped tbody tr:nth-of-type(odd), .table-active) {
    background: rgba(28, 51, 89, .18);
}

body.f2h-authenticated :where(#main-body) :is(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light),
body.f2h-authenticated :where(#main-body) :is(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light) > :where(th, td),
body.f2h-authenticated :where(#main-body) .table-hover :is(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light):hover > :where(th, td) {
    color: #101a34;
}

body.f2h-authenticated :where(#main-body) :where(.dropdown-menu, .popover) {
    border-color: rgba(126, 157, 215, .25);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(13, 28, 53, .98), rgba(6, 15, 31, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 58px rgba(0, 2, 12, .42);
}

body.f2h-authenticated :where(#main-body) :where(.dropdown-item, .popover-body) {
    color: #b8c5da;
}

body.f2h-authenticated :where(#main-body) :where(.dropdown-item:hover, .dropdown-item:focus) {
    color: #fff;
    background: rgba(104, 69, 222, .19);
}

body.f2h-authenticated :where(#main-body) :where(.nav-tabs) {
    border-bottom-color: rgba(119, 151, 207, .2);
}

body.f2h-authenticated :where(#main-body) :where(.nav-tabs .nav-link) {
    color: #8799b8;
}

body.f2h-authenticated :where(#main-body) :where(.nav-tabs .nav-link:not(.disabled):hover, .nav-tabs .nav-link.active) {
    border-bottom-color: #a465ff;
    color: #fff;
}

body.f2h-authenticated :where(#main-body) :where(.pagination .page-link) {
    border-color: rgba(119, 151, 207, .2);
    color: #aab9d1;
    background: rgba(10, 22, 43, .84);
}

body.f2h-authenticated :where(#main-body) .pagination > li > :where(a, span) {
    border-color: rgba(119, 151, 207, .2);
    color: #aab9d1;
    background: rgba(10, 22, 43, .84);
}

body.f2h-authenticated :where(#main-body) .pagination > li:not(.disabled) > :where(a, span):hover {
    border-color: rgba(151, 113, 255, .42);
    color: #fff;
    background: rgba(91, 55, 184, .2);
}

body.f2h-authenticated :where(#main-body) .pagination > li.active > :where(a, span) {
    border-color: #6b7fff;
    color: #fff;
    background: linear-gradient(135deg, #5f55db, #315fc7);
}

body.f2h-authenticated :where(#main-body) .pagination > li.disabled > :where(a, span) {
    color: #66758f;
    background: rgba(10, 20, 38, .56);
}

body.f2h-authenticated :where(#main-body) :where(.badge-primary, .label-primary) {
    color: #9fc0ff;
    background: rgba(44, 91, 173, .27);
}

body.f2h-authenticated :where(#main-body) :where(.badge-success, .label-success, .status-active) {
    color: #63e1b5;
    background: rgba(23, 117, 88, .23);
}

body.f2h-authenticated :where(#main-body) :where(.badge-warning, .label-warning, .status-pending) {
    color: #efbd68;
    background: rgba(137, 86, 20, .23);
}

body.f2h-authenticated :where(#main-body) :where(.badge-danger, .label-danger, .status-suspended, .status-cancelled, .status-terminated) {
    color: #ff879e;
    background: rgba(140, 38, 61, .24);
}

body.f2h-authenticated :where(#main-body) :where(.progress) {
    background: rgba(43, 65, 102, .46);
}

body.f2h-authenticated :where(#main-body) :where(.progress-bar) {
    background: linear-gradient(90deg, #6f5ef0, #31c7d7);
}

body.f2h-authenticated :where(.modal-content) {
    border-color: rgba(126, 157, 215, .26);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(13, 28, 53, .99), rgba(6, 15, 31, .99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 28px 78px rgba(0, 2, 12, .48);
}

body.f2h-authenticated :where(.modal-header, .modal-footer) {
    border-color: rgba(119, 151, 207, .18);
    background: rgba(7, 17, 34, .72);
}

body.f2h-authenticated :where(.modal-title) {
    color: #f2f6ff;
}

body.f2h-authenticated :where(.modal .close) {
    color: #dbe5f7;
    text-shadow: none;
}

body.f2h-authenticated :where(.modal .close:hover, .modal .close:focus) {
    color: #fff;
    text-shadow: none;
    opacity: 1;
}

body.f2h-authenticated :where(#main-body) :where(.alert-info, .alert-success, .alert-warning, .alert-danger) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 2, 12, .16);
}

body.f2h-authenticated :where(#main-body) :where(.alert-info) {
    border-color: rgba(60, 151, 239, .28);
    color: #9bcfff;
    background: rgba(24, 86, 145, .2);
}

body.f2h-authenticated :where(#main-body) :where(.alert-success) {
    border-color: rgba(63, 215, 162, .25);
    color: #7de4bf;
    background: rgba(20, 112, 85, .18);
}

body.f2h-authenticated :where(#main-body) :where(.alert-warning) {
    border-color: rgba(240, 177, 76, .27);
    color: #efc77e;
    background: rgba(137, 86, 20, .18);
}

body.f2h-authenticated :where(#main-body) :where(.alert-danger) {
    border-color: rgba(255, 102, 132, .27);
    color: #ff9bad;
    background: rgba(140, 38, 61, .2);
}

body.f2h-authenticated :where(#main-body) :where(.module-client-area, .moduleoutput, .module-output) {
    color: var(--f2h-ink-soft);
}

body.f2h-authenticated :where(#main-body) :where(.module-client-area, .moduleoutput, .module-output) :where(hr) {
    border-color: rgba(119, 151, 207, .18);
}

body.f2h-authenticated :where(#main-body) .product-details-tab-container.bg-white {
    border-color: rgba(119, 151, 207, .2);
    color: var(--f2h-ink-soft);
    background:
        radial-gradient(circle at 12% -45%, rgba(105, 67, 228, .11), transparent 22rem),
        linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .88)) !important;
}

body.f2h-authenticated :where(#main-body) :where(.responsive-tabs-sm .nav-item a:hover) {
    color: #fff;
    background-color: rgba(104, 69, 222, .15);
}

@media (max-width: 767.98px) {
    body.f2h-authenticated :where(#main-body) :where(.responsive-tabs-sm) {
        border-color: rgba(119, 151, 207, .22);
        background: rgba(8, 19, 38, .88);
    }

    body.f2h-authenticated :where(#main-body) :where(.responsive-tabs-sm .nav-item) {
        border-bottom-color: rgba(119, 151, 207, .18) !important;
    }

    body.f2h-authenticated :where(#main-body) :where(.responsive-tabs-sm .nav-item a.active) {
        color: #fff;
        background-color: rgba(104, 69, 222, .2) !important;
    }

    body.f2h-authenticated :where(#main-body) :where(.responsive-tabs-sm-connector .channel) {
        border-color: rgba(119, 151, 207, .22);
        background: #081326;
    }

    body.f2h-authenticated :where(#main-body) :where(.responsive-tabs-sm-connector .bottom-border) {
        border-color: rgba(119, 151, 207, .22);
    }
}

body.f2h-authenticated :where(#main-body) :where(.module-client-area, .moduleoutput, .module-output) :where(.text-muted) {
    color: var(--f2h-muted) !important;
}

body.f2h-authenticated :where(#main-body) :where(.text-muted) {
    color: var(--f2h-muted) !important;
}

/* Targeted Nexus adapters for components that retain hard-coded light paint. */

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr > td {
    border-color: rgba(119, 151, 207, .14);
    color: var(--f2h-ink-soft);
    background-color: rgba(7, 17, 34, .7);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr:hover > td {
    color: #fff;
    background-color: rgba(36, 65, 113, .34);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-primary > td {
    color: #e3edff;
    background-color: rgba(44, 91, 173, .32);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-secondary > td,
body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-light > td {
    color: #e5ebf5;
    background-color: rgba(79, 95, 122, .32);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-success > td {
    color: #bdf6df;
    background-color: rgba(23, 117, 88, .28);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-warning > td {
    color: #ffe4ae;
    background-color: rgba(137, 86, 20, .3);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-danger > td {
    color: #ffc0cc;
    background-color: rgba(140, 38, 61, .3);
}

body.f2h-authenticated :where(#main-body) table.table-list > tbody > tr.table-info > td {
    color: #b9e3ff;
    background-color: rgba(24, 86, 145, .3);
}

body.f2h-authenticated :where(#main-body) table.table-list > thead > tr > th,
body.f2h-authenticated :where(#main-body) table.table-list > thead > tr > th.sorting,
body.f2h-authenticated :where(#main-body) table.table-list > thead > tr > th.sorting_asc,
body.f2h-authenticated :where(#main-body) table.table-list > thead > tr > th.sorting_desc {
    border-color: rgba(119, 151, 207, .2);
    color: #91a4c5;
    background-color: rgba(14, 29, 54, .92);
}

body.f2h-authenticated :where(#main-body) .dataTables_wrapper .dataTables_filter label .form-control {
    border-color: rgba(126, 157, 210, .27);
    color: #eaf1ff;
    background-color: rgba(5, 14, 29, .82);
}

body.f2h-authenticated #main-body .alert .alert-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

body.f2h-authenticated :where(.dropdown-menu, .popover, .select2-dropdown) {
    border-color: rgba(126, 157, 215, .25);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(13, 28, 53, .99), rgba(6, 15, 31, .99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 58px rgba(0, 2, 12, .42);
    color-scheme: dark;
}

body.f2h-authenticated :where(.dropdown-menu, .popover, .select2-dropdown) :where(.dropdown-item, .popover-body, .select2-results__option) {
    color: #b8c5da;
}

body.f2h-authenticated :where(.dropdown-menu, .popover, .select2-dropdown) :where(.dropdown-item:not(.disabled):hover, .dropdown-item:not(.disabled):focus, .select2-results__option--highlighted) {
    color: #fff;
    background: rgba(104, 69, 222, .19);
}

body.f2h-authenticated :where(.iti__country-list, .country-list) {
    border-color: rgba(126, 157, 215, .25);
    color: #dbe5f7;
    background: #091426;
    box-shadow: 0 22px 58px rgba(0, 2, 12, .42);
    color-scheme: dark;
}

/* Legacy intl-tel-input ships selectors stronger than the low-specificity module layer. */
body.f2h-authenticated .intl-tel-input .country-list {
    border-color: rgba(126, 157, 215, .25);
    color: #dbe5f7;
    background: #091426;
    box-shadow: 0 22px 58px rgba(0, 2, 12, .42);
    color-scheme: dark;
}

body.f2h-authenticated :where(.iti__country:hover, .iti__country.iti__highlight, .country:hover, .country.highlight) {
    color: #fff;
    background: rgba(104, 69, 222, .19);
}

body.f2h-authenticated .intl-tel-input .country-list .country:hover,
body.f2h-authenticated .intl-tel-input .country-list .country.highlight {
    color: #fff;
    background: rgba(104, 69, 222, .19);
}

body.f2h-authenticated :where(.intl-tel-input .selected-flag:hover, .intl-tel-input .selected-flag:focus, .iti__selected-flag:hover, .iti__selected-flag:focus) {
    background: rgba(104, 69, 222, .14);
}

body.f2h-authenticated .intl-tel-input .selected-flag:hover,
body.f2h-authenticated .intl-tel-input .selected-flag:focus {
    background: rgba(104, 69, 222, .14);
}

body.f2h-authenticated :where(.intl-tel-input .selected-flag .iti-arrow, .iti__arrow) {
    border-top-color: #91a3c0;
}

body.f2h-authenticated .intl-tel-input .selected-flag .iti-arrow {
    border-top-color: #91a3c0;
}

body.f2h-authenticated :where(.intl-tel-input .selected-flag .iti-arrow.up, .iti__arrow.iti__arrow--up) {
    border-top-color: transparent;
    border-bottom-color: #91a3c0;
}

body.f2h-authenticated .intl-tel-input .selected-flag .iti-arrow.up {
    border-top-color: transparent;
    border-bottom-color: #91a3c0;
}

body.f2h-authenticated :where(.select2-search--dropdown .select2-search__field) {
    border-color: rgba(126, 157, 210, .27);
    color: #eaf1ff;
    background: rgba(5, 14, 29, .82);
}

body.f2h-authenticated .select2-container--default .select2-results__option[aria-selected="true"] {
    color: #dbe5f7;
    background: rgba(52, 74, 113, .46);
}

body.f2h-authenticated .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #fff;
    background: rgba(104, 69, 222, .32);
}

body.f2h-authenticated .select2-container--default .select2-results__option[aria-disabled="true"] {
    color: #66758f;
    background: transparent;
}

body.f2h-authenticated .popover-user-notifications {
    width: min(420px, calc(100vw - 24px));
    max-width: 420px;
    overflow: hidden;
    border: 1px solid rgba(114, 151, 219, .32);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% -20%, rgba(116, 78, 224, .24), transparent 45%),
        linear-gradient(155deg, #0d203c 0%, #071327 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 26px 70px rgba(0, 3, 14, .58);
}

body.f2h-authenticated .popover-user-notifications .popover-header:empty {
    display: none;
}

body.f2h-authenticated .popover-user-notifications .popover-body {
    padding: 0;
}

body.f2h-authenticated .popover-user-notifications .client-alerts {
    max-height: min(520px, calc(100vh - 170px));
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.f2h-authenticated .popover-user-notifications ul li {
    position: relative;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(119, 151, 207, .14);
    background: transparent;
}

body.f2h-authenticated .popover-user-notifications ul li:last-child {
    border-bottom: 0;
}

body.f2h-authenticated .popover-user-notifications ul li > a {
    color: #b8c5da;
    background: transparent;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(119, 151, 207, .18);
    color: #eef3ff;
    background: linear-gradient(100deg, rgba(42, 85, 163, .3), rgba(102, 65, 202, .24));
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .025em;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-toolbar > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-toolbar > span i {
    color: #91a9ff;
    font-size: 12px;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-read-all {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(142, 127, 244, .28);
    border-radius: 999px;
    color: #aebfff;
    background: rgba(38, 31, 85, .36);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .055em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-read-all:hover,
body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-read-all:focus-visible {
    border-color: rgba(165, 150, 255, .5);
    color: #fff;
    background: rgba(66, 52, 135, .55);
    outline: 0;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-read-all.is-busy,
body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-read-all[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 14px auto 14px 0;
    width: 2px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, #6fa6ff, #987cff);
    box-shadow: 0 0 15px rgba(116, 133, 255, .38);
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-open {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px 48px 16px 16px;
    text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-open:hover,
body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-open:focus {
    color: #fff;
    background: linear-gradient(90deg, rgba(45, 91, 170, .18), rgba(103, 70, 207, .14));
    outline: 0;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification--warning::before {
    background: #eb8153;
    box-shadow: 0 0 15px rgba(235, 129, 83, .35);
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification--danger::before {
    background: #ef6473;
    box-shadow: 0 0 15px rgba(239, 100, 115, .35);
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-open > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(131, 151, 233, .24);
    border-radius: 10px;
    color: #a999ff;
    background: linear-gradient(145deg, rgba(44, 78, 139, .54), rgba(72, 48, 137, .46));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    font-size: 13px;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification--warning .f2h-provider-notification-open > i {
    color: #f0a278;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification--danger .f2h-provider-notification-open > i {
    color: #ff7b88;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification .message {
    min-width: 0;
    display: grid;
    gap: 3px;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification .message strong {
    color: #f3f6ff;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.35;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification .message span {
    color: #b4c2d8;
    font-size: 12px;
    line-height: 1.5;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification .message small {
    margin-top: 2px;
    color: #8193b2;
    font-size: 10px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-dismiss {
    position: absolute;
    z-index: 3;
    top: 13px;
    right: 12px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #7f91ae;
    background: transparent;
    text-decoration: none;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-dismiss i {
    margin: 0;
    color: inherit;
    font-size: 11px;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-dismiss:hover,
body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-dismiss:focus-visible {
    border-color: rgba(142, 127, 244, .3);
    color: #f0edff;
    background: rgba(70, 54, 141, .4);
    outline: 0;
}

body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-dismiss.is-busy,
body.f2h-authenticated .popover-user-notifications .f2h-provider-notification-dismiss[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

body.f2h-authenticated .popover-user-notifications .client-alerts > .none {
    padding: 28px 18px;
    color: #899bb8;
    font-size: 12px;
    text-align: center;
}

body.f2h-authenticated :where(.popover-header) {
    border-color: rgba(119, 151, 207, .18);
    color: #f2f6ff;
    background: rgba(13, 28, 53, .98);
}

body.f2h-authenticated :where(.bs-popover-top > .arrow)::after {
    border-top-color: #091426;
}

body.f2h-authenticated :where(.bs-popover-right > .arrow)::after {
    border-right-color: #091426;
}

body.f2h-authenticated :where(.bs-popover-bottom > .arrow)::after {
    border-bottom-color: #0d1c35;
}

body.f2h-authenticated :where(.bs-popover-left > .arrow)::after {
    border-left-color: #091426;
}

body.f2h-authenticated .popover.bs-popover-top > .arrow::after,
body.f2h-authenticated .popover.bs-popover-auto[x-placement^="top"] > .arrow::after,
body.f2h-authenticated .popover[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: #091426;
}

body.f2h-authenticated .popover.bs-popover-right > .arrow::after,
body.f2h-authenticated .popover.bs-popover-auto[x-placement^="right"] > .arrow::after,
body.f2h-authenticated .popover[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: #091426;
}

body.f2h-authenticated .popover.bs-popover-bottom > .arrow::after,
body.f2h-authenticated .popover.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
body.f2h-authenticated .popover[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: #0d1c35;
}

body.f2h-authenticated .popover.bs-popover-left > .arrow::after,
body.f2h-authenticated .popover.bs-popover-auto[x-placement^="left"] > .arrow::after,
body.f2h-authenticated .popover[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: #091426;
}

body.f2h-authenticated :where(.modal-content) :where(.form-control, select.form-control, .custom-select) {
    border-color: rgba(126, 157, 210, .27);
    color: #eaf1ff;
    background-color: rgba(5, 14, 29, .76);
}

body.f2h-authenticated :where(.modal-content) :where(label, .form-control-label) {
    color: #b8c5da;
}

body.f2h-authenticated :where(.modal-content) :where(.input-group-text) {
    border-color: rgba(126, 157, 210, .27);
    color: #91a3c0;
    background: rgba(13, 28, 53, .88);
}

body.f2h-authenticated :where(.modal-content) :where(.btn-default, .btn-secondary) {
    border-color: rgba(126, 157, 215, .26);
    color: #c0cce0;
    background: rgba(10, 23, 46, .72);
}

body.f2h-authenticated :where(.modal-content) :where(.btn-default, .btn-secondary):not(:disabled):not(.disabled):hover {
    border-color: rgba(151, 113, 255, .48);
    color: #fff;
    background: rgba(91, 55, 184, .18);
}

body.f2h-authenticated :where(#main-body) :where(.md-editor) {
    border-color: rgba(126, 157, 210, .27);
    background: rgba(5, 14, 29, .76);
}

body.f2h-authenticated :where(#main-body) :where(.md-editor > .btn-toolbar, .md-editor .md-header, .md-editor .md-footer) {
    border-color: rgba(119, 151, 207, .18) !important;
    color: #dbe5f7;
    background: rgba(13, 28, 53, .9) !important;
}

body.f2h-authenticated :where(#main-body) :where(.md-editor > textarea.markdown-editor, .md-editor > .md-preview) {
    border-color: rgba(119, 151, 207, .18) !important;
    color: #eaf1ff !important;
    background: rgba(5, 14, 29, .82) !important;
}

body.f2h-authenticated :where(#main-body) :where(.md-preview, .markdown-content) :where(h1, h2, h3, h4, h5, h6) {
    color: #f2f6ff;
}

body.f2h-authenticated :where(#main-body) :where(.md-preview, .markdown-content) :where(table) {
    color: var(--f2h-ink-soft);
    background: rgba(5, 14, 29, .82);
}

body.f2h-authenticated :where(#main-body) .md-preview table > thead > tr > th,
body.f2h-authenticated :where(#main-body) .markdown-content table > thead > tr > th {
    border-color: rgba(119, 151, 207, .2);
    color: #dbe5f7;
    background: rgba(14, 29, 54, .92);
}

body.f2h-authenticated :where(#main-body) .md-preview table > tbody > tr > td,
body.f2h-authenticated :where(#main-body) .markdown-content table > tbody > tr > td {
    border-color: rgba(119, 151, 207, .14);
    background: rgba(7, 17, 34, .7);
}

body.f2h-authenticated :where(.custom-file-label) {
    border-color: rgba(126, 157, 210, .27);
    color: #b8c5da;
    background: rgba(5, 14, 29, .82);
}

body.f2h-authenticated :where(.custom-file-label)::after {
    color: #dbe5f7;
    background: rgba(13, 28, 53, .94);
}

body.f2h-authenticated div.product-details div.product-icon {
    border: 1px solid rgba(126, 157, 210, .2);
    color: #dbe5f7;
    background: linear-gradient(145deg, rgba(15, 31, 58, .9), rgba(7, 17, 34, .84));
}

body.f2h-authenticated .card-sidebar.bg-light,
body.f2h-authenticated .sidebar .card.bg-light {
    border-color: rgba(119, 151, 207, .2);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(12, 26, 50, .94), rgba(6, 15, 31, .92)) !important;
}

body.f2h-authenticated :where(#main-body) :where(.mc-promo-manage .content, .mc-promo-login .content) {
    color: var(--f2h-ink-soft);
    background: transparent;
}

body.f2h-authenticated :where(#main-body) :where(.mc-promo-manage .panel-heading h3, .mc-promo-login .panel-heading h3) {
    color: var(--f2h-ink);
}

body.f2h-authenticated :where(#main-body) :where(.form-control:disabled, .form-control[readonly], .custom-select:disabled),
body.f2h-authenticated :where(.modal-content) :where(.form-control:disabled, .form-control[readonly], .custom-select:disabled) {
    border-color: rgba(126, 157, 210, .15);
    color: #71819d;
    background-color: rgba(10, 20, 38, .72);
    opacity: .78;
}

body.f2h-authenticated :where(#main-body) .form-control:disabled,
body.f2h-authenticated :where(#main-body) .form-control[readonly],
body.f2h-authenticated :where(#main-body) .custom-select:disabled,
body.f2h-authenticated .modal-content .form-control:disabled,
body.f2h-authenticated .modal-content .form-control[readonly],
body.f2h-authenticated .modal-content .custom-select:disabled {
    border-color: rgba(126, 157, 210, .15);
    color: #71819d;
    background-color: rgba(10, 20, 38, .72);
    opacity: .78;
}

body.f2h-authenticated :where(#main-body) :where(.was-validated .form-control:invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .custom-select.is-invalid) {
    border-color: #e85a73;
}

body.f2h-authenticated :where(#main-body) :where(.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus) {
    border-color: #f26d84;
    box-shadow: 0 0 0 4px rgba(232, 78, 104, .15);
}

body.f2h-authenticated :where(#main-body) :where(.was-validated .form-control:valid, .form-control.is-valid, .was-validated .custom-select:valid, .custom-select.is-valid) {
    border-color: #24c995;
}

body.f2h-authenticated :where(#main-body) :where(.was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus) {
    border-color: #3bddaa;
    box-shadow: 0 0 0 4px rgba(36, 201, 149, .14);
}

body.f2h-authenticated :where(#main-body, .modal-content) form[data-role="json-form"] .has-error :where(input.form-control, textarea.form-control, select.form-control),
body.f2h-authenticated :where(#main-body, .modal-content) :where(.form-group.has-error, .has-error) :where(.form-control) {
    border-color: #e85a73;
    color: #ffe7ec;
    background-color: rgba(91, 21, 39, .48);
}

body.f2h-authenticated :where(#main-body, .modal-content) :where(.form-group.has-error, .has-error) :where(label, .help-block, .invalid-feedback) {
    color: #ff9bad;
}

body.f2h-authenticated :where(#main-body, .modal-content) :where(.form-group.has-warning, .has-warning, .is-warning) :where(.form-control) {
    border-color: #d89b3b;
    color: #fff1d5;
    background-color: rgba(102, 67, 15, .42);
}

body.f2h-authenticated :where(#main-body, .modal-content) :where(.invalid-feedback, .has-error .help-block) {
    color: #ff8ca1;
}

body.f2h-authenticated :where(#main-body, .modal-content) :where(.valid-feedback) {
    color: #63e1b5;
}

body.f2h-authenticated :where(#main-body) :where(.btn.disabled, .btn:disabled, .nav-link.disabled, .list-group-item.disabled, .page-item.disabled .page-link) {
    color: #66758f;
    background: rgba(10, 20, 38, .56);
    border-color: rgba(119, 151, 207, .12);
    box-shadow: none;
    opacity: .68;
}

body.f2h-authenticated :where(#main-body) :where(.bg-white) {
    border-color: rgba(119, 151, 207, .2);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86)) !important;
    color-scheme: dark;
}

body.f2h-authenticated :where(#main-body) :where(.bg-light) {
    border-color: rgba(119, 151, 207, .18);
    color: var(--f2h-ink-soft);
    background: rgba(10, 24, 46, .84) !important;
    color-scheme: dark;
}

body.f2h-authenticated :where(#main-body) :where(.text-dark, .text-body) {
    color: #dbe5f7 !important;
}

body.f2h-authenticated :where(#main-body) :where(.text-black-50) {
    color: rgba(184, 197, 218, .7) !important;
}

body.f2h-authenticated :where(#main-body) :where(.text-secondary) {
    color: #91a3c0 !important;
}

body.f2h-authenticated :where(#main-body) :where(.bg-white, .bg-light) :where(.text-black-50),
body.f2h-authenticated :where(#main-body) :where(.bg-white.text-black-50, .bg-light.text-black-50) {
    color: rgba(184, 197, 218, .72) !important;
}

body.f2h-authenticated :where(#main-body) :where(.bg-white, .bg-light) :where(.text-secondary),
body.f2h-authenticated :where(#main-body) :where(.bg-white.text-secondary, .bg-light.text-secondary) {
    color: #9bacc5 !important;
}

body.f2h-authenticated :where(#main-body) :where(.bg-warning) {
    color: #3a2807 !important;
}

body.f2h-authenticated :where(#main-body) :where(.progress-bar-success, .progress-bar.bg-success) {
    color: #fff;
    background: linear-gradient(90deg, #087a5a, #075f49) !important;
}

body.f2h-authenticated :where(#main-body) :where(.progress-bar-warning, .progress-bar.bg-warning) {
    color: #3a2807;
    background: linear-gradient(90deg, #f3c45d, #d89b3b) !important;
}

body.f2h-authenticated :where(#main-body) :where(.progress-bar-danger, .progress-bar.bg-danger) {
    color: #fff;
    background: linear-gradient(90deg, #bd314d, #97263e) !important;
}

body.f2h-authenticated :where(#main-body) :where(.progress-bar-info, .progress-bar.bg-info) {
    color: #fff;
    background: linear-gradient(90deg, #1768bd, #174b93) !important;
}

body.f2h-authenticated :where(#main-body) :where(.select-account) :where(a) {
    border-color: rgba(119, 151, 207, .15);
    color: #b8c5da;
}

body.f2h-authenticated :where(#main-body) :where(.select-account) :where(a:hover, a:focus) {
    color: #fff;
    background: rgba(104, 69, 222, .19);
}

body.f2h-authenticated :where(#main-body) :where(.invite-box) {
    border-color: rgba(119, 151, 207, .2);
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86));
}

body.f2h-authenticated .dtr-modal {
    z-index: 1080;
}

body.f2h-authenticated .dtr-modal .dtr-modal-display,
body.f2h-authenticated .dtr-modal .dtr-modal-close {
    color: #c6d3e5;
    background: linear-gradient(145deg, #0d1c35, #07101f);
    color-scheme: dark;
}

body.f2h-authenticated .dtr-modal .dtr-modal-close {
    border-color: rgba(126, 157, 215, .28);
    color: #dbe5f7;
}

body.f2h-authenticated .dtr-modal .dtr-modal-display :where(.table, .table td, .table th) {
    color: #c6d3e5;
    border-color: rgba(119, 151, 207, .18);
    background: transparent;
}

/* Marketplace pages keep their product-specific artwork but inherit the
   portal's dark glass contract so vendor templates cannot reopen white islands. */
body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) {
    --f2h-ink: #f2f6ff;
    --f2h-ink-soft: #c0cce0;
    --f2h-muted: #8fa0bb;
    --f2h-line: rgba(119, 151, 207, .18);
    --f2h-line-strong: rgba(137, 173, 234, .34);
    --text: #f2f6ff;
    --text-muted: #8fa0bb;
    --text-lifted: #c0cce0;
    --text-accented: #dbe5f7;
    --border-muted: rgba(119, 151, 207, .15);
    --border: rgba(119, 151, 207, .22);
    --bg: #091426;
    --bg-muted: #07101f;
    --bg-lifted: #0c1930;
    --bg-accented: #10213c;
    color: #c0cce0;
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86)) !important;
    color-scheme: dark;
}

body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) :where(.card, .panel, .list-group-item) {
    border-color: rgba(119, 151, 207, .2);
    color: #c0cce0;
    background: linear-gradient(145deg, rgba(12, 26, 50, .92), rgba(6, 15, 31, .9));
    box-shadow: 0 16px 42px rgba(0, 2, 12, .2), inset 0 1px rgba(255, 255, 255, .04);
}

body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) :where(.card-header, .panel-heading, .card-footer, .panel-footer) {
    border-color: rgba(119, 151, 207, .18);
    color: #f2f6ff;
    background: rgba(10, 24, 47, .88);
}

body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) :where(label, .form-control-label) {
    color: #b8c5da;
}

body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) :where(.form-control, .custom-select) {
    border-color: rgba(126, 157, 210, .27);
    color: #edf3fc;
    background-color: #09162a;
}

body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) :where(.bg-white, .bg-light) {
    color: #c0cce0;
    background-color: rgba(9, 20, 38, .86) !important;
}

body.f2h-shell :where(#main-body) :where(.landing-page, .dynamic-landing-page, .store-domain-tab-content.bg-white, .home-domain-search.bg-white) :where(.text-dark, .text-body) {
    color: #dbe5f7 !important;
}

/* The order form shares the dark portal language. Its selectors deliberately
   retain the order-form ID so they outrank the bundled standard_cart skin
   without changing WHMCS markup, gateway hooks, or JavaScript contracts. */
body.f2h-shell.f2h-shopping-cart #order-standard_cart {
    --f2h-ink: #eef4ff;
    --f2h-ink-soft: #c6d3e5;
    --f2h-muted: #93a6c1;
    --f2h-line: rgba(126, 159, 216, .2);
    --f2h-line-strong: rgba(126, 159, 216, .32);
    --text: #dbe7f7;
    --text-muted: #93a6c1;
    --text-lifted: #b5c5da;
    --text-accented: #dce9fa;
    --border-muted: rgba(126, 159, 216, .14);
    --border: rgba(126, 159, 216, .22);
    --border-lifted: rgba(126, 181, 232, .42);
    --bg: #071426;
    --bg-muted: #0b1a31;
    --bg-lifted: #10243f;
    --bg-accented: #153052;
    color: #c6d3e5;
    color-scheme: dark;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .header-lined {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom-color: rgba(126, 159, 216, .16);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .header-lined h1 {
    margin-bottom: 6px;
    color: #f5f8ff;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -.035em;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .header-lined p {
    margin: 0;
    color: #9fb0c8;
    font-size: 15px;
    line-height: 1.6;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.card, .panel, .product, .product-info, .table-container, .dataTables_wrapper) {
    border-color: rgba(126, 159, 216, .2);
    color: #c6d3e5;
    background: linear-gradient(145deg, rgba(14, 31, 58, .94), rgba(7, 19, 37, .92));
    box-shadow: 0 16px 40px rgba(0, 5, 20, .18), inset 0 1px rgba(255, 255, 255, .035);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.card-header, .panel-heading, .card-footer, .panel-footer, .products .product header) {
    border-color: rgba(126, 159, 216, .18);
    color: #eef4ff;
    background: linear-gradient(100deg, rgba(36, 65, 113, .72), rgba(9, 24, 46, .92));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar {
    overflow: hidden;
    border: 1px solid rgba(120, 154, 211, .2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(10, 23, 45, .96), rgba(5, 14, 29, .94));
    box-shadow: 0 18px 45px rgba(0, 5, 20, .2), inset 0 1px rgba(255, 255, 255, .035);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar > .panel-heading {
    border-color: rgba(126, 159, 216, .18);
    color: #edf3ff;
    background: linear-gradient(100deg, rgba(92, 58, 210, .24), rgba(9, 22, 44, .84));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar > .panel-heading :where(h3, i) {
    color: #edf3ff;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar .list-group-item {
    border-color: rgba(126, 159, 216, .12);
    color: #b9c8dc;
    background: transparent;
    box-shadow: none;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar .list-group-item:hover,
body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar .list-group-item:focus-visible {
    color: #fff;
    background: rgba(45, 93, 162, .2);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .panel-sidebar .list-group-item.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(93, 60, 218, .36), rgba(17, 59, 104, .54));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .sidebar-collapsed {
    border: 1px solid rgba(126, 159, 216, .18);
    background: rgba(7, 19, 37, .86);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.products .product, .product-info, .view-cart-items, .view-cart-empty, .order-summary, .summary-container, .domain-renewals, .service-renewals, .addon-renewals, .domain-promo-box, .input-group-box, .tab-content, .already-registered, .apply-credit-container, .account-select-container .account) {
    border-color: rgba(126, 159, 216, .2);
    color: #c6d3e5;
    background: linear-gradient(145deg, rgba(14, 31, 58, .94), rgba(7, 19, 37, .92));
    box-shadow: 0 16px 40px rgba(0, 5, 20, .16), inset 0 1px rgba(255, 255, 255, .035);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.view-cart-items-header, .products .product header) {
    border-color: rgba(126, 159, 216, .18);
    color: #eef4ff;
    background: linear-gradient(100deg, rgba(36, 65, 113, .78), rgba(9, 24, 46, .94));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.view-cart-items .item, .view-cart-items .item:nth-child(even), .domain-renewals .domain-renewal, .domain-renewals .domain-renewal:nth-child(even), .service-renewals .service-renewal, .service-renewals .service-renewal:nth-child(even), .addon-renewals .service-renewal, .addon-renewals .service-renewal:nth-child(even)) {
    border-color: rgba(126, 159, 216, .14);
    color: #c6d3e5;
    background: rgba(7, 20, 38, .76);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .order-summary {
    overflow: hidden;
    border: 1px solid rgba(126, 159, 216, .22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(14, 31, 58, .97), rgba(7, 19, 37, .96));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .order-summary h2 {
    border-bottom: 1px solid rgba(126, 159, 216, .18);
    color: #fff;
    background: linear-gradient(100deg, rgba(36, 65, 113, .86), rgba(9, 24, 46, .96));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.bg-white, .bg-light) {
    color: #c6d3e5;
    background: linear-gradient(145deg, rgba(14, 31, 58, .94), rgba(7, 19, 37, .92)) !important;
    color-scheme: dark;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(h1, h2, h3, h4, h5, h6, strong, label, .text-dark, .text-body, .products .product header span) {
    color: #eef4ff !important;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(p, small, .text-muted, .products .product header .qty, .domain-promo-box .small, .order-summary .recurring-charges) {
    color: #9fb0c8 !important;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.form-control, .custom-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]) {
    border-color: rgba(126, 159, 216, .26);
    color: #edf3fc;
    background-color: #09162a !important;
    color-scheme: dark;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.form-control, textarea)::placeholder {
    color: #70839f;
    opacity: 1;
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart :where(.form-control, .custom-select, textarea):focus {
    border-color: #3b9de7;
    box-shadow: 0 0 0 4px rgba(48, 137, 226, .15);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .sub-heading {
    border-bottom-color: rgba(126, 159, 216, .18);
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .sub-heading span {
    color: #eaf3ff;
    background: linear-gradient(90deg, rgba(75, 74, 210, .72), rgba(25, 80, 180, .76));
}

body.f2h-shell.f2h-shopping-cart #order-standard_cart .account-select-container .account.active {
    border-color: rgba(76, 157, 255, .48);
    background: linear-gradient(145deg, rgba(18, 70, 140, .78), rgba(7, 28, 47, .94));
}

/* Legacy WHMCS flows must stay inside the dark surface system. */
body.f2h-authenticated :where(#main-body) :where(.promo-banner, .ticketfeedbackstaffcont, .secondary-cart-body #domainRenewals, .upgrade .product-to-be-upgraded, .upgrade .products .product) {
    --f2h-ink: #f2f6ff;
    --f2h-ink-soft: #c0cce0;
    --f2h-muted: #91a2bb;
    --f2h-line: rgba(119, 151, 207, .18);
    --f2h-line-strong: rgba(137, 173, 234, .3);
    --text: #f2f6ff;
    --text-muted: #91a2bb;
    --text-lifted: #c0cce0;
    --text-accented: #dbe5f7;
    --border-muted: rgba(119, 151, 207, .15);
    --border: rgba(119, 151, 207, .22);
    --bg: #091426;
    --bg-muted: #07101f;
    --bg-lifted: #0c1930;
    color: #c0cce0;
    background: linear-gradient(145deg, rgba(12, 26, 50, .92), rgba(6, 15, 31, .9));
    color-scheme: dark;
}

body.f2h-authenticated :where(#main-body) :where(.promo-banner, .ticketfeedbackstaffcont, .secondary-cart-body #domainRenewals, .upgrade .product-to-be-upgraded, .upgrade .products .product) :where(h1, h2, h3, h4, h5, h6, .text-dark, .text-body) {
    color: #f2f6ff !important;
}

body.f2h-authenticated :where(#main-body) :where(tr.masspay-total td, .invoice-summary-table td.total-row) {
    border-color: rgba(119, 151, 207, .24);
    color: #f2f6ff;
    background: linear-gradient(90deg, rgba(91, 68, 207, .2), rgba(11, 31, 57, .92));
}

body.f2h-authenticated .card-sidebar {
    border-color: rgba(119, 151, 207, .2);
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86));
}

body.f2h-authenticated .card-sidebar .card-header {
    color: #fff;
    background: linear-gradient(100deg, rgba(105, 60, 224, .2), rgba(9, 22, 44, .78) 62%);
}

body.f2h-authenticated .card-sidebar .card-title,
body.f2h-authenticated .card-sidebar .card-title > i:first-child {
    color: #eaf1ff;
}

body.f2h-authenticated .card-sidebar .list-group-item {
    border-color: rgba(119, 151, 207, .15);
    color: var(--f2h-ink-soft);
    background: rgba(7, 17, 34, .68);
}

body.f2h-authenticated .card-sidebar .list-group-item:not(.disabled):hover {
    color: #fff;
    background: rgba(39, 69, 123, .3);
}

body.f2h-authenticated .card-sidebar .list-group-item.f2h-ip-nav-cidr {
    padding: 8px 15px 8px 28px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: -0.02em;
    color: #c5d3e8;
}

body.f2h-authenticated .card-sidebar .list-group-item.f2h-ip-nav-cidr .sidebar-menu-item-icon-wrapper {
    width: 16px;
    font-size: 12px;
}

body.f2h-authenticated .card-sidebar .list-group-item.active {
    border-color: rgba(117, 93, 244, .42);
    color: #fff;
    background: linear-gradient(90deg, rgba(114, 69, 239, .28), rgba(19, 54, 101, .24));
}

body.f2h-authenticated .sidebar-menu-item-icon-wrapper {
    color: #9781ff;
}

/* Dashboard command surface */

.f2h-dashboard-hero {
    isolation: isolate;
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
    gap: 0;
    margin-bottom: 16px;
    padding: 30px 32px 0;
    border-color: rgba(128, 153, 213, .25);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 10% -60%, rgba(138, 70, 255, .24), transparent 31rem),
        radial-gradient(circle at 93% 0%, rgba(46, 134, 255, .12), transparent 23rem),
        linear-gradient(135deg, rgba(10, 20, 43, .94), rgba(4, 12, 27, .9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 72px rgba(0, 0, 0, .34);
}

.f2h-dashboard-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .34;
    background:
        linear-gradient(rgba(122, 151, 211, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 151, 211, .055) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(125deg, #000, transparent 72%);
}

.f2h-dashboard-hero::after {
    z-index: -1;
    width: 260px;
    height: 260px;
    right: -140px;
    bottom: -150px;
    border-color: rgba(111, 218, 255, .13);
    box-shadow: 0 0 0 38px rgba(55, 140, 255, .025), 0 0 0 76px rgba(113, 67, 244, .02);
}

.f2h-dashboard-copy {
    padding: 2px 34px 27px 0;
}

.f2h-dashboard-overline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.f2h-live-state,
.f2h-briefing-live,
.f2h-workspace-sync {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7cebbf;
    font-size: 9px;
    font-weight: 790;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.f2h-live-state i,
.f2h-briefing-live i,
.f2h-workspace-sync i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #32d99d;
    box-shadow: 0 0 0 4px rgba(50, 217, 157, .09), 0 0 13px rgba(50, 217, 157, .48);
}

.f2h-live-state-neutral {
    color: #8fb8e8;
}

.f2h-live-state-neutral i {
    background: #5ca0ff;
    box-shadow: 0 0 0 4px rgba(92, 160, 255, .08), 0 0 13px rgba(92, 160, 255, .32);
}

.f2h-dashboard-copy :where(h1, h2) {
    margin: 12px 0 8px;
    font-size: clamp(29px, 3.1vw, 43px);
    font-weight: 730;
    letter-spacing: -.048em;
}

.f2h-dashboard-copy p {
    max-width: 650px;
    color: #9fadc5;
    font-size: 13px;
    line-height: 1.65;
}

.f2h-dashboard-actions {
    margin-top: 19px;
}

.f2h-command-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 25px 0 0;
}

.f2h-command-details > div {
    min-width: 122px;
    padding: 0 18px;
    border-left: 1px solid rgba(124, 153, 209, .18);
}

.f2h-command-details > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.f2h-command-details dt,
.f2h-command-details dd {
    margin: 0;
}

.f2h-command-details dt {
    color: #7f92b2;
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.f2h-command-details dd {
    margin-top: 3px;
    color: #c5d1e4;
    font-size: 10px;
    font-weight: 680;
}

.f2h-command-details dd i {
    margin-right: 5px;
    color: #9075ff;
}

.f2h-dashboard-briefing {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 3px 0 27px 30px;
    border-left: 1px solid rgba(126, 157, 215, .2);
}

.f2h-briefing-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #7588a7;
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-briefing-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 19px;
}

.f2h-briefing-title .f2h-noc-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-color: rgba(80, 230, 199, .25);
    border-radius: 10px;
    color: #61e7ca;
    background: linear-gradient(145deg, rgba(20, 101, 115, .34), rgba(6, 38, 69, .3));
}

.f2h-briefing-title small,
.f2h-briefing-title strong {
    display: block;
}

.f2h-briefing-title small {
    color: #7487a4;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-briefing-title strong {
    margin-top: 1px;
    color: #f2f6ff;
    font-size: 18px;
    letter-spacing: -.02em;
}

.f2h-briefing-signal {
    height: 32px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin: 20px 0 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(112, 147, 205, .2);
}

.f2h-briefing-signal i {
    height: 8px;
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(101, 238, 213, .88), rgba(41, 125, 178, .38));
    box-shadow: 0 0 10px rgba(74, 222, 208, .12);
}

.f2h-briefing-signal i:nth-child(2n) { height: 15px; }
.f2h-briefing-signal i:nth-child(3n) { height: 22px; }
.f2h-briefing-signal i:nth-child(5n) { height: 12px; }

.f2h-dashboard-briefing p {
    margin: 0;
    color: #8393ae;
    font-size: 10px;
    line-height: 1.55;
}

.f2h-dashboard-briefing > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #88a3ff;
    font-size: 10px;
    font-weight: 730;
}

.f2h-dashboard-briefing > a:hover {
    color: #c0b6ff;
}

.f2h-account-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 -32px;
    border-top: 1px solid rgba(126, 157, 215, .2);
    background: rgba(3, 10, 23, .45);
}

.f2h-stat-card {
    min-height: 78px;
    gap: 11px;
    padding: 15px 22px;
    border: 0;
    border-right: 1px solid rgba(126, 157, 215, .16);
    border-radius: 0;
    color: #dfe8f7;
    background: transparent;
    box-shadow: none;
}

.f2h-stat-card:last-child {
    border-right: 0;
}

.f2h-stat-card::before {
    display: none;
}

.f2h-stat-card:hover {
    color: #fff;
    border-color: rgba(126, 157, 215, .2);
    background: linear-gradient(180deg, rgba(104, 75, 235, .12), rgba(26, 66, 117, .08));
    box-shadow: inset 0 1px 0 rgba(157, 132, 255, .22);
    transform: none;
}

.f2h-stat-icon {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(77, 142, 247, .24);
    border-radius: 9px;
    color: #7facff;
    background: rgba(34, 87, 165, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 18px rgba(52, 115, 224, .08);
}

.f2h-stat-domains .f2h-stat-icon {
    border-color: rgba(59, 220, 195, .22);
    color: #5be0c8;
    background: rgba(20, 119, 115, .18);
}

.f2h-stat-support .f2h-stat-icon {
    border-color: rgba(166, 103, 255, .25);
    color: #b486ff;
    background: rgba(103, 58, 179, .19);
}

.f2h-stat-invoices .f2h-stat-icon {
    border-color: rgba(241, 173, 64, .24);
    color: #efbb61;
    background: rgba(147, 91, 25, .18);
}

.f2h-stat-invoices.has-attention .f2h-stat-icon {
    border-color: rgba(255, 105, 133, .29);
    color: #ff879e;
    background: rgba(155, 43, 70, .18);
}

.f2h-stat-copy small {
    color: #7588a7;
    font-size: 8px;
    letter-spacing: .085em;
}

.f2h-stat-copy strong {
    color: #f5f8ff;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.f2h-stat-copy > span {
    color: #8495af;
    font-size: 9px;
}

.f2h-stat-arrow {
    color: #60728f;
}

.f2h-quick-actions {
    gap: 0;
    margin-bottom: 27px;
    padding: 0;
    border-color: rgba(119, 151, 207, .17);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
}

.f2h-quick-actions > span {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    padding: 0 17px 0 0;
    color: #7f92b2;
    letter-spacing: .1em;
}

.f2h-quick-actions a {
    min-height: 47px;
    padding: 0 17px;
    border-left: 1px solid rgba(119, 151, 207, .14);
    border-radius: 0;
    color: #98a9c4;
    font-size: 10px;
}

.f2h-quick-actions a i {
    color: #9177ff;
}

.f2h-quick-actions a:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(102, 68, 221, .1), rgba(19, 50, 91, .08));
}

.f2h-account-workspace {
    margin-top: 6px;
}

.f2h-workspace-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 15px;
}

.f2h-workspace-kicker {
    display: block;
    margin-bottom: 3px;
    color: #9d79ff;
    font-size: 8px;
    font-weight: 840;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.f2h-workspace-heading h2 {
    margin: 0;
    color: #f3f6ff;
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -.03em;
}

.f2h-workspace-sync {
    color: #7285a4;
}

.f2h-workspace-sync i {
    background: #6e7eff;
    box-shadow: 0 0 0 4px rgba(110, 126, 255, .08), 0 0 12px rgba(110, 126, 255, .34);
}

.f2h-home-panels {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    gap: 15px;
}

body.f2h-authenticated #main-body .f2h-home-panel {
    position: relative;
    border-color: rgba(119, 151, 207, .2);
    border-radius: 15px;
    background:
        radial-gradient(circle at 15% -30%, rgba(105, 67, 228, .13), transparent 18rem),
        linear-gradient(145deg, rgba(11, 25, 48, .88), rgba(5, 14, 29, .84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 50px rgba(0, 2, 12, .22);
}

body.f2h-authenticated #main-body .f2h-home-panel::before {
    position: absolute;
    z-index: 2;
    top: -1px;
    left: 18px;
    width: 74px;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, #a46cff, rgba(53, 210, 255, 0));
    box-shadow: 0 0 12px rgba(151, 97, 255, .45);
}

body.f2h-authenticated #main-body .f2h-home-panel .card-header {
    min-height: 71px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 17px;
    border-bottom-color: rgba(119, 151, 207, .18);
    border-radius: 15px 15px 0 0;
    background:
        linear-gradient(90deg, rgba(112, 66, 225, .15), transparent 46%),
        rgba(7, 17, 34, .7);
}

.f2h-panel-title {
    gap: 11px;
}

.f2h-panel-heading-copy {
    min-width: 0;
    display: block;
}

.f2h-panel-kicker {
    display: block;
    margin-bottom: 2px;
    color: #8e73e8;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-panel-title .card-title {
    color: #edf2ff;
    font-size: 13px;
    font-weight: 720;
}

.f2h-panel-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    border: 1px solid rgba(148, 105, 255, .24);
    border-radius: 9px;
    color: #ad8aff;
    background: linear-gradient(145deg, rgba(101, 56, 188, .25), rgba(29, 48, 95, .2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 20px rgba(115, 75, 224, .09);
}

body.f2h-authenticated #main-body .f2h-panel-action {
    border-color: rgba(126, 157, 215, .23);
    color: #aebdda;
    background: rgba(10, 23, 46, .62);
}

body.f2h-authenticated #main-body .f2h-panel-action:hover {
    border-color: rgba(151, 113, 255, .48);
    color: #fff;
    background: rgba(91, 55, 184, .18);
}

.f2h-home-panel > .list-group {
    max-height: none;
    overflow: visible;
}

body.f2h-authenticated #main-body .f2h-home-panel .list-group-item {
    min-height: 54px;
    padding: 12px 17px;
    border-color: rgba(119, 151, 207, .12);
    color: #acbad0;
    background: rgba(4, 12, 25, .25);
    font-size: 12px;
}

body.f2h-authenticated #main-body .f2h-home-panel :where(a.list-group-item:hover, .list-group-item-action:hover) {
    color: #fff;
    background: linear-gradient(90deg, rgba(107, 67, 222, .11), rgba(25, 73, 117, .08));
}

.f2h-panel-item-label {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 9px;
}

.f2h-panel-item-label > .div-service-item {
    width: 100%;
}

.f2h-panel-item-label > i:first-child {
    width: 19px;
    color: #7387a8;
    text-align: center;
}

body.f2h-authenticated #main-body .f2h-home-panel .badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid rgba(115, 149, 204, .18);
    color: #9eb0cb;
    background: rgba(17, 34, 62, .54);
    font-size: 8px;
    letter-spacing: .035em;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-home-panel .badge::before {
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

body.f2h-authenticated #main-body .f2h-home-panel :where(.badge-success, .status-active) {
    border-color: rgba(63, 215, 162, .21);
    color: #5cdfb1;
    background: rgba(20, 112, 85, .14);
}

body.f2h-authenticated #main-body .f2h-home-panel :where(.badge-warning, .status-pending) {
    border-color: rgba(240, 177, 76, .22);
    color: #efbd68;
    background: rgba(137, 86, 20, .14);
}

body.f2h-authenticated #main-body .f2h-home-panel :where(.badge-danger, .status-suspended, .status-cancelled, .status-terminated) {
    border-color: rgba(255, 102, 132, .22);
    color: #ff879e;
    background: rgba(140, 38, 61, .15);
}

/* Secure access gateway */

.f2h-auth-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .72fr);
    gap: clamp(42px, 7vw, 94px);
    align-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.f2h-auth-story {
    min-width: 0;
    padding: 32px 12px 32px 4px;
    border: 0;
}

.f2h-auth-story::before {
    position: absolute;
    width: 560px;
    height: 320px;
    right: -80px;
    bottom: -70px;
    content: "";
    pointer-events: none;
    opacity: .33;
    background:
        linear-gradient(135deg, transparent 49.6%, rgba(108, 124, 255, .28) 50%, transparent 50.4%) 0 0 / 82px 82px,
        linear-gradient(45deg, transparent 49.6%, rgba(44, 210, 224, .13) 50%, transparent 50.4%) 0 0 / 82px 82px;
    mask-image: radial-gradient(circle, #000, transparent 72%);
}

.f2h-auth-display {
    max-width: 720px;
    font-size: clamp(43px, 5.1vw, 70px);
}

.f2h-auth-capabilities {
    max-width: 670px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid rgba(105, 148, 222, .18);
    border-bottom: 1px solid rgba(105, 148, 222, .18);
}

.f2h-auth-capabilities > div {
    min-width: 0;
    padding: 17px 17px;
    border-left: 1px solid rgba(105, 148, 222, .16);
}

.f2h-auth-capabilities > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.f2h-auth-capability-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 8px;
}

.f2h-auth-capabilities small {
    line-height: 1.45;
    white-space: normal;
}

.f2h-auth-panel {
    position: relative;
    overflow: hidden;
    padding: 30px 32px 32px;
    border: 1px solid rgba(129, 154, 217, .27);
    border-radius: 20px;
    color: #dce6f7;
    background:
        radial-gradient(circle at 90% -10%, rgba(124, 69, 245, .19), transparent 18rem),
        linear-gradient(145deg, rgba(11, 25, 49, .9), rgba(4, 13, 29, .84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 38px 100px rgba(0, 1, 13, .44);
}

.f2h-auth-panel::before {
    position: absolute;
    top: -1px;
    left: 30px;
    width: 96px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, #aa69ff, rgba(73, 205, 255, 0));
    box-shadow: 0 0 15px rgba(162, 95, 255, .56);
}

.f2h-auth-security-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: -2px 0 25px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(119, 151, 207, .17);
    color: #7f92b2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-auth-security-line > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #69dbb2;
}

.f2h-auth-security-line i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8a9bb5;
    box-shadow: none;
}

.f2h-auth-panel-heading {
    margin-bottom: 27px;
}

.f2h-auth-mark {
    border: 1px solid rgba(125, 104, 255, .28);
    background: linear-gradient(145deg, rgba(72, 44, 157, .45), rgba(8, 39, 79, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 28px rgba(100, 65, 224, .14);
}

.f2h-auth-panel .f2h-eyebrow {
    color: #9a7ef6;
}

.f2h-auth-panel-heading h1 {
    color: #f5f7ff;
}

.f2h-auth-panel-heading p {
    color: #8293af;
}

body.f2h-shell .f2h-login-form label {
    color: #bdc9dc;
}

.f2h-label-row a,
.f2h-auth-register a {
    color: #9f8bff;
}

.f2h-input-wrap > i {
    color: #7488a8;
}

body.f2h-shell .f2h-input-wrap .form-control {
    border-color: rgba(125, 156, 211, .25);
    color: #eef3ff;
    background: rgba(3, 11, 25, .6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}

body.f2h-shell .f2h-input-wrap .form-control:focus {
    border-color: #8070ff;
    background: rgba(6, 16, 34, .86);
    box-shadow: 0 0 0 4px rgba(119, 93, 243, .13), inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.f2h-shell .f2h-input-wrap .form-control::placeholder {
    color: #8297b9;
}

.f2h-reveal-password {
    color: #7c90af;
}

.f2h-reveal-password:hover {
    color: #c2b7ff;
    background: rgba(108, 72, 217, .16);
}

body.f2h-shell .f2h-checkbox-row {
    color: #aab8cd;
}

.f2h-checkbox-row > span[aria-hidden="true"] {
    border-color: rgba(125, 156, 211, .35);
    background: rgba(4, 13, 28, .7);
}

.f2h-auth-register {
    color: #7c8da7;
}

.f2h-auth-assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 15px;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid rgba(119, 151, 207, .15);
    color: #8297b9;
    font-size: 8px;
    font-weight: 740;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.f2h-auth-assurance > :first-child {
    color: #62d7ae;
}

.f2h-auth-assurance a:hover {
    color: #fff;
}

.f2h-auth-assurance i {
    margin-right: 5px;
    font-size: 5px;
    vertical-align: 1px;
}

/* Footer */

.f2h-site-footer {
    position: relative;
    overflow: hidden;
    padding: 60px 0 24px;
    border-top: 1px solid rgba(87, 143, 235, .16);
    color: #8398b8;
    background:
        radial-gradient(circle at 12% 0%, rgba(35, 104, 226, .11), transparent 26rem),
        #02061d;
}

.f2h-site-footer::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .14;
    background-image:
        linear-gradient(rgba(76, 129, 213, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 129, 213, .1) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000, transparent 65%);
}

.f2h-site-footer > .container {
    position: relative;
}

.f2h-footer-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(4, 1fr);
    gap: 36px;
}

.f2h-footer-brand img {
    width: 157px;
    height: auto;
}

.f2h-footer-brand p {
    max-width: 320px;
    margin: 18px 0;
    color: #7890b4;
    font-size: 14px;
    line-height: 1.7;
}

.f2h-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9eb1cd;
    font-size: 13px;
    font-weight: 680;
}

.f2h-footer-status:hover {
    color: #fff;
}

.f2h-footer-grid .f2h-footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.f2h-footer-social .list-inline-item {
    margin: 0;
}

body.f2h-shell .f2h-footer-social .btn {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(92, 145, 232, .2);
    border-radius: 9px;
    color: #8ca5ca;
    background: rgba(12, 34, 85, .45);
}

body.f2h-shell .f2h-footer-social .btn:hover {
    color: #fff;
    border-color: rgba(80, 190, 255, .42);
    background: rgba(22, 67, 143, .52);
}

.f2h-footer-grid h2 {
    margin: 6px 0 15px;
    color: #8eadd8;
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-footer-grid ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.f2h-footer-grid li {
    margin: 0;
}

.f2h-footer-grid a {
    color: #7890b4;
    font-size: 13px;
}

.f2h-footer-grid a:hover {
    color: #fff;
}

.f2h-footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    margin-top: 45px;
    padding-top: 21px;
    border-top: 1px solid rgba(92, 145, 232, .18);
    color: #6f86a9;
    font-size: 12px;
}

.f2h-payment-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.f2h-payment-row img {
    width: 43px;
    height: 27px;
    object-fit: contain;
    opacity: .78;
    filter: drop-shadow(0 7px 12px rgba(0, 3, 18, .3));
}

.f2h-payment-row img:hover {
    opacity: 1;
}

.f2h-footer-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
}

body.f2h-shell .f2h-localisation-trigger {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(92, 145, 232, .22);
    border-radius: 9px;
    color: #8ca5ca;
    background: rgba(12, 34, 85, .45);
    font-size: 10px;
    font-weight: 700;
}

body.f2h-shell .f2h-localisation-trigger:hover {
    color: #fff;
    border-color: rgba(80, 190, 255, .42);
    background: rgba(22, 67, 143, .52);
}

/* Modals and overlays */

body.f2h-shell .modal-content {
    overflow: visible;
    border: 1px solid var(--f2h-line);
    border-radius: 18px;
    box-shadow: var(--f2h-shadow-lg);
}

body.f2h-shell .modal-header,
body.f2h-shell .modal-footer {
    border-color: var(--f2h-line);
}

body.f2h-shell .modal-localisation .item {
    display: block;
    margin: 4px 0;
    padding: 10px 12px;
    border: 1px solid var(--f2h-line);
    border-radius: 10px;
    color: var(--f2h-ink-soft);
}

body.f2h-shell .modal-localisation .item.active,
body.f2h-shell .modal-localisation .item:hover {
    border-color: #9abff2;
    color: #174db6;
    background: #edf5ff;
}

#fullpage-overlay {
    z-index: 1090;
    background: rgba(2, 6, 29, .76);
    backdrop-filter: blur(8px);
}

/* Stock page refinements */

body.f2h-shell .tiles {
    overflow: hidden;
    border: 1px solid var(--f2h-line);
    border-radius: var(--f2h-radius-md);
    background: #fff;
    box-shadow: var(--f2h-shadow-sm);
}

body.f2h-shell .tile {
    border-color: var(--f2h-line);
    color: var(--f2h-ink-soft);
}

body.f2h-shell .tile:hover {
    color: #164db9;
    background: #f8fbff;
}

body.f2h-shell .tile .stat {
    color: var(--f2h-ink);
    font-weight: 760;
}

body.f2h-shell .domain-checker-container {
    border-radius: 0;
    background: linear-gradient(118deg, #092057, #0c4590);
}

body.f2h-shell .client-home-cards .card,
body.f2h-shell .product-details,
body.f2h-shell .invoice-container,
body.f2h-shell .ticket-reply,
body.f2h-shell .ticket-reply.staff {
    border-radius: var(--f2h-radius-md);
}

body.f2h-shell .invoice-container {
    border: 1px solid var(--f2h-line);
    box-shadow: var(--f2h-shadow-md);
}

body.f2h-shell .ticket-reply {
    border: 1px solid var(--f2h-line);
    background: #fff;
}

body.f2h-shell .ticket-reply.staff {
    border-color: #cfe0f8;
    background: #f5f9ff;
}

/* Documents and ticket messages are deliberate light reading surfaces. */
body.f2h-authenticated :where(.invoice-container, .ticket-reply, .ticket-reply.staff) {
    --f2h-ink: #101a34;
    --f2h-ink-soft: #3d4c6d;
    --f2h-muted: #5f6f8a;
    --f2h-line: #dce4f1;
    --f2h-line-strong: #c9d5e7;
    --text: #101a34;
    --text-muted: #5f6f8a;
    --text-lifted: #52617d;
    --text-accented: #3d4c6d;
    --border-muted: #e4eaf3;
    --border: #d2dce9;
    --bg: #fff;
    --bg-muted: #f8faff;
    --bg-lifted: #f3f6fb;
    color: #3d4c6d;
    background-color: #fff;
    color-scheme: light;
}

body.f2h-authenticated :where(.invoice-container, .ticket-reply, .ticket-reply.staff) :where(h1, h2, h3, h4, h5, h6, .text-dark, .text-body) {
    color: #101a34 !important;
}

body.f2h-authenticated :where(.invoice-container, .ticket-reply, .ticket-reply.staff) :where(.text-muted) {
    color: #5f6f8a !important;
}

body.f2h-authenticated :where(.invoice-container) :where(.table) {
    color: #3d4c6d;
    background: #fff;
}

body.f2h-authenticated :where(.invoice-container) :where(.table thead th) {
    border-color: #c9d5e7;
    color: #5f6f8a;
    background: #f6f9fd;
}

body.f2h-authenticated :where(.invoice-container) :where(.table td) {
    border-color: #dce4f1;
}

body.f2h-shell .using-password-strength {
    margin-top: 8px;
}

/* Portal home */

body.f2h-template-homepage {
    --f2h-canvas: #030711;
    --f2h-surface: #091426;
    --f2h-surface-muted: #0c1930;
    --f2h-ink: #f2f6ff;
    --f2h-ink-soft: #c0cce0;
    --f2h-muted: #8696b1;
    --f2h-line: rgba(119, 151, 207, .18);
    --f2h-line-strong: rgba(130, 164, 224, .28);
    color: var(--f2h-ink-soft);
    background: #02050d;
    color-scheme: dark;
}

body.f2h-template-homepage .f2h-page-banner {
    border-bottom: 1px solid rgba(105, 155, 245, .16);
    background:
        radial-gradient(circle at 8% 0%, rgba(39, 135, 255, .28), transparent 29rem),
        radial-gradient(circle at 92% 140%, rgba(62, 223, 255, .13), transparent 28rem),
        linear-gradient(118deg, #061039 0%, #09215c 58%, #0a3378 100%);
}

body.f2h-template-homepage .home-domain-search {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(115, 158, 226, .16);
    color: #fff;
    background:
        radial-gradient(circle at 14% -90%, rgba(103, 78, 255, .24), transparent 30rem),
        radial-gradient(circle at 88% 180%, rgba(0, 207, 220, .15), transparent 28rem),
        linear-gradient(112deg, #050a20 0%, #07142f 56%, #082044 100%) !important;
}

body.f2h-template-homepage .home-domain-search::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(112, 153, 220, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 153, 220, .11) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
}

body.f2h-template-homepage .home-domain-search .container {
    position: relative;
    z-index: 1;
}

body.f2h-template-homepage .home-domain-search .p-5 {
    padding-block: clamp(40px, 5vw, 62px) !important;
}

body.f2h-template-homepage .home-domain-search h2 {
    margin-bottom: 18px;
    color: #f7faff;
    font-size: clamp(25px, 2.7vw, 36px);
    font-weight: 740;
    letter-spacing: -.035em;
}

body.f2h-template-homepage .home-domain-search .input-group-wrapper {
    max-width: 1060px;
    margin-inline: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.f2h-template-homepage .home-domain-search .input-group {
    min-height: 66px;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(134, 171, 231, .27);
    border-radius: 17px;
    background: rgba(5, 13, 31, .67);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 20px 50px rgba(0, 2, 12, .28);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

body.f2h-template-homepage .home-domain-search .form-control {
    min-width: 0;
    min-height: 52px;
    padding-inline: 18px;
    border: 0;
    color: #edf5ff;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
}

body.f2h-template-homepage .home-domain-search .form-control::placeholder {
    color: #7f91ae;
    opacity: 1;
}

body.f2h-template-homepage .home-domain-search .input-group-append {
    align-self: stretch;
    gap: 7px;
    margin: 0;
}

body.f2h-template-homepage .home-domain-search .input-group-append .btn {
    min-width: 106px;
    height: 100%;
    border-radius: 12px;
}

body.f2h-template-homepage .home-domain-search .btn-link {
    margin-top: 9px;
    color: #a9c9f8;
}

body.f2h-template-homepage .home-domain-search .btn-link:hover,
body.f2h-template-homepage .home-domain-search .btn-link:focus-visible {
    color: #fff;
}

body.f2h-template-homepage .f2h-main {
    position: relative;
    color: var(--f2h-ink-soft);
    background:
        radial-gradient(circle at 10% 4%, rgba(120, 56, 255, .13), transparent 34rem),
        radial-gradient(circle at 90% 18%, rgba(46, 134, 255, .09), transparent 31rem),
        linear-gradient(rgba(101, 131, 188, .034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 131, 188, .034) 1px, transparent 1px),
        linear-gradient(180deg, #050917 0%, #02060f 100%);
    background-size: auto, auto, 48px 48px, 48px 48px, auto;
}

body.f2h-template-homepage #main-body {
    padding-block: 34px 78px;
}

body.f2h-template-homepage .primary-content > [style*="background-color:#ffffd2"] {
    margin-bottom: 24px !important;
    padding: 11px 18px !important;
    border: 1px solid rgba(245, 190, 79, .25);
    border-radius: 12px;
    color: #d9caa7 !important;
    background: rgba(122, 82, 16, .2) !important;
    font-size: 12px !important;
}

.f2h-portal-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
    padding: clamp(30px, 5vw, 62px);
    border: 1px solid rgba(121, 153, 213, .23);
    border-radius: var(--f2h-radius-xl);
    background:
        radial-gradient(circle at 91% -12%, rgba(55, 210, 225, .18), transparent 24rem),
        radial-gradient(circle at 8% 108%, rgba(109, 70, 255, .19), transparent 30rem),
        linear-gradient(133deg, rgba(14, 31, 61, .94), rgba(5, 14, 30, .91));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 34px 90px rgba(0, 2, 12, .34);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}

.f2h-portal-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(130, 167, 228, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 167, 228, .1) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, #000, transparent 66%);
}

.f2h-portal-hero::after {
    position: absolute;
    width: 330px;
    height: 330px;
    right: -166px;
    bottom: -225px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(105, 207, 255, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 50px rgba(66, 145, 255, .04), 0 0 0 100px rgba(66, 145, 255, .022);
}

.f2h-portal-hero-copy,
.f2h-portal-console {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.f2h-portal-hero-copy h1 {
    max-width: 760px;
    margin: 15px 0 14px;
    color: #fff;
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 720;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.f2h-portal-hero-copy > p {
    max-width: 690px;
    margin: 0;
    color: #afbdd3;
    font-size: 15px;
    line-height: 1.75;
}

.f2h-portal-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

body.f2h-shell .f2h-portal-secondary-button {
    border: 1px solid rgba(130, 168, 230, .31);
    color: #edf4ff;
    background: rgba(255, 255, 255, .055);
}

body.f2h-shell .f2h-portal-secondary-button:hover,
body.f2h-shell .f2h-portal-secondary-button:focus-visible {
    border-color: rgba(130, 200, 255, .6);
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.f2h-portal-assurances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 34px 0 0;
}

.f2h-portal-assurances > div {
    min-width: 0;
    padding: 0 18px;
    border-left: 1px solid rgba(126, 157, 215, .2);
}

.f2h-portal-assurances > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.f2h-portal-assurances dt,
.f2h-portal-assurances dd {
    margin: 0;
}

.f2h-portal-assurances dt {
    color: #e6edfa;
    font-size: 11px;
    font-weight: 760;
}

.f2h-portal-assurances dt i {
    width: 16px;
    color: #72dbed;
}

.f2h-portal-assurances dd {
    margin-top: 4px;
    color: #7f90aa;
    font-size: 9px;
    line-height: 1.4;
}

.f2h-portal-console {
    overflow: hidden;
    border: 1px solid rgba(134, 170, 229, .24);
    border-radius: 21px;
    background: linear-gradient(150deg, rgba(13, 31, 59, .82), rgba(4, 13, 27, .8));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 24px 56px rgba(0, 3, 17, .3);
}

.f2h-portal-console-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 20px;
    border-bottom: 1px solid rgba(124, 158, 214, .17);
    background: linear-gradient(90deg, rgba(86, 62, 208, .14), transparent 65%);
}

.f2h-portal-console-heading span,
.f2h-portal-console-heading strong {
    display: block;
}

.f2h-portal-console-heading > div > span {
    color: #899bb6;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.f2h-portal-console-heading > div > strong {
    margin-top: 2px;
    color: #eef4ff;
    font-size: 14px;
}

.f2h-portal-console-heading .f2h-portal-console-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: #83e8cc;
    font-size: 9px;
    font-weight: 790;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.f2h-portal-console-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ae5bd;
    box-shadow: 0 0 0 5px rgba(90, 229, 189, .09), 0 0 16px rgba(90, 229, 189, .65);
}

.f2h-portal-console-list {
    padding: 8px;
}

.f2h-portal-console-list > a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 13px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #d5deed;
}

.f2h-portal-console-list > a:hover,
.f2h-portal-console-list > a:focus-visible {
    border-color: rgba(121, 164, 229, .2);
    color: #fff;
    background: rgba(255, 255, 255, .045);
    transform: translateX(2px);
}

.f2h-portal-console-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(106, 164, 248, .18);
    border-radius: 11px;
    color: #72b7ff;
    background: rgba(40, 101, 200, .13);
}

.f2h-portal-console-list a:nth-child(2) .f2h-portal-console-icon {
    color: #9c87ff;
    background: rgba(112, 74, 224, .13);
}

.f2h-portal-console-list a:nth-child(3) .f2h-portal-console-icon {
    color: #5de0c0;
    background: rgba(34, 171, 136, .12);
}

.f2h-portal-console-list a span:nth-child(2) {
    min-width: 0;
}

.f2h-portal-console-list small,
.f2h-portal-console-list strong {
    display: block;
}

.f2h-portal-console-list small {
    color: #778aa6;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.f2h-portal-console-list strong {
    overflow-wrap: anywhere;
    color: inherit;
    font-size: 12px;
}

.f2h-portal-console-list > a > i {
    color: #65758e;
    font-size: 10px;
}

.f2h-portal-console footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 20px;
    border-top: 1px solid rgba(124, 158, 214, .17);
    color: #7486a1;
    font-size: 9px;
}

.f2h-portal-console footer a {
    color: #9fc5ff;
    font-weight: 720;
}

.f2h-portal-section {
    margin-top: clamp(54px, 7vw, 84px);
}

.f2h-portal-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(121, 153, 213, .18);
}

.f2h-portal-section-heading > div > span {
    display: block;
    margin-bottom: 5px;
    color: #70d5ee;
    font-size: 9px;
    font-weight: 820;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-portal-section-heading h2 {
    margin: 0;
    color: #f2f6ff;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 720;
    letter-spacing: -.04em;
}

.f2h-portal-section-heading > p {
    max-width: 480px;
    margin: 0;
    color: #7f90aa;
    font-size: 12px;
    line-height: 1.6;
    text-align: right;
}

.f2h-portal-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 17px;
}

.f2h-portal-product-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 284px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border: 1px solid rgba(121, 153, 213, .2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 102% -8%, rgba(45, 126, 255, .15), transparent 14rem),
        linear-gradient(145deg, rgba(12, 26, 50, .86), rgba(5, 14, 29, .8));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 20px 54px rgba(0, 2, 12, .24);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
}

.f2h-portal-product-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    background: linear-gradient(180deg, #3edfff, #3158ff 70%, transparent);
}

.f2h-portal-product-card::after {
    position: absolute;
    width: 150px;
    height: 150px;
    right: -78px;
    top: -87px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(111, 181, 255, .17);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(57, 130, 255, .025);
}

.f2h-portal-product-card:nth-child(3n + 2) {
    background:
        radial-gradient(circle at 102% -8%, rgba(112, 76, 241, .15), transparent 14rem),
        linear-gradient(145deg, rgba(14, 25, 49, .86), rgba(6, 14, 29, .8));
}

.f2h-portal-product-card:nth-child(3n + 2)::before {
    background: linear-gradient(180deg, #a58aff, #734de8 70%, transparent);
}

.f2h-portal-product-card:nth-child(3n)::before,
.f2h-portal-product-card-domain::before {
    background: linear-gradient(180deg, #68f0c5, #159f74 70%, transparent);
}

.f2h-portal-product-card:hover {
    border-color: rgba(130, 178, 244, .38);
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 28px 66px rgba(0, 2, 15, .34);
}

.f2h-portal-product-card-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #778ba9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-portal-product-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid rgba(102, 164, 249, .2);
    border-radius: 12px;
    color: #71b9ff;
    background: rgba(44, 108, 215, .13);
    font-size: 14px;
}

.f2h-portal-product-card:nth-child(3n + 2) .f2h-portal-product-icon {
    color: #ae9aff;
    background: rgba(111, 74, 220, .13);
}

.f2h-portal-product-card:nth-child(3n) .f2h-portal-product-icon,
.f2h-portal-product-card-domain .f2h-portal-product-icon {
    color: #68e0bc;
    background: rgba(34, 171, 136, .12);
}

.f2h-portal-product-card h3 {
    position: relative;
    z-index: 1;
    overflow-wrap: anywhere;
    margin: 25px 0 9px;
    color: #f3f7ff;
    font-size: 21px;
    font-weight: 690;
    letter-spacing: -.025em;
}

.f2h-portal-product-description {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    color: #8596b0;
    font-size: 12px;
    line-height: 1.65;
}

.f2h-portal-product-description > :last-child {
    margin-bottom: 0;
}

.f2h-portal-product-card > a {
    position: relative;
    z-index: 1;
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding: 0 13px;
    border: 1px solid rgba(126, 163, 222, .2);
    border-radius: 10px;
    color: #c8d9f3;
    background: rgba(255, 255, 255, .035);
    font-size: 11px;
    font-weight: 720;
}

.f2h-portal-product-card > a:hover,
.f2h-portal-product-card > a:focus-visible {
    border-color: rgba(119, 190, 255, .48);
    color: #fff;
    background: rgba(64, 128, 237, .13);
}

.f2h-portal-help-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 15px;
}

.f2h-portal-help-card {
    min-width: 0;
    min-height: 146px;
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(121, 153, 213, .18);
    border-radius: 18px;
    color: #dbe5f4;
    background: linear-gradient(145deg, rgba(12, 26, 50, .8), rgba(5, 14, 29, .75));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 44px rgba(0, 2, 12, .2);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}

.f2h-portal-help-card-featured {
    min-height: 174px;
    grid-column: span 3;
    padding: 25px;
    background:
        radial-gradient(circle at 100% 0%, rgba(48, 127, 255, .13), transparent 17rem),
        linear-gradient(145deg, rgba(13, 29, 56, .86), rgba(5, 14, 29, .78));
}

.f2h-portal-help-card:hover,
.f2h-portal-help-card:focus-visible {
    border-color: rgba(126, 181, 251, .4);
    color: #fff;
    background-color: rgba(17, 38, 72, .88);
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 25px 58px rgba(0, 2, 15, .3);
}

.f2h-portal-help-icon {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(105, 169, 255, .18);
    border-radius: 14px;
    color: #70b7ff;
    background: rgba(39, 101, 205, .13);
    font-size: 18px;
}

.f2h-portal-help-card:nth-child(2) .f2h-portal-help-icon {
    color: #68e1c0;
    background: rgba(34, 171, 136, .12);
}

.f2h-portal-help-card:nth-child(3) .f2h-portal-help-icon {
    color: #b098ff;
    background: rgba(107, 74, 220, .13);
}

.f2h-portal-help-card:nth-child(5) .f2h-portal-help-icon {
    color: #e5b560;
    background: rgba(193, 125, 24, .12);
}

.f2h-portal-help-copy {
    min-width: 0;
}

.f2h-portal-help-copy small,
.f2h-portal-help-copy strong,
.f2h-portal-help-copy > span {
    display: block;
}

.f2h-portal-help-copy small {
    color: #788aa6;
    font-size: 9px;
    font-weight: 790;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.f2h-portal-help-copy strong {
    overflow-wrap: anywhere;
    margin-top: 3px;
    color: inherit;
    font-size: 14px;
}

.f2h-portal-help-card-featured .f2h-portal-help-copy strong {
    font-size: 17px;
}

.f2h-portal-help-copy > span {
    margin-top: 7px;
    color: #8595ad;
    font-size: 11px;
    line-height: 1.55;
}

.f2h-portal-help-card > i {
    color: #65758e;
    font-size: 10px;
}

.f2h-portal-account {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 54px);
    align-items: center;
    margin-top: clamp(54px, 7vw, 84px);
    padding: clamp(27px, 4vw, 45px);
    border: 1px solid rgba(121, 153, 213, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at -4% 50%, rgba(106, 66, 238, .18), transparent 22rem),
        radial-gradient(circle at 102% 0%, rgba(37, 190, 210, .13), transparent 22rem),
        linear-gradient(135deg, rgba(12, 28, 55, .91), rgba(4, 12, 26, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 28px 72px rgba(0, 2, 13, .28);
}

.f2h-portal-account::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(90deg, transparent 49.8%, rgba(120, 154, 213, .13) 50%, transparent 50.2%);
    background-size: 72px 100%;
}

.f2h-portal-account-heading,
.f2h-portal-account-links {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.f2h-portal-account-heading h2 {
    margin: 13px 0 8px;
    color: #f2f6ff;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 720;
    letter-spacing: -.04em;
}

.f2h-portal-account-heading p {
    margin: 0;
    color: #8495af;
    font-size: 12px;
    line-height: 1.65;
}

.f2h-portal-account-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr));
    gap: 9px;
}

.f2h-portal-account-links > a {
    min-width: 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 17px;
    border: 1px solid rgba(124, 158, 214, .18);
    border-radius: 15px;
    color: #d7e1f1;
    background: rgba(255, 255, 255, .035);
}

.f2h-portal-account-links > a:hover,
.f2h-portal-account-links > a:focus-visible {
    border-color: rgba(122, 190, 255, .42);
    color: #fff;
    background: rgba(60, 121, 220, .11);
    transform: translateY(-3px);
}

.f2h-portal-account-links > a > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: auto;
    border-radius: 11px;
    color: #75baff;
    background: rgba(46, 120, 231, .13);
    font-size: 14px;
}

.f2h-portal-account-links > a:nth-child(2n) > span {
    color: #9f8aff;
    background: rgba(111, 75, 218, .13);
}

.f2h-portal-account-links > a:nth-child(3n) > span {
    color: #65dfbd;
    background: rgba(34, 171, 136, .12);
}

.f2h-portal-account-links strong,
.f2h-portal-account-links small {
    display: block;
    overflow-wrap: anywhere;
}

.f2h-portal-account-links strong {
    margin-top: 17px;
    color: inherit;
    font-size: 11px;
}

.f2h-portal-account-links small {
    margin-top: 3px;
    color: #7789a5;
    font-size: 9px;
}

.f2h-portal-addon-output {
    margin-top: 24px;
}

@media (max-width: 1199.98px) {
    .f2h-portal-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr);
        gap: 32px;
    }

    .f2h-portal-assurances > div {
        padding-inline: 12px;
    }

    .f2h-portal-account {
        grid-template-columns: 1fr;
    }

    .f2h-portal-account-heading {
        max-width: 620px;
    }
}

@media (max-width: 991.98px) {
    .f2h-portal-hero {
        grid-template-columns: 1fr;
    }

    .f2h-portal-console {
        max-width: 680px;
    }

    .f2h-portal-help-card-featured {
        grid-column: span 6;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-homepage .home-domain-search .p-5 {
        padding-inline: 15px !important;
    }

    .f2h-portal-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .f2h-portal-section-heading > p {
        max-width: 620px;
        text-align: left;
    }

    .f2h-portal-help-card {
        grid-column: span 3;
    }

    .f2h-portal-help-card-featured {
        grid-column: span 6;
    }
}

@media (max-width: 575.98px) {
    body.f2h-template-homepage .home-domain-search .p-5 {
        padding-block: 34px !important;
    }

    body.f2h-template-homepage .home-domain-search h2 {
        font-size: 24px;
    }

    body.f2h-template-homepage .home-domain-search .input-group {
        min-height: 58px;
    }

    body.f2h-template-homepage .home-domain-search .form-control {
        min-height: 44px;
    }

    body.f2h-template-homepage .home-domain-search .row.d-sm-none {
        margin-top: 9px;
    }

    body.f2h-template-homepage .home-domain-search .row.d-sm-none .btn {
        width: 100%;
        padding-inline: 8px;
    }

    .f2h-portal-hero {
        gap: 25px;
        padding: 25px 20px;
        border-radius: 20px;
    }

    .f2h-portal-hero-copy h1 {
        font-size: 33px;
    }

    .f2h-portal-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .f2h-portal-hero-actions .btn {
        width: 100%;
    }

    .f2h-portal-assurances {
        grid-template-columns: 1fr;
        gap: 13px;
        margin-top: 28px;
    }

    .f2h-portal-assurances > div,
    .f2h-portal-assurances > div:first-child {
        padding: 0;
        border-left: 0;
    }

    .f2h-portal-console-heading,
    .f2h-portal-console footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .f2h-portal-section {
        margin-top: 50px;
    }

    .f2h-portal-product-card {
        min-height: 260px;
        padding: 21px;
    }

    .f2h-portal-help-card,
    .f2h-portal-help-card-featured {
        min-height: 136px;
        grid-column: span 6;
        padding: 18px;
    }

    .f2h-portal-help-copy > span {
        display: none;
    }

    .f2h-portal-account {
        margin-top: 50px;
        padding: 25px 20px;
        border-radius: 20px;
    }

    .f2h-portal-account-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-portal-account-links > a {
        min-height: 138px;
        padding: 14px;
    }
}

@media (max-width: 399.98px) {
    .f2h-portal-console-list > a {
        grid-template-columns: auto 1fr;
    }

    .f2h-portal-console-list > a > i {
        display: none;
    }

    .f2h-portal-help-card {
        grid-template-columns: auto 1fr;
    }

    .f2h-portal-help-card > i {
        display: none;
    }

    .f2h-portal-account-links {
        grid-template-columns: 1fr;
    }
}

[dir="rtl"] .f2h-portal-section-heading > p {
    text-align: left;
}

[dir="rtl"] .f2h-portal-console-list > a:hover,
[dir="rtl"] .f2h-portal-console-list > a:focus-visible {
    transform: translateX(-2px);
}

.f2h-main-body-wrap:not(.container) > .row {
    margin-right: 0;
    margin-left: 0;
}

.f2h-main-body-wrap:not(.container) > .row > .primary-content {
    padding-right: 0;
    padding-left: 0;
}

body.f2h-template-error\/page-not-found .f2h-main,
body.f2h-template-error\/page-not-found #main-body {
    color: #c4cfe2;
    background:
        radial-gradient(circle at 18% 8%, rgba(86, 72, 242, .17), transparent 28rem),
        radial-gradient(circle at 85% 72%, rgba(0, 203, 221, .1), transparent 26rem),
        #050b1b;
}

body.f2h-template-error\/page-not-found .primary-content > .container {
    padding-top: clamp(42px, 6vw, 72px);
    padding-bottom: clamp(42px, 6vw, 72px);
}

body.f2h-template-error\/page-not-found .primary-content > .container > .text-center {
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid rgba(122, 154, 211, .2);
    border-radius: 25px;
    color: #c4cfe2;
    background: linear-gradient(145deg, rgba(18, 36, 69, .8), rgba(6, 17, 36, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 30px 78px rgba(0, 3, 15, .34);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
}

body.f2h-template-error\/page-not-found .primary-content > .container .text-primary {
    color: #61d7f2 !important;
}

body.f2h-template-error\/page-not-found .primary-content > .container h3 {
    color: #f4f7ff;
}

body.f2h-template-error\/page-not-found .primary-content > .container p,
body.f2h-template-error\/page-not-found .primary-content > p {
    color: #9aabc4;
}

@media (prefers-reduced-transparency: reduce) {
    .f2h-portal-hero,
    .f2h-portal-console,
    .f2h-portal-product-card,
    .f2h-portal-help-card,
    .f2h-portal-account,
    body.f2h-template-homepage .home-domain-search .input-group {
        background-color: #091426;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Responsive */

@media (max-width: 1320px) {
    .f2h-market-nav a {
        padding-inline: 8px;
        font-size: 12px;
    }

    .f2h-status-link span:last-child {
        display: none;
    }

    .f2h-kb-search {
        width: 138px;
    }
}

@media (max-width: 1199.98px) {
    .f2h-market-nav {
        display: none;
    }

    .f2h-brand-bar-inner {
        justify-content: space-between;
    }

    .f2h-client-bar-inner {
        min-height: 54px;
        flex-wrap: wrap;
    }

    .f2h-portal-label {
        min-height: 54px;
        border-right: 0;
    }

    .f2h-client-bar .navbar-collapse {
        flex-basis: 100%;
        padding-bottom: 15px;
    }

    .f2h-primary-nav,
    .f2h-secondary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding-top: 10px;
    }

    .f2h-secondary-nav.f2h-account-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .f2h-primary-nav > li,
    .f2h-secondary-nav > li {
        display: block !important;
    }

    .f2h-primary-nav > li > a,
    .f2h-secondary-nav > li > a {
        min-height: 41px;
        width: 100%;
        padding: 0 11px;
        border: 0;
        border-radius: 9px;
        background: rgba(255, 255, 255, .03);
    }

    .f2h-client-tools {
        display: block;
        margin-left: 0;
    }

    .f2h-kb-search {
        width: 100%;
        margin-top: 10px;
    }

    .f2h-notification-button {
        position: absolute;
        top: 8px;
        right: 65px;
    }

    .f2h-active-account {
        width: 100%;
        max-width: none;
        margin-top: 8px;
    }

    .f2h-active-account-name {
        flex: 1 1 auto;
    }

    .f2h-primary-nav .dropdown-menu,
    .f2h-secondary-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        transform: none !important;
    }

    .f2h-account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-footer-grid {
        grid-template-columns: 1.4fr repeat(2, 1fr);
    }

    .f2h-footer-grid > div:nth-child(n+4) {
        margin-top: 8px;
    }
}

@media (max-width: 991.98px) {
    .f2h-page-banner-inner {
        min-height: 100px;
    }

    .f2h-page-banner .master-breadcrumb {
        display: none;
    }

    body.f2h-shell #main-body {
        padding-top: 32px;
    }

    .f2h-auth-layout {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
    }

    .f2h-auth-story {
        padding: 38px 42px;
        border-right: 0;
        border-bottom: 1px solid rgba(111, 163, 242, .17);
    }

    .f2h-auth-display {
        max-width: 520px;
        font-size: 40px;
    }

    .f2h-auth-capabilities {
        display: none;
    }

    .f2h-auth-trust {
        margin-top: 22px;
    }

    .f2h-auth-panel {
        padding: 42px;
    }

    .f2h-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .f2h-dashboard-noc {
        max-width: 520px;
    }

    .f2h-quick-actions {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .f2h-quick-actions > span,
    .f2h-quick-actions a {
        flex: 0 0 auto;
    }

    .f2h-home-panels {
        grid-template-columns: 1fr;
    }

    .f2h-panel-wide {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    body.f2h-shell :where(
        .f2h-brand-bar-inner,
        .f2h-client-bar-inner,
        .f2h-admin-session > .container,
        .f2h-page-banner-inner,
        #main-body > .container,
        .f2h-site-footer > .container
    ) {
        width: min(calc(100% - 30px), var(--f2h-wrap));
    }

    .f2h-brand img {
        width: 145px;
    }

    .f2h-brand-bar,
    .f2h-brand-bar-inner {
        min-height: 68px;
    }

    .f2h-page-banner-inner {
        min-height: 88px;
    }

    .f2h-page-title {
        font-size: 27px;
    }

    .f2h-auth-story {
        display: none;
    }

    .f2h-auth-layout {
        display: block;
        border-radius: 22px;
    }

    .f2h-auth-panel {
        min-height: 560px;
        padding: 34px 28px;
    }

    .f2h-account-stats {
        grid-template-columns: 1fr;
    }

    .f2h-stat-card {
        padding: 15px 16px;
    }

    .f2h-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .f2h-footer-brand {
        grid-column: 1 / -1;
    }

    .f2h-footer-grid > div:nth-child(n+4) {
        margin-top: 0;
    }

    .f2h-footer-bottom {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .f2h-footer-meta {
        justify-content: flex-start;
        text-align: left;
    }

    .f2h-payment-row {
        justify-content: flex-start;
    }

    body.f2h-shell .table-responsive {
        border: 1px solid var(--f2h-line);
        border-radius: 13px;
    }
}

@media (max-width: 575.98px) {
    .f2h-brand-actions {
        gap: 6px;
    }

    .f2h-status-link,
    .f2h-noc-link {
        display: none !important;
    }

    .f2h-cart-link {
        width: 42px;
        padding: 0;
    }

    .f2h-cart-count {
        position: absolute;
        top: 9px;
        margin-left: 20px;
    }

    .f2h-primary-nav,
    .f2h-secondary-nav,
    .f2h-mobile-product-nav {
        grid-template-columns: 1fr;
    }

    .f2h-page-banner-inner {
        min-height: 72px;
    }

    .f2h-page-kicker,
    .f2h-page-banner .master-breadcrumb {
        display: none;
    }

    .f2h-page-title {
        font-size: 22px;
    }

    body.f2h-shell #main-body {
        padding: 24px 0 42px;
    }

    body.f2h-template-login #main-body,
    body.f2h-template-password-reset-container #main-body,
    body.f2h-template-clientregister #main-body {
        min-height: 620px;
        padding: 34px 0 42px;
    }

    .f2h-auth-panel {
        min-height: 0;
        padding: 29px 21px;
    }

    .f2h-auth-panel-heading {
        gap: 11px;
        margin-bottom: 24px;
    }

    .f2h-auth-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .f2h-auth-panel-heading h1 {
        font-size: 24px;
    }

    .f2h-dashboard-hero {
        gap: 23px;
        padding: 24px 21px;
        border-radius: 18px;
    }

    .f2h-dashboard-copy h2 {
        font-size: 29px;
    }

    .f2h-dashboard-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .f2h-dashboard-actions .btn {
        width: 100%;
    }

    .f2h-dashboard-noc {
        grid-template-columns: auto 1fr;
    }

    .f2h-dashboard-noc > a {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .f2h-dashboard-noc > a span {
        display: inline;
    }

    .f2h-quick-actions > span {
        display: none;
    }

    .f2h-home-panel .card-header {
        align-items: flex-start;
        gap: 10px;
    }

    .f2h-panel-title .card-title {
        overflow: visible;
        line-height: 1.25;
        text-overflow: clip;
        white-space: normal;
    }

    .f2h-panel-action {
        flex: 0 0 auto;
    }

    .f2h-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .f2h-footer-brand {
        grid-column: auto;
    }
}

/* Right-to-left locales */

[dir="rtl"] .f2h-auth-story {
    border-right: 0;
    border-left: 1px solid rgba(111, 163, 242, .17);
}

[dir="rtl"] .f2h-input-wrap > i {
    right: 16px;
    left: auto;
}

[dir="rtl"] body.f2h-shell .f2h-input-wrap .form-control {
    padding-right: 46px;
    padding-left: 48px;
}

[dir="rtl"] .f2h-reveal-password {
    right: auto;
    left: 8px;
}

[dir="rtl"] .f2h-footer-meta {
    justify-content: flex-start;
    text-align: left;
}

@media (max-width: 991.98px) {
    [dir="rtl"] .f2h-auth-story {
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Responsive refinements for the glass operations layer. */

@media (max-width: 991.98px) {
    .f2h-auth-layout {
        max-width: 760px;
        gap: 28px;
    }

    .f2h-dashboard-hero {
        padding: 27px 26px 0;
    }

    .f2h-dashboard-copy {
        padding: 0 0 26px;
    }

    .f2h-dashboard-briefing {
        padding: 25px 0 26px;
        border-top: 1px solid rgba(126, 157, 215, .2);
        border-left: 0;
    }

    .f2h-account-stats {
        margin-inline: -26px;
    }

    .f2h-stat-card:nth-child(2) {
        border-right: 0;
    }

    .f2h-stat-card:nth-child(-n+2) {
        border-bottom: 1px solid rgba(126, 157, 215, .16);
    }
}

@media (max-width: 767.98px) {
    .f2h-account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: -21px;
    }

    .f2h-command-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 15px;
    }

    .f2h-command-details > div {
        min-width: 0;
    }

    .f2h-command-details > div:nth-child(3) {
        grid-column: 1 / -1;
        padding-left: 0;
        border-left: 0;
    }

    .f2h-auth-panel {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .f2h-dashboard-copy :where(h1, h2) {
        font-size: 29px;
    }

    .f2h-dashboard-overline {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .f2h-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-dashboard-actions .btn {
        min-width: 0;
        padding-inline: 10px;
        font-size: 11px;
    }

    .f2h-command-details > div {
        padding-inline: 12px;
    }

    .f2h-stat-card {
        grid-template-columns: auto 1fr;
        min-height: 74px;
        padding: 13px 12px;
    }

    .f2h-stat-arrow {
        display: none;
    }

    .f2h-stat-copy small {
        white-space: normal;
    }

    .f2h-briefing-heading {
        align-items: flex-start;
    }

    .f2h-quick-actions {
        margin-inline: -15px;
        padding-inline: 15px;
        scroll-snap-type: x proximity;
    }

    .f2h-quick-actions a {
        padding-inline: 14px;
        scroll-snap-align: start;
    }

    .f2h-workspace-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body.f2h-authenticated #main-body .f2h-home-panel .card-header {
        min-height: 68px;
        padding: 12px 13px;
    }

    body.f2h-authenticated #main-body .f2h-home-panel .list-group-item {
        padding-inline: 13px;
    }

    .f2h-auth-security-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .f2h-auth-assurance {
        justify-content: flex-start;
    }
}

/* Guest recovery and registration */

.f2h-reset-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .72fr);
}

.f2h-reset-story .f2h-auth-display {
    font-size: clamp(42px, 4.6vw, 66px);
}

.f2h-reset-panel {
    min-height: 565px;
}

.f2h-reset-content {
    color: #aebdd2;
}

.f2h-reset-instruction,
.f2h-reset-message {
    margin: 0 0 22px;
    color: #9bacc5;
    font-size: 13px;
    line-height: 1.7;
}

.f2h-reset-form .form-group {
    margin-bottom: 19px;
}

body.f2h-shell .f2h-reset-form label {
    margin-bottom: 7px;
    color: #bdc9dc;
    font-size: 12px;
    font-weight: 740;
}

.f2h-reset-form .f2h-input-wrap {
    width: 100%;
}

.f2h-reset-strength {
    padding: 14px;
    border: 1px solid rgba(125, 156, 211, .18);
    border-radius: 12px;
    background: rgba(3, 11, 25, .38);
}

.f2h-reset-strength .progress {
    margin-bottom: 7px;
    background: rgba(111, 139, 190, .14);
}

.f2h-reset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.f2h-reset-actions .btn {
    flex: 1 1 150px;
}

body.f2h-template-clientregister #main-body {
    align-items: flex-start;
}

body.f2h-template-clientregister .f2h-sidebar-column {
    display: none !important;
}

body.f2h-template-clientregister .primary-content {
    max-width: 100%;
    flex: 0 0 100%;
}

.f2h-registration {
    width: min(100%, 1180px);
    margin-inline: auto;
    color: #b7c5da;
}

.f2h-register-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 42px;
    align-items: center;
    margin-bottom: 22px;
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(121, 153, 213, .24);
    border-radius: var(--f2h-radius-xl);
    background:
        radial-gradient(circle at 91% -20%, rgba(57, 210, 226, .16), transparent 22rem),
        radial-gradient(circle at 4% 130%, rgba(112, 70, 255, .2), transparent 28rem),
        linear-gradient(133deg, rgba(14, 31, 61, .95), rgba(5, 14, 30, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 34px 90px rgba(0, 2, 12, .34);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}

.f2h-register-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(130, 167, 228, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 167, 228, .1) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.f2h-register-hero-copy,
.f2h-register-hero-actions,
.f2h-register-assurances {
    position: relative;
    z-index: 1;
}

.f2h-register-hero h1 {
    margin: 13px 0 10px;
    color: #fff;
    font-size: clamp(31px, 4vw, 50px);
    font-weight: 730;
    letter-spacing: -.05em;
}

.f2h-register-hero-copy > p {
    max-width: 720px;
    margin: 0;
    color: #9fb0ca;
    font-size: 14px;
}

.f2h-register-hero-actions {
    min-width: 270px;
    display: grid;
    gap: 11px;
    justify-items: end;
}

.f2h-register-hero-actions > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #69dbb2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-register-hero-actions > span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38dba1;
    box-shadow: 0 0 10px rgba(56, 219, 161, .5);
}

.f2h-register-hero-actions > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border: 1px solid rgba(130, 168, 230, .28);
    border-radius: 11px;
    color: #aabbd3;
    background: rgba(255, 255, 255, .05);
    font-size: 11px;
}

.f2h-register-hero-actions > a strong {
    color: #fff;
}

.f2h-register-hero-actions > a:hover,
.f2h-register-hero-actions > a:focus-visible {
    border-color: rgba(130, 200, 255, .56);
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

.f2h-register-assurances {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(126, 157, 215, .18);
}

.f2h-register-assurances span {
    min-width: 0;
    padding-inline: 18px;
    border-left: 1px solid rgba(126, 157, 215, .18);
    color: #8799b5;
    font-size: 10px;
    font-weight: 690;
}

.f2h-register-assurances span:first-child {
    padding-left: 0;
    border-left: 0;
}

.f2h-register-assurances i {
    width: 18px;
    color: #72dbea;
}

.f2h-register-alerts {
    margin-bottom: 18px;
}

#registration .f2h-register-form {
    display: grid;
    gap: 18px;
}

.f2h-register-linked-accounts {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(121, 153, 213, .2);
    border-radius: 16px;
    background: rgba(8, 20, 40, .72);
}

.f2h-register-card {
    position: relative;
    overflow: visible;
    margin-bottom: 18px;
    padding: clamp(22px, 3.2vw, 34px);
    border: 1px solid rgba(121, 153, 213, .22);
    border-radius: var(--f2h-radius-lg);
    background:
        radial-gradient(circle at 96% -30%, rgba(101, 75, 225, .12), transparent 22rem),
        linear-gradient(145deg, rgba(11, 25, 49, .9), rgba(4, 13, 29, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 22px 60px rgba(0, 2, 12, .26);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}

.f2h-register-card::before {
    position: absolute;
    top: -1px;
    left: 28px;
    width: 94px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, #8f75ff, rgba(73, 205, 255, 0));
    box-shadow: 0 0 15px rgba(124, 95, 255, .42);
}

.f2h-register-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(119, 151, 207, .16);
}

.f2h-register-card-heading > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid rgba(125, 104, 255, .27);
    border-radius: 12px;
    color: #7cdcf1;
    background: linear-gradient(145deg, rgba(72, 44, 157, .42), rgba(8, 39, 79, .68));
}

.f2h-register-card-heading small {
    display: block;
    margin-bottom: 3px;
    color: #8f78ef;
    font-size: 8px;
    font-weight: 820;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.f2h-register-card-heading h2 {
    margin: 0;
    color: #f1f5ff;
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 720;
    letter-spacing: -.025em;
}

.f2h-register-card-heading p {
    margin: 5px 0 0;
    color: #7f91ad;
    font-size: 11px;
}

.f2h-field-grid {
    display: grid;
    gap: 17px;
}

.f2h-field-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.f2h-field-grid--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.f2h-field--span-2 {
    grid-column: span 2;
}

.f2h-field--full {
    grid-column: 1 / -1;
}

#registration .f2h-register-form .form-group {
    min-width: 0;
    margin: 0;
}

body.f2h-shell #registration .f2h-register-form label:not(.f2h-register-terms):not(.f2h-register-switch) {
    display: block;
    margin: 0 0 7px;
    color: #bac7da;
    font-size: 11px;
    font-weight: 720;
}

#registration .f2h-register-form label > i {
    width: 17px;
    color: #7287a8;
}

#registration .f2h-register-form label:not(.f2h-register-terms):not(.f2h-register-switch) > span {
    color: #71839f;
    font-size: 9px;
    font-weight: 620;
}

body.f2h-shell #registration .f2h-register-form :where(.form-control, .field, .custom-select) {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(125, 156, 211, .25);
    border-radius: 11px;
    color: #eef3ff;
    background-color: rgba(3, 11, 25, .62);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}

body.f2h-shell #registration .f2h-register-form :where(.form-control, .field, .custom-select):focus {
    border-color: #8070ff;
    color: #fff;
    background-color: rgba(6, 16, 34, .9);
    box-shadow: 0 0 0 4px rgba(119, 93, 243, .13), inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.f2h-shell #registration .f2h-register-form :where(.form-control, .field)::placeholder {
    color: #7286a7;
    opacity: 1;
}

#registration .f2h-register-form select option {
    color: #101a34;
    background: #fff;
}

#registration .f2h-register-form :where(.iti, .intl-tel-input, .control) {
    width: 100%;
    max-width: 100%;
}

#registration .f2h-register-form .field-help-text {
    display: block;
    margin-top: 7px;
    color: #788ba8;
    font-size: 10px;
}

#registration .f2h-register-form .password-strength-meter .progress {
    margin: 8px 0 7px;
    background: rgba(111, 139, 190, .14);
}

#registration .f2h-register-form .password-strength-meter p {
    margin: 0;
    color: #8293af !important;
    text-align: left !important;
}

.f2h-password-generator {
    display: flex;
    align-items: flex-end;
}

.f2h-security-question-grid {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(119, 151, 207, .14);
}

.f2h-register-card--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.f2h-register-card--compact .f2h-register-card-heading {
    margin: 0;
    padding: 0;
    border: 0;
}

.f2h-register-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #b8c5d8;
    cursor: pointer;
}

.f2h-register-confirmation {
    display: grid;
    justify-items: center;
    gap: 17px;
    padding: 26px;
    border: 1px solid rgba(121, 153, 213, .2);
    border-radius: var(--f2h-radius-lg);
    background: rgba(6, 16, 34, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.f2h-register-terms {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: #aebbd0;
    font-size: 11px;
    cursor: pointer;
}

.f2h-register-terms .form-check-input {
    position: static;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 1px 0 0;
}

.f2h-register-terms a {
    color: #a491ff;
    font-weight: 720;
}

body.f2h-shell .f2h-register-submit {
    min-width: min(100%, 320px);
    justify-content: space-between;
}

.f2h-register-confirmation > p {
    margin: 0;
    color: #70829e;
    font-size: 9px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .f2h-reset-layout {
        grid-template-columns: 1fr;
    }

    .f2h-register-hero {
        grid-template-columns: 1fr;
    }

    .f2h-register-hero-actions {
        min-width: 0;
        justify-items: start;
    }

    .f2h-field-grid--six {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .f2h-register-hero {
        padding: 27px 23px;
        border-radius: 20px;
    }

    .f2h-register-assurances {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .f2h-register-assurances span,
    .f2h-register-assurances span:first-child {
        padding: 0;
        border: 0;
    }

    .f2h-register-card {
        padding: 23px 20px;
        border-radius: 18px;
    }

    .f2h-register-card--compact {
        grid-template-columns: 1fr;
    }

    .f2h-field-grid--two,
    .f2h-field-grid--six {
        grid-template-columns: 1fr;
    }

    .f2h-field--span-2,
    .f2h-field--full {
        grid-column: 1;
    }
}

@media (max-width: 575.98px) {
    .f2h-register-hero h1 {
        font-size: 29px;
    }

    .f2h-register-hero-actions > a {
        width: 100%;
        justify-content: center;
    }

    .f2h-register-card-heading {
        gap: 11px;
    }

    .f2h-register-card-heading > span {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .f2h-register-confirmation {
        padding: 22px 17px;
    }
}

/* Services inventory ----------------------------------------------------- */

body.f2h-authenticated #main-body .f2h-service-inventory {
    --f2h-service-violet: #9b77ff;
    --f2h-service-blue: #5ca0ff;
    --f2h-service-cyan: #55dded;
    --f2h-service-mint: #63e1b5;
    --f2h-service-border: rgba(129, 161, 219, .2);
    --f2h-service-border-strong: rgba(143, 178, 238, .31);
    --f2h-service-panel: rgba(7, 17, 34, .78);
    min-width: 0;
    display: grid;
    gap: 22px;
    color: #c0cce0;
}

body.f2h-authenticated #main-body .f2h-service-inventory :where(h1, h2, p, dl, dd) {
    margin-top: 0;
}

body.f2h-authenticated #main-body .f2h-service-inventory-hero {
    position: relative;
    isolation: isolate;
    min-height: 342px;
    display: grid;
    grid-template-columns: minmax(0, 1.17fr) minmax(380px, .83fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
    overflow: hidden;
    padding: clamp(32px, 4vw, 56px);
    border-color: rgba(132, 166, 228, .25);
    border-radius: 25px;
    background:
        radial-gradient(circle at 9% 4%, rgba(116, 72, 244, .25), transparent 25rem),
        radial-gradient(circle at 90% 95%, rgba(26, 181, 213, .15), transparent 24rem),
        linear-gradient(123deg, rgba(13, 28, 55, .96), rgba(5, 14, 29, .91) 58%, rgba(7, 22, 42, .92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(79, 206, 231, .04),
        0 30px 80px rgba(0, 2, 12, .34);
}

body.f2h-authenticated #main-body .f2h-service-inventory-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(rgba(128, 167, 226, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 167, 226, .06) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, .66), transparent 69%);
    mask-image: linear-gradient(105deg, rgba(0, 0, 0, .66), transparent 69%);
}

body.f2h-authenticated #main-body .f2h-service-inventory-hero::after {
    position: absolute;
    z-index: -1;
    width: 410px;
    height: 410px;
    inset-inline-end: -218px;
    bottom: -242px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(91, 218, 237, .17);
    border-radius: 50%;
    box-shadow:
        0 0 0 58px rgba(94, 109, 249, .025),
        0 0 0 118px rgba(54, 198, 222, .018),
        0 0 100px rgba(48, 199, 221, .11);
}

body.f2h-authenticated #main-body .f2h-service-inventory-copy,
body.f2h-authenticated #main-body .f2h-service-inventory-summary {
    position: relative;
    z-index: 1;
}

body.f2h-authenticated #main-body .f2h-service-inventory-copy {
    max-width: 690px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-kicker,
body.f2h-authenticated #main-body .f2h-service-inventory-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #77dcec;
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .15em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-service-inventory-kicker {
    padding: 8px 11px;
    border: 1px solid rgba(96, 207, 232, .19);
    border-radius: 999px;
    background: rgba(31, 125, 157, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.f2h-authenticated #main-body .f2h-service-inventory-kicker i {
    color: #a38bff;
    font-size: 11px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-copy h1 {
    max-width: 660px;
    margin-bottom: 17px;
    color: #f5f8ff;
    font-size: clamp(34px, 3.6vw, 51px);
    font-weight: 760;
    letter-spacing: -.045em;
    line-height: 1.04;
    text-wrap: balance;
}

body.f2h-authenticated #main-body .f2h-service-inventory-kicker + h1 {
    margin-top: 22px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-copy > p {
    max-width: 640px;
    margin-bottom: 0;
    color: #a9b8cf;
    font-size: 14px;
    line-height: 1.78;
}

body.f2h-authenticated #main-body .f2h-service-inventory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 27px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 17px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 740;
    letter-spacing: .025em;
    text-decoration: none;
    box-shadow: none;
}

body.f2h-authenticated #main-body .f2h-service-inventory-actions .btn-primary {
    border-color: rgba(128, 146, 255, .64);
    color: #fff;
    background: linear-gradient(135deg, #7556e9, #3d73dd 58%, #268dbd);
    box-shadow: 0 12px 29px rgba(55, 74, 204, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

body.f2h-authenticated #main-body .f2h-service-inventory-actions .f2h-btn-secondary {
    border-color: rgba(133, 167, 226, .25);
    color: #d6e1f2;
    background: rgba(10, 24, 47, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

@media (hover: hover) {
    body.f2h-authenticated #main-body .f2h-service-inventory-actions .btn-primary:hover {
        border-color: rgba(153, 179, 255, .8);
        color: #fff;
        background: linear-gradient(135deg, #8265ef, #4781e8 58%, #2f9acb);
        box-shadow: 0 15px 34px rgba(55, 74, 204, .33), inset 0 1px 0 rgba(255, 255, 255, .2);
        transform: translateY(-1px);
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-actions .f2h-btn-secondary:hover {
        border-color: rgba(123, 208, 233, .42);
        color: #fff;
        background: rgba(18, 39, 72, .78);
        transform: translateY(-1px);
    }
}

body.f2h-authenticated #main-body .f2h-service-inventory-actions .btn:focus-visible,
body.f2h-authenticated #main-body .f2h-service-inventory-manage:focus-visible {
    outline-color: #72d8ef;
    box-shadow: 0 0 0 4px rgba(84, 200, 229, .14);
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-self: stretch;
    margin-bottom: 0;
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
    position: relative;
    min-width: 0;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 20px 20px 18px;
    border: 1px solid rgba(128, 161, 218, .19);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 8%, rgba(116, 80, 233, .12), transparent 5rem),
        linear-gradient(145deg, rgba(18, 37, 68, .65), rgba(6, 16, 33, .7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 31px rgba(0, 2, 12, .15);
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item::before {
    position: absolute;
    top: 17px;
    bottom: 17px;
    inset-inline-start: 0;
    width: 2px;
    content: "";
    border-radius: 0 3px 3px 0;
    background: linear-gradient(#8f72f1, rgba(84, 211, 231, .28));
    box-shadow: 0 0 15px rgba(143, 114, 241, .4);
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item::after {
    position: absolute;
    width: 72px;
    height: 72px;
    inset-inline-end: -36px;
    top: -36px;
    content: "";
    border: 1px solid rgba(156, 121, 246, .13);
    border-radius: 50%;
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item dt {
    color: #8295b3;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item dd {
    margin-bottom: 2px;
    color: #f5f8ff;
    font-size: clamp(29px, 3vw, 38px);
    font-weight: 740;
    letter-spacing: -.045em;
    line-height: 1.05;
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item > span {
    overflow: hidden;
    color: #91a3bf;
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-active {
    border-color: rgba(75, 208, 166, .22);
    background:
        radial-gradient(circle at 92% 8%, rgba(34, 186, 142, .12), transparent 5rem),
        linear-gradient(145deg, rgba(14, 45, 55, .69), rgba(6, 18, 34, .72));
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-active::before {
    background: linear-gradient(#63e1b5, rgba(69, 201, 226, .25));
    box-shadow: 0 0 15px rgba(65, 212, 164, .35);
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-active dd {
    color: #a1f4d7;
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item.has-attention {
    border-color: rgba(235, 173, 73, .29);
    background:
        radial-gradient(circle at 92% 8%, rgba(214, 135, 26, .15), transparent 5rem),
        linear-gradient(145deg, rgba(47, 37, 27, .69), rgba(8, 18, 34, .72));
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item.has-attention::before {
    background: linear-gradient(#efbd68, rgba(218, 114, 42, .23));
    box-shadow: 0 0 15px rgba(235, 173, 73, .35);
}

body.f2h-authenticated #main-body .f2h-service-inventory-summary-item.has-attention dd {
    color: #ffd694;
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
    border-color: rgba(126, 158, 214, .22);
    border-radius: 23px;
    background:
        radial-gradient(circle at 0 0, rgba(108, 70, 223, .1), transparent 24rem),
        linear-gradient(145deg, rgba(10, 24, 47, .91), rgba(5, 14, 29, .88));
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel::before {
    position: absolute;
    top: 0;
    right: 10%;
    left: 10%;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(132, 108, 241, .67), rgba(71, 204, 227, .5), transparent);
    box-shadow: 0 0 20px rgba(124, 92, 232, .22);
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
    padding-bottom: 23px;
    border-bottom: 1px solid rgba(126, 158, 214, .14);
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel-head > div {
    min-width: 0;
    max-width: 780px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel-kicker {
    color: #9182e7;
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel-head h2 {
    margin: 7px 0 5px;
    color: #f0f4fd;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.15;
}

body.f2h-authenticated #main-body .f2h-service-inventory-panel-head p {
    margin-bottom: 0;
    color: #8f9fba;
    font-size: 11px;
    line-height: 1.65;
}

body.f2h-authenticated #main-body .f2h-service-inventory-sync {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    padding: 7px 10px;
    border: 1px solid rgba(88, 206, 170, .16);
    border-radius: 999px;
    color: #83b9aa;
    background: rgba(24, 103, 82, .09);
    font-size: 9px;
    font-weight: 670;
    letter-spacing: .055em;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-sync > i {
    position: relative;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #59d8aa;
    box-shadow: 0 0 0 4px rgba(72, 207, 163, .08), 0 0 11px rgba(72, 207, 163, .58);
}

body.f2h-authenticated #main-body .f2h-service-inventory-sync > i::after {
    position: absolute;
    inset: -4px;
    content: "";
    border: 1px solid rgba(89, 216, 170, .32);
    border-radius: 50%;
    animation: f2h-service-sync 2.8s ease-out infinite;
}

@keyframes f2h-service-sync {
    0%, 45% {
        opacity: .75;
        transform: scale(.55);
    }

    82%, 100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap,
body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_wrapper {
    min-width: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_wrapper::before {
    z-index: 0;
    min-height: 1px;
    align-self: start;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
    content: "";
    border-top: 1px solid rgba(126, 158, 214, .12);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
    grid-column: 1 / -1;
    gap: 12px 18px;
    align-items: center;
    padding: 11px 12px 0;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable::before {
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 58px;
    content: "";
    border: 1px solid rgba(126, 158, 214, .14);
    border-radius: 13px;
    background: rgba(5, 14, 29, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > :where(.dataTables_info, .dataTables_filter) {
    position: relative;
    z-index: 1;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > .dataTables_info {
    grid-column: 1;
    grid-row: 1;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > .dataTables_filter {
    grid-column: 2;
    grid-row: 1;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > .f2h-service-inventory-table {
    grid-column: 1 / -1;
    grid-row: 2;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_length, .dataTables_filter) label {
    margin: 0;
    color: #8293ae;
    font-size: 10px;
    font-weight: 640;
    letter-spacing: .025em;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter {
    float: none;
    text-align: end;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter::after {
    right: auto;
    left: auto;
    inset-inline-start: 13px;
    top: 50%;
    color: #687c9d;
    transform: translateY(-50%);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_filter input, .dataTables_length select) {
    min-height: 36px;
    margin-inline-start: 8px;
    border: 1px solid rgba(133, 166, 223, .24);
    border-radius: 9px;
    color: #e9f0fb;
    background-color: rgba(9, 22, 43, .86);
    font-size: 11px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter input {
    width: min(260px, 25vw);
    margin: 0;
    padding: 7px 12px 7px 37px !important;
    background-image: none;
}

[dir="rtl"] body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter input {
    padding-right: 37px !important;
    padding-left: 12px !important;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_length select {
    min-width: 66px;
    padding: 6px 24px 6px 9px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_filter input, .dataTables_length select):focus {
    border-color: rgba(103, 145, 245, .74);
    background-color: rgba(12, 29, 55, .95);
    box-shadow: 0 0 0 4px rgba(96, 103, 239, .11), inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table {
    width: 100% !important;
    margin: 0 !important;
    border: 0;
    border-collapse: separate !important;
    border-spacing: 0 8px;
    color: #c0cce0;
    background: transparent;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th,
body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th.sorting,
body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th.sorting_asc,
body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th.sorting_desc {
    padding: 2px 15px 7px;
    border: 0;
    color: #7588a7;
    background: transparent;
    font-size: 8px;
    font-weight: 760;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:first-child {
    width: 60px !important;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:nth-child(2) {
    text-align: start;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:nth-child(3),
body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:nth-child(4) {
    width: 148px !important;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:last-child {
    width: 204px !important;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td {
    height: 77px;
    padding: 15px;
    vertical-align: middle;
    border-top: 1px solid rgba(126, 158, 214, .15);
    border-bottom: 1px solid rgba(126, 158, 214, .15);
    color: #bdc9dc;
    background-color: rgba(7, 18, 36, .77);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .017);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:first-child {
    border-inline-start: 1px solid rgba(126, 158, 214, .15);
    border-radius: 13px 0 0 13px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:last-child {
    border-inline-end: 1px solid rgba(126, 158, 214, .15);
    border-radius: 0 13px 13px 0;
}

[dir="rtl"] body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:first-child {
    border-radius: 0 13px 13px 0;
}

[dir="rtl"] body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:last-child {
    border-radius: 13px 0 0 13px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row {
    cursor: pointer;
}

@media (hover: hover) {
    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row:hover > td {
        border-color: rgba(130, 169, 232, .28);
        color: #e4ecf8;
        background-color: rgba(14, 31, 57, .9);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 25px rgba(0, 2, 12, .12);
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-row:hover .f2h-service-inventory-manage {
        border-color: rgba(126, 199, 229, .34);
        color: #dffaff;
        background: rgba(33, 115, 151, .16);
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-row:hover .f2h-service-inventory-manage i {
        transform: translateX(2px);
    }
}

body.f2h-authenticated #main-body .f2h-service-inventory-health {
    position: relative;
    width: 60px;
    padding-right: 9px !important;
    padding-left: 13px !important;
}

body.f2h-authenticated #main-body .f2h-service-inventory-health::after {
    position: absolute;
    width: 1px;
    height: 34px;
    inset-inline-end: 0;
    top: 50%;
    content: "";
    background: linear-gradient(transparent, rgba(131, 165, 222, .16), transparent);
    transform: translateY(-50%);
}

body.f2h-authenticated #main-body .f2h-service-inventory-health-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(136, 167, 224, .22);
    border-radius: 11px;
    color: #91a8ed;
    background:
        radial-gradient(circle at 35% 20%, rgba(150, 112, 244, .2), transparent 2.8rem),
        rgba(15, 31, 57, .87);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 7px 17px rgba(0, 2, 12, .15);
}

body.f2h-authenticated #main-body .f2h-service-inventory-health-icon > i {
    font-size: 12px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-health-icon > img {
    width: 21px;
    height: auto;
    max-height: 24px;
    object-fit: contain;
}

body.f2h-authenticated #main-body .f2h-service-inventory-identity {
    min-width: 220px;
    padding-inline-start: 17px !important;
    text-align: start !important;
}

body.f2h-authenticated #main-body .f2h-service-inventory-name {
    max-width: min(420px, 30vw);
    display: block;
    overflow: hidden;
    color: #eef3fc;
    font-size: 12px;
    font-weight: 720;
    letter-spacing: -.005em;
    line-height: 1.4;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-name:hover,
body.f2h-authenticated #main-body .f2h-service-inventory-name:focus-visible {
    color: #8bdff1;
    text-decoration: none;
}

body.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
    max-width: min(440px, 32vw);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    margin-top: 5px;
    color: #7789a7;
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-endpoint i {
    flex: 0 0 auto;
    color: #5f7397;
    font-size: 8px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-endpoint.is-unassigned {
    color: #687994;
    font-family: inherit;
    font-style: italic;
}

body.f2h-authenticated #main-body .f2h-service-inventory-billing,
body.f2h-authenticated #main-body .f2h-service-inventory-renewal {
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-billing strong,
body.f2h-authenticated #main-body .f2h-service-inventory-renewal > span:not(.w-hidden) {
    display: block;
    color: #dce5f3;
    font-size: 11px;
    font-weight: 680;
    line-height: 1.35;
}

body.f2h-authenticated #main-body .f2h-service-inventory-billing small,
body.f2h-authenticated #main-body .f2h-service-inventory-renewal small {
    display: block;
    margin-top: 4px;
    color: #7183a0;
    font-size: 8px;
    font-weight: 570;
    line-height: 1.3;
}

body.f2h-authenticated #main-body .f2h-service-inventory-status {
    min-width: 196px;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-service-inventory-status .status {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid rgba(128, 159, 211, .21);
    border-radius: 999px;
    color: #a7b6cc;
    background: rgba(33, 51, 80, .36);
    font-size: 8px;
    font-weight: 780;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-service-inventory-status .status::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    content: "";
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

body.f2h-authenticated #main-body .f2h-service-inventory-status .status-active {
    border-color: rgba(70, 211, 165, .22);
    color: #62dfb4;
    background: rgba(20, 112, 85, .15);
}

body.f2h-authenticated #main-body .f2h-service-inventory-status :where(.status-pending, .status-inprogress) {
    border-color: rgba(240, 177, 76, .24);
    color: #efbd68;
    background: rgba(137, 86, 20, .15);
}

body.f2h-authenticated #main-body .f2h-service-inventory-status :where(.status-suspended, .status-cancelled, .status-terminated, .status-fraud, .status-expired) {
    border-color: rgba(255, 102, 132, .23);
    color: #ff879e;
    background: rgba(140, 38, 61, .16);
}

body.f2h-authenticated #main-body .f2h-service-inventory-status :where(.status-completed, .status-transferredaway) {
    border-color: rgba(128, 159, 211, .2);
    color: #a9b7cb;
    background: rgba(47, 65, 94, .25);
}

body.f2h-authenticated #main-body .f2h-service-inventory-manage {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-inline-start: 8px;
    padding: 5px 8px;
    border: 1px solid rgba(126, 157, 215, .18);
    border-radius: 8px;
    color: #95a9c8;
    background: rgba(10, 24, 47, .52);
    font-size: 8px;
    font-weight: 730;
    letter-spacing: .03em;
    line-height: 1;
    text-decoration: none;
}

body.f2h-authenticated #main-body .f2h-service-inventory-manage:hover,
body.f2h-authenticated #main-body .f2h-service-inventory-manage:focus-visible {
    text-decoration: none;
}

body.f2h-authenticated #main-body .f2h-service-inventory-manage i {
    color: #65cadf;
    font-size: 7px;
    transition: transform .18s ease;
}

[dir="rtl"] body.f2h-authenticated #main-body .f2h-service-inventory-manage i {
    transform: rotate(180deg);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_info {
    padding: 0;
    color: #71839f;
    font-size: 9px;
    letter-spacing: .02em;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_paginate {
    z-index: 1;
    float: none;
    grid-column: 2;
    grid-row: 2;
    padding-top: 25px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_length {
    z-index: 1;
    float: none;
    grid-column: 1;
    grid-row: 2;
    padding-top: 25px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination {
    gap: 5px;
    justify-content: flex-end;
    margin: 0;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination > li > :where(a, span) {
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid rgba(126, 158, 214, .17);
    border-radius: 8px;
    color: #91a3bf;
    background: rgba(9, 22, 43, .67);
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination > li.active > :where(a, span) {
    border-color: rgba(127, 133, 248, .56);
    color: #fff;
    background: linear-gradient(135deg, #6755d8, #386fc8);
    box-shadow: 0 7px 18px rgba(61, 61, 182, .21), inset 0 1px 0 rgba(255, 255, 255, .14);
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination > li:not(.disabled) > :where(a, span):hover,
body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination > li:not(.disabled) > :where(a, span):focus {
    border-color: rgba(121, 196, 225, .38);
    color: #fff;
    background: rgba(24, 62, 98, .65);
    text-decoration: none;
}

body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_empty {
    height: auto;
    padding: 38px 20px !important;
    border: 1px dashed rgba(126, 158, 214, .24) !important;
    border-radius: 13px !important;
    color: #8294b0 !important;
    background: rgba(7, 18, 36, .55) !important;
    text-align: center;
}

body.f2h-authenticated #main-body .f2h-service-inventory-loading {
    min-height: 138px;
    display: grid;
    place-items: center;
    margin-top: 8px;
    border: 1px dashed rgba(126, 158, 214, .19);
    border-radius: 13px;
    color: #8294b0;
    background: rgba(7, 18, 36, .5);
}

body.f2h-authenticated #main-body .f2h-service-inventory-loading p {
    margin: 0;
    color: inherit;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .045em;
}

body.f2h-authenticated #main-body .f2h-service-inventory-loading i {
    margin-inline-end: 7px;
    color: #8c76ed;
}

@media (max-width: 1199.98px) {
    body.f2h-authenticated #main-body .f2h-service-inventory-hero {
        grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
        gap: 30px;
        padding: 36px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-name {
        max-width: 27vw;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:nth-child(3),
    body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:nth-child(4) {
        width: 124px !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:last-child {
        width: 185px !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-status {
        min-width: 180px;
    }
}

@media (max-width: 991.98px) {
    body.f2h-authenticated #main-body .f2h-service-inventory-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 29px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-copy {
        max-width: 720px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary {
        width: 100%;
        max-width: none;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
        min-height: 108px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-panel-head {
        gap: 20px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th,
    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td {
        padding-right: 11px;
        padding-left: 11px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-name,
    body.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
        max-width: 25vw;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-manage {
        width: 27px;
        overflow: hidden;
        gap: 0;
        margin-inline-start: 5px;
        padding: 5px 9px;
        color: transparent;
        vertical-align: middle;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-manage i {
        color: #65cadf;
    }
}

@media (max-width: 767.98px) {
    body.f2h-authenticated #main-body .f2h-service-inventory {
        gap: 17px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-hero {
        gap: 25px;
        padding: 27px 23px 24px;
        border-radius: 20px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-copy h1 {
        font-size: clamp(30px, 9vw, 39px);
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-kicker + h1 {
        margin-top: 18px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-copy > p {
        font-size: 12px;
        line-height: 1.7;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-actions {
        margin-top: 22px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary {
        gap: 9px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
        min-height: 100px;
        padding: 16px 16px 15px;
        border-radius: 13px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-panel {
        padding: 21px 16px 18px;
        border-radius: 19px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        margin-bottom: 15px;
        padding-inline: 2px;
        padding-bottom: 18px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-sync {
        margin-top: 0;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        padding: 12px 12px 0;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable::before {
        height: 94px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > .dataTables_filter {
        grid-column: 1;
        grid-row: 1;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > .dataTables_info {
        grid-column: 1;
        grid-row: 2;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .listtable > .f2h-service-inventory-table {
        grid-column: 1;
        grid-row: 3;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_length, .dataTables_filter),
    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter label {
        width: 100%;
        margin-top: 0;
        text-align: start;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter input {
        width: 100%;
        max-width: none;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table {
        display: block;
        border-spacing: 0;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        clip-path: inset(50%) !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody {
        width: 100%;
        display: grid;
        gap: 11px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        padding: 16px;
        border: 1px solid rgba(126, 158, 214, .17);
        border-radius: 14px;
        background:
            radial-gradient(circle at 100% 0, rgba(119, 78, 230, .09), transparent 10rem),
            rgba(7, 18, 36, .78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .024), 0 10px 25px rgba(0, 2, 12, .13);
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td,
    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td.dtr-hidden {
        width: auto !important;
        height: auto;
        min-width: 0;
        border: 0 !important;
        border-radius: 0 !important;
        color: #bdc9dc;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-health {
        position: absolute;
        z-index: 2;
        width: 36px !important;
        display: block !important;
        inset-inline-start: 16px;
        top: 16px;
        padding: 0 !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-health::after,
    body.f2h-authenticated #main-body .f2h-service-inventory-health.dtr-control::before {
        display: none;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-identity {
        grid-column: 1 / -1;
        display: block !important;
        min-height: 49px;
        padding: 1px 0 13px 49px !important;
        text-align: start;
    }

    [dir="rtl"] body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-identity {
        padding-right: 49px !important;
        padding-left: 0 !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-name,
    body.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
        max-width: 100%;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-name {
        font-size: 12px;
        white-space: normal;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal) {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 2px 9px;
        align-content: center;
        padding: 13px 10px 12px !important;
        border-top: 1px solid rgba(126, 158, 214, .13) !important;
        text-align: start !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-billing {
        padding-inline-start: 0 !important;
        border-inline-end: 1px solid rgba(126, 158, 214, .13) !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-renewal {
        padding-inline-end: 0 !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal)::before {
        grid-row: 1 / 3;
        align-self: center;
        content: attr(data-label);
        color: #70829f;
        font-size: 8px;
        font-weight: 710;
        letter-spacing: .08em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal) > :where(strong, span:not(.w-hidden), small) {
        grid-column: 2;
        margin: 0;
        text-align: end;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-status {
        grid-column: 1 / -1;
        min-width: 0;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 0;
        padding: 13px 0 0 !important;
        border-top: 1px solid rgba(126, 158, 214, .13) !important;
        text-align: start !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-status::before {
        content: attr(data-label);
        color: #70829f;
        font-size: 8px;
        font-weight: 710;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-status .status {
        margin-inline-start: auto;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-manage {
        width: auto;
        min-height: 29px;
        flex: 0 0 auto;
        gap: 7px;
        margin-inline-start: 0;
        padding: 6px 9px;
        color: #a5b8d5;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > tr.child {
        display: none !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_wrapper::before {
        grid-column: 1;
        grid-row: 2;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_paginate {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        padding-top: 25px;
        text-align: center;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_length {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        padding-top: 11px;
        text-align: center;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    body.f2h-authenticated #main-body .f2h-service-inventory-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-actions .btn {
        width: 100%;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
        min-height: 94px;
        padding-inline: 14px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary-item dd {
        font-size: 28px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-summary-item > span {
        font-size: 9px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_length label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_filter label {
        display: block;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_filter input, .dataTables_length select) {
        width: 100%;
        max-width: none;
        margin-inline-start: 0;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_length select {
        width: auto;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal) {
        grid-column: 1 / -1;
        padding: 11px 0 !important;
        border-inline-end: 0 !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-renewal {
        border-top: 0 !important;
        padding-top: 1px !important;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-status {
        flex-wrap: wrap;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-status::before {
        width: 100%;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-status .status {
        margin-inline-start: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.f2h-authenticated #main-body .f2h-service-inventory-sync > i::after {
        display: none;
        animation: none;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-row:hover .f2h-service-inventory-manage i {
        transform: none;
    }
}

@media (forced-colors: active) {
    body.f2h-authenticated #main-body :where(.f2h-service-inventory-hero, .f2h-service-inventory-panel, .f2h-service-inventory-summary-item, .f2h-service-inventory-row) {
        border: 1px solid CanvasText;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory-status .status::before,
    body.f2h-authenticated #main-body .f2h-service-inventory-sync > i {
        background: currentColor;
        box-shadow: none;
    }
}

/* Authenticated infrastructure home ------------------------------------- */

body.f2h-authenticated #main-body .f2h-infrastructure {
    --f2h-infra-border: rgba(126, 158, 214, .2);
    --f2h-infra-border-strong: rgba(140, 174, 232, .31);
    --f2h-infra-violet: #9d7cff;
    --f2h-infra-blue: #6aa7ff;
    --f2h-infra-cyan: #62d7e9;
    --f2h-infra-green: #63e1b5;
    min-width: 0;
    display: grid;
    gap: 21px;
    color: #bdc9dc;
}

body.f2h-authenticated #main-body .f2h-infrastructure > :where(section, nav, aside, .f2h-infrastructure-addon-output) {
    min-width: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure :where(h1, h2, h3, p, dl, dd) {
    margin-top: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-areas:
        "copy health"
        "summary summary";
    grid-template-columns: minmax(0, 1.2fr) minmax(345px, .8fr);
    gap: 29px clamp(34px, 5vw, 76px);
    overflow: hidden;
    padding: clamp(33px, 3.6vw, 48px) clamp(31px, 4vw, 52px);
    border-color: rgba(132, 166, 228, .25);
    border-radius: 25px;
    background:
        radial-gradient(circle at 10% 5%, rgba(119, 69, 243, .24), transparent 27rem),
        radial-gradient(circle at 89% 24%, rgba(22, 190, 215, .12), transparent 24rem),
        linear-gradient(122deg, rgba(13, 28, 55, .96), rgba(5, 14, 29, .92) 61%, rgba(6, 22, 41, .92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(80, 208, 232, .035),
        0 30px 82px rgba(0, 2, 12, .34);
}

body.f2h-authenticated #main-body .f2h-infrastructure-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(rgba(128, 167, 226, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 167, 226, .055) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, .72), transparent 67%);
    mask-image: linear-gradient(105deg, rgba(0, 0, 0, .72), transparent 67%);
}

body.f2h-authenticated #main-body .f2h-infrastructure-hero::after {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    inset-inline-end: -246px;
    top: -244px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(91, 218, 237, .14);
    border-radius: 50%;
    box-shadow:
        0 0 0 62px rgba(94, 109, 249, .024),
        0 0 0 124px rgba(54, 198, 222, .016),
        0 0 110px rgba(48, 199, 221, .09);
}

body.f2h-authenticated #main-body .f2h-infrastructure-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    grid-area: copy;
    align-self: center;
    padding-bottom: 2px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-overline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-eyebrow,
body.f2h-authenticated #main-body .f2h-infrastructure-network-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-eyebrow {
    color: #77dcec;
}

body.f2h-authenticated #main-body .f2h-infrastructure-eyebrow > i,
body.f2h-authenticated #main-body .f2h-infrastructure-network-link > span,
body.f2h-authenticated #main-body .f2h-infrastructure-refresh-state > i {
    position: relative;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #59d8aa;
    box-shadow: 0 0 0 4px rgba(72, 207, 163, .08), 0 0 11px rgba(72, 207, 163, .55);
}

body.f2h-authenticated #main-body .f2h-infrastructure-network-link {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(92, 211, 177, .15);
    border-radius: 999px;
    color: #8dbcae;
    background: rgba(23, 104, 82, .08);
    letter-spacing: .055em;
    text-transform: none;
}

body.f2h-authenticated #main-body .f2h-infrastructure-network-link:hover,
body.f2h-authenticated #main-body .f2h-infrastructure-network-link:focus-visible {
    border-color: rgba(92, 211, 177, .31);
    color: #c9f5e7;
    background: rgba(23, 104, 82, .15);
}

body.f2h-authenticated #main-body .f2h-infrastructure-hero-copy h1 {
    max-width: 710px;
    margin-bottom: 15px;
    color: #f5f8ff;
    font-size: clamp(34px, 3.35vw, 49px);
    font-weight: 760;
    letter-spacing: -.045em;
    line-height: 1.045;
    text-wrap: balance;
}

body.f2h-authenticated #main-body .f2h-infrastructure-hero-copy > p {
    max-width: 620px;
    margin-bottom: 0;
    color: #a7b6cc;
    font-size: 13px;
    line-height: 1.72;
}

body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions .btn,
body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty .btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 740;
    letter-spacing: .025em;
    text-decoration: none;
}

body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions .btn-primary,
body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty .btn-primary {
    border-color: rgba(128, 146, 255, .63);
    color: #fff;
    background: linear-gradient(135deg, #7556e9, #3d73dd 58%, #268dbd);
    box-shadow: 0 12px 29px rgba(55, 74, 204, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions .f2h-btn-secondary,
body.f2h-authenticated #main-body .f2h-infrastructure-section-header .f2h-btn-secondary {
    border-color: rgba(133, 167, 226, .24);
    color: #d3deef;
    background: rgba(10, 24, 47, .67);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

@media (hover: hover) {
    body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions .btn-primary:hover,
    body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty .btn-primary:hover {
        border-color: rgba(153, 179, 255, .8);
        color: #fff;
        background: linear-gradient(135deg, #8265ef, #4781e8 58%, #2f9acb);
        box-shadow: 0 15px 34px rgba(55, 74, 204, .33), inset 0 1px 0 rgba(255, 255, 255, .2);
        transform: translateY(-1px);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions .f2h-btn-secondary:hover,
    body.f2h-authenticated #main-body .f2h-infrastructure-section-header .f2h-btn-secondary:hover {
        border-color: rgba(123, 208, 233, .4);
        color: #fff;
        background: rgba(18, 39, 72, .78);
        transform: translateY(-1px);
    }
}

body.f2h-authenticated #main-body .f2h-infrastructure-health {
    position: relative;
    z-index: 1;
    min-width: 0;
    grid-area: health;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(130, 163, 220, .2);
    border-radius: 18px;
    background:
        radial-gradient(circle at 96% 4%, rgba(89, 205, 227, .11), transparent 11rem),
        linear-gradient(145deg, rgba(15, 32, 59, .72), rgba(6, 17, 34, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 42px rgba(0, 2, 12, .17);
}

body.f2h-authenticated #main-body .f2h-infrastructure-health::before {
    position: absolute;
    top: 14%;
    bottom: 14%;
    inset-inline-start: 0;
    width: 2px;
    content: "";
    border-radius: 0 3px 3px 0;
    background: linear-gradient(#9479f2, rgba(81, 210, 230, .28));
    box-shadow: 0 0 16px rgba(142, 112, 239, .34);
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(126, 158, 214, .13);
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-header > div > span {
    display: block;
    margin-bottom: 5px;
    color: #7e90ac;
    font-size: 8px;
    font-weight: 760;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-header h2 {
    margin-bottom: 0;
    color: #eaf0fa;
    font-size: 15px;
    font-weight: 690;
    letter-spacing: -.015em;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-header > strong {
    color: #f6f8ff;
    font-size: 31px;
    font-weight: 740;
    letter-spacing: -.045em;
    line-height: 1;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 14px 0 13px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat {
    min-width: 0;
    padding: 0 11px;
    border-inline-start: 1px solid rgba(126, 158, 214, .12);
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat:last-child {
    padding-inline-end: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat dt {
    overflow: hidden;
    color: #72839e;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat dd {
    margin-bottom: 0;
    color: #dce5f3;
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -.035em;
    line-height: 1.25;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat.is-active dd {
    color: #76e5bf;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-stat.has-attention dd {
    color: #ffb07e;
}

body.f2h-authenticated #main-body .f2h-infrastructure-health-note {
    margin-bottom: 0;
    color: #7486a2;
    font-size: 9px;
    line-height: 1.5;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-summary {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    grid-area: summary;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    margin: 0 clamp(-52px, -4vw, -31px) clamp(-48px, -3.6vw, -33px);
    border-top: 1px solid rgba(126, 158, 214, .15);
    background: rgba(3, 11, 25, .36);
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count {
    --f2h-infra-category: #72d8ed;
    --f2h-infra-category-rgb: 114, 216, 237;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    padding: 14px clamp(19px, 2.5vw, 31px);
    border-inline-start: 1px solid rgba(126, 158, 214, .12);
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count:first-child {
    border-inline-start: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count.is-hosting {
    --f2h-infra-category: #68d9eb;
    --f2h-infra-category-rgb: 104, 217, 235;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count.is-vps {
    --f2h-infra-category: #9b83f4;
    --f2h-infra-category-rgb: 155, 131, 244;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count.is-dedicated {
    --f2h-infra-category: #f0b66b;
    --f2h-infra-category-rgb: 240, 182, 107;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count.is-other {
    --f2h-infra-category: #88a2ca;
    --f2h-infra-category-rgb: 136, 162, 202;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count dt {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    color: #8193ae;
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .025em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count dt i {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--f2h-infra-category-rgb), .26);
    border-radius: 8px;
    color: var(--f2h-infra-category);
    background: rgba(var(--f2h-infra-category-rgb), .09);
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-count dd {
    margin-bottom: 0;
    color: #eff4fd;
    font-size: 23px;
    font-weight: 730;
    letter-spacing: -.04em;
    line-height: 1;
}

body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    padding: 9px;
    border: 1px solid rgba(126, 158, 214, .17);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(10, 24, 47, .77), rgba(5, 14, 29, .73));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 13px 34px rgba(0, 2, 12, .15);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
}

body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > span {
    flex: 0 0 auto;
    padding: 0 10px;
    color: #71839f;
    font-size: 8px;
    font-weight: 760;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #9eacc2;
    background: rgba(8, 19, 38, .38);
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > a i {
    color: #7d88df;
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > a:hover,
body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > a:focus-visible {
    border-color: rgba(123, 180, 229, .25);
    color: #f0f5fd;
    background: rgba(24, 52, 89, .57);
}

body.f2h-authenticated #main-body .f2h-infrastructure-addon-output {
    min-width: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-addon-output:empty {
    display: none;
}

body.f2h-authenticated #main-body .f2h-infrastructure-section-header {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-section-header > div {
    min-width: 0;
    max-width: 820px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-section-kicker,
body.f2h-authenticated #main-body .f2h-infrastructure-category-kicker {
    display: block;
    margin-bottom: 6px;
    color: #8d7ce3;
    font-size: 8px;
    font-weight: 780;
    letter-spacing: .145em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-section-header h2 {
    margin-bottom: 0;
    color: #eef3fc;
    font-size: clamp(21px, 2.15vw, 29px);
    font-weight: 720;
    letter-spacing: -.03em;
    line-height: 1.13;
}

body.f2h-authenticated #main-body .f2h-infrastructure-section-header p {
    margin: 7px 0 0;
    color: #8394ae;
    font-size: 11px;
    line-height: 1.6;
}

body.f2h-authenticated #main-body .f2h-infrastructure-section-header .f2h-btn-secondary {
    min-height: 37px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention {
    position: relative;
    overflow: hidden;
    padding: 25px;
    border: 1px solid rgba(126, 158, 214, .18);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, rgba(114, 71, 223, .075), transparent 21rem),
        linear-gradient(145deg, rgba(10, 23, 45, .8), rgba(5, 14, 29, .76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 48px rgba(0, 2, 12, .2);
    -webkit-backdrop-filter: blur(18px) saturate(132%);
    backdrop-filter: blur(18px) saturate(132%);
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention .f2h-infrastructure-section-header {
    align-items: center;
    margin-bottom: 17px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention .f2h-infrastructure-section-header h2 {
    font-size: 20px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-all-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(73, 207, 164, .2);
    border-radius: 999px;
    color: #83dcbf;
    background: rgba(20, 112, 85, .11);
    font-size: 8px;
    font-weight: 740;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-all-clear i {
    font-size: 7px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item {
    --f2h-infra-alert: 116, 139, 190;
    min-width: 0;
    min-height: 71px;
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid rgba(var(--f2h-infra-alert), .18);
    border-radius: 13px;
    color: #aebbd0;
    background:
        radial-gradient(circle at 0 0, rgba(var(--f2h-infra-alert), .09), transparent 8rem),
        rgba(7, 17, 34, .61);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item.is-critical {
    --f2h-infra-alert: 232, 78, 104;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item.is-progress {
    --f2h-infra-alert: 231, 166, 64;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item.is-billing {
    --f2h-infra-alert: 154, 119, 245;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item.is-support {
    --f2h-infra-alert: 69, 183, 221;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-icon {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--f2h-infra-alert), .24);
    border-radius: 10px;
    color: rgb(var(--f2h-infra-alert));
    background: rgba(var(--f2h-infra-alert), .09);
    font-size: 11px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item > span:nth-child(2) {
    min-width: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item strong,
body.f2h-authenticated #main-body .f2h-infrastructure-attention-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item strong {
    color: #e7edf7;
    font-size: 10px;
    font-weight: 710;
    line-height: 1.35;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item small {
    margin-top: 3px;
    color: #7486a2;
    font-size: 8px;
    line-height: 1.35;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-item > i:last-child {
    color: rgba(var(--f2h-infra-alert), .8);
    font-size: 8px;
    transition: transform .18s ease;
}

@media (hover: hover) {
    body.f2h-authenticated #main-body .f2h-infrastructure-attention-item:hover {
        border-color: rgba(var(--f2h-infra-alert), .34);
        color: #fff;
        background:
            radial-gradient(circle at 0 0, rgba(var(--f2h-infra-alert), .14), transparent 9rem),
            rgba(12, 28, 52, .78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 25px rgba(0, 2, 12, .12);
        transform: translateY(-1px);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-attention-item:hover > i:last-child {
        transform: translateX(2px);
    }
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-empty {
    min-height: 83px;
    display: flex;
    align-items: center;
    gap: 15px;
    grid-column: 1 / -1;
    padding: 15px 17px;
    border: 1px dashed rgba(83, 210, 169, .21);
    border-radius: 13px;
    background: rgba(18, 90, 70, .07);
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-empty > span {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(83, 210, 169, .2);
    border-radius: 12px;
    color: #68dcb5;
    background: rgba(20, 112, 85, .1);
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-empty strong {
    display: block;
    color: #dcebe6;
    font-size: 11px;
    font-weight: 710;
}

body.f2h-authenticated #main-body .f2h-infrastructure-attention-empty p {
    margin: 3px 0 0;
    color: #79948b;
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-portfolio {
    display: grid;
    gap: 16px;
    padding-top: 5px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-categories {
    display: grid;
    gap: 14px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category {
    --f2h-infra-category-rgb: 89, 200, 226;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 158, 214, .2);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-infra-category-rgb), .065), transparent 21rem),
        linear-gradient(145deg, rgba(10, 24, 47, .85), rgba(5, 14, 29, .81));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 19px 50px rgba(0, 2, 12, .21);
    -webkit-backdrop-filter: blur(18px) saturate(132%);
    backdrop-filter: blur(18px) saturate(132%);
}

body.f2h-authenticated #main-body .f2h-infrastructure-category.is-hosting {
    --f2h-infra-category-rgb: 79, 200, 226;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category.is-vps {
    --f2h-infra-category-rgb: 143, 112, 241;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category.is-dedicated {
    --f2h-infra-category-rgb: 231, 166, 74;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category.is-other {
    --f2h-infra-category-rgb: 116, 139, 184;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 7%;
    left: 7%;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--f2h-infra-category-rgb), .64), transparent);
    box-shadow: 0 0 18px rgba(var(--f2h-infra-category-rgb), .24);
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(126, 158, 214, .13);
    background: rgba(10, 23, 45, .38);
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--f2h-infra-category-rgb), .23);
    border-radius: 13px;
    color: rgb(var(--f2h-infra-category-rgb));
    background:
        radial-gradient(circle at 35% 20%, rgba(var(--f2h-infra-category-rgb), .17), transparent 3rem),
        rgba(11, 27, 51, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 2, 12, .13);
    font-size: 13px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-heading > div {
    min-width: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-kicker {
    margin-bottom: 4px;
    color: rgba(var(--f2h-infra-category-rgb), .85);
    font-size: 7px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-heading h3 {
    margin-bottom: 2px;
    color: #eaf0fa;
    font-size: 16px;
    font-weight: 710;
    letter-spacing: -.018em;
    line-height: 1.3;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-heading p {
    margin-bottom: 0;
    color: #788aa6;
    font-size: 9px;
    line-height: 1.45;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a,
body.f2h-authenticated #main-body .f2h-infrastructure-category-footer > a {
    min-height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8ea3c3;
    font-size: 9px;
    font-weight: 690;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a i {
    color: rgba(var(--f2h-infra-category-rgb), .85);
    font-size: 7px;
    transition: transform .18s ease;
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a:hover,
body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a:focus-visible,
body.f2h-authenticated #main-body .f2h-infrastructure-category-footer > a:hover,
body.f2h-authenticated #main-body .f2h-infrastructure-category-footer > a:focus-visible {
    color: #e5f6fb;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
    gap: 10px;
    padding: 15px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-card {
    position: relative;
    min-width: 0;
    min-height: 201px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(126, 158, 214, .15);
    border-radius: 14px;
    color: #b8c5d8;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-infra-category-rgb), .08), transparent 9rem),
        linear-gradient(145deg, rgba(10, 24, 47, .76), rgba(5, 15, 31, .73));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .027), 0 10px 27px rgba(0, 2, 12, .13);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-card.has-attention {
    border-color: rgba(235, 159, 70, .27);
    background:
        radial-gradient(circle at 100% 0, rgba(224, 143, 45, .1), transparent 9rem),
        linear-gradient(145deg, rgba(33, 28, 34, .78), rgba(7, 16, 31, .74));
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-accent {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--f2h-infra-category-rgb), .78), transparent);
    box-shadow: 0 0 13px rgba(var(--f2h-infra-category-rgb), .33);
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-card.has-attention .f2h-infrastructure-service-accent {
    background: linear-gradient(90deg, transparent, rgba(236, 163, 73, .82), transparent);
    box-shadow: 0 0 13px rgba(236, 163, 73, .32);
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-topline {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-type {
    min-width: 0;
    overflow: hidden;
    color: #7183a0;
    font-size: 7px;
    font-weight: 720;
    letter-spacing: .1em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-status {
    min-height: 22px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid rgba(128, 159, 211, .18);
    border-radius: 999px;
    color: #a2b0c4;
    background: rgba(47, 65, 94, .22);
    font-size: 7px;
    font-weight: 760;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-status > i {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-status.is-active {
    border-color: rgba(70, 211, 165, .2);
    color: #62dfb4;
    background: rgba(20, 112, 85, .14);
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-status:is(.is-pending, .is-inprogress) {
    border-color: rgba(240, 177, 76, .22);
    color: #efbd68;
    background: rgba(137, 86, 20, .14);
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-status:is(.is-suspended, .is-cancelled, .is-terminated, .is-fraud, .is-expired) {
    border-color: rgba(255, 102, 132, .22);
    color: #ff879e;
    background: rgba(140, 38, 61, .15);
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-name {
    display: block;
    margin-top: 14px;
    color: #edf3fc;
    font-size: 12px;
    font-weight: 720;
    letter-spacing: -.008em;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-identifier {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    margin-top: 6px;
    color: #7486a2;
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 8px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-identifier i {
    flex: 0 0 auto;
    color: rgba(var(--f2h-infra-category-rgb), .72);
    font-size: 7px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: auto;
    padding-top: 14px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-meta > span {
    min-width: 0;
    padding-inline-start: 9px;
    border-inline-start: 1px solid rgba(126, 158, 214, .13);
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-meta small,
body.f2h-authenticated #main-body .f2h-infrastructure-service-meta b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-meta small {
    color: #687a96;
    font-size: 7px;
    font-weight: 670;
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-meta b {
    margin-top: 3px;
    color: #aebbd0;
    font-size: 8px;
    font-weight: 650;
    line-height: 1.35;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-manage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid rgba(126, 158, 214, .11);
    color: #879bb9;
    font-size: 8px;
    font-weight: 690;
    letter-spacing: .025em;
}

body.f2h-authenticated #main-body .f2h-infrastructure-service-manage i {
    color: rgba(var(--f2h-infra-category-rgb), .88);
    font-size: 7px;
    transition: transform .18s ease;
}

@media (hover: hover) {
    body.f2h-authenticated #main-body .f2h-infrastructure-service-card:hover {
        border-color: rgba(var(--f2h-infra-category-rgb), .32);
        color: #dce6f5;
        background:
            radial-gradient(circle at 100% 0, rgba(var(--f2h-infra-category-rgb), .13), transparent 10rem),
            linear-gradient(145deg, rgba(15, 33, 60, .9), rgba(7, 18, 36, .86));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 15px 34px rgba(0, 2, 12, .19);
        transform: translateY(-2px);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-service-card:hover .f2h-infrastructure-service-manage {
        color: #dbeaf2;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-service-card:hover .f2h-infrastructure-service-manage i,
    body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a:hover i {
        transform: translateX(2px);
    }
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-footer {
    display: flex;
    justify-content: center;
    padding: 11px 17px 13px;
    border-top: 1px solid rgba(126, 158, 214, .11);
    background: rgba(4, 13, 27, .3);
}

body.f2h-authenticated #main-body .f2h-infrastructure-category-footer > a {
    color: rgba(var(--f2h-infra-category-rgb), .81);
}

body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty {
    min-height: 130px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border: 1px dashed rgba(126, 158, 214, .23);
    border-radius: 17px;
    background: rgba(8, 20, 39, .58);
}

body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty > span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(139, 113, 235, .23);
    border-radius: 14px;
    color: #947ff0;
    background: rgba(97, 61, 192, .11);
}

body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty h3 {
    margin-bottom: 4px;
    color: #e9eff9;
    font-size: 15px;
    font-weight: 700;
}

body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty p {
    margin-bottom: 0;
    color: #7e90aa;
    font-size: 10px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-account-data {
    display: grid;
    gap: 15px;
    margin-top: 5px;
    padding-top: 26px;
    border-top: 1px solid rgba(126, 158, 214, .13);
}

body.f2h-authenticated #main-body .f2h-infrastructure-account-data .f2h-infrastructure-section-header h2 {
    color: #dbe3f0;
    font-size: clamp(19px, 1.8vw, 24px);
}

body.f2h-authenticated #main-body .f2h-infrastructure-refresh-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(88, 206, 170, .14);
    border-radius: 999px;
    color: #7aa99c;
    background: rgba(24, 103, 82, .07);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .045em;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-refresh-state > i::after {
    position: absolute;
    inset: -4px;
    content: "";
    border: 1px solid rgba(89, 216, 170, .29);
    border-radius: 50%;
    animation: f2h-infrastructure-signal 3s ease-out infinite;
}

@keyframes f2h-infrastructure-signal {
    0%, 48% {
        opacity: .72;
        transform: scale(.55);
    }

    82%, 100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panels {
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panels > :where(.f2h-infrastructure-panel-standard, .f2h-infrastructure-panel-wide) {
    min-width: 0;
    margin: 0;
    padding: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-panel-wide {
    grid-column: 1 / -1;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel {
    position: relative;
    height: 100%;
    overflow: hidden;
    margin: 0;
    border-color: rgba(126, 158, 214, .16);
    border-radius: 15px;
    color: #aebbd0;
    background: linear-gradient(145deg, rgba(9, 22, 43, .76), rgba(5, 14, 29, .73));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028), 0 13px 34px rgba(0, 2, 12, .16);
    -webkit-backdrop-filter: blur(16px) saturate(126%);
    backdrop-filter: blur(16px) saturate(126%);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel::before {
    position: absolute;
    z-index: 2;
    top: -1px;
    right: 16%;
    left: 16%;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(133, 104, 234, .48), transparent);
    box-shadow: 0 0 12px rgba(133, 104, 234, .2);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-header {
    min-height: 60px;
    padding: 13px 15px;
    border-bottom-color: rgba(126, 158, 214, .12);
    background: linear-gradient(90deg, rgba(104, 66, 204, .08), transparent 52%), rgba(7, 18, 36, .48);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-title {
    min-width: 0;
    color: #dce5f2;
    font-size: 11px;
    font-weight: 690;
    letter-spacing: .005em;
    line-height: 1.45;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-title > i:first-of-type {
    color: #8c7be3;
    font-size: 10px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-panel-action {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-color: rgba(126, 157, 215, .19);
    border-radius: 8px;
    color: #99aac5;
    background: rgba(10, 23, 46, .55);
    font-size: 8px;
    font-weight: 670;
}

body.f2h-authenticated #main-body .f2h-infrastructure-panel-action:hover,
body.f2h-authenticated #main-body .f2h-infrastructure-panel-action:focus-visible {
    border-color: rgba(132, 118, 235, .4);
    color: #fff;
    background: rgba(81, 55, 164, .18);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-body {
    padding: 15px;
    color: #99a9c0;
    font-size: 10px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel > .list-group {
    overflow: visible;
    border-radius: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .list-group-item {
    min-height: 47px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-color: rgba(126, 158, 214, .1);
    color: #98a9c2;
    background: rgba(6, 16, 32, .42);
    font-size: 10px;
    line-height: 1.45;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(a.list-group-item:hover, a.list-group-item:focus-visible, .list-group-item-action:hover) {
    color: #e9f0fa;
    background: linear-gradient(90deg, rgba(104, 65, 218, .1), rgba(28, 76, 119, .07));
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .list-group-item > i:first-child {
    color: #7d8fc0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .badge {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    padding: 4px 7px;
    border: 1px solid rgba(126, 158, 214, .16);
    border-radius: 999px;
    color: #9fb0c9;
    background: rgba(40, 61, 94, .29);
    font-size: 7px;
    font-weight: 740;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.badge-success, .status-active) {
    border-color: rgba(63, 215, 162, .19);
    color: #5cdfb1;
    background: rgba(20, 112, 85, .12);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.badge-warning, .status-pending) {
    border-color: rgba(240, 177, 76, .2);
    color: #efbd68;
    background: rgba(137, 86, 20, .12);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.badge-danger, .status-suspended, .status-cancelled, .status-terminated) {
    border-color: rgba(255, 102, 132, .2);
    color: #ff879e;
    background: rgba(140, 38, 61, .13);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-footer {
    min-height: 0;
    padding: 10px 14px;
    border-top-color: rgba(126, 158, 214, .1);
    color: #71839f;
    background: rgba(5, 14, 28, .42);
    font-size: 8px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-footer:empty {
    display: none;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.table, table) {
    margin-bottom: 0;
    color: #9eacc1;
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.table th, .table td, table th, table td) {
    border-color: rgba(126, 158, 214, .1);
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.form-control, select.form-control, .custom-select) {
    border-color: rgba(126, 157, 210, .26) !important;
    color: #e6edf9 !important;
    background: rgba(5, 14, 29, .82) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2) !important;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.form-control, .custom-select):focus {
    border-color: rgba(107, 127, 255, .75) !important;
    box-shadow: 0 0 0 4px rgba(100, 94, 246, .12), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .form-control::placeholder {
    color: #70819d;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.btn-default, .btn-secondary, .btn-light, .btn-view-details) {
    border-color: rgba(126, 157, 215, .22) !important;
    color: #b7c5da !important;
    background: rgba(10, 23, 46, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel :where(.btn-default, .btn-secondary, .btn-light, .btn-view-details):not(:disabled):not(.disabled):hover {
    border-color: rgba(151, 113, 255, .44) !important;
    color: #fff !important;
    background: rgba(91, 55, 184, .2) !important;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .btn-success {
    border-color: rgba(63, 215, 162, .42) !important;
    color: #eafff7 !important;
    background: linear-gradient(135deg, rgba(13, 133, 101, .92), rgba(8, 91, 74, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .btn-success:not(:disabled):not(.disabled):hover {
    border-color: rgba(104, 240, 197, .62) !important;
    background: linear-gradient(135deg, rgba(16, 151, 114, .96), rgba(10, 108, 86, .98)) !important;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool {
    min-width: 0;
    min-height: 69px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(126, 158, 214, .13);
    border-radius: 13px;
    color: #8091aa;
    background: linear-gradient(145deg, rgba(8, 19, 37, .56), rgba(4, 12, 25, .52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(111, 139, 190, .18);
    border-radius: 10px;
    color: #7d8eaf;
    background: rgba(15, 30, 54, .58);
    font-size: 10px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool > div {
    min-width: 0;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool > div > span {
    display: block;
    margin-bottom: 1px;
    color: #667892;
    font-size: 7px;
    font-weight: 760;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool strong {
    display: inline;
    color: #aebbd0;
    font-size: 10px;
    font-weight: 680;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool p {
    display: inline;
    margin: 0 0 0 5px;
    color: #6f809a;
    font-size: 9px;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool > a {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(126, 158, 214, .16);
    border-radius: 9px;
    color: #8fa0ba;
    background: rgba(10, 23, 44, .48);
    font-size: 8px;
    font-weight: 680;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool > a:hover,
body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool > a:focus-visible {
    border-color: rgba(131, 167, 224, .28);
    color: #dbe5f3;
    background: rgba(18, 38, 69, .65);
}

body.f2h-authenticated #main-body .f2h-infrastructure :where(
    .f2h-infrastructure-network-link,
    .f2h-infrastructure-primary-actions .btn,
    .f2h-infrastructure-quick-actions > a,
    .f2h-infrastructure-attention-item,
    .f2h-infrastructure-category-header > a,
    .f2h-infrastructure-service-card,
    .f2h-infrastructure-category-footer > a,
    .f2h-infrastructure-panel-action,
    .f2h-infrastructure-operations-tool > a
) {
    text-decoration: none;
}

body.f2h-authenticated #main-body .f2h-infrastructure :where(
    .f2h-infrastructure-network-link,
    .f2h-infrastructure-primary-actions .btn,
    .f2h-infrastructure-quick-actions > a,
    .f2h-infrastructure-attention-item,
    .f2h-infrastructure-category-header > a,
    .f2h-infrastructure-service-card,
    .f2h-infrastructure-category-footer > a,
    .f2h-infrastructure-panel-action,
    .f2h-infrastructure-operations-tool > a
):focus-visible {
    outline-color: #72d8ef;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(84, 200, 229, .13);
}

[dir="rtl"] body.f2h-authenticated #main-body .f2h-infrastructure :where(
    .f2h-infrastructure-primary-actions .fa-arrow-right,
    .f2h-infrastructure-attention-item > .fa-arrow-right,
    .f2h-infrastructure-category-header > a .fa-arrow-right,
    .f2h-infrastructure-service-manage .fa-arrow-right
) {
    transform: rotate(180deg);
}

@media (max-width: 1199.98px) {
    body.f2h-authenticated #main-body .f2h-infrastructure-hero {
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
        gap: 26px 31px;
        padding-right: 36px;
        padding-left: 36px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-summary {
        margin-right: -36px;
        margin-left: -36px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-service-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    }
}

@media (max-width: 991.98px) {
    body.f2h-authenticated #main-body .f2h-infrastructure-hero {
        grid-template-areas:
            "copy"
            "health"
            "summary";
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-health {
        min-height: 178px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions {
        flex-wrap: wrap;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > span {
        width: 100%;
        padding-top: 3px;
        padding-bottom: 2px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-native-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-panel-wide {
        grid-column: 1;
    }
}

@media (max-width: 767.98px) {
    body.f2h-authenticated #main-body .f2h-infrastructure {
        gap: 17px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-hero {
        gap: 21px;
        padding: 27px 22px;
        border-radius: 20px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 -22px -27px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-count:nth-child(odd) {
        border-inline-start: 0;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-count:nth-child(n+3) {
        border-top: 1px solid rgba(126, 158, 214, .12);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-overline {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-hero-copy h1 {
        font-size: clamp(30px, 8.8vw, 39px);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-hero-copy > p {
        font-size: 12px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-health {
        min-height: 0;
        padding: 17px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > span {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-quick-actions > a {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-attention {
        padding: 21px 17px;
        border-radius: 17px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-section-header,
    body.f2h-authenticated #main-body .f2h-infrastructure-category-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-attention .f2h-infrastructure-section-header {
        align-items: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-section-header .f2h-btn-secondary {
        align-self: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-attention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-header {
        padding: 18px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a {
        margin-inline-start: 58px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-service-grid {
        padding: 12px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty .btn {
        grid-column: 1 / -1;
        justify-self: start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-account-data {
        padding-top: 22px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool > a {
        grid-column: 2;
        justify-self: start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool p {
        display: block;
        margin: 2px 0 0;
    }
}

@media (max-width: 575.98px) {
    body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-primary-actions .btn {
        width: 100%;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-health-grid {
        padding-top: 12px;
        padding-bottom: 11px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-health-stat {
        padding-inline: 7px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-health-stat dt {
        font-size: 6px;
        letter-spacing: .025em;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-health-stat dd {
        font-size: 20px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-count {
        min-height: 61px;
        padding: 11px 14px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-count dt {
        gap: 7px;
        font-size: 8px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-count dt i {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-count dd {
        font-size: 20px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-attention-grid,
    body.f2h-authenticated #main-body .f2h-infrastructure-service-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-attention-item {
        min-height: 67px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-heading {
        align-items: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-category-header > a {
        margin-inline-start: 0;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-service-card {
        min-height: 193px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        padding: 19px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-portfolio-empty .btn {
        grid-column: 1;
        width: 100%;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-section-header {
        gap: 10px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-refresh-state {
        align-self: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .card-header {
        padding: 12px 13px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-native-panel .list-group-item {
        padding-inline: 13px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-operations-tool {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure-operations-icon {
        width: 34px;
        height: 34px;
    }
}

/* Authenticated typography legibility ---------------------------------- */

/*
 * Operational interfaces need compact type, but never micro-type. Keep
 * labels at an 11px desktop floor, metadata at 12px, and actions at 13px.
 * The extra container class intentionally outranks the component defaults
 * and their earlier responsive reductions without using !important.
 */

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-kicker,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-panel-kicker,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-summary-item dt,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > thead > tr > th,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > thead > tr > th.sorting,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > thead > tr > th.sorting_asc,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > thead > tr > th.sorting_desc,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-status .status,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal)::before,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-status::before {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .065em;
    line-height: 1.3;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-summary-item > span,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-panel-head p,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-sync,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap :where(.dataTables_length, .dataTables_filter) label,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap .dataTables_info,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap .pagination > li > :where(a, span),
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-loading p,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-endpoint,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-billing small,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-renewal small {
    font-size: 12px;
    line-height: 1.45;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-copy > p {
    color: #b4c1d5;
    font-size: 15px;
    line-height: 1.72;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-summary-item > span,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-panel-head p,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-sync,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap :where(.dataTables_length, .dataTables_filter) label,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap .dataTables_info,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-endpoint,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-billing small,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-renewal small {
    color: #93a6c2;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-billing strong,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-renewal > span:not(.w-hidden) {
    font-size: 13px;
    font-weight: 600;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-actions .btn,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-manage {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-manage {
    min-height: 34px;
    padding: 7px 10px;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap :where(.dataTables_filter input, .dataTables_length select) {
    font-size: 13px;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-eyebrow,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-header > div > span,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-stat dt,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-count dt,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-quick-actions > span,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-kicker,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-all-clear,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-type,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-status,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-meta small,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-refresh-state,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .badge,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool > div > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .065em;
    line-height: 1.35;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-note,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-item small,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-empty p,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-heading p,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-header > a,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-footer > a,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-identifier,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-meta b,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-manage,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-footer,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel :where(.table, table),
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool p {
    font-size: 12px;
    line-height: 1.45;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-hero-copy > p,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-section-header p {
    color: #b0bed2;
    font-size: 14px;
    line-height: 1.7;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-network-link,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-primary-actions .btn,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-portfolio-empty .btn,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-quick-actions > a,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-section-header .f2h-btn-secondary,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-item strong,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-portfolio-empty p,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-panel-action,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-body,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .list-group-item,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool strong,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool > a {
    font-size: 13px;
    line-height: 1.45;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-title,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-name {
    font-size: 14px;
    font-weight: 700;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-stat dt {
    min-height: 2.7em;
    display: flex;
    align-items: flex-end;
    overflow: visible;
    letter-spacing: .04em;
    text-overflow: clip;
    white-space: normal;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-topline {
    align-items: flex-start;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-type {
    overflow: visible;
    letter-spacing: .045em;
    text-overflow: clip;
    white-space: normal;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-status {
    line-height: 1.25;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-identifier {
    color: #93a6c2;
    font-weight: 600;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-meta small,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-note,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-item small,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-heading p,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-footer,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool p {
    color: #8ea1bd;
}

body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-body,
body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .list-group-item {
    color: #b0bdd0;
}

@media (max-width: 767.98px) {
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-kicker,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-panel-kicker,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-summary-item dt,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-status .status,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal)::before,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-status::before,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-eyebrow,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-header > div > span,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-stat dt,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-count dt,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-quick-actions > span,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-kicker,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-all-clear,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-type,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-status,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-meta small,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-refresh-state,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .badge,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool > div > span {
        font-size: 12px;
    }

    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-summary-item > span,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-panel-head p,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-sync,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table-wrap .dataTables_info,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-endpoint,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-billing small,
    body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-renewal small,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-health-note,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-item small,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-empty p,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-heading p,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-header > a,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-category-footer > a,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-identifier,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-meta b,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-service-manage,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-footer,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel :where(.table, table),
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool p {
        font-size: 13px;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-network-link,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-primary-actions .btn,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-quick-actions > a,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-section-header .f2h-btn-secondary,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-attention-item strong,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-panel-action,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-body,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .list-group-item,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool strong,
    body.f2h-authenticated #main-body .f2h-infrastructure .f2h-infrastructure-operations-tool > a {
        font-size: 14px;
    }
}

/* Client-home glass control deck and growth layer ----------------------- */

body.f2h-template-clientareahome #main-body {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 65% 6%, rgba(101, 55, 231, .12), transparent 28rem),
        radial-gradient(circle at 90% 35%, rgba(27, 183, 210, .075), transparent 30rem),
        radial-gradient(circle at 34% 67%, rgba(89, 57, 206, .07), transparent 34rem),
        transparent;
}

body.f2h-template-clientareahome #main-body::before,
body.f2h-template-clientareahome #main-body::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    filter: blur(18px);
}

body.f2h-template-clientareahome #main-body::before {
    width: 560px;
    height: 560px;
    top: 70px;
    left: 38%;
    background: radial-gradient(circle, rgba(91, 60, 224, .13), rgba(91, 60, 224, .025) 55%, transparent 72%);
}

body.f2h-template-clientareahome #main-body::after {
    width: 470px;
    height: 470px;
    top: 900px;
    right: -170px;
    background: radial-gradient(circle, rgba(26, 184, 205, .105), rgba(26, 184, 205, .02) 57%, transparent 73%);
}

body.f2h-template-clientareahome #main-body > .container {
    position: relative;
    z-index: 1;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure {
    position: relative;
    gap: 30px;
}

body.f2h-template-clientareahome #main-body .f2h-glass,
body.f2h-template-clientareahome #main-body .card-sidebar {
    border-color: rgba(154, 177, 229, .19);
    background:
        linear-gradient(145deg, rgba(18, 31, 59, .52), rgba(5, 13, 29, .36)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 -1px 0 rgba(89, 203, 226, .025),
        0 24px 70px rgba(0, 2, 12, .25);
    -webkit-backdrop-filter: blur(28px) saturate(148%);
    backdrop-filter: blur(28px) saturate(148%);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck {
    position: relative;
    isolation: isolate;
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: stretch;
    overflow: hidden;
    padding: clamp(34px, 4.4vw, 60px);
    border: 1px solid rgba(156, 181, 236, .22);
    border-radius: 30px;
    background:
        radial-gradient(circle at 4% 0, rgba(113, 69, 238, .24), transparent 29rem),
        radial-gradient(circle at 92% 92%, rgba(34, 188, 216, .15), transparent 27rem),
        linear-gradient(126deg, rgba(16, 30, 59, .56), rgba(5, 13, 30, .32) 58%, rgba(4, 20, 35, .38)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        inset 0 -1px 0 rgba(74, 207, 229, .035),
        0 40px 100px rgba(0, 2, 14, .34),
        0 0 0 1px rgba(91, 67, 212, .035);
    -webkit-backdrop-filter: blur(34px) saturate(150%);
    backdrop-filter: blur(34px) saturate(150%);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(rgba(155, 179, 228, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(155, 179, 228, .045) 1px, transparent 1px),
        linear-gradient(115deg, rgba(255, 255, 255, .055), transparent 24%);
    background-size: 42px 42px, 42px 42px, 100% 100%;
    -webkit-mask-image: linear-gradient(110deg, rgba(0, 0, 0, .88), transparent 78%);
    mask-image: linear-gradient(110deg, rgba(0, 0, 0, .88), transparent 78%);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck::after {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    inset-inline-end: -220px;
    top: -245px;
    content: "";
    border: 1px solid rgba(83, 215, 235, .14);
    border-radius: 50%;
    box-shadow:
        0 0 0 62px rgba(113, 77, 234, .035),
        0 0 0 128px rgba(43, 194, 218, .02),
        0 0 110px rgba(51, 197, 222, .12);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    align-self: center;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 27px;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-eyebrow,
body.f2h-template-clientareahome #main-body .f2h-home-deck-signal {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #91deef;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.35;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-eyebrow > i,
body.f2h-template-clientareahome #main-body .f2h-home-deck-signal > span,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-live > i {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #58ddb0;
    box-shadow: 0 0 0 4px rgba(78, 221, 176, .08), 0 0 14px rgba(78, 221, 176, .68);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-signal {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(104, 220, 187, .17);
    border-radius: 999px;
    color: #a6cebf;
    background: rgba(24, 111, 86, .1);
    font-size: 12px;
    letter-spacing: .015em;
    text-transform: none;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck h1 {
    max-width: 720px;
    margin: 0 0 21px;
    color: #f6f8ff;
    font-size: clamp(40px, 4.05vw, 58px);
    font-weight: 750;
    letter-spacing: -.048em;
    line-height: 1.01;
    text-wrap: balance;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck h1 > span {
    display: block;
    color: #c9d5ff;
    background: linear-gradient(95deg, #d9d5ff 5%, #9ebaff 51%, #71d8e8 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-copy > p {
    max-width: 670px;
    margin: 0;
    color: #bdc9da;
    font-size: 17px;
    line-height: 1.72;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 29px;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-actions .btn {
    min-height: 48px;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-actions .btn-primary {
    border-color: rgba(142, 153, 255, .68);
    background: linear-gradient(135deg, #7558ea, #4778df 56%, #2996bd);
    box-shadow: 0 14px 34px rgba(59, 68, 196, .27), inset 0 1px 0 rgba(255, 255, 255, .2);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-actions .f2h-btn-secondary {
    border-color: rgba(151, 178, 229, .24);
    color: #e2eaf7;
    background: rgba(10, 22, 44, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 31px 0 0;
    padding: 15px 0;
    border-top: 1px solid rgba(155, 181, 231, .14);
    border-bottom: 1px solid rgba(155, 181, 231, .1);
    background: linear-gradient(90deg, rgba(104, 73, 224, .045), transparent 75%);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing > div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 17px;
    border-inline-start: 1px solid rgba(155, 181, 231, .12);
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing > div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing dt {
    color: #94a5bf;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing dd {
    margin: 0;
    color: #f0f4fc;
    font-size: 22px;
    font-weight: 720;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(159, 184, 232, .19);
    border-radius: 23px;
    background:
        radial-gradient(circle at 50% 48%, rgba(102, 70, 224, .13), transparent 12rem),
        linear-gradient(145deg, rgba(13, 26, 52, .39), rgba(3, 11, 25, .28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 56px rgba(0, 2, 12, .22);
    -webkit-backdrop-filter: blur(30px) saturate(142%);
    backdrop-filter: blur(30px) saturate(142%);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation::before {
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(145, 108, 247, .7), rgba(79, 209, 230, .52), transparent);
    box-shadow: 0 0 22px rgba(120, 89, 234, .26);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-header,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-header > div > span {
    display: block;
    margin-bottom: 4px;
    color: #9684e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-header h2 {
    margin: 0;
    color: #eef3fc;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(79, 215, 171, .16);
    border-radius: 999px;
    color: #8cd6bd;
    background: rgba(22, 103, 81, .09);
    font-size: 12px;
    font-weight: 700;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage {
    position: relative;
    min-height: 266px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px 82px;
    align-content: center;
    flex: 1 1 auto;
    padding: 30px 4px 24px;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage::before,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage::after {
    position: absolute;
    z-index: -1;
    inset: 50% 11%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(141, 112, 232, .3), rgba(76, 196, 220, .27), transparent);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage::after {
    inset: 13% 50%;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, rgba(141, 112, 232, .3), rgba(76, 196, 220, .27), transparent);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-orbit {
    position: absolute;
    z-index: -1;
    width: 174px;
    height: 174px;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(142, 115, 236, .17);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(92, 85, 218, .018), 0 0 46px rgba(90, 74, 209, .09);
    transform: translate(-50%, -50%);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-core {
    position: absolute;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(151, 124, 244, .38);
    border-radius: 17px;
    color: #d7ccff;
    background: linear-gradient(145deg, rgba(87, 54, 186, .66), rgba(20, 55, 94, .62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 34px rgba(106, 73, 217, .32);
    font-size: 18px;
    transform: translate(-50%, -50%) rotate(45deg);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-core > i {
    transform: rotate(-45deg);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 67px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(151, 176, 225, .16);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(24, 39, 70, .38), rgba(5, 14, 29, .28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 13px 28px rgba(0, 2, 12, .14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node > span {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(139, 167, 220, .18);
    border-radius: 11px;
    color: #79d8ea;
    background: rgba(35, 111, 143, .12);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node.is-vps > span {
    color: #ac8cff;
    background: rgba(98, 66, 199, .14);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node.is-dedicated > span {
    color: #f1bc6a;
    background: rgba(156, 100, 28, .13);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node.is-domain > span {
    color: #66dfb9;
    background: rgba(27, 125, 94, .12);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node small {
    display: block;
    overflow: hidden;
    color: #9cabc2;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-node strong {
    display: block;
    margin-top: 1px;
    color: #f0f4fb;
    font-size: 20px;
    font-weight: 720;
    line-height: 1.15;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer {
    justify-content: flex-start;
    padding-top: 14px;
    border-top: 1px solid rgba(151, 176, 225, .12);
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #94a7c0;
    font-size: 12px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer > span > i {
    color: #58d9ac;
}

body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer > span.has-attention > i {
    color: #ffab73;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-quick-actions {
    margin-top: -15px;
    padding: 10px 13px;
    border-color: rgba(151, 176, 225, .13);
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(17, 31, 59, .36), rgba(5, 14, 30, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 12px 32px rgba(0, 2, 12, .13);
    -webkit-backdrop-filter: blur(20px) saturate(136%);
    backdrop-filter: blur(20px) saturate(136%);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-quick-actions > span {
    color: #8e9fba;
    font-size: 12px;
    letter-spacing: .05em;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-quick-actions > a {
    color: #b8c6da;
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention {
    padding: 23px;
    border-color: rgba(151, 176, 225, .15);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0 0, rgba(107, 67, 220, .09), transparent 22rem),
        linear-gradient(145deg, rgba(16, 29, 55, .46), rgba(5, 13, 28, .31));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 58px rgba(0, 2, 12, .2);
    -webkit-backdrop-filter: blur(26px) saturate(142%);
    backdrop-filter: blur(26px) saturate(142%);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-grid {
    gap: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-item {
    border-color: rgba(151, 176, 225, .15);
    background: linear-gradient(145deg, rgba(23, 38, 68, .38), rgba(5, 14, 29, .25));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 11px 28px rgba(0, 2, 12, .12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-section-header {
    margin-bottom: 21px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-section-kicker,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-kicker {
    font-size: 12px;
    letter-spacing: .055em;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-section-header p,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-heading p {
    color: #aab9cd;
    font-size: 14px;
    line-height: 1.6;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-portfolio {
    padding-top: 7px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-categories {
    overflow: hidden;
    gap: 0;
    border: 1px solid rgba(154, 178, 228, .16);
    border-radius: 25px;
    background:
        radial-gradient(circle at 0 0, rgba(107, 69, 224, .1), transparent 29rem),
        linear-gradient(145deg, rgba(15, 28, 54, .43), rgba(4, 12, 27, .29));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 26px 68px rgba(0, 2, 12, .22);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    backdrop-filter: blur(28px) saturate(145%);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-category {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-category + .f2h-infrastructure-category {
    border-top: 1px solid rgba(154, 178, 228, .13);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-header {
    padding: 23px 24px 20px;
    border-bottom-color: rgba(154, 178, 228, .1);
    background: linear-gradient(90deg, rgba(var(--f2h-infra-category-rgb), .055), transparent 46%);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 19px 24px 25px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-card {
    min-height: 232px;
    padding: 22px;
    border-color: rgba(151, 176, 225, .16);
    border-radius: 17px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .045), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(var(--f2h-infra-category-rgb), .14), transparent 13rem),
        linear-gradient(145deg, rgba(23, 38, 70, .4), rgba(5, 14, 29, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 -1px 0 rgba(118, 156, 224, .035), 0 16px 38px rgba(0, 2, 12, .16);
    -webkit-backdrop-filter: blur(20px) saturate(138%);
    backdrop-filter: blur(20px) saturate(138%);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-card:hover {
    border-color: rgba(var(--f2h-infra-category-rgb), .32);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-infra-category-rgb), .16), transparent 11rem),
        linear-gradient(145deg, rgba(26, 43, 79, .5), rgba(7, 18, 36, .34));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 18px 42px rgba(0, 2, 12, .2), 0 0 28px rgba(var(--f2h-infra-category-rgb), .055);
    transform: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-card:only-child {
    grid-column: 1 / -1;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-footer {
    padding: 0 24px 22px;
}

/* Keep the overview readable at a glance. Compact labels stay compact, but
   identifiers, dates and actions should never feel like dashboard footnotes. */
body.f2h-template-clientareahome #main-body .f2h-home-deck-eyebrow,
body.f2h-template-clientareahome #main-body .f2h-home-deck-signal,
body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing dt,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-header > span,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-live,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-node small,
body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer > span,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-section-kicker,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-kicker,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-eyebrow,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-proof,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-type,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-status,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-meta small,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-refresh-state {
    font-size: 12.5px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-quick-actions > a,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-item strong,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-item small,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-header > a,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-footer > a,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-identifier,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-meta b,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-manage,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-action,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy > span,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-action,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .card-body,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .list-group-item,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .card-footer,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-panel-action,
body.f2h-template-clientareahome #main-body .card-sidebar .card-footer .btn.btn-default {
    font-size: 14px;
    line-height: 1.5;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-section-header p,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-heading p,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card p {
    font-size: 15px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-name {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.38;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-identifier {
    margin-top: 8px;
    color: #a7bad4;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-meta {
    gap: 16px;
    padding-top: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-meta b {
    margin-top: 4px;
    color: #c4d0e2;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-manage {
    margin-top: 15px;
    padding-top: 13px;
    color: #acbdd4;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth {
    position: relative;
    padding-top: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-header {
    align-items: flex-end;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-proof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(91, 211, 229, .18);
    border-radius: 999px;
    color: #8fd7e5;
    background: rgba(26, 111, 137, .09);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card {
    --f2h-growth-rgb: 137, 103, 241;
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 268px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 25px;
    border: 1px solid rgba(154, 178, 228, .17);
    border-radius: 21px;
    color: #dbe5f3;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-growth-rgb), .18), transparent 16rem),
        linear-gradient(145deg, rgba(20, 35, 66, .47), rgba(5, 13, 28, .3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 54px rgba(0, 2, 12, .19);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    backdrop-filter: blur(26px) saturate(145%);
    text-decoration: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card::before {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--f2h-growth-rgb), .75), transparent);
    box-shadow: 0 0 20px rgba(var(--f2h-growth-rgb), .27);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card::after {
    position: absolute;
    z-index: -1;
    width: 160px;
    height: 160px;
    right: -92px;
    bottom: -98px;
    content: "";
    border: 1px solid rgba(var(--f2h-growth-rgb), .18);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(var(--f2h-growth-rgb), .025), 0 0 48px rgba(var(--f2h-growth-rgb), .09);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card.is-domain {
    --f2h-growth-rgb: 128, 97, 239;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card.is-hosting {
    --f2h-growth-rgb: 57, 197, 222;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card.is-vps {
    --f2h-growth-rgb: 130, 94, 242;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card.is-dedicated {
    --f2h-growth-rgb: 226, 161, 64;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card:hover,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card:focus-visible {
    border-color: rgba(var(--f2h-growth-rgb), .39);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-growth-rgb), .24), transparent 17rem),
        linear-gradient(145deg, rgba(26, 43, 78, .55), rgba(7, 17, 34, .38));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 27px 64px rgba(0, 2, 12, .24), 0 0 32px rgba(var(--f2h-growth-rgb), .07);
    transform: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-orb {
    width: 47px;
    height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border: 1px solid rgba(var(--f2h-growth-rgb), .29);
    border-radius: 15px;
    color: rgb(var(--f2h-growth-rgb));
    background: rgba(var(--f2h-growth-rgb), .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 24px rgba(var(--f2h-growth-rgb), .11);
    font-size: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: rgba(var(--f2h-growth-rgb), .95);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.35;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card h3 {
    max-width: 480px;
    margin: 0 0 11px;
    color: #f2f6fd;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.17;
    text-wrap: balance;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card p {
    max-width: 540px;
    margin: 0 0 22px;
    color: #aab9cd;
    font-size: 15px;
    line-height: 1.62;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #e0e9f7;
    font-size: 14px;
    font-weight: 700;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-action > i {
    color: rgb(var(--f2h-growth-rgb));
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-rail {
    min-width: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 17px;
    align-items: center;
    margin-top: 16px;
    padding: 20px 22px;
    border: 1px solid rgba(80, 205, 225, .17);
    border-radius: 19px;
    color: #d8e4f3;
    background:
        radial-gradient(circle at 100% 50%, rgba(31, 188, 210, .11), transparent 24rem),
        linear-gradient(100deg, rgba(18, 41, 67, .42), rgba(5, 14, 29, .29));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 46px rgba(0, 2, 12, .17);
    -webkit-backdrop-filter: blur(24px) saturate(142%);
    backdrop-filter: blur(24px) saturate(142%);
    text-decoration: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-rail:hover,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-rail:focus-visible {
    border-color: rgba(80, 205, 225, .34);
    color: #fff;
    background:
        radial-gradient(circle at 100% 50%, rgba(31, 188, 210, .16), transparent 25rem),
        linear-gradient(100deg, rgba(21, 48, 78, .5), rgba(7, 18, 35, .35));
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(77, 205, 226, .24);
    border-radius: 15px;
    color: #6fd8e8;
    background: rgba(29, 123, 149, .11);
    font-size: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy {
    min-width: 0;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy small,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy strong,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy > span {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy small {
    margin-bottom: 3px;
    color: #69cddd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy strong {
    color: #edf3fb;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy > span {
    overflow: hidden;
    margin-top: 5px;
    color: #91a4be;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b9e8ef;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-account-data {
    padding-top: 19px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels {
    gap: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel {
    border-color: rgba(154, 178, 228, .15);
    background: linear-gradient(145deg, rgba(17, 31, 58, .4), rgba(4, 12, 27, .27));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 46px rgba(0, 2, 12, .16);
    -webkit-backdrop-filter: blur(24px) saturate(138%);
    backdrop-filter: blur(24px) saturate(138%);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .card-header,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .card-footer,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .list-group-item {
    background: transparent;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel > .list-group {
    max-height: none !important;
    overflow: visible;
    border: 0 !important;
    background: transparent;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .list-group-item + .list-group-item {
    border-top-color: rgba(154, 178, 228, .1);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel .card-header .f2h-infrastructure-panel-action {
    border-color: rgba(145, 126, 244, .34) !important;
    color: #e8effb !important;
    background: linear-gradient(135deg, rgba(90, 61, 185, .32), rgba(22, 67, 105, .42)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

body.f2h-template-clientareahome #main-body .card-sidebar {
    border-color: rgba(154, 178, 228, .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0 0, rgba(104, 68, 220, .09), transparent 13rem),
        linear-gradient(145deg, rgba(17, 31, 58, .46), rgba(4, 12, 27, .33)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 52px rgba(0, 2, 12, .18);
    -webkit-backdrop-filter: blur(25px) saturate(142%);
    backdrop-filter: blur(25px) saturate(142%);
}

body.f2h-template-clientareahome #main-body .card-sidebar .card-header,
body.f2h-template-clientareahome #main-body .card-sidebar .card-footer,
body.f2h-template-clientareahome #main-body .card-sidebar .list-group-item {
    background-color: transparent;
}

body.f2h-template-clientareahome #main-body .card-sidebar .card-footer .btn.btn-default {
    min-height: 38px;
    border-color: rgba(145, 126, 244, .3) !important;
    color: #e4ecf8 !important;
    background: linear-gradient(135deg, rgba(89, 61, 182, .27), rgba(24, 68, 105, .36)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px rgba(0, 2, 12, .13) !important;
}

body.f2h-template-clientareahome #main-body .card-sidebar .card-footer .btn.btn-default:hover,
body.f2h-template-clientareahome #main-body .card-sidebar .card-footer .btn.btn-default:focus-visible {
    border-color: rgba(156, 135, 255, .48) !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(105, 72, 210, .37), rgba(30, 82, 124, .46)) !important;
}

body.f2h-template-clientareahome #main-body .card-sidebar .card-body,
body.f2h-template-clientareahome #main-body .card-sidebar .list-group-item {
    color: #b8c6da;
    font-size: 14px;
    line-height: 1.55;
}

/* Final client-home type lock. Nexus carries several highly specific compact
   dashboard rules, so keep the customer-facing overview comfortably readable. */
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-quick-actions > span,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-section-kicker,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-category-kicker,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-growth-eyebrow,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-growth-proof,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-meta small,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-refresh-state {
    font-size: 12.5px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-type {
    color: #93a7c5;
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-status {
    font-size: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-quick-actions > a,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-attention-item strong,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-attention-item small,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-category-header > a,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-category-footer > a,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-identifier,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-meta b,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-manage,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-growth-action,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-location-copy > span,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-location-action,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-body,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .list-group-item,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-footer,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-panel-action {
    font-size: 14px;
    line-height: 1.5;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-section-header p,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-category-heading p,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-growth-card p {
    font-size: 15px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-service-name {
    font-size: 17px;
    line-height: 1.38;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-title {
    font-size: 15px;
}

@media (max-width: 1199.98px) {
    body.f2h-template-clientareahome #main-body .f2h-home-deck {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr);
        gap: 34px;
        padding: 40px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage {
        gap: 64px 58px;
    }
}

@media (max-width: 991.98px) {
    body.f2h-template-clientareahome #main-body .f2h-home-deck {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation {
        min-height: 390px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage {
        gap: 72px 110px;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareahome #main-body .f2h-infrastructure {
        gap: 24px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck {
        min-height: 0;
        gap: 28px;
        padding: 28px 23px 23px;
        border-radius: 23px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
        margin-bottom: 23px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck h1 {
        font-size: clamp(36px, 10vw, 46px);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck-copy > p {
        font-size: 16px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation {
        min-height: 380px;
        padding: 18px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage {
        gap: 72px 55px;
        padding-right: 0;
        padding-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-header {
        align-items: flex-start;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card {
        min-height: 250px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-rail {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 18px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-icon {
        width: 46px;
        height: 46px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-copy > span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-action {
        grid-column: 2;
        justify-self: start;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-categories {
        border-radius: 21px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-category-header,
    body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-grid {
        padding-right: 17px;
        padding-left: 17px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-service-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    body.f2h-template-clientareahome #main-body .f2h-home-deck-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck-actions .btn {
        width: 100%;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing > div {
        align-items: flex-start;
        flex-direction: column;
        padding: 0 10px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck-briefing dt {
        font-size: 13px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation {
        min-height: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-header {
        align-items: flex-start;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-stage {
        min-height: 342px;
        gap: 82px 24px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-node {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-node > span {
        width: 32px;
        height: 32px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-node small {
        font-size: 13px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-constellation-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card {
        min-height: 0;
        padding: 22px;
    }
}

/* Client home: compact widescreen account workspace ------------------- */

body.f2h-template-clientareahome #main-body {
    overflow-x: clip;
    overflow-y: visible;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure {
    gap: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck {
    min-height: 0;
    width: 100%;
    max-width: 1600px;
    grid-template-columns: minmax(0, 1fr);
    justify-self: center;
    gap: 30px;
    padding: 30px 34px;
    border-radius: 25px;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-meta {
    margin-bottom: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck h1 {
    max-width: 760px;
    margin-bottom: 14px;
    font-size: clamp(38px, 3vw, 50px);
    line-height: 1.03;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck h1 > span {
    display: inline;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-copy > p {
    max-width: 650px;
    font-size: 16px;
    line-height: 1.58;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-actions {
    margin-top: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-home-deck-actions .btn {
    min-height: 44px;
    padding: 9px 16px;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority {
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid rgba(154, 181, 233, .2);
    border-radius: 21px;
    background:
        radial-gradient(circle at 100% 0, rgba(35, 190, 216, .11), transparent 16rem),
        linear-gradient(145deg, rgba(10, 23, 47, .4), rgba(4, 17, 32, .25));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 18px 42px rgba(0, 2, 12, .16);
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-header > div > span,
body.f2h-template-clientareahome #main-body .f2h-home-priority-item small {
    display: block;
    color: #96a8c3;
    font-size: 12.5px;
    font-weight: 720;
    letter-spacing: .055em;
    line-height: 1.35;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-header h2 {
    margin: 2px 0 0;
    color: #f0f4fc;
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.25;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(74, 219, 176, .16);
    border-radius: 999px;
    color: #9ed4c1;
    background: rgba(20, 108, 80, .1);
    font-size: 12px;
    font-weight: 700;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-live > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4eddb0;
    box-shadow: 0 0 12px rgba(78, 221, 176, .72);
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item {
    --f2h-priority-rgb: 116, 99, 232;
    min-width: 0;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    padding: 13px;
    border: 1px solid rgba(var(--f2h-priority-rgb), .2);
    border-radius: 15px;
    color: #b8c6d9;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-priority-rgb), .12), transparent 8rem),
        linear-gradient(145deg, rgba(21, 36, 66, .39), rgba(5, 14, 29, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item.is-services {
    --f2h-priority-rgb: 89, 205, 225;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item.is-billing {
    --f2h-priority-rgb: 145, 111, 239;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item.is-support {
    --f2h-priority-rgb: 74, 176, 225;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item.has-attention {
    border-color: rgba(239, 164, 83, .28);
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item:hover,
body.f2h-template-clientareahome #main-body .f2h-home-priority-item:focus-visible {
    border-color: rgba(var(--f2h-priority-rgb), .42);
    color: #eef4fc;
    transform: translateY(-2px);
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border: 1px solid rgba(var(--f2h-priority-rgb), .22);
    border-radius: 10px;
    color: rgb(var(--f2h-priority-rgb));
    background: rgba(var(--f2h-priority-rgb), .09);
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item strong {
    display: block;
    margin-top: 3px;
    color: #f2f6fd;
    font-size: 27px;
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item > span:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    color: #9fb0c8;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-item > span:last-child i {
    color: rgb(var(--f2h-priority-rgb));
    font-size: 10px;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(151, 177, 226, .11);
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-footer > :where(a, span) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #99aac1;
    font-size: 13px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-home-priority-footer > .has-attention {
    color: #f0ae76;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention {
    width: fit-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(150px, 190px) auto;
    align-items: stretch;
    justify-self: start;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-lead {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 4px 9px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-lead strong {
    margin-top: 3px;
    color: #edf3fc;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-grid {
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-item {
    width: 250px;
    flex: 0 1 250px;
    min-height: 66px;
    padding: 9px 11px;
    border-radius: 13px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-account-data {
    width: 100%;
    max-width: 1500px;
    justify-self: center;
    padding-top: 0;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-account-header {
    align-items: flex-end;
    margin-bottom: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-account-header h2 {
    font-size: clamp(24px, 2vw, 30px);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels {
    gap: 14px;
    grid-auto-flow: dense;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-billing {
    order: 1;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-services {
    order: 2;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-tickets {
    order: 3;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-secondary {
    order: 10;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth {
    padding-top: 0;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-header {
    margin-bottom: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card {
    min-height: 220px;
    padding: 20px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-orb {
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card h3 {
    margin-bottom: 8px;
    font-size: clamp(19px, 1.35vw, 23px);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-card p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-rail {
    width: min(100%, 1120px);
    margin: 12px auto 0;
    padding: 15px 18px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-operations-tool {
    width: min(100%, 1040px);
    justify-self: center;
}

@media (min-width: 1440px) {
    body.f2h-template-clientareahome #main-body > .f2h-main-body-wrap.container {
        width: min(calc(100% - 64px), 2000px);
        max-width: 2000px;
        padding-right: 0;
        padding-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-main-body-wrap > .row {
        flex-wrap: nowrap;
        gap: 24px;
        margin-right: 0;
        margin-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-sidebar-column {
        width: auto;
        max-width: 320px;
        flex: 0 0 clamp(280px, 16vw, 320px);
        padding-right: 0;
        padding-left: 0;
    }

    body.f2h-template-clientareahome #main-body .primary-content {
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 0%;
        padding-right: 0;
        padding-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck {
        grid-template-columns: minmax(0, 1fr) minmax(540px, 700px);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-priority {
        width: 100%;
        max-width: 700px;
        justify-self: end;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > :where(.f2h-infrastructure-panel-standard, .f2h-infrastructure-panel-wide) {
        grid-column: span 1;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-services {
        grid-column: span 2;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (min-width: 1600px) {
    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels {
        grid-template-columns: minmax(250px, .8fr) repeat(2, minmax(0, 1fr)) minmax(320px, 1.1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-secondary {
        grid-column: span 2;
    }
}

@media (max-width: 1199.98px) {
    body.f2h-template-clientareahome #main-body .f2h-home-deck {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 28px;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareahome #main-body .f2h-infrastructure {
        gap: 18px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck {
        padding: 23px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-deck h1 {
        font-size: clamp(34px, 9vw, 43px);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-priority-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-priority-item {
        min-height: 88px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 11px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-priority-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-priority-item small,
    body.f2h-template-clientareahome #main-body .f2h-home-priority-item strong {
        grid-column: 2;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-priority-item > span:last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
        padding-top: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        justify-self: stretch;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-grid {
        width: 100%;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-item {
        width: 100%;
        flex-basis: 100%;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-lead {
        padding: 2px 4px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-account-header {
        align-items: flex-start;
    }
}

/* Client home: one alignment system and compositor-safe typography ------ */

body.f2h-template-clientareahome {
    --f2h-home-workspace: 1600px;
    --f2h-home-utility: 1120px;
}

body.f2h-template-clientareahome #main-body {
    text-rendering: auto;
}

body.f2h-template-clientareahome #main-body .primary-content > div[style*="ffffd2"] {
    width: 100% !important;
    max-width: var(--f2h-home-workspace) !important;
    box-sizing: border-box;
    margin: 0 auto 10px !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure {
    width: 100%;
    max-width: var(--f2h-home-workspace);
    margin-inline: auto;
    gap: 24px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure :is(
    .f2h-home-deck,
    .f2h-infrastructure-account-data,
    .f2h-infrastructure-growth
) {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-location-rail {
    width: min(100%, var(--f2h-home-utility));
    margin-block-start: 12px;
    margin-inline: 0 auto;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-operations-tool {
    width: min(100%, var(--f2h-home-utility));
    justify-self: start;
}

/* The translucent gradients, fine borders and inset highlights provide the
   glass surface. Removing compositor blur keeps Windows text rasterisation
   sharp, especially at non-integer display scaling. */
body.f2h-template-clientareahome #main-body .f2h-infrastructure :is(
    .f2h-home-deck,
    .f2h-home-deck-actions .f2h-btn-secondary,
    .f2h-infrastructure-quick-actions,
    .f2h-infrastructure-attention,
    .f2h-infrastructure-categories,
    .f2h-infrastructure-service-card,
    .f2h-infrastructure-native-panel,
    .f2h-infrastructure-growth-card,
    .f2h-infrastructure-location-rail
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.f2h-template-clientareahome #main-body .f2h-sidebar-column .card-sidebar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure :is(
    .f2h-home-deck,
    .f2h-infrastructure-categories
) {
    background-color: rgba(5, 13, 29, .78) !important;
}

body.f2h-template-clientareahome #main-body .f2h-sidebar-column .card-sidebar {
    background-color: rgba(5, 13, 29, .78) !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure :is(
    .f2h-infrastructure-attention,
    .f2h-infrastructure-location-rail
) {
    background-color: rgba(5, 13, 29, .74) !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-deck h1 {
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-deck h1 > span {
    color: #b8c9ff;
    background: none;
    -webkit-text-fill-color: currentColor;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-deck-copy > p {
    color: #c5d1e1;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure :is(
    .f2h-home-deck-eyebrow,
    .f2h-home-deck-signal,
    .f2h-home-priority-header > div > span,
    .f2h-home-priority-item small,
    .f2h-infrastructure-section-kicker,
    .f2h-infrastructure-category-kicker,
    .f2h-infrastructure-growth-eyebrow,
    .f2h-infrastructure-growth-proof
) {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-priority-header h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-priority-item strong {
    font-weight: 700;
    line-height: 30px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-priority-item > span:last-child,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-priority-footer > :where(a, span) {
    color: #b7c5d8;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-priority-item:hover,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-home-priority-item:focus-visible {
    transform: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-attention-lead strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-attention-item strong {
    color: #edf2fa;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-attention-item small {
    color: #b6c3d5;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-account-header h2 {
    color: #eef3fb;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 34px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-title {
    color: #edf2fa;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .f2h-infrastructure-panel-heading {
    min-height: 58px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure :is(
    .f2h-panel-priority-billing,
    .f2h-panel-priority-services,
    .f2h-panel-priority-tickets
) .f2h-infrastructure-panel-heading {
    min-height: 67px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-panel-heading .card-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-panel-heading .f2h-infrastructure-panel-action {
    min-height: 36px;
    margin: 0;
    padding: 8px 12px;
    justify-self: end;
    border-color: rgba(137, 161, 210, .26) !important;
    border-radius: 10px;
    color: #dce6f4 !important;
    background: rgba(11, 24, 47, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-panel-heading .f2h-infrastructure-panel-action:hover,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-panel-heading .f2h-infrastructure-panel-action:focus-visible {
    border-color: rgba(117, 205, 225, .38) !important;
    color: #fff !important;
    background: rgba(25, 55, 86, .82) !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-body,
body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .list-group-item {
    color: #c4cfdf;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .card-body p {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel :where(.font-weight-bold, strong) {
    color: #e3e9f3;
    font-weight: 600 !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel :is(.text-domain, small) {
    color: #afbdd0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel :where(.btn, .f2h-infrastructure-panel-action) {
    font-weight: 600;
}

body.f2h-template-clientareahome #main-body .f2h-sidebar-column .card-sidebar :where(.card-body, .list-group-item) {
    color: #c2cede;
    font-weight: 500;
}

body.f2h-template-clientareahome #main-body .f2h-sidebar-column .card-sidebar :where(.card-header, .btn) {
    font-weight: 700;
}

@media (max-width: 575.98px) {
    body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-native-panel .f2h-infrastructure-panel-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-panel-heading .f2h-infrastructure-panel-action {
        justify-self: end;
    }
}

@media (min-width: 768px) {
    body.f2h-template-clientareahome #main-body .f2h-panel-priority-services .div-service-item {
        width: 100%;
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-services .div-service-status {
        width: auto !important;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-services .div-service-name {
        min-width: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-services .div-service-name > span {
        display: block;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-services .div-service-buttons {
        justify-self: end;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-tickets .list-group-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 4px 12px;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-tickets .list-group-item > strong {
        grid-column: 1;
        grid-row: 1;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-tickets .list-group-item > .label {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-tickets .list-group-item > br {
        display: none;
    }

    body.f2h-template-clientareahome #main-body .f2h-panel-priority-tickets .list-group-item > small {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (min-width: 1440px) {
    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-infrastructure-panel-standard {
        grid-column: span 6;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-infrastructure-panel-wide {
        grid-column: 1 / -1;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-billing,
    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-tickets {
        grid-column: span 3;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panels > .f2h-panel-priority-services {
        grid-column: span 6;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareahome #main-body .f2h-infrastructure {
        gap: 18px;
    }

    body.f2h-template-clientareahome #main-body .f2h-infrastructure .f2h-infrastructure-account-header h2 {
        font-size: 26px;
        line-height: 32px;
    }

    body.f2h-template-clientareahome #main-body :where(
        .f2h-infrastructure-location-rail,
        .f2h-infrastructure-operations-tool
    ) {
        width: 100%;
        justify-self: stretch;
        margin-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.f2h-authenticated #main-body .f2h-infrastructure-refresh-state > i::after {
        display: none;
        animation: none;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure :where(
        .f2h-infrastructure-attention-item,
        .f2h-infrastructure-service-card
    ) {
        transform: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body.f2h-authenticated #main-body .f2h-infrastructure :where(
        .f2h-infrastructure-quick-actions,
        .f2h-infrastructure-attention,
        .f2h-infrastructure-category,
        .f2h-infrastructure-native-panel
    ) {
        background-color: #091426;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    body.f2h-authenticated #main-body .f2h-infrastructure :where(
        .f2h-infrastructure-hero,
        .f2h-infrastructure-health,
        .f2h-infrastructure-quick-actions,
        .f2h-infrastructure-attention,
        .f2h-infrastructure-attention-item,
        .f2h-infrastructure-category,
        .f2h-infrastructure-service-card,
        .f2h-infrastructure-native-panel,
        .f2h-infrastructure-operations-tool
    ) {
        border: 1px solid CanvasText;
    }

    body.f2h-authenticated #main-body .f2h-infrastructure :where(
        .f2h-infrastructure-eyebrow > i,
        .f2h-infrastructure-network-link > span,
        .f2h-infrastructure-refresh-state > i,
        .f2h-infrastructure-service-status > i
    ) {
        background: currentColor;
        box-shadow: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .f2h-glass,
    .f2h-auth-panel,
    .f2h-register-hero,
    .f2h-register-card,
    body.f2h-authenticated :where(#main-body) :where(.card, .panel, .well, .jumbotron, .dataTables_wrapper, .table-container) {
        background-color: #091426;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Core WHMCS / Nexus client-area system ------------------------------- */

body.f2h-authenticated .f2h-page-banner-inner {
    min-height: 136px;
    padding-block: 24px;
}

body.f2h-authenticated .f2h-page-banner-copy {
    min-width: 0;
    max-width: 760px;
}

body.f2h-authenticated .f2h-page-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.05;
}

body.f2h-authenticated .f2h-page-context {
    max-width: 720px;
    margin: 9px 0 0;
    color: #b7c8e3;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

body.f2h-authenticated .f2h-page-banner-side {
    min-width: min(100%, 440px);
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 16px;
}

body.f2h-authenticated .f2h-page-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body.f2h-authenticated .f2h-page-banner-actions:empty {
    display: none;
}

body.f2h-authenticated .f2h-page-banner-actions > a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(120, 183, 238, .28);
    border-radius: 10px;
    color: #deebfa;
    background: rgba(7, 25, 61, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

body.f2h-authenticated .f2h-page-banner-actions > a:hover,
body.f2h-authenticated .f2h-page-banner-actions > a:focus-visible {
    border-color: rgba(82, 213, 239, .5);
    color: #fff;
    background: rgba(18, 63, 105, .72);
}

body.f2h-authenticated #main-body .primary-content {
    min-width: 0;
}

body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content > :first-child:not(.alert) {
    margin-top: 0;
}

body.f2h-authenticated #main-body .primary-content a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):not(.page-link) {
    color: #83d9ef;
}

body.f2h-authenticated #main-body .primary-content a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):not(.page-link):hover,
body.f2h-authenticated #main-body .primary-content a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):not(.page-link):focus-visible {
    color: #fff;
}

/* Inputs use an opaque dark control surface. This prevents Nexus's later
   white background from combining with the authenticated white text. */
body.f2h-authenticated #main-body .primary-content .form-control,
body.f2h-authenticated #main-body .primary-content select.form-control,
body.f2h-authenticated #main-body .primary-content .custom-select,
body.f2h-authenticated #main-body .primary-content .select2-selection,
body.f2h-authenticated #main-body .primary-content .custom-file-label {
    border-color: rgba(137, 170, 224, .3) !important;
    color: #edf3fc !important;
    background: #09162a !important;
    -webkit-text-fill-color: #edf3fc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
}

body.f2h-authenticated #main-body .primary-content .form-control::placeholder,
body.f2h-authenticated #main-body .primary-content .custom-file-label {
    color: #91a4c1 !important;
    -webkit-text-fill-color: #91a4c1;
}

body.f2h-authenticated #main-body .primary-content .form-control:focus,
body.f2h-authenticated #main-body .primary-content .custom-select:focus,
body.f2h-authenticated #main-body .primary-content .select2-container--focus .select2-selection {
    border-color: #5eb7e7 !important;
    background: #0c1c34 !important;
    box-shadow: 0 0 0 4px rgba(74, 174, 229, .13) !important;
}

body.f2h-authenticated #main-body .primary-content .form-control:disabled,
body.f2h-authenticated #main-body .primary-content .form-control[readonly],
body.f2h-authenticated #main-body .primary-content .custom-select:disabled {
    color: #aebbd0 !important;
    background: #0b1525 !important;
    -webkit-text-fill-color: #aebbd0;
    opacity: 1;
}

body.f2h-authenticated #main-body .primary-content select option {
    color: #edf3fc;
    background: #09162a;
}

body.f2h-authenticated #main-body .primary-content label,
body.f2h-authenticated #main-body .primary-content .col-form-label,
body.f2h-authenticated #main-body .primary-content .form-control-label {
    color: #aebbd0;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px;
}

body.f2h-authenticated #main-body .primary-content .input-group-text,
body.f2h-authenticated #main-body .primary-content .input-group-addon {
    border-color: rgba(137, 170, 224, .3);
    color: #aebbd0;
    background: #0d1c32;
}

body.f2h-authenticated #main-body .primary-content .list-group-item {
    border-color: rgba(126, 159, 216, .14);
    color: #bfcbdd;
    background: rgba(7, 17, 34, .7);
}

body.f2h-authenticated #main-body .primary-content a.list-group-item:hover,
body.f2h-authenticated #main-body .primary-content .list-group-item-action:hover,
body.f2h-authenticated #main-body .primary-content a.list-group-item:focus,
body.f2h-authenticated #main-body .primary-content .list-group-item-action:focus {
    color: #fff;
    background: rgba(24, 51, 89, .82);
}

body.f2h-authenticated #main-body .primary-content .list-group-item.active {
    border-color: rgba(117, 93, 244, .4);
    color: #fff;
    background: linear-gradient(90deg, rgba(105, 65, 221, .28), rgba(17, 51, 94, .28));
}

body.f2h-authenticated .dropdown-menu .dropdown-item:hover,
body.f2h-authenticated .dropdown-menu .dropdown-item:focus {
    color: #fff;
    background: rgba(40, 72, 124, .42);
}

body.f2h-authenticated #main-body .primary-content .iti {
    width: 100%;
    display: block;
}

body.f2h-authenticated #main-body .primary-content .iti input.form-control {
    width: 100% !important;
}

body.f2h-authenticated #main-body .primary-content .iti__selected-flag,
body.f2h-authenticated #main-body .primary-content .iti__country-list {
    color: #dce7f7;
    background: #0b1930;
}

body.f2h-authenticated #main-body .primary-content .iti__country:hover,
body.f2h-authenticated #main-body .primary-content .iti__country.iti__highlight {
    background: #17345b;
}

/* Stock card geometry gets a deliberate hierarchy on every inherited page. */
body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .card,
body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .panel {
    overflow: visible;
    border-color: rgba(120, 154, 211, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(10, 23, 45, .96), rgba(5, 14, 29, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 20px 56px rgba(0, 2, 12, .22);
}

body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .card:not(.view-ticket) > .card-body,
body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .panel > .panel-body {
    padding: 26px;
}

body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .card-title,
body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .panel-title {
    color: #f1f5fb;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

body.f2h-authenticated #main-body .primary-content .text-muted {
    color: #9bacC5 !important;
}

/* Shared premium list surface for invoices, domains and tickets. */
body.f2h-authenticated #main-body .f2h-core-list-page {
    display: grid;
    gap: 18px;
}

body.f2h-authenticated #main-body .f2h-core-list-panel {
    overflow: hidden;
    border: 1px solid rgba(126, 159, 216, .21);
    border-radius: 20px;
    color: #c7d2e4;
    background:
        radial-gradient(circle at 100% 0%, rgba(46, 134, 255, .07), transparent 28rem),
        linear-gradient(145deg, rgba(11, 25, 48, .97), rgba(5, 14, 29, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 64px rgba(0, 2, 12, .25);
}

body.f2h-authenticated #main-body .f2h-core-list-panel-head {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
    border-bottom: 1px solid rgba(126, 159, 216, .15);
    background: linear-gradient(100deg, rgba(102, 60, 219, .14), rgba(4, 18, 36, .4) 56%, rgba(46, 134, 255, .07));
}

body.f2h-authenticated #main-body .f2h-core-list-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: #8c7cf0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 16px;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .f2h-core-list-panel-head h2 {
    margin: 0;
    color: #f2f5fb;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 32px;
}

body.f2h-authenticated #main-body .f2h-core-list-panel-head p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #aab8ce;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

body.f2h-authenticated #main-body .f2h-core-list-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

body.f2h-authenticated #main-body .f2h-core-record-count {
    min-width: 92px;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(107, 184, 221, .2);
    border-radius: 13px;
    color: #9eb0ca;
    background: rgba(5, 18, 36, .58);
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
}

body.f2h-authenticated #main-body .f2h-core-record-count strong {
    color: #f4f7fc;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
}

body.f2h-authenticated #main-body .f2h-core-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(126, 159, 216, .14);
    background: rgba(5, 16, 32, .48);
}

body.f2h-authenticated #main-body .f2h-core-list-actions .btn-group {
    display: inline-flex;
}

/* DataTables: one surface, never a white wrapper inside another card. */
body.f2h-authenticated #main-body .primary-content .table-container,
body.f2h-authenticated #main-body .primary-content .dataTables_wrapper {
    color: #c5d0e1;
    border-color: rgba(126, 159, 216, .18);
    background: #071224;
}

body.f2h-authenticated #main-body .primary-content .table-container > .dataTables_wrapper,
body.f2h-authenticated #main-body .f2h-core-list-panel .table-container,
body.f2h-authenticated #main-body .f2h-core-list-panel .dataTables_wrapper {
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .listtable {
    overflow: hidden;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_info {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: #93a5c0;
    font-size: 13px;
    font-weight: 500;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_filter {
    width: min(320px, calc(100% - 36px));
    padding: 10px 0;
    margin-right: 18px;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_filter label {
    width: 100%;
    margin: 0;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_filter label .form-control {
    width: 100% !important;
    min-height: 38px;
    border-color: rgba(125, 162, 220, .25) !important;
    color: #edf3fc !important;
    background-color: #0a192e !important;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper table.table-list {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    color: #c5d0e1;
    background: transparent !important;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper table.table-list > thead > tr > th {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid rgba(126, 159, 216, .13);
    border-bottom: 1px solid rgba(126, 159, 216, .17);
    color: #8192ad;
    background: #09172b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 16px;
    text-transform: uppercase;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper table.table-list > tbody > tr > td {
    padding: 16px;
    border: 0;
    border-bottom: 1px solid rgba(126, 159, 216, .12);
    color: #c8d3e4;
    background: rgba(7, 17, 34, .76);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    vertical-align: middle;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper table.table-list > tbody > tr:last-child > td {
    border-bottom: 0;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper table.table-list > tbody > tr:hover > td {
    color: #eef4fd;
    background: rgba(18, 42, 75, .82);
}

body.f2h-authenticated #main-body .primary-content #tableInvoicesList th:first-child,
body.f2h-authenticated #main-body .primary-content #tableInvoicesList td:first-child,
body.f2h-authenticated #main-body .primary-content #tableTicketsList th:nth-child(-n+2),
body.f2h-authenticated #main-body .primary-content #tableTicketsList td:nth-child(-n+2),
body.f2h-authenticated #main-body .primary-content #tableDomainsList th:nth-child(3),
body.f2h-authenticated #main-body .primary-content #tableDomainsList td:nth-child(3) {
    text-align: left;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_length {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid rgba(126, 159, 216, .13);
    color: #93a5c0;
    font-size: 13px;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_length select {
    width: auto;
    min-width: 66px;
    color: #eaf1fb;
    border-color: rgba(126, 159, 216, .26);
    background: #0b1a30;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_paginate {
    padding: 12px 15px;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .pagination {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    border-color: rgba(126, 159, 216, .22);
    color: #adbad0;
    background: #0a182c;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .pagination .active .page-link {
    border-color: #267af1;
    color: #fff;
    background: #1768dc;
}

body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .pagination .disabled .page-link {
    color: #64738c;
    background: #081322;
    opacity: .75;
}

body.f2h-authenticated #main-body .primary-content table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: rgba(126, 159, 216, .12);
}

body.f2h-authenticated #main-body .f2h-core-record-primary,
body.f2h-authenticated #main-body .f2h-core-ticket-subject {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #e8eef8 !important;
}

body.f2h-authenticated #main-body .f2h-core-record-primary > span:last-child {
    display: grid;
    gap: 2px;
}

body.f2h-authenticated #main-body .f2h-core-record-primary strong,
body.f2h-authenticated #main-body .f2h-core-ticket-subject strong,
body.f2h-authenticated #main-body .f2h-core-domain-name {
    color: #edf3fb !important;
    font-size: 14px;
    font-weight: 700;
}

body.f2h-authenticated #main-body .f2h-core-record-primary small,
body.f2h-authenticated #main-body .f2h-core-ticket-subject .ticket-number,
body.f2h-authenticated #main-body .f2h-core-domain-renewal {
    color: #8fa1bc;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
}

body.f2h-authenticated #main-body .f2h-core-record-icon {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    overflow: hidden;
    border: 1px solid rgba(125, 105, 233, .25);
    border-radius: 10px;
    color: #9b86f4;
    background: rgba(91, 61, 179, .14);
}

body.f2h-authenticated #main-body .f2h-core-record-icon img {
    max-width: 24px;
    height: auto;
}

body.f2h-authenticated #main-body .f2h-core-amount {
    color: #f0f4fa;
    font-weight: 700;
}

body.f2h-authenticated #main-body .f2h-core-row-arrow {
    margin-left: 9px;
    color: #4dbbd8;
    font-size: 11px;
}

body.f2h-authenticated #main-body .f2h-core-ticket-subject {
    display: grid;
    gap: 2px;
    border-left: 0 !important;
}

body.f2h-authenticated #main-body .f2h-core-department {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.f2h-authenticated #main-body .f2h-core-department > i {
    color: #8c7cf0;
}

body.f2h-authenticated #main-body .f2h-core-domain-name,
body.f2h-authenticated #main-body .f2h-core-domain-renewal {
    display: block;
}

body.f2h-authenticated #main-body .f2h-core-domain-renewal {
    margin-top: 3px;
}

body.f2h-authenticated #main-body .f2h-core-domain-renewal .fa-check {
    color: #4cddb2;
}

body.f2h-authenticated #main-body .f2h-core-domain-renewal .fa-times {
    color: #f099a9;
}

/* Plain Nexus tables used by account, security and module screens. */
body.f2h-authenticated #main-body .primary-content table.table > thead > tr > th {
    padding: 12px 14px;
    border-color: rgba(126, 159, 216, .17);
    color: #8597b2;
    background: #09172b;
}

body.f2h-authenticated #main-body .primary-content table.table > tbody > tr > td,
body.f2h-authenticated #main-body .primary-content table.table > tbody > tr > th {
    padding: 14px;
    border-color: rgba(126, 159, 216, .13);
    color: #c7d2e3;
    background: rgba(7, 17, 34, .62);
}

body.f2h-authenticated #main-body .primary-content table.table-striped > tbody > tr:nth-of-type(odd) > td,
body.f2h-authenticated #main-body .primary-content table.table-striped > tbody > tr:nth-of-type(odd) > th {
    background: rgba(13, 28, 52, .72);
}

/* Full Nexus status vocabulary. */
body.f2h-authenticated #main-body .primary-content :is(.status-active, .status-open, .status-completed, .status-paid, .status-accepted) {
    color: #78e3c1 !important;
    background: rgba(20, 151, 111, .18) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.status-pending, .status-pending-transfer, .status-customer-reply, .status-pending-registration, .status-redemption, .status-grace, .status-inprogress, .status-refunded) {
    color: #f6cb78 !important;
    background: rgba(193, 130, 28, .18) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.status-answered, .status-onhold, .status-payment-pending) {
    color: #afa0ff !important;
    background: rgba(112, 73, 220, .2) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.status-suspended, .status-fraud, .status-unpaid, .status-collections, .status-lost, .status-dead) {
    color: #ff9eb0 !important;
    background: rgba(190, 56, 82, .2) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.status-expired, .status-transferred-away, .status-terminated, .status-closed, .status-cancelled, .status-delivered) {
    color: #aebbd0 !important;
    background: rgba(109, 125, 151, .2) !important;
}

/* Tabs and module containers must remain dark, including Nexus's !important
   responsive-tab rules. */
body.f2h-authenticated #main-body .primary-content .nav-tabs {
    border-bottom-color: rgba(126, 159, 216, .18);
}

body.f2h-authenticated #main-body .primary-content .nav-tabs .nav-link {
    border-color: transparent;
    color: #94a6c1;
    background: transparent;
}

body.f2h-authenticated #main-body .primary-content .nav-tabs .nav-link:hover {
    color: #e7eef9;
    background: rgba(19, 43, 78, .56);
}

body.f2h-authenticated #main-body .primary-content .nav-tabs .nav-link.active,
body.f2h-authenticated #main-body .primary-content .nav-tabs .nav-item.show .nav-link {
    border-color: rgba(111, 90, 235, .35);
    color: #fff;
    background: rgba(73, 48, 157, .22);
}

body.f2h-authenticated #main-body .primary-content .product-details-tab-container,
body.f2h-authenticated #main-body .primary-content .tab-content.bg-white {
    --text: #e7eef8;
    --text-muted: #91a2bd;
    border: 1px solid rgba(126, 159, 216, .18);
    color: #c8d3e4;
    background: #081427 !important;
    color-scheme: dark;
}

body.f2h-authenticated #main-body .primary-content .product-details-tab-container > .tab-pane {
    padding: 26px;
}

/* Product details: transform the stock summary into a service control card
   without making assumptions about third-party module output. */
body.f2h-template-clientareaproductdetails #main-body .primary-content #tabOverview > .card:first-of-type > .card-body {
    padding: 26px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-details > .row {
    align-items: stretch;
    margin-inline: -8px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-details > .row > [class*="col-"] {
    padding-inline: 8px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status {
    height: auto;
    overflow: hidden;
    border: 1px solid rgba(125, 159, 217, .2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(16, 33, 60, .96), rgba(9, 20, 38, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status .product-icon {
    min-height: 218px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 28px 22px;
    background:
        radial-gradient(circle at 50% 18%, rgba(138, 99, 255, .24), transparent 13rem),
        linear-gradient(112deg, rgba(36, 29, 75, .9) 0%, rgba(17, 26, 53, .94) 43%, rgba(7, 20, 38, .97) 100%);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status .fa-circle {
    color: rgba(138, 99, 255, .34);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status .fa-inverse {
    color: #e7edfb;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status h3 {
    margin: 6px 0 0;
    color: #f2f5fb;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status h4 {
    margin: 0;
    color: #aab8cd;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid rgba(138, 99, 255, .34);
    border-radius: 999px;
    color: #e7e3ff;
    background: rgba(102, 76, 201, .22);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status-active .product-status-text i {
    color: #8a63ff;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-status.is-dedicated .product-icon {
    min-height: 0;
    gap: 10px;
    padding: 26px 22px 16px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-art {
    display: grid;
    place-items: center;
    width: min(176px, 72%);
    margin-inline: auto;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(138, 99, 255, .24);
    background:
        linear-gradient(90deg, rgba(84, 59, 177, .24), rgba(49, 65, 131, .16));
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 320px);
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(235, 94, 121, .28);
    border-radius: 9px;
    color: #ffb4c1;
    background: rgba(147, 31, 57, .14);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-cancel:hover,
body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-cancel:focus-visible {
    color: #fff;
    background: rgba(173, 39, 69, .34);
    text-decoration: none;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-hero-cancel.is-disabled {
    pointer-events: none;
    opacity: .55;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-actions-wrapper {
    margin-top: 12px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-actions-wrapper > [class*="col-"] {
    display: flex;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-actions-wrapper .btn {
    width: 100%;
    min-height: 42px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-actions-wrapper .btn-success {
    border-color: rgba(138, 99, 255, .56);
    color: #fff;
    background: linear-gradient(135deg, #755ee5 0%, #6650d2 56%, #5741bd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 11px 24px rgba(77, 55, 178, .22);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-actions-wrapper .btn-success:not(:disabled):not(.disabled):hover,
body.f2h-template-clientareaproductdetails #main-body .primary-content .product-actions-wrapper .btn-success:not(:disabled):not(.disabled):focus {
    border-color: rgba(164, 137, 255, .74);
    color: #fff;
    background: linear-gradient(135deg, #826cf2 0%, #715be0 56%, #634dcd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 15px 31px rgba(77, 55, 178, .28);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content :where(.progress-bar-success, .progress-bar.bg-success) {
    background: linear-gradient(90deg, #755ee5, #4b87ff) !important;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-details > .row > .col-md-6.text-center {
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    border: 1px solid rgba(125, 159, 217, .18);
    border-radius: 16px;
    color: #eef3fb;
    background: rgba(5, 17, 33, .55);
    text-align: right !important;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 3px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(126, 159, 216, .16);
    text-align: left;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(126, 105, 241, .38);
    border-radius: 11px;
    color: #d9d2ff;
    background: linear-gradient(145deg, rgba(105, 76, 209, .36), rgba(39, 104, 181, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 9px 22px rgba(3, 7, 25, .2);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-heading small {
    color: #7990b2;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-heading strong {
    color: #edf3fc;
    font-size: 15px;
    font-weight: 720;
    line-height: 1.4;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-content: start;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-grid h4 {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 13px 18px 13px 0;
    border-bottom: 1px solid rgba(126, 159, 216, .12);
    color: #91a3bd;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .product-details .f2h-service-billing-value {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 13px 0 13px 18px;
    border-bottom: 1px solid rgba(126, 159, 216, .12);
    color: #eef3fb;
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    text-align: right;
    overflow-wrap: anywhere;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-grid > :nth-last-child(-n + 2) {
    border-bottom: 0;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(126, 159, 216, .14);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-action {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid rgba(104, 143, 221, .34);
    border-radius: 10px;
    color: #dce9fc;
    background: linear-gradient(135deg, rgba(20, 67, 121, .48), rgba(16, 40, 79, .64));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 9px 20px rgba(0, 3, 16, .16);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-action--upgrade {
    border-color: rgba(139, 111, 248, .48);
    color: #f0ecff;
    background: linear-gradient(135deg, rgba(107, 75, 214, .62), rgba(55, 72, 157, .62));
}

body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-action:hover,
body.f2h-template-clientareaproductdetails #main-body .primary-content .f2h-service-billing-action:focus-visible {
    border-color: rgba(144, 172, 235, .58);
    color: #fff;
    background: linear-gradient(135deg, rgba(31, 91, 161, .67), rgba(67, 51, 152, .66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 25px rgba(0, 3, 18, .24);
    text-decoration: none;
    transform: translateY(-1px);
}

body.f2h-template-clientareaproductdetails #main-body .primary-content #tabOverview > div:not(.card):not(.alert):not(.nav-tabs):not(.responsive-tabs-sm-connector):not(.tab-content) {
    max-width: 100%;
}

/* Ticket reading stays intentionally light, but is a controlled document
   surface with dark text and links rather than an accidental white island. */
body.f2h-template-viewticket #main-body .primary-content .ticket-reply {
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 14px;
    color: #263451;
    background: #f9fbfe;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
    color-scheme: light;
}

body.f2h-template-viewticket #main-body .primary-content .ticket-reply .posted-by {
    padding: 13px 16px;
    border-bottom: 1px solid #dce5f1;
    color: #52617d;
    background: #f0f4fa;
}

body.f2h-template-viewticket #main-body .primary-content .ticket-reply .message {
    color: #263451;
    font-size: 15px;
    line-height: 1.65;
}

body.f2h-template-viewticket #main-body .primary-content .ticket-reply a {
    color: #1557bd !important;
}

body.f2h-template-viewticket #main-body .primary-content .ticket-reply.markdown-content table,
body.f2h-template-viewticket #main-body .primary-content .ticket-reply.markdown-content th,
body.f2h-template-viewticket #main-body .primary-content .ticket-reply.markdown-content td {
    color: #263451;
    border-color: #dce5f1;
    background: #fff;
}

body.f2h-template-viewticket #main-body .primary-content .view-ticket > .card-body {
    border-bottom-color: rgba(126, 159, 216, .17);
}

body.f2h-authenticated #main-body .primary-content .btn.btn-success.open-modal.twofa-config-link.enable {
    border-color: #159f74;
    color: #fff;
    background: linear-gradient(135deg, #087a5a, #075f49);
}

body.f2h-authenticated .twofa-setup :is(.activation-msg, .backup-code, .twofa-module) {
    border-color: rgba(126, 159, 216, .2);
    color: #c7d2e4;
    background: #09172b;
}

/* Unknown server modules keep their own layout and visual language. The shell
   only supplies safe width containment; modules remain free to own dropdowns,
   drawers, tables and modal layers. */
body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output) {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    color-scheme: normal;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output):empty {
    display: none !important;
}

@media (max-width: 991.98px) {
    body.f2h-authenticated .f2h-page-banner-inner {
        align-items: flex-start;
    }

    body.f2h-authenticated .f2h-page-banner-side {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    body.f2h-authenticated .f2h-page-banner-inner {
        min-height: 0;
        display: grid;
        gap: 16px;
        padding-block: 22px;
    }

    body.f2h-authenticated .f2h-page-banner-side {
        width: 100%;
        justify-items: start;
        gap: 12px;
    }

    body.f2h-authenticated .f2h-page-banner .breadcrumb,
    body.f2h-authenticated .f2h-page-banner-actions {
        justify-content: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-core-list-panel-head {
        min-height: 0;
        align-items: flex-start;
        padding: 20px;
    }

    body.f2h-authenticated #main-body .f2h-core-list-head-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .card > .card-body,
    body.f2h-authenticated:not(.f2h-template-clientareahome):not(.f2h-template-clientareaproducts) #main-body .primary-content .panel > .panel-body {
        padding: 20px;
    }

    body.f2h-authenticated #main-body .primary-content .responsive-tabs-sm .nav-item a.active {
        border-color: rgba(111, 90, 235, .35) !important;
        color: #fff !important;
        background: rgba(73, 48, 157, .22) !important;
    }

    body.f2h-authenticated #main-body .primary-content .responsive-tabs-sm-connector .channel,
    body.f2h-authenticated #main-body .primary-content .responsive-tabs-sm-connector .bottom-border {
        border-color: rgba(126, 159, 216, .18) !important;
        background: #081427 !important;
    }

    body.f2h-template-clientareaproductdetails #main-body .primary-content .product-details > .row > .col-md-6.text-center {
        margin-top: 14px;
    }
}

@media (max-width: 600px) {
    body.f2h-authenticated #main-body .f2h-core-list-panel-head {
        display: grid;
        gap: 16px;
    }

    body.f2h-authenticated #main-body .f2h-core-list-head-actions {
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-core-record-count {
        min-width: 78px;
    }

    body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_info,
    body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_filter,
    body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_length,
    body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_paginate {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_filter {
        padding: 0 14px 14px;
    }

    body.f2h-authenticated #main-body .primary-content .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: flex-start;
    }

    body.f2h-authenticated #main-body .f2h-core-list-actions,
    body.f2h-authenticated #main-body .f2h-core-list-actions .btn-group {
        width: 100%;
    }

    body.f2h-authenticated #main-body .f2h-core-list-actions .btn,
    body.f2h-authenticated #main-body .f2h-core-list-actions .btn-group > .btn {
        flex: 1 1 150px;
    }
}

/* Portal refinement pass: management screens, support and documents -------- */

body.f2h-template-user-security .twofa-config-link.w-hidden {
    display: none !important;
}

/* Keep framework cards compatible with popovers and module menus. Clipping is
   opt-in only for First2Host-owned surfaces and bounded reading panels. */
body.f2h-authenticated #main-body .primary-content :is(.f2h-core-list-panel, .product-status, .ticket-reply, .card.view-ticket) {
    overflow: hidden;
}

body.f2h-authenticated #main-body .primary-content :is(.form-check label, .custom-control-label) {
    color: #c3cfe0;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

body.f2h-authenticated #main-body .primary-content .custom-file {
    min-height: 44px;
}

body.f2h-authenticated #main-body .primary-content .custom-file-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 10px;
}

body.f2h-authenticated #main-body .primary-content .custom-file-label::after {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    border-left-color: rgba(137, 170, 224, .28);
    color: #d7e2f2;
    background: #112541;
}

body.f2h-authenticated #main-body .primary-content .status-custom {
    color: #a9bcda !important;
    background: rgba(70, 93, 130, .22) !important;
}

/* Service control: keep stock module hooks and actions intact, but give the
   fallback WHMCS summary a stable, compact control-panel hierarchy. */
body.f2h-template-clientareaproductdetails #main-body .product-details > .row > .col-md-6:first-child {
    display: flex;
    flex-direction: column;
}

body.f2h-template-clientareaproductdetails #main-body .product-status {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 0 !important;
}

body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper {
    flex: 0 0 auto;
    margin: 12px -8px 0;
}

body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper > [class*="col-"] {
    justify-content: flex-start;
    padding-inline: 8px;
}

body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper .btn {
    width: auto !important;
    min-width: 190px;
}

body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper .btn-danger {
    border-color: rgba(235, 94, 121, .42);
    color: #ffb4c1;
    background: rgba(147, 31, 57, .14);
    box-shadow: none;
}

body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper .btn-danger:hover,
body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper .btn-danger:focus-visible {
    border-color: rgba(255, 119, 144, .72);
    color: #fff;
    background: rgba(173, 39, 69, .34);
}

body.f2h-template-clientareaproductdetails #main-body .product-status-pending .product-status-text {
    border-color: rgba(228, 169, 70, .34);
    color: #f6cb78;
    background: rgba(193, 130, 28, .18);
}

body.f2h-template-clientareaproductdetails #main-body :is(.product-status-suspended, .product-status-fraud) .product-status-text {
    border-color: rgba(235, 94, 121, .34);
    color: #ff9eb0;
    background: rgba(190, 56, 82, .2);
}

body.f2h-template-clientareaproductdetails #main-body :is(.product-status-cancelled, .product-status-terminated, .product-status-expired) .product-status-text {
    border-color: rgba(139, 157, 188, .3);
    color: #aebbd0;
    background: rgba(109, 125, 151, .2);
}

/* Domain control: turn the inherited rows into a deliberate facts grid while
   preserving every WHMCS tab, registrar hook and exact form control. */
body.f2h-template-clientareadomaindetails #main-body #tabOverview > .card > .card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(46, 134, 255, .07), transparent 30rem),
        linear-gradient(145deg, rgba(10, 24, 47, .97), rgba(5, 14, 29, .95));
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview > .card > .card-body > :is(h3, .alert, .moduleoutput, ul, br),
body.f2h-template-clientareadomaindetails #main-body #tabOverview > .card > .card-body > div:not(.row) {
    grid-column: 1 / -1;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview > .card > .card-body > br {
    display: none;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > .row.mb-3 {
    display: contents;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .row.mb-3 > [class*="col-"] {
    width: 100%;
    max-width: none;
    flex: none;
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 15px 17px;
    border: 1px solid rgba(126, 159, 216, .17);
    border-radius: 14px;
    color: #e5edf8;
    background: rgba(5, 17, 34, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .row.mb-3 > [class*="col-"]:hover {
    border-color: rgba(91, 183, 230, .3);
    background: rgba(10, 29, 54, .78);
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body h5 {
    margin: 0;
    color: #8195b2;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .075em;
    line-height: 15px;
    text-transform: uppercase;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body h5 + :is(a, span) {
    color: #f0f5fc;
    font-size: 15px;
    font-weight: 650;
    line-height: 21px;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .row.mb-3:first-of-type > .col-lg-6:first-child {
    border-color: rgba(83, 210, 232, .24);
    background: linear-gradient(135deg, rgba(12, 54, 79, .72), rgba(7, 25, 45, .72));
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .ssl-inactive {
    border-color: rgba(236, 170, 76, .28) !important;
    background: rgba(99, 60, 17, .13) !important;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > h3.card-title {
    margin: 2px 0 4px;
    color: #f2f6fc;
    font-size: 19px;
    line-height: 26px;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > h3.card-title:not(:first-child) {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(126, 159, 216, .14);
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul > li > a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(126, 159, 216, .2);
    border-radius: 12px;
    color: #dfeafa !important;
    background: rgba(10, 27, 50, .72);
    font-size: 13px;
    font-weight: 700;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul > li > a::after {
    content: "\2192";
    color: #55c8df;
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul > li > a:hover,
body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul > li > a:focus-visible {
    border-color: rgba(83, 200, 223, .45);
    background: rgba(15, 48, 80, .82);
}

body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul > li:only-child {
    grid-column: 1 / -1;
}

/* Support routing is its own workflow, not a list of blue text links. */
.f2h-support-flow {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    border: 1px solid rgba(126, 159, 216, .2);
    border-radius: 20px;
    color: #c8d3e4;
    background:
        radial-gradient(circle at 100% 0%, rgba(46, 134, 255, .075), transparent 28rem),
        linear-gradient(145deg, rgba(10, 24, 47, .97), rgba(5, 14, 29, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 22px 58px rgba(0, 2, 12, .23);
}

.f2h-support-progress {
    min-height: 54px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(126, 159, 216, .14);
    color: #788aa5;
    background: rgba(5, 16, 32, .48);
}

.f2h-support-progress-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.f2h-support-progress-step:not(:last-child)::after {
    content: "";
    height: 1px;
    position: absolute;
    right: 14px;
    left: 118px;
    background: rgba(126, 159, 216, .17);
}

.f2h-support-progress-step strong {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(126, 159, 216, .22);
    border-radius: 999px;
    color: #8fa2be;
    background: #0b1a30;
}

.f2h-support-progress-step.is-active {
    color: #dfeafa;
}

.f2h-support-progress-step.is-active strong {
    border-color: rgba(76, 195, 226, .55);
    color: #fff;
    background: linear-gradient(135deg, #176dd7, #1593ad);
    box-shadow: 0 0 0 4px rgba(41, 142, 208, .1);
}

.f2h-support-progress-step.is-complete {
    color: #72dbbb;
}

.f2h-support-progress-step.is-complete strong {
    border-color: rgba(70, 213, 169, .38);
    color: #76e4c0;
    background: rgba(18, 145, 105, .2);
}

.f2h-support-route-head {
    padding: 25px 26px 18px;
}

.f2h-support-route-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8d7df0;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .085em;
    line-height: 15px;
    text-transform: uppercase;
}

.f2h-support-route-head h2,
.f2h-support-success h2 {
    margin: 7px 0 0;
    color: #f3f6fc;
    font-size: clamp(24px, 3vw, 31px);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.f2h-support-route-head p,
.f2h-support-success > p {
    max-width: 760px;
    margin: 8px 0 0;
    color: #9eafc7;
    font-size: 14px;
    line-height: 21px;
}

.f2h-support-department-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 26px 26px;
}

.f2h-support-department-card {
    min-height: 94px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 1px solid rgba(126, 159, 216, .18);
    border-radius: 15px;
    color: #e7eef9 !important;
    background: rgba(7, 20, 39, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.f2h-support-department-card:hover,
.f2h-support-department-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(78, 196, 224, .46);
    color: #fff !important;
    background: rgba(12, 39, 68, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 30px rgba(0, 4, 18, .18);
}

.f2h-support-department-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(87, 94, 221, .27);
    border-radius: 12px;
    color: #9d8df4;
    background: rgba(91, 61, 179, .16);
    font-size: 17px;
}

.f2h-support-department-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.f2h-support-department-copy strong {
    color: inherit;
    font-size: 15px;
    line-height: 21px;
}

.f2h-support-department-copy small {
    color: #91a3bd;
    font-size: 12px;
    line-height: 18px;
}

.f2h-support-department-arrow {
    color: #51bfd9;
    font-size: 11px;
}

.f2h-support-route-empty {
    grid-column: 1 / -1;
}

.f2h-support-success {
    display: grid;
    justify-items: center;
    padding: 46px 28px;
    text-align: center;
}

.f2h-support-success .f2h-support-progress {
    width: calc(100% + 56px);
    margin: -46px -28px 38px;
}

.f2h-support-success-mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(70, 213, 169, .4);
    border-radius: 18px;
    color: #7ce7c4;
    background: linear-gradient(145deg, rgba(22, 146, 107, .24), rgba(8, 58, 47, .18));
    box-shadow: 0 14px 32px rgba(5, 80, 61, .16);
    font-size: 25px;
}

.f2h-support-ticket-number {
    min-width: min(100%, 290px);
    display: grid;
    gap: 3px;
    margin-top: 24px;
    padding: 15px 22px;
    border: 1px solid rgba(78, 196, 224, .3);
    border-radius: 14px;
    color: #eaf5ff !important;
    background: rgba(8, 36, 62, .78);
}

.f2h-support-ticket-number span {
    color: #8fa3bf;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.f2h-support-ticket-number strong {
    font-size: 23px;
    line-height: 28px;
}

.f2h-support-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}

/* Ticket composer and thread: no accidental white Bootstrap toolbar, no giant
   editor void, and attachments align with the rest of the control system. */
body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor {
    overflow: hidden;
    border: 1px solid rgba(126, 157, 210, .27) !important;
    border-radius: 13px;
    background: #071326 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor > .md-header,
body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor > .md-footer {
    border-color: rgba(126, 157, 210, .2) !important;
    color: #92a5c0 !important;
    background: #0a192e !important;
}

body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor > .md-header .btn {
    border-color: rgba(131, 161, 210, .22) !important;
    color: #b8c7da !important;
    background: #13243d !important;
    box-shadow: none !important;
}

body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor > .md-header .btn:hover,
body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor > .md-header .btn:focus-visible {
    color: #fff !important;
    background: #1d3c65 !important;
}

body:is(.f2h-template-supportticketsubmit-steptwo, .f2h-template-viewticket) #main-body .primary-content .md-editor textarea.md-input {
    min-height: 220px !important;
    color: #edf3fc !important;
    background: #071426 !important;
}

body.f2h-template-viewticket #main-body .primary-content .view-ticket > .card-body {
    padding: 0;
}

body.f2h-template-viewticket #main-body .primary-content .view-ticket > .card-body > .ticket-reply {
    margin: 24px;
}

/* Standalone invoices remain bright, printable documents, but they now read as
   a deliberate First2Host artefact instead of stock framework output. */
body.f2h-document {
    min-height: 100vh;
    padding: 24px 16px;
    color: #263451;
    background:
        radial-gradient(circle at 20% 0%, rgba(48, 121, 226, .09), transparent 34rem),
        #edf2f9;
    color-scheme: light;
}

body > .invoice-container {
    width: min(960px, 100%);
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px);
    border: 1px solid #d6dfec;
    border-radius: 16px;
    color: #263451;
    background: #fff;
    box-shadow: 0 24px 70px rgba(28, 46, 79, .13);
    color-scheme: light;
}

body > .invoice-container .invoice-header .invoice-col:first-child > p:first-child {
    width: fit-content;
    min-width: 190px;
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #07133c, #09265d);
}

body > .invoice-container .invoice-header img {
    width: auto;
    max-width: 190px;
    max-height: 44px;
    object-fit: contain;
}

body > .invoice-container .invoice-header h3 {
    color: #13213c;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -.025em;
}

body > .invoice-container .invoice-status {
    font-weight: 800;
    letter-spacing: .05em;
}

body > .invoice-container :is(.card, .panel) {
    overflow: hidden;
    border-color: #d9e2ef;
    border-radius: 12px;
    box-shadow: none;
}

body > .invoice-container :is(.card-header, .panel-heading, .card-title.bg-info) {
    border-color: #d9e2ef;
    color: #fff !important;
    background: linear-gradient(100deg, #132a57, #0c6684) !important;
}

body > .invoice-container .table {
    margin-bottom: 0;
    color: #263451;
}

body > .invoice-container .table :is(th, td) {
    border-color: #e0e7f0;
    color: #263451;
}

body > .invoice-container .table thead :is(th, td),
body > .invoice-container .table .total-row {
    background: #f3f6fa;
}

body > .invoice-container .btn {
    border-radius: 8px;
}

body#popup-backdrop {
    color: #263451;
    background: #edf2f9;
    color-scheme: light;
}

body#popup-backdrop > .card {
    overflow: hidden;
    border: 1px solid #d6dfec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(28, 46, 79, .15);
}

body#popup-backdrop > .card > .card-header {
    color: #fff;
    background: linear-gradient(100deg, #132a57, #0c6684);
}

body#popup-backdrop iframe {
    display: block;
    border: 1px solid #d6dfec;
    background: #fff;
    color-scheme: light;
}

body.f2h-template-clientareaemails #tableEmailsList th:nth-child(2),
body.f2h-template-clientareaemails #tableEmailsList td:nth-child(2) {
    text-align: left;
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareadomaindetails #main-body #tabOverview > .card > .card-body,
    body.f2h-template-clientareadomaindetails #main-body #tabOverview .card-body > ul {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareaproductdetails #main-body .product-details > .row > .col-md-6:first-child {
        margin-bottom: 14px;
    }

    body.f2h-template-clientareaproductdetails #main-body .product-actions-wrapper .btn {
        width: 100%;
    }

    body.f2h-document {
        padding: 0;
    }

    body > .invoice-container {
        border-inline: 0;
        border-radius: 0;
        padding: 24px 18px;
    }

    .f2h-support-progress {
        padding-inline: 14px;
    }

    .f2h-support-progress-step {
        justify-content: center;
        font-size: 0;
    }

    .f2h-support-progress-step:not(:last-child)::after {
        right: 0;
        left: calc(50% + 20px);
    }

    .f2h-support-department-grid {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 18px;
    }

    .f2h-support-route-head {
        padding-inline: 18px;
    }

    .f2h-support-success-actions,
    .f2h-support-success-actions .btn {
        width: 100%;
    }
}

/* Wide authenticated workspace ------------------------------------------- */

@media (min-width: 1200px) {
    body.f2h-shopping-cart #order-standard_cart > .row {
        flex-wrap: nowrap;
        gap: 24px;
        margin-right: 0;
        margin-left: 0;
    }

    body.f2h-shopping-cart #order-standard_cart .cart-sidebar {
        width: auto;
        max-width: 320px;
        flex: 0 0 clamp(280px, 16vw, 320px);
        padding-right: 0;
        padding-left: 0;
    }

    body.f2h-shopping-cart #order-standard_cart .cart-body {
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 0%;
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 1440px) {
    body:is(.f2h-authenticated, .f2h-shopping-cart, .f2h-public-dark) #main-body > .f2h-main-body-wrap.container,
    body:is(.f2h-authenticated, .f2h-public-dark) .f2h-page-banner-inner {
        width: min(calc(100% - 64px), 2000px);
        max-width: 2000px;
        padding-right: 0;
        padding-left: 0;
    }

    body:is(.f2h-authenticated, .f2h-shopping-cart, .f2h-public-dark) #main-body .f2h-main-body-wrap > .row {
        flex-wrap: nowrap;
        gap: 24px;
        margin-right: 0;
        margin-left: 0;
    }

    body:is(.f2h-authenticated, .f2h-public-dark):not(.f2h-shopping-cart) #main-body .f2h-sidebar-column {
        width: auto;
        max-width: 320px;
        flex: 0 0 clamp(280px, 16vw, 320px);
        padding-right: 0;
        padding-left: 0;
    }

    body:is(.f2h-authenticated, .f2h-shopping-cart, .f2h-public-dark) #main-body .primary-content {
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 0%;
        padding-right: 0;
        padding-left: 0;
    }
}

/* Help, knowledge and network pages --------------------------------------- */

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-knowledgebasearticle, .f2h-template-announcements, .f2h-template-viewannouncement, .f2h-template-downloads, .f2h-template-downloadscat, .f2h-template-serverstatus) #main-body .primary-content {
    font-size: 15px;
    line-height: 1.65;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-knowledgebasearticle) #main-body .kb-search {
    padding: 8px;
    border: 1px solid rgba(126, 159, 216, .22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(17, 35, 66, .92), rgba(7, 23, 43, .88));
    box-shadow: 0 18px 45px rgba(0, 4, 18, .22), inset 0 1px rgba(255, 255, 255, .04);
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-knowledgebasearticle) #main-body .kb-search .form-control,
body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-knowledgebasearticle) #main-body .kb-search .btn {
    min-height: 48px;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-downloads, .f2h-template-downloadscat) #main-body :is(.kb-category, .kb-article-item) {
    height: 100%;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid rgba(126, 159, 216, .18);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(14, 31, 58, .9), rgba(7, 19, 37, .88));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-downloads, .f2h-template-downloadscat) #main-body :is(.kb-category, .kb-article-item):hover {
    border-color: rgba(75, 204, 232, .42);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 5, 20, .2), inset 0 1px rgba(255, 255, 255, .05);
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-downloads, .f2h-template-downloadscat) #main-body .kb-article-item small,
body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-downloads, .f2h-template-downloadscat) #main-body .kb-category small {
    display: block;
    margin-top: 5px;
    color: #9bacc5 !important;
    font-size: 13px;
    line-height: 20px;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-downloads, .f2h-template-downloadscat) #main-body :is(.kb-category, .kb-article-item) .text-black-50 {
    color: #6dd6ed !important;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-serverstatus) #main-body .alert-info.text-center {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-style: dashed;
    border-color: rgba(93, 183, 229, .32);
    border-radius: 16px;
    color: #b8c9df;
    font-size: 16px;
    font-weight: 650;
    background: linear-gradient(145deg, rgba(17, 36, 66, .72), rgba(7, 20, 39, .66));
}

body.f2h-template-announcements #main-body .announcements .announcement {
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid rgba(126, 159, 216, .16);
}

body.f2h-template-announcements #main-body .announcements .announcement:first-child {
    padding-top: 8px;
    border-top: 0;
}

body.f2h-template-announcements #main-body .announcement h1 {
    margin: 0 0 8px;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.25;
    letter-spacing: -.02em;
}

body:is(.f2h-template-announcements, .f2h-template-viewannouncement, .f2h-template-knowledgebasearticle) #main-body article,
body.f2h-template-knowledgebasearticle #main-body .kb-article-content {
    color: #c5d1e2;
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

body:is(.f2h-template-announcements, .f2h-template-viewannouncement, .f2h-template-knowledgebasearticle) #main-body article img,
body.f2h-template-knowledgebasearticle #main-body .kb-article-content img {
    max-width: 100%;
    height: auto;
}

body:is(.f2h-template-viewannouncement, .f2h-template-knowledgebasearticle) #main-body article :is(pre, table),
body.f2h-template-knowledgebasearticle #main-body .kb-article-content :is(pre, table) {
    max-width: 100%;
    overflow-x: auto;
}

.f2h-network-state {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid rgba(66, 219, 165, .25);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(7, 48, 52, .82), rgba(7, 24, 44, .9));
    box-shadow: 0 20px 52px rgba(0, 5, 20, .2), inset 0 1px rgba(255, 255, 255, .05);
}

.f2h-network-state::after {
    position: absolute;
    right: -52px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(56, 220, 185, .07);
    content: "";
}

.f2h-network-state-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(73, 231, 180, .3);
    border-radius: 15px;
    color: #5ce4b5;
    background: rgba(30, 178, 133, .12);
    box-shadow: 0 0 28px rgba(43, 205, 158, .1);
    font-size: 21px;
}

.f2h-network-state-copy {
    position: relative;
    z-index: 1;
}

.f2h-network-state-copy span {
    display: block;
    margin-bottom: 4px;
    color: #70d7bd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-network-state-copy strong {
    display: block;
    color: #f3f8ff;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.3;
}

.f2h-network-state-copy p {
    margin: 5px 0 0;
    color: #a9b8ce;
    font-size: 14px;
    line-height: 1.55;
}

body.f2h-template-serverstatus #main-body .f2h-network-pagination {
    margin-top: 20px;
}

@media (max-width: 575.98px) {
    .f2h-network-state {
        grid-template-columns: minmax(0, 1fr);
    }

    body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-knowledgebasearticle) #main-body .kb-search {
        padding: 6px;
    }
}

/* Public help and network routes use the same finished surface system as the
   signed-in workspace. These pages are intentionally readable without an
   account, so they cannot depend on .f2h-authenticated for their paint. */

body.f2h-public-dark {
    --f2h-canvas: #030711;
    --f2h-surface: #091426;
    --f2h-surface-muted: #0c1930;
    --f2h-ink: #f2f6ff;
    --f2h-ink-soft: #c0cce0;
    --f2h-muted: #8fa0bb;
    --f2h-line: rgba(119, 151, 207, .18);
    --text: #f2f6ff;
    --text-muted: #8fa0bb;
    --text-lifted: #c0cce0;
    --text-accented: #dbe5f7;
    --border-muted: rgba(119, 151, 207, .15);
    --border: rgba(119, 151, 207, .22);
    --border-lifted: rgba(137, 173, 234, .34);
    --bg: #091426;
    --bg-muted: #07101f;
    --bg-lifted: #0c1930;
    --bg-accented: #10213c;
    color: var(--f2h-ink-soft);
    background: #02050d;
    color-scheme: dark;
}

body.f2h-public-dark .f2h-main {
    position: relative;
    color: var(--f2h-ink-soft);
    background:
        radial-gradient(circle at 12% 3%, rgba(120, 56, 255, .14), transparent 32rem),
        radial-gradient(circle at 86% 8%, rgba(46, 134, 255, .08), transparent 28rem),
        linear-gradient(rgba(101, 131, 188, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 131, 188, .035) 1px, transparent 1px),
        linear-gradient(180deg, #050917 0%, #02060f 100%);
    background-size: auto, auto, 48px 48px, 48px 48px, auto;
}

body.f2h-public-dark #main-body :where(.card, .panel, .well, .jumbotron, .dataTables_wrapper, .table-container) {
    overflow: hidden;
    border-color: rgba(119, 151, 207, .2);
    border-radius: 17px;
    color: var(--f2h-ink-soft);
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 18px 44px rgba(0, 2, 12, .22);
}

body.f2h-public-dark #main-body :where(.card-header, .panel-heading) {
    border-color: rgba(119, 151, 207, .18);
    color: var(--f2h-ink);
    background: linear-gradient(90deg, rgba(121, 72, 244, .14), transparent 44%), rgba(8, 19, 38, .78);
}

body.f2h-public-dark #main-body :where(.card-footer, .panel-footer) {
    border-color: rgba(119, 151, 207, .18);
    background: rgba(6, 15, 30, .68);
}

body.f2h-public-dark #main-body :where(h1, h2, h3, h4, h5, h6, .card-title, .panel-title, strong) {
    color: #f2f6ff;
}

body.f2h-public-dark #main-body :where(p, li, td, .text-body) {
    color: #c0cce0;
}

body.f2h-public-dark #main-body :where(.text-muted, small) {
    color: #96a7c0 !important;
}

body.f2h-public-dark #main-body :where(.form-control, .custom-select, select.form-control, textarea) {
    border-color: rgba(126, 157, 210, .28);
    color: #edf3fc;
    background-color: rgba(5, 14, 29, .84);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}

body.f2h-public-dark #main-body :where(.form-control, textarea)::placeholder {
    color: #7f91ad;
    opacity: 1;
}

body.f2h-public-dark #main-body :where(.form-control, .custom-select, textarea):focus {
    border-color: #5b82ef;
    background-color: rgba(8, 20, 41, .96);
    box-shadow: 0 0 0 4px rgba(100, 94, 246, .14);
}

body.f2h-public-dark #main-body :where(.input-group-text, .input-group-addon) {
    border-color: rgba(126, 157, 210, .28);
    color: #a8b8ce;
    background: #10213c;
}

body.f2h-public-dark #main-body :where(.list-group-item) {
    border-color: rgba(119, 151, 207, .15);
    color: #c0cce0;
    background: rgba(7, 17, 34, .72);
}

body.f2h-public-dark #main-body :where(a.list-group-item, .list-group-item-action):hover,
body.f2h-public-dark #main-body :where(a.list-group-item, .list-group-item-action):focus-visible {
    color: #fff;
    background: rgba(39, 69, 123, .32);
}

body.f2h-public-dark #main-body :where(.table) {
    color: #c0cce0;
    background: transparent;
}

body.f2h-public-dark #main-body :where(.table thead th) {
    border-color: rgba(119, 151, 207, .2);
    color: #a9bad2;
    background: rgba(14, 29, 54, .84);
}

body.f2h-public-dark #main-body :where(.table tbody td) {
    border-color: rgba(119, 151, 207, .14);
    color: #c0cce0;
    background: rgba(7, 17, 34, .66);
}

body.f2h-public-dark #main-body :where(.table-striped tbody tr:nth-of-type(odd) td) {
    background: rgba(21, 39, 69, .66);
}

body.f2h-public-dark #main-body :where(.table-hover tbody tr:hover td) {
    color: #fff;
    background: rgba(36, 65, 113, .34);
}

body.f2h-public-dark #main-body :where(.btn-default, .btn-secondary) {
    border-color: rgba(126, 157, 215, .28);
    color: #cbd7e9;
    background: rgba(10, 23, 46, .78);
}

body.f2h-public-dark #main-body :where(.btn-default, .btn-secondary):hover {
    border-color: rgba(151, 113, 255, .5);
    color: #fff;
    background: rgba(91, 55, 184, .22);
}

body.f2h-public-dark #main-body .pagination :where(.page-link, a, span) {
    border-color: rgba(119, 151, 207, .2);
    color: #b0bfd4;
    background: rgba(10, 22, 43, .88);
}

body.f2h-public-dark #main-body .pagination .active :where(.page-link, a, span) {
    border-color: #6b7fff;
    color: #fff;
    background: linear-gradient(135deg, #5f55db, #315fc7);
}

body.f2h-public-dark #main-body :where(.alert-info, .alert-success, .alert-warning, .alert-danger) {
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 2, 12, .16);
}

body.f2h-public-dark #main-body .alert-info {
    border-color: rgba(60, 151, 239, .28);
    color: #a9d5ff;
    background: rgba(24, 86, 145, .2);
}

body.f2h-public-dark #main-body .alert-success {
    border-color: rgba(63, 215, 162, .25);
    color: #89e8c6;
    background: rgba(20, 112, 85, .18);
}

body.f2h-public-dark #main-body .alert-warning {
    border-color: rgba(240, 177, 76, .27);
    color: #f1cd8d;
    background: rgba(137, 86, 20, .18);
}

body.f2h-public-dark #main-body .alert-danger {
    border-color: rgba(255, 102, 132, .27);
    color: #ffa7b6;
    background: rgba(140, 38, 61, .2);
}

body.f2h-template-announcements #main-body .announcements .announcement article {
    padding: 20px;
    border: 1px solid rgba(119, 151, 207, .17);
    border-radius: 14px;
    color: #c7d3e5;
    background: linear-gradient(145deg, rgba(13, 29, 55, .84), rgba(6, 17, 34, .8));
}

body.f2h-template-announcements #main-body .announcements .announcement article :where(p, li, span) {
    color: #c7d3e5;
}

body.f2h-template-viewannouncement #main-body .card-body > .py-5,
body.f2h-template-knowledgebasearticle #main-body article {
    color: #c7d3e5;
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

body.f2h-template-viewannouncement #main-body .card-body > .py-5 :where(p, li, td, span),
body.f2h-template-knowledgebasearticle #main-body article :where(p, li, td, span) {
    color: inherit;
}

body:is(.f2h-template-viewannouncement, .f2h-template-knowledgebasearticle) #main-body :where(article, .card-body > .py-5) :where(img, video, iframe) {
    max-width: 100%;
    height: auto;
}

body:is(.f2h-template-viewannouncement, .f2h-template-knowledgebasearticle) #main-body :where(article, .card-body > .py-5) :where(pre, table) {
    max-width: 100%;
    overflow-x: auto;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat) #main-body .kb-category > a {
    color: #eaf1ff;
    background: transparent;
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat) #main-body .kb-category > a:hover,
body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat) #main-body .kb-category > a:focus-visible {
    color: #fff;
    background: rgba(39, 69, 123, .28);
}

body:is(.f2h-template-knowledgebase, .f2h-template-knowledgebasecat, .f2h-template-knowledgebasearticle) #main-body .kb-search .form-control {
    border-color: rgba(126, 159, 216, .25);
    color: #edf3fc;
    background: #08162b;
}

body.f2h-template-serverstatus #main-body .f2h-network-issue {
    margin-bottom: 18px;
}

body.f2h-template-serverstatus #main-body .f2h-network-issue-description {
    color: #c2cee0;
    font-size: 15px;
    line-height: 1.7;
}

/* Contact is a real product conversation, not a generic full-width form. */

.f2h-contact-layout {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.45fr);
    gap: 24px;
    align-items: stretch;
}

.f2h-contact-intro,
.f2h-contact-form-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(119, 151, 207, .22);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(13, 29, 55, .93), rgba(5, 15, 30, .9));
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 24px 60px rgba(0, 2, 12, .25);
}

.f2h-contact-intro {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 4vw, 42px);
    background:
        radial-gradient(circle at 0 0, rgba(111, 68, 232, .22), transparent 22rem),
        linear-gradient(145deg, rgba(13, 29, 55, .96), rgba(5, 15, 30, .92));
}

.f2h-contact-intro::after {
    position: absolute;
    right: -94px;
    bottom: -120px;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(64, 210, 223, .12);
    border-radius: 50%;
    background: rgba(19, 175, 202, .04);
    content: "";
}

.f2h-contact-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #7cdbc9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-contact-intro h2 {
    position: relative;
    z-index: 1;
    margin: 18px 0 14px;
    color: #f5f8ff;
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.06;
    letter-spacing: -.04em;
}

.f2h-contact-intro > p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #aebdd1;
    font-size: 15px;
    line-height: 1.72;
}

.f2h-contact-proof {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.f2h-contact-proof > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(119, 151, 207, .14);
    border-radius: 13px;
    background: rgba(5, 15, 31, .5);
}

.f2h-contact-proof-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(107, 122, 242, .28);
    border-radius: 12px;
    color: #8ea4ff;
    background: rgba(92, 69, 219, .14);
}

.f2h-contact-proof strong,
.f2h-contact-proof small {
    display: block;
}

.f2h-contact-proof strong {
    color: #eaf1fb;
    font-size: 14px;
    line-height: 1.35;
}

.f2h-contact-proof small {
    margin-top: 3px;
    color: #8fa0ba;
    font-size: 12.5px;
    line-height: 1.45;
}

.f2h-contact-support-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: auto;
    padding: 22px 0 0;
    color: #dbe7f8;
    text-decoration: none;
}

.f2h-contact-support-link :where(small, strong) {
    display: block;
}

.f2h-contact-support-link small {
    color: #8193ae;
    font-size: 12px;
}

.f2h-contact-support-link strong {
    margin-top: 2px;
    color: #dbe7f8;
    font-size: 14px;
}

.f2h-contact-support-link:hover {
    color: #72d9ec;
    text-decoration: none;
}

.f2h-contact-form-card {
    padding: clamp(26px, 4vw, 42px);
}

.f2h-contact-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(119, 151, 207, .16);
}

.f2h-contact-form-head span:first-child {
    color: #927fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.f2h-contact-form-head h3 {
    margin: 7px 0 0;
    color: #f2f6ff;
    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.15;
    letter-spacing: -.025em;
}

.f2h-contact-availability {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(57, 214, 164, .2);
    border-radius: 999px;
    color: #78dcbc !important;
    background: rgba(22, 111, 85, .12);
    font-size: 11px !important;
    font-weight: 750;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.f2h-contact-availability i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55ddb5;
    box-shadow: 0 0 13px rgba(85, 221, 181, .7);
}

.f2h-contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.f2h-contact-form .form-group {
    margin-bottom: 18px;
}

.f2h-contact-form label {
    display: block;
    margin-bottom: 8px;
    color: #b9c6da;
    font-size: 13px;
    font-weight: 700;
}

.f2h-contact-form .form-control {
    min-height: 48px;
    border-radius: 11px;
    font-size: 15px;
}

.f2h-contact-form textarea.form-control {
    min-height: 176px;
    resize: vertical;
}

.f2h-contact-captcha {
    margin: 2px 0 20px;
    padding: 16px;
    border: 1px solid rgba(126, 159, 216, .16);
    border-radius: 13px;
    background: rgba(5, 14, 29, .52);
    text-align: center;
}

.f2h-contact-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 5px;
}

.f2h-contact-submit-row p {
    margin: 0;
    color: #8798b2 !important;
    font-size: 12.5px;
    line-height: 1.5;
}

.f2h-contact-submit-row p i {
    margin-right: 6px;
    color: #67cfd9;
}

.f2h-contact-submit-row .btn {
    min-height: 49px;
    flex: 0 0 auto;
    padding-inline: 22px;
    border-radius: 11px;
}

/* The homepage can receive module-hook output that is not controlled by the
   template. Give those components a safe dark compatibility contract. */

body.f2h-template-homepage #main-body .f2h-portal-addon-output :where(.card, .panel, .well, .jumbotron, .table-container) {
    border-color: rgba(119, 151, 207, .2);
    color: #c2cee0;
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 16px 42px rgba(0, 2, 12, .2);
}

body.f2h-template-homepage #main-body .f2h-portal-addon-output :where(.card-header, .panel-heading, .table thead th) {
    border-color: rgba(119, 151, 207, .18);
    color: #eff4ff;
    background: rgba(10, 24, 47, .86);
}

body.f2h-template-homepage #main-body .f2h-portal-addon-output :where(.form-control, .custom-select, textarea) {
    border-color: rgba(126, 157, 210, .27);
    color: #edf3fc;
    background: #08162b;
}

/* Auth screens retain their focused width, but every secondary control and
   browser-populated field must still belong to the same visual system. */

body:is(.f2h-template-clientregister, .f2h-template-password-reset-container, .f2h-template-login) :where(.f2h-password-generator, .f2h-reset-actions) .btn-default {
    border-color: rgba(126, 157, 215, .3);
    color: #d5e0f0;
    background: rgba(10, 23, 46, .82);
}

body.f2h-template-clientregister :where(.iti__country-list, .intl-tel-input .country-list) {
    border-color: rgba(126, 157, 215, .26);
    color: #c5d1e2;
    background: #09172c;
    box-shadow: 0 22px 58px rgba(0, 2, 12, .45);
}

body.f2h-template-clientregister :where(.iti__country:hover, .iti__country.iti__highlight, .intl-tel-input .country:hover, .intl-tel-input .country.highlight) {
    color: #fff;
    background: rgba(57, 91, 151, .36);
}

body.f2h-shell :where(input, textarea, select):-webkit-autofill,
body.f2h-shell :where(input, textarea, select):-webkit-autofill:hover,
body.f2h-shell :where(input, textarea, select):-webkit-autofill:focus {
    -webkit-text-fill-color: #edf3fc;
    box-shadow: 0 0 0 1000px #09162a inset !important;
    caret-color: #edf3fc;
}

/* Branded not-found state. Fatal errors use error/internal-error.tpl because
   WHMCS renders those outside the normal header/footer pipeline. */

.f2h-error-state {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .72fr);
    align-items: center;
    gap: 38px;
    padding: clamp(34px, 6vw, 74px);
    border: 1px solid rgba(119, 151, 207, .22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0 0, rgba(108, 63, 232, .2), transparent 26rem),
        linear-gradient(145deg, rgba(13, 29, 55, .94), rgba(5, 15, 30, .9));
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 26px 68px rgba(0, 2, 12, .3);
}

.f2h-error-state-copy {
    position: relative;
    z-index: 1;
}

.f2h-error-code {
    color: #78dcca;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-error-state h2 {
    max-width: 720px;
    margin: 17px 0 16px;
    color: #f6f9ff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1;
    letter-spacing: -.05em;
}

.f2h-error-state p {
    max-width: 660px;
    margin: 0;
    color: #aebdd1;
    font-size: 16px;
    line-height: 1.72;
}

.f2h-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 30px;
}

.f2h-error-actions .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 20px;
    border-radius: 11px;
}

.f2h-error-actions .btn-default {
    border-color: rgba(126, 159, 216, .3);
    background: rgba(10, 25, 48, .72);
    color: #e7eefb;
    box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.f2h-error-actions .btn-default:hover,
.f2h-error-actions .btn-default:focus {
    border-color: rgba(89, 214, 199, .55);
    background: rgba(18, 43, 70, .9);
    color: #fff;
}

.f2h-error-orbit {
    position: relative;
    width: min(100%, 330px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 1px solid rgba(91, 185, 225, .14);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(39, 93, 151, .2), rgba(5, 16, 32, .1) 58%, transparent 59%);
}

.f2h-error-orbit::before,
.f2h-error-orbit::after {
    position: absolute;
    border: 1px solid rgba(126, 159, 216, .16);
    border-radius: 50%;
    content: "";
}

.f2h-error-orbit::before { inset: 17%; }
.f2h-error-orbit::after { inset: 34%; border-color: rgba(116, 91, 241, .28); }

.f2h-error-orbit-core {
    position: relative;
    z-index: 1;
    color: #f2f6ff;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 850;
    letter-spacing: -.05em;
}

.f2h-error-orbit i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #55d9c0;
    box-shadow: 0 0 18px rgba(85, 217, 192, .75);
}

.f2h-error-orbit i:nth-of-type(1) { top: 11%; left: 47%; }
.f2h-error-orbit i:nth-of-type(2) { right: 14%; bottom: 28%; background: #7294ff; box-shadow: 0 0 18px rgba(114, 148, 255, .72); }
.f2h-error-orbit i:nth-of-type(3) { left: 22%; bottom: 21%; width: 7px; height: 7px; background: #ab7cff; box-shadow: 0 0 16px rgba(171, 124, 255, .72); }

@media (max-width: 991.98px) {
    .f2h-contact-layout,
    .f2h-error-state {
        grid-template-columns: minmax(0, 1fr);
    }

    .f2h-error-orbit {
        width: min(70vw, 310px);
    }
}

@media (max-width: 575.98px) {
    .f2h-contact-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .f2h-contact-form-head,
    .f2h-contact-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .f2h-contact-submit-row .btn {
        width: 100%;
    }

    .f2h-error-state {
        min-height: 0;
        padding: 30px 22px;
    }
}

/* Last-mile compatibility -------------------------------------------------
   WHMCS renders verification, identity and several module surfaces outside
   the usual card hierarchy. Give those output contracts a finished fallback
   without imposing layout assumptions on third-party modules. */

body:is(.f2h-authenticated, .f2h-public-dark) #main-body .alert-secondary {
    border-color: rgba(139, 155, 190, .24);
    color: #c8d3e5;
    background: rgba(63, 76, 103, .22);
}

body.f2h-public-dark #main-body :where(.bg-white, .bg-light) {
    border-color: rgba(119, 151, 207, .18);
    color: #c0cce0;
    background: linear-gradient(145deg, rgba(12, 26, 50, .9), rgba(6, 15, 31, .86)) !important;
    color-scheme: dark;
}

body.f2h-public-dark #main-body :where(.bg-white, .bg-light) :where(.text-dark, .text-body) {
    color: #dbe5f7 !important;
}

body.f2h-shell .verification-banner {
    position: relative;
    z-index: 6;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(119, 151, 207, .2);
    color: #dbe7f7;
    background:
        linear-gradient(90deg, rgba(117, 72, 231, .16), transparent 48%),
        rgba(7, 17, 34, .96);
    box-shadow: 0 12px 32px rgba(0, 3, 15, .18);
}

body.f2h-shell .verification-banner > .container {
    width: min(calc(100% - 48px), 2000px);
    max-width: none;
    padding-block: 13px;
}

body.f2h-shell .verification-banner .row {
    min-height: 42px;
    align-items: center;
}

body.f2h-shell .verification-banner :where(.text, p, span) {
    color: #c8d5e7;
    font-size: 14px;
    line-height: 1.5;
}

body.f2h-shell .verification-banner :where(.fa-passport, .fa-exclamation-triangle) {
    margin-right: 10px;
    color: #66d9cb;
}

body.f2h-shell .verification-banner :where(.btn-default, .btn-action) {
    border-color: rgba(127, 157, 213, .32);
    color: #e6eef9;
    background: rgba(26, 50, 88, .72);
}

body.f2h-shell .verification-banner .close {
    color: #aebed4;
    text-shadow: none;
    opacity: .85;
}

body.f2h-shell .verification-banner .close:hover {
    color: #fff;
    opacity: 1;
}

/* WHMCS injects its development-license notice with inline light paint. Keep
   the warning visible without allowing a full-width yellow strip to interrupt
   the portal or make its strong label lose contrast on public-dark routes. */
body.f2h-shell #main-body .primary-content > div[style*="background-color:#ffffd2"] {
    margin-bottom: 18px !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(236, 176, 69, .28) !important;
    border-radius: 12px;
    color: #e8c783 !important;
    background: linear-gradient(90deg, rgba(126, 79, 18, .22), rgba(72, 50, 22, .14)) !important;
    font-size: 13px !important;
    line-height: 1.5;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

body.f2h-shell #main-body .primary-content > div[style*="background-color:#ffffd2"] strong {
    color: #f3d695 !important;
}

/* The product builders are edge-to-edge, but shell notices are not. Keep the
   utility area aligned to the builder and remove the portal grid behind it. */
body.f2h-shell:is(
    .f2h-template-cloud-vps-builder,
    .f2h-template-vps-builder,
    .f2h-template-dedicated-builder
) .f2h-main {
    background: #030625 !important;
}

body.f2h-shell:is(
    .f2h-template-cloud-vps-builder,
    .f2h-template-vps-builder,
    .f2h-template-dedicated-builder
) #main-body .primary-content > div[style*="background-color:#ffffd2"] {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), 1800px);
    box-sizing: border-box;
    margin: 0 auto 18px !important;
}

@media (max-width: 560px) {
    body.f2h-shell:is(
        .f2h-template-cloud-vps-builder,
        .f2h-template-vps-builder,
        .f2h-template-dedicated-builder
    ) #main-body .primary-content > div[style*="background-color:#ffffd2"] {
        width: min(calc(100% - 26px), 1800px);
    }
}

body.f2h-authenticated #main-body .primary-content :where(small, .small) {
    font-size: max(13px, .8125rem) !important;
    line-height: 1.45;
}

body.f2h-shell .card-sidebar .list-group-item {
    font-size: 14px;
    line-height: 1.5;
}

body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-kicker,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-panel-kicker,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-summary-item dt,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-table > thead > tr > th,
body.f2h-authenticated #main-body .f2h-service-inventory .f2h-service-inventory-status .status {
    font-size: 12px;
}

.f2h-contact-captcha:not(:has(*)) {
    display: none;
}

body.f2h-authenticated :where(.bootstrap-switch) {
    overflow: hidden;
    border-color: rgba(126, 157, 215, .28);
    border-radius: 999px;
    color: #c8d4e5;
    background: #071426;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
}

body.f2h-authenticated :where(.bootstrap-switch .bootstrap-switch-label) {
    color: #9fb0c8;
    background: #10213c;
}

body.f2h-authenticated :where(.bootstrap-switch .bootstrap-switch-handle-on) {
    color: #fff;
    background: linear-gradient(135deg, #755ee5, #4b87ff);
}

body.f2h-authenticated :where(.bootstrap-switch .bootstrap-switch-handle-off) {
    color: #b4c0d2;
    background: #17263e;
}

/* Focused guest workflows inherit Nexus markup, so style them as secure
   account cards rather than allowing the parent theme's white sheet through. */
body[class*="f2h-template-two-factor"],
body.f2h-template-user-invite-accept {
    color-scheme: dark;
}

body[class*="f2h-template-two-factor"] #main-body .primary-content,
body.f2h-template-user-invite-accept #main-body .primary-content {
    display: grid;
    justify-items: center;
}

body[class*="f2h-template-two-factor"] #main-body .card,
body.f2h-template-user-invite-accept #main-body .card {
    width: min(100%, 920px);
    overflow: hidden;
    border: 1px solid rgba(119, 151, 207, .22);
    border-radius: 20px;
    color: #c3d0e2;
    background:
        radial-gradient(circle at 0 0, rgba(108, 63, 232, .16), transparent 22rem),
        linear-gradient(145deg, rgba(13, 29, 55, .96), rgba(5, 15, 30, .94));
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 24px 58px rgba(0, 2, 12, .28);
}

body[class*="f2h-template-two-factor"] #main-body :where(.card-header, .card-footer),
body.f2h-template-user-invite-accept #main-body :where(.card-header, .card-footer) {
    border-color: rgba(119, 151, 207, .18);
    color: #c3d0e2;
    background: rgba(7, 18, 36, .72);
}

body[class*="f2h-template-two-factor"] #main-body :where(h1, h2, h3, label),
body.f2h-template-user-invite-accept #main-body :where(h1, h2, h3, label) {
    color: #f2f6ff;
}

body[class*="f2h-template-two-factor"] #main-body :where(.form-control, input),
body.f2h-template-user-invite-accept #main-body :where(.form-control, input) {
    border-color: rgba(126, 157, 210, .28);
    color: #edf3fc;
    background: #071426;
}

body.f2h-template-user-invite-accept #main-body .invite-box {
    height: 100%;
    padding: 24px;
    border: 1px solid rgba(119, 151, 207, .16);
    border-radius: 15px;
    background: rgba(7, 18, 36, .68);
}

/* Generic module paint contract. Inline module CSS is common in WHMCS, so
   the few safety-critical overrides use !important while preserving sizing,
   grids, tabs and JavaScript-owned positioning. */
body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(.bg-white, .bg-light) {
    border-color: rgba(119, 151, 207, .2) !important;
    color: #c4d1e3 !important;
    background: linear-gradient(145deg, rgba(12, 26, 50, .92), rgba(6, 15, 31, .9)) !important;
    color-scheme: dark;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(.card, .panel, .well, .stats-box) {
    border-color: rgba(119, 151, 207, .2) !important;
    color: #c4d1e3 !important;
    background: linear-gradient(145deg, rgba(12, 26, 50, .92), rgba(6, 15, 31, .9)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 16px 40px rgba(0, 2, 12, .2);
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(.card-header, .panel-heading, .card-footer, .panel-footer) {
    border-color: rgba(119, 151, 207, .18) !important;
    color: #edf3fc !important;
    background: rgba(10, 24, 47, .88) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(.ptr-input, input.form-control, select.form-control, textarea.form-control) {
    border-color: rgba(126, 157, 210, .28) !important;
    color: #edf3fc !important;
    background-color: #071426 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(.btn-action) {
    border-color: rgba(147, 116, 255, .46) !important;
    color: #e8effa !important;
    background: linear-gradient(135deg, rgba(112, 73, 220, .94), rgba(53, 111, 206, .94)) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(.job-ref, code) {
    border-color: rgba(126, 157, 215, .2) !important;
    color: #b8c9ff !important;
    background: rgba(4, 14, 28, .88) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) .f2h-ds-fact code {
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel :focus,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel :focus-visible {
    outline: none !important;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel :is(.form-control, .custom-select, textarea):focus,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel :is(.form-control, .custom-select, textarea):focus-visible {
    border-color: rgba(150, 170, 200, .4) !important;
    background: #071426 !important;
    box-shadow: none !important;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy.is-copied {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    grid-auto-flow: column;
    white-space: nowrap;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy:focus,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy:focus-visible,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy.is-copied,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy.is-copied::after {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1fb !important;
    background: transparent !important;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy.is-copied svg,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-copy.is-copied :is(i, .f2h-ds-icon) {
    display: none !important;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-fact :is(code, span, dd),
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-branded-value span {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-fact ::selection,
body.f2h-authenticated #main-body .primary-content #f2hDedicatedPanel .f2h-ds-fact code::selection {
    color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(table, th, td) {
    border-color: rgba(119, 151, 207, .16) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(th) {
    color: #aebed4 !important;
    background-color: rgba(14, 29, 54, .84) !important;
}

body.f2h-authenticated #main-body .primary-content :is(.module-client-area, .moduleoutput, .module-output, .f2h-portal-addon-output, #tabOverview) :is(td) {
    color: #c4d1e3 !important;
    background-color: rgba(7, 17, 34, .66) !important;
}

/* ModulesGarden Lagom UI. Management pages (`mg-page=`) render under
   #layers2 / .mg-wrapper / .lu-app, not .module-client-area. Paint only. */
body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) {
    color: #c8d3e4;
    color-scheme: dark;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-app, .lu-app-main, .lu-app-main__body, .modulesgarden-app-main-container, .lu-bg-transparent, .full-screen-module-container) {
    color: #c8d3e4 !important;
    background: transparent !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.h4, .lu-h4, .lu-top__title, .lu-tile__title, .lu-widget__top, .lu-p-3, .lu-text, label, .lu-form-label) {
    color: #e7eef8 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-tile {
    border: 1px solid rgba(135, 116, 226, .28) !important;
    border-radius: 16px !important;
    color: #e7eef8 !important;
    background:
        radial-gradient(circle at 12% 0, rgba(138, 99, 255, .11), transparent 9rem),
        linear-gradient(145deg, rgba(17, 31, 63, .97), rgba(8, 19, 38, .95)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-tile--btn:is(:hover, :focus-visible, .lu-is-checked) {
    border-color: rgba(151, 119, 255, .58) !important;
    background:
        radial-gradient(circle at 12% 0, rgba(138, 99, 255, .2), transparent 10rem),
        linear-gradient(145deg, rgba(27, 43, 84, .99), rgba(12, 29, 56, .97)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(27, 20, 73, .28) !important;
}

/* The Proxmox module injects its own green menu variables after the theme.
   Keep action/navigation chrome purple-blue; reserve green for live state dots. */
body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) {
    --menu-text-active: #aa94ff;
    --menu-submenu-text-hover: #b8a9ff;
    --menu-submenu-text-active: #9a84f4;
    --tile-btn-text: #cbd6e8;
    --tile-btn-text-hover: #fff;
    --tile-btn-border-hover: rgba(153, 126, 255, .62);
}

body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) .lu-nav__link:is(:hover, :focus-visible),
body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) .lu-nav__link:is(:hover, :focus-visible) > .lu-nav__link-icon {
    color: #d8d0ff !important;
    background: rgba(113, 86, 226, .12) !important;
}

body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) .lu-nav__item.is-active > .lu-nav__link,
body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) .lu-nav__item.is-active > .lu-nav__link > .lu-nav__link-icon {
    border-left-color: #9a84f4 !important;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(117, 88, 231, .28), rgba(35, 86, 164, .18)) !important;
    box-shadow: inset 2px 0 0 #9a84f4;
}

body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) .lu-nav--tabs .lu-nav__item.is-active > .lu-nav__link::after {
    background: linear-gradient(90deg, #8a63ff, #4b87ff) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-tile--btn .lu-i-c-6x {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-inline: auto;
    border: 1px solid rgba(138, 99, 255, .24);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(105, 70, 220, .18), rgba(44, 103, 193, .14));
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-tile--btn .lu-i-c-6x img {
    max-width: 38px !important;
    max-height: 38px !important;
    filter: grayscale(1) saturate(0) brightness(1.16) contrast(.94) drop-shadow(0 6px 12px rgba(44, 62, 132, .22));
    opacity: .94;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is([disabled] .lu-tile, .lu-tile[disabled], .lu-tile.is-disabled) {
    opacity: .45;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-widget, .lu-widget__body, .lu-widget__content, .lu-widget__inner) {
    border-color: rgba(125, 159, 217, .2) !important;
    color: #c8d3e4 !important;
    background: linear-gradient(145deg, rgba(12, 26, 50, .98), rgba(6, 15, 31, .96)) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-widget {
    border: 1px solid rgba(125, 159, 217, .2) !important;
    border-radius: 16px !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-widget__header {
    border-color: rgba(125, 159, 217, .16) !important;
    color: #edf3fc !important;
    background:
        linear-gradient(90deg, #7358ef 0%, #9781ff 38%, rgba(151, 129, 255, 0) 82%) top left / 100% 3px no-repeat,
        linear-gradient(112deg, #241d4b 0%, #111a35 43%, #071426 100%) !important;
    box-shadow: none !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-widget__header :is(.lu-widget__top, .lu-top) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-top__search, .lu-input-group, .lu-input-group .lu-input-group__prepend, .lu-input-group .lu-input-group__append) {
    border-color: rgba(126, 157, 210, .28) !important;
    color: #edf3fc !important;
    background: #071426 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(input, select, textarea, .lu-form-control, .lu-input, .lu-input-text, .form-control) {
    border-color: rgba(126, 157, 210, .28) !important;
    color: #edf3fc !important;
    background-color: #071426 !important;
    box-shadow: none !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-table, .lu-widget table, .lu-widget th, .lu-widget td, .lu-t-c__footer) {
    border-color: rgba(119, 151, 207, .16) !important;
    color: #c4d1e3 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-table th, .lu-widget th, .lu-table thead, .lu-table thead th) {
    background: rgba(14, 29, 54, .92) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-table td, .lu-widget td, .lu-table tbody, .lu-t-c__footer) {
    background: rgba(7, 17, 34, .72) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-btn, .lu-btn--default, .lu-btn--outline, .lu-btn--icon) {
    border-color: rgba(126, 157, 215, .3) !important;
    color: #e8effa !important;
    background: rgba(16, 33, 60, .92) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-btn--primary {
    border-color: rgba(147, 116, 255, .58) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #7049dc, #356fce) !important;
    box-shadow: 0 10px 24px rgba(45, 38, 133, .2) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .lu-btn--primary:is(:hover, :focus-visible) {
    border-color: rgba(172, 148, 255, .72) !important;
    background: linear-gradient(135deg, #8059ec, #417ddd) !important;
}

body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) :is(.lu-btn--success, .lu-btn--plain.lu-btn--success),
body.f2h-template-clientareaproductdetails > .lu-modal :is(.lu-btn--success, .lu-btn--plain.lu-btn--success) {
    border-color: rgba(138, 99, 255, .58) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #755ee5, #4b76e6) !important;
}

body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) :is(.lu-btn--success, .lu-btn--plain.lu-btn--success):is(:hover, :focus-visible),
body.f2h-template-clientareaproductdetails > .lu-modal :is(.lu-btn--success, .lu-btn--plain.lu-btn--success):is(:hover, :focus-visible) {
    border-color: rgba(168, 143, 255, .72) !important;
    background: linear-gradient(135deg, #856ff2, #568cf5) !important;
}

body.f2h-template-clientareaproductdetails :is(#layers2, #layers2-body, .mg-wrapper, .modulesgarden-app-main-container) :is(.lu-btn--info, .lu-btn--plain.lu-btn--info),
body.f2h-template-clientareaproductdetails > .lu-modal :is(.lu-btn--info, .lu-btn--plain.lu-btn--info) {
    border-color: rgba(75, 135, 255, .5) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #5e54cf, #2f6bc5) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-label--success.lu-label--status {
    color: #dbe5f7 !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-label--success.lu-label--status::before {
    border-color: #8a63ff !important;
    box-shadow: 0 0 0 3px rgba(138, 99, 255, .12) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.dataTables_paginate .paginate_button, .lu-t-c__footer .dt-button),
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.dataTables_paginate .paginate_button, .lu-t-c__footer .dt-button) > span {
    border-color: transparent !important;
    color: #9db8ff !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.dataTables_paginate .paginate_button, .lu-t-c__footer .dt-button):is(:hover, :focus-visible) {
    border-color: rgba(138, 99, 255, .34) !important;
    color: #fff !important;
    background: rgba(96, 75, 196, .18) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.dataTables_paginate .paginate_button.current, .lu-t-c__footer .dt-button.active) {
    border-color: rgba(138, 99, 255, .46) !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(112, 73, 220, .36), rgba(75, 135, 255, .22)) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .dataTables_paginate .paginate_button.disabled {
    border-color: transparent !important;
    color: #536681 !important;
    background: transparent !important;
    opacity: .72;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-nav--tabs .lu-nav__link {
    border-color: transparent !important;
    color: #8fa2c0 !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-nav--tabs .lu-nav__link:is(:hover, :focus-visible) {
    color: #9db8ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-nav--tabs .lu-nav__item.is-active > .lu-nav__link {
    color: #fff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__link,
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__link :is(i, [class*="lu-icon"]) {
    color: #c8d3e4 !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__link:is(:hover, :focus-visible),
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__link:is(:hover, :focus-visible) :is(i, [class*="lu-icon"]) {
    color: #9db8ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__link.is-active,
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__link.is-active :is(i, [class*="lu-icon"]) {
    color: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-text-success, .lu-text-info) {
    color: #9db8ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-label--success, .lu-label--info, .lu-badge--success, .lu-badge--info) {
    border-color: rgba(138, 99, 255, .38) !important;
    color: #dbe5f7 !important;
    background: rgba(98, 72, 201, .18) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-label--success-outline, .lu-label--info-outline, .lu-badge--success-outline, .lu-badge--info-outline, .lu-label--outline.lu-label--success, .lu-label--outline.lu-label--info, .lu-badge--outline.lu-badge--success, .lu-badge--outline.lu-badge--info) {
    border-color: rgba(75, 135, 255, .42) !important;
    color: #9db8ff !important;
    background: rgba(75, 135, 255, .08) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-bg-success, .lu-bg-success-faded, .lu-bg-success-lighter, .lu-bg-success-darker, .lu-bg-info, .lu-bg-info-faded, .lu-bg-info-lighter, .lu-bg-info-darker) {
    border-color: rgba(138, 99, 255, .3) !important;
    background-color: rgba(98, 72, 201, .16) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-form-group.lu-is-success, .lu-form-group.lu-is-info) :is(.lu-form-control, input, select, textarea) {
    border-color: rgba(75, 135, 255, .5) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-form-group.lu-is-success, .lu-form-group.lu-is-info) .lu-form-feedback,
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-form-check.lu-is-success, .lu-form-check.lu-is-info) {
    color: #9db8ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-form-check.lu-is-success, .lu-form-check.lu-is-info) :is(.lu-form-indicator, .lu-form-check__indicator) {
    border-color: #8a63ff !important;
    background-color: rgba(98, 72, 201, .24) !important;
}

body.f2h-template-clientareaproductdetails #layers2 :is(.lu-form-check.lu-is-success, .lu-form-check.lu-is-info) .lu-form-checkbox:checked + .lu-form-indicator {
    border-color: #8a63ff !important;
    background-color: #7049dc !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-label--status {
    border-color: transparent !important;
    background: transparent !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .lu-dropdown__item.is-active > .lu-dropdown__link {
    color: #dcd5ff !important;
    background: rgba(98, 72, 201, .2) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(.lu-preloader, .lu-preloader--sm)::before {
    border-color: rgba(75, 135, 255, .2) !important;
    border-top-color: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is([stroke="#008ffb" i], [stroke="#008FFB" i]) {
    stroke: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is([fill="#008ffb" i], [fill="#008FFB" i]) {
    fill: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is([stroke="#00e396" i], [stroke="#00E396" i]) {
    stroke: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is([fill="#00e396" i], [fill="#00E396" i]) {
    fill: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container [style*="0, 143, 251"] {
    border-color: #4b87ff !important;
    color: #4b87ff !important;
    background-color: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container [style*="0, 227, 150"] {
    border-color: #8a63ff !important;
    color: #8a63ff !important;
    background-color: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-series[rel="1"] .apexcharts-area {
    stroke: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-series[rel="2"] .apexcharts-area {
    stroke: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-series[rel="1"] .apexcharts-marker,
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-legend-series[rel="1"] path {
    fill: #4b87ff !important;
    stroke: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-series[rel="2"] .apexcharts-marker,
body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-legend-series[rel="2"] path {
    fill: #8a63ff !important;
    stroke: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-tooltip-series-group-0 .apexcharts-tooltip-marker {
    color: #4b87ff !important;
    background-color: #4b87ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container .apexcharts-tooltip-series-group-1 .apexcharts-tooltip-marker {
    color: #8a63ff !important;
    background-color: #8a63ff !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(stop[stop-color^="rgba(0,143,251"], stop[stop-color^="rgba(128,199,253"]) {
    stop-color: rgba(75, 135, 255, .42) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container :is(stop[stop-color^="rgba(0,227,150"], stop[stop-color^="rgba(128,241,203"]) {
    stop-color: rgba(138, 99, 255, .38) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-dropdown, .lu-dropdown-menu, .lu-dropdown__menu, .lu-context-menu) {
    border-color: rgba(125, 159, 217, .22) !important;
    color: #e7eef8 !important;
    background: #0b1a31 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-alert, .lu-alert--info, .lu-alert--success, .lu-empty, .lu-placeholder) {
    border-color: rgba(125, 159, 217, .2) !important;
    color: #c8d3e4 !important;
    background: rgba(10, 24, 47, .72) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.vue-apexcharts, .apexcharts-canvas, .apexcharts-inner, .highcharts-container) {
    background: transparent !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .highcharts-background {
    fill: #081427 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.apexcharts-tooltip, .apexcharts-xaxistooltip, .apexcharts-yaxistooltip) {
    border-color: rgba(125, 159, 217, .28) !important;
    color: #e7eef8 !important;
    background: #071426 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .apexcharts-inner svg > rect[fill="#fff"],
body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) .apexcharts-inner svg > rect[fill="#fefefe"] {
    fill: #081427 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) iframe {
    background: #071426 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-progress__bar, .lu-progressbar--primary, .lu-progress__track) {
    background: rgba(126, 157, 210, .16) !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.lu-checkbox, .lu-form-checkbox, .lu-switch, .lu-switch__track, .lu-form-indicator) {
    border-color: rgba(126, 157, 210, .3) !important;
    background: #071426 !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers2, .lu-app, .module-client-area) :is(.bg-white, .bg-light, .lu-bg-white, .lu-card, .card, .panel) {
    border-color: rgba(125, 159, 217, .2) !important;
    color: #c8d3e4 !important;
    background: linear-gradient(145deg, rgba(12, 26, 50, .98), rgba(6, 15, 31, .96)) !important;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.f2h-template-clientareaproductdetails .modulesgarden-app-main-container > .lu-widget {
    order: -1;
}

/* ModulesGarden Lagom modals teleport to body. Paint the shell, not just inputs. */
body.f2h-authenticated .lu-modal {
    color: #c8d3e4;
    color-scheme: dark;
}

body.f2h-authenticated .lu-modal :is(.lu-modal__dialog, .lu-modal__content, .lu-modal__body, .lu-modal__footer) {
    border-color: rgba(125, 159, 217, .22) !important;
    color: #c8d3e4 !important;
    background: #0b1a31 !important;
}

body.f2h-authenticated .lu-modal :is(.lu-modal__top, .lu-top) {
    border-color: rgba(125, 159, 217, .16) !important;
    color: #edf3fc !important;
    background: rgba(10, 24, 47, .92) !important;
}

body.f2h-authenticated .lu-modal :is(.lu-top__title, label, .lu-form-label, .lu-text, .lu-form-text) {
    color: #e7eef8 !important;
}

body.f2h-authenticated .lu-modal :is(.lu-form-control, input, select, textarea, .lu-selectize-input, .lu-selectize-control) {
    border-color: rgba(126, 157, 210, .28) !important;
    color: #edf3fc !important;
    background-color: #071426 !important;
}

body.f2h-authenticated .lu-modal :is(.lu-btn, .lu-btn--default, .lu-btn--outline, .lu-btn--icon) {
    border-color: rgba(126, 157, 215, .3) !important;
    color: #e8effa !important;
    background: rgba(16, 33, 60, .92) !important;
}

body.f2h-authenticated .lu-modal .lu-btn--primary {
    border-color: rgba(147, 116, 255, .58) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #7049dc, #356fce) !important;
}

/* Icon-only MG buttons: keep the glyph in the centre of the square/round hit target. */
body.f2h-authenticated :is(.mg-wrapper, #layers, #layers2, #layers2-body, .lu-app, .module-client-area, .modulesgarden-app-main-container) :is(.lu-btn.lu-btn--icon, a.lu-btn--icon, button.lu-btn--icon),
body.f2h-authenticated .lu-modal :is(.lu-btn.lu-btn--icon, a.lu-btn--icon, button.lu-btn--icon) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers, #layers2, #layers2-body, .lu-app, .module-client-area, .modulesgarden-app-main-container) :is(.lu-btn.lu-btn--icon, a.lu-btn--icon, button.lu-btn--icon) > :is(.lu-btn__icon, i, .zmdi, .lu-zmdi, .fas, .far, .fa, span),
body.f2h-authenticated .lu-modal :is(.lu-btn.lu-btn--icon, a.lu-btn--icon, button.lu-btn--icon) > :is(.lu-btn__icon, i, .zmdi, .lu-zmdi, .fas, .far, .fa, span) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important;
}

body.f2h-authenticated :is(.mg-wrapper, #layers, #layers2, #layers2-body, .lu-app, .module-client-area, .modulesgarden-app-main-container) .lu-btn:not(.lu-btn--icon),
body.f2h-authenticated .lu-modal .lu-btn:not(.lu-btn--icon) {
    align-items: center;
}

body.f2h-authenticated :is(.mg-wrapper, #layers, #layers2, #layers2-body, .lu-app, .module-client-area, .modulesgarden-app-main-container) .lu-btn:not(.lu-btn--icon) :is(.lu-btn__icon, .lu-nav__link-icon),
body.f2h-authenticated .lu-modal .lu-btn:not(.lu-btn--icon) :is(.lu-btn__icon, .lu-nav__link-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

body.f2h-authenticated :is(.lu-selectize-dropdown, .selectize-dropdown) {
    border: 1px solid rgba(125, 159, 217, .22) !important;
    color: #e7eef8 !important;
    background: #0b1a31 !important;
}

body.f2h-authenticated :is(.lu-selectize-dropdown, .selectize-dropdown) :is(.option, .active, .selected, .highlight, .lu-option) {
    color: #e7eef8 !important;
    background: #0b1a31 !important;
}

body.f2h-authenticated :is(.lu-selectize-dropdown, .selectize-dropdown) :is(.option.active, .option.selected, .active) {
    background: rgba(46, 134, 255, .18) !important;
}

body.f2h-guest .f2h-portal-addon-output :is(.card, .panel, .well, .bg-white, .bg-light) {
    border-color: rgba(119, 151, 207, .2) !important;
    color: #c4d1e3 !important;
    background: linear-gradient(145deg, rgba(12, 26, 50, .92), rgba(6, 15, 31, .9)) !important;
}

@media (max-width: 767.98px) {
    body.f2h-authenticated #main-body .ticketfeedbackrating {
        padding-right: 16px;
        padding-left: 16px;
    }

    body.f2h-shell .verification-banner > .container {
        width: min(calc(100% - 24px), 2000px);
    }
}

/* OAuth is rendered through a separate WHMCS document, so it needs an
   explicit shell rather than relying on the standard client-area header. */
body.f2h-oauth-shell {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: #c5d1e3;
    background:
        radial-gradient(circle at 12% 2%, rgba(117, 61, 235, .2), transparent 34rem),
        radial-gradient(circle at 88% 12%, rgba(22, 188, 215, .11), transparent 28rem),
        linear-gradient(rgba(106, 135, 189, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 135, 189, .035) 1px, transparent 1px),
        #030711;
    background-size: auto, auto, 48px 48px, 48px 48px, auto;
    color-scheme: dark;
}

.f2h-oauth-header {
    border-bottom: 1px solid rgba(119, 151, 207, .16);
    background: rgba(4, 9, 21, .76);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.f2h-oauth-header-inner,
.f2h-oauth-footer {
    width: min(calc(100% - 48px), 1460px);
    margin-inline: auto;
}

.f2h-oauth-header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.f2h-oauth-brand img {
    width: min(190px, 42vw);
    height: auto;
    display: block;
}

.f2h-oauth-trust {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9fb0c8;
    font-size: 13px;
    font-weight: 700;
}

.f2h-oauth-trust i {
    color: #65dfc3;
}

.f2h-oauth-main {
    display: grid;
    place-items: center;
    padding: clamp(38px, 7vw, 92px) 24px;
}

.f2h-oauth-stage {
    width: min(100%, 1180px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: clamp(34px, 7vw, 82px);
    align-items: center;
}

.f2h-oauth-kicker {
    color: #73ddcb;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-oauth-intro h1 {
    max-width: 620px;
    margin: 18px 0 18px;
    color: #f6f9ff;
    font-size: clamp(42px, 5vw, 67px);
    font-weight: 790;
    line-height: .99;
    letter-spacing: -.055em;
}

.f2h-oauth-intro > p {
    max-width: 590px;
    margin: 0;
    color: #a9b8cd;
    font-size: 16px;
    line-height: 1.7;
}

.f2h-oauth-points {
    display: grid;
    gap: 11px;
    margin-top: 31px;
}

.f2h-oauth-points span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #c0cde0;
    font-size: 13px;
    font-weight: 680;
}

.f2h-oauth-points i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(110, 129, 243, .25);
    border-radius: 9px;
    color: #9ba9ff;
    background: rgba(76, 64, 192, .13);
}

.f2h-oauth-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(125, 157, 213, .23);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(31, 167, 202, .11), transparent 23rem),
        linear-gradient(145deg, rgba(13, 29, 55, .96), rgba(5, 15, 30, .94));
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 32px 84px rgba(0, 2, 12, .38);
}

.f2h-oauth-panel::before {
    position: absolute;
    inset: 0 auto auto 0;
    width: 58%;
    height: 2px;
    background: linear-gradient(90deg, #7657ef, #44d5da, transparent);
    content: "";
}

.f2h-oauth-panel-top {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(119, 151, 207, .16);
    color: #9eacc2;
    font-size: 12px;
    font-weight: 750;
}

.f2h-oauth-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6edfc0;
}

.f2h-oauth-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e1b8;
    box-shadow: 0 0 14px rgba(85, 225, 184, .55);
}

.f2h-oauth-content {
    padding: clamp(24px, 4vw, 38px);
}

.f2h-oauth-shell .content-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #c5d1e3;
    background: transparent;
    box-shadow: none;
}

.f2h-oauth-shell .content-container h2 {
    margin: 0 0 22px;
    color: #f2f6ff;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.18;
    letter-spacing: -.025em;
}

.f2h-oauth-shell :where(.content-padded, .permission-grants) {
    color: #b9c6d9;
}

.f2h-oauth-shell .permission-grants {
    padding: 17px 19px;
    border: 1px solid rgba(119, 151, 207, .17);
    border-radius: 14px;
    background: rgba(7, 18, 36, .66);
}

.f2h-oauth-shell .permission-grants li::marker {
    color: #6edfc0;
}

.f2h-oauth-shell :where(.form-control, input[type="email"], input[type="password"], input[type="text"]) {
    min-height: 46px;
    border-color: rgba(126, 157, 210, .28);
    border-radius: 10px;
    color: #edf3fc;
    background: #071426;
}

.f2h-oauth-shell label {
    color: #b6c4d7;
    font-size: 13px;
    font-weight: 700;
}

.f2h-oauth-shell .action-buttons {
    margin-top: 26px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(119, 151, 207, .16);
    background: transparent;
}

.f2h-oauth-shell .btn {
    min-height: 42px;
    border-radius: 10px;
    font-weight: 750;
}

.f2h-oauth-shell .btn-primary {
    border-color: #5b67e3;
    color: #fff;
    background: linear-gradient(135deg, #694bdd, #356ad3);
    box-shadow: 0 11px 26px rgba(53, 67, 196, .24);
}

.f2h-oauth-shell .btn-default {
    border-color: rgba(126, 157, 215, .28);
    color: #c8d5e7;
    background: rgba(10, 23, 46, .78);
}

.f2h-oauth-session,
.f2h-oauth-return {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 24px;
    border-top: 1px solid rgba(119, 151, 207, .15);
    background: rgba(5, 14, 29, .62);
}

.f2h-oauth-session p {
    margin: 0;
    color: #9fb0c8;
    font-size: 12px;
}

.f2h-oauth-session form,
.f2h-oauth-return {
    margin: 0;
}

.f2h-oauth-session .btn-link {
    min-height: auto;
    padding: 0;
    color: #8ecff6;
}

.f2h-oauth-return {
    justify-content: flex-end;
}

.f2h-oauth-footer {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #71829c;
    font-size: 12px;
}

.f2h-oauth-footer a {
    color: #8fa7c8;
}

@media (max-width: 900px) {
    .f2h-oauth-stage {
        grid-template-columns: minmax(0, 1fr);
        max-width: 680px;
    }

    .f2h-oauth-intro {
        text-align: center;
    }

    .f2h-oauth-intro > p {
        margin-inline: auto;
    }

    .f2h-oauth-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .f2h-oauth-header-inner,
    .f2h-oauth-footer {
        width: min(calc(100% - 28px), 1460px);
    }

    .f2h-oauth-main {
        padding-inline: 14px;
    }

    .f2h-oauth-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .f2h-oauth-shell .action-buttons,
    .f2h-oauth-session,
    .f2h-oauth-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Login card hierarchy and legibility */

@media (min-width: 992px) {
    body.f2h-template-login .f2h-auth-layout {
        grid-template-columns: minmax(0, 1fr) minmax(460px, .76fr);
    }
}

body.f2h-template-login .f2h-auth-security-line {
    align-items: center;
    flex-direction: row;
    margin-bottom: 27px;
    padding-bottom: 15px;
    color: #8fa3c2;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .045em;
}

body.f2h-template-login .f2h-auth-security-line > span:first-child {
    gap: 9px;
}

body.f2h-template-login .f2h-auth-security-line i {
    width: 7px;
    height: 7px;
}

body.f2h-template-login .f2h-auth-brand-stamp {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    overflow: hidden;
    border: 1px solid rgba(125, 104, 255, .25);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(72, 44, 157, .38), rgba(8, 39, 79, .68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(66, 42, 161, .16);
}

body.f2h-template-login .f2h-auth-brand-stamp img {
    width: 27px;
    height: auto;
}

body.f2h-template-login .f2h-auth-panel-heading {
    display: block;
    margin-bottom: 29px;
}

body.f2h-template-login .f2h-auth-panel-heading .f2h-eyebrow {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .075em;
}

body.f2h-template-login .f2h-auth-panel-heading h1 {
    max-width: none;
    margin: 9px 0 10px;
    font-size: clamp(30px, 2.2vw, 32px);
    line-height: 1.15;
    letter-spacing: -.035em;
}

body.f2h-template-login .f2h-auth-panel-heading p {
    max-width: 35ch;
    color: #9aabc3;
    font-size: 15px;
    line-height: 1.55;
}

body.f2h-template-login .f2h-auth-story > .f2h-eyebrow {
    font-size: 13px;
}

body.f2h-template-login .f2h-auth-story > p {
    font-size: 17px;
    line-height: 1.65;
}

body.f2h-template-login .f2h-auth-display {
    font-size: clamp(43px, 4.65vw, 64px);
}

body.f2h-template-login .f2h-auth-capabilities strong {
    font-size: 14px;
}

body.f2h-template-login .f2h-auth-capabilities small {
    font-size: 13px;
    line-height: 1.5;
}

body.f2h-template-login .f2h-auth-trust {
    font-size: 13px;
}

body.f2h-template-login .f2h-login-form label {
    font-size: 14px;
    line-height: 1.4;
}

body.f2h-template-login .f2h-label-row a {
    margin-bottom: 7px;
    font-size: 13px;
}

body.f2h-template-login .f2h-input-wrap .form-control {
    font-size: 16px;
}

body.f2h-template-login .f2h-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 2px;
}

body.f2h-template-login .f2h-login-actions .f2h-checkbox-row {
    flex: 0 1 auto;
    margin: 0;
    color: #b7c4d7;
    font-size: 14px;
    line-height: 1.4;
}

body.f2h-template-login.f2h-shell .f2h-login-button {
    width: auto;
    min-width: 154px;
    min-height: 46px;
    justify-content: center;
    gap: 13px;
    padding: 7px 8px 7px 20px;
    border: 1px solid rgba(137, 126, 255, .52);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 760;
    letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 31px rgba(42, 73, 212, .24);
}

body.f2h-template-login.f2h-shell .f2h-login-button > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 11px;
    background: rgba(255, 255, 255, .13);
    transition: transform .18s ease, background-color .18s ease;
}

body.f2h-template-login.f2h-shell .f2h-login-button:hover > i {
    background: rgba(255, 255, 255, .2);
    transform: translateX(2px);
}

body.f2h-template-login .f2h-auth-register {
    justify-content: flex-start;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.5;
}

body.f2h-template-login .f2h-auth-assurance {
    justify-content: flex-start;
    gap: 9px 16px;
    margin-top: 20px;
    padding-top: 17px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: .015em;
    text-transform: none;
}

body.f2h-template-login .f2h-auth-assurance i {
    font-size: 6px;
}

@media (max-width: 575.98px) {
    body.f2h-template-login .f2h-auth-panel-heading h1 {
        max-width: none;
        font-size: 30px;
    }

    body.f2h-template-login .f2h-auth-security-line {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    body.f2h-template-login .f2h-login-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    body.f2h-template-login .f2h-login-actions .f2h-checkbox-row {
        align-self: flex-start;
    }

    body.f2h-template-login.f2h-shell .f2h-login-button {
        width: 100%;
    }
}

/* Services inventory clarity pass --------------------------------------- */

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory {
    gap: 20px;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
    padding: 30px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-copy {
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-kicker,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel-kicker {
    font-size: 11px;
    letter-spacing: .12em;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-copy h1 {
    max-width: 540px;
    margin-bottom: 14px;
    font-size: clamp(38px, 3vw, 49px);
    line-height: 1.02;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-kicker + h1 {
    margin-top: 20px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-copy > p {
    max-width: 570px;
    color: #b4c2d7;
    font-size: 15px;
    line-height: 1.62;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-self: auto;
    margin: 22px 0 0;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
    --f2h-card-tone: 92, 160, 255;
    min-height: 112px;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 13px;
    align-content: center;
    justify-content: stretch;
    padding: 16px;
    border-color: rgba(var(--f2h-card-tone), .34);
    border-radius: 14px;
    background:
        radial-gradient(circle at 92% 88%, rgba(var(--f2h-card-tone), .17), transparent 57%),
        linear-gradient(145deg, rgba(11, 28, 51, .97), rgba(6, 16, 32, .98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .065),
        0 16px 34px rgba(0, 3, 15, .24);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item::before {
    top: 15px;
    bottom: 15px;
    width: 3px;
    background: rgb(var(--f2h-card-tone));
    box-shadow: 0 0 17px rgba(var(--f2h-card-tone), .55);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item::after {
    border-color: rgba(var(--f2h-card-tone), .18);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-total {
    --f2h-card-tone: 92, 160, 255;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-active {
    --f2h-card-tone: 99, 225, 181;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-provisioning {
    --f2h-card-tone: 163, 131, 255;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-provisioning.is-pending {
    --f2h-card-tone: 239, 189, 104;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-suspended {
    --f2h-card-tone: 255, 173, 103;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item.is-suspended.has-attention {
    --f2h-card-tone: 255, 120, 146;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item:is(.is-total, .is-active, .is-provisioning, .is-suspended) {
    border-color: rgba(var(--f2h-card-tone), .34);
    background:
        radial-gradient(circle at 92% 88%, rgba(var(--f2h-card-tone), .17), transparent 57%),
        linear-gradient(145deg, rgba(11, 28, 51, .97), rgba(6, 16, 32, .98));
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item:is(.is-total, .is-active, .is-provisioning, .is-suspended)::before {
    background: rgb(var(--f2h-card-tone));
    box-shadow: 0 0 17px rgba(var(--f2h-card-tone), .55);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-icon {
    width: 43px;
    height: 43px;
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    align-self: center;
    overflow: visible;
    border: 1px solid rgba(var(--f2h-card-tone), .42);
    border-radius: 12px;
    color: rgb(var(--f2h-card-tone));
    background: rgba(var(--f2h-card-tone), .12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .065),
        0 0 24px rgba(var(--f2h-card-tone), .13);
    font-size: 17px;
    line-height: 1;
    white-space: normal;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-label {
    grid-column: 2;
    color: #afbdd1;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-value {
    grid-column: 2;
    display: block;
    margin: 3px 0 2px;
    color: #f8fbff;
    font-size: 29px;
    font-weight: 820;
    letter-spacing: -.045em;
    line-height: 1.05;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item:is(.is-total, .is-active, .is-provisioning, .is-suspended) .f2h-service-inventory-summary-value {
    color: #f8fbff;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-meta {
    grid-column: 2;
    color: rgb(var(--f2h-card-tone));
    font-size: 12.5px;
    font-weight: 680;
    line-height: 1.35;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-actions {
    margin-top: 18px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-actions .btn {
    min-height: 42px;
    padding: 9px 16px;
    font-size: 13px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel {
    padding: 27px 28px 30px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel-head {
    margin-bottom: 18px;
    padding-bottom: 20px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel-head h2 {
    font-size: 26px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel-head p {
    color: #a2b0c5;
    font-size: 13.5px;
    line-height: 1.55;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-sync {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 11.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_length, .dataTables_filter) label,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_info {
    font-size: 12.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_filter input, .dataTables_length select) {
    min-height: 40px;
    font-size: 13.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th.sorting,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th.sorting_asc,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th.sorting_desc {
    font-size: 10.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td {
    height: 86px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name {
    max-width: min(500px, 34vw);
    font-size: 15px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
    max-width: min(520px, 35vw);
    margin-top: 6px;
    color: #93a5bf;
    font-size: 12.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint i {
    font-size: 10px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-billing strong,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-renewal > span:not(.w-hidden) {
    font-size: 13.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-billing small,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-renewal small {
    color: #8798b2;
    font-size: 11.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-status .status {
    min-height: 29px;
    padding: 6px 10px;
    font-size: 10.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage {
    min-height: 31px;
    padding: 6px 10px;
    font-size: 11.5px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage i {
    font-size: 9px;
}

/* Signal service cards */
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table {
    border-spacing: 0 10px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-row {
    --f2h-row-tone: 92, 160, 255;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-row.is-status-active {
    --f2h-row-tone: 111, 159, 255;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-status .status-active {
    border-color: rgba(111, 159, 255, .26);
    color: #a9c6ff !important;
    background: rgba(43, 88, 174, .22) !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-row.is-status-pending {
    --f2h-row-tone: 239, 189, 104;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-row.is-status-suspended {
    --f2h-row-tone: 255, 120, 146;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td {
    height: 92px;
    border-color: rgba(var(--f2h-row-tone), .26);
    color: #d8e3f2;
    background:
        radial-gradient(circle at 0 50%, rgba(var(--f2h-row-tone), .065), transparent 62%),
        linear-gradient(180deg, rgba(12, 28, 52, .98), rgba(6, 17, 34, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .052);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:first-child {
    width: 72px;
    border-inline-start: 3px solid rgb(var(--f2h-row-tone));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .052),
        inset 12px 0 24px -20px rgba(var(--f2h-row-tone), .85);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th:first-child {
    width: 72px !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-health-icon {
    width: 44px;
    height: 44px;
    border-color: rgba(var(--f2h-row-tone), .43);
    border-radius: 12px;
    color: rgb(var(--f2h-row-tone));
    background:
        radial-gradient(circle at 35% 20%, rgba(var(--f2h-row-tone), .19), transparent 3rem),
        rgba(10, 27, 50, .96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 24px rgba(var(--f2h-row-tone), .12);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-health-icon > i {
    font-size: 15px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-health-icon > img {
    width: 25px;
    max-height: 27px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name {
    max-width: min(520px, 36vw);
    color: #f6faff;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.012em;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name:hover,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name:focus-visible {
    color: rgb(var(--f2h-row-tone));
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
    color: #a2b4cc;
    font-size: 13px;
    font-weight: 620;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint i {
    color: rgb(var(--f2h-row-tone));
    font-size: 10px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-billing strong,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-renewal > span:not(.w-hidden) {
    color: #f2f7ff;
    font-size: 14.5px;
    font-weight: 780;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-billing small,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-renewal small {
    color: #91a4bf;
    font-size: 12px;
    font-weight: 620;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-status .status {
    min-height: 31px;
    padding: 7px 11px;
    font-size: 11px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage {
    min-height: 34px;
    padding: 7px 11px;
    border-color: rgba(var(--f2h-row-tone), .34);
    color: #eaf6ff;
    background: rgba(var(--f2h-row-tone), .09);
    font-size: 12px;
    font-weight: 780;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage i {
    color: rgb(var(--f2h-row-tone));
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-status-note {
    display: block;
    margin: 5px 0 0;
    color: #91a4bf;
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    white-space: normal;
}

@media (hover: hover) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row:hover > td {
        border-color: rgba(var(--f2h-row-tone), .48);
        color: #f1f6ff;
        background:
            radial-gradient(circle at 0 50%, rgba(var(--f2h-row-tone), .11), transparent 64%),
            linear-gradient(180deg, rgba(15, 34, 61, .99), rgba(8, 21, 40, .99));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075);
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-row:hover .f2h-service-inventory-manage {
        border-color: rgba(var(--f2h-row-tone), .52);
        color: #fff;
        background: rgba(var(--f2h-row-tone), .15);
        box-shadow: 0 0 19px rgba(var(--f2h-row-tone), .1);
    }
}

body.f2h-template-clientareaproducts.f2h-authenticated #Primary_Sidebar-My_Services_Status_Filter-Terminated,
body.f2h-template-clientareaproducts.f2h-authenticated #Primary_Sidebar-My_Services_Status_Filter-Cancelled {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-hero {
        gap: 20px;
        padding: 21px 18px 18px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-copy h1 {
        font-size: clamp(32px, 10vw, 40px);
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-copy > p {
        font-size: 14.5px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
        min-height: 106px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-actions .btn {
        flex: 1 1 150px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row {
        border-color: rgba(var(--f2h-row-tone), .3);
        background:
            radial-gradient(circle at 0 0, rgba(var(--f2h-row-tone), .13), transparent 12rem),
            linear-gradient(145deg, rgba(11, 28, 51, .98), rgba(6, 16, 32, .99));
        box-shadow:
            inset 3px 0 0 rgb(var(--f2h-row-tone)),
            inset 0 1px 0 rgba(255, 255, 255, .06),
            0 14px 29px rgba(0, 3, 15, .2);
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel {
        padding: 21px 16px 19px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel-head p {
        font-size: 13px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td,
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td.dtr-hidden {
        height: auto !important;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-health {
        width: 44px !important;
        height: 44px !important;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-identity {
        min-height: 54px;
        padding-inline-start: 57px !important;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal) {
        min-height: 0;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > .f2h-service-inventory-status {
        min-height: 0;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name {
        max-width: 100%;
        font-size: 15.5px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
        max-width: 100%;
        font-size: 12.5px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > :where(.f2h-service-inventory-billing, .f2h-service-inventory-renewal)::before {
        font-size: 10px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage {
        width: auto;
        overflow: visible;
        gap: 6px;
        border-color: rgba(var(--f2h-row-tone), .36);
        color: #eaf6ff;
        background: rgba(var(--f2h-row-tone), .1);
    }
}

@media (max-width: 479.98px) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-summary-item {
        min-height: 96px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-sync > i::after {
        animation: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Order catalogue
   -------------------------------------------------------------------------- */

body.f2h-template-order-catalog {
    --f2h-catalog-copy: #c7d6ed;
    --f2h-catalog-muted: #93a9c8;
    --f2h-catalog-heading: #f8fbff;
    --f2h-catalog-line: rgba(118, 166, 236, .22);
    --f2h-catalog-panel: rgba(8, 23, 62, .92);
    color: var(--f2h-catalog-copy);
    background:
        radial-gradient(circle at 82% 5%, rgba(23, 116, 224, .16), transparent 34rem),
        radial-gradient(circle at 8% 22%, rgba(79, 60, 196, .12), transparent 30rem),
        linear-gradient(180deg, #050d27 0%, #03091d 52%, #02061a 100%) !important;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

body.f2h-template-order-catalog #main-body {
    min-height: 0;
    padding: 20px 0 0;
    color: var(--f2h-catalog-copy);
    background:
        linear-gradient(rgba(75, 124, 212, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75, 124, 212, .035) 1px, transparent 1px),
        radial-gradient(circle at 88% 8%, rgba(33, 188, 246, .1), transparent 29rem),
        radial-gradient(circle at 4% 24%, rgba(111, 76, 230, .1), transparent 26rem),
        linear-gradient(180deg, #050d27 0%, #03091d 60%, #02061a 100%);
    background-size: 54px 54px, 54px 54px, auto, auto, auto;
}

body.f2h-template-order-catalog #main-body > .f2h-main-body-wrap.container {
    max-width: 1680px;
    padding-top: 0;
    padding-bottom: 22px;
}

body.f2h-template-order-catalog #main-body .primary-content > div[style*="background-color:#ffffd2"] {
    margin: 0 0 18px !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(240, 192, 92, .32);
    border-radius: 14px;
    color: #f4dca8 !important;
    background: linear-gradient(135deg, rgba(95, 65, 18, .42), rgba(46, 34, 18, .55)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    font-size: 14px !important;
    line-height: 1.45;
}

body.f2h-template-order-catalog #main-body .primary-content > p:last-child {
    margin: 20px 0 0;
    color: #8299b9;
    font-size: 13px;
    text-align: center;
}

body.f2h-template-order-catalog #main-body .primary-content > p:last-child a {
    color: #a9bdd7;
}

@media (min-width: 1440px) {
    body.f2h-template-order-catalog #main-body > .f2h-main-body-wrap.container {
        width: min(calc(100% - 64px), 1680px);
        max-width: 1680px;
    }
}

.f2h-order-catalog {
    position: relative;
    color: var(--f2h-catalog-copy);
}

.f2h-order-catalog :where(h1, h2, h3, p) {
    text-shadow: none;
}

.f2h-order-catalog-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 34px;
    overflow: hidden;
    margin-bottom: 40px;
    padding: clamp(32px, 4.2vw, 58px);
    border: 1px solid rgba(91, 153, 244, .34);
    border-radius: 40px 16px 40px 16px;
    background:
        radial-gradient(circle at 92% 7%, rgba(36, 213, 255, .22), transparent 34%),
        radial-gradient(circle at 8% 0%, rgba(105, 71, 231, .3), transparent 38%),
        linear-gradient(132deg, rgba(15, 35, 94, .97), rgba(5, 18, 53, .96) 58%, rgba(5, 39, 69, .96));
    box-shadow:
        0 28px 80px rgba(0, 6, 32, .34),
        inset 0 1px rgba(255, 255, 255, .08),
        inset 0 -1px rgba(41, 137, 227, .08);
}

.f2h-order-catalog-hero::before,
.f2h-order-catalog-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.f2h-order-catalog-hero::before {
    top: -160px;
    right: -100px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(75, 212, 255, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 64px rgba(48, 174, 255, .035),
        0 0 0 128px rgba(48, 174, 255, .025);
}

.f2h-order-catalog-hero::after {
    inset: 0;
    opacity: .4;
    background-image:
        linear-gradient(rgba(102, 151, 229, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 151, 229, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
}

.f2h-order-catalog-hero-copy {
    align-self: center;
    min-width: 0;
}

.f2h-order-catalog-eyebrow,
.f2h-order-catalog-section-heading > div > span,
.f2h-order-continuity > div:nth-child(2) > span,
.f2h-order-secondary-services > div:first-child > span,
.f2h-order-help > div > span {
    color: #76dcff;
    font-size: 12px;
    font-weight: 820;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.f2h-order-catalog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 9px 14px;
    border: 1px solid rgba(72, 210, 255, .27);
    border-radius: 999px;
    background: rgba(6, 35, 76, .56);
    box-shadow: inset 0 1px rgba(255, 255, 255, .055);
}

.f2h-order-catalog-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55ecc0;
    box-shadow: 0 0 0 5px rgba(85, 236, 192, .08), 0 0 15px rgba(85, 236, 192, .78);
}

.f2h-order-catalog-hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--f2h-catalog-heading);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 820;
    line-height: .99;
    letter-spacing: -.055em;
}

.f2h-order-catalog-hero-copy > p {
    max-width: 720px;
    margin: 24px 0 0;
    color: #c8d8ee;
    font-size: clamp(17px, 1.3vw, 19px);
    font-weight: 520;
    line-height: 1.65;
}

.f2h-order-catalog-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
}

.f2h-order-catalog-jumps a {
    padding: 9px 13px;
    border: 1px solid rgba(129, 173, 240, .24);
    border-radius: 11px;
    color: #d8e7fa;
    background: rgba(6, 21, 58, .58);
    font-size: 13px;
    font-weight: 720;
    line-height: 1;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.f2h-order-catalog-jumps a:hover,
.f2h-order-catalog-jumps a:focus-visible {
    border-color: rgba(72, 210, 255, .55);
    color: #fff;
    background: rgba(26, 90, 159, .46);
}

.f2h-order-catalog-hero-panel {
    align-self: center;
    padding: 23px;
    border: 1px solid rgba(106, 176, 244, .28);
    border-radius: 25px 12px 25px 12px;
    background: linear-gradient(145deg, rgba(9, 28, 73, .88), rgba(4, 17, 48, .82));
    box-shadow: 0 22px 54px rgba(0, 4, 27, .3), inset 0 1px rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}

.f2h-order-catalog-hero-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(117, 163, 230, .16);
    color: #f5f9ff;
    font-size: 14px;
    font-weight: 780;
}

.f2h-order-catalog-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7aebc9;
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-order-catalog-online i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #62e8bd;
    box-shadow: 0 0 11px rgba(98, 232, 189, .8);
}

.f2h-order-catalog-flow {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 8px 0 4px;
    list-style: none;
}

.f2h-order-catalog-flow li {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    min-height: 67px;
}

.f2h-order-catalog-flow li:not(:last-child)::after {
    position: absolute;
    top: 49px;
    bottom: -9px;
    left: 20px;
    width: 1px;
    content: "";
    background: linear-gradient(#2ba7ff, rgba(78, 103, 219, .15));
}

.f2h-order-catalog-flow li > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(86, 174, 244, .34);
    border-radius: 13px;
    color: #87e4ff;
    background: linear-gradient(145deg, rgba(16, 73, 137, .78), rgba(31, 38, 102, .84));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 850;
}

.f2h-order-catalog-flow strong,
.f2h-order-catalog-flow small {
    display: block;
}

.f2h-order-catalog-flow strong {
    margin-bottom: 3px;
    color: #f5f9ff;
    font-size: 15px;
    font-weight: 780;
}

.f2h-order-catalog-flow small {
    color: #9db1cd;
    font-size: 13px;
    font-weight: 540;
    line-height: 1.4;
}

.f2h-order-catalog-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 17px;
    border-top: 1px solid rgba(117, 163, 230, .16);
}

.f2h-order-catalog-platforms span {
    color: #a9bad2;
    font-size: 11px;
    font-weight: 730;
    letter-spacing: .035em;
}

.f2h-order-catalog-platforms span:not(:last-child)::after {
    margin-left: 8px;
    color: #2e85d6;
    content: "/";
}

.f2h-order-catalog-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin: 0 6px 22px;
}

.f2h-order-catalog-section-heading h2,
.f2h-order-continuity h2,
.f2h-order-secondary-services h2,
.f2h-order-help h2 {
    margin: 7px 0 0;
    color: var(--f2h-catalog-heading);
    font-size: clamp(27px, 2.6vw, 38px);
    font-weight: 810;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.f2h-order-catalog-section-heading p {
    max-width: 520px;
    margin: 0;
    color: #b6c7dc;
    font-size: 15px;
    font-weight: 520;
    line-height: 1.55;
    text-align: right;
}

.f2h-order-choice-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.f2h-order-choice-card {
    --f2h-choice-rgb: 46, 134, 255;
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 302px;
    flex-direction: column;
    overflow: hidden;
    padding: 27px;
    border: 1px solid rgba(var(--f2h-choice-rgb), .31);
    border-radius: 32px 13px 32px 13px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--f2h-choice-rgb), .2), transparent 42%),
        linear-gradient(145deg, rgba(10, 29, 72, .96), rgba(5, 17, 48, .95));
    box-shadow:
        0 20px 50px rgba(0, 5, 30, .23),
        inset 0 1px rgba(255, 255, 255, .065),
        inset 4px 0 rgba(var(--f2h-choice-rgb), .82);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
}

.f2h-order-choice-card::before,
.f2h-order-choice-card::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.f2h-order-choice-card::before {
    top: -95px;
    right: -80px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(var(--f2h-choice-rgb), .14);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(var(--f2h-choice-rgb), .025);
}

.f2h-order-choice-card::after {
    right: 28px;
    bottom: 28px;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--f2h-choice-rgb), .7));
}

.f2h-order-choice-card.is-hosting {
    --f2h-choice-rgb: 49, 151, 255;
    grid-column: span 7;
}

.f2h-order-choice-card.is-reseller {
    --f2h-choice-rgb: 142, 104, 255;
    grid-column: span 5;
}

.f2h-order-choice-card.is-vps {
    --f2h-choice-rgb: 47, 219, 255;
    grid-column: span 4;
}

.f2h-order-choice-card.is-cloud {
    --f2h-choice-rgb: 101, 231, 190;
    grid-column: span 4;
}

.f2h-order-choice-card.is-dedicated {
    --f2h-choice-rgb: 255, 153, 94;
    grid-column: span 4;
}

.f2h-order-choice-card.is-domain {
    --f2h-choice-rgb: 244, 104, 175;
    display: grid;
    grid-column: span 12;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    min-height: 156px;
}

.f2h-order-choice-card:hover {
    border-color: rgba(var(--f2h-choice-rgb), .55);
    box-shadow:
        0 24px 58px rgba(0, 5, 30, .3),
        0 0 34px rgba(var(--f2h-choice-rgb), .09),
        inset 0 1px rgba(255, 255, 255, .08),
        inset 4px 0 rgba(var(--f2h-choice-rgb), 1);
}

.f2h-order-choice-icon {
    display: grid;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    place-items: center;
    margin-bottom: 22px;
    border: 1px solid rgba(var(--f2h-choice-rgb), .45);
    border-radius: 15px;
    color: rgb(var(--f2h-choice-rgb));
    background: linear-gradient(145deg, rgba(var(--f2h-choice-rgb), .18), rgba(var(--f2h-choice-rgb), .055));
    box-shadow: 0 9px 24px rgba(var(--f2h-choice-rgb), .13), inset 0 1px rgba(255, 255, 255, .08);
    font-size: 19px;
}

.f2h-order-choice-card.is-domain .f2h-order-choice-icon {
    margin-bottom: 0;
}

.f2h-order-choice-label {
    display: block;
    margin-bottom: 8px;
    color: rgb(var(--f2h-choice-rgb));
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: .115em;
    text-transform: uppercase;
}

.f2h-order-choice-copy h2 {
    max-width: 580px;
    margin: 0;
    color: #f8fbff;
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.f2h-order-choice-copy p {
    max-width: 720px;
    margin: 13px 0 0;
    color: #afc1d9;
    font-size: 16px;
    font-weight: 520;
    line-height: 1.58;
}

.f2h-order-choice-copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.f2h-order-choice-copy li {
    padding: 7px 10px;
    border: 1px solid rgba(var(--f2h-choice-rgb), .2);
    border-radius: 9px;
    color: #cbd9eb;
    background: rgba(4, 15, 42, .5);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

.f2h-order-choice-action {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
    color: #f4f9ff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.f2h-order-choice-action i,
.f2h-order-continuity > a i,
.f2h-order-help > a i {
    color: rgb(var(--f2h-choice-rgb, 72, 187, 255));
    font-size: 12px;
    transition: transform .18s ease;
}

.f2h-order-choice-action:hover,
.f2h-order-choice-action:focus-visible {
    color: #fff;
    text-decoration: none;
}

.f2h-order-choice-action:hover i,
.f2h-order-choice-action:focus-visible i,
.f2h-order-continuity > a:hover i,
.f2h-order-continuity > a:focus-visible i,
.f2h-order-help > a:hover i,
.f2h-order-help > a:focus-visible i {
    transform: translateX(4px);
}

.f2h-order-choice-split-actions {
    display: flex;
    gap: 10px;
    justify-self: end;
}

.f2h-order-choice-split-actions a {
    min-width: 120px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--f2h-choice-rgb), .36);
    border-radius: 12px;
    color: #f7fbff;
    background: rgba(var(--f2h-choice-rgb), .12);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.f2h-order-choice-split-actions a:first-child {
    border-color: transparent;
    background: linear-gradient(135deg, #1267ff, #2b8dff);
    box-shadow: 0 12px 28px rgba(18, 103, 255, .24), inset 0 1px rgba(255, 255, 255, .2);
}

.f2h-order-choice-split-actions a:hover,
.f2h-order-choice-split-actions a:focus-visible {
    color: #fff;
    filter: brightness(1.1);
}

.f2h-order-continuity,
.f2h-order-locations,
.f2h-order-secondary-services,
.f2h-order-help {
    display: grid;
    align-items: center;
    margin-top: 18px;
    border: 1px solid var(--f2h-catalog-line);
    background: linear-gradient(135deg, rgba(10, 31, 77, .94), rgba(5, 19, 49, .95));
    box-shadow: 0 18px 46px rgba(0, 5, 28, .2), inset 0 1px rgba(255, 255, 255, .055);
}

.f2h-order-locations {
    display: block;
    padding: 27px;
    border-radius: 14px 34px 14px 34px;
    background:
        radial-gradient(circle at 96% 0%, rgba(47, 219, 255, .14), transparent 34%),
        linear-gradient(135deg, rgba(8, 30, 73, .95), rgba(5, 18, 49, .96));
    scroll-margin-top: 26px;
}

.f2h-order-locations-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.f2h-order-locations-heading > div > span {
    color: #68dcff;
    font-size: 12px;
    font-weight: 820;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-order-locations-heading h2 {
    margin: 6px 0 0;
    color: #f8fbff;
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 810;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.f2h-order-locations-heading p {
    max-width: 470px;
    margin: 0;
    color: #9fb2cc;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.f2h-order-location-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.f2h-order-location-grid > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 54px;
    padding: 11px 13px;
    border: 1px solid rgba(81, 191, 241, .18);
    border-radius: 13px;
    color: #d8e6f7;
    background: rgba(4, 17, 46, .58);
    font-size: 13px;
    font-weight: 730;
    line-height: 1.25;
    text-decoration: none;
}

.f2h-order-location-marker {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(87, 223, 255, .25);
    border-radius: 8px;
    background: rgba(38, 169, 217, .09);
}

.f2h-order-location-marker i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #59e9be;
    box-shadow: 0 0 10px rgba(89, 233, 190, .65);
}

.f2h-order-location-grid > a > i {
    color: #5ed9ff;
    font-size: 11px;
}

.f2h-order-location-grid > a:hover,
.f2h-order-location-grid > a:focus-visible {
    border-color: rgba(90, 217, 255, .45);
    color: #fff;
    background: rgba(17, 72, 126, .5);
}

.f2h-order-continuity {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    padding: 27px;
    border-radius: 14px 34px 14px 34px;
}

.f2h-order-continuity-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(92, 227, 194, .35);
    border-radius: 17px;
    color: #66e7c2;
    background: rgba(36, 149, 131, .12);
    box-shadow: 0 10px 28px rgba(32, 184, 153, .1), inset 0 1px rgba(255, 255, 255, .08);
    font-size: 20px;
}

.f2h-order-continuity h2,
.f2h-order-secondary-services h2 {
    font-size: clamp(23px, 2vw, 30px);
}

.f2h-order-continuity p,
.f2h-order-help p {
    margin: 9px 0 0;
    color: #a8bad2;
    font-size: 15px;
    line-height: 1.55;
}

.f2h-order-continuity > a,
.f2h-order-help > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border: 1px solid rgba(88, 197, 255, .34);
    border-radius: 13px;
    color: #f5f9ff;
    background: rgba(26, 93, 155, .24);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.f2h-order-secondary-services {
    grid-template-columns: minmax(240px, .45fr) minmax(0, 1fr);
    gap: 26px;
    padding: 27px;
    border-radius: 30px 13px 30px 13px;
}

.f2h-order-secondary-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.f2h-order-secondary-links > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 13px 15px;
    border: 1px solid rgba(116, 162, 229, .19);
    border-radius: 14px;
    color: #edf5ff;
    background: rgba(5, 17, 45, .55);
    font-size: 14px;
    font-weight: 760;
    text-decoration: none;
}

.f2h-order-secondary-links > a > i {
    color: #6ddcff;
}

.f2h-order-secondary-links > a > span {
    color: #92a9c8;
    font-size: 12px;
}

.f2h-order-secondary-links > a:hover,
.f2h-order-secondary-links > a:focus-visible {
    border-color: rgba(84, 203, 255, .43);
    color: #fff;
    background: rgba(16, 62, 114, .48);
}

.f2h-order-group-directory {
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--f2h-catalog-line);
    border-radius: 18px;
    background: rgba(5, 17, 45, .76);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.f2h-order-group-directory summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 18px 22px;
    color: #edf5ff;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    font-weight: 790;
}

.f2h-order-group-directory summary::-webkit-details-marker {
    display: none;
}

.f2h-order-group-directory summary small {
    display: block;
    margin-bottom: 5px;
    color: #7191b9;
    font-size: 10.5px;
    font-weight: 820;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-order-group-directory summary > i {
    color: #69d9ff;
    transition: transform .18s ease;
}

.f2h-order-group-directory[open] summary > i {
    transform: rotate(45deg);
}

.f2h-order-group-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
    border-top: 1px solid rgba(116, 162, 229, .14);
}

.f2h-order-group-directory-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(116, 162, 229, .16);
    border-radius: 12px;
    color: #c9d8ec;
    background: rgba(12, 32, 70, .58);
    font-size: 13px;
    font-weight: 720;
    text-decoration: none;
}

.f2h-order-group-directory-grid a i {
    color: #68d8ff;
    font-size: 11px;
}

.f2h-order-group-directory-grid a:hover,
.f2h-order-group-directory-grid a:focus-visible {
    border-color: rgba(73, 202, 255, .42);
    color: #fff;
    background: rgba(23, 77, 137, .5);
}

.f2h-order-help {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    padding: 30px;
    border-color: rgba(122, 98, 237, .28);
    border-radius: 13px 32px 13px 32px;
    background:
        radial-gradient(circle at 85% 0%, rgba(103, 75, 230, .18), transparent 45%),
        linear-gradient(135deg, rgba(17, 27, 74, .96), rgba(6, 18, 48, .96));
}

.f2h-order-help > a {
    border-color: transparent;
    background: linear-gradient(135deg, #1267ff, #2e8dff);
    box-shadow: 0 13px 30px rgba(18, 103, 255, .25), inset 0 1px rgba(255, 255, 255, .2);
}

.f2h-order-help > a i {
    color: #fff;
}

@media (max-width: 1199.98px) {
    .f2h-order-catalog-hero {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .68fr);
    }

    .f2h-order-choice-card.is-hosting,
    .f2h-order-choice-card.is-reseller,
    .f2h-order-choice-card.is-vps,
    .f2h-order-choice-card.is-cloud,
    .f2h-order-choice-card.is-dedicated {
        grid-column: span 6;
    }

    .f2h-order-choice-card.is-dedicated {
        grid-column: span 12;
        min-height: 260px;
    }

    .f2h-order-location-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .f2h-order-catalog-hero {
        grid-template-columns: 1fr;
    }

    .f2h-order-catalog-hero-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 0 22px;
    }

    .f2h-order-catalog-hero-panel-head,
    .f2h-order-catalog-platforms {
        grid-column: 1 / -1;
    }

    .f2h-order-catalog-flow {
        grid-column: 1 / -1;
    }

    .f2h-order-continuity,
    .f2h-order-secondary-services {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .f2h-order-continuity > a,
    .f2h-order-secondary-services .f2h-order-secondary-links {
        grid-column: 1 / -1;
    }

    .f2h-order-continuity > a {
        justify-self: start;
    }

    .f2h-order-group-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-order-catalog #main-body > .f2h-main-body-wrap.container {
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .f2h-order-catalog-hero {
        gap: 27px;
        margin-bottom: 32px;
        padding: 27px 22px;
        border-radius: 28px 12px 28px 12px;
    }

    .f2h-order-catalog-hero h1 {
        font-size: clamp(38px, 12vw, 54px);
    }

    .f2h-order-catalog-hero-copy > p {
        font-size: 16px;
    }

    .f2h-order-catalog-hero-panel {
        display: block;
        padding: 19px;
    }

    .f2h-order-catalog-section-heading {
        display: block;
        margin-right: 2px;
        margin-left: 2px;
    }

    .f2h-order-catalog-section-heading p {
        margin-top: 10px;
        text-align: left;
    }

    .f2h-order-locations-heading {
        display: block;
    }

    .f2h-order-locations-heading p {
        margin-top: 9px;
        text-align: left;
    }

    .f2h-order-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-order-choice-grid {
        gap: 14px;
    }

    .f2h-order-choice-card.is-hosting,
    .f2h-order-choice-card.is-reseller,
    .f2h-order-choice-card.is-vps,
    .f2h-order-choice-card.is-cloud,
    .f2h-order-choice-card.is-dedicated,
    .f2h-order-choice-card.is-domain {
        display: flex;
        grid-column: span 12;
        min-height: 0;
    }

    .f2h-order-choice-card {
        padding: 23px;
        border-radius: 25px 11px 25px 11px;
    }

    .f2h-order-choice-copy h2 {
        font-size: 25px;
    }

    .f2h-order-choice-copy p {
        font-size: 15.5px;
    }

    .f2h-order-choice-split-actions {
        width: 100%;
        justify-self: auto;
        margin-top: 22px;
    }

    .f2h-order-choice-split-actions a {
        min-width: 0;
        flex: 1 1 0;
    }

    .f2h-order-continuity,
    .f2h-order-locations,
    .f2h-order-secondary-services,
    .f2h-order-help {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        flex-direction: column;
        padding: 23px;
    }

    .f2h-order-secondary-links,
    .f2h-order-location-grid,
    .f2h-order-group-directory-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .f2h-order-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-order-group-directory summary {
        min-height: 72px;
        padding: 16px 18px;
    }

    .f2h-order-group-directory-grid {
        padding-right: 14px;
        padding-left: 14px;
    }

    .f2h-order-group-directory-grid a {
        margin-top: 10px;
    }
}

@media (max-width: 419.98px) {
    .f2h-order-catalog-jumps {
        gap: 7px;
    }

    .f2h-order-catalog-jumps a {
        padding: 8px 10px;
        font-size: 12px;
    }

    .f2h-order-choice-split-actions {
        flex-direction: column;
    }

    .f2h-order-location-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-order-catalog :where(a, i) {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Order hub — second-generation compact service chooser
   -------------------------------------------------------------------------- */

body.f2h-template-order-hub {
    --f2h-shop-text: #edf5ff;
    --f2h-shop-copy: #b7c8de;
    --f2h-shop-muted: #8fa6c3;
    color: var(--f2h-shop-text);
    background: #03091e !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body.f2h-template-order-hub #main-body {
    min-height: 0;
    padding: 20px 0 0;
    color: var(--f2h-shop-text);
    background:
        radial-gradient(circle at 82% 0%, rgba(23, 132, 233, .14), transparent 34rem),
        radial-gradient(circle at 3% 28%, rgba(94, 69, 215, .1), transparent 30rem),
        linear-gradient(rgba(77, 124, 202, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 124, 202, .025) 1px, transparent 1px),
        linear-gradient(180deg, #050d27, #020719 86%);
    background-size: auto, auto, 52px 52px, 52px 52px, auto;
}

body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container {
    width: min(calc(100% - 48px), 1540px);
    max-width: 1540px;
    padding-top: 0;
    padding-bottom: 20px;
}

body.f2h-template-order-hub #main-body .primary-content > div[style*="background-color:#ffffd2"] {
    margin: 0 0 14px !important;
    padding: 10px 15px !important;
    border: 1px solid rgba(238, 187, 79, .32);
    border-radius: 12px;
    color: #f3dba6 !important;
    background: rgba(81, 55, 17, .52) !important;
    font-size: 14px !important;
    line-height: 1.45;
}

body.f2h-template-order-hub #main-body .primary-content > p:last-child {
    margin: 18px 0 0;
    color: #849ab8;
    font-size: 13px;
    text-align: center;
}

body.f2h-template-order-hub #main-body .primary-content > p:last-child a {
    color: #a9bdd7 !important;
}

.f2h-shop-hub,
.f2h-shop-hub * {
    box-sizing: border-box;
}

.f2h-shop-hub {
    color: var(--f2h-shop-copy);
}

.f2h-shop-hub :where(h1, h2, p) {
    text-shadow: none;
}

.f2h-shop-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    margin-bottom: 25px;
    padding: 29px 31px;
    border: 1px solid rgba(80, 155, 245, .28);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% -30%, rgba(39, 193, 255, .18), transparent 44%),
        linear-gradient(135deg, rgba(17, 38, 91, .94), rgba(5, 19, 54, .96));
    box-shadow: 0 18px 48px rgba(0, 4, 28, .28), inset 0 1px rgba(255, 255, 255, .07);
}

.f2h-shop-kicker,
.f2h-shop-section-heading > div > span,
.f2h-shop-locations > div:first-child > span,
.f2h-shop-directory-heading > div > span {
    color: #67d9ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.f2h-shop-kicker {
    display: inline-flex;
    gap: 9px;
    align-items: center;
}

.f2h-shop-kicker i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55ecc0;
    box-shadow: 0 0 12px rgba(85, 236, 192, .75);
}

.f2h-shop-header h1 {
    margin: 7px 0 0;
    color: #fff;
    font-size: clamp(36px, 3.4vw, 48px);
    font-weight: 820;
    line-height: 1.02;
    letter-spacing: -.04em;
}

.f2h-shop-header-copy > p {
    margin: 11px 0 0;
    color: #c1d1e5;
    font-size: 16.5px;
    font-weight: 520;
    line-height: 1.55;
}

.f2h-shop-header-tools {
    display: flex;
    gap: 14px;
    align-items: center;
}

.f2h-shop-signal {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(95, 157, 232, .2);
    border-radius: 13px;
    color: #b8cae0;
    background: rgba(4, 17, 48, .54);
    font-size: 13px;
    font-weight: 700;
}

.f2h-shop-signal i {
    width: 16px;
    height: 1px;
    background: #2c75b9;
}

.f2h-shop-cart-link,
.f2h-shop-support > a {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid rgba(73, 173, 255, .4);
    border-radius: 12px;
    color: #f5faff;
    background: rgba(20, 91, 157, .3);
    font-size: 14px;
    font-weight: 780;
    white-space: nowrap;
    text-decoration: none;
}

.f2h-shop-cart-link:hover,
.f2h-shop-cart-link:focus-visible,
.f2h-shop-support > a:hover,
.f2h-shop-support > a:focus-visible {
    border-color: rgba(91, 208, 255, .7);
    color: #fff;
    background: rgba(28, 110, 190, .44);
    text-decoration: none;
}

.f2h-shop-section-heading {
    display: flex;
    gap: 26px;
    align-items: end;
    justify-content: space-between;
    margin: 0 3px 15px;
}

.f2h-shop-section-heading h2,
.f2h-shop-locations h2,
.f2h-shop-directory h2 {
    margin: 4px 0 0;
    color: #f7fbff;
    font-size: clamp(23px, 2vw, 29px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.f2h-shop-section-heading p {
    margin: 0;
    color: #a8bbd3;
    font-size: 15px;
    line-height: 1.5;
    text-align: right;
}

.f2h-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.f2h-shop-card {
    --f2h-shop-rgb: 50, 148, 255;
    position: relative;
    display: flex;
    min-height: 228px;
    flex-direction: column;
    overflow: hidden;
    padding: 21px;
    border: 1px solid rgba(var(--f2h-shop-rgb), .27);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--f2h-shop-rgb), .14), transparent 46%),
        linear-gradient(145deg, rgba(10, 31, 73, .95), rgba(5, 18, 49, .96));
    box-shadow: 0 14px 35px rgba(0, 4, 26, .21), inset 0 1px rgba(255, 255, 255, .06);
}

.f2h-shop-card::before {
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--f2h-shop-rgb), .9), transparent);
}

.f2h-shop-card.is-reseller { --f2h-shop-rgb: 143, 107, 255; }
.f2h-shop-card.is-vps { --f2h-shop-rgb: 44, 214, 255; }
.f2h-shop-card.is-cloud { --f2h-shop-rgb: 86, 227, 183; }
.f2h-shop-card.is-dedicated { --f2h-shop-rgb: 255, 154, 91; }
.f2h-shop-card.is-domain { --f2h-shop-rgb: 237, 104, 181; }

.f2h-shop-card-top {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 16px;
}

.f2h-shop-card-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(var(--f2h-shop-rgb), .38);
    border-radius: 12px;
    color: rgb(var(--f2h-shop-rgb));
    background: rgba(var(--f2h-shop-rgb), .1);
    font-size: 17px;
}

.f2h-shop-card-type {
    color: rgb(var(--f2h-shop-rgb));
    font-size: 13px;
    font-weight: 810;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.f2h-shop-card h2 {
    margin: 0;
    color: #f8fbff;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.f2h-shop-card > p {
    margin: 9px 0 17px;
    color: #afc1d8;
    font-size: 15px;
    font-weight: 520;
    line-height: 1.52;
}

.f2h-shop-card > a,
.f2h-shop-card-actions a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    color: #f5f9ff;
    font-size: 14.5px;
    font-weight: 790;
    line-height: 1.35;
    text-decoration: none;
}

.f2h-shop-card > a i,
.f2h-shop-card-actions a i {
    color: rgb(var(--f2h-shop-rgb));
    font-size: 12px;
    transition: transform .18s ease;
}

.f2h-shop-card > a:hover,
.f2h-shop-card > a:focus-visible,
.f2h-shop-card-actions a:hover,
.f2h-shop-card-actions a:focus-visible {
    color: #fff;
    text-decoration: none;
}

.f2h-shop-card > a:hover i,
.f2h-shop-card > a:focus-visible i,
.f2h-shop-card-actions a:hover i,
.f2h-shop-card-actions a:focus-visible i {
    transform: translateX(3px);
}

.f2h-shop-card-actions {
    display: flex;
    gap: 17px;
    align-items: center;
    margin-top: auto;
}

.f2h-shop-card-actions a {
    margin-top: 0;
}

.f2h-shop-card-actions a + a {
    color: #aebfd4;
}

.f2h-shop-locations,
.f2h-shop-directory,
.f2h-shop-support {
    margin-top: 16px;
    border: 1px solid rgba(99, 154, 224, .2);
    border-radius: 18px;
    background: rgba(6, 20, 52, .88);
    box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.f2h-shop-locations {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 21px;
    scroll-margin-top: 24px;
}

.f2h-shop-location-links,
.f2h-shop-directory-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.f2h-shop-location-links a,
.f2h-shop-directory-links a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(100, 160, 228, .16);
    border-radius: 11px;
    color: #d7e4f4;
    background: rgba(4, 15, 42, .54);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.f2h-shop-location-links a > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e7ba;
    box-shadow: 0 0 9px rgba(85, 231, 186, .6);
}

.f2h-shop-location-links a > span,
.f2h-shop-directory-links a i {
    color: #58cfff;
    font-size: 11px;
}

.f2h-shop-location-links a:hover,
.f2h-shop-location-links a:focus-visible,
.f2h-shop-directory-links a:hover,
.f2h-shop-directory-links a:focus-visible {
    border-color: rgba(83, 203, 255, .44);
    color: #fff;
    background: rgba(15, 65, 117, .5);
    text-decoration: none;
}

.f2h-shop-directory {
    padding: 21px;
}

.f2h-shop-directory-heading {
    display: flex;
    gap: 20px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.f2h-shop-directory-heading small {
    color: #96acc7;
    font-size: 14px;
    font-weight: 650;
}

.f2h-shop-directory-links a {
    grid-template-columns: minmax(0, 1fr) auto;
}

.f2h-shop-support {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
}

.f2h-shop-support > div {
    display: flex;
    gap: 13px;
    align-items: center;
}

.f2h-shop-support-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(89, 210, 255, .3);
    border-radius: 12px;
    color: #62d8ff;
    background: rgba(41, 139, 194, .1);
}

.f2h-shop-support p {
    margin: 0;
    color: #acbed5;
    font-size: 15px;
    line-height: 1.5;
}

.f2h-shop-support p strong {
    color: #f5f9ff;
}

@media (max-width: 1100px) {
    .f2h-shop-header {
        grid-template-columns: 1fr;
    }

    .f2h-shop-header-tools {
        justify-content: space-between;
    }

    .f2h-shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-shop-locations {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-order-hub #main-body {
        padding-top: 14px;
    }

    body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container {
        width: min(calc(100% - 24px), 1540px);
        padding-bottom: 14px;
    }

    .f2h-shop-header {
        gap: 20px;
        margin-bottom: 22px;
        padding: 23px 20px;
        border-radius: 18px;
    }

    .f2h-shop-header h1 {
        font-size: 36px;
    }

    .f2h-shop-header-copy > p {
        font-size: 16px;
    }

    .f2h-shop-header-tools,
    .f2h-shop-section-heading,
    .f2h-shop-directory-heading,
    .f2h-shop-support {
        align-items: flex-start;
        flex-direction: column;
    }

    .f2h-shop-signal {
        width: 100%;
        justify-content: space-between;
    }

    .f2h-shop-section-heading p {
        margin-top: 7px;
        text-align: left;
    }

    .f2h-shop-grid,
    .f2h-shop-location-links,
    .f2h-shop-directory-links {
        grid-template-columns: 1fr;
    }

    .f2h-shop-card {
        min-height: 214px;
        padding: 20px;
    }

    .f2h-shop-card h2 {
        font-size: 22px;
    }

    .f2h-shop-locations,
    .f2h-shop-directory {
        padding: 18px;
    }

    .f2h-shop-directory-heading small {
        margin-top: 5px;
    }

    .f2h-shop-support {
        gap: 15px;
    }

    .f2h-shop-support > a {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .f2h-shop-header-tools {
        width: 100%;
    }

    .f2h-shop-cart-link {
        width: 100%;
    }

    .f2h-shop-signal {
        gap: 6px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 12px;
    }

    .f2h-shop-card-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-shop-hub :where(a, i) {
        transition: none !important;
    }
}

/* Order hub v2 — grouped buying paths rather than a uniform card dashboard. */
body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container {
    width: min(calc(100% - 48px), 1720px);
    max-width: 1720px;
}

body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container > .row {
    margin-right: 0;
    margin-left: 0;
}

body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container > .row > .primary-content {
    padding-right: 0;
    padding-left: 0;
}

body.f2h-template-order-hub #main-body .primary-content > p:last-child {
    font-size: 14px;
}

.f2h-shop-hub-v2 .f2h-shop-header {
    margin-bottom: 17px;
    padding: 25px 28px;
}

.f2h-shop-hub-v2 .f2h-shop-kicker {
    font-size: 14px;
}

.f2h-shop-hub-v2 .f2h-shop-header h1 {
    margin-top: 6px;
    font-size: clamp(34px, 2.8vw, 42px);
    line-height: 1.05;
}

.f2h-shop-hub-v2 .f2h-shop-header-copy > p {
    margin-top: 8px;
    font-size: 16px;
}

.f2h-shop-availability {
    display: inline-flex;
    min-height: 42px;
    gap: 9px;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid rgba(93, 159, 229, .2);
    border-radius: 12px;
    color: #bed0e5;
    background: rgba(4, 17, 48, .55);
    font-size: 14px;
    font-weight: 730;
    white-space: nowrap;
}

.f2h-shop-availability i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #54e5b7;
    box-shadow: 0 0 11px rgba(84, 229, 183, .66);
}

.f2h-shop-paths {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.2fr);
    grid-template-areas:
        "web compute"
        "support compute";
    gap: 15px;
    align-items: stretch;
}

.f2h-shop-path.is-web { grid-area: web; }
.f2h-shop-path.is-compute { grid-area: compute; }
.f2h-shop-paths > .f2h-shop-support {
    grid-area: support;
    min-height: 88px;
    margin: 0;
}

.f2h-shop-path,
.f2h-shop-utilities {
    --f2h-path-rgb: 54, 150, 255;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--f2h-path-rgb), .25);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--f2h-path-rgb), .12), transparent 24rem),
        linear-gradient(145deg, rgba(10, 29, 68, .96), rgba(4, 16, 43, .97));
    box-shadow: 0 16px 38px rgba(0, 4, 27, .23), inset 0 1px rgba(255, 255, 255, .055);
}

.f2h-shop-path::before,
.f2h-shop-utilities::before {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--f2h-path-rgb), .9), transparent);
}

.f2h-shop-path.is-web { --f2h-path-rgb: 66, 145, 255; }
.f2h-shop-path.is-compute { --f2h-path-rgb: 63, 213, 206; }

.f2h-shop-path-header {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 19px 20px 16px;
    border-bottom: 1px solid rgba(102, 157, 220, .16);
    background: rgba(10, 33, 72, .42);
}

.f2h-shop-path-icon,
.f2h-shop-utility-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    border: 1px solid rgba(var(--f2h-path-rgb), .34);
    border-radius: 12px;
    color: rgb(var(--f2h-path-rgb));
    background: rgba(var(--f2h-path-rgb), .1);
    font-size: 17px;
}

.f2h-shop-path-header span:not(.f2h-shop-path-icon),
.f2h-shop-utilities-header > div > span {
    display: block;
    margin-bottom: 2px;
    color: rgb(var(--f2h-path-rgb));
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.f2h-shop-path-header h2,
.f2h-shop-utilities-header h2 {
    margin: 0;
    color: #f8fbff;
    font-size: 25px;
    font-weight: 810;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.f2h-shop-options {
    padding: 5px 13px 13px;
}

.f2h-shop-option {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto 14px;
    min-height: 102px;
    gap: 14px;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(105, 160, 222, .14);
    color: #eef6ff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.f2h-shop-option:last-child {
    border-bottom: 0;
}

.f2h-shop-option:hover,
.f2h-shop-option:focus-visible {
    border-color: rgba(var(--f2h-path-rgb), .32);
    border-radius: 12px;
    color: #fff;
    background: rgba(var(--f2h-path-rgb), .075);
    outline: 0;
    text-decoration: none;
    transform: translateX(2px);
}

.f2h-shop-option-icon {
    display: grid;
    width: 41px;
    height: 41px;
    place-items: center;
    border: 1px solid rgba(var(--f2h-path-rgb), .24);
    border-radius: 11px;
    color: rgb(var(--f2h-path-rgb));
    background: rgba(var(--f2h-path-rgb), .08);
    font-size: 16px;
}

.f2h-shop-option-copy {
    min-width: 0;
}

.f2h-shop-option-copy strong,
.f2h-shop-option-copy small {
    display: block;
}

body.f2h-template-order-hub #main-body .f2h-shop-option-copy small {
    font-size: 14.5px !important;
}

.f2h-shop-option-copy strong {
    color: #f7fbff;
    font-size: 18px;
    font-weight: 790;
    line-height: 1.25;
}

.f2h-shop-option-copy small {
    margin-top: 5px;
    color: #aebfd5;
    font-size: 14.5px !important;
    line-height: 1.45;
}

.f2h-shop-option-use {
    padding: 6px 9px;
    border: 1px solid rgba(105, 164, 225, .18);
    border-radius: 999px;
    color: #b8c9dd;
    background: rgba(4, 17, 42, .48);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.f2h-shop-option-arrow {
    color: rgb(var(--f2h-path-rgb));
    font-size: 13px;
    transition: transform .18s ease;
}

.f2h-shop-option:hover .f2h-shop-option-arrow,
.f2h-shop-option:focus-visible .f2h-shop-option-arrow {
    transform: translateX(3px);
}

.f2h-shop-utilities {
    --f2h-path-rgb: 156, 112, 243;
    margin-top: 15px;
    padding: 19px 20px 20px;
}

.f2h-shop-utilities-header {
    display: flex;
    gap: 24px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.f2h-shop-utilities-header p {
    margin: 0;
    color: #a8bad1;
    font-size: 15px;
}

.f2h-shop-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.f2h-shop-utility {
    --f2h-path-rgb: 156, 112, 243;
    display: grid;
    min-height: 96px;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(var(--f2h-path-rgb), .2);
    border-radius: 14px;
    color: #edf5ff;
    background: rgba(4, 17, 43, .54);
    text-decoration: none;
}

.f2h-shop-utility.is-storage { --f2h-path-rgb: 67, 205, 211; }
.f2h-shop-utility.is-security { --f2h-path-rgb: 91, 224, 174; }
.f2h-shop-utility.is-domains { --f2h-path-rgb: 237, 112, 184; }

a.f2h-shop-utility:hover,
a.f2h-shop-utility:focus-visible {
    border-color: rgba(var(--f2h-path-rgb), .48);
    color: #fff;
    background: rgba(var(--f2h-path-rgb), .09);
    outline: 3px solid rgba(var(--f2h-path-rgb), .72);
    outline-offset: 2px;
    text-decoration: none;
}

.f2h-shop-utility > span:nth-child(2) strong,
.f2h-shop-utility > span:nth-child(2) small {
    display: block;
}

body.f2h-template-order-hub #main-body .f2h-shop-utility > span:nth-child(2) small {
    font-size: 14px !important;
}

.f2h-shop-utility > span:nth-child(2) strong {
    color: #f7fbff;
    font-size: 17px;
    font-weight: 780;
}

.f2h-shop-utility > span:nth-child(2) small {
    margin-top: 4px;
    color: #aebfd4;
    font-size: 14px !important;
    line-height: 1.4;
}

.f2h-shop-utility > i {
    color: rgb(var(--f2h-path-rgb));
    font-size: 13px;
}

.f2h-shop-domain-actions {
    display: flex;
    gap: 7px;
}

.f2h-shop-domain-actions a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid rgba(237, 112, 184, .28);
    border-radius: 9px;
    color: #f7d9ec;
    background: rgba(237, 112, 184, .08);
    font-size: 14px;
    font-weight: 760;
    text-decoration: none;
}

.f2h-shop-domain-actions a:hover,
.f2h-shop-domain-actions a:focus-visible {
    border-color: rgba(237, 112, 184, .58);
    color: #fff;
    background: rgba(237, 112, 184, .16);
    outline: 3px solid rgba(237, 112, 184, .72);
    outline-offset: 2px;
    text-decoration: none;
}

body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-cart-link,
body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-support > a {
    color: #f5faff !important;
}

body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-cart-link:hover,
body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-cart-link:focus-visible,
body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-support > a:hover,
body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-support > a:focus-visible {
    color: #fff !important;
}

body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-location-links a {
    color: #d7e4f4 !important;
}

body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-location-links a:hover,
body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-location-links a:focus-visible {
    color: #fff !important;
}

body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-domain-actions a {
    color: #f7d9ec !important;
}

body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-domain-actions a:hover,
body.f2h-template-order-hub #main-body .f2h-shop-hub-v2 .f2h-shop-domain-actions a:focus-visible {
    color: #fff !important;
}

@media (max-width: 1100px) {
    .f2h-shop-paths {
        grid-template-columns: 1fr;
        grid-template-areas:
            "web"
            "compute"
            "support";
    }

    .f2h-shop-utility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f2h-shop-utility.is-domains {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-order-hub #main-body > .f2h-main-body-wrap.container {
        width: calc(100% - 24px);
        padding-right: 0;
        padding-left: 0;
    }

    .f2h-shop-hub-v2 .f2h-shop-header {
        padding: 21px 19px;
    }

    .f2h-shop-hub-v2 .f2h-shop-header h1 {
        font-size: 32px;
    }

    .f2h-shop-hub-v2 .f2h-shop-header-tools {
        width: 100%;
        align-items: stretch;
        flex-direction: row;
    }

    .f2h-shop-availability,
    .f2h-shop-hub-v2 .f2h-shop-cart-link {
        flex: 1 1 0;
        white-space: normal;
    }

    .f2h-shop-option {
        min-height: 92px;
        grid-template-columns: 41px minmax(0, 1fr) 13px;
        gap: 11px;
        padding: 13px 7px;
    }

    .f2h-shop-option-use {
        display: none;
    }

    .f2h-shop-utilities-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .f2h-shop-utility-grid {
        grid-template-columns: 1fr;
    }

    .f2h-shop-utility.is-domains {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .f2h-shop-hub-v2 .f2h-shop-header-tools {
        flex-direction: column;
    }

    .f2h-shop-path-header,
    .f2h-shop-utilities {
        padding-right: 15px;
        padding-left: 15px;
    }

    .f2h-shop-option-copy strong {
        font-size: 17px;
    }

    .f2h-shop-utility {
        grid-template-columns: 41px minmax(0, 1fr);
    }

    .f2h-shop-utility > i {
        display: none;
    }

    .f2h-shop-utility.is-domains {
        align-items: start;
    }

    .f2h-shop-domain-actions {
        grid-column: 1 / -1;
        padding-left: 53px;
    }
}

@media (max-width: 767.98px) {
    body.f2h-shopping-cart .f2h-site-footer {
        padding: 38px 0 24px;
    }

    body.f2h-shopping-cart .f2h-site-footer .f2h-footer-grid {
        display: block;
    }

    body.f2h-shopping-cart .f2h-site-footer .f2h-footer-grid > div:not(.f2h-footer-brand) {
        display: none;
    }

    body.f2h-shopping-cart .f2h-site-footer .f2h-footer-brand {
        max-width: 340px;
        margin: 0;
    }

    body.f2h-shopping-cart .f2h-site-footer .f2h-footer-bottom {
        gap: 17px;
        margin-top: 26px;
        padding-top: 20px;
    }
}

/* Keep product-stage actions authoritative inside authenticated WHMCS pages. */
body.f2h-template-order-hub #main-body .primary-content .f2h-order-stage .f2h-stage-cta,
body.f2h-template-order-hub #main-body .primary-content .f2h-order-stage .f2h-stage-cart {
    color: #fff;
}

body.f2h-template-order-hub #main-body .primary-content .f2h-order-stage .f2h-stage-secondary a {
    color: #b2c2d7;
}

body.f2h-template-order-hub #main-body .primary-content .f2h-order-stage .f2h-stage-secondary a:hover,
body.f2h-template-order-hub #main-body .primary-content .f2h-order-stage .f2h-stage-secondary a:focus-visible {
    color: #6ed9ff;
}

@media print {
    body.f2h-document {
        padding: 0;
        background: #fff !important;
    }

    body > .invoice-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.f2h-shell {
        min-width: 0;
        overflow: visible !important;
        color: #111827 !important;
        background: #fff !important;
        color-scheme: light;
    }

    body.f2h-shell::before,
    .f2h-site-header,
    .f2h-page-banner,
    .f2h-site-footer,
    .f2h-skip-link,
    #fullpage-overlay {
        display: none !important;
    }

    body.f2h-shell .f2h-main,
    body.f2h-shell #main-body,
    body.f2h-shell #main-body > .container,
    body.f2h-shell .primary-content {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #111827 !important;
        background: #fff !important;
    }

    body.f2h-shell :where(.card, .panel, .well, .jumbotron, .invoice-container, .ticket-reply, .table, .table-container, .dataTables_wrapper, .md-preview, .markdown-content, .f2h-portal-hero, .f2h-portal-console, .f2h-portal-product-card, .f2h-portal-help-card, .f2h-portal-account, .f2h-portal-account-links > a) {
        color: #111827 !important;
        border-color: #d1d5db !important;
        background: #fff !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.f2h-shell :where(.f2h-portal-hero, .f2h-portal-product-card, .f2h-portal-account)::before,
    body.f2h-shell :where(.f2h-portal-hero, .f2h-portal-product-card, .f2h-portal-account)::after {
        display: none !important;
    }

    body.f2h-shell :where(.card-header, .panel-heading, .card-footer, .panel-footer, .table thead th, .table td, table.table-list > tbody > tr > td) {
        color: #111827 !important;
        border-color: #d1d5db !important;
        background: #fff !important;
    }

    body.f2h-shell :where(h1, h2, h3, h4, h5, h6, p, span, small, label, a, .text-muted, .text-dark, .text-body) {
        color: #111827 !important;
        text-shadow: none !important;
    }
}

/* Client home workspace — compact mast, no grid, no marketing CTAs ------ */

body.f2h-authenticated .f2h-page-banner::before,
body.f2h-template-clientareahome #main-body .f2h-home-deck::before,
body.f2h-template-clientareahome #main-body .f2h-home-deck::after {
    display: none !important;
}

body.f2h-template-clientareahome #main-body {
    padding-top: 22px;
}

body.f2h-template-clientareahome #main-body .f2h-home-workspace {
    gap: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast {
    position: relative;
    isolation: isolate;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 22px;
    overflow: hidden;
    padding: 16px 20px;
    border: 1px solid rgba(119, 151, 207, .18);
    border-radius: 16px;
    background: #0a162c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-lead {
    min-width: 0;
    flex: 1 1 220px;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast h1 {
    max-width: none;
    margin: 0;
    color: #f4f7ff;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-lead > p {
    max-width: none;
    margin: 5px 0 0;
    color: #8fa3c0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-stat {
    min-width: 86px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid rgba(119, 151, 207, .16);
    border-radius: 12px;
    color: #d7e2f4;
    background: rgba(7, 16, 32, .72);
    text-decoration: none;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-stat:hover,
body.f2h-template-clientareahome #main-body .f2h-home-mast-stat:focus-visible {
    border-color: rgba(137, 173, 234, .42);
    color: #fff;
    background: rgba(16, 32, 58, .92);
    text-decoration: none;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-stat small {
    color: #8ea0bb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-stat strong {
    color: inherit;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.1;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-stat.has-attention {
    border-color: rgba(232, 164, 73, .38);
    background: rgba(82, 48, 8, .28);
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-actions .btn {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 11px;
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-home-mast-actions .f2h-btn-secondary {
    border: 1px solid rgba(119, 151, 207, .22);
    color: #d5e0f3;
    background: rgba(9, 20, 38, .7);
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention {
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #0a162c !important;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-lead {
    min-width: 92px;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-attention-lead strong {
    color: #f0c27a;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-account-data {
    padding-top: 0;
}

body.f2h-template-clientareahome #main-body .f2h-home-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    align-items: stretch;
    gap: 14px;
}

body.f2h-template-clientareahome #main-body .f2h-home-panels-primary,
body.f2h-template-clientareahome #main-body .f2h-home-panels-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

body.f2h-template-clientareahome #main-body .f2h-home-panels-primary,
body.f2h-template-clientareahome #main-body .f2h-home-panels-primary > .f2h-panel-priority-services,
body.f2h-template-clientareahome #main-body .f2h-home-panels-rail > .f2h-panel-priority-tickets {
    flex: 1 1 auto;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #0a162c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel > .list-group,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-native-panel > .card-body {
    flex: 1 1 auto;
}

body.f2h-template-clientareahome #main-body .f2h-infrastructure-growth,
body.f2h-template-clientareahome #main-body .f2h-infrastructure-operations-tool {
    display: none !important;
}

body.f2h-template-clientareahome #main-body .f2h-sidebar-column .card-sidebar {
    background: #0a162c !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

@media (max-width: 991.98px) {
    body.f2h-template-clientareahome #main-body .f2h-home-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareahome #main-body .f2h-home-mast {
        padding: 14px;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-mast-stat {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
    }

    body.f2h-template-clientareahome #main-body .f2h-home-mast-actions {
        width: 100%;
    }

    body.f2h-template-clientareahome #main-body .f2h-home-mast-actions .btn {
        flex: 1 1 auto;
    }
}

/* My Services — compact mast, readable text, OS on VPS/dedicated -------- */

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory {
    gap: 16px;
    color: #e6edf8;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-hero::before,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-hero::after {
    display: none !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast {
    position: relative;
    isolation: isolate;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(119, 151, 207, .18);
    border-radius: 16px;
    background: #0a162c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-lead {
    min-width: 0;
    align-self: center;
    padding: 20px 22px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast h1 {
    max-width: none;
    margin: 0;
    color: #f8fbff;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-lead > p {
    max-width: none;
    margin: 5px 0 0;
    color: #c2d0e4;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-actions {
    align-self: center;
    justify-self: end;
    padding: 20px 22px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-actions .btn {
    min-height: 40px;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 11px;
    font-size: 13px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-statebar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(119, 151, 207, .16);
    background: #081329;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state {
    --f2h-state: #6f9fff;
    position: relative;
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state + .f2h-service-state {
    border-left: 1px solid rgba(119, 151, 207, .14);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state::before {
    position: absolute;
    inset: 15px auto 15px 0;
    width: 2px;
    border-radius: 2px;
    content: "";
    background: var(--f2h-state);
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state.is-pending.has-attention {
    --f2h-state: #e1b86a;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state.is-suspended.has-critical {
    --f2h-state: #ee7c89;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state.is-empty {
    --f2h-state: #7586a1;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state-count {
    color: var(--f2h-state);
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state-copy strong {
    color: #f7faff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.15;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state-copy small {
    overflow: hidden;
    color: #9aabc3;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-panel {
    padding: 16px 18px 18px;
    border: 1px solid rgba(119, 151, 207, .16);
    border-radius: 16px;
    background: #0a162c;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table-wrap :where(.dataTables_length, .dataTables_filter) label,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .dataTables_info,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table-wrap .pagination > li > :where(a, span) {
    color: #c5d3e8 !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > thead > tr > th {
    color: #d5e2f4 !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td {
    height: 84px;
    color: #e8eef8 !important;
    border-top: 1px solid rgba(126, 158, 214, .15) !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(126, 158, 214, .15) !important;
    border-left: 0 !important;
    background: #0c1a32 !important;
    box-shadow: none !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:first-child {
    border-left: 3px solid rgb(var(--f2h-row-tone)) !important;
    box-shadow: none !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row > td:last-child {
    border-right: 1px solid rgba(126, 158, 214, .15) !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name {
    max-width: min(560px, 40vw);
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name:hover,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name:focus-visible {
    color: #dce9ff !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
    max-width: min(560px, 40vw);
    margin-top: 4px;
    color: #c5d3e8 !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-os {
    display: block;
    margin-top: 3px;
    color: #9ec8ff !important;
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .01em;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-billing strong,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-renewal > span:not(.w-hidden) {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-billing small,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-renewal small,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-status-note {
    color: #c5d3e8 !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-health-icon {
    border-color: rgba(136, 167, 224, .22);
    color: #c5d3e8;
    background: #102038;
    box-shadow: none;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage {
    border-color: rgba(119, 151, 207, .28) !important;
    color: #e8eef8 !important;
    background: rgba(16, 32, 56, .92) !important;
    box-shadow: none !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-manage i {
    color: #c5d3e8 !important;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(119, 151, 207, .18);
    border-radius: 999px;
    color: #c5d3e8;
    background: rgba(7, 16, 32, .55);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tab > span {
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #dce7f8;
    background: rgba(255, 255, 255, .06);
    font-size: 11px;
    font-weight: 750;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tab:hover,
body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tab:focus-visible {
    border-color: rgba(137, 173, 234, .42);
    color: #fff;
    outline: none;
}

body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tab[aria-selected="true"] {
    border-color: rgba(137, 173, 234, .48);
    color: #fff;
    background: rgba(42, 78, 132, .42);
}

@media (hover: hover) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row:hover > td {
        border-top-color: rgba(126, 158, 214, .22) !important;
        border-right-color: transparent !important;
        border-bottom-color: rgba(126, 158, 214, .22) !important;
        background: #102038 !important;
        box-shadow: none !important;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row:hover > td:first-child {
        border-left-color: rgb(var(--f2h-row-tone)) !important;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-table > tbody > .f2h-service-inventory-row:hover > td:last-child {
        border-right-color: rgba(126, 158, 214, .22) !important;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-row:hover .f2h-service-inventory-manage {
        border-color: rgba(137, 173, 234, .42) !important;
        color: #fff !important;
        background: rgba(42, 78, 132, .42) !important;
        box-shadow: none !important;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-lead {
        grid-column: 1;
        padding: 14px 14px 12px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-actions {
        grid-column: 1;
        width: 100%;
        padding: 0 14px 14px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-mast .f2h-home-mast-actions .btn {
        width: 100%;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-statebar {
        grid-column: 1;
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state {
        min-height: 58px;
        padding: 10px 14px;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state + .f2h-service-state {
        border-top: 1px solid rgba(119, 151, 207, .14);
        border-left: 0;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-state::before {
        inset: 11px auto;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-name,
    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-inventory-endpoint {
        max-width: 100%;
    }

    body.f2h-template-clientareaproducts.f2h-authenticated #main-body .f2h-service-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
}

html.f2h-vps-upgrade a[href*="upgrade.php"][href*="type=configoptions"],
html.f2h-vps-upgrade [menuitemname="Upgrade/Downgrade Options"],
html.f2h-vps-upgrade [menuitemname="Upgrade/Downgrade"] {
    display: none !important;
}

.f2h-vps-upgrade-actions {
    margin: 0 0 22px;
    text-align: left;
}

.f2h-vps-upgrade-actions-title {
    margin: 0 0 12px;
    color: #edf3fc;
    font-size: 15px;
    font-weight: 650;
}

.f2h-vps-upgrade-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.f2h-vps-upgrade-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid rgba(135, 116, 226, .28);
    border-radius: 14px;
    color: #edf3fc;
    background:
        radial-gradient(circle at 10% 0, rgba(138, 99, 255, .1), transparent 8rem),
        rgba(7, 16, 32, .76);
    text-align: left;
}

.f2h-vps-upgrade-tile i {
    color: #a68cff;
    font-size: 16px;
}

.f2h-vps-upgrade-tile span {
    font-size: 13px;
    font-weight: 650;
}

.f2h-vps-upgrade-tile:hover,
.f2h-vps-upgrade-tile:focus {
    border-color: rgba(151, 119, 255, .58);
    background:
        radial-gradient(circle at 10% 0, rgba(138, 99, 255, .18), transparent 9rem),
        rgba(16, 33, 60, .96);
}

.f2h-vps-upgrade-modal .modal-content {
    border: 1px solid rgba(119, 151, 207, .22);
    background: #0c1a32;
}

.f2h-vps-upgrade-current {
    margin: 0 0 14px;
    color: #c2d0e4;
    font-size: 13px;
}

.f2h-vps-upgrade-field + .f2h-vps-upgrade-field {
    margin-top: 18px;
}

.f2h-vps-upgrade-field h5 {
    margin: 0 0 10px;
    color: #edf3fc;
    font-size: 13px;
    font-weight: 650;
}

.f2h-vps-upgrade-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.f2h-vps-upgrade-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid rgba(119, 151, 207, .2);
    border-radius: 12px;
    color: #edf3fc;
    background: rgba(7, 16, 32, .72);
    text-align: left;
}

.f2h-vps-upgrade-choice strong {
    font-size: 13px;
    font-weight: 650;
}

.f2h-vps-upgrade-choice small {
    color: #9eb0c8;
    font-size: 11px;
}

.f2h-vps-upgrade-choice.is-on,
.f2h-vps-upgrade-choice:hover {
    border-color: rgba(126, 176, 255, .45);
    background: rgba(16, 33, 60, .95);
}

.f2h-vps-upgrade-choice.is-current:not(.is-on) {
    opacity: .78;
}

/* Live network status dots — do not default to always-green */

[data-f2h-net="ok"] .f2h-status-dot,
body.f2h-net-ok .f2h-status-dot,
body.f2h-net-ok .f2h-auth-security-line i {
    background: var(--f2h-green-300);
    box-shadow: 0 0 0 4px rgba(80, 239, 189, .11), 0 0 16px rgba(80, 239, 189, .44);
}

[data-f2h-net="degraded"] .f2h-status-dot,
body.f2h-net-degraded .f2h-status-dot,
body.f2h-net-degraded .f2h-auth-security-line i {
    background: #f5c451;
    box-shadow: 0 0 0 4px rgba(245, 196, 81, .14), 0 0 16px rgba(245, 196, 81, .4);
}

[data-f2h-net="down"] .f2h-status-dot,
body.f2h-net-down .f2h-status-dot,
body.f2h-net-down .f2h-auth-security-line i {
    background: #ff6b86;
    box-shadow: 0 0 0 4px rgba(255, 107, 134, .14), 0 0 16px rgba(255, 107, 134, .38);
}

[data-f2h-net="scheduled"] .f2h-status-dot,
body.f2h-net-scheduled .f2h-status-dot,
body.f2h-net-scheduled .f2h-auth-security-line i {
    background: #6ea8ff;
    box-shadow: 0 0 0 4px rgba(110, 168, 255, .14), 0 0 16px rgba(110, 168, 255, .38);
}

body.f2h-shell .f2h-main,
body.f2h-shell #main-body {
    flex: 1 0 auto;
}

body.f2h-shell .f2h-site-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

/* Client home — First2Host account operations console ----------------- */

body.f2h-template-clientareahome #main-body {
    overflow-x: clip;
    padding: 24px 0 58px;
}

body.f2h-template-clientareahome #main-body > .f2h-main-body-wrap.container {
    width: min(calc(100% - 52px), 1720px);
    max-width: 1720px;
    padding-right: 0;
    padding-left: 0;
}

body.f2h-template-clientareahome #main-body .f2h-main-body-wrap > .row {
    margin-right: 0;
    margin-left: 0;
}

body.f2h-template-clientareahome #main-body .f2h-sidebar-column {
    display: none !important;
}

body.f2h-template-clientareahome #main-body .primary-content {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    padding-right: 0;
    padding-left: 0;
}

body.f2h-template-clientareahome #main-body .primary-content > div[style*="ffffd2"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-home {
    --f2h-ops-accent: #8a63ff;
    --f2h-ops-blue: #4b87ff;
    --f2h-ops-cyan: #58cfe1;
    --f2h-ops-good: #55ddb1;
    --f2h-ops-warn: #f1bc67;
    --f2h-ops-bad: #ff7187;
    --f2h-ops-ink: #f4f7ff;
    --f2h-ops-soft: #c0cce0;
    --f2h-ops-muted: #8fa2c0;
    --f2h-ops-line: rgba(119, 151, 207, .18);
    --f2h-ops-line-strong: rgba(135, 164, 218, .28);
    width: 100%;
    display: grid;
    gap: 22px;
    color: var(--f2h-ops-ink);
}

body.f2h-template-clientareahome #main-body .f2h-ops-home :where(h1, h2, h3, p, dl, dd) {
    margin-top: 0;
}

body.f2h-template-clientareahome #main-body .f2h-ops-home a {
    text-decoration: none;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(126, 155, 216, .23);
    border-radius: 28px;
    background:
        radial-gradient(circle at 9% 0, rgba(138, 99, 255, .24), transparent 28rem),
        radial-gradient(circle at 96% 14%, rgba(54, 178, 222, .14), transparent 25rem),
        linear-gradient(135deg, #0d1830 0%, #081326 52%, #07111f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 28px 80px rgba(0, 2, 14, .26);
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .28;
    background-image:
        linear-gradient(rgba(131, 157, 209, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(131, 157, 209, .07) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 58%);
    mask-image: linear-gradient(90deg, #000, transparent 58%);
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero::after {
    position: absolute;
    z-index: -1;
    top: -90px;
    left: 38%;
    width: 340px;
    height: 340px;
    content: "";
    border: 1px solid rgba(138, 99, 255, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 46px rgba(138, 99, 255, .025),
        0 0 0 92px rgba(83, 158, 255, .018);
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(470px, .88fr);
    gap: clamp(42px, 5vw, 86px);
    padding: clamp(36px, 3.2vw, 52px) clamp(34px, 3.4vw, 58px) 38px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-copy {
    min-width: 0;
    align-self: center;
}

body.f2h-template-clientareahome #main-body .f2h-ops-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #b8c6dc;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-ops-kicker-mark {
    height: 16px;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-kicker-mark i {
    width: 3px;
    display: block;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--f2h-ops-cyan), var(--f2h-ops-accent));
    box-shadow: 0 0 10px rgba(138, 99, 255, .35);
}

body.f2h-template-clientareahome #main-body .f2h-ops-kicker-mark i:nth-child(1) {
    height: 8px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-kicker-mark i:nth-child(2) {
    height: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-kicker-mark i:nth-child(3) {
    height: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero h1 {
    max-width: 790px;
    margin-bottom: 18px;
    color: #fbfcff;
    font-size: clamp(40px, 3.45vw, 62px);
    font-weight: 730;
    letter-spacing: -.048em;
    line-height: 1.01;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero h1 > span {
    display: block;
    margin-top: 8px;
    color: #b7c6ff;
    font-size: .7em;
    font-weight: 610;
    letter-spacing: -.038em;
    line-height: 1.09;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-copy > p {
    max-width: 670px;
    margin-bottom: 0;
    color: #bac7da;
    font-size: 16px;
    font-weight: 450;
    line-height: 1.65;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 17px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 690;
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions .btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #7955f3, #487af3);
    box-shadow: 0 12px 28px rgba(64, 78, 218, .24);
}

body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions .btn-primary:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions .btn-primary:focus-visible {
    background: linear-gradient(135deg, #8968ff, #5789ff);
    box-shadow: 0 16px 34px rgba(64, 78, 218, .31);
}

body.f2h-template-clientareahome #main-body .f2h-ops-btn-secondary {
    border: 1px solid rgba(148, 171, 217, .24);
    color: #e1e9f7;
    background: rgba(7, 17, 35, .56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.f2h-template-clientareahome #main-body .f2h-ops-btn-secondary:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-btn-secondary:focus-visible {
    border-color: rgba(164, 139, 255, .48);
    color: #fff;
    background: rgba(27, 31, 65, .72);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry {
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(32px, 3.1vw, 54px);
    border-left: 1px solid rgba(134, 161, 214, .18);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 19px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > div > span,
body.f2h-template-clientareahome #main-body .f2h-ops-section-header > div > span,
body.f2h-template-clientareahome #main-body .f2h-ops-rail-section > header > span {
    display: block;
    margin-bottom: 4px;
    color: #899dbb;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .13em;
    line-height: 1.35;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header h2 {
    margin-bottom: 0;
    color: #f0f4fc;
    font-size: 22px;
    font-weight: 690;
    letter-spacing: -.028em;
    line-height: 1.2;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #aebed3;
    font-size: 12px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8294af;
    box-shadow: 0 0 0 4px rgba(130, 148, 175, .1);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a.is-ok > i {
    background: var(--f2h-ops-good);
    box-shadow: 0 0 0 4px rgba(85, 221, 177, .1), 0 0 14px rgba(85, 221, 177, .36);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a.is-degraded > i,
body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a.is-scheduled > i {
    background: var(--f2h-ops-warn);
    box-shadow: 0 0 0 4px rgba(241, 188, 103, .1), 0 0 14px rgba(241, 188, 103, .3);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a.is-down > i {
    background: var(--f2h-ops-bad);
    box-shadow: 0 0 0 4px rgba(255, 113, 135, .1), 0 0 14px rgba(255, 113, 135, .3);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
    border-top: 1px solid var(--f2h-ops-line);
    border-bottom: 1px solid var(--f2h-ops-line);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid > div {
    min-width: 0;
    padding: 18px 16px 17px 0;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid > div:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid var(--f2h-ops-line);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--f2h-ops-line);
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid dt {
    margin-bottom: 7px;
    color: #8fa2be;
    font-size: 11px;
    font-weight: 730;
    letter-spacing: .075em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid dd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 0;
    color: #f4f7fd;
    font-size: 32px;
    font-weight: 720;
    letter-spacing: -.04em;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid dd small {
    color: #98aac2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid > .has-attention dd {
    color: #f4c27a;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-top: 17px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-footer :where(a, span) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9eb0c8;
    font-size: 12px;
    font-weight: 600;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-footer i {
    color: #9c84ff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-bar {
    min-height: 86px;
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    align-items: stretch;
    border-top: 1px solid rgba(131, 159, 214, .17);
    background: rgba(3, 10, 23, .36);
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 28px;
    border-right: 1px solid var(--f2h-ops-line);
    color: #aebbd0;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-label i {
    color: #9a7cff;
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items {
    min-width: 0;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a {
    min-width: 250px;
    flex: 1 1 260px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    color: #d9e2f0;
    transition: background-color .18s ease, color .18s ease;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a + a {
    border-left: 1px solid var(--f2h-ops-line);
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a:focus-visible {
    color: #fff;
    background: rgba(113, 92, 206, .09);
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a > i:first-child {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(138, 99, 255, .22);
    border-radius: 9px;
    color: #a88fff;
    background: rgba(138, 99, 255, .08);
    font-size: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a.is-critical > i:first-child {
    border-color: rgba(255, 113, 135, .23);
    color: var(--f2h-ops-bad);
    background: rgba(255, 113, 135, .08);
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a.is-billing > i:first-child,
body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a.is-progress > i:first-child {
    border-color: rgba(241, 188, 103, .22);
    color: var(--f2h-ops-warn);
    background: rgba(241, 188, 103, .07);
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items strong,
body.f2h-template-clientareahome #main-body .f2h-ops-signal-items small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items strong {
    color: inherit;
    font-size: 14px;
    font-weight: 690;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items small {
    margin-top: 3px;
    color: #93a5bd;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a > i:last-child {
    color: #677c9d;
    font-size: 9px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-all-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    color: #a9b9ce;
    font-size: 13px;
    font-weight: 620;
}

body.f2h-template-clientareahome #main-body .f2h-ops-all-clear > i {
    color: var(--f2h-ops-good);
}

body.f2h-template-clientareahome #main-body .f2h-ops-board {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
    overflow: hidden;
    border: 1px solid rgba(123, 152, 210, .2);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(109, 80, 212, .09), transparent 31rem),
        linear-gradient(145deg, rgba(10, 22, 43, .97), rgba(5, 14, 29, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 70px rgba(0, 2, 14, .18);
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate {
    min-width: 0;
    padding: 34px clamp(26px, 2.7vw, 46px) 42px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-section-header h2 {
    margin-bottom: 6px;
    color: #f2f5fc;
    font-size: clamp(26px, 2vw, 34px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.15;
}

body.f2h-template-clientareahome #main-body .f2h-ops-section-header p {
    margin-bottom: 0;
    color: #91a3bd;
    font-size: 14px;
    line-height: 1.55;
}

body.f2h-template-clientareahome #main-body .f2h-ops-section-header > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    color: #a991ff;
    font-size: 13px;
    font-weight: 680;
}

body.f2h-template-clientareahome #main-body .f2h-ops-section-header > a:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-section-header > a:focus-visible {
    color: #c2b4ff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-groups {
    border-top: 1px solid var(--f2h-ops-line-strong);
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group + .f2h-ops-estate-group {
    border-top: 1px solid var(--f2h-ops-line-strong);
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 22px 2px 16px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-category-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(138, 99, 255, .23);
    border-radius: 11px;
    color: #a58dff;
    background: rgba(138, 99, 255, .075);
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group.is-vps .f2h-ops-category-icon {
    border-color: rgba(80, 190, 221, .22);
    color: #68cce2;
    background: rgba(80, 190, 221, .07);
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group.is-dedicated .f2h-ops-category-icon {
    border-color: rgba(91, 139, 255, .24);
    color: #75a2ff;
    background: rgba(91, 139, 255, .07);
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header > span:nth-child(2) {
    min-width: 0;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header strong,
body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header strong {
    color: #e9eef8;
    font-size: 16px;
    font-weight: 690;
    letter-spacing: -.01em;
    line-height: 1.3;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header small {
    margin-top: 3px;
    color: #8497b2;
    font-size: 12px;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-ops-category-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #93a6c0;
    font-size: 12px;
    font-weight: 620;
}

body.f2h-template-clientareahome #main-body .f2h-ops-category-count b {
    min-width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(137, 165, 217, .18);
    border-radius: 8px;
    color: #dce5f3;
    background: rgba(7, 17, 34, .58);
    font-size: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-list {
    border-top: 1px solid rgba(119, 151, 207, .14);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row {
    position: relative;
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 18px minmax(180px, 1fr) minmax(76px, auto) minmax(116px, 144px) 30px;
    align-items: center;
    gap: 15px;
    padding: 13px 4px;
    color: #dbe5f3;
    border-bottom: 1px solid rgba(119, 151, 207, .12);
    transition: color .16s ease, background-color .16s ease, padding .16s ease;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -1px;
    width: 2px;
    content: "";
    border-radius: 99px;
    background: var(--f2h-ops-accent);
    opacity: 0;
    transition: opacity .16s ease;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-service-row:focus-visible {
    padding-right: 8px;
    padding-left: 10px;
    color: #fff;
    background: linear-gradient(90deg, rgba(138, 99, 255, .08), rgba(138, 99, 255, .015));
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row:hover::before,
body.f2h-template-clientareahome #main-body .f2h-ops-service-row:focus-visible::before {
    opacity: 1;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row.has-attention {
    background: linear-gradient(90deg, rgba(241, 188, 103, .045), transparent 58%);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(128, 151, 188, .24);
    border-radius: 50%;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse > i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    background: #7f91aa;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse.is-active {
    border-color: rgba(85, 221, 177, .24);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse.is-active > i {
    background: var(--f2h-ops-good);
    box-shadow: 0 0 9px rgba(85, 221, 177, .35);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse:is(.is-pending, .is-suspended) {
    border-color: rgba(241, 188, 103, .25);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse:is(.is-pending, .is-suspended) > i {
    background: var(--f2h-ops-warn);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-identity {
    min-width: 0;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-identity strong,
body.f2h-template-clientareahome #main-body .f2h-ops-service-identity small,
body.f2h-template-clientareahome #main-body .f2h-ops-service-renewal small,
body.f2h-template-clientareahome #main-body .f2h-ops-service-renewal strong {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-identity strong {
    overflow: hidden;
    color: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-identity small {
    overflow: hidden;
    margin-top: 4px;
    color: #8da0bb;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-state {
    justify-self: start;
    padding: 5px 8px;
    border: 1px solid rgba(127, 149, 184, .17);
    border-radius: 999px;
    color: #9daec3;
    background: rgba(127, 149, 184, .055);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-state.is-active {
    border-color: rgba(85, 221, 177, .17);
    color: #83d6bc;
    background: rgba(85, 221, 177, .055);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-state:is(.is-pending, .is-suspended) {
    border-color: rgba(241, 188, 103, .2);
    color: #e8b76d;
    background: rgba(241, 188, 103, .06);
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-renewal {
    min-width: 0;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-renewal small {
    margin-bottom: 3px;
    color: #788ca8;
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-renewal strong {
    overflow: hidden;
    color: #b5c2d5;
    font-size: 12px;
    font-weight: 590;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-open {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(131, 158, 207, .14);
    border-radius: 9px;
    color: #7186a7;
    background: rgba(8, 18, 35, .42);
    font-size: 9px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row:hover .f2h-ops-service-open,
body.f2h-template-clientareahome #main-body .f2h-ops-service-row:focus-visible .f2h-ops-service-open {
    border-color: rgba(158, 132, 255, .3);
    color: #b9a7ff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-footer {
    display: flex;
    justify-content: flex-end;
    padding: 13px 2px 5px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9882ec;
    font-size: 12px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-ops-empty-estate {
    min-height: 220px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 30px;
    border-top: 1px solid var(--f2h-ops-line-strong);
    border-bottom: 1px solid var(--f2h-ops-line-strong);
}

body.f2h-template-clientareahome #main-body .f2h-ops-empty-estate > span {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(138, 99, 255, .22);
    border-radius: 16px;
    color: #a58dff;
    background: rgba(138, 99, 255, .07);
}

body.f2h-template-clientareahome #main-body .f2h-ops-empty-estate strong {
    color: #eaf0fa;
    font-size: 17px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-empty-estate p {
    margin: 5px 0 0;
    color: #8fa1ba;
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-rail {
    min-width: 0;
    border-left: 1px solid var(--f2h-ops-line-strong);
    background: linear-gradient(180deg, rgba(10, 21, 42, .62), rgba(3, 11, 24, .68));
}

body.f2h-template-clientareahome #main-body .f2h-ops-rail-section {
    padding: 30px 28px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-rail-section + .f2h-ops-rail-section {
    border-top: 1px solid var(--f2h-ops-line-strong);
}

body.f2h-template-clientareahome #main-body .f2h-ops-rail-section > header {
    position: relative;
    margin-bottom: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-rail-section > header h2 {
    margin-bottom: 0;
    color: #ebf0f9;
    font-size: 19px;
    font-weight: 680;
    letter-spacing: -.025em;
    line-height: 1.25;
}

body.f2h-template-clientareahome #main-body .f2h-ops-rail-section > header > a {
    position: absolute;
    right: 0;
    bottom: 2px;
    color: #a48cff;
    font-size: 11px;
    font-weight: 680;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list {
    border-top: 1px solid rgba(119, 151, 207, .14);
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list > a {
    min-height: 67px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(119, 151, 207, .13);
    color: #d9e2ef;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list > a:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-command-list > a:focus-visible {
    color: #fff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list > a > i:first-child {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(138, 99, 255, .18);
    border-radius: 10px;
    color: #9f88f7;
    background: rgba(138, 99, 255, .055);
    font-size: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list > a > i:last-child {
    color: #627696;
    font-size: 8px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list strong,
body.f2h-template-clientareahome #main-body .f2h-ops-command-list small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list strong {
    color: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list small {
    margin-top: 3px;
    color: #8295af;
    font-size: 11px;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list {
    border-top: 1px solid rgba(119, 151, 207, .14);
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list > :where(a, div) {
    min-height: 70px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 9px;
    align-items: center;
    gap: 11px;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(119, 151, 207, .13);
    color: #cbd6e6;
    font-size: 12px;
    line-height: 1.45;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list > a:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list > a:focus-visible {
    color: #fff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(81, 190, 220, .18);
    border-radius: 9px;
    color: #60bed5;
    background: rgba(81, 190, 220, .055);
    font-size: 11px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list > :where(a, div) > i:last-child {
    color: #617695;
    font-size: 8px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list :where(strong, small) {
    color: inherit;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list small {
    display: block;
    margin-top: 4px;
    color: #8294ad;
    font-size: 10px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list .label,
body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list .badge {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 6px;
    border: 1px solid rgba(125, 151, 196, .2);
    border-radius: 999px;
    color: #aebcd0;
    background: rgba(125, 151, 196, .07);
    font-size: 9px;
    font-weight: 700;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-empty {
    grid-template-columns: 30px minmax(0, 1fr);
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-empty > i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--f2h-ops-good);
    background: rgba(85, 221, 177, .07);
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 2px;
    border-top: 1px solid rgba(119, 151, 207, .13);
    color: #b8c6d9;
    font-size: 12px;
    font-weight: 620;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a:hover,
body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a:focus-visible {
    color: #fff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a span i {
    width: 18px;
    color: #8e77e8;
    text-align: center;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a > i {
    color: #687d9c;
    font-size: 9px;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a.is-noc {
    color: #c8baff;
}

body.f2h-template-clientareahome #main-body .f2h-ops-addon-output {
    min-width: 0;
}

@media (max-width: 1280px) {
    body.f2h-template-clientareahome #main-body .f2h-ops-hero-main {
        grid-template-columns: minmax(0, 1fr) minmax(410px, .82fr);
        gap: 44px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-board {
        grid-template-columns: minmax(0, 1fr) 350px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-rail-section {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 1099.98px) {
    body.f2h-template-clientareahome #main-body .f2h-ops-hero-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry {
        padding-top: 28px;
        padding-left: 0;
        border-top: 1px solid var(--f2h-ops-line);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-board {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--f2h-ops-line-strong);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-rail-section + .f2h-ops-rail-section {
        border-top: 0;
        border-left: 1px solid var(--f2h-ops-line-strong);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-platform-links {
        grid-column: 1 / -1;
        border-top: 1px solid var(--f2h-ops-line-strong) !important;
        border-left: 0 !important;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareahome #main-body {
        padding-top: 15px;
    }

    body.f2h-template-clientareahome #main-body > .f2h-main-body-wrap.container {
        width: calc(100% - 24px);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-home {
        gap: 15px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-hero,
    body.f2h-template-clientareahome #main-body .f2h-ops-board {
        border-radius: 20px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-hero-main {
        gap: 26px;
        padding: 27px 21px 24px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-kicker {
        margin-bottom: 17px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-hero h1 {
        font-size: clamp(34px, 9.3vw, 44px);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-hero-copy > p {
        font-size: 15px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header {
        align-items: center;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-signal-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-signal-label {
        padding: 14px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--f2h-ops-line);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-signal-items {
        display: grid;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a {
        min-width: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a + a {
        border-top: 1px solid var(--f2h-ops-line);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-estate {
        padding: 26px 19px 30px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header small {
        display: none;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-category-count {
        font-size: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-service-row {
        grid-template-columns: 18px minmax(0, 1fr) auto 28px;
        gap: 10px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-service-renewal {
        display: none;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-rail-section + .f2h-ops-rail-section {
        border-top: 1px solid var(--f2h-ops-line-strong);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-platform-links {
        grid-column: auto;
    }
}

@media (max-width: 479.98px) {
    body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-hero-actions .btn {
        width: 100%;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid > div {
        padding: 15px 10px 14px 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid > div:nth-child(even) {
        padding-left: 14px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-grid dd {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        font-size: 28px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-header {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 9px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-category-icon {
        width: 32px;
        height: 32px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-service-row {
        grid-template-columns: 15px minmax(0, 1fr) 27px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-service-state {
        display: none;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-service-pulse {
        width: 15px;
        height: 15px;
    }

    body.f2h-template-clientareahome #main-body .f2h-ops-rail-section {
        padding: 25px 19px;
    }
}

/* Keep interface text neutral; colour is reserved for state and actions. */
body.f2h-template-clientareahome #main-body .primary-content > .f2h-ops-home + p {
    display: none !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-service-row .f2h-ops-service-identity strong {
    color: #e4ebf6 !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-command-list > a strong,
body.f2h-template-clientareahome #main-body .f2h-ops-signal-items > a strong {
    color: #dce5f2 !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-ticket-list > a > span:nth-child(2) {
    color: #cbd6e6 !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-header > a,
body.f2h-template-clientareahome #main-body .f2h-ops-telemetry-footer :where(a, span) {
    color: #aebed3 !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-section-header > a,
body.f2h-template-clientareahome #main-body .f2h-ops-estate-group-footer a,
body.f2h-template-clientareahome #main-body .f2h-ops-rail-section > header > a {
    color: #aa93ff !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a {
    color: #b8c6d9 !important;
}

body.f2h-template-clientareahome #main-body .f2h-ops-platform-links > a.is-noc {
    color: #c8baff !important;
}

/* Client home — open NoC canvas, deliberately not a card dashboard ------ */

body.f2h-template-clientareahome #main-body .primary-content > .f2h-noc-home + p {
    display: none !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-home {
    --f2h-noc-purple: #8a63ff;
    --f2h-noc-blue: #4b87ff;
    --f2h-noc-cyan: #55c8df;
    --f2h-noc-good: #55ddb1;
    --f2h-noc-warn: #f1bc67;
    --f2h-noc-bad: #ff7187;
    --f2h-noc-ink: #f4f7ff;
    --f2h-noc-soft: #c1cde0;
    --f2h-noc-muted: #8497b3;
    --f2h-noc-rule: rgba(122, 153, 211, .18);
    --f2h-noc-rule-strong: rgba(131, 163, 221, .3);
    position: relative;
    width: 100%;
    display: grid;
    color: var(--f2h-noc-ink);
}

body.f2h-template-clientareahome #main-body .f2h-noc-home::before {
    position: absolute;
    z-index: -1;
    top: -120px;
    right: -12vw;
    width: 760px;
    height: 760px;
    content: "";
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(62, 165, 219, .085), rgba(138, 99, 255, .035) 38%, transparent 69%);
}

body.f2h-template-clientareahome #main-body .f2h-noc-home :where(h1, h2, h3, p, dl, dd) {
    margin-top: 0;
}

body.f2h-template-clientareahome #main-body .f2h-noc-home a {
    text-decoration: none;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero {
    min-height: 410px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(48px, 6vw, 106px);
    padding: 52px 16px 46px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-copy {
    min-width: 0;
    max-width: 1040px;
    padding-left: clamp(0px, 1.5vw, 22px);
}

body.f2h-template-clientareahome #main-body .f2h-noc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
    color: #a9b7cc;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .14em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-eyebrow > span {
    height: 17px;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-eyebrow > span i {
    width: 3px;
    display: block;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--f2h-noc-cyan), var(--f2h-noc-purple));
}

body.f2h-template-clientareahome #main-body .f2h-noc-eyebrow > span i:nth-child(1) {
    height: 8px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-eyebrow > span i:nth-child(2) {
    height: 17px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-eyebrow > span i:nth-child(3) {
    height: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero h1 {
    max-width: 760px;
    margin-bottom: 20px;
    color: #fbfcff;
    font-size: clamp(52px, 4.9vw, 82px);
    font-weight: 720;
    letter-spacing: -.055em;
    line-height: .96;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero h1 > span {
    display: block;
    margin-top: 9px;
    color: #b7c5fa;
    font-size: .64em;
    font-weight: 590;
    letter-spacing: -.045em;
    line-height: 1.05;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-copy > p {
    max-width: 660px;
    margin-bottom: 0;
    color: #aebdd2;
    font-size: 17px;
    font-weight: 450;
    line-height: 1.7;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 29px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    color: #b7c5d8 !important;
    font-size: 13px;
    font-weight: 660;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a + a {
    border-left: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a.is-primary {
    margin-right: 14px;
    border: 1px solid rgba(138, 99, 255, .5);
    border-radius: 11px;
    color: #fff !important;
    background: linear-gradient(135deg, #7d59f5, #4d78ef);
    box-shadow: 0 13px 30px rgba(71, 70, 194, .24);
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a.is-primary + a {
    border-left: 0;
}

body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a:hover,
body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a:focus-visible {
    color: #fff !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-topology {
    min-width: 0;
    padding-left: clamp(34px, 3.5vw, 58px);
    border-left: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-topology > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 20px 14px;
    border-bottom: 1px solid var(--f2h-noc-rule);
}

body.f2h-template-clientareahome #main-body .f2h-noc-topology > header > div span,
body.f2h-template-clientareahome #main-body .f2h-noc-topology > header > div strong {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-noc-topology > header > div span {
    margin-bottom: 4px;
    color: #8193ae;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-topology > header > div strong {
    color: #e7edf8;
    font-size: 20px;
    font-weight: 660;
    letter-spacing: -.02em;
}

body.f2h-template-clientareahome #main-body .f2h-noc-network {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
    color: #a9b8cc !important;
    font-size: 13px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-network > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8395b0;
}

body.f2h-template-clientareahome #main-body .f2h-noc-network.is-ok > i {
    background: var(--f2h-noc-good);
    box-shadow: 0 0 0 4px rgba(85, 221, 177, .08), 0 0 13px rgba(85, 221, 177, .4);
}

body.f2h-template-clientareahome #main-body .f2h-noc-network:is(.is-degraded, .is-scheduled) > i {
    background: var(--f2h-noc-warn);
}

body.f2h-template-clientareahome #main-body .f2h-noc-network.is-down > i {
    background: var(--f2h-noc-bad);
}

body.f2h-template-clientareahome #main-body .f2h-noc-map {
    position: relative;
    min-height: 352px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map > svg {
    position: absolute;
    inset: 8px 0 0;
    width: 100%;
    height: calc(100% - 8px);
    overflow: visible;
}

body.f2h-template-clientareahome #main-body .f2h-noc-orbit {
    fill: none;
    stroke: rgba(135, 109, 225, .2);
    stroke-dasharray: 3 8;
    stroke-width: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-orbit.is-inner {
    stroke: rgba(78, 177, 214, .15);
    stroke-dasharray: 2 6;
}

body.f2h-template-clientareahome #main-body .f2h-noc-link {
    fill: none;
    stroke: url(#f2hNocLineA);
    stroke-width: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-noc-packet {
    fill: #a78eff;
    filter: drop-shadow(0 0 6px rgba(138, 99, 255, .8));
}

body.f2h-template-clientareahome #main-body .f2h-noc-packet.p2,
body.f2h-template-clientareahome #main-body .f2h-noc-packet.p4 {
    fill: #64cde1;
    filter: drop-shadow(0 0 6px rgba(85, 200, 223, .76));
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-core,
body.f2h-template-clientareahome #main-body .f2h-noc-map-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    text-align: center;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-core {
    top: 50%;
    left: 50%;
    width: 112px;
    height: 112px;
    transform: translate(-50%, -48%);
    border: 1px solid rgba(146, 119, 239, .36);
    background:
        radial-gradient(circle at 34% 24%, rgba(138, 99, 255, .24), transparent 42%),
        rgba(6, 16, 34, .82);
    box-shadow:
        0 0 0 12px rgba(138, 99, 255, .028),
        0 0 48px rgba(85, 72, 190, .13),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-core > span {
    margin-bottom: 4px;
    color: #a68dff;
    font-size: 13px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-core strong {
    color: #f7f9ff;
    font-size: 30px;
    font-weight: 720;
    letter-spacing: -.05em;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-core small {
    margin-top: 3px;
    color: #8fa1ba;
    font-size: 11px;
    font-weight: 680;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node {
    width: 82px;
    height: 82px;
    color: #d9e2ef !important;
    transition: color .17s ease, transform .17s ease;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node::before {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid rgba(126, 153, 202, .25);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 26%, rgba(138, 99, 255, .12), rgba(6, 15, 31, .78) 68%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node > * {
    position: relative;
    z-index: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node:hover,
body.f2h-template-clientareahome #main-body .f2h-noc-map-node:focus-visible {
    color: #fff !important;
    transform: translateY(-3px);
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node:hover::before,
body.f2h-template-clientareahome #main-body .f2h-noc-map-node:focus-visible::before {
    border-color: rgba(160, 134, 255, .5);
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node > span {
    color: #9f88f3;
    font-size: 11px;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node strong {
    margin-top: 5px;
    color: inherit !important;
    font-size: 20px;
    font-weight: 710;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node small {
    margin-top: 4px;
    color: #8fa1b9;
    font-size: 10px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node.is-hosting {
    top: 17px;
    left: 9%;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node.is-vps {
    top: 19px;
    right: 7%;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node.is-dedicated {
    right: 6%;
    bottom: 5px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-map-node.is-domain {
    bottom: 3px;
    left: 8%;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line {
    display: grid;
    grid-template-columns: minmax(150px, .72fr) repeat(4, minmax(130px, 1fr));
    border-top: 1px solid var(--f2h-noc-rule-strong);
    border-bottom: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header,
body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a {
    min-height: 105px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 18px clamp(18px, 2vw, 32px);
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header {
    padding-left: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header > span,
body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header > small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header > span {
    color: #c5d0df;
    font-size: 13px;
    font-weight: 740;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header > small {
    margin-top: 6px;
    color: #71839f;
    font-size: 12px;
    font-weight: 540;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a {
    position: relative;
    border-left: 1px solid var(--f2h-noc-rule);
    color: #f0f4fb !important;
    transition: background-color .16s ease;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a::after {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 18px;
    height: 1px;
    content: "";
    background: rgba(138, 99, 255, .54);
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a:hover,
body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a:focus-visible {
    background: linear-gradient(90deg, rgba(138, 99, 255, .055), transparent);
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a > small {
    color: #8193ae;
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a > strong {
    display: inline-block;
    margin-top: 7px;
    color: inherit !important;
    font-size: 30px;
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a > span {
    margin-top: 4px;
    color: #8496b0;
    font-size: 12px;
    font-weight: 560;
}

body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a.has-attention > strong {
    color: var(--f2h-noc-warn) !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line {
    min-height: 64px;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    border-bottom: 1px solid var(--f2h-noc-rule);
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > span {
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    color: #a693eb;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > a {
    min-width: 220px;
    flex: 1 1 230px;
    display: grid;
    grid-template-columns: 8px auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-left: 1px solid var(--f2h-noc-rule);
    color: #d9e2ee !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > a > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--f2h-noc-warn);
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > a.is-critical > i {
    background: var(--f2h-noc-bad);
    box-shadow: 0 0 10px rgba(255, 113, 135, .32);
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > a strong {
    color: inherit !important;
    font-size: 13px;
    font-weight: 680;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > a small {
    justify-self: end;
    color: #8092ad;
    font-size: 11px;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-noc-workspace {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(310px, 365px);
    align-items: stretch;
    margin-top: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-section-label {
    display: block;
    color: #7f91ac;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index {
    min-width: 0;
    padding: 37px 30px 48px 16px;
    border-right: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-index-sticky {
    position: sticky;
    top: 20px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index-intro {
    margin: 12px 0 26px;
    color: #8295b0;
    font-size: 13px;
    line-height: 1.55;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav {
    border-top: 1px solid var(--f2h-noc-rule);
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a {
    position: relative;
    min-height: 59px;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 1px;
    border-bottom: 1px solid var(--f2h-noc-rule);
    color: #c6d1df !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a > i {
    width: 3px;
    height: 19px;
    display: block;
    border-radius: 99px;
    background: var(--f2h-noc-purple);
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a.is-vps > i {
    background: var(--f2h-noc-cyan);
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a.is-dedicated > i {
    background: var(--f2h-noc-blue);
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a.is-other > i {
    background: #8999b5;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav strong,
body.f2h-template-clientareahome #main-body .f2h-noc-index nav small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav strong {
    color: inherit !important;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav small {
    margin-top: 2px;
    color: #7588a4;
    font-size: 11px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index nav b {
    color: #8ea0b9;
    font-size: 13px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-index-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #a58dff !important;
    font-size: 13px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-estate {
    min-width: 0;
    padding: 36px clamp(28px, 3vw, 52px) 58px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-estate-header {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-estate-header h2 {
    margin: 7px 0 6px;
    color: #f0f4fb;
    font-size: clamp(28px, 2.2vw, 36px);
    font-weight: 690;
    letter-spacing: -.038em;
    line-height: 1.15;
}

body.f2h-template-clientareahome #main-body .f2h-noc-estate-header p {
    margin-bottom: 0;
    color: #899bb5;
    font-size: 14px;
    line-height: 1.55;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group {
    padding-top: 30px;
    scroll-margin-top: 24px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group + .f2h-noc-service-group {
    margin-top: 10px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--f2h-noc-rule);
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header > span {
    color: #9d84f4;
    font-size: 13px;
    text-align: center;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group.is-vps > header > span {
    color: var(--f2h-noc-cyan);
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group.is-dedicated > header > span {
    color: #73a0ff;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header h3 {
    margin: 0;
    color: #e9eef7;
    font-size: 18px;
    font-weight: 680;
    line-height: 1.3;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header p {
    margin: 3px 0 0;
    color: #71849f;
    font-size: 13px;
    line-height: 1.35;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header > small {
    color: #8395af;
    font-size: 12px;
    font-weight: 620;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-stream {
    position: relative;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service {
    position: relative;
    min-height: 78px;
    display: grid;
    grid-template-columns: minmax(86px, .38fr) minmax(180px, 1fr) minmax(110px, .5fr) 24px;
    align-items: center;
    gap: 16px;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(122, 153, 211, .13);
    color: #dbe4f1 !important;
    transition: padding .16s ease, background-color .16s ease;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service::before {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: -1px;
    width: 2px;
    content: "";
    background: var(--f2h-noc-purple);
    opacity: 0;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service:hover,
body.f2h-template-clientareahome #main-body .f2h-noc-service:focus-visible {
    padding-right: 8px;
    padding-left: 9px;
    background: linear-gradient(90deg, rgba(138, 99, 255, .055), transparent 70%);
}

body.f2h-template-clientareahome #main-body .f2h-noc-service:hover::before,
body.f2h-template-clientareahome #main-body .f2h-noc-service:focus-visible::before {
    opacity: 1;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service.has-attention {
    background: linear-gradient(90deg, rgba(241, 188, 103, .045), transparent 62%);
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #93a5bd;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-state > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8496af;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-state.is-active {
    color: #aebed2;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-state.is-active > i {
    background: var(--f2h-noc-good);
    box-shadow: 0 0 9px rgba(85, 221, 177, .34);
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-state:is(.is-pending, .is-suspended) {
    color: #aebed2;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-state:is(.is-pending, .is-suspended) > i {
    background: var(--f2h-noc-warn);
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-name,
body.f2h-template-clientareahome #main-body .f2h-noc-service-cycle {
    min-width: 0;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-name strong,
body.f2h-template-clientareahome #main-body .f2h-noc-service-name small,
body.f2h-template-clientareahome #main-body .f2h-noc-service-cycle strong,
body.f2h-template-clientareahome #main-body .f2h-noc-service-cycle small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-name strong {
    overflow: hidden;
    color: #e3eaf5 !important;
    font-size: 16px;
    font-weight: 640;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-name small {
    overflow: hidden;
    margin-top: 4px;
    color: #8194af;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-cycle small {
    margin-bottom: 4px;
    color: #6f829e;
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-cycle strong {
    overflow: hidden;
    color: #aebcd0 !important;
    font-size: 13px;
    font-weight: 590;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-arrow {
    color: #687d9f;
    font-size: 11px;
    text-align: right;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 11px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-service-group > footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9c84f3 !important;
    font-size: 12px;
    font-weight: 640;
}

body.f2h-template-clientareahome #main-body .f2h-noc-empty {
    min-height: 230px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-empty > span {
    color: #9e86f3;
    font-size: 24px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-empty strong {
    color: #e7edf7;
    font-size: 16px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-empty p {
    margin: 5px 0 0;
    color: #7f91aa;
    font-size: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-empty > a {
    color: #a58dff !important;
    font-size: 11px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-activity {
    min-width: 0;
    padding: 37px 16px 58px 32px;
    border-left: 1px solid var(--f2h-noc-rule-strong);
}

body.f2h-template-clientareahome #main-body .f2h-noc-activity-section + .f2h-noc-activity-section {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid var(--f2h-noc-rule);
}

body.f2h-template-clientareahome #main-body .f2h-noc-activity-section > h2,
body.f2h-template-clientareahome #main-body .f2h-noc-activity-heading h2 {
    margin: 7px 0 17px;
    color: #e9eef8;
    font-size: 18px;
    font-weight: 670;
    letter-spacing: -.025em;
    line-height: 1.25;
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links {
    border-top: 1px solid var(--f2h-noc-rule);
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links > a {
    min-height: 63px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 11px;
    align-items: center;
    gap: 11px;
    padding: 10px 1px;
    border-bottom: 1px solid var(--f2h-noc-rule);
    color: #c9d3e1 !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links > a > b {
    color: #9b83ef;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links > a > i:last-child {
    color: #617696;
    font-size: 8px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links strong,
body.f2h-template-clientareahome #main-body .f2h-noc-command-links small {
    display: block;
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links strong {
    color: #dbe3ef !important;
    font-size: 14px;
    font-weight: 640;
}

body.f2h-template-clientareahome #main-body .f2h-noc-command-links small {
    margin-top: 3px;
    color: #7386a1;
    font-size: 12px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-activity-heading {
    position: relative;
}

body.f2h-template-clientareahome #main-body .f2h-noc-activity-heading > a {
    position: absolute;
    right: 0;
    bottom: 3px;
    color: #a28bf3 !important;
    font-size: 12px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline {
    position: relative;
    padding-left: 18px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline::before {
    position: absolute;
    top: 10px;
    bottom: 12px;
    left: 3px;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, rgba(138, 99, 255, .5), rgba(85, 200, 223, .18));
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline > :where(a, div) {
    position: relative;
    min-height: 69px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 10px 0 10px 8px;
    border-bottom: 1px solid rgba(122, 153, 211, .13);
    color: #c2cddd !important;
    font-size: 13px;
    line-height: 1.42;
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline > :where(a, div) > i {
    position: absolute;
    top: 50%;
    left: -18px;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    border: 2px solid #071225;
    border-radius: 50%;
    background: #9a80f2;
    box-shadow: 0 0 0 1px rgba(154, 128, 242, .32);
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline :where(strong, small) {
    color: inherit !important;
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline small {
    display: block;
    margin-top: 4px;
    color: #7487a2 !important;
    font-size: 11px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline .label,
body.f2h-template-clientareahome #main-body .f2h-noc-ticket-timeline .badge {
    display: inline;
    margin-left: 4px;
    padding: 0;
    color: #9f8bea !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 9px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-open-ticket {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: #a48cf5 !important;
    font-size: 12px;
    font-weight: 650;
}

body.f2h-template-clientareahome #main-body .f2h-noc-status-links > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 1px;
    border-bottom: 1px solid var(--f2h-noc-rule);
    color: #b8c4d5 !important;
    font-size: 13px;
    font-weight: 620;
}

body.f2h-template-clientareahome #main-body .f2h-noc-status-links > a span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body.f2h-template-clientareahome #main-body .f2h-noc-status-links > a span i {
    width: 18px;
    color: #9078e5;
    text-align: center;
}

body.f2h-template-clientareahome #main-body .f2h-noc-status-links > a > i {
    color: #607493;
    font-size: 8px;
}

@media (max-width: 1320px) {
    body.f2h-template-clientareahome #main-body .f2h-noc-hero {
        grid-template-columns: minmax(0, 1fr) minmax(470px, .9fr);
        gap: 42px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-workspace {
        grid-template-columns: 190px minmax(0, 1fr) 310px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index {
        padding-right: 22px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-activity {
        padding-left: 25px;
    }
}

@media (max-width: 1099.98px) {
    body.f2h-template-clientareahome #main-body .f2h-noc-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-copy {
        max-width: 820px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-topology {
        width: min(100%, 760px);
        justify-self: center;
        padding-left: 0;
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-workspace {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-activity {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 42px;
        padding: 38px 16px 48px;
        border-top: 1px solid var(--f2h-noc-rule-strong);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-activity-section + .f2h-noc-activity-section {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-status-links {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
        margin-top: 30px !important;
        padding-top: 24px !important;
        border-top: 1px solid var(--f2h-noc-rule) !important;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-status-links > .f2h-noc-section-label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    body.f2h-template-clientareahome #main-body .f2h-noc-hero {
        min-height: 0;
        gap: 38px;
        padding: 34px 0 30px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-copy {
        padding-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero h1 {
        font-size: clamp(46px, 13vw, 62px);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-copy > p {
        font-size: 15px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-topology > header {
        padding-right: 2px;
        padding-left: 2px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map {
        min-height: 310px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map-node {
        width: 72px;
        height: 72px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map-core {
        width: 98px;
        height: 98px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-state-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-state-line > header {
        grid-column: 1 / -1;
        min-height: 70px;
        padding-left: 0;
        border-bottom: 1px solid var(--f2h-noc-rule);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a {
        min-height: 92px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a:nth-of-type(odd) {
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a:nth-of-type(n + 3) {
        border-top: 1px solid var(--f2h-noc-rule);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > span {
        min-width: 120px;
        padding-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index {
        padding: 31px 0 25px;
        border-right: 0;
        border-bottom: 1px solid var(--f2h-noc-rule-strong);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index-sticky {
        position: static;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index-intro {
        margin-bottom: 20px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a:nth-child(even) {
        padding-left: 15px;
        border-left: 1px solid var(--f2h-noc-rule);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-estate {
        padding: 34px 0 46px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service {
        grid-template-columns: minmax(72px, .35fr) minmax(0, 1fr) 22px;
        gap: 11px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service-cycle {
        display: none;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-activity {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 36px 0 48px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-activity-section + .f2h-noc-activity-section {
        margin-top: 36px;
        padding-top: 31px;
        border-top: 1px solid var(--f2h-noc-rule);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-status-links {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479.98px) {
    body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a {
        justify-content: center;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a + a {
        border-top: 1px solid var(--f2h-noc-rule);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-hero-actions > a.is-primary {
        margin-right: 0;
        margin-bottom: 5px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map {
        min-height: 285px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map-node {
        width: 66px;
        height: 66px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map-node strong {
        font-size: 17px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map-node small {
        font-size: 8px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-map-core {
        width: 88px;
        height: 88px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-state-line > a {
        padding-right: 14px;
        padding-left: 14px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-alert-line {
        flex-direction: column;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > :where(span, a) {
        min-width: 0;
        width: 100%;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-alert-line > a {
        min-height: 56px;
        border-top: 1px solid var(--f2h-noc-rule);
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index nav {
        grid-template-columns: minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-index nav > a:nth-child(even) {
        padding-left: 1px;
        border-left: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service-group > header > small {
        grid-column: 2;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service {
        grid-template-columns: 14px minmax(0, 1fr) 20px;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service-state {
        font-size: 0;
    }

    body.f2h-template-clientareahome #main-body .f2h-noc-service-state > i {
        width: 7px;
        height: 7px;
    }
}

body.f2h-shell.f2h-shopping-cart::before,
body.f2h-shell.f2h-shopping-cart::after {
    content: none !important;
    background: none !important;
}

body.f2h-shell.f2h-shopping-cart,
body.f2h-shell.f2h-shopping-cart .f2h-main,
body.f2h-shell.f2h-shopping-cart #main-body {
    background: #030625 !important;
    background-image: none !important;
}

/* Authenticated account credit ------------------------------------------------ */

.f2h-credit-nav {
    position: relative;
    align-self: center;
}

.f2h-credit-trigger {
    min-width: 128px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(100, 148, 226, .22);
    border-radius: 10px;
    color: #d8e4f5;
    background: rgba(255, 255, 255, .035);
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.f2h-credit-trigger:hover,
.f2h-credit-trigger:focus-visible,
.f2h-credit-nav.show .f2h-credit-trigger {
    border-color: rgba(111, 159, 255, .58);
    color: #fff;
    background: rgba(45, 82, 148, .32);
    outline: 0;
}

.f2h-credit-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(88, 135, 255, .2);
}

.f2h-credit-trigger > .fa-wallet {
    color: #8fb5ff;
    font-size: 12px;
}

.f2h-credit-label {
    color: #93a8c7;
    font-weight: 650;
}

.f2h-credit-amount {
    min-width: 0;
    max-width: 112px;
    flex: 0 1 auto;
    overflow: hidden;
    color: #f7faff;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f2h-credit-chevron {
    margin-left: 1px;
    color: #758cae;
    font-size: 8px;
    transition: transform .18s ease;
}

.f2h-credit-nav.show .f2h-credit-chevron {
    transform: rotate(180deg);
}

.f2h-credit-menu {
    min-width: 286px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid rgba(113, 157, 231, .22);
    border-radius: 14px;
    color: #dce7f7;
    background: #081640;
    box-shadow: 0 24px 64px rgba(0, 5, 28, .42);
}

.f2h-credit-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 13px;
    border-bottom: 1px solid rgba(113, 157, 231, .16);
}

.f2h-credit-summary > span {
    color: #8fa4c3;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.f2h-credit-summary > strong {
    color: #fff;
    font-size: 25px;
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.f2h-credit-summary > small {
    max-width: 230px;
    color: #9cafca;
    font-size: 11px;
    line-height: 1.45;
}

.f2h-credit-add {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    padding: 0 11px;
    border: 1px solid rgba(111, 159, 255, .28);
    border-radius: 9px;
    color: #eaf1ff;
    background: rgba(46, 91, 177, .24);
    font-size: 12px;
    font-weight: 720;
}

.f2h-credit-add:hover,
.f2h-credit-add:focus-visible {
    border-color: rgba(111, 159, 255, .58);
    color: #fff;
    background: rgba(46, 91, 177, .42);
    outline: 0;
}

.f2h-credit-add > i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #f5f8ff;
    background: #315fcb;
    font-size: 9px;
}

/* Native Add Funds form and modal -------------------------------------------- */

.f2h-add-funds-native {
    display: grid;
    gap: 16px;
    color: #dce6f4;
}

.f2h-add-funds-intro {
    max-width: 680px;
}

.f2h-add-funds-kicker,
.f2h-add-credit-modal-kicker {
    display: block;
    margin-bottom: 5px;
    color: #8fb5ff;
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.f2h-add-funds-intro h2 {
    margin: 0;
    color: #f8fbff;
    font-size: clamp(23px, 3vw, 32px);
    font-weight: 720;
    letter-spacing: -.035em;
    line-height: 1.14;
}

.f2h-add-funds-intro p {
    margin: 8px 0 0;
    color: #aebed5;
    font-size: 14px;
    line-height: 1.65;
}

.f2h-add-funds-limits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(119, 151, 207, .18);
    border-radius: 14px;
    background: #081329;
}

.f2h-add-funds-limit {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
}

.f2h-add-funds-limit + .f2h-add-funds-limit {
    border-left: 1px solid rgba(119, 151, 207, .15);
}

.f2h-add-funds-limit > span {
    color: #899dbb;
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.f2h-add-funds-limit > strong {
    overflow: hidden;
    color: #f7faff;
    font-size: 16px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f2h-add-funds-form {
    padding: 20px;
    border: 1px solid rgba(119, 151, 207, .18);
    border-radius: 16px;
    background: #0a162c;
}

.f2h-add-funds-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.f2h-add-funds-field {
    min-width: 0;
}

.f2h-add-funds-field label {
    display: block;
    margin-bottom: 7px;
    color: #eef4fd;
    font-size: 12px;
    font-weight: 700;
}

body.f2h-shell .f2h-add-funds-field :where(.form-control, .custom-select) {
    min-height: 44px;
    border: 1px solid rgba(119, 151, 207, .28);
    border-radius: 10px;
    color: #f7faff;
    background-color: #071226;
    font-size: 13px;
    box-shadow: none;
}

body.f2h-shell .f2h-add-funds-field .custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239db0ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 13px center;
    background-size: 12px 8px;
}

body.f2h-shell .f2h-add-funds-field :where(.form-control, .custom-select):focus {
    border-color: rgba(119, 151, 207, .28);
    outline: 0;
    box-shadow: none;
}

.f2h-add-funds-field small {
    display: block;
    margin-top: 6px;
    color: #8fa2bf;
    font-size: 11px;
    line-height: 1.4;
}

.f2h-add-funds-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid rgba(119, 151, 207, .14);
    color: #9dafc9;
    font-size: 11.5px;
    line-height: 1.5;
}

.f2h-add-funds-note > i {
    margin-top: 2px;
    color: #8fb5ff;
}

.f2h-add-funds-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 17px;
}

body.f2h-shell .f2h-add-funds-actions .btn-primary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid #416fd8;
    border-radius: 10px;
    color: #fff;
    background: #315fcb;
    box-shadow: 0 9px 24px rgba(25, 70, 174, .23);
    font-size: 12.5px;
    font-weight: 720;
}

body.f2h-shell .f2h-add-funds-actions .btn-primary:hover,
body.f2h-shell .f2h-add-funds-actions .btn-primary:focus-visible {
    border-color: #6994f2;
    color: #fff;
    background: #3a69d5;
    outline: 0;
}

.f2h-add-credit-modal .modal-dialog {
    max-width: 650px;
}

.f2h-add-credit-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(119, 151, 207, .26);
    border-radius: 18px;
    color: #dce6f4;
    background: #08142b;
    box-shadow: 0 34px 90px rgba(0, 4, 25, .58);
}

.f2h-add-credit-modal .modal-header {
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(119, 151, 207, .16);
    background: #0a1832;
}

.f2h-add-credit-modal-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.f2h-add-credit-modal-heading > div {
    min-width: 0;
}

.f2h-add-credit-modal-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(131, 172, 244, .3);
    border-radius: 14px;
    color: #8fb5ff;
    background: linear-gradient(145deg, rgba(41, 83, 157, .46), rgba(8, 24, 54, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 7, 26, .3);
}

.f2h-add-credit-modal-icon svg {
    width: 31px;
    height: 31px;
    overflow: visible;
    fill: none;
    stroke: url(#f2hCreditIconStroke);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.f2h-add-credit-modal-icon .f2h-credit-icon-dot {
    fill: #dce8ff;
    stroke: none;
}

.f2h-add-credit-modal-icon .f2h-credit-icon-detail {
    stroke: rgba(188, 211, 255, .66);
    stroke-width: 1.5;
}

.f2h-add-credit-modal-icon .f2h-credit-icon-plus {
    stroke: #e9f1ff;
    stroke-width: 1.7;
}

.f2h-add-credit-modal .modal-title {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 720;
    letter-spacing: -.025em;
}

.f2h-add-credit-modal .modal-header .close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 0 2px;
    border: 1px solid rgba(119, 151, 207, .2);
    border-radius: 9px;
    color: #b8c7dd;
    background: rgba(255, 255, 255, .035);
    opacity: 1;
    text-shadow: none;
}

.f2h-add-credit-modal .modal-header .close:hover,
.f2h-add-credit-modal .modal-header .close:focus {
    color: #fff;
    background: rgba(74, 108, 171, .3);
}

.f2h-add-credit-modal .modal-body {
    max-height: min(72vh, 690px);
    overflow-y: auto;
    padding: 20px;
}

.f2h-add-credit-loading {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #9fb0ca;
    font-size: 12px;
}

.f2h-add-credit-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(111, 159, 255, .2);
    border-top-color: #6f9fff;
    border-radius: 50%;
    animation: f2h-credit-spin .8s linear infinite;
}

@keyframes f2h-credit-spin {
    to { transform: rotate(360deg); }
}

.f2h-add-credit-content .f2h-add-funds-native.is-modal {
    gap: 13px;
}

.f2h-add-credit-content .f2h-add-funds-native.is-modal .f2h-add-funds-intro {
    display: none;
}

.f2h-add-credit-content .f2h-add-funds-native.is-modal .f2h-add-funds-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.f2h-add-credit-fallback {
    padding: 22px;
    border: 1px solid rgba(119, 151, 207, .18);
    border-radius: 14px;
    text-align: center;
    background: #0a162c;
}

.f2h-add-credit-fallback p {
    margin: 0 0 14px;
    color: #b4c3d9;
    font-size: 13px;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .f2h-credit-trigger {
        min-width: 102px;
    }

    .f2h-credit-label {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .f2h-credit-nav {
        width: 100%;
        margin-top: 8px;
    }

    .f2h-credit-trigger {
        width: 100%;
        height: 44px;
        justify-content: flex-start;
        padding-right: 12px;
        padding-left: 12px;
    }

    .f2h-credit-amount {
        max-width: none;
        margin-left: auto;
    }

    .f2h-credit-menu {
        position: static !important;
        width: 100%;
        margin-top: 6px;
        transform: none !important;
    }

    .f2h-credit-summary > small {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .f2h-credit-menu {
        min-width: 0;
    }

    .f2h-add-credit-modal .modal-dialog {
        margin: 8px;
    }

    .f2h-add-credit-modal .modal-header,
    .f2h-add-credit-modal .modal-body {
        padding: 15px;
    }

    .f2h-add-credit-modal-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .f2h-add-funds-limits,
    .f2h-add-funds-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .f2h-add-funds-limit + .f2h-add-funds-limit {
        border-top: 1px solid rgba(119, 151, 207, .15);
        border-left: 0;
    }

    .f2h-add-funds-form {
        padding: 15px;
    }

    body.f2h-shell .f2h-add-funds-field :where(.form-control, .custom-select) {
        font-size: 16px;
    }

    .f2h-add-funds-actions .btn-primary {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-add-credit-spinner {
        animation-duration: 1.8s;
    }
}