/* ==========================================================================
   Zagros — WHMCS 8.x client area theme
   Layered on top of Bootstrap 4.5.3 (all.min.css). twenty-one's theme.min.css
   is NOT loaded; this file replaces it entirely.

   Sections
     01  Tokens (dark / light)
     02  Base + typography
     03  RTL correction layer for Bootstrap utilities
     04  Shell: sidebar, topbar, content
     05  Components
     06  Dashboard
     07  Pages
     08  Responsive
   ========================================================================== */

/* == 01 Tokens ============================================================ */

:root{
  --sidebar-w: 262px;
  --sidebar-w-min: 66px;
  --topbar-h: 58px;
  --content-max: 1440px;

  --r-lg: 12px;
  --r: 9px;
  --r-sm: 6px;
  --r-pill: 999px;

  --gap: 16px;
  --pad-card: 18px;

  --font-ui: "Vazirmatn FD", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --font-tech: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;

  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .18s;

  /* Service taxonomy — colour is an index, not decoration.
     Every product family keeps the same hue across icon, chip, bar and status. */
  --cat-vps:     #2BB3A3;
  --cat-dedi:    #E0A03A;
  --cat-cdn:     #8A7BF0;
  --cat-hosting: #4A90E2;
  --cat-domain:  #E8657F;
  --cat-storage: #45B36B;
  --cat-network: #46B5D1;
  --cat-other:   #8A96A5;
}

html[data-theme="dark"]{
  --bg:          #0D1014;
  --surface:     #141920;
  --surface-2:   #1A212A;
  --surface-3:   #212A34;
  --surface-alt: #10151B;
  --border:      #242D38;
  --border-soft: #1C242D;

  --text:        #E6EAF0;
  --text-2:      #98A3B2;
  --text-3:      #68737F;
  --text-invert: #0D1014;

  --brand:       #12BFAE;
  --brand-hover: #16D3C0;
  --brand-soft:  rgba(18,191,174,.13);
  --brand-line:  rgba(18,191,174,.32);

  --ok:    #35B978;  --ok-soft:    rgba(53,185,120,.14);
  --warn:  #DFA435;  --warn-soft:  rgba(223,164,53,.14);
  --dang:  #E85D6A;  --dang-soft:  rgba(232,93,106,.14);
  --info:  #4A9EE8;  --info-soft:  rgba(74,158,232,.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.34);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.48);
  --overlay:   rgba(6,9,12,.7);

  color-scheme: dark;
}

html[data-theme="light"]{
  --bg:          #F3F6F9;
  --surface:     #FFFFFF;
  --surface-2:   #F8FAFC;
  --surface-3:   #EEF2F7;
  --surface-alt: #FFFFFF;
  --border:      #E1E7EF;
  --border-soft: #EDF1F6;

  --text:        #131B24;
  --text-2:      #55626F;
  --text-3:      #8A96A4;
  --text-invert: #FFFFFF;

  --brand:       #0B9E90;
  --brand-hover: #0A8B7F;
  --brand-soft:  rgba(11,158,144,.10);
  --brand-line:  rgba(11,158,144,.28);

  --ok:    #1F9A5F;  --ok-soft:    rgba(31,154,95,.11);
  --warn:  #B9822A;  --warn-soft:  rgba(185,130,42,.12);
  --dang:  #D24352;  --dang-soft:  rgba(210,67,82,.11);
  --info:  #2F7FD0;  --info-soft:  rgba(47,127,208,.11);

  --shadow-sm: 0 1px 2px rgba(19,27,36,.06);
  --shadow:    0 4px 16px rgba(19,27,36,.08);
  --shadow-lg: 0 14px 40px rgba(19,27,36,.14);
  --overlay:   rgba(19,27,36,.42);

  color-scheme: light;
}

/* == 02 Base ============================================================== */

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  line-height:1.75;
  letter-spacing:0;
  margin:0;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Technical values keep Latin digits — an IP or a hash is read character by
   character and Persian digits slow that down. */
.tech, .ip, code, kbd, pre, samp, .mono,
input[type="email"], input[type="url"], input[name*="ns"], .text-latin{
  font-family:var(--font-tech);
  font-variant-numeric:tabular-nums;
}
code,kbd,samp,pre,.mono{font-family:var(--font-mono)}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{
  font-family:var(--font-ui);
  color:var(--text);
  font-weight:600;
  line-height:1.5;
  margin:0 0 .6em;
}
h1,.h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.01em}
h2,.h2{font-size:var(--fs-xl);font-weight:700}
h3,.h3{font-size:var(--fs-lg)}
h4,.h4{font-size:var(--fs-md)}
h5,.h5{font-size:var(--fs-base)}

p{margin:0 0 1em}
small,.small{font-size:var(--fs-sm)}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}

a{color:var(--brand);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover,a:focus{color:var(--brand-hover);text-decoration:none}

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

::selection{background:var(--brand-soft);color:var(--text)}

.text-muted{color:var(--text-2)!important}
.text-faint{color:var(--text-3)!important}
.text-success{color:var(--ok)!important}
.text-warning{color:var(--warn)!important}
.text-danger{color:var(--dang)!important}
.text-info{color:var(--info)!important}
.text-primary{color:var(--brand)!important}

/* Scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-pill)}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* == 03 RTL correction layer ==============================================
   Bootstrap 4.5.3 ships LTR only, and WHMCS core templates lean on the
   directional utilities. Rather than shipping a second full Bootstrap build
   (Metano ships ~640KB of RTL CSS), we flip only the utilities that are
   actually used. Keep this list in sync if you add new markup.
   ======================================================================== */

[dir="rtl"] .float-left{float:right!important}
[dir="rtl"] .float-right{float:left!important}
[dir="rtl"] .text-left{text-align:right!important}
[dir="rtl"] .text-right{text-align:left!important}

[dir="rtl"] .mr-auto{margin-right:0!important;margin-left:auto!important}
[dir="rtl"] .ml-auto{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] .mr-1{margin-right:0!important;margin-left:.25rem!important}
[dir="rtl"] .mr-2{margin-right:0!important;margin-left:.5rem!important}
[dir="rtl"] .mr-3{margin-right:0!important;margin-left:1rem!important}
[dir="rtl"] .mr-4{margin-right:0!important;margin-left:1.5rem!important}
[dir="rtl"] .ml-1{margin-left:0!important;margin-right:.25rem!important}
[dir="rtl"] .ml-2{margin-left:0!important;margin-right:.5rem!important}
[dir="rtl"] .ml-3{margin-left:0!important;margin-right:1rem!important}
[dir="rtl"] .ml-4{margin-left:0!important;margin-right:1.5rem!important}
[dir="rtl"] .pr-1{padding-right:0!important;padding-left:.25rem!important}
[dir="rtl"] .pr-2{padding-right:0!important;padding-left:.5rem!important}
[dir="rtl"] .pr-3{padding-right:0!important;padding-left:1rem!important}
[dir="rtl"] .pl-1{padding-left:0!important;padding-right:.25rem!important}
[dir="rtl"] .pl-2{padding-left:0!important;padding-right:.5rem!important}
[dir="rtl"] .pl-3{padding-left:0!important;padding-right:1rem!important}

[dir="rtl"] .dropdown-menu{right:0;left:auto;text-align:right}
[dir="rtl"] .dropdown-menu-right{right:auto;left:0}
[dir="rtl"] .dropdown-toggle::after{margin-right:.3em;margin-left:0}

[dir="rtl"] .input-group>.form-control:not(:last-child),
[dir="rtl"] .input-group>.custom-select:not(:last-child){border-radius:0 var(--r) var(--r) 0}
[dir="rtl"] .input-group>.form-control:not(:first-child),
[dir="rtl"] .input-group>.custom-select:not(:first-child){border-radius:var(--r) 0 0 var(--r)}
[dir="rtl"] .input-group-prepend{margin-right:0;margin-left:-1px}
[dir="rtl"] .input-group-append{margin-left:0;margin-right:-1px}
[dir="rtl"] .input-group>.input-group-prepend>.input-group-text{border-radius:0 var(--r) var(--r) 0}
[dir="rtl"] .input-group>.input-group-append>.input-group-text,
[dir="rtl"] .input-group>.input-group-append>.btn{border-radius:var(--r) 0 0 var(--r)}

[dir="rtl"] .btn-group>.btn:first-child:not(:last-child){border-radius:0 var(--r) var(--r) 0}
[dir="rtl"] .btn-group>.btn:last-child:not(:first-child){border-radius:var(--r) 0 0 var(--r)}
[dir="rtl"] .btn-group>.btn:not(:first-child):not(:last-child){border-radius:0}

[dir="rtl"] .custom-control{padding-right:1.5rem;padding-left:0}
[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after{right:-1.5rem;left:auto}

[dir="rtl"] .close{float:left}
[dir="rtl"] .modal-header .close{margin:-1rem auto -1rem -1rem}
[dir="rtl"] .breadcrumb-item+.breadcrumb-item{padding-right:.5rem;padding-left:0}
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before{padding-left:.5rem;padding-right:0;float:right;content:"‹"}
[dir="rtl"] .list-group{padding-right:0}
[dir="rtl"] .progress-bar{float:right}
[dir="rtl"] .fa-chevron-left::before{content:"\f054"}
[dir="rtl"] .fa-chevron-right::before{content:"\f053"}
[dir="rtl"] .fa-arrow-left::before{content:"\f061"}
[dir="rtl"] .fa-arrow-right::before{content:"\f060"}
[dir="rtl"] .fa-long-arrow-alt-left::before{content:"\f30b"}
[dir="rtl"] .fa-long-arrow-alt-right::before{content:"\f30a"}

/* == 04 Shell ============================================================= */

.zg-app{min-height:100vh}

/* -- Sidebar ------------------------------------------------------------- */
.zg-nav{
  position:fixed;
  top:0; right:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:1040;
  transition:width var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[dir="ltr"] .zg-nav{right:auto;left:0;border-left:0;border-right:1px solid var(--border)}

.zg-nav__brand{
  height:var(--topbar-h);
  flex:0 0 var(--topbar-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  border-bottom:1px solid var(--border-soft);
  overflow:hidden;
  white-space:nowrap;
}
.zg-nav__brand img{max-height:30px;max-width:150px;object-fit:contain}
.zg-nav__brand-text{font-size:var(--fs-md);font-weight:700;color:var(--text);letter-spacing:-.01em}
.zg-nav__brand-mark{
  width:30px;height:30px;flex:0 0 30px;
  border-radius:8px;
  background:var(--brand);
  color:var(--text-invert);
  display:grid;place-items:center;
  font-weight:700;font-size:14px;
}

.zg-nav__scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 10px 18px;
  overscroll-behavior:contain;
}

.zg-nav__group{margin:0 0 4px}
.zg-nav__group-label{
  font-size:var(--fs-xs);
  color:var(--text-3);
  font-weight:500;
  padding:14px 10px 6px;
  white-space:nowrap;
  overflow:hidden;
}

.zg-nav__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 10px;
  margin-bottom:1px;
  border-radius:var(--r);
  color:var(--text-2);
  font-size:var(--fs-base);
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.zg-nav__item:hover{background:var(--surface-3);color:var(--text)}
.zg-nav__item.is-active{background:var(--brand-soft);color:var(--text)}
.zg-nav__item.is-active::before{
  content:"";
  position:absolute;
  right:-10px; top:50%;
  transform:translateY(-50%);
  width:3px;height:19px;
  border-radius:3px 0 0 3px;
  background:var(--brand);
}
[dir="ltr"] .zg-nav__item.is-active::before{right:auto;left:-10px;border-radius:0 3px 3px 0}

.zg-nav__icon{
  flex:0 0 26px;
  width:26px;height:26px;
  border-radius:7px;
  display:grid;place-items:center;
  font-size:12.5px;
  color:var(--cat, var(--text-2));
  background:color-mix(in srgb, var(--cat, var(--text-3)) 13%, transparent);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.zg-nav__item:hover .zg-nav__icon,
.zg-nav__item.is-active .zg-nav__icon{
  background:color-mix(in srgb, var(--cat, var(--brand)) 20%, transparent);
  color:var(--cat, var(--brand));
}
.zg-nav__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.zg-nav__caret{
  flex:0 0 auto;font-size:9px;color:var(--text-3);
  transition:transform var(--dur) var(--ease);
}
.zg-nav__item[aria-expanded="true"] .zg-nav__caret{transform:rotate(-90deg)}

.zg-nav__badge{
  flex:0 0 auto;
  font-size:10px;
  font-weight:600;
  line-height:1;
  padding:3px 6px;
  border-radius:var(--r-pill);
  background:var(--brand-soft);
  color:var(--brand);
}
.zg-nav__badge--soon{background:var(--warn-soft);color:var(--warn)}
.zg-nav__badge--new{background:var(--ok-soft);color:var(--ok)}
.zg-nav__badge--beta{background:var(--info-soft);color:var(--info)}

.zg-nav__sub{padding:2px 0 6px}
.zg-nav__sub .zg-nav__item{
  padding-right:47px; padding-left:10px;
  font-size:var(--fs-sm);
  font-weight:400;
}
[dir="ltr"] .zg-nav__sub .zg-nav__item{padding-left:47px;padding-right:10px}
.zg-nav__sub .zg-nav__item::after{
  content:"";
  position:absolute;
  right:29px; top:50%;
  width:4px;height:4px;border-radius:50%;
  transform:translateY(-50%);
  background:var(--border);
}
[dir="ltr"] .zg-nav__sub .zg-nav__item::after{right:auto;left:29px}
.zg-nav__sub .zg-nav__item.is-active::after{background:var(--brand)}
.zg-nav__sub .zg-nav__item.is-active::before{display:none}

.zg-nav__foot{
  flex:0 0 auto;
  border-top:1px solid var(--border-soft);
  padding:10px;
}
.zg-nav__user{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;border-radius:var(--r);
  color:var(--text);cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.zg-nav__user:hover{background:var(--surface-3);color:var(--text)}
.zg-nav__avatar{
  flex:0 0 32px;width:32px;height:32px;border-radius:9px;
  background:var(--surface-3);color:var(--text-2);
  display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm);
  border:1px solid var(--border);
}
.zg-nav__user-meta{min-width:0;line-height:1.35}
.zg-nav__user-name{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zg-nav__user-sub{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Collapsed rail */
.zg-collapsed .zg-nav{width:var(--sidebar-w-min)}
.zg-collapsed .zg-nav__label,
.zg-collapsed .zg-nav__caret,
.zg-collapsed .zg-nav__badge,
.zg-collapsed .zg-nav__group-label,
.zg-collapsed .zg-nav__brand-text,
.zg-collapsed .zg-nav__user-meta{display:none}
.zg-collapsed .zg-nav__item{justify-content:center;padding:8px}
.zg-collapsed .zg-nav__sub{display:none!important}
.zg-collapsed .zg-nav__brand{justify-content:center;padding:0}
.zg-collapsed .zg-nav__user{justify-content:center}
.zg-collapsed .zg-main{margin-right:var(--sidebar-w-min)}
[dir="ltr"].zg-collapsed .zg-main,
[dir="ltr"] .zg-collapsed .zg-main{margin-right:0;margin-left:var(--sidebar-w-min)}

/* -- Main + topbar ------------------------------------------------------- */
.zg-main{
  margin-right:var(--sidebar-w);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:margin var(--dur) var(--ease);
}
[dir="ltr"] .zg-main{margin-right:0;margin-left:var(--sidebar-w)}

.zg-top{
  position:sticky;top:0;z-index:1030;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:8px;
  padding:0 18px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}

.zg-icon-btn{
  width:34px;height:34px;
  border:1px solid transparent;
  background:transparent;
  border-radius:var(--r);
  color:var(--text-2);
  display:inline-grid;place-items:center;
  font-size:14px;
  cursor:pointer;
  transition:all var(--dur) var(--ease);
  position:relative;
}
.zg-icon-btn:hover{background:var(--surface-3);color:var(--text)}
.zg-icon-btn__dot{
  position:absolute;top:6px;
  inset-inline-end:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--dang);
  border:2px solid var(--bg);
}

.zg-crumb{
  display:flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);color:var(--text-3);
  min-width:0;
}
.zg-crumb a{color:var(--text-3)}
.zg-crumb a:hover{color:var(--text)}
.zg-crumb__sep{font-size:9px;opacity:.55}
.zg-crumb__current{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.zg-wallet{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 6px 0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  font-size:var(--fs-sm);
  color:var(--text);
  white-space:nowrap;
}
[dir="ltr"] .zg-wallet{padding:0 12px 0 6px}
.zg-wallet__amount{font-weight:600}
.zg-wallet__unit{color:var(--text-3);font-size:var(--fs-xs)}
.zg-wallet__add{
  width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:var(--text-invert);
  display:grid;place-items:center;font-size:11px;
  transition:background var(--dur) var(--ease);
}
.zg-wallet__add:hover{background:var(--brand-hover);color:var(--text-invert)}

.zg-theme-toggle{position:relative}
.zg-theme-toggle .fa-moon{display:none}
html[data-theme="dark"] .zg-theme-toggle .fa-moon{display:inline}
html[data-theme="dark"] .zg-theme-toggle .fa-sun{display:none}

.zg-content{
  flex:1 1 auto;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:22px 20px 44px;
}

.zg-page-head{
  display:flex;align-items:flex-start;gap:14px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.zg-page-head__title{margin:0;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em}
.zg-page-head__sub{margin:3px 0 0;color:var(--text-2);font-size:var(--fs-sm)}
.zg-page-head__actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

.zg-foot{
  border-top:1px solid var(--border);
  padding:16px 20px;
  color:var(--text-3);
  font-size:var(--fs-sm);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.zg-foot a{color:var(--text-2)}
.zg-foot__links{margin-inline-start:auto;display:flex;gap:16px;flex-wrap:wrap}

.zg-backdrop{
  position:fixed;inset:0;
  background:var(--overlay);
  z-index:1035;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.zg-nav-open .zg-backdrop{opacity:1;visibility:visible}

/* == 05 Components ======================================================== */

/* -- Card ---------------------------------------------------------------- */
.card,.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:none;
  margin-bottom:var(--gap);
  overflow:hidden;
}
.card-header,.panel-heading{
  background:transparent;
  border-bottom:1px solid var(--border-soft);
  padding:14px var(--pad-card);
  display:flex;align-items:center;gap:10px;
  min-height:52px;
}
.card-header h3,.card-header .card-title,.panel-heading h3{
  margin:0;font-size:var(--fs-md);font-weight:600;line-height:1.4;
}
.card-header .card-actions,.card-header .zg-card-actions{margin-inline-start:auto;display:flex;gap:7px;align-items:center}
.card-body,.panel-body{padding:var(--pad-card)}
.card-footer{
  background:var(--surface-2);
  border-top:1px solid var(--border-soft);
  padding:12px var(--pad-card);
}
.card-title{color:var(--text)}
.card.is-flush .card-body{padding:0}

.zg-card-note{
  padding:14px var(--pad-card);
  color:var(--text-2);
  font-size:var(--fs-sm);
  border-top:1px solid var(--border-soft);
}

/* Empty state — an invitation to act, not a shrug. */
.zg-empty{
  padding:46px 24px;
  text-align:center;
  color:var(--text-2);
}
.zg-empty__icon{
  width:56px;height:56px;margin:0 auto 14px;
  border-radius:16px;
  background:var(--surface-3);
  color:var(--text-3);
  display:grid;place-items:center;
  font-size:21px;
}
.zg-empty__title{color:var(--text);font-weight:600;font-size:var(--fs-md);margin-bottom:5px}
.zg-empty__text{font-size:var(--fs-sm);max-width:38ch;margin:0 auto 16px}

/* -- Buttons ------------------------------------------------------------- */
.btn{
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  font-weight:500;
  line-height:1.5;
  padding:7px 15px;
  border-radius:var(--r);
  border:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;
}
.btn:focus,.btn.focus{box-shadow:0 0 0 3px var(--brand-soft)}
.btn-lg{padding:10px 22px;font-size:var(--fs-md);border-radius:var(--r)}
.btn-sm{padding:4px 11px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-block{width:100%}

.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--text-invert)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active{
  background:var(--brand-hover);border-color:var(--brand-hover);color:var(--text-invert)}

.btn-secondary,.btn-default{background:var(--surface-3);border-color:var(--border);color:var(--text)}
.btn-secondary:hover,.btn-default:hover{background:var(--border);border-color:var(--text-3);color:var(--text)}

.btn-outline-primary{background:transparent;border-color:var(--brand-line);color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

.btn-outline-secondary{background:transparent;border-color:var(--border);color:var(--text-2)}
.btn-outline-secondary:hover{background:var(--surface-3);border-color:var(--text-3);color:var(--text)}

.btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-success:hover{filter:brightness(1.08);color:#fff}
.btn-danger{background:var(--dang);border-color:var(--dang);color:#fff}
.btn-danger:hover{filter:brightness(1.08);color:#fff}
.btn-warning{background:var(--warn);border-color:var(--warn);color:#fff}
.btn-warning:hover{filter:brightness(1.08);color:#fff}
.btn-info{background:var(--info);border-color:var(--info);color:#fff}
.btn-info:hover{filter:brightness(1.08);color:#fff}

.btn-link{color:var(--brand);background:transparent;border:0;padding:0}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--text)}

.btn.disabled,.btn:disabled{opacity:.45;cursor:not-allowed}

/* -- Forms --------------------------------------------------------------- */
.form-control,.custom-select,textarea,select,
input[type="text"],input[type="password"],input[type="email"],
input[type="number"],input[type="tel"],input[type="url"],input[type="search"]{
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--r);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  padding:8px 12px;
  height:auto;
  min-height:38px;
  line-height:1.6;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  box-shadow:none;
}
.form-control:focus,.custom-select:focus,textarea:focus,select:focus,
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,
input[type="number"]:focus,input[type="tel"]:focus,input[type="search"]:focus{
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
  outline:none;
  color:var(--text);
}
.form-control::placeholder{color:var(--text-3);opacity:1}
.form-control:disabled,.form-control[readonly]{background:var(--surface-3);color:var(--text-2);cursor:not-allowed}
.form-control.is-invalid,.has-error .form-control{border-color:var(--dang)}
.form-control.is-valid{border-color:var(--ok)}
textarea.form-control{min-height:110px;line-height:1.8}
select.form-control,.custom-select{
  background-image:none;
  padding-inline-end:32px;
  appearance:none;-webkit-appearance:none;
}
.zg-select{position:relative;display:block}
.zg-select::after{
  content:"\f107";font-family:"Font Awesome 5 Free";font-weight:900;
  position:absolute;top:50%;inset-inline-end:12px;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;font-size:12px;
}

label,.control-label{
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-2);
  margin-bottom:6px;
  display:inline-block;
}
.form-group{margin-bottom:16px}
.form-text,.help-block{color:var(--text-3);font-size:var(--fs-xs);margin-top:5px}
.invalid-feedback,.text-danger.small{color:var(--dang)}
fieldset legend{
  font-size:var(--fs-md);font-weight:600;color:var(--text);
  border-bottom:1px solid var(--border);padding-bottom:9px;margin-bottom:16px;
}

.input-group-text{
  background:var(--surface-3);
  border:1px solid var(--border);
  color:var(--text-2);
  font-size:var(--fs-sm);
  border-radius:var(--r);
}

.custom-control-label::before{background:var(--surface-alt);border:1px solid var(--border)}
.custom-control-input:checked~.custom-control-label::before{background:var(--brand);border-color:var(--brand)}
.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 3px var(--brand-soft)}
.custom-control-label{color:var(--text);font-weight:400}

/* Switch */
.zg-switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.zg-switch input{position:absolute;opacity:0;width:0;height:0}
.zg-switch__track{
  width:38px;height:21px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--border);
  position:relative;transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  flex:0 0 38px;
}
.zg-switch__track::after{
  content:"";position:absolute;top:2px;inset-inline-end:2px;
  width:15px;height:15px;border-radius:50%;
  background:var(--text-3);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.zg-switch input:checked+.zg-switch__track{background:var(--brand);border-color:var(--brand)}
.zg-switch input:checked+.zg-switch__track::after{background:#fff;transform:translateX(-17px)}
[dir="ltr"] .zg-switch input:checked+.zg-switch__track::after{transform:translateX(17px)}
.zg-switch input:focus-visible+.zg-switch__track{box-shadow:0 0 0 3px var(--brand-soft)}

/* -- Tables -------------------------------------------------------------- */
.table{
  color:var(--text);
  margin-bottom:0;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
.table thead th{
  background:var(--surface-2);
  border:0;
  border-bottom:1px solid var(--border);
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:600;
  padding:10px var(--pad-card);
  text-align:start;
  white-space:nowrap;
  vertical-align:middle;
}
.table tbody td{
  border:0;
  border-bottom:1px solid var(--border-soft);
  padding:12px var(--pad-card);
  vertical-align:middle;
  font-size:var(--fs-base);
}
.table tbody tr:last-child td{border-bottom:0}
.table-hover tbody tr{transition:background var(--dur) var(--ease)}
.table-hover tbody tr:hover{background:var(--surface-2)}
.table-striped tbody tr:nth-of-type(odd){background:transparent}
.table td a{font-weight:500}
.table .zg-td-actions{text-align:end;white-space:nowrap}
.table-responsive{border:0;-webkit-overflow-scrolling:touch}

.dataTables_wrapper{padding:0}
.dataTables_filter input{
  background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);padding:6px 11px;min-height:34px;
}
.dataTables_length select{
  background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);padding:4px 8px;
}
.dataTables_info,.dataTables_length label,.dataTables_filter label{color:var(--text-3);font-size:var(--fs-sm)}
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child{padding:12px var(--pad-card)}
table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer}

/* -- Badges & status ----------------------------------------------------- */
.badge{
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  font-weight:600;
  padding:4px 9px;
  border-radius:var(--r-pill);
  line-height:1.5;
}
.badge-primary{background:var(--brand-soft);color:var(--brand)}
.badge-success,.label-success{background:var(--ok-soft);color:var(--ok)}
.badge-warning,.label-warning{background:var(--warn-soft);color:var(--warn)}
.badge-danger,.label-danger{background:var(--dang-soft);color:var(--dang)}
.badge-info,.label-info{background:var(--info-soft);color:var(--info)}
.badge-secondary,.badge-default{background:var(--surface-3);color:var(--text-2)}

.zg-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);font-weight:500;
  padding:3px 10px 3px 8px;
  border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text-2);
  white-space:nowrap;
}
.zg-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.zg-status--active,.zg-status--online{background:var(--ok-soft);color:var(--ok)}
.zg-status--pending{background:var(--warn-soft);color:var(--warn)}
.zg-status--suspended,.zg-status--offline{background:var(--dang-soft);color:var(--dang)}
.zg-status--terminated,.zg-status--cancelled{background:var(--surface-3);color:var(--text-3)}
.zg-status--info{background:var(--info-soft);color:var(--info)}

/* -- Alerts -------------------------------------------------------------- */
.alert{
  border:1px solid transparent;
  border-radius:var(--r);
  padding:13px 16px;
  font-size:var(--fs-base);
  margin-bottom:var(--gap);
  display:flex;gap:11px;align-items:flex-start;
}
.alert .alert-icon{flex:0 0 auto;margin-top:2px;font-size:14px}
.alert-success{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 26%,transparent);color:var(--ok)}
.alert-warning{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 26%,transparent);color:var(--warn)}
.alert-danger{background:var(--dang-soft);border-color:color-mix(in srgb,var(--dang) 26%,transparent);color:var(--dang)}
.alert-info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 26%,transparent);color:var(--info)}
.alert a{color:inherit;text-decoration:underline;font-weight:600}
.alert .close{color:inherit;opacity:.55;text-shadow:none}
.alert .close:hover{opacity:1}

/* -- Tabs & pills -------------------------------------------------------- */
.nav-tabs{
  border-bottom:1px solid var(--border);
  gap:2px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tabs .nav-link{
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:var(--text-2);
  font-size:var(--fs-base);
  font-weight:500;
  padding:10px 15px;
  white-space:nowrap;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-tabs .nav-link:hover{color:var(--text);border-bottom-color:var(--border)}
.nav-tabs .nav-link.active{
  background:transparent;color:var(--brand);border-bottom-color:var(--brand);
}
.tab-content{padding-top:var(--gap)}

.nav-pills .nav-link{
  border-radius:var(--r);color:var(--text-2);font-size:var(--fs-base);
  font-weight:500;padding:7px 14px;
}
.nav-pills .nav-link.active{background:var(--brand-soft);color:var(--brand)}

/* -- List group ---------------------------------------------------------- */
.list-group{border-radius:0}
.list-group-item{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border-soft);
  color:var(--text);
  padding:12px var(--pad-card);
  font-size:var(--fs-base);
}
.list-group-item:last-child{border-bottom:0}
.list-group-item-action:hover{background:var(--surface-2);color:var(--text)}
.list-group-item.active{background:var(--brand-soft);color:var(--text);border-color:transparent}
.list-group-flush .list-group-item{border-radius:0}

/* -- Dropdown ------------------------------------------------------------ */
.dropdown-menu{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:6px;
  font-size:var(--fs-base);
  min-width:190px;
  color:var(--text);
}
.dropdown-item{
  color:var(--text-2);
  border-radius:var(--r-sm);
  padding:8px 11px;
  display:flex;align-items:center;gap:9px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-3);color:var(--text)}
.dropdown-item.active{background:var(--brand-soft);color:var(--brand)}
.dropdown-item i{width:15px;text-align:center;color:var(--text-3);flex:0 0 15px}
.dropdown-item:hover i{color:inherit}
.dropdown-divider{border-top:1px solid var(--border-soft);margin:6px 0}
.dropdown-header{color:var(--text-3);font-size:var(--fs-xs);font-weight:600;padding:8px 11px 4px}

/* -- Modal --------------------------------------------------------------- */
.modal-content{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  color:var(--text);
}
.modal-header{border-bottom:1px solid var(--border-soft);padding:16px 20px}
.modal-title{font-size:var(--fs-md);font-weight:600}
.modal-body{padding:20px}
.modal-footer{border-top:1px solid var(--border-soft);padding:14px 20px;gap:8px}
.modal-backdrop.show{background:var(--overlay);opacity:1}
.close{color:var(--text-2);text-shadow:none;opacity:.75;font-weight:400}
.close:hover{color:var(--text);opacity:1}

/* -- Pagination ---------------------------------------------------------- */
.pagination{gap:4px;margin:0}
.page-link{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--r-sm)!important;
  color:var(--text-2);
  font-size:var(--fs-sm);
  padding:6px 11px;
  min-width:33px;text-align:center;
}
.page-link:hover{background:var(--surface-3);border-color:var(--text-3);color:var(--text)}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:var(--text-invert)}
.page-item.disabled .page-link{background:transparent;color:var(--text-3);opacity:.5}

/* -- Progress ------------------------------------------------------------ */
.progress{
  height:6px;
  background:var(--surface-3);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.progress-bar{background:var(--brand);border-radius:var(--r-pill);transition:width .5s var(--ease)}
.progress-bar.bg-success{background:var(--ok)!important}
.progress-bar.bg-warning{background:var(--warn)!important}
.progress-bar.bg-danger{background:var(--dang)!important}

/* -- Misc ---------------------------------------------------------------- */
.breadcrumb{background:transparent;padding:0;margin-bottom:14px;font-size:var(--fs-sm)}
.breadcrumb-item,.breadcrumb-item a{color:var(--text-3)}
.breadcrumb-item.active{color:var(--text-2)}
.breadcrumb-item+.breadcrumb-item::before{color:var(--text-3)}

.tooltip-inner{
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--border);
  font-family:var(--font-ui);font-size:var(--fs-xs);
  border-radius:var(--r-sm);padding:5px 9px;
}
.tooltip .arrow::before{border-top-color:var(--border)}

.popover{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);
  font-family:var(--font-ui);color:var(--text);
}
.popover-header{background:var(--surface-2);border-bottom:1px solid var(--border-soft);color:var(--text);font-size:var(--fs-sm)}
.popover-body{color:var(--text-2);font-size:var(--fs-sm)}

.zg-copy{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-tech);
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:3px 9px;
  font-size:var(--fs-sm);
  cursor:pointer;
  color:var(--text);
  transition:border-color var(--dur) var(--ease);
}
.zg-copy:hover{border-color:var(--brand-line)}
.zg-copy i{color:var(--text-3);font-size:11px}
.zg-copy.is-copied{border-color:var(--ok);color:var(--ok)}
.zg-copy.is-copied i{color:var(--ok)}

.zg-divider{height:1px;background:var(--border);margin:20px 0}
.zg-vr{width:1px;height:22px;background:var(--border);flex:0 0 1px}

/* == 06 Dashboard ========================================================= */

.zg-grid{display:grid;gap:var(--gap)}
.zg-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.zg-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.zg-grid--sidebar{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}

/* Stat tiles. Each product family keeps its own hue from the taxonomy above,
   so the eye learns "teal = VPS" once and reuses it on every screen. */
.zg-stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:15px 16px 13px;
  display:flex;flex-direction:column;gap:11px;
  position:relative;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.zg-stat:hover{border-color:color-mix(in srgb,var(--cat,var(--brand)) 42%,var(--border))}
.zg-stat__top{display:flex;align-items:center;gap:10px}
.zg-stat__icon{
  width:32px;height:32px;flex:0 0 32px;
  border-radius:9px;
  display:grid;place-items:center;
  font-size:14px;
  color:var(--cat,var(--brand));
  background:color-mix(in srgb,var(--cat,var(--brand)) 14%,transparent);
}
.zg-stat__label{font-size:var(--fs-sm);color:var(--text-2);font-weight:500;line-height:1.4}
.zg-stat__value{
  font-size:var(--fs-2xl);font-weight:700;line-height:1.1;
  color:var(--text);margin-inline-start:auto;
  font-variant-numeric:tabular-nums;
}
.zg-stat__meter{height:3px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
.zg-stat__meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--cat,var(--brand))}
.zg-stat__foot{
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--text-3);
}
.zg-stat__foot a{color:var(--text-3)}
.zg-stat__foot a:hover{color:var(--cat,var(--brand))}

/* Wallet panel — the one place we let a surface carry weight. */
.zg-wallet-card{
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb,var(--brand) 16%,transparent) 0%, transparent 58%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
}
.zg-wallet-card__label{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:6px}
.zg-wallet-card__value{
  font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.zg-wallet-card__unit{font-size:var(--fs-md);font-weight:500;color:var(--text-2);margin-inline-start:5px}
.zg-wallet-card__actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}

/* Service rows */
.zg-svc{
  display:flex;align-items:center;gap:13px;
  padding:13px var(--pad-card);
  border-bottom:1px solid var(--border-soft);
  transition:background var(--dur) var(--ease);
  color:var(--text);
}
.zg-svc:last-child{border-bottom:0}
.zg-svc:hover{background:var(--surface-2);color:var(--text)}
.zg-svc__icon{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:10px;
  display:grid;place-items:center;
  font-size:15px;
  color:var(--cat,var(--text-2));
  background:color-mix(in srgb,var(--cat,var(--text-3)) 13%,transparent);
}
.zg-svc__body{min-width:0;flex:1 1 auto}
.zg-svc__name{font-weight:600;font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zg-svc__meta{
  font-size:var(--fs-xs);color:var(--text-3);
  display:flex;gap:12px;flex-wrap:wrap;margin-top:2px;
}
.zg-svc__meta .tech{color:var(--text-2)}
.zg-svc__side{margin-inline-start:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.zg-svc__due{font-size:var(--fs-xs);color:var(--text-3);text-align:end;line-height:1.5}
.zg-svc__due b{display:block;color:var(--text-2);font-weight:500}

/* Resource meters on a service card */
.zg-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px}
.zg-meter__head{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-3);margin-bottom:6px}
.zg-meter__head b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.zg-meter__bar{height:5px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
.zg-meter__bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--cat,var(--brand));transition:width .6s var(--ease)}
.zg-meter--warn .zg-meter__bar i{background:var(--warn)}
.zg-meter--crit .zg-meter__bar i{background:var(--dang)}

/* Announcement / notice strip */
.zg-notice{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  margin-bottom:var(--gap);
  font-size:var(--fs-base);
}
.zg-notice__icon{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:grid;place-items:center;font-size:13px;
  background:var(--info-soft);color:var(--info);
}
.zg-notice--warn .zg-notice__icon{background:var(--warn-soft);color:var(--warn)}
.zg-notice--promo .zg-notice__icon{background:var(--brand-soft);color:var(--brand)}
.zg-notice__body{min-width:0;flex:1 1 auto;color:var(--text-2)}
.zg-notice__body b{color:var(--text);font-weight:600}
.zg-notice .close{margin-inline-start:auto;flex:0 0 auto}

/* Activity feed */
.zg-feed{list-style:none;margin:0;padding:0}
.zg-feed li{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px var(--pad-card);
  border-bottom:1px solid var(--border-soft);
  font-size:var(--fs-sm);
}
.zg-feed li:last-child{border-bottom:0}
.zg-feed__dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:8px;
  background:var(--text-3);
}
.zg-feed__dot--ok{background:var(--ok)}
.zg-feed__dot--warn{background:var(--warn)}
.zg-feed__dot--dang{background:var(--dang)}
.zg-feed__text{flex:1 1 auto;min-width:0;color:var(--text-2);line-height:1.6}
.zg-feed__text b{color:var(--text);font-weight:500}
.zg-feed__time{flex:0 0 auto;color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap}

/* Quick actions */
.zg-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;padding:var(--pad-card)}
.zg-quick a{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-2);
  color:var(--text);
  font-size:var(--fs-sm);font-weight:500;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.zg-quick a:hover{border-color:var(--brand-line);background:var(--surface-3);color:var(--text)}
.zg-quick i{color:var(--brand);font-size:14px;width:17px;text-align:center}

/* == 07 Pages ============================================================= */

/* Login / register — the only full-bleed screens. */
.zg-auth{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 18px;
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in srgb,var(--brand) 9%,transparent) 0%, transparent 60%),
    var(--bg);
}
.zg-auth__card{
  width:100%;max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 28px;
  box-shadow:var(--shadow);
}
.zg-auth__brand{text-align:center;margin-bottom:24px}
.zg-auth__brand img{max-height:40px;max-width:180px}
.zg-auth__title{font-size:var(--fs-lg);font-weight:700;text-align:center;margin-bottom:4px}
.zg-auth__sub{font-size:var(--fs-sm);color:var(--text-2);text-align:center;margin-bottom:24px}
.zg-auth__foot{text-align:center;margin-top:20px;font-size:var(--fs-sm);color:var(--text-2)}

/* Invoice view */
.zg-invoice-total{
  display:flex;align-items:baseline;gap:8px;
  font-size:var(--fs-xl);font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Ticket thread */
.zg-msg{display:flex;gap:13px;padding:16px var(--pad-card);border-bottom:1px solid var(--border-soft)}
.zg-msg:last-child{border-bottom:0}
.zg-msg--staff{background:var(--surface-2)}
.zg-msg__avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:var(--surface-3);border:1px solid var(--border);
  display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm);color:var(--text-2);
}
.zg-msg--staff .zg-msg__avatar{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.zg-msg__body{min-width:0;flex:1 1 auto}
.zg-msg__head{display:flex;align-items:baseline;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.zg-msg__author{font-weight:600;font-size:var(--fs-base)}
.zg-msg__role{font-size:var(--fs-xs);color:var(--brand)}
.zg-msg__time{font-size:var(--fs-xs);color:var(--text-3);margin-inline-start:auto}
.zg-msg__text{color:var(--text-2);line-height:1.85;white-space:pre-wrap;word-break:break-word}
.zg-msg__text img{max-width:100%;height:auto;border-radius:var(--r-sm)}

/* Product / order summary */
.zg-summary-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;font-size:var(--fs-base);color:var(--text-2);
}
.zg-summary-row b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.zg-summary-row--total{
  border-top:1px solid var(--border);margin-top:6px;padding-top:14px;
  font-size:var(--fs-md);color:var(--text);font-weight:600;
}

/* Domain search */
.zg-domain-search{display:flex;gap:8px;flex-wrap:wrap}
.zg-domain-search .form-control{flex:1 1 220px;min-height:44px;font-size:var(--fs-md)}
.zg-domain-search .btn{min-height:44px;padding-inline:22px}

/* Virtualizor / server console embeds keep their own chrome but sit in ours */
.zg-embed{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface-alt)}
.zg-embed iframe{display:block;width:100%;border:0}

/* Secondary (contextual) sidebar cards from WHMCS core */
.card-sidebar .card-header{padding:12px 15px;min-height:auto}
.card-sidebar .card-title{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.card-sidebar .list-group-item{padding:9px 15px;font-size:var(--fs-sm);color:var(--text-2)}
.card-sidebar .list-group-item:hover{color:var(--text)}
.card-sidebar .list-group-item.active{background:var(--brand-soft);color:var(--brand);font-weight:500}
.card-minimise{cursor:pointer;color:var(--text-3);font-size:11px;transition:transform var(--dur) var(--ease)}
.card-sidebar.card-collapsed .collapsable-card-body{display:none}
.card-sidebar.card-collapsed .card-minimise{transform:rotate(180deg)}
.sidebar-menu-item-wrapper{display:flex;align-items:center;gap:9px}
.sidebar-menu-item-icon-wrapper{flex:0 0 16px;text-align:center;color:var(--text-3)}
.sidebar-menu-item-label{flex:1 1 auto;min-width:0}
.sidebar-menu-item-badge{flex:0 0 auto}

/* Loading bar for section navigation */
.zg-progress-top{
  position:fixed;top:0;inset-inline-end:0;
  height:2px;width:0;
  background:var(--brand);
  z-index:2000;
  opacity:0;
  transition:width .25s var(--ease), opacity .25s var(--ease);
}
.zg-progress-top.is-on{opacity:1}

.zg-skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;
  animation:zg-shimmer 1.3s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes zg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* == 08 Responsive ======================================================== */

@media (max-width:1200px){
  .zg-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zg-grid--sidebar{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:992px){
  :root{--sidebar-w:270px}
  .zg-nav{transform:translateX(100%);box-shadow:none}
  [dir="ltr"] .zg-nav{transform:translateX(-100%)}
  .zg-nav-open .zg-nav{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .zg-main{margin-right:0!important;margin-left:0!important}
  .zg-collapsed .zg-nav{width:var(--sidebar-w)}
  .zg-collapsed .zg-nav__label,
  .zg-collapsed .zg-nav__caret,
  .zg-collapsed .zg-nav__badge,
  .zg-collapsed .zg-nav__group-label,
  .zg-collapsed .zg-nav__brand-text,
  .zg-collapsed .zg-nav__user-meta{display:revert}
  .zg-collapsed .zg-nav__item{justify-content:flex-start;padding:8px 10px}
  .zg-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  :root{--pad-card:14px;--gap:12px}
  .zg-content{padding:16px 13px 36px}
  .zg-grid--2,.zg-grid--3,.zg-grid--4{grid-template-columns:minmax(0,1fr)}
  .zg-top{padding:0 12px;gap:5px}
  .zg-crumb{display:none}
  .zg-wallet{padding:0 4px 0 9px;font-size:var(--fs-xs)}
  .zg-page-head__title{font-size:var(--fs-lg)}
  .zg-stat__value{font-size:var(--fs-xl)}
  .zg-wallet-card__value{font-size:26px}
  .table thead{display:none}
  .table.zg-stack tbody td{
    display:flex;justify-content:space-between;gap:12px;
    padding:9px var(--pad-card);border-bottom:1px solid var(--border-soft);
  }
  .table.zg-stack tbody td::before{
    content:attr(data-label);
    color:var(--text-3);font-size:var(--fs-xs);flex:0 0 auto;
  }
  .table.zg-stack tbody tr{
    display:block;border:1px solid var(--border);
    border-radius:var(--r);margin-bottom:9px;overflow:hidden;
  }
  .zg-svc{flex-wrap:wrap}
  .zg-svc__side{width:100%;margin-inline-start:0;padding-inline-start:49px;justify-content:space-between}
  .zg-foot{flex-direction:column;align-items:flex-start;gap:8px}
  .zg-foot__links{margin-inline-start:0}
}

@media print{
  .zg-nav,.zg-top,.zg-foot,.btn,.zg-backdrop{display:none!important}
  .zg-main{margin:0!important}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc;box-shadow:none}
}

/* == 09 Service taxonomy classes ==========================================
   Applied to nav items, stat tiles and service rows. --cat drives icon
   colour, chip tint and meter fill, so one class keeps a family coherent.
   ======================================================================== */
.zg-cat-brand{--cat:var(--brand)}
.zg-cat-vps{--cat:var(--cat-vps)}
.zg-cat-dedi{--cat:var(--cat-dedi)}
.zg-cat-cdn{--cat:var(--cat-cdn)}
.zg-cat-hosting{--cat:var(--cat-hosting)}
.zg-cat-domain{--cat:var(--cat-domain)}
.zg-cat-storage{--cat:var(--cat-storage)}
.zg-cat-network{--cat:var(--cat-network)}
.zg-cat-other{--cat:var(--cat-other)}

/* color-mix() needs Chrome 111 / Firefox 113 / Safari 16.2. Older browsers
   get a flat tint from these fallbacks, declared first so modern engines
   still take the color-mix rule above. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .zg-nav__icon,.zg-stat__icon,.zg-svc__icon{background:rgba(128,140,155,.13)}
  .zg-nav__item:hover .zg-nav__icon,
  .zg-nav__item.is-active .zg-nav__icon{background:var(--brand-soft)}
  .zg-stat:hover{border-color:var(--brand-line)}
  .zg-wallet-card{background:var(--surface)}
  .alert-success{border-color:var(--ok)}
  .alert-warning{border-color:var(--warn)}
  .alert-danger{border-color:var(--dang)}
  .alert-info{border-color:var(--info)}
  .zg-top{background:var(--bg)}
}

/* == 10 WHMCS core markup compatibility ===================================
   Every list page in WHMCS (services, invoices, domains, tickets, quotes)
   emits the same markup: .table-container > table.table-list, with status
   pills as .label.status-<state>. Restyling that markup here is what makes
   the theme cover all ~230 core templates without editing each one.
   ======================================================================== */

.table-container{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:var(--gap);
}
.table-container .table-list{margin:0}
.table-container .table-list tbody tr{cursor:pointer}
#tableLoading{padding:36px;color:var(--text-3)}
.listtable{padding:12px var(--pad-card);display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border-soft)}
.listtable .dataTables_filter{margin-inline-start:auto}
.listtable .dataTables_filter input{min-width:210px}

/* WHMCS status pills */
.label,.status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:600;
  padding:3px 10px 3px 8px;
  border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text-2);
  white-space:nowrap;
}
.label.status::before,span.status::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px;
}
.status-active,.status-paid,.status-open,.status-completed,.status-valid{background:var(--ok-soft);color:var(--ok)}
.status-pending,.status-unpaid,.status-draft,.status-in-progress,.status-onhold,.status-on-hold,
.status-customer-reply,.status-answered{background:var(--warn-soft);color:var(--warn)}
.status-suspended,.status-overdue,.status-fraud,.status-expired,.status-collections{background:var(--dang-soft);color:var(--dang)}
.status-terminated,.status-cancelled,.status-closed,.status-refunded,.status-lost,
.status-dead,.status-inactive{background:var(--surface-3);color:var(--text-3)}

/* Filter rails used above lists */
.view-filter-btns{display:flex;flex-wrap:wrap;gap:6px;padding:12px var(--pad-card) 0}
.view-filter-btns .list-group-item{
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:5px 13px;font-size:var(--fs-sm);color:var(--text-2);
}
.view-filter-btns .list-group-item.active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.view-filter-btns .list-group-item i{display:none}

/* Legacy tiles (still emitted by a few pages and some modules) */
.tiles .tile{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;text-align:center;color:var(--text);
  margin:0 6px 12px;
}
.tiles .tile .stat{font-size:var(--fs-2xl);font-weight:700;line-height:1.2}
.tiles .tile .title{font-size:var(--fs-sm);color:var(--text-2)}
.tiles .tile .highlight{display:none}
.tiles .tile i{color:var(--brand);font-size:17px;margin-bottom:6px}

/* Module output on product details (Virtualizor, cPanel, DirectAdmin, ...)
   keeps its own internals; we only give it our chrome so it stops looking
   pasted in. */
.product-details-actions,.module-client-area,#moduleClientArea{margin-top:var(--gap)}
#moduleClientArea .btn-group{flex-wrap:wrap;gap:6px}
#moduleClientArea table{width:100%}
#moduleClientArea .well,.well{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;box-shadow:none;color:var(--text);
}
.panel-default>.panel-heading{background:var(--surface-2);color:var(--text);border-color:var(--border)}

/* Order form / cart */
.cart-body,.order-summary,#order-standard_cart{color:var(--text)}
#order-standard_cart .product,#order-standard_cart .cart-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
}
.summary-container,.cart-sidebar{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--pad-card);
}

/* Knowledge base / announcements */
.kb-article,.announcement-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--pad-card);margin-bottom:var(--gap);
}

/* Markdown editor used by tickets */
.CodeMirror,.editor-toolbar{
  background:var(--surface-alt)!important;border-color:var(--border)!important;color:var(--text)!important;
}
.editor-toolbar a{color:var(--text-2)!important}
.editor-toolbar a.active,.editor-toolbar a:hover{background:var(--surface-3)!important;border-color:var(--border)!important}
.CodeMirror-cursor{border-color:var(--text)}

/* Utility bridges from the base theme that pages still reference */
.w-hidden{display:none!important}
.primary-bg-color{background:var(--bg)}
.bg-color-blue,.bg-color-green,.bg-color-red,.bg-color-gold{background:transparent}
.clearfix::after{content:"";display:block;clear:both}

/* == 11 Base-theme overrides ==============================================
   theme.min.css (twenty-one + Bootstrap 4.5.3) loads before this file. Most
   of its rules lose on load order, but a few are specific enough to win.
   Those are neutralised here. Add to this list, don't edit theme.min.css.
   ======================================================================== */

.modal-localisation .modal-content{background:var(--surface);color:var(--text)}
.modal-localisation .item-selector .item,
.modal-localisation .item-selector .item.active{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--text-2);
  display:block;
  padding:8px 11px;
  margin-bottom:7px;
  font-size:var(--fs-sm);
}
.modal-localisation .item-selector .item:hover{background:var(--surface-3);color:var(--text)}
.modal-localisation .item-selector .item.active{
  background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand);font-weight:600;
}
.modal-localisation .close{color:var(--text-2)}

#registration .field,#registration .form-control{
  background:var(--surface-alt);border:1px solid var(--border);color:var(--text);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active{background:transparent;color:var(--brand);border-color:transparent transparent var(--brand)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background:var(--brand-soft);color:var(--brand)}

/* twenty-one's marketing chrome is not used by this theme's markup, but a
   few core pages still emit it. Keep it neutral rather than half-styled. */
header.header,.footer,#header,#footer{background:transparent;border:0}
.card-accent-blue,.card-accent-green,.card-accent-red,.card-accent-gold,.card-accent-orange{border-color:var(--border)}

/* Bootstrap's own light defaults that survive on elements we don't restyle */
.bg-white,.bg-light{background:var(--surface)!important}
.text-dark{color:var(--text)!important}
.border{border-color:var(--border)!important}
.table-bordered,.table-bordered td,.table-bordered th{border-color:var(--border)}

/* == 12 List pages ========================================================
   Toolbar + filter chips + service cards. Used by services, invoices,
   domains and tickets so the four list screens share one vocabulary.
   ======================================================================== */

.zg-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--gap);
}
.zg-filters{display:flex;gap:6px;flex-wrap:wrap}
.zg-chip{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  color:var(--text-2);
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
  font-weight:500;
  padding:5px 14px;
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.zg-chip:hover{background:var(--surface-3);color:var(--text)}
.zg-chip.is-on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}

.zg-toolbar__search{position:relative;flex:1 1 240px;min-width:190px}
.zg-toolbar__search i{
  position:absolute;top:50%;inset-inline-start:12px;transform:translateY(-50%);
  color:var(--text-3);font-size:12px;pointer-events:none;
}
.zg-toolbar__search .form-control{padding-inline-start:34px}

.zg-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:var(--gap);
}

.zg-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.zg-card:hover{border-color:color-mix(in srgb,var(--cat,var(--brand)) 45%,var(--border))}

.zg-card__head{
  display:flex;align-items:flex-start;gap:11px;
  padding:15px var(--pad-card) 13px;
}
.zg-card__icon{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:10px;
  display:grid;place-items:center;
  font-size:15px;
  color:var(--cat,var(--brand));
  background:color-mix(in srgb,var(--cat,var(--brand)) 14%,transparent);
}
.zg-card__title{min-width:0;flex:1 1 auto;line-height:1.5}
.zg-card__title a{
  display:block;color:var(--text);font-weight:600;font-size:var(--fs-base);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.zg-card__title a:hover{color:var(--cat,var(--brand))}
.zg-card__sub{
  display:block;color:var(--text-3);font-size:var(--fs-xs);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.zg-card__facts{
  margin:0;
  padding:0 var(--pad-card) 4px;
  display:flex;flex-direction:column;gap:1px;
  flex:1 1 auto;
}
.zg-card__facts>div{
  display:flex;align-items:center;gap:12px;
  padding:7px 0;
  border-top:1px solid var(--border-soft);
}
.zg-card__facts dt{
  margin:0;font-weight:400;color:var(--text-3);font-size:var(--fs-xs);
  flex:0 0 auto;
}
.zg-card__facts dd{
  margin:0;margin-inline-start:auto;
  color:var(--text);font-size:var(--fs-sm);font-weight:500;
  text-align:end;min-width:0;
}

.zg-card__foot{
  display:flex;gap:7px;
  padding:12px var(--pad-card);
  border-top:1px solid var(--border-soft);
  background:var(--surface-2);
}
.zg-card__foot .btn:first-child{flex:1 1 auto}

@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .zg-card__icon{background:var(--brand-soft)}
  .zg-card:hover{border-color:var(--brand-line)}
}

/* == 13 Service detail ==================================================== */

.zg-detail-head{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px var(--pad-card);
  margin-bottom:var(--gap);
}
.zg-detail-head__icon{
  width:46px;height:46px;flex:0 0 46px;
  border-radius:13px;display:grid;place-items:center;font-size:19px;
  color:var(--cat,var(--brand));
  background:color-mix(in srgb,var(--cat,var(--brand)) 14%,transparent);
}
.zg-detail-head__body{min-width:0;flex:1 1 240px}
.zg-detail-head__name{font-size:var(--fs-lg);font-weight:700;margin:0 0 3px;line-height:1.4}
.zg-detail-head__meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-3);font-size:var(--fs-sm)}
.zg-detail-head__actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.zg-kv{margin:0}
.zg-kv>div{
  display:flex;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--border-soft);
}
.zg-kv>div:last-child{border-bottom:0}
.zg-kv dt{margin:0;flex:0 0 40%;color:var(--text-3);font-size:var(--fs-sm);font-weight:400}
.zg-kv dd{margin:0;flex:1 1 auto;color:var(--text);font-size:var(--fs-base);word-break:break-word}