/* FireVPS theme — built from src/css by scripts/build.sh. Do not edit here. */
/* ═════════ FireVPS theme — design tokens ═════════
   The one place for colours, radius and shadows. Light is the default; dark mode is the same
   tokens with other values (html[data-theme="dark"]). Values come from the approved mockup
   (docs/whmcs-theme-mockup.html), which follows the new firevps.net. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --fv-font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Tahoma,sans-serif;
  --fv-font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --fv-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* grounds and lines */
  --fv-bg:#FFFFFF; --fv-card:#FFFFFF; --fv-soft:#F7F9FC; --fv-soft2:#EEF2F8;
  --fv-line:rgb(14 23 38 / .10); --fv-line2:rgb(14 23 38 / .06); --fv-line-strong:rgb(14 23 38 / .20);
  /* text */
  --fv-ink:#0E1726; --fv-ink2:#55627A; --fv-ink3:#66738A;
  /* brand: logo/accent orange, and the flat button orange with white text */
  --fv-brand:#F6921E; --fv-brand-soft:rgb(246 146 30 / .12); --fv-brand-line:rgb(246 146 30 / .45); --fv-brand-ink:#A65200;
  --fv-btn:#F27F19; --fv-btn-hover:#E0700E; --fv-on-brand:#FFFFFF;
  --fv-title-grad:linear-gradient(92deg,#DB6B00,#E0481A);
  /* states */
  --fv-ok:#0D6B3E; --fv-ok-soft:#E7F7EE; --fv-ok-line:#BFE8D0;
  --fv-warn:#B45309; --fv-warn-soft:#FFF6E5; --fv-warn-line:#FBE0AE; --fv-warn-ink:#7C3A03;
  --fv-bad:#B91C1C; --fv-bad-soft:#FDEDED; --fv-bad-line:#F6C9C9;
  --fv-info:#1D4ED8; --fv-info-soft:#EAF1FF; --fv-info-line:#C7D7FB;
  --fv-ai:#6D28D9; --fv-ai-soft:#F2EEFF;
  /* side menu */
  --fv-side:#FFFFFF; --fv-side-ink:#3A4A63; --fv-side-ink2:#66738A; --fv-side-hover:#F3F6FA;
  --fv-side-on:rgb(246 146 30 / .12); --fv-side-on-ink:#A65200; --fv-side-line:rgb(14 23 38 / .09);
  /* shape */
  --fv-r:16px; --fv-rs:12px;
  --fv-sh:0 1px 2px rgb(14 23 38 / .04),0 4px 12px -8px rgb(14 23 38 / .10);
  --fv-sh-up:0 10px 24px -14px rgb(14 23 38 / .20);
  --fv-sh-big:0 40px 80px -30px rgb(14 23 38 / .45);
  --fv-scrim:rgb(9 13 25 / .45);
  --fv-hero:radial-gradient(120% 90% at 85% -10%,rgb(246 146 30 / .30),transparent 55%),linear-gradient(160deg,#131D33,#0B1220 60%,#070B14);
  color-scheme:light;
}

html[data-theme="dark"]{
  --fv-bg:#05080F; --fv-card:#111B2F; --fv-soft:#0B1322; --fv-soft2:#1A2540;
  --fv-line:rgb(255 255 255 / .10); --fv-line2:rgb(255 255 255 / .065); --fv-line-strong:rgb(255 255 255 / .22);
  --fv-ink:#FFFFFF; --fv-ink2:#A3B0C4; --fv-ink3:#7A879C;
  --fv-brand-soft:rgb(246 146 30 / .14); --fv-brand-line:rgb(246 146 30 / .45); --fv-brand-ink:#FFB865;
  --fv-title-grad:linear-gradient(92deg,#FFB45C 0%,#F6921E 45%,#FF6A2B 100%);
  --fv-ok:#6EE7A0; --fv-ok-soft:rgb(34 197 94 / .13); --fv-ok-line:rgb(34 197 94 / .35);
  --fv-warn:#FCD34D; --fv-warn-soft:rgb(252 211 77 / .11); --fv-warn-line:rgb(252 211 77 / .3); --fv-warn-ink:#FCD34D;
  --fv-bad:#FCA5A5; --fv-bad-soft:rgb(239 68 68 / .13); --fv-bad-line:rgb(239 68 68 / .35);
  --fv-info:#93C5FD; --fv-info-soft:rgb(59 130 246 / .15); --fv-info-line:rgb(59 130 246 / .35);
  --fv-ai:#C4B5FD; --fv-ai-soft:rgb(139 92 246 / .16);
  --fv-side:#0A111F; --fv-side-ink:#B9C4D4; --fv-side-ink2:#7A879C; --fv-side-hover:#16203A;
  --fv-side-on:rgb(246 146 30 / .14); --fv-side-on-ink:#FFB865; --fv-side-line:rgb(255 255 255 / .08);
  --fv-sh:inset 0 1px 0 rgb(255 255 255 / .05),0 1px 2px rgb(0 0 0 / .35),0 6px 14px -10px rgb(0 0 0 / .5);
  --fv-sh-up:0 12px 26px -14px rgb(0 0 0 / .6);
  --fv-sh-big:0 40px 80px -30px rgb(0 0 0 / .8);
  --fv-scrim:rgb(0 0 0 / .6);
  color-scheme:dark;
}
/* ═════════ FRAME: side menu, top bar, notice bar, content area, footer, quick search ═════════
   All frame classes start with fv- so they never clash with Bootstrap or WHMCS module pages.
   Left/right use logical properties (inline-start/end) so Arabic, Persian and Hebrew flip. */

html,body{height:auto;min-height:100%}
html,body{overflow-x:clip}
body.fv{margin:0;background:var(--fv-bg);color:var(--fv-ink);font:15px/1.55 var(--fv-font);-webkit-font-smoothing:antialiased}
.fv [hidden]{display:none!important}

.fv-i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.fv-i-sm{width:15px;height:15px}
.fv-b{width:18px;height:18px;flex:none;fill:currentColor;stroke:none;vertical-align:middle}
[dir="rtl"] .fv-car,[dir="rtl"] .fv-flip{transform:scaleX(-1)}
.fv-num{font-variant-numeric:tabular-nums}
.fv-grow{flex:1;min-width:0}
.fv-sp{flex:1}
.fv-ok{color:var(--fv-ok)}

.fv-app{display:flex;min-height:100vh}

/* ───── side menu ───── */
.fv-side{width:256px;flex:none;background:var(--fv-side);border-inline-end:1px solid var(--fv-side-line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.fv-side-head{display:flex;align-items:center}
.fv-side .fv-side-x{display:none;margin-inline-start:auto;margin-inline-end:10px}
.fv-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;font:800 18px/1 var(--fv-font-display);letter-spacing:-.03em;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-mk{width:28px;height:28px;border-radius:.55rem;background:conic-gradient(from 210deg,#FFB865,#F6921E,#FF5A1F,#F6921E);box-shadow:0 0 12px rgb(246 146 30 / .3);flex:none}
.fv-acct{margin:0 12px 6px;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--fv-side-line);border-radius:12px;color:var(--fv-side-ink)!important;font-size:13.5px;text-decoration:none!important}
.fv-acct:hover{background:var(--fv-side-hover)}
.fv-acct-lg{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.fv-acct b{display:block;color:var(--fv-ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-acct .fv-i{color:var(--fv-side-ink2)}
.fv-nav{flex:1;overflow:auto;padding:6px 12px 12px;scrollbar-width:thin}
.fv-sec{padding:16px 10px 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fv-side-ink2)}
.fv-ni{display:flex;align-items:center;gap:11px;width:100%;padding:8.5px 10px;border-radius:10px;color:var(--fv-side-ink)!important;font-size:14.5px;font-weight:500;border:0;background:none;text-align:start;position:relative;margin-bottom:1px;text-decoration:none!important;cursor:pointer;font-family:inherit;line-height:1.4}
.fv-ni:hover{background:var(--fv-side-hover);color:var(--fv-ink)!important}
.fv-ni:focus-visible,.fv-sub a:focus-visible{outline:2px solid var(--fv-brand);outline-offset:-2px}
.fv-ni.is-on{background:var(--fv-side-on);color:var(--fv-side-on-ink)!important;font-weight:600}
.fv-ni-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-ct{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--fv-side-ink2)}
.fv-due{margin-inline-start:auto;background:var(--fv-btn);color:var(--fv-on-brand);font-size:12px;font-weight:700;padding:1px 7px;border-radius:99px;white-space:nowrap}
.fv-car{margin-inline-start:auto;transition:transform .2s;opacity:.6}
.fv-due+.fv-car{margin-inline-start:6px}
.fv-grp.is-open>.fv-ni .fv-car{transform:rotate(90deg)}
[dir="rtl"] .fv-grp.is-open>.fv-ni .fv-car{transform:scaleX(-1) rotate(90deg)}
.fv-sub{display:none;padding:2px 0 6px;margin-inline-start:19px;border-inline-start:1px solid var(--fv-side-line)}
.fv-grp.is-open .fv-sub{display:block}
.fv-sub a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;font-size:14px;color:var(--fv-side-ink)!important;margin-inline-start:10px;text-decoration:none!important}
.fv-sub a:hover{background:var(--fv-side-hover);color:var(--fv-ink)!important}
.fv-sub a.is-on{color:var(--fv-brand-ink)!important;font-weight:600}
.fv-sub a em{font-style:normal;font-size:12px;color:var(--fv-side-ink2)}
.fv-ni-ai{background:linear-gradient(120deg,#ede9fe,#e0e7ff);color:#4c1d95!important}
.fv-ni-ai:hover{color:#4c1d95!important;filter:brightness(.98)}
[data-theme="dark"] .fv-ni-ai{background:linear-gradient(120deg,rgba(91,33,182,.55),rgba(67,56,202,.35));color:#fff!important}
.fv-new{margin-inline-start:auto;background:var(--fv-btn);color:var(--fv-on-brand);font-size:12px;font-weight:700;padding:1px 6px;border-radius:99px}
.fv-sidefoot{padding:12px;border-top:1px solid var(--fv-side-line)}
.fv-credit{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--fv-side-hover)}
.fv-credit>.fv-i{color:var(--fv-brand)}
.fv-credit b{display:block;font-size:15.5px;color:var(--fv-ink);line-height:1.3}
.fv-credit span{display:block;font-size:12.5px;color:var(--fv-side-ink2);white-space:nowrap}
.fv-credit-btn{margin-inline-start:auto;background:var(--fv-btn);color:var(--fv-on-brand)!important;border-radius:8px;padding:5px 9px;font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none!important}
.fv-credit-btn:hover{background:var(--fv-btn-hover)}

/* ───── main column and top bar ───── */
.fv-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fv-top{height:64px;background:color-mix(in srgb,var(--fv-card) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--fv-line);display:flex;align-items:center;gap:8px;padding:0 24px;position:sticky;top:0;z-index:30}
[data-theme="dark"] .fv-top{border-bottom-color:rgb(255 255 255 / .07)}
.fv-top-brand{display:none;padding-block:0;padding-inline:0 10px}
.fv-burger{display:none!important}
.fv-cmdk{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:11px;border:1px solid var(--fv-line);background:var(--fv-soft);color:var(--fv-ink3);flex:0 1 360px;min-width:0;font:inherit;font-size:14.5px;text-align:start;cursor:pointer}
.fv-cmdk:hover{border-color:var(--fv-brand-line)}
.fv-cmdk>span:not(.fv-kbd){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-kbd{direction:ltr;unicode-bidi:isolate;font:12px var(--fv-mono);border:1px solid var(--fv-line);border-bottom-width:2px;border-radius:6px;padding:1px 5px;color:var(--fv-ink3);background:var(--fv-card);white-space:nowrap;flex:none}
.fv-ib{width:40px;height:40px;border-radius:11px;border:0;background:none;display:grid;place-items:center;color:var(--fv-ink2)!important;position:relative;flex:none;cursor:pointer;padding:0;text-decoration:none!important}
.fv-ib:hover{background:var(--fv-soft2);color:var(--fv-ink)!important}
.fv-ib-sm{width:30px;height:30px}
.fv-badge{position:absolute;top:5px;inset-inline-end:4px;min-width:17px;height:17px;border-radius:99px;background:var(--fv-btn);color:var(--fv-on-brand);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--fv-card);line-height:1}
.fv-badge.is-empty{display:none}
.fv-lang{height:40px;border-radius:11px;border:1px solid var(--fv-line);background:none;padding:0 11px;display:flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600;color:var(--fv-ink2);white-space:nowrap;cursor:pointer}
.fv-lang:hover{background:var(--fv-soft2)}
[data-theme="dark"] .fv-show-light,html:not([data-theme="dark"]) .fv-show-dark{display:none}
.fv-me{display:flex;align-items:center;gap:9px;border:0;background:none;padding:4px 8px 4px 4px;border-radius:12px;flex:none;font:inherit;color:var(--fv-ink);cursor:pointer;text-align:start}
.fv-me:hover{background:var(--fv-soft2)}
.fv-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13.5px;flex:none}
.fv-me .fv-t b,.fv-whocard b{display:block;font-size:14px;line-height:1.2;white-space:nowrap}
.fv-me .fv-t span,.fv-whocard span span{display:block;font-size:12.5px;color:var(--fv-ink3);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.fv-admin{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;background:var(--fv-ai-soft);color:var(--fv-ai)!important;font-size:13.5px;font-weight:600;white-space:nowrap;text-decoration:none!important}
.fv-top .btn-primary .fv-i{margin-inline-end:4px}

/* dropdown menus */
.fv-dd{position:relative}
.fv-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:var(--fv-card);border:1px solid var(--fv-line);border-radius:14px;box-shadow:var(--fv-sh-big);padding:6px;min-width:240px;z-index:60;display:none;color:var(--fv-ink)}
.fv-menu.is-on{display:block;animation:fv-pop .14s ease}
.fv-menu-scroll{max-height:min(70vh,520px);overflow:auto}
.fv-menu-notes{width:340px}
.fv-menu-mini{width:320px}
.fv-mini-line{display:flex;gap:10px;align-items:center;padding:8px 10px}
.fv-mini-line .fv-grow b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-mini-line .fv-grow span{display:block;font-size:13px;color:var(--fv-ink3)}
.fv-mini-line>.fv-num{font-size:14px;white-space:nowrap}
.fv-mini-tot{display:flex;justify-content:space-between;padding:10px;margin-top:4px;border-top:1px solid var(--fv-line);font-size:14px}
.fv-mini-tot[hidden]{display:none}
.fv-mini-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 4px 4px}
.fv-menu .fv-mini-btns a{justify-content:center;padding:0 10px}
.fv-menu .fv-mini-btns .btn-primary{color:var(--fv-on-brand)!important;background:var(--fv-btn)}
.fv-menu .fv-mini-btns .btn-primary:hover{background:var(--fv-btn-hover)}
.fv-menu .fv-mini-btns .btn.disabled{pointer-events:none}
.fv-menu-user{width:270px}
.fv-menu a{display:flex;align-items:center;gap:10px;width:100%;text-align:start;border:0;background:none;padding:8px 10px;border-radius:9px;font-size:14px;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-menu a:hover{background:var(--fv-soft2)}
.fv-menu a>.fv-i{color:var(--fv-ink3)}
.fv-menu a>.fv-ok{margin-inline-start:auto;color:var(--fv-ok)}
.fv-menu hr{border:0;border-top:1px solid var(--fv-line);margin:6px 0}
.fv-mh{padding:8px 10px 6px;font-size:12px;font-weight:700;color:var(--fv-ink3);text-transform:uppercase;letter-spacing:.06em}
.fv-menu .fv-nt{align-items:flex-start}
.fv-empty{padding:10px;font-size:14px;color:var(--fv-ink2)}
.fv-whocard{display:flex;gap:11px;align-items:center;padding:10px;border-radius:10px;background:var(--fv-soft)}
.fv-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}
.fv-ico-s{width:30px;height:30px;border-radius:9px}
.fv-c-ok{background:var(--fv-ok-soft);color:var(--fv-ok)} .fv-c-warn{background:var(--fv-warn-soft);color:var(--fv-warn)}
.fv-c-bad{background:var(--fv-bad-soft);color:var(--fv-bad)} .fv-c-info{background:var(--fv-info-soft);color:var(--fv-info)}
.fv-c-brand{background:var(--fv-brand-soft);color:var(--fv-brand)} .fv-c-ai{background:var(--fv-ai-soft);color:var(--fv-ai)}

/* ───── notice bar (also WHMCS's e-mail / ID verification banners) ───── */
.fv-notice,.fv .verification-banner{display:flex;align-items:center;gap:12px;padding:10px 40px;font-size:14px;border-bottom:1px solid var(--fv-warn-line);background:var(--fv-warn-soft);color:var(--fv-ink)}
.fv-notice>.fv-i{color:var(--fv-warn)}
.fv-notice>span{flex:1;min-width:0}
.fv-notice .fv-r{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.fv-notice.is-bad{background:var(--fv-bad-soft);border-bottom-color:var(--fv-bad-line)}
.fv-notice.is-bad>.fv-i{color:var(--fv-bad)}
.fv-link{color:var(--fv-brand-ink)!important;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.fv .verification-banner{display:block;padding:10px 40px}
.fv .verification-banner .container{max-width:none;padding:0}
.fv .verification-banner .row{align-items:center}
.fv .verification-banner .text{color:var(--fv-ink)}
.fv .verification-banner i{color:var(--fv-warn)}
.fv .verification-banner .close{color:var(--fv-ink2);opacity:1;text-shadow:none}

/* ───── content area ───── */
/* .container is kept on the content area: WHMCS's script measures it to decide whether to fold side panels. */
.fv-content,.fv-content.container{flex:1;width:100%;max-width:1680px;margin:0 auto;padding:28px 40px 56px}
.fv-crumb{margin-bottom:10px}
.fv-crumb .breadcrumb{display:flex;flex-wrap:wrap;gap:6px;background:none;padding:0;margin:0;font-size:13.5px;color:var(--fv-ink3)}
.fv-crumb .breadcrumb-item+.breadcrumb-item{padding-inline-start:0}
.fv-crumb .breadcrumb-item+.breadcrumb-item::before{content:"›";padding:0 6px 0 0;color:var(--fv-ink3);float:none}
[dir="rtl"] .fv-crumb .breadcrumb-item+.breadcrumb-item::before{content:"‹";padding:0 0 0 6px}
.fv-crumb a{color:var(--fv-ink3)} .fv-crumb a:hover{color:var(--fv-ink);text-decoration:none}
.fv-crumb .active{color:var(--fv-ink2)}
.fv-ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.fv-ph h1{margin:0;font:700 24px/1.25 var(--fv-font-display);letter-spacing:-.02em;color:var(--fv-ink)}
.fv-body{min-width:0}
.fv-body.has-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.fv-page{min-width:0}
.fv-aside{display:grid;gap:16px;align-content:start;min-width:0}
/* account pages: the menu on the left, like the mockup's account page */
.fv-body.has-aside.is-account{grid-template-columns:240px minmax(0,1fr)}
.fv-body.is-account .fv-aside{order:-1}
.fv-body.is-account .card-sidebar .card-header{display:none}
.fv-body.is-account .card-sidebar .collapsable-card-body{display:block!important}
.fv-body.is-account .card-sidebar .list-group{padding:8px;display:grid!important;gap:2px}
.fv-body.is-account .card-sidebar .list-group-item{border:0!important;border-radius:9px!important;padding:9px 10px;font-size:14.5px;font-weight:500;color:var(--fv-ink2)}
.fv-body.is-account .card-sidebar .list-group-item.active{background:var(--fv-brand-soft);color:var(--fv-brand-ink);font-weight:600}
.fv-aside .sidebar{display:grid;gap:16px}
.fv-aside .sidebar:empty{display:none}

/* ───── footer ───── */
.fv-foot{border-top:1px solid var(--fv-line);padding:18px 40px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--fv-ink3)}
.fv-foot a{color:var(--fv-ink3)} .fv-foot a:hover{color:var(--fv-ink);text-decoration:none}
.fv-foot .list-inline-item{margin:0}
.fv-foot .list-inline-item .btn{height:auto;padding:0 4px;border:0;background:none;color:var(--fv-ink3)}
.fv-foot-lang{display:none;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;color:var(--fv-ink3);cursor:pointer}
.fv-status{display:inline-flex;align-items:center;gap:7px;color:var(--fv-ok)!important;font-weight:600}
.fv-status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--fv-ok-soft)}
.fv-status.is-bad{color:var(--fv-bad)!important} .fv-status.is-bad i{box-shadow:0 0 0 3px var(--fv-bad-soft)}

/* ───── overlays: scrim and quick search ───── */
.fv-scrim{position:fixed;inset:0;background:var(--fv-scrim);z-index:70}
.fv-pal{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));background:var(--fv-card);border:1px solid var(--fv-line);border-radius:16px;box-shadow:var(--fv-sh-big);z-index:80;overflow:hidden;color:var(--fv-ink)}
.fv-pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--fv-line);color:var(--fv-ink3)}
.fv-pal-in input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--fv-ink);min-width:0}
.fv-pal-r{max-height:380px;overflow:auto;padding:6px}
.fv-pal-g{padding:10px 10px 4px;font-size:12px;font-weight:700;color:var(--fv-ink3);text-transform:uppercase;letter-spacing:.06em}
.fv-pal-o{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-size:14.5px;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-pal-o span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-pal-o:hover,.fv-pal-o.is-on{background:var(--fv-soft2)}
.fv-pal-o small{margin-inline-start:auto;color:var(--fv-ink3);font-size:13px;white-space:nowrap;padding-inline-start:10px}
.fv-pal-f{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--fv-line);font-size:13px;color:var(--fv-ink3)}

/* Updates panel (gift button) */
.fv-rail{position:fixed;top:0;inset-inline-end:0;bottom:0;width:min(380px,100vw);background:var(--fv-card);border-inline-start:1px solid var(--fv-line);z-index:76;display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;box-shadow:var(--fv-sh-big);color:var(--fv-ink)}
[dir="rtl"] .fv-rail{transform:translateX(-105%)}
.fv-rail.is-open{transform:none;visibility:visible;transition:transform .25s ease}
.fv-rail-h{height:64px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px 0 18px;border-bottom:1px solid var(--fv-line)}
.fv-rail-h b{font:700 16px/1.3 var(--fv-font-display)}
.fv-rail-x{margin-inline-start:auto;width:34px;height:34px}
.fv-rail-b{flex:1;overflow:auto;padding:4px 16px 16px;scrollbar-width:thin}
.fv-rail-sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fv-ink3);margin:16px 2px 8px}
.fv-rnote{display:flex;gap:11px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--fv-warn-soft);border:1px solid var(--fv-warn-line);color:var(--fv-ink)!important;text-decoration:none!important}
.fv-rnote b{display:block;font-size:14px} .fv-rnote span span{display:block;font-size:13px;color:var(--fv-ink2)}
.fv-roffer{border:1px solid var(--fv-line);border-radius:14px;padding:14px;margin-bottom:10px;display:grid;gap:4px;background:var(--fv-card)}
.fv-roffer b{font:700 16px/1.3 var(--fv-font-display)} .fv-roffer>span{font-size:13.5px;color:var(--fv-ink2)}
.fv-roffer .fv-tag{color:var(--fv-ink3);font-size:12px}
.fv-ro-a{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.fv-roffer .fv-coupon{height:32px;font-size:13px;border:1.5px dashed var(--fv-brand-line);background:var(--fv-brand-soft);color:var(--fv-brand-ink)}
.fv-rail-sec+.fv-roffer{background:linear-gradient(135deg,#FFB865 0%,#F6921E 55%,#FF6A2B 100%);border-color:transparent;color:#1A0F00}
.fv-rail-sec+.fv-roffer .fv-tag,.fv-rail-sec+.fv-roffer>span{color:rgba(26,15,0,.75)}
.fv-rail-sec+.fv-roffer .fv-coupon{border-color:rgba(26,15,0,.45);background:rgba(255,255,255,.3);color:#1A0F00}
.fv-rmini{display:flex;gap:11px;align-items:center;padding:10px;border-radius:12px;margin-top:10px;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-rmini:hover,.fv-rnews:hover{background:var(--fv-soft2)}
.fv-rmini b{display:block;font-size:14px} .fv-rmini .fv-grow span{display:block;font-size:13px;color:var(--fv-ink3)}
.fv-rnews{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-rnews>i{width:7px;height:7px;border-radius:50%;flex:none;margin-top:7px}
.fv-rnews.is-unread>i{background:var(--fv-brand);box-shadow:0 0 0 3px var(--fv-brand-soft)}
.fv-rnews b{display:block;font-size:14px;font-weight:600;line-height:1.4} .fv-rnews span span{display:block;font-size:13px;color:var(--fv-ink3)}
.fv-rail-f{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--fv-line)}
.fv-rail-sec+.fv-roffer .btn{background:#1A0F00;color:#fff;border-color:#1A0F00}

/* small message at the bottom ("Copied") */
.fv-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#0b1324;color:#fff;padding:11px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:calc(100vw - 32px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.fv-toast.is-on{opacity:1;transform:translate(-50%,0)}

@keyframes fv-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ───── responsive ───── */
@media (max-width:1280px){ .fv-lang .fv-t,.fv-me .fv-t{display:none} }
@media (max-width:1100px){ .fv-body.has-aside,.fv-body.has-aside.is-account{grid-template-columns:1fr} }
@media (max-width:900px){
  .fv-side{position:fixed;inset-inline-start:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .25s ease;box-shadow:var(--fv-sh-big);z-index:75;visibility:hidden}
  [dir="rtl"] .fv-side{transform:translateX(102%)}
  body.fv-nav-open .fv-side{transform:none;visibility:visible}
  .fv-side .fv-side-x{display:grid}
  .fv-burger{display:grid!important}
  .fv-top-brand{display:flex}
  .fv-top{padding:0 10px;gap:2px}
  .fv-cmdk{flex:0 0 40px;width:40px;padding:0;justify-content:center;border:0;background:none}
  .fv-cmdk>span{display:none}
  .fv-hide-sm{display:none!important}
  .fv-content,.fv-content.container{padding:20px 16px 48px}
  .fv-notice,.fv .verification-banner{padding:10px 16px}
  .fv-foot{padding:16px}
  .fv-foot-lang{display:inline-flex}
  .fv-me{padding:2px}
}
@media (max-width:560px){
  .fv-menu{position:fixed;left:10px!important;right:10px!important;top:70px;min-width:0;width:auto!important}
  .fv-notice{align-items:flex-start}
  .fv-notice .fv-r{flex-direction:column-reverse;align-items:flex-end}
  .fv .fv-ph h1{font-size:21px}
}
@media (prefers-reduced-motion:reduce){ .fv-side,.fv-car,.fv-menu.is-on{transition:none;animation:none} }
/* ═════════ BASE: WHMCS's standard parts in the FireVPS look ═════════
   Twenty-One, WHMCS pages and module pages (Virtualizor, payment gateways, AI Manager) are built
   from Bootstrap 4 parts. We restyle those parts here — buttons, cards, tables, forms, pills,
   tabs, alerts, dialogs — so every page looks like FireVPS without rewriting its HTML. */

.fv h1,.fv h2,.fv h3,.fv h4,.fv h5,.fv h6{color:var(--fv-ink);letter-spacing:-.01em}
.fv h1,.fv h2,.fv h3,.fv .h1,.fv .h2,.fv .h3{font-family:var(--fv-font-display)}
.fv h1,.fv .h1{font-size:24px} .fv h2,.fv .h2{font-size:20px} .fv h3,.fv .h3{font-size:17px}
.fv h4,.fv .h4{font-size:16.5px;font-weight:700} .fv h5,.fv .h5{font-size:15.5px;font-weight:700} .fv h6,.fv .h6{font-size:14.5px;font-weight:700}
.fv a{color:var(--fv-brand-ink)}
.fv a:hover{color:var(--fv-brand-ink)}
.fv hr{border-top-color:var(--fv-line)}
.fv .text-muted{color:var(--fv-ink2)!important}
.fv .text-primary{color:var(--fv-brand-ink)!important}
.fv .text-dark,.fv .text-body{color:var(--fv-ink)!important}
.fv .text-success{color:var(--fv-ok)!important} .fv .text-danger{color:var(--fv-bad)!important}
.fv .text-warning{color:var(--fv-warn)!important} .fv .text-info{color:var(--fv-info)!important}
.fv .bg-white,.fv .bg-light{background-color:var(--fv-card)!important}
.fv .bg-primary{background-color:var(--fv-btn)!important}
.fv .border,.fv .border-top,.fv .border-bottom,.fv .border-left,.fv .border-right{border-color:var(--fv-line)!important}
.fv code{color:var(--fv-brand-ink);background:var(--fv-soft2);border-radius:6px;padding:1px 5px}
.fv pre{color:var(--fv-ink);background:var(--fv-soft);border:1px solid var(--fv-line);border-radius:var(--fv-rs);padding:12px}
.fv ::selection{background:var(--fv-brand-soft)}
.fv .grad{background-image:var(--fv-title-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ───── buttons: flat orange #F27F19 with white text for the main action ───── */
.fv .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border-radius:var(--fv-rs);border:1px solid var(--fv-line);background:var(--fv-card);color:var(--fv-ink);font-weight:700;font-size:14.5px;line-height:1.2;transition:background .15s,border-color .15s,box-shadow .15s;box-shadow:none}
.fv .btn:hover{background:var(--fv-soft);border-color:var(--fv-line-strong);color:var(--fv-ink);text-decoration:none}
.fv .btn:focus,.fv .btn.focus{box-shadow:0 0 0 3px var(--fv-brand-soft);outline:0}
.fv .btn.disabled,.fv .btn:disabled{opacity:.45}
.fv .btn-block{display:flex;width:100%}
.fv .btn-sm,.fv .btn-group-sm>.btn{min-height:32px;padding:0 11px;font-size:13.5px;border-radius:9px}
.fv .btn-xs{min-height:28px;padding:0 9px;font-size:13px;border-radius:8px}
.fv .btn-lg,.fv .btn-group-lg>.btn{min-height:46px;padding:0 20px;font-size:15.5px;border-radius:12px}
.fv .btn-primary,.fv .btn-primary:not(:disabled):not(.disabled):active,.fv .btn-primary:not(:disabled):not(.disabled).active,
.fv .btn-success.btn-checkout,.fv .btn-order-now{background:var(--fv-btn);border-color:transparent;color:var(--fv-on-brand)}
.fv .btn-primary:hover,.fv .btn-primary:focus{background:var(--fv-btn-hover);border-color:transparent;color:var(--fv-on-brand)}
.fv .btn-default,.fv .btn-secondary,.fv .btn-light,.fv .btn-outline-secondary,.fv .btn-outline-primary,.fv .btn-outline-default{background:var(--fv-card);border-color:var(--fv-line);color:var(--fv-ink)}
.fv .btn-default:hover,.fv .btn-secondary:hover,.fv .btn-light:hover,.fv .btn-outline-secondary:hover,.fv .btn-outline-primary:hover{background:var(--fv-soft);border-color:var(--fv-line-strong);color:var(--fv-ink)}
.fv .btn-success{background:var(--fv-ok-soft);border-color:var(--fv-ok-line);color:var(--fv-ok)}
.fv .btn-success:hover{background:var(--fv-ok-soft);border-color:var(--fv-ok);color:var(--fv-ok)}
.fv .btn-danger,.fv .btn-outline-danger{background:var(--fv-card);border-color:var(--fv-line);color:var(--fv-bad)}
.fv .btn-danger:hover,.fv .btn-outline-danger:hover{background:var(--fv-bad-soft);border-color:var(--fv-bad-line);color:var(--fv-bad)}
.fv .btn-warning{background:var(--fv-warn-soft);border-color:var(--fv-warn-line);color:var(--fv-warn-ink)}
.fv .btn-info{background:var(--fv-info-soft);border-color:var(--fv-info-line);color:var(--fv-info)}
.fv .btn-dark{background:var(--fv-ink);border-color:var(--fv-ink);color:var(--fv-bg)}
.fv .btn-link{background:none;border-color:transparent;color:var(--fv-brand-ink);font-weight:600}
.fv .btn-link:hover{background:none;border-color:transparent;text-decoration:underline;color:var(--fv-brand-ink)}
.fv .btn-group>.btn{border-radius:0}
.fv .btn-group>.btn:first-child{border-start-start-radius:var(--fv-rs);border-end-start-radius:var(--fv-rs)}
.fv .btn-group>.btn:last-child{border-start-end-radius:var(--fv-rs);border-end-end-radius:var(--fv-rs)}
.fv .btn .fa,.fv .btn .fas,.fv .btn .far,.fv .btn .fal,.fv .btn .fad{line-height:1}

/* ───── cards (and WHMCS side panels) ───── */
.fv .card{background:var(--fv-card);border:1px solid var(--fv-line);border-radius:var(--fv-r);box-shadow:var(--fv-sh);color:var(--fv-ink)}
[data-theme="dark"] .fv .card{background-image:linear-gradient(180deg,rgb(255 255 255 / .03),rgb(255 255 255 / 0) 140px)}
.fv .card-header{background:none;border-bottom:1px solid var(--fv-line);padding:14px 20px}
.fv .card-header:first-child{border-radius:var(--fv-r) var(--fv-r) 0 0}
.fv .card-footer{background:var(--fv-soft);border-top:1px solid var(--fv-line);padding:12px 20px}
.fv .card-footer:last-child{border-radius:0 0 var(--fv-r) var(--fv-r)}
.fv .card-body{padding:20px}
.fv .card-title{font:700 16px/1.35 var(--fv-font-display);color:var(--fv-ink)}
.fv .card-sidebar{margin:0!important}
.fv .card-sidebar .card-header{padding:13px 18px}
.fv .card-sidebar .card-title{font-size:15px;display:flex;align-items:center;gap:6px}
.fv .card-sidebar .card-title>i:not(.card-minimise){color:var(--fv-ink3)}
.fv .card-minimise{margin-inline-start:auto;color:var(--fv-ink3);cursor:pointer;float:none!important}
.fv .card-sidebar .badge{float:none!important}
.fv .list-group-item{background:none;border-color:var(--fv-line2);color:var(--fv-ink);padding:10px 18px}
.fv .list-group-item small{font-size:12.5px}
.fv .list-group-flush>.list-group-item:last-child{border-radius:0 0 var(--fv-r) var(--fv-r)}
.fv .list-group-item-action{color:var(--fv-ink)}
.fv .list-group-item-action:hover,.fv .list-group-item-action:focus{background:var(--fv-soft);color:var(--fv-ink)}
.fv .list-group-item.active,.fv .list-group-item.active:hover{background:var(--fv-brand-soft);border-color:var(--fv-line2);color:var(--fv-brand-ink);font-weight:600;z-index:1}
.fv .list-group-item.disabled{color:var(--fv-ink3);background:none}
.fv .sidebar-menu-item-wrapper{display:flex;align-items:center;gap:10px}
.fv .sidebar-menu-item-icon{color:var(--fv-ink3);width:16px;text-align:center}
.fv .sidebar-menu-item-badge{margin-inline-start:auto}
.fv .sidebar-menu-item-label{min-width:0;overflow-wrap:anywhere}

/* ───── pills: WHMCS status labels and Bootstrap badges ───── */
.fv .label,.fv .badge{display:inline-flex;align-items:center;gap:6px;min-height:22px;border-radius:99px;padding:0 9px;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.2;vertical-align:middle;background:var(--fv-soft2);color:var(--fv-ink2)}
.fv .label.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.fv .status-active,.fv .status-open,.fv .status-completed,.fv .status-paid,.fv .status-accepted,.fv .status-delivered,.fv .label-success,.fv .badge-success{background:var(--fv-ok-soft);color:var(--fv-ok)}
.fv .status-pending,.fv .status-pending-transfer,.fv .status-pending-registration,.fv .status-unpaid,.fv .status-payment-pending,.fv .status-onhold,.fv .status-grace,.fv .label-warning,.fv .badge-warning{background:var(--fv-warn-soft);color:var(--fv-warn)}
.fv .status-suspended,.fv .status-terminated,.fv .status-fraud,.fv .status-overdue,.fv .status-redemption,.fv .status-collections,.fv .status-lost,.fv .status-dead,.fv .label-danger,.fv .badge-danger{background:var(--fv-bad-soft);color:var(--fv-bad)}
.fv .status-answered,.fv .status-inprogress,.fv .status-refunded,.fv .label-info,.fv .badge-info{background:var(--fv-info-soft);color:var(--fv-info)}
.fv .status-customer-reply,.fv .badge-primary{background:var(--fv-brand-soft);color:var(--fv-brand-ink)}
.fv .label[style*="background"]{color:#fff}
.fv .status-cancelled,.fv .status-closed,.fv .status-expired,.fv .status-transferred-away,.fv .label-default,.fv .badge-secondary,.fv .badge-light,.fv .badge-dark{background:var(--fv-soft2);color:var(--fv-ink2)}

/* ───── tables: light rows, uppercase heads ───── */
.fv .table{color:var(--fv-ink);border-collapse:separate;border-spacing:0;margin-bottom:0}
.fv .table th{font-size:12.5px;color:var(--fv-ink3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:11px 16px;border-top:0;border-bottom:1px solid var(--fv-line);white-space:nowrap;background:var(--fv-soft);vertical-align:middle}
.fv .table td{padding:13px 16px;border-top:1px solid var(--fv-line2);vertical-align:middle;font-size:14.5px}
.fv .table thead th{border-bottom:1px solid var(--fv-line)}
.fv .table tbody tr:first-child td{border-top:0}
.fv .table-hover tbody tr:hover,.fv .table-list tbody tr:hover{background:var(--fv-soft);color:var(--fv-ink)}
.fv .table-striped tbody tr:nth-of-type(odd){background:var(--fv-soft)}
.fv .table-bordered,.fv .table-bordered td,.fv .table-bordered th{border-color:var(--fv-line2)}
.fv .thead-light th,.fv .table-light,.fv .table-light>td,.fv .table-light>th{background:var(--fv-soft);color:var(--fv-ink3)}
.fv .table-active,.fv .table-active>td{background:var(--fv-soft2)}
.fv .table-container{background:var(--fv-card);border:1px solid var(--fv-line);border-radius:var(--fv-r);box-shadow:var(--fv-sh);overflow-x:auto;margin-bottom:20px}
.fv .table-container .table th:first-child,.fv .table-container .table td:first-child{padding-inline-start:20px}
.fv .table-list>tbody>tr{cursor:pointer}
.fv .table-responsive{border-radius:var(--fv-r)}
.fv .card .table th:first-child{border-start-start-radius:0}
/* DataTables controls WHMCS adds to lists */
.fv .dataTables_wrapper .listtable{border:0}
.fv .dataTables_wrapper .dataTables_filter,.fv .dataTables_wrapper .dataTables_length,.fv .dataTables_wrapper .dataTables_info{color:var(--fv-ink3);font-size:13.5px;padding:12px 16px}
.fv .dataTables_wrapper .dataTables_filter input,.fv .dataTables_wrapper .dataTables_length select{height:34px;border:1px solid var(--fv-line);border-radius:10px;background:var(--fv-card);color:var(--fv-ink);padding:0 10px;margin-inline-start:6px}
.fv .dataTables_wrapper .dataTables_paginate{padding:10px 16px}
.fv .dataTables_wrapper .dataTables_empty{color:var(--fv-ink3);padding:28px 16px;text-align:center}
.fv .view-filter-btns,.fv .view-filter-btns .dropdown-menu{font-size:14px}

/* ───── pagination ───── */
.fv .pagination{gap:4px}
.fv .page-link{min-width:30px;height:30px;display:grid;place-items:center;padding:0 8px;border-radius:8px!important;border:1px solid var(--fv-line);background:var(--fv-card);font-size:13.5px;font-weight:600;color:var(--fv-ink2);margin:0}
.fv .page-link:hover{background:var(--fv-soft2);color:var(--fv-ink);border-color:var(--fv-line)}
.fv .page-item.active .page-link{background:var(--fv-ink);color:var(--fv-card);border-color:var(--fv-ink)}
.fv .page-item.disabled .page-link{background:var(--fv-card);color:var(--fv-ink3);opacity:.6}

/* ───── forms ───── */
.fv label{color:var(--fv-ink2);font-weight:600;font-size:14px}
.fv .form-control,.fv .custom-select,.fv select.form-control{height:42px;border:1px solid var(--fv-line);border-radius:11px;padding:0 12px;background-color:var(--fv-card);color:var(--fv-ink);font-size:15px;box-shadow:none}
.fv textarea.form-control{height:auto;min-height:110px;padding:11px 12px}
.fv .form-control-sm,.fv .custom-select-sm{height:34px;font-size:14px;border-radius:9px}
.fv .form-control:focus,.fv .custom-select:focus{border-color:var(--fv-brand);box-shadow:0 0 0 3px var(--fv-brand-soft);background-color:var(--fv-card);color:var(--fv-ink)}
.fv .form-control::placeholder{color:var(--fv-ink3)}
.fv .form-control:disabled,.fv .form-control[readonly]{background-color:var(--fv-soft);color:var(--fv-ink2)}
.fv .is-invalid,.fv .has-error .form-control{border-color:var(--fv-bad)!important}
.fv .invalid-feedback,.fv .field-error-msg{color:var(--fv-bad)}
.fv .form-text,.fv .help-block{color:var(--fv-ink3)}
.fv .input-group-text{background:var(--fv-soft);border:1px solid var(--fv-line);color:var(--fv-ink2);border-radius:11px}
.fv .input-group>.form-control:not(:last-child),.fv .input-group>.custom-select:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}
.fv .input-group>.form-control:not(:first-child),.fv .input-group>.custom-select:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}
.fv .input-group-append .btn,.fv .input-group-prepend .btn{min-height:42px}
.fv input[type=checkbox],.fv input[type=radio]{accent-color:var(--fv-btn)}
.fv .custom-control-input:checked~.custom-control-label::before{background-color:var(--fv-btn);border-color:var(--fv-btn)}
.fv .custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 3px var(--fv-brand-soft)}
.fv .custom-control-label::before{background-color:var(--fv-card);border-color:var(--fv-line-strong)}
.fv .custom-file-label{background:var(--fv-card);border-color:var(--fv-line);color:var(--fv-ink2);border-radius:11px}
.fv .custom-file-label::after{background:var(--fv-soft);color:var(--fv-ink2);border-inline-start-color:var(--fv-line)}
[data-theme="dark"] .fv .custom-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23A3B0C4' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")}

/* ───── tabs and pills ───── */
.fv .nav-tabs{display:flex;flex-wrap:nowrap;gap:4px;border-bottom:1px solid var(--fv-line);overflow-x:auto;scrollbar-width:none}
.fv .nav-tabs::-webkit-scrollbar{display:none}
.fv .nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:13px 12px;color:var(--fv-ink2);font-weight:600;font-size:14.5px;margin-bottom:-1px;white-space:nowrap}
.fv .nav-tabs .nav-link:hover{color:var(--fv-ink);border-color:transparent}
.fv .nav-tabs .nav-link.active,.fv .nav-tabs .nav-item.show .nav-link{color:var(--fv-ink);background:none;border-bottom-color:var(--fv-brand)}
.fv .nav-pills .nav-link{border-radius:9px;color:var(--fv-ink2);font-weight:600}
.fv .nav-pills .nav-link.active,.fv .nav-pills .show>.nav-link{background:var(--fv-brand-soft);color:var(--fv-brand-ink)}
.fv .tab-content>.tab-pane{color:var(--fv-ink)}

/* ───── alerts ───── */
.fv .alert{border-radius:var(--fv-rs);border:1px solid var(--fv-line);background:var(--fv-soft);color:var(--fv-ink);font-size:14.5px;padding:12px 16px}
.fv .alert-success{background:var(--fv-ok-soft);border-color:var(--fv-ok-line);color:var(--fv-ink)}
.fv .alert-success .fas,.fv .alert-success .alert-link{color:var(--fv-ok)}
.fv .alert-warning{background:var(--fv-warn-soft);border-color:var(--fv-warn-line);color:var(--fv-ink)}
.fv .alert-warning .fas,.fv .alert-warning .alert-link{color:var(--fv-warn-ink)}
.fv .alert-danger{background:var(--fv-bad-soft);border-color:var(--fv-bad-line);color:var(--fv-ink)}
.fv .alert-danger .fas,.fv .alert-danger .alert-link{color:var(--fv-bad)}
.fv .alert-info,.fv .alert-primary{background:var(--fv-info-soft);border-color:var(--fv-info-line);color:var(--fv-ink)}
.fv .alert-info .fas,.fv .alert-info .alert-link{color:var(--fv-info)}
.fv .alert-link{font-weight:700}

/* ───── dialogs, dropdowns, popovers, tooltips ───── */
.fv .modal-backdrop.show{opacity:1;background:var(--fv-scrim)}
.fv .modal-content{background:var(--fv-card);border:1px solid var(--fv-line);border-radius:var(--fv-r);box-shadow:var(--fv-sh-big);color:var(--fv-ink)}
.fv .modal-header,.fv .modal-footer{border-color:var(--fv-line);padding:16px 20px}
.fv .modal-title{font:700 16px/1.3 var(--fv-font-display)}
.fv .close{color:var(--fv-ink2);text-shadow:none;opacity:.8}
.fv .close:hover{color:var(--fv-ink)}
.fv .dropdown-menu{background:var(--fv-card);border:1px solid var(--fv-line);border-radius:14px;box-shadow:var(--fv-sh-big);padding:6px;color:var(--fv-ink)}
.fv .dropdown-item{border-radius:9px;padding:8px 10px;font-size:14px;color:var(--fv-ink)}
.fv .dropdown-item:hover,.fv .dropdown-item:focus{background:var(--fv-soft2);color:var(--fv-ink)}
.fv .dropdown-item.active,.fv .dropdown-item:active{background:var(--fv-brand-soft);color:var(--fv-brand-ink)}
.fv .dropdown-divider{border-top-color:var(--fv-line)}
.fv .popover{background:var(--fv-card);border:1px solid var(--fv-line);border-radius:12px;box-shadow:var(--fv-sh-big)}
.fv .popover-body{color:var(--fv-ink)}
.fv .popover-header{background:var(--fv-soft);border-bottom-color:var(--fv-line);color:var(--fv-ink)}
.fv .tooltip-inner{background:#0b1324;border-radius:8px;font-size:13px;padding:6px 9px}
.fv .progress{background:var(--fv-line2);border-radius:99px;height:8px}
.fv .progress-bar{background:var(--fv-btn)}
.fv .jumbotron,.fv .well{background:var(--fv-soft);border-radius:var(--fv-r);color:var(--fv-ink)}

/* ───── Twenty-One page parts ───── */
.fv .header-lined{margin-bottom:16px}
.fv .header-lined h1{font-size:22px}
.fv .tiles .tile{background:var(--fv-card);border-color:var(--fv-line);color:var(--fv-ink)}
.fv .tiles .tile:hover{background:var(--fv-soft)}
.fv .tiles .tile .stat{color:var(--fv-ink);font-family:var(--fv-font-display)}
.fv .tiles .tile .title{color:var(--fv-ink2)}
.fv .tiles .tile .highlight{background:var(--fv-btn)!important}
.fv .tiles .tile i{color:var(--fv-ink3)}
.fv .primary-content>.card:last-child{margin-bottom:0}
.fv #main-body .container{max-width:none;padding:0}
.fv .w-hidden{display:none}

/* WHMCS's language chooser (used from the footer on phones) */
.fv .modal-localisation .modal-content{background:var(--fv-card)}
.fv .modal-localisation .item-selector .item{display:block;padding:8px 10px;border-radius:9px;color:var(--fv-ink);text-decoration:none}
.fv .modal-localisation .item-selector .item:hover{background:var(--fv-soft2)}
.fv .modal-localisation .item-selector .item.active{background:var(--fv-brand-soft);color:var(--fv-brand-ink);font-weight:600}
.fv .modal-localisation .close{color:var(--fv-ink2)!important}

/* ───── right-to-left: Bootstrap's left/right helpers point the other way ───── */
[dir="rtl"] .fv .text-left{text-align:right!important}
[dir="rtl"] .fv .text-right{text-align:left!important}
[dir="rtl"] .fv .float-left{float:right!important}
[dir="rtl"] .fv .float-right{float:left!important}
[dir="rtl"] .fv .ml-auto{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] .fv .mr-auto{margin-right:0!important;margin-left:auto!important}
[dir="rtl"] .fv .dropdown-menu-right{right:auto;left:0}
[dir="rtl"] .fv .modal-header .close{margin:-1rem auto -1rem -1rem}
[dir="rtl"] .fv .table th,[dir="rtl"] .fv .table td{text-align:right}
[dir="rtl"] .fv .table .text-center{text-align:center!important}

/* ───── WHMCS's own parts that the base theme paints white (they stay readable in dark mode) ───── */
/* tables (Emails, Quotes, Affiliates…) */
.fv .table-list>tbody>tr>td{background-color:var(--fv-card);color:var(--fv-ink);border-color:var(--fv-line2)}
.fv .table-list>tbody>tr:hover>td{background-color:var(--fv-soft)}
.fv table.table-list{border-color:var(--fv-line)}
.fv table.table-list thead th,.fv .dataTables_wrapper table.table-list thead th.sorting_asc,.fv .dataTables_wrapper table.table-list thead th.sorting_desc{background-color:var(--fv-soft);color:var(--fv-ink3);border-color:var(--fv-line)}
.fv .dataTables_wrapper .dataTables_filter label .form-control{background-color:var(--fv-card);color:var(--fv-ink)}
/* the message editor (new ticket, reply, contact) */
.fv .md-editor{border-color:var(--fv-line);background:var(--fv-card)}
.fv .md-editor>.btn-toolbar,.fv .md-editor>.md-header,.fv .md-editor .md-footer{background-color:var(--fv-soft)!important}
.fv .md-editor>textarea,.fv .md-editor>textarea:focus,.fv .md-editor>.md-preview{background:var(--fv-card)!important;color:var(--fv-ink)}
.fv .md-editor>.md-preview,.fv .md-editor>textarea.markdown-editor{border-color:var(--fv-line)!important}
.fv .markdown-editor-status{color:var(--fv-ink3);font-size:12.5px}
.fv .markdown-content :is(h1,h2,h3,h4),.fv .md-preview :is(h1,h2,h3,h4){color:var(--fv-ink)}
.fv .markdown-content table,.fv .md-preview table{background:var(--fv-card);border-color:var(--fv-line)}
.fv .markdown-content table>thead>tr>th,.fv .md-preview table>thead>tr>th{background:var(--fv-soft);border-color:var(--fv-line)}
/* announcements and knowledge base */
.fv .announcements .announcement article{background:var(--fv-soft);border-left-color:var(--fv-line-strong);color:var(--fv-ink2)}
.fv .kb-category a:hover,.fv .kb-article-item:hover{background-color:var(--fv-soft)}
@media (max-width:560px){
  /* attachments: the "Add more" button goes under the file box */
  .fv .attachment-group{flex-wrap:wrap;gap:8px}
  .fv .attachment-group .custom-file,.fv .attachment-group .input-group-append{flex:1 1 100%;margin:0}
  .fv .attachment-group .custom-file-label,.fv .attachment-group .input-group-append .btn{border-radius:var(--fv-rs)!important;width:100%}
  /* WHMCS tables fit the phone better */
  .fv .table-list td,.fv .table-list th{padding:10px 8px;white-space:normal}
}
/* ═════════ PAGES: the building blocks of our own page files (Phase 2) ═════════
   Ported from the approved mockup. Every class starts with fv- so module pages that use
   generic names (.field, .tag, .col…) are never touched. */

/* ───── small helpers ───── */
.fv-muted{color:var(--fv-ink2)} .fv-faint{color:var(--fv-ink3)} .fv-small{font-size:13.5px} .fv-block{display:block}
.fv-mono{font-family:var(--fv-mono);font-size:13.5px}
.fv-bad-t{color:var(--fv-bad)!important} .fv-warn-t{color:var(--fv-warn)!important} .fv-ok-t{color:var(--fv-ok)!important}
.fv-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card.fv-row{flex-direction:row}
.fv-stack{display:grid;gap:20px;min-width:0;align-content:start}
.fv-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fv-ink3)}
.fv-link{text-decoration:none!important} .fv-link:hover{text-decoration:underline!important}
.fv-ico.fv-c-gy{background:var(--fv-soft2);color:var(--fv-ink2)}
.fv-ico .fv-i{width:16px;height:16px}

/* buttons the mockup has and Bootstrap does not */
.fv .btn-ghost{background:none;border-color:transparent;color:var(--fv-ink2)}
.fv .btn-ghost:hover{background:var(--fv-soft2);border-color:transparent}
.fv .btn-icon{width:38px;padding:0} .fv .btn-xs.btn-icon{width:28px} .fv .btn-sm.btn-icon{width:32px}
.fv .btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.fv .btn-glass:hover{background:rgba(255,255,255,.18);color:#fff}
.fv .btn .fv-i{width:15px;height:15px}

/* ───── page head (title + right buttons) ───── */
.fv-ph{align-items:flex-end}
.fv-ph p{color:var(--fv-ink2);margin:3px 0 0}
.fv-ph .fv-r{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.fv-welcome{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.fv-welcome h1{font:700 26px/1.2 var(--fv-font-display);margin:0;letter-spacing:-.02em}
.fv-welcome p{color:var(--fv-ink2);margin:2px 0 0}
.fv-welcome .fv-r{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ───── card parts ───── */
.fv-ch{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--fv-line);min-height:58px}
.fv-ch h3{font:700 16px/1.3 var(--fv-font-display);margin:0}
.fv-ch .fv-r{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.fv-pad{padding:20px}
.fv-kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;font-size:14.5px}
.fv-kv dt{color:var(--fv-ink2);font-weight:400}
.fv-kv dd{margin:0;font-weight:600;text-align:end;overflow-wrap:anywhere}

/* ───── pills ───── */
.fv-pill{display:inline-flex;align-items:center;gap:6px;height:22px;border-radius:99px;padding:0 9px;font-size:13px;font-weight:600;white-space:nowrap}
.fv-pill>i{width:6px;height:6px;border-radius:50%;background:currentColor}
.fv-pill .fv-i{width:13px;height:13px}
.fv-p-ok{background:var(--fv-ok-soft);color:var(--fv-ok)} .fv-p-warn{background:var(--fv-warn-soft);color:var(--fv-warn)}
.fv-p-bad{background:var(--fv-bad-soft);color:var(--fv-bad)} .fv-p-off{background:var(--fv-soft2);color:var(--fv-ink2)}
.fv-p-info{background:var(--fv-info-soft);color:var(--fv-info)} .fv-p-ai{background:var(--fv-ai-soft);color:var(--fv-ai)}
.fv-p-brand{background:var(--fv-brand-soft);color:var(--fv-brand-ink)}

/* ───── filters: segmented buttons and fields ───── */
.fv-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.fv-seg{display:inline-flex;gap:2px;background:var(--fv-soft2);border-radius:11px;padding:3px;flex-wrap:wrap}
.fv-seg button,.fv-seg a{border:0;background:none;height:30px;padding:0 12px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;color:var(--fv-ink2)!important;display:flex;gap:6px;align-items:center;white-space:nowrap;cursor:pointer;text-decoration:none!important}
.fv-seg .is-on{background:var(--fv-card);color:var(--fv-ink)!important;box-shadow:0 1px 3px rgba(11,19,36,.12)}
.fv-seg .fv-n{font-size:12px;color:var(--fv-ink3);font-weight:600}
.fv-seg .fv-sd{width:7px;height:7px;border-radius:50%;flex:none}
.fv-field{display:flex;align-items:center;gap:8px;height:38px;border:1px solid var(--fv-line);background:var(--fv-card);border-radius:var(--fv-rs);padding:0 6px 0 11px;color:var(--fv-ink3);margin:0;font-weight:400}
.fv-field:focus-within{border-color:var(--fv-brand);box-shadow:0 0 0 3px var(--fv-brand-soft)}
.fv-field input,.fv-field select{border:0;background:none;outline:0;font:inherit;font-size:14.5px;color:var(--fv-ink);flex:1;min-width:0;height:100%;box-shadow:none;padding:0}
.fv-field select option{background:var(--fv-card);color:var(--fv-ink)}
.fv-search{max-width:340px;min-width:200px;flex:1}

/* ───── data tables: a table on desktop, cards on a phone ───── */
.fv-dt{width:100%;border-collapse:separate;border-spacing:0}
.fv-dt th:first-child,.fv-dt td:first-child{padding-inline-start:16px}
.fv-dt th:last-child,.fv-dt td:last-child{padding-inline-end:16px}
/* a table never runs under the cards beside it: if it is still too wide, it scrolls in its card */
.card:has(>.fv-dt):not(.fv-inv){overflow-x:auto}
.fv-dt th{text-align:start;font-size:12.5px;color:var(--fv-ink3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:11px 12px;border-bottom:1px solid var(--fv-line);white-space:nowrap;background:var(--fv-soft)}
.card>.fv-dt:first-child th:first-child{border-start-start-radius:var(--fv-r)}
.card>.fv-dt:first-child th:last-child{border-start-end-radius:var(--fv-r)}
.fv-dt th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.fv-dt th button:hover{color:var(--fv-ink)}
.fv-dt td{padding:13px 12px;border-top:1px solid var(--fv-line2);vertical-align:middle;font-size:14.5px}
.fv-dt tbody tr:first-child td{border-top:0}
.fv-dt tbody tr{transition:background .12s}
.fv-dt tbody tr:hover td{background:var(--fv-soft)}
.fv-dt tr.fv-click{cursor:pointer}
.fv-dt .fv-end{text-align:end;white-space:nowrap}
.fv-dt .fv-nw{white-space:nowrap}
.fv-dt th.fv-cb,.fv-dt td.fv-cb{width:44px;padding-inline-end:0}
.fv-dt .fv-empty-row td{text-align:center;padding:34px 16px;color:var(--fv-ink3)}
.fv-chk{width:16px;height:16px;accent-color:var(--fv-btn);margin:0;flex:none;cursor:pointer}
.fv-who{display:flex;align-items:center;gap:12px;min-width:0}
.fv-who b{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;flex-wrap:wrap;color:var(--fv-ink)}
.fv-who .fv-sub2{display:block;color:var(--fv-ink3);font-size:13.5px;overflow-wrap:anywhere}
.fv-who b .fv-pill{height:19px;font-size:12px;padding:0 7px}
.fv-who a{color:inherit;text-decoration:none;white-space:nowrap}
.fv-due-n{display:block;font-size:12.5px;font-weight:600}
.fv-tfoot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--fv-line);font-size:13.5px;color:var(--fv-ink3);flex-wrap:wrap}
.fv-pager{margin-inline-start:auto;display:flex;gap:4px}
.fv-pager button{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--fv-line);background:var(--fv-card);font:inherit;font-size:13.5px;font-weight:600;color:var(--fv-ink2);display:grid;place-items:center;cursor:pointer;padding:0 6px}
.fv-pager button.is-on{background:var(--fv-ink);color:var(--fv-card);border-color:var(--fv-ink)}
.fv-pager button:disabled{opacity:.45;cursor:default}
.fv-lab{display:none}
.fv-svc-power{display:flex;gap:4px;justify-content:flex-end}

/* ───── OS / service icons ───── */
.fv-os-lin{background:#FFF1E8;color:#E95420} .fv-os-alma{background:#eef2f7;color:#1f2937} .fv-os-win{background:#e7f0ff;color:#0078d4}
.fv-os-mail{background:var(--fv-ai-soft);color:var(--fv-ai)} .fv-os-cloud{background:var(--fv-ok-soft);color:var(--fv-ok)} .fv-os-gen{background:var(--fv-brand-soft);color:var(--fv-brand)}
[data-theme="dark"] .fv-os-lin{background:rgba(233,84,32,.15);color:#ff8a5c}
[data-theme="dark"] .fv-os-alma{background:#1b2540;color:#cbd5e1}
[data-theme="dark"] .fv-os-win{background:rgba(59,130,246,.15);color:#7cb7ff}

/* ───── list + right column (services, domains, tickets) ───── */
.fv-lgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.fv-sidecol{display:grid;gap:16px;position:sticky;top:84px;min-width:0}
.fv-side-card{padding:18px;display:grid;gap:10px}
.fv-side-card p{font-size:14px;color:var(--fv-ink2);margin:0}
.fv-side-card p b{color:var(--fv-ink)}
.fv-side-card.is-warn{border-color:var(--fv-warn-line);background:linear-gradient(180deg,var(--fv-warn-soft),var(--fv-card) 75%)}
.fv-sc-h{display:flex;gap:10px;align-items:center}
.fv-sc-h b{font:700 16px/1.3 var(--fv-font-display)}
.fv-up-cmp{display:flex;align-items:center;gap:8px;font-size:13.5px}
.fv-up-cmp>div{flex:1;border:1px solid var(--fv-line);border-radius:10px;padding:8px 10px;min-width:0}
.fv-up-cmp span{display:block;font-size:12px;color:var(--fv-ink3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.fv-up-cmp b{display:block;font-size:14.5px}
.fv-up-cmp small{color:var(--fv-ink2)}
.fv-up-cmp .is-to{border-color:var(--fv-brand-line);background:var(--fv-brand-soft)}
.fv-side-list{display:grid;gap:5px}
.fv-side-list div,.fv-side-list a{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-side-list a .fv-link{font-size:13px}
.fv-side-list a:hover .fv-grow{text-decoration:underline}
.fv-side-list .fv-i{color:var(--fv-warn)}
.fv-xp{display:flex;gap:11px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--fv-line);background:none;width:100%;text-align:start;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-xp:hover{border-color:var(--fv-brand-line);background:var(--fv-soft)}
.fv-xp b{display:block;font-size:14px}
.fv-xp .fv-grow span{display:block;font-size:13px;color:var(--fv-ink3)}
.fv-mini{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--fv-line2);color:var(--fv-ink)!important;text-decoration:none!important}
.fv-mini:first-child{border-top:0}
a.fv-mini:hover{background:var(--fv-soft)}
.fv-mini b{display:block;font-size:14.5px;font-weight:600}
.fv-mini .fv-grow>span{display:block;font-size:13px;color:var(--fv-ink3)}

/* ───── dashboard ───── */
.fv-statboard{display:grid;grid-template-columns:1fr;margin-bottom:20px}
.fv-sb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fv-line2);border:1px solid var(--fv-line);border-radius:var(--fv-r);box-shadow:var(--fv-sh);overflow:hidden}
.fv-st{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px 22px;background:var(--fv-card);transition:background .15s;color:var(--fv-ink)!important;text-decoration:none!important;min-width:0}
.fv-st:hover{background:var(--fv-soft)}
.fv-st .fv-lb{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--fv-ink2)}
.fv-st .fv-lb .fv-i{width:14px;height:14px;color:var(--fv-ink3)}
.fv-st .fv-v{font:700 32px/1 var(--fv-font-display);letter-spacing:-.035em}
.fv-st .fv-v small{font-size:16px;color:var(--fv-ink3);font-weight:600;letter-spacing:-.01em}
.fv-st .fv-cap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--fv-ink3);flex-wrap:wrap}
.fv-st .fv-go{position:absolute;top:16px;inset-inline-end:16px;width:15px;height:15px;color:var(--fv-ink3);opacity:0;transform:translateX(-4px) rotate(-45deg);transition:.2s}
.fv-st:hover .fv-go{opacity:1;transform:rotate(-45deg)}
.fv-dot{width:6px;height:6px;border-radius:50%;flex:none;background:#22c55e}
.fv-dot.is-live{box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:fv-pulse 2s infinite}
@keyframes fv-pulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.fv-tg{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;text-decoration:none!important}
.fv-tg.is-warn{color:var(--fv-warn);background:var(--fv-warn-soft)} .fv-tg.is-bad{color:var(--fv-bad);background:var(--fv-bad-soft)}
a.fv-tg:hover{filter:brightness(.95);text-decoration:underline!important}
.fv-dgrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,26%,420px);gap:20px;align-items:start}

/* "Terminating soon": a dark card in every theme, so it catches the eye */
.fv-soon{display:flex;flex-direction:column;overflow:hidden;
  --fv-ink:#FFFFFF;--fv-ink2:#C9D3E1;--fv-ink3:#8B98AE;--fv-line:rgb(255 255 255 / .10);--fv-line2:rgb(255 255 255 / .08);--fv-soft2:rgb(255 255 255 / .06);
  --fv-warn:#FCD34D;--fv-warn-soft:rgb(252 211 77 / .14);--fv-warn-line:rgb(252 211 77 / .32);--fv-ok:#6EE7A0;--fv-ok-soft:rgb(34 197 94 / .16);--fv-ok-line:rgb(34 197 94 / .40);--fv-bad:#FCA5A5;--fv-bad-soft:rgb(239 68 68 / .18);--fv-bad-line:rgb(239 68 68 / .42);
  background:var(--fv-hero)!important;color:#FFFFFF;border-color:rgb(255 255 255 / .08)!important}
.fv-soon .fv-su-h{display:flex;align-items:center;gap:8px;padding:16px 20px 8px}
.fv-soon .fv-su-h b{font:700 16px/1.3 var(--fv-font-display)}
.fv-soon .fv-su-h .fv-i{color:#FFB865}
.fv-soon .fv-su-h .fv-pill{margin-inline-start:auto;background:rgb(239 68 68 / .2);color:#FCA5A5}
.fv-su-note{margin:0;padding:0 20px 6px;font-size:13.5px;color:var(--fv-ink2);line-height:1.45}
.fv-su-t{display:flex;gap:12px;align-items:center;padding:10px 20px;color:var(--fv-ink)!important;text-decoration:none!important}
.fv-su-t:hover{background:var(--fv-soft2)}
.fv-su-t .fv-ti{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--fv-bad-soft);border:1px solid var(--fv-bad-line);color:var(--fv-bad)}
.fv-su-t b{display:block;font-size:15px}
.fv-su-t .fv-grow span{display:block;font-size:13.5px;color:var(--fv-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-when{font-size:12.5px;font-weight:700;white-space:nowrap;border-radius:99px;padding:3px 9px;color:var(--fv-bad);background:var(--fv-bad-soft)}
.fv-when.is-warn{color:var(--fv-warn);background:var(--fv-warn-soft)}
.fv-su-f{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid var(--fv-line2)}
.fv-su-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 20px 14px;font-size:13px;line-height:1.45;color:#FCA5A5}
.fv-su-warn .fv-i{width:15px;height:15px;margin-top:1px}
.fv-su-ok{padding:4px 20px 16px;font-size:14px;color:var(--fv-ink2)}
.fv-soon .fv-su-h .fv-pill.fv-p-warn{background:var(--fv-warn-soft);color:var(--fv-warn)}
/* nothing will be terminated: a green tick */
.fv-su-clear{display:flex;gap:12px;align-items:center;padding:6px 20px 18px}
.fv-su-tick{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--fv-ok-soft);border:1px solid var(--fv-ok-line);color:var(--fv-ok)}
.fv-su-clear b{display:block;font-size:15px}
.fv-su-clear .fv-grow span{display:block;font-size:13.5px;color:var(--fv-ink2);line-height:1.45}
.fv-soon .fv-su-sub{border-top:1px solid var(--fv-line2);padding-top:14px}
.fv-soon .fv-su-sub b{font-size:14px}

/* offers row: 2/3 rotating offers, 1/3 one fixed featured block */
.fv-promo-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
.fv-promo-row.is-single{grid-template-columns:1fr}
.fv-promo{position:relative;overflow:hidden;border-radius:var(--fv-r);background:linear-gradient(120deg,#FFB865 0%,#F6921E 50%,#FF6A2B 100%);color:#1A0F00;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;min-height:188px}
.fv-promo:after{content:"";position:absolute;inset-inline-end:-40px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.18)}
.fv-promo>*{position:relative;z-index:1}
.fv-promo .fv-tag{color:rgba(26,15,0,.7)}
.fv-promo h3{font:700 18px/1.3 var(--fv-font-display);margin:4px 0 2px;color:#1A0F00}
.fv-promo p{color:rgba(26,15,0,.82);font-size:14px;margin:0}
.fv-promo .fv-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.fv-promo .fv-slide{animation:fv-fade .35s ease}
.fv-promo .fv-nav2{position:absolute;top:14px;inset-inline-end:14px;z-index:2;display:flex;gap:6px}
.fv-promo .fv-nav2 button{width:30px;height:30px;border-radius:9px;border:0;background:rgba(255,255,255,.35);color:#1A0F00;display:grid;place-items:center;cursor:pointer}
.fv-promo .fv-nav2 button:hover{background:rgba(255,255,255,.6)}
.fv-promo .btn-light-ink{background:#1A0F00;color:#fff;border-color:#1A0F00}
.fv-promo .btn-light-ink:hover{background:#2c1a00;color:#fff}
.fv-coupon{display:inline-flex;align-items:center;gap:8px;height:38px;border:1.5px dashed rgba(26,15,0,.45);border-radius:10px;padding:0 12px;font:600 14px var(--fv-mono);background:rgba(255,255,255,.3);color:#1A0F00;cursor:pointer}
.fv-dots{display:flex;gap:5px;margin-top:10px}
.fv-dots button{width:6px;height:6px;padding:0;border:0;border-radius:99px;background:rgba(26,15,0,.25);transition:width .2s;cursor:pointer}
.fv-dots button.is-on{width:18px;background:#1A0F00}
.fv-feature{position:relative;overflow:hidden;border-radius:var(--fv-r);background:linear-gradient(160deg,var(--fv-brand-soft),transparent 60%),var(--fv-card);color:var(--fv-ink);padding:20px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--fv-line);box-shadow:var(--fv-sh)}
.fv-feature:before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--fv-line) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);mask-image:linear-gradient(200deg,#000,transparent 60%);pointer-events:none}
.fv-feature>*{position:relative;z-index:1}
.fv-feature .fv-tag{color:var(--fv-brand-ink)}
.fv-feature h3{font:700 18px/1.3 var(--fv-font-display);margin:0}
.fv-feature p{color:var(--fv-ink2);font-size:14px;margin:0}
.fv-feature .btn{margin-top:auto;align-self:flex-start}

/* AI card: a light card, the AI colour only inside */
.fv-aic-hero{border-radius:var(--fv-r);padding:20px;color:var(--fv-ink);background:linear-gradient(160deg,var(--fv-ai-soft),transparent 55%),var(--fv-card);border:1px solid var(--fv-line);position:relative;overflow:hidden;box-shadow:var(--fv-sh)}
.fv-aic-hero:after{content:"";position:absolute;inset-inline-end:-70px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgb(139 92 246 / .14),transparent 65%);pointer-events:none}
.fv-aic-hero>*{position:relative;z-index:1}
.fv-aic-hero .fv-tag{color:var(--fv-ai)}
.fv-aic-hero h3{font:700 17px/1.3 var(--fv-font-display);margin:8px 0 6px}
.fv-aic-hero p{color:var(--fv-ink2);font-size:14px;margin:0}
.fv-aic-hero .fv-lst{margin:14px 0;display:grid;gap:7px}
.fv-aic-hero .fv-lst div{display:flex;gap:9px;align-items:center;font-size:14px;background:var(--fv-soft);border:1px solid var(--fv-line2);border-radius:10px;padding:8px 10px}
.fv-aic-hero .fv-lst div i{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none}
.fv-aic-hero .fv-lst div.is-wait i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.22)}
.fv-aic-hero .fv-bub{background:#EEF0FF;color:#1E1B4B;border-radius:12px 12px 4px 12px;padding:8px 11px;font-size:13.5px;margin:12px 0 0 auto;width:fit-content;max-width:92%}
[data-theme="dark"] .fv-aic-hero .fv-bub{background:#262C5A;color:#E0E4FF}

/* billing + affiliate + domain search cards */
.fv-big{font:700 22px/1.2 var(--fv-font-display);letter-spacing:-.02em}
.fv-bar{height:6px;background:var(--fv-line2);border-radius:99px;overflow:hidden}
.fv-bar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22c55e,#16a34a)}
.fv-bar.is-hi b{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.fv-bar.is-crit b{background:linear-gradient(90deg,#fb923c,#dc2626)}
.fv-aff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fv-aff-stats div{background:var(--fv-soft);border:1px solid var(--fv-line2);border-radius:10px;padding:8px 10px}
.fv-aff-stats b{display:block;font:700 16px/1.3 var(--fv-font-display)}
.fv-aff-stats span{font-size:12.5px;color:var(--fv-ink3)}
.fv-domsearch{display:flex;gap:8px;padding:16px 20px}
.fv-domsearch .fv-field{flex:1;min-width:0}
.fv-domsearch .btn{flex:none}
.fv-tld{display:flex;gap:6px;flex-wrap:wrap;padding:0 20px 16px}
.fv-tld span{font-size:13px;border:1px solid var(--fv-line);border-radius:99px;padding:3px 9px;color:var(--fv-ink2)}
.fv-tld span b{color:var(--fv-ink)}

/* ───── invoices: figures + selection bar ───── */
.fv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.fv-kpi{padding:18px;display:grid;gap:12px}
.fv-kpi .fv-t{display:flex;align-items:center;gap:10px;color:var(--fv-ink2);font-size:14px;font-weight:500}
.fv-kpi .fv-t .fv-ico{width:32px;height:32px;border-radius:9px}
.fv-kpi>b{font:700 26px/1 var(--fv-font-display);letter-spacing:-.02em}
.fv-kpi .fv-f{font-size:13px;color:var(--fv-ink3)}
.fv-tabs{display:flex;gap:4px;border-bottom:1px solid var(--fv-line);overflow-x:auto;scrollbar-width:none;padding:0 12px}
.fv-tabs::-webkit-scrollbar{display:none}
.fv-tabs a,.fv-tabs button{border:0;background:none;padding:13px 12px;color:var(--fv-ink2)!important;font:inherit;font-weight:600;font-size:14.5px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:7px;align-items:center;text-decoration:none!important;cursor:pointer}
.fv-tabs a:hover,.fv-tabs button:hover{color:var(--fv-ink)!important}
.fv-tabs .is-on{color:var(--fv-ink)!important;border-bottom-color:var(--fv-brand)}
.fv-tabs .fv-n{background:var(--fv-soft2);color:var(--fv-ink2);border-radius:99px;font-size:12px;padding:0 7px;line-height:18px}
.fv-selbar{position:sticky;bottom:16px;margin-top:14px;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-radius:14px;background:#0b1324;color:#fff;box-shadow:var(--fv-sh-big);z-index:5;flex-wrap:wrap}
[data-theme="dark"] .fv-selbar{background:#1d2742}
.fv-selbar b{font-size:15px}
.fv-selbar .fv-r{margin-inline-start:auto;display:flex;gap:8px}

/* ───── service page ───── */
/* service header: name and status, then the details one per line and the resources two by two,
   with a light line between them (under each other when the card is narrow) */
.fv-shead{padding:22px;container-type:inline-size}
.fv-shtop{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fv-shtop>.fv-ico{width:56px;height:56px;border-radius:16px}
.fv-shtop>.fv-ico .fv-i{width:28px;height:28px}
.fv-shead h1{font:700 22px/1.25 var(--fv-font-display);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.fv-shead .fv-r{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.fv-sbody{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,460px);gap:16px 32px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--fv-line2)}
.fv-sinfo{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0;font-size:14.5px}
.fv-sinfo dt{display:flex;align-items:center;gap:8px;color:var(--fv-ink2);font-weight:400}
.fv-sinfo dt .fv-i{width:15px;height:15px;color:var(--fv-ink3);flex:none}
.fv-sinfo dd{margin:0;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:0 7px;min-width:0;overflow-wrap:anywhere}
.fv-sinfo dd>span{display:inline-flex;align-items:center;gap:7px}
.fv-sinfo dd .fv-faint{font-weight:500}
.fv-sinfo dd .fv-i{width:14px;height:14px;color:var(--fv-ink3)}
.fv-sres{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px 32px;padding-block:4px;padding-inline-start:32px;border-inline-start:1px solid var(--fv-line2)}
.fv-sres[hidden]{display:none}
.fv-rl{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--fv-ink2);margin-bottom:8px;white-space:nowrap}
.fv-rl .fv-i{width:15px;height:15px;color:var(--fv-ink3);flex:none}
.fv-rl>b{margin-inline-start:auto;font:700 15px var(--fv-font-display);color:var(--fv-ink)}
.fv-rl>b span{font:500 13px var(--fv-font);color:var(--fv-ink3)}
.fv-sres .fv-bar[hidden]{visibility:hidden;display:block}
@container (max-width:720px){
  .fv-sbody{grid-template-columns:1fr}
  .fv-sres{border-inline-start:0;padding:16px 0 0;border-top:1px solid var(--fv-line2)}
}
.fv-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.fv-copy .fv-i{width:13px;height:13px;color:var(--fv-ink3)}
.fv-copy:hover .fv-i{color:var(--fv-brand)}
.fv-sgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.fv-acts{display:grid;gap:2px;padding:8px}
.fv-acts a,.fv-acts button{display:flex;align-items:center;gap:11px;border:0;background:none;padding:9px 10px;border-radius:10px;font:inherit;font-size:14.5px;font-weight:500;text-align:start;color:var(--fv-ink)!important;text-decoration:none!important;width:100%;cursor:pointer}
.fv-acts a:hover,.fv-acts button:hover{background:var(--fv-soft2)}
.fv-acts .fv-i{color:var(--fv-ink3)}
.fv-acts .fv-x{margin-inline-start:auto}
.fv-acts .is-danger,.fv-acts .is-danger .fv-i{color:var(--fv-bad)!important}
.fv-acts .is-off{opacity:.5;pointer-events:none}
.fv-acts hr{border:0;border-top:1px solid var(--fv-line);margin:4px 6px}
.fv-acts form{margin:0}
.fv-mod{border:1px solid var(--fv-line);border-radius:var(--fv-r);background:var(--fv-card);box-shadow:var(--fv-sh);padding:20px;min-width:0;overflow-x:auto}
.fv-mod:empty{display:none}
.fv-ptabs{margin-top:20px}
.fv-ptabs .tab-content{padding:20px}

/* WHMCS's Overview / Actions panels on the service page, drawn like the mockup's Actions card */
.fv-svc-side{display:grid;gap:16px}
.fv-svc-side .card-sidebar .collapsable-card-body{display:block!important}
.fv-svc-side .card-minimise{display:none}
.fv-svc-side .list-group{padding:8px;display:grid!important;gap:2px}
.fv-svc-side .list-group-item{border:0!important;border-radius:10px!important;padding:9px 10px;font-size:14.5px;font-weight:500;margin:0}
.fv-svc-side .list-group-item.active{background:var(--fv-brand-soft);color:var(--fv-brand-ink)}
.fv-svc-side .sidebar-menu-item-icon{color:var(--fv-ink3)}
.fv-svc-side [menuitemname="Cancel"],.fv-svc-side [menuitemname="Cancel"] .sidebar-menu-item-icon{color:var(--fv-bad)!important}
/* Service page: the control panel ribbon (the server's state + "Show control panel") with the
   Virtualizor panel as its body, the Actions card, back link, flag */
.fv-vzcard{position:relative;padding:0}
.fv-vzrib{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
.fv-vzico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--fv-soft2);color:var(--fv-ink2)}
.fv-vzico .fv-i{width:19px;height:19px}
.fv-vzt{min-width:0} .fv-vzt b{display:block;font:700 15.5px/1.3 var(--fv-font-display)} .fv-vzt span{font-size:13.5px;color:var(--fv-ink3)}
.fv-vzmeta{display:flex;align-items:center;gap:14px;margin-inline-start:auto;font-size:13.5px;color:var(--fv-ink2);flex-wrap:wrap}
.fv-vzmeta[hidden],.fv-vzmeta [hidden]{display:none}
.fv-vzmeta>span:not(.label){display:inline-flex;align-items:center;gap:6px} .fv-vzmeta .fv-i{width:14px;height:14px;color:var(--fv-ink3)}
.fv-vzmeta[hidden]+.fv-vztoggle{margin-inline-start:auto}
.fv-vz{padding:8px;overflow:hidden;min-height:120px;border-top:1px solid var(--fv-line2)}
/* folded: taken out of the flow but still laid out at full width (so Virtualizor's charts draw
   right), 0 high and hidden */
.fv-vz.is-closed{position:absolute;top:0;inset-inline:0;height:0;min-height:0;padding:0;border-width:0;visibility:hidden}
.fv-vztoggle{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--fv-line);border-radius:11px;background:var(--fv-card);color:var(--fv-ink);font:600 14px var(--fv-font);cursor:pointer}
.fv-vztoggle[hidden]{display:none}
.fv-vztoggle:hover{border-color:var(--fv-line-strong);background:var(--fv-soft)}
.fv-vztoggle .fv-i{width:15px;height:15px;color:var(--fv-ink3)}
.fv-vztoggle .fv-chev{transition:transform .2s}
.fv-vztoggle[aria-expanded="true"] .fv-chev{transform:rotate(180deg)}
.fv-vz #virtualizor_manager{display:block;background:transparent!important;border:0}
.fv-vz #virtualizor_load_div{padding:12px}
.fv-vz #virtualizor_load_div .progress-bar-value{background-color:var(--fv-btn)!important;border-radius:99px}
.fv-svcacts .fv-acts{padding:8px}
.fv-svcacts .list-group-item{display:flex;align-items:center;gap:11px;border:0!important;border-radius:10px!important;padding:9px 10px;margin:0;font-size:14.5px;font-weight:500;color:var(--fv-ink)!important;background:none}
.fv-svcacts .list-group-item:hover{background:var(--fv-soft2)}
.fv-svcacts .list-group-item.active{background:var(--fv-brand-soft);color:var(--fv-brand-ink)!important}
.fv-svcacts .list-group-item .fv-i{color:var(--fv-ink3);flex:none}
.fv-svcacts .list-group-item.is-danger,.fv-svcacts .list-group-item.is-danger .fv-i{color:var(--fv-bad)!important}
.fv-svcacts .list-group-item .loading{order:9}
.fv-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--fv-ink2)!important;margin:0 0 12px;text-decoration:none!important}
.fv-back:hover{color:var(--fv-ink)!important}
.fv-flag-sm{width:18px;height:13px;border-radius:3px;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--fv-line);flex:none;display:inline-block}

/* ───── invoice page ───── */
.fv-igrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.fv-inv{padding:32px;position:relative;overflow:hidden;display:block}
.fv-stamp{position:absolute;top:24px;inset-inline-end:-46px;transform:rotate(35deg);background:var(--fv-bad);color:#fff;font-weight:800;font-size:13px;letter-spacing:.12em;padding:6px 54px;text-transform:uppercase}
[dir="rtl"] .fv-stamp{transform:rotate(-35deg)}
.fv-stamp.is-ok{background:#16a34a} .fv-stamp.is-off{background:#64748b} .fv-stamp.is-info{background:#2563eb}
[data-theme="dark"] .fv-stamp.is-bad{background:#dc2626}
.fv-inv-h{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--fv-line)}
.fv-inv-h h2{font:700 22px/1.3 var(--fv-font-display);margin:0}
.fv-inv-n{text-align:end;padding-inline-end:56px}
.fv-inv-n .fv-faint{font-size:13.5px}
.fv-inv-logo{max-height:48px;max-width:220px}
.fv-inv-to{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 0;font-size:14px;color:var(--fv-ink2)}
.fv-inv-to b{display:block;color:var(--fv-ink);font-size:14.5px;margin-bottom:3px}
.fv-inv-items{border:1px solid var(--fv-line);border-radius:12px;overflow:hidden}
.fv-inv-items th{background:var(--fv-soft)}
.fv-inv-tot{margin-inline-start:auto;width:min(320px,100%);padding-top:14px}
.fv-sumrow{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0;color:var(--fv-ink2)}
.fv-sumrow b{color:var(--fv-ink);font-weight:600}
.fv-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:8px;border-top:1px solid var(--fv-line)}
.fv-total b{font:800 24px/1.2 var(--fv-font-display);letter-spacing:-.02em}
.fv-inv-sec{font:700 15px/1.3 var(--fv-font-display);margin:26px 0 10px}
.fv-paybtn{display:grid;gap:10px;font-size:14px;color:var(--fv-ink2)}
.fv-paybtn form{margin:0;display:grid;gap:8px}
.fv-paybtn input[type=submit],.fv-paybtn button,.fv-paybtn .btn{width:100%;min-height:46px;font-size:15.5px;border-radius:12px;background:var(--fv-btn)!important;border:0!important;color:var(--fv-on-brand)!important;font-weight:700;cursor:pointer}
.fv-paybtn input[type=submit]:hover,.fv-paybtn button:hover,.fv-paybtn .btn:hover{background:var(--fv-btn-hover)!important}
.fv-paybtn img{max-width:100%}
/* a gateway that offers several ways to pay (Payssion: Bitcoin, Alipay, …) draws one button per
   way: they are equal choices, so they are quiet outlined buttons instead of several big orange ones */
.fv-paybtn:has(form + form) :is(input[type=submit],button,.btn),.fv-paybtn .payssion-payment-form :is(input[type=submit],button){min-height:42px;font-size:14.5px;border-radius:11px;background:var(--fv-card)!important;border:1px solid var(--fv-line)!important;color:var(--fv-ink)!important;font-weight:600}
.fv-paybtn:has(form + form) :is(input[type=submit],button,.btn):hover,.fv-paybtn .payssion-payment-form :is(input[type=submit],button):hover{background:var(--fv-brand-soft)!important;border-color:var(--fv-brand)!important}

/* ───── tickets ───── */
.fv-tgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.fv-unread{width:8px;height:8px;border-radius:50%;background:var(--fv-brand);display:inline-block;flex:none}
.fv-unread.is-read{background:transparent}
.fv-thread{display:grid;gap:16px}
.fv-post{display:flex;gap:12px}
.fv-post>.fv-av{width:38px;height:38px}
.fv-post .fv-bub{flex:1;min-width:0;background:var(--fv-card);border:1px solid var(--fv-line);border-radius:14px;padding:14px 18px;box-shadow:var(--fv-sh)}
.fv-post .fv-bub .fv-h{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.fv-post .fv-bub .fv-h b{font-size:14.5px}
.fv-post .fv-bub .fv-h small{color:var(--fv-ink3);font-size:13px;margin-inline-start:auto}
.fv-post .fv-msg{font-size:14.5px;line-height:1.65;overflow-wrap:anywhere}
.fv-post .fv-msg p{margin:0 0 8px} .fv-post .fv-msg p:last-child{margin:0}
.fv-post .fv-msg img{max-width:100%}
.fv-post.is-staff .fv-bub{border-color:var(--fv-brand-line);background:linear-gradient(180deg,var(--fv-brand-soft),var(--fv-card) 60%)}
.fv-post.is-staff>.fv-av{background:var(--fv-btn);color:var(--fv-on-brand)}
.fv-att{display:inline-flex;gap:7px;align-items:center;margin:12px 8px 0 0;border:1px solid var(--fv-line);border-radius:9px;padding:6px 10px;font-size:13.5px;color:var(--fv-ink2)!important;text-decoration:none!important}
.fv-att .fv-i{width:14px;height:14px}
.fv-att:hover{border-color:var(--fv-brand-line)}

/* ───── account ───── */
.fv-agrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.fv-anav{padding:8px;display:grid;gap:2px}
.fv-anav a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--fv-ink2)!important;white-space:nowrap;text-decoration:none!important}
.fv-anav a:hover{background:var(--fv-soft2);color:var(--fv-ink)!important}
.fv-anav a.is-on{background:var(--fv-brand-soft);color:var(--fv-brand-ink)!important;font-weight:600}
.fv-anav .fv-i{width:16px;height:16px}

/* ───── sign-in page (no frame) ───── */
.fv-login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--fv-card)}
.fv-lart{background:var(--fv-hero);color:#fff;padding:40px 52px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.fv-lart:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.fv-lart:after{content:"";position:absolute;inset-inline-end:-140px;top:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,61,.42),transparent 65%)}
.fv-lart>*{position:relative;z-index:1}
.fv-lart .fv-brand{padding:0;color:#fff!important}
.fv-lart h2{font:800 34px/1.18 var(--fv-font-display);margin:auto 0 14px;max-width:470px;color:#fff}
.fv-lart>p{color:#c7d2fe;max-width:450px;font-size:16px}
.fv-lart .fv-demo{margin-top:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px;max-width:460px;display:grid;gap:9px}
.fv-lart .fv-demo div{font-size:14px;padding:9px 12px;border-radius:12px;max-width:86%}
.fv-lart .fv-demo .fv-q{background:#fff;color:#1e1b4b;justify-self:end;border-bottom-right-radius:4px}
.fv-lart .fv-demo .fv-a{background:rgba(255,255,255,.12);justify-self:start;border-bottom-left-radius:4px}
.fv-lart .fv-bottom{margin-top:auto;padding-top:32px;font-size:13.5px;color:#a5b4fc;display:flex;gap:22px;flex-wrap:wrap}
.fv-lart .fv-bottom span{display:flex;gap:7px;align-items:center}
.fv-lform{display:grid;place-items:center;padding:40px 24px;position:relative}
.fv-lbox{width:100%;max-width:380px;display:grid;gap:14px}
.fv-lbox h1{font:700 26px/1.2 var(--fv-font-display);margin:0}
.fv-lbox .fv-lead{color:var(--fv-ink2);margin:-8px 0 6px}
.fv-lbox .fv-lbrand{display:none;padding:0;margin-bottom:12px}
.fv-lbox .form-group{margin:0}
.fv-lbox .fv-lab-row{display:flex;justify-content:space-between;align-items:center}
.fv-lbox .btn-primary{min-height:46px;font-size:15.5px}
.fv-or{display:flex;align-items:center;gap:12px;color:var(--fv-ink3);font-size:13px}
.fv-or:before,.fv-or:after{content:"";flex:1;border-top:1px solid var(--fv-line)}
.fv-ltools{position:absolute;top:16px;inset-inline-end:16px;display:flex;gap:6px}
.fv-lbox .alert{margin:0}
.fv-lbox .row{margin:0}
.fv-lbox .card{border:0;box-shadow:none;background:none;margin:0!important;max-width:none}
.fv-lbox .card-body{padding:0!important}
.fv-lbox .card-footer{background:none;border:0;padding:12px 0 0}
.fv-ltools .fv-lang{height:36px}
body.fv-is-bare{background:var(--fv-card)}

@keyframes fv-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ───── responsive ───── */
@media (max-width:1600px){ .fv-lgrid .fv-col-ip{display:none} .fv-lgrid .fv-ip-in{display:block!important} }
.fv-ip-in{display:none!important}
/* a list with side cards: below 1500px the cards go under the list, so the table keeps room */
@media (max-width:1499px){ .fv-lgrid,.fv-tgrid{grid-template-columns:1fr} }
.fv-dt td.fv-col-due{min-width:120px}
@media (max-width:900px){ .fv-sb-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1100px){
  .fv-dgrid,.fv-lgrid,.fv-sgrid,.fv-tgrid,.fv-igrid{grid-template-columns:1fr}
  .fv-sidecol{position:static}
  .fv-dgrid .fv-soon-col{display:none}
  .fv-dgrid .fv-soon-col.is-clear{display:block}
}
/* ───── forms in cards (account pages, cart) ───── */
.fv-sec-t{font:700 15px/1.3 var(--fv-font-display);margin:0 0 12px;display:flex;gap:8px;align-items:center;color:var(--fv-ink)}
.fv-sec-t .fv-i{color:var(--fv-ink3)}
.fv-form2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fv-form2 .form-group{margin-bottom:12px}
.fv-form2 .fv-span2{grid-column:1/-1}
.fv-form2 label,.fv-cfs>.form-group>label,.fv-agrid .form-group>label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--fv-ink2)}
.fv-lab-row,.fv-form2 label.fv-lab-row{display:flex;justify-content:space-between;align-items:center}
.fv-lab-row .btn-link{min-height:0;padding:0;font-size:13.5px;font-weight:600;color:var(--fv-brand-ink)!important}
.fv-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.fv-narrow{max-width:420px}

/* ───── account (approved mockup "Account"): menu card on the left, cards on the right ───── */
.fv-body.fv-agrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
.fv-anav{padding:8px;display:grid;gap:2px;position:sticky;top:84px}
.fv-anav a{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--fv-ink2)!important;text-decoration:none!important}
.fv-anav a:hover{background:var(--fv-soft);color:var(--fv-ink)!important}
.fv-anav a.is-on{background:var(--fv-brand-soft);color:var(--fv-brand-ink)!important;font-weight:600}
.fv-anav .fv-i{width:17px;height:17px}
.fv-agrid .fv-page>.card+.card,.fv-agrid .fv-page>.card{margin-bottom:20px}
.fv-agrid .fv-stack>.card{margin:0}
.fv-secrow{display:flex;gap:14px;align-items:center;padding:16px 20px;border-top:1px solid var(--fv-line2)}
.fv-ch+.fv-secrow{border-top:0}
.fv-secrow h4{font-size:15px;font-weight:700;margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fv-secrow h4 .fv-pill{height:20px;font-size:12px}
.fv-secrow h4 .fv-faint{font-weight:500;font-size:13.5px}
.fv-secrow p{margin:2px 0 0;font-size:13.5px;color:var(--fv-ink3)}
.fv-secrow .btn{flex:none}
.fv-checks{display:grid;gap:10px}
.fv-check-row{display:flex;gap:10px;align-items:center;margin:0;font-size:14.5px;color:var(--fv-ink);font-weight:500;cursor:pointer}
.fv-check-row .form-check-input{position:static;margin:0;width:17px;height:17px;accent-color:var(--fv-btn)}
@media (max-width:900px){
  .fv-body.fv-agrid{grid-template-columns:1fr}
  .fv-anav{position:static;display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .fv-anav::-webkit-scrollbar{display:none}
  .fv-anav a{flex:none;white-space:nowrap}
}
@media (max-width:560px){
  .fv-form2{grid-template-columns:1fr}
  .fv-secrow{flex-wrap:wrap} .fv-secrow .btn{margin-inline-start:44px}
}

@media (min-width:1101px){ .fv-soon-top{display:none} }
@media (max-width:900px){
  .fv-welcome .fv-r,.fv-ph .fv-r{margin-inline-start:0}
  .fv-promo-row{grid-template-columns:1fr}
  .fv-kpis{grid-template-columns:1fr 1fr}
  .fv-agrid{grid-template-columns:1fr}
  .fv-anav{grid-auto-flow:column;overflow-x:auto;grid-auto-columns:max-content}
  /* tables become cards */
  .fv-dt thead{display:none}
  .fv-dt,.fv-dt tbody,.fv-dt tr,.fv-dt td{display:block;width:100%}
  .fv-dt tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;padding:14px 16px;border-top:1px solid var(--fv-line2)}
  .fv-dt tbody tr:first-child{border-top:0}
  .fv-dt tbody tr[hidden]{display:none}
  .fv-dt td,.fv-dt td:first-child,.fv-dt td:last-child{padding:0;border:0!important;background:none!important;width:auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .fv-dt .fv-nw,.fv-dt .fv-who a{white-space:normal}
  .fv-inv-items td.fv-inv-desc{grid-column:1/-1}
  .fv-inv-items td.fv-end{justify-content:flex-end;font-weight:700}
  .fv-dt td.fv-wide,.fv-dt td.fv-end{grid-column:1/-1}
  .fv-dt td.fv-end{text-align:start;display:flex;gap:6px}
  .fv-dt td.fv-end .btn{flex:1}
  .fv-dt td.fv-cb{display:none}
  .fv-dt .fv-empty-row:not([hidden]){display:block!important}
  .fv-dt .fv-unread.is-read{display:none}
  .fv-lab{display:block;font-size:12px;color:var(--fv-ink3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
  .fv-inv{padding:22px} .fv-inv-to{grid-template-columns:1fr} .fv-inv-n{text-align:start}
  .fv-login{grid-template-columns:1fr}
  .fv-lart{display:none}
  .fv-lbox .fv-lbrand{display:flex}
}
@media (max-width:700px){ .fv-st{padding:14px 16px} .fv-st .fv-v{font-size:24px} }
@media (max-width:560px){
  .fv-welcome h1{font-size:22px}
  .fv-kpis{grid-template-columns:1fr}
  .fv-shead{padding:16px} .fv-shead .fv-r{width:100%} .fv-shead .fv-r .btn{flex:1} .fv-sres{gap:16px 20px}
  .fv-vzt{flex:1 1 0} .fv-vzmeta{margin-inline-start:0;width:100%} .fv-vztoggle{width:100%;justify-content:center}
  .fv-seg{width:100%} .fv-seg button,.fv-seg a{flex:1;justify-content:center;padding:0 6px}
  .fv-search{max-width:none;flex-basis:100%}
  .fv-domsearch{flex-wrap:wrap} .fv-domsearch .btn{flex:1}
}

/* ───── printing: only the page, no frame ───── */
@media print{
  .fv-side,.fv-top,.fv-foot,.fv-notice,.fv-crumb,.fv .verification-banner,.d-print-none,.fv-scrim,.fv-pal{display:none!important}
  .fv-app,.fv-main{display:block}
  .fv-content,.fv-content.container{padding:0;max-width:none}
  .fv-igrid{display:block}
  .fv .card{box-shadow:none}
  body.fv{background:#fff}
}
/* ═════════ MODULE PAGES: their own HTML, our colours ═════════
   Modules draw their own HTML (rule 5): we only point their colours at our tokens so they sit
   inside the frame in light and dark mode. */

/* ───── AI Manager addon (ServerAlly repo, connect/whmcs-addon) — its .sac variables ───── */
.fv .sac{
  --sac-ink:var(--fv-ink); --sac-ink2:var(--fv-ink2); --sac-ink3:var(--fv-ink3); --sac-line:var(--fv-line); --sac-soft:var(--fv-soft);
  --sac-brand:var(--fv-btn); --sac-brand-dark:var(--fv-btn-hover); --sac-brand-soft:var(--fv-brand-soft);
  --sac-ok:var(--fv-ok); --sac-ok-soft:var(--fv-ok-soft); --sac-warn:var(--fv-warn); --sac-warn-soft:var(--fv-warn-soft);
  --sac-bad:var(--fv-bad); --sac-bad-soft:var(--fv-bad-soft); --sac-info:var(--fv-info); --sac-info-soft:var(--fv-info-soft);
  --sac-r:var(--fv-r); --sac-sh:var(--fv-sh);
  --sac-card:var(--fv-card); --sac-vi:var(--fv-ai); --sac-vi-soft:var(--fv-ai-soft);
  font-family:var(--fv-font);
}
.fv .sac h1,.fv .sac h2,.fv .sac h3{font-family:var(--fv-font-display)}
.fv .sac-card,.fv .sac-btn:not(.sac-ghost):not(.sac-pri):not(.sac-white),.fv .sac-step,.fv .sac-menu,.fv .sac-app,.fv .sac-drawer,.fv .sac-mbox,.fv .sac-window,.fv .sac-chip,
.fv .sac-filters select,.fv .sac-seg button.sac-on{background-color:var(--fv-card)}
.fv .sac-btn:not(.sac-ghost):not(.sac-pri):not(.sac-white):hover{border-color:var(--fv-line-strong);background:var(--fv-soft)}
.fv .sac-pri,.fv .sac-pri:hover{background:var(--fv-btn);border-color:transparent;color:var(--fv-on-brand)!important}
.fv .sac-pri:hover{background:var(--fv-btn-hover)}
.fv .sac-num,.fv .sac-n,.fv .sac-off.sac-pill,.fv .sac-seg,.fv .sac-evi-off,.fv .sac-op-cp,.fv .sac-srvname{background-color:var(--fv-soft2)!important}
.fv .sac-bar div,.fv .sac-mini i,.fv .sac-wbar i{background:var(--fv-line2)}
.fv .sac-list td,.fv .sac-ev,.fv .sac-wbar{border-color:var(--fv-line2)}
.fv .sac-list tbody tr:hover td,.fv .sac-menu a:hover,.fv .sac-menu button:hover{background:var(--fv-soft2)}
.fv .sac-alert-ok,.fv .sac-chip-on,.fv .sac-status.sac-connected,.fv .sac-step.sac-done{border-color:var(--fv-ok-line)}
.fv .sac-alert-bad{border-color:var(--fv-bad-line);color:var(--fv-bad)}
.fv .sac-alert-warn,.fv .sac-wait,.fv .sac-side-warn{border-color:var(--fv-warn-line);color:var(--fv-ink)}
.fv .sac-wait b{color:var(--fv-warn-ink)}
.fv .sac-step.sac-done{background:linear-gradient(180deg,var(--fv-ok-soft),var(--fv-card))}
.fv .sac-set-danger{background:var(--fv-bad-soft)}
.fv .sac-status{border-color:var(--fv-line-strong)}
.fv .sac-app:hover{border-color:var(--fv-brand-line)}
.fv .sac-m-a{border-color:var(--fv-line2)}
[data-theme="dark"] .fv .sac-howto-chat,[data-theme="dark"] .fv .sac-svc-chat{background:linear-gradient(180deg,#121A30,#0E1526)}
[data-theme="dark"] .fv .sac-m-u{background:#262C5A;color:#E0E4FF}
[data-theme="dark"] .fv .sac-lin{background:rgba(233,84,32,.15);color:#ff8a5c}
[data-theme="dark"] .fv .sac-win{background:rgba(59,130,246,.15);color:#7cb7ff}
[data-theme="dark"] .fv .sac-alert-ok{color:var(--fv-ok)}
[data-theme="dark"] .fv .sac-switch span{background:var(--fv-soft2)}

/* ───── WHMCS product page (Twenty-One) until Phase 2 replaces it ───── */
.fv div.product-details div.product-icon{background-color:var(--fv-soft);color:var(--fv-ink)}
.fv div.product-details div.product-icon .fa-circle{color:var(--fv-ink)}
.fv div.product-details div.product-icon .fa-inverse{color:var(--fv-card)}
.fv .product-status{border-radius:0 0 10px 10px}
.fv .product-status-active{background-color:var(--fv-ok-soft)} .fv .product-status-active .product-status-text{color:var(--fv-ok)}
.fv .product-status-pending{background-color:var(--fv-warn-soft)} .fv .product-status-pending .product-status-text{color:var(--fv-warn)}
.fv .product-status-suspended,.fv .product-status-terminated,.fv .product-status-fraud{background-color:var(--fv-bad-soft)}
.fv .product-status-suspended .product-status-text,.fv .product-status-terminated .product-status-text,.fv .product-status-fraud .product-status-text{color:var(--fv-bad)}
.fv .product-status-cancelled{background-color:var(--fv-soft2)}
.fv .product-status-cancelled .product-status-text{color:var(--fv-ink2)}
.fv .product-status-text{font-weight:700;font-size:13px;letter-spacing:.06em}
.fv tr.masspay-total td{background-color:var(--fv-soft)}