/* ============================================================
   LUMVARA — client-area skin for WHMCS
   Theme:      Lumvara (forked from Hostinza)
   Developer:  Tivro.Net
   File:       templates/lumvara/css/lumvara.css
   Loaded via: includes/head.tpl (after whmcs.css, so it wins)

   This is an OVERRIDE LAYER. It re-skins WHMCS's generated
   markup (DataTables, .status labels, .btn-*, panels, forms)
   using the Lumvara token system. Editing inner .tpl markup is
   NOT required for the restyle — every client-area page inherits
   these rules through the shared chrome and WHMCS table classes.
   ============================================================ */

/* ============================================================
   0. LUMVARA DESIGN TOKENS  (primitives — sampled from Figma)
   Font: . Full colour ramps 25→950.
   These primitives feed the semantic --lv-* tokens below, so
   every component in this stylesheet inherits the palette.
   ============================================================ */

:root{
  /* ---- Base ---- */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Gray ---- */
  --gray-25: #FCFCFD;
  --gray-50: #F3F5F7;
  --gray-100: #EDF1F5;
  --gray-200: #E3E8EF;
  --gray-300: #CDD5DF;
  --gray-400: #9AA4B3;
  --gray-500: #697586;
  --gray-600: #4B5565;
  --gray-700: #333A47;
  --gray-800: #212630;
  --gray-900: #171B23;
  --gray-950: #0C0B10;

  /* ---- Brand (Lumen family) ---- */
  --brand-25: #FFF8EC;
  --brand-50: #FEEACB;
  --brand-100: #FEDEAD;
  --brand-200: #FED18D;
  --brand-300: #FEC877;
  --brand-400: #FEC065;
  --brand-500: #FEB54A;
  --brand-600: #FEAD36;
  --brand-700: #E2921C;
  --brand-800: #C1790F;
  --brand-900: #9F6206;
  --brand-950: #704300;

  /* ---- Error ---- */
  --error-25: #FFFBFA;
  --error-50: #FEF2F2;
  --error-100: #FEE1E1;
  --error-200: #FEC8C8;
  --error-300: #FEA2A2;
  --error-400: #FC5D5D;
  --error-500: #F43F3F;
  --error-600: #E22020;
  --error-700: #BE1717;
  --error-800: #A50F10;
  --error-900: #821A1A;
  --error-950: #470808;

  /* ---- Warning ---- */
  --warning-25: #FFFCF5;
  --warning-50: #FFF9ED;
  --warning-100: #FFF1D4;
  --warning-200: #FEDFA9;
  --warning-300: #FEC56E;
  --warning-400: #FEA439;
  --warning-500: #FC8712;
  --warning-600: #ED6B08;
  --warning-700: #C55108;
  --warning-800: #9C4010;
  --warning-900: #712E0B;
  --warning-950: #441A06;

  /* ---- Success ---- */
  --success-25: #F6FEF9;
  --success-50: #F1FCF6;
  --success-100: #E0F8E7;
  --success-200: #C3F0D0;
  --success-300: #92E3AC;
  --success-400: #57CC7D;
  --success-500: #35B25E;
  --success-600: #26934A;
  --success-700: #21743D;
  --success-800: #1F5C34;
  --success-900: #1B4C2C;
  --success-950: #0A2916;

  /* ---- Secondary · Blue-gray ---- */
  --blue-gray-25: #FCFCFD;
  --blue-gray-50: #F3F4F7;
  --blue-gray-100: #EAECF5;
  --blue-gray-200: #D5D9EB;
  --blue-gray-300: #B3B8DB;
  --blue-gray-400: #717BBC;
  --blue-gray-500: #4E5BA6;
  --blue-gray-600: #3E4784;
  --blue-gray-700: #363F72;
  --blue-gray-800: #293056;
  --blue-gray-900: #111526;
  --blue-gray-950: #0D0F1C;

  /* ---- Secondary · Violet ---- */
  --violet-25: #FBFAFF;
  --violet-50: #F5F3FF;
  --violet-100: #ECE9FE;
  --violet-200: #DDD6FF;
  --violet-300: #C3B5FD;
  --violet-400: #A48AFB;
  --violet-500: #875BF7;
  --violet-600: #7839EE;
  --violet-700: #6927DA;
  --violet-800: #5720B7;
  --violet-900: #491C96;
  --violet-950: #2E125E;

  /* ---- Secondary · Pink ---- */
  --pink-25: #FFF6FB;
  --pink-50: #FDF2FB;
  --pink-100: #FBE7F6;
  --pink-200: #FCCEEE;
  --pink-300: #FAA7E0;
  --pink-400: #F670C7;
  --pink-500: #EE45BC;
  --pink-600: #DD2690;
  --pink-700: #C21574;
  --pink-800: #9E165E;
  --pink-900: #851551;
  --pink-950: #4E0D30;

  /* ---- Secondary · Blue ---- */
  --blue-25: #F5FAFF;
  --blue-50: #EFF8FF;
  --blue-100: #D1E9FF;
  --blue-200: #B2DDFF;
  --blue-300: #84CAFF;
  --blue-400: #53B1FD;
  --blue-500: #2E90FA;
  --blue-600: #1570EF;
  --blue-700: #175CD3;
  --blue-800: #1849A9;
  --blue-900: #194185;
  --blue-950: #102A56;

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(45deg, #FEB140 0%, #FEBC5A 100%);
  --gradient-brand-soft: linear-gradient(45deg, #FEC064 0%, #FEB64B 100%);
  --gradient-halo: linear-gradient(140deg, #B65CFF 0%, #FF6B5C 52%, #FFC76B 100%);

  /* ---- Type scale (size / line-height) ---- */
  --text-display-2xl: 4.5rem;   --lh-display-2xl: 5.625rem;
  --text-display-xl: 3.75rem;   --lh-display-xl: 4.5rem;
  --text-display-lg: 3rem;      --lh-display-lg: 3.75rem;
  --text-display-md: 2.25rem;   --lh-display-md: 2.75rem;
  --text-display-sm: 1.875rem;  --lh-display-sm: 2.375rem;
  --text-display-xs: 1.5rem;    --lh-display-xs: 2rem;
  --text-xl: 1.125rem;          --lh-xl: 1.7rem;
  --text-lg: 0.9375rem;         --lh-lg: 1.5rem;
  --text-md: 0.8125rem;         --lh-md: 1.35rem;
  --text-sm: 0.75rem;           --lh-sm: 1.1rem;
  --text-xs: 0.6875rem;         --lh-xs: 1.05rem;
  --tracking-display: -0.02em;

  --font-display: 'Share Tech', 'Ubuntu', system-ui, sans-serif;
  --font-heading: 'Share Tech', 'Ubuntu', system-ui, sans-serif;
  --font-ui: 'Ubuntu', system-ui, -apple-system, sans-serif;

  /* ============================================================
     SEMANTIC TOKENS  (Lumvara names → new primitives)
     Existing components reference these, so remapping here
     repalettes the whole theme.
     ============================================================ */
  --lv-void: var(--gray-950);        /* #0B0A0F  deepest backdrop */
  --lv-ink: var(--gray-900);         /* #12151C  panels / chrome  */
  --lv-elevated: var(--gray-800);    /* #1A1E27  cards            */
  --lv-focusbed: var(--gray-700);    /* #2D323E  hover            */

  --lv-lumen: var(--brand-500);      /* #FEB54A  brand / CTA      */
  --lv-lumen-hover: var(--brand-400);
  --lv-coral: #FF6B5C;
  --lv-orchid: #B65CFF;
  --lv-pulse: #2FD8C6;

  --lv-success: var(--success-400);
  --lv-warning: var(--warning-400);
  --lv-danger:  var(--error-400);
  --lv-info:    var(--blue-400);

  --lv-text: var(--gray-25);         /* near-white text */
  --lv-muted: var(--gray-300);       /* secondary text  */
  --lv-dim: var(--gray-500);         /* tertiary text   */
  --lv-line: rgba(255,255,255,.08);  /* hairline        */

  --lv-ease: cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   0.5 BASE RESET — neutralise the parent Hostinza marketing sizes
   (Hostinza sets body 18px, p 22px, h2 72px, h3 64px … which
    made the client area feel oversized. Reset to Lumvara scale.)
   ============================================================ */
body.primary-bg-color{ font-size:.9375rem;line-height:1.5; }
body.primary-bg-color p{ font-size:var(--text-md);line-height:1.6;margin:0 0 1rem; }
body.primary-bg-color p:last-child{ margin-bottom:0; }

/* headings back to a sane scale inside the client-area shell */
.lv-main h1,.main-page-wrapper h1{ font-family:var(--font-display);font-size:1.625rem;line-height:1.15;font-weight:400;letter-spacing:0; }
.lv-main h2,.main-page-wrapper h2{ font-family:var(--font-display);font-size:1.375rem;line-height:1.2;font-weight:400;letter-spacing:0; }
.lv-main h3,.main-page-wrapper h3{ font-family:var(--font-heading);font-size:1.125rem;line-height:1.3;font-weight:500;letter-spacing:0; }
.lv-main h4,.main-page-wrapper h4{ font-family:var(--font-heading);font-size:1rem;line-height:1.35;font-weight:500;letter-spacing:0; }
.lv-main h5,.main-page-wrapper h5{ font-family:var(--font-heading);font-size:.9375rem;line-height:1.4;font-weight:500; }
.lv-main h6,.main-page-wrapper h6{ font-family:var(--font-heading);font-size:.8125rem;line-height:1.4;font-weight:500; }

/* WHMCS panels / labels / tables that inherited Hostinza sizes */
.lv-main .panel-title{ font-size:1.0625rem !important;line-height:1.3 !important; }
.lv-main .panel-body,.lv-main .list-group-item,.lv-main .table,.lv-main td,.lv-main th{ font-size:var(--text-md) !important; }
.lv-main .btn{ font-size:var(--text-sm);line-height:1.4; }
.lv-main label,.lv-main .form-control{ font-size:var(--text-md); }
.lv-main small,.lv-main .small{ font-size:var(--text-sm); }

/* kill leftover Hostinza hero/banner blocks if any inner page still emits them */
.lv-main [class*="hero-banner"],
.lv-main [class*="banner-"]{ padding:0 !important;background:none !important;min-height:0 !important; }
.lv-main .fs-36{ font-size:1.75rem !important; }
.lv-main .fs-20{ font-size:var(--text-md) !important; }

/* ============================================================
   BASE — page surface
   NOTE: this block previously sat under an orphaned comment-close
   with no matching open. CSS error recovery skips from a bad
   top-level token to the end of the next block, so this rule (the
   page background) was being discarded entirely.
   ============================================================ */
html,
body,
body.primary-bg-color,
.main-page-wrapper,
.dark-bg-five,
.dark-bg-four{
  background-color:var(--lv-void) !important;
  color:var(--lv-muted);
  font-family:var(--font-ui) !important;
  -webkit-font-smoothing:antialiased;
}
html{ font-size:93.75%; }  /* 15px root — gentle reduction for a minimal feel without shrinking too much */
html,body{ min-height:100%;height:auto; }
body{ min-height:100vh;min-height:100dvh; }
.main-page-wrapper{ min-height:100vh;min-height:100dvh; }

#main-body{ background:transparent; }

/* ---- Global Lumvara bloom for pages WITHOUT the shell (auth/login/etc.) ---- */
body::before{
  content:"";
  position:fixed;left:0;right:0;bottom:0;height:42vh;
  background:
    radial-gradient(55% 130% at 50% 125%, rgba(255,150,60,.60) 0%, rgba(235,120,55,.34) 34%, rgba(200,100,50,.12) 58%, transparent 74%);
  pointer-events:none;z-index:-1;
}
/* on shell pages (.lv-main present) the content bloom handles it — avoid a double bloom */
body:has(.lv-main)::before{ display:none; }

::selection{ background:rgba(255,181,74,.28); color:#fff; }

h1,h2,h3,h4,h5,h6,.fs-36,.fs-20{
  font-family:var(--font-ui) !important;
  color:var(--lv-text);
  letter-spacing:-.02em;
}
a{ color:var(--lv-lumen); }
a:hover{ color:#FFC76B; }
hr{ border-color:var(--lv-line); opacity:1; }
p,span,td,th,li,label,dd,dt{ color:inherit; }
.text-muted{ color:var(--lv-dim) !important; }

/* ============================================================
   2. PAGE HEADER (hero-banner-eight)
   ============================================================ */
.hero-banner-eight,
.bg-twelve{
  background:var(--lv-ink) !important;
  border-bottom:1px solid var(--lv-line);
  position:relative;
}
.hero-banner-eight::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 140% at 12% 0%,rgba(255,107,92,.10),rgba(182,92,255,.05) 40%,transparent 72%);
}
.hero-banner-eight h1{ color:var(--lv-text) !important; position:relative; z-index:1; }
.hero-banner-eight p{ color:var(--lv-muted) !important; position:relative; z-index:1; }

/* ============================================================
   3. TOP MENU (theme-main-menu / menu-style-nine)
   ============================================================ */
.theme-main-menu,
.sticky-menu{
  background:rgba(11,13,18,.85) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lv-line);
}
.navbar .nav-link{
  color:var(--lv-muted) !important;
  font-family:var(--font-ui) !important;
  font-weight:500;
  transition:color .2s var(--lv-ease);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color:var(--lv-text) !important; }

.dropdown-menu{
  background:var(--lv-elevated) !important;
  border:1px solid var(--lv-line) !important;
  border-radius:12px !important;
  padding:.375rem !important;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.6) !important;
}
.dropdown-item,
.dropdown-menu a,
.dropdown-menu span{ color:var(--lv-muted) !important; border-radius:8px; }
.dropdown-item:hover,
.dropdown-menu a:hover{ background:var(--lv-focusbed) !important; color:var(--lv-text) !important; }
.dropdown-menu li{ border:0 !important; }
.mega-menu-title{ color:var(--lv-dim) !important; font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; }

/* ============================================================
   4. CARDS / PANELS
   The parent theme + WHMCS core use several card idioms.
   Elevated surface, per the token dictionary.
   ============================================================ */
/* [relocated to section 4B — Lumvara card system] */

/* ============================================================
   5. TABLES (DataTables + .table-list)
   Every list page (domains, invoices, services, tickets) lands here.
   ============================================================ */
.table,
.table-list,
table.dataTable{
  color:var(--lv-muted) !important;
  border-color:var(--lv-line) !important;
}
.table > thead > tr > th,
.table-list thead th,
table.dataTable thead th{
  background:rgba(255,255,255,.015) !important;
  color:var(--lv-dim) !important;
  font-size:.6875rem !important;
  font-weight:600 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid var(--lv-line) !important;
  border-top:0 !important;
}
.table > tbody > tr > td,
.table-list tbody td,
table.dataTable tbody td{
  border-top:1px solid var(--lv-line) !important;
  border-bottom:0 !important;
  color:var(--lv-muted) !important;
  vertical-align:middle;
}
.table > tbody > tr,
.table-list tbody tr,
table.dataTable tbody tr{
  background:transparent !important;
  transition:background .2s var(--lv-ease);
  cursor:pointer;
}
.table > tbody > tr:hover,
.table-list tbody tr:hover,
table.dataTable tbody tr:hover{ background:rgba(255,255,255,.02) !important; }
.table a,.table-list a{ color:var(--lv-text) !important; font-weight:500; }
.table a:hover,.table-list a:hover{ color:var(--lv-lumen) !important; }

.table-container{
  background:var(--lv-elevated) !important;
  border:1px solid var(--lv-line) !important;
  border-radius:14px !important;
  overflow:hidden;
}

/* DataTables chrome (search, length, pagination, info) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.form-control,.form-select{
  background:var(--lv-void) !important;
  border:1px solid var(--lv-line) !important;
  color:var(--lv-text) !important;
  border-radius:10px !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.form-control:focus,.form-select:focus{
  border-color:var(--lv-lumen) !important;
  box-shadow:0 0 22px -6px var(--lv-lumen) !important;
  outline:none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ color:var(--lv-dim) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--lv-muted) !important;
  border:1px solid var(--lv-line) !important;
  border-radius:8px !important;
  background:transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--lv-lumen) !important;
  color:#1A1204 !important;
  border-color:var(--lv-lumen) !important;
}

/* ============================================================
   6. STATUS LABELS
   Palette rule: cool(Pulse) = live/active; red reserved for genuine error.
   ============================================================ */
.label,.status,.badge,.status-text{
  font-size:.6875rem !important;
  font-weight:600 !important;
  padding:.25rem .5rem !important;
  border-radius:999px !important;
  display:inline-flex;align-items:center;gap:.375rem;
  border:0 !important;
}
/* active / completed / open / paid → Pulse teal (live) */
.status-active,.status-completed,.status-open,.status-paid,
.label-success,.badge-success{
  background:rgba(47,216,198,.12) !important; color:var(--lv-pulse) !important;
}
/* pending / on-hold / draft → Warning */
.status-pending,.status-pending-transfer,.status-on-hold,.status-draft,
.status-customer-reply,.label-warning,.badge-warning,.status-unpaid{
  background:rgba(245,197,24,.12) !important; color:var(--lv-warning) !important;
}
/* answered / notices / info → Info blue */
.status-answered,.status-in-progress,.label-info,.badge-info{
  background:rgba(91,157,255,.12) !important; color:var(--lv-info) !important;
}
/* suspended / cancelled / terminated / overdue → Danger (true failure) */
.status-suspended,.status-cancelled,.status-terminated,.status-fraud,
.status-overdue,.status-expired,.label-danger,.badge-danger{
  background:rgba(255,90,95,.12) !important; color:var(--lv-danger) !important;
}
/* closed / inactive → dim */
.status-closed,.status-inactive,.label-default,.badge-default,.status-custom{
  background:rgba(255,255,255,.05) !important; color:var(--lv-dim) !important;
}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn-primary,.btn-one,.btn-eighteen,.btn-eleven,.download-btn-one{
  background:var(--lv-lumen) !important;
  border:0 !important;
  color:#1A1204 !important;
  font-weight:600 !important;
  border-radius:10px !important;
  transition:box-shadow .28s var(--lv-ease),filter .2s var(--lv-ease) !important;
}
.btn-primary:hover,.btn-one:hover,.btn-eighteen:hover,.btn-eleven:hover,.download-btn-one:hover{
  filter:brightness(1.06);
  box-shadow:0 0 26px -6px var(--lv-lumen) !important;
  color:#1A1204 !important;
}
.btn-default,.btn-return{
  background:transparent !important;
  border:1px solid var(--lv-line) !important;
  color:var(--lv-muted) !important;
  border-radius:10px !important;
  transition:all .2s var(--lv-ease) !important;
}
.btn-default:hover,.btn-return:hover{
  background:var(--lv-focusbed) !important;
  color:var(--lv-text) !important;
  border-color:var(--lv-line) !important;
}
.btn-success{ background:var(--lv-success) !important; border:0 !important; color:#05130C !important; border-radius:10px !important; }
.btn-danger{ background:transparent !important; border:1px solid rgba(255,90,95,.3) !important; color:var(--lv-danger) !important; border-radius:10px !important; }
.btn-danger:hover{ background:rgba(255,90,95,.1) !important; color:var(--lv-danger) !important; }

/* button-group dropdown (row actions) */
.btn-group .dropdown-menu{ background:var(--lv-elevated) !important; }
.btn-group .dropdown-menu a{ color:var(--lv-muted) !important; }
.btn-group .dropdown-menu a:hover{ background:var(--lv-focusbed) !important; color:var(--lv-text) !important; }
#tableDomainsList.dataTable .btn-group .dropdown-menu li{ border-bottom:1px solid var(--lv-line) !important; }

/* ============================================================
   8. FORMS
   ============================================================ */
label,.control-label{ color:var(--lv-dim) !important; font-weight:600; font-size:.8125rem; }
.form-control::placeholder{ color:var(--lv-dim) !important; }
select.form-control option{ background:var(--lv-elevated); color:var(--lv-text); }
.input-group-text,.input-group-addon{
  background:var(--lv-ink) !important;
  border:1px solid var(--lv-line) !important;
  color:var(--lv-muted) !important;
  border-radius:10px !important;
}
.checkbox label,.radio label{ color:var(--lv-muted) !important; }

/* ============================================================
   9. ALERTS
   ============================================================ */
.alert{ border-radius:12px !important; border:1px solid var(--lv-line) !important; }
.alert-success{ background:rgba(70,208,141,.08) !important; border-color:rgba(70,208,141,.3) !important; color:var(--lv-success) !important; }
.alert-warning{ background:rgba(245,197,24,.08) !important; border-color:rgba(245,197,24,.3) !important; color:var(--lv-warning) !important; }
.alert-danger{ background:rgba(255,90,95,.08) !important; border-color:rgba(255,90,95,.3) !important; color:var(--lv-danger) !important; }
.alert-info{ background:rgba(91,157,255,.08) !important; border-color:rgba(91,157,255,.3) !important; color:var(--lv-info) !important; }

/* ============================================================
   10. TABS / PILLS / NAV
   ============================================================ */
.nav-tabs{ border-bottom:1px solid var(--lv-line) !important; }
.nav-tabs .nav-link{ color:var(--lv-dim) !important; border:0 !important; border-bottom:2px solid transparent !important; background:transparent !important; }
.nav-tabs .nav-link:hover{ color:var(--lv-text) !important; }
.nav-tabs .nav-link.active{ color:var(--lv-lumen) !important; border-bottom-color:var(--lv-lumen) !important; background:transparent !important; }
.nav-pills .nav-link.active{ background:var(--lv-lumen) !important; color:#1A1204 !important; }
/* [relocated to section 4B — Lumvara card system] */

/* ============================================================
   11. INVOICES / PROGRESS / MISC
   ============================================================ */
.invoice-container,.invoice{ background:var(--lv-elevated) !important; border:1px solid var(--lv-line) !important; border-radius:14px !important; }
.progress{ background:rgba(255,255,255,.07) !important; border-radius:999px !important; height:6px !important; }
.progress-bar{ background:var(--lv-lumen) !important; }
.text-success{ color:var(--lv-success) !important; }
.text-danger{ color:var(--lv-danger) !important; }
.text-warning{ color:var(--lv-warning) !important; }
.text-info{ color:var(--lv-info) !important; }
.text-primary{ color:var(--lv-lumen) !important; }
.fa-check.text-success{ color:var(--lv-success) !important; }
.fa-times.text-danger{ color:var(--lv-danger) !important; }

/* Footer */
.footer,.theme-footer-one,.bottom-footer{ background:var(--lv-ink) !important; border-top:1px solid var(--lv-line); color:var(--lv-dim); }
.footer a{ color:var(--lv-muted) !important; }
.footer a:hover{ color:var(--lv-lumen) !important; }

/* Loading spinner tint */
.fa-spinner,.fa-spin{ color:var(--lv-lumen) !important; }

/* ============================================================
   12. AUTH PAGES (login / register / reset)
   These render OUTSIDE the main wrapper — paint them directly.
   ============================================================ */
body[data-phone-cc-input] .module-border-wrap,
.login-wrapper,.lumvara-auth{ background:var(--lv-void); }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .tiles .tile:hover{ transform:none; }
}

/* ============================================================
   13. LV-* BESPOKE PAGE COMPONENTS
   Used by the rebuilt client-area templates (clientareahome,
   clientareaproducts, clientareainvoices, viewinvoice,
   clientareaaddfunds, supporttickets, viewticket, etc.)
   Namespaced .lv- so they never collide with parent theme.
   ============================================================ */

.lv-dash,.lv-list-page,.lv-invoice-page,.lv-addfunds-page,
.lv-ticket-page{ color:var(--lv-muted); }

/* Page head */
.lv-page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.75rem;
}
.lv-title{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;
  color:var(--lv-text);font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.05;margin:0;
}
.lv-title-sm{ font-size:clamp(1.375rem,2.6vw,1.75rem); }
.lv-eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lv-dim);margin:0;
}
.lv-crumbs{ display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--lv-dim);margin-bottom:.75rem; }
.lv-crumbs a{ color:var(--lv-dim); }
.lv-crumbs a:hover{ color:var(--lv-lumen); }
.lv-sep{ opacity:.5; }
.lv-current{ color:var(--lv-muted); }
.lv-head-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.75rem;font-size:.8125rem; }
.lv-head-actions{ display:flex;gap:.5rem;flex-wrap:wrap; }

/* Text helpers */
.lv-muted{ color:var(--lv-dim)!important; }
.lv-strong{ color:var(--lv-text)!important;font-weight:600; }
.lv-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.lv-sm{ font-size:.8125rem; }
.lv-xs{ font-size:.75rem; }
.lv-center{ text-align:center; }
.lv-right{ text-align:right; }
.lv-mt{ margin-top:1rem; }
.lv-mt-sm{ margin-top:.5rem; }
.lv-mb{ margin-bottom:1rem; }

/* Cards */
.lv-card{
  background:var(--lv-elevated);border:1px solid var(--lv-line);border-radius:14px;
  padding:1.5rem;margin-bottom:1rem;
}
.lv-table-card{ padding:0;overflow:hidden; }

/* Buttons (self-contained, don't rely on BS) */
.lv-btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-size:.8125rem;font-weight:600;border-radius:10px;padding:.5rem .875rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:box-shadow .28s var(--lv-ease),filter .2s var(--lv-ease),background .2s var(--lv-ease),color .2s var(--lv-ease);
}
.lv-btn-sm{ padding:.375rem .75rem;font-size:.75rem; }
.lv-btn-block{ width:100%; }
.lv-btn-primary{ background:var(--lv-lumen);color:#1A1204; }
.lv-btn-primary:hover{ filter:brightness(1.06);box-shadow:0 0 26px -6px var(--lv-lumen);color:#1A1204; }
.lv-btn-ghost{ background:transparent;color:var(--lv-muted);border-color:var(--lv-line); }
.lv-btn-ghost:hover{ background:var(--lv-focusbed);color:var(--lv-text); }

/* Badges / statuses */
.lv-badge{
  display:inline-flex;align-items:center;gap:.375rem;
  font-size:.6875rem;font-weight:600;padding:.25rem .5rem;border-radius:999px;white-space:nowrap;
}
.lv-badge-xs{ font-size:.625rem;padding:.125rem .4rem; }
.lv-badge-live,.lv-status-active,.lv-status-completed,.lv-status-open,.lv-status-paid{
  background:rgba(47,216,198,.12);color:var(--lv-pulse);
}
.lv-badge-warn,.lv-status-pending,.lv-status-unpaid,.lv-status-draft,.lv-status-customer-reply,.lv-status-payment-pending{
  background:rgba(245,197,24,.12);color:var(--lv-warning);
}
.lv-badge-info,.lv-status-answered,.lv-status-in-progress{
  background:rgba(91,157,255,.12);color:var(--lv-info);
}
.lv-badge-bad,.lv-status-suspended,.lv-status-cancelled,.lv-status-terminated,.lv-status-overdue,.lv-status-collections{
  background:rgba(255,90,95,.12);color:var(--lv-danger);
}
.lv-badge-dim,.lv-status-closed,.lv-status-inactive,.lv-status-custom{
  background:rgba(255,255,255,.05);color:var(--lv-dim);
}

/* Tables */
.lv-table-wrap{ overflow-x:auto; }
.lv-table{ width:100%;border-collapse:separate;border-spacing:0; }
.lv-table thead th{
  background:rgba(255,255,255,.015);color:var(--lv-dim);
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.75rem 1.25rem;border-bottom:1px solid var(--lv-line);white-space:nowrap;text-align:left;
}
.lv-table tbody td{ padding:.9375rem 1.25rem;border-bottom:1px solid var(--lv-line);font-size:.8125rem;vertical-align:middle;color:var(--lv-muted); }
.lv-table tbody tr:last-child td{ border-bottom:0; }
.lv-hoverable tbody tr{ cursor:pointer;transition:background .2s var(--lv-ease); }
.lv-hoverable tbody tr:hover{ background:rgba(255,255,255,.02); }
.lv-empty{ text-align:center;color:var(--lv-dim);padding:2rem!important; }
.lv-tid{ margin-right:.5rem; }

/* Dashboard tiles + kb search + panels reuse global rules from §4;
   these just add spacing wrappers */
.lv-tiles{ margin-bottom:1.5rem; }
.lv-kb-search{ position:relative;margin-bottom:1.5rem; }
.lv-kb-search i{ position:absolute;left:1.0625rem;top:50%;transform:translateY(-50%);color:var(--lv-dim); }
.lv-kb-input{
  width:100%;height:56px;padding:0 1rem 0 3rem;font-size:1rem;
  background:var(--lv-elevated);border:1px solid var(--lv-line);border-radius:12px;color:var(--lv-text);
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-kb-input:focus{ outline:none;border-color:var(--lv-lumen);box-shadow:0 0 30px -8px var(--lv-lumen); }
.lv-kb-input::placeholder{ color:var(--lv-dim); }

/* Forms */
.lv-label{ display:block;font-size:.75rem;font-weight:600;color:var(--lv-dim);margin-bottom:.375rem;letter-spacing:.04em; }
.lv-input{
  width:100%;background:var(--lv-void);border:1px solid var(--lv-line);border-radius:10px;
  padding:.625rem .75rem;color:var(--lv-text);font-size:.875rem;
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-input:focus{ outline:none;border-color:var(--lv-lumen);box-shadow:0 0 22px -6px var(--lv-lumen); }
.lv-textarea{ resize:vertical;min-height:120px;font-family:inherit; }
.lv-select-wrap select{ width:100%; }
.lv-input-group{ display:flex;gap:.5rem; }
.lv-input-group .lv-input{ flex:1; }

/* Amount picker (add funds) */
.lv-amt-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem; }
.lv-amt{
  border:1px solid var(--lv-line);background:transparent;color:var(--lv-muted);
  border-radius:10px;padding:.75rem;font-size:.875rem;font-weight:600;cursor:pointer;
  transition:all .2s var(--lv-ease);
}
.lv-amt:hover{ background:var(--lv-focusbed);color:var(--lv-text); }
.lv-amt-active{ border-color:var(--lv-lumen);color:var(--lv-lumen);background:rgba(255,181,74,.08); }

/* Note card */
.lv-note-row{ display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--lv-line);font-size:.875rem; }

/* ===== Invoice document ===== */
.lv-invoice-doc{ padding:0;overflow:hidden; }
.lv-invoice-top{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;padding:1.75rem; }
.lv-invoice-logo{ max-height:40px;margin-bottom:1rem; }
.lv-wordmark{ font-family:var(--font-display);font-weight:400;font-size:1.375rem;letter-spacing:-.03em;color:var(--lv-text);text-transform:lowercase;display:block;margin-bottom:1rem; }
.lv-party{ color:var(--lv-text);font-size:.8125rem;line-height:1.6;font-weight:500; }
.lv-invoice-custom{ padding:0 1.75rem 1rem; }
.lv-cf-row{ display:flex;justify-content:space-between;font-size:.8125rem;padding:.375rem 0;border-bottom:1px solid var(--lv-line); }
.lv-invoice-items thead th{ background:rgba(255,255,255,.02); }
.lv-item-desc{ color:var(--lv-muted);font-size:.8125rem;line-height:1.5; }
.lv-invoice-totals{ display:flex;flex-direction:column;align-items:flex-end;padding:1.25rem 1.75rem;border-top:1px solid var(--lv-line);gap:.5rem; }
.lv-tot-row{ display:flex;justify-content:space-between;gap:2rem;min-width:min(300px,100%);font-size:.8125rem; }
.lv-tot-grand{ border-top:1px solid var(--lv-line);margin-top:.5rem;padding-top:.875rem;font-size:1rem; }
.lv-tot-grand span:first-child{ color:var(--lv-text);font-weight:600; }
.lv-grand-val{ font-family:var(--font-display);font-weight:400;color:var(--lv-text);font-size:1.375rem;letter-spacing:-.02em; }

/* Pay card */
.lv-pay-amount{ font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1;color:var(--lv-text);letter-spacing:-.02em;margin-bottom:.5rem; }
.lv-pay-btn{ margin-top:1rem; }
.lv-pay-btn .btn,.lv-pay-btn input[type=submit]{ width:100%!important; }

/* Transactions */
.lv-txn{ display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--lv-line); }
.lv-txn:last-child{ border-bottom:0; }

/* ===== Ticket thread ===== */
.lv-reply-card{ margin-bottom:1.5rem; }
.lv-reply-actions{ display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap; }
.lv-file{ color:var(--lv-dim);font-size:.8125rem; }
.lv-thread{ display:flex;flex-direction:column;gap:1rem; }
.lv-msg{ display:flex;gap:1rem;background:var(--lv-elevated);border:1px solid var(--lv-line);border-radius:14px;padding:1.25rem; }
.lv-msg-staff{ border-color:rgba(255,181,74,.25);background:rgba(255,181,74,.03); }
.lv-avatar{ width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--lv-focusbed);color:var(--lv-muted);flex:0 0 auto; }
.lv-avatar-staff{ background:linear-gradient(140deg,#FF6B5C,#B65CFF);color:#fff; }
.lv-msg-body{ flex:1;min-width:0; }
.lv-msg-head{ display:flex;align-items:center;gap:.625rem;margin-bottom:.5rem;flex-wrap:wrap; }
.lv-msg-name{ color:var(--lv-text);font-weight:600;font-size:.875rem; }
.lv-msg-date{ color:var(--lv-dim);font-size:.75rem;margin-left:auto; }
.lv-msg-text{ color:var(--lv-muted);font-size:.875rem;line-height:1.6; }
.lv-msg-attach{ margin-top:.875rem;display:flex;flex-wrap:wrap;gap:.5rem; }
.lv-attach{ display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--lv-lumen);background:rgba(255,181,74,.08);border-radius:8px;padding:.25rem .5rem; }

/* Alerts (lv-namespaced) */
.lv-alert{ border-radius:12px;border:1px solid var(--lv-line);padding:1rem 1.125rem;margin-bottom:1.5rem;font-size:.875rem; }
.lv-alert-danger{ background:rgba(255,90,95,.08);border-color:rgba(255,90,95,.3);color:var(--lv-danger); }

.lv-head-simple{ align-items:flex-start; }

/* Mobile: stacked tables for lv-tables too */
@media (max-width:767.98px){
  .lv-page-head{ align-items:flex-start; }
}

/* ============================================================
   14. FIXES — live client-area issues (v2)
   ============================================================ */

/* ---- 14a. Account-validation / email-verification banners ----
   header.tpl pulls validateuser.tpl + verifyemail.tpl from the
   twenty-one parent; both render as full-bleed orange gradient bars.
   Tame them into a proper Lumvara warning alert. Targets every
   selector WHMCS uses for these two banners. */
.validateUserException,
.verifyemailbanner,
.emailverificationbanner,
#validateUserException,
#emailVerificationBanner,
.alert.email-verification-banner,
.promo-verify,
.account-verification-banner{
  background:rgba(245,197,24,.08) !important;
  background-image:none !important;
  border:1px solid rgba(245,197,24,.3) !important;
  border-radius:14px !important;
  color:var(--lv-warning) !important;
  box-shadow:none !important;
  margin-bottom:1rem !important;
  padding:1rem 1.25rem !important;
}
.validateUserException *,
.verifyemailbanner *,
.emailverificationbanner *,
#emailVerificationBanner *{
  color:var(--lv-text) !important;
  text-shadow:none !important;
}
/* the CTA button inside those banners → solid Lumen, not washed white */
.validateUserException .btn,
.verifyemailbanner .btn,
.emailverificationbanner .btn{
  background:var(--lv-lumen) !important;
  border:0 !important;
  color:#1A1204 !important;
  border-radius:10px !important;
  font-weight:600 !important;
  text-shadow:none !important;
}
/* icon tint */
.validateUserException i,
.verifyemailbanner i,
.emailverificationbanner i{ color:var(--lv-warning) !important; }

/* Generic catch: ANY element in the client area whose inline style is
   a warm gradient (the orange bars) gets neutralised to the alert look.
   Scoped to #main-body so it can't touch the intended Halo brand gradient. */
#main-body [style*="linear-gradient"][class*="alert"],
#main-body .promobox{
  background-image:none !important;
  background:rgba(245,197,24,.08) !important;
  border:1px solid rgba(245,197,24,.3) !important;
  border-radius:14px !important;
  color:var(--lv-text) !important;
}

/* ---- 14b. Dashboard column balance ----
   With the WHMCS sidebar present, main content is col-lg-8/xl-9.
   Keep the 4 tiles from overflowing the narrower container. */
/* [relocated to section 4B — Lumvara card system] */

/* ---- 14c. WHMCS left sidebar panels (Your Info / Contacts / Shortcuts) ----
   These render from the twenty-one sidebar.tpl; make them match Lumvara cards. */
/* [relocated to section 4B — Lumvara card system] */

/* ---- 14d. "Need Some Help?" contact cards + footer icons ---- */
.footer-contact-card,
.contact-help-card{
  background:var(--lv-elevated) !important;
  border:1px solid var(--lv-line) !important;
  border-radius:14px !important;
}


  /* ---- 14b. Alert CTA colour: <a> vs <button> ----
     .lv-alert .lv-btn-ghost (0,2,0) sets the CTA to the severity dot, but
     .lv-main a.lv-btn-ghost (0,2,1) outranks it, so an <a> CTA rendered
     white while a <button> CTA took the colour — the unpaid-invoices
     "Pay Now" link vs the "Resend Verification Email" button. This puts
     link CTAs back on the component's intent at (0,3,1). */
  .lv-main .lv-alert a.lv-btn-ghost{ color:var(--lv-alert-dot); }

/* ============================================================
   15. LUMVARA HEADER & FOOTER  (bespoke chrome)
   Self-contained hamburger + slide-in drawer. NO Bootstrap
   collapse dependency (that hid the nav via .collapse:not(.show)).
   ============================================================ */

/* ---------- HEADER SHELL ---------- */
.lv-header{
  position:sticky;top:0;z-index:1030;
  background:rgba(11,13,18,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lv-line);
}
.lv-header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:1.5rem;
  padding:.875rem 1.5rem;
}

/* Brand */
.lv-brand{ display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;flex:0 0 auto; }
.lv-mark{ filter:drop-shadow(0 0 8px rgba(255,140,90,.5)); }
.lv-wordmark{
  font-family:var(--font-display);
  font-weight:800;font-size:1.35rem;letter-spacing:-.03em;
  color:var(--lv-text);text-transform:lowercase;line-height:1;
}

/* ---------- DESKTOP NAV ---------- */
.lv-nav{ display:flex;align-items:center;gap:.25rem;margin-left:.5rem; }
.lv-nav-list{ display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0; }
.lv-nav-mobile{ display:none; }
.lv-nav-link{
  display:inline-block;padding:.5rem .75rem;border-radius:8px;
  color:var(--lv-muted);font-size:.875rem;font-weight:500;text-decoration:none;
  transition:color .2s var(--lv-ease),background .2s var(--lv-ease);
}
.lv-nav-link:hover,.lv-nav-link:focus{ color:var(--lv-text);background:var(--lv-focusbed); }

/* Desktop dropdowns */
.lv-has-menu{ position:relative; }
.lv-menu{
  list-style:none;margin:0;padding:.375rem;min-width:200px;
  background:var(--lv-elevated);border:1px solid var(--lv-line);border-radius:12px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.6);
}
.lv-has-menu > .lv-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--lv-ease),transform .2s var(--lv-ease),visibility .2s;
  z-index:20;
}
.lv-has-menu:hover > .lv-menu,
.lv-has-menu:focus-within > .lv-menu{ opacity:1;visibility:visible;transform:translateY(0); }
.lv-menu li a,
.lv-menu .dropdown-item{
  display:block;padding:.5rem .625rem;border-radius:8px;
  color:var(--lv-muted);font-size:.8125rem;font-weight:500;text-decoration:none;
  transition:color .2s var(--lv-ease),background .2s var(--lv-ease);
}
.lv-menu li a:hover,
.lv-menu .dropdown-item:hover{ background:var(--lv-focusbed);color:var(--lv-text); }
.lv-menu .dropdown-divider{ border-color:var(--lv-line);margin:.375rem 0; }

/* ---------- RIGHT SIDE ---------- */
.lv-header-right{ margin-left:auto;display:flex;align-items:center;gap:1rem;flex:0 0 auto; }
.lv-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lv-lumen);color:#1A1204;
  font-size:.8125rem;font-weight:600;text-decoration:none;
  padding:.5rem 1rem;border-radius:10px;border:0;white-space:nowrap;
  transition:filter .2s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-btn-primary:hover{ filter:brightness(1.06);box-shadow:0 0 26px -6px var(--lv-lumen);color:#1A1204; }

.lv-btn-account{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--lv-line);
  border-radius:10px;padding:.3125rem .625rem .3125rem .3125rem;
  color:var(--lv-muted);font-size:.8125rem;font-weight:500;cursor:pointer;
  transition:background .2s var(--lv-ease),color .2s var(--lv-ease);
}
.lv-btn-account:hover{ background:var(--lv-focusbed);color:var(--lv-text); }
.lv-btn-account::after{ border-top-color:var(--lv-dim);margin-left:.125rem; }
.lv-avatar{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(140deg,#FF6B5C,#B65CFF);
  color:#fff;font-size:.6875rem;font-weight:700;text-transform:uppercase;flex:0 0 auto;
}
.lv-account-name{ color:var(--lv-text);font-weight:500; }

/* ---------- HAMBURGER (animated) ---------- */
.lv-nav-toggle{
  display:none;                      /* shown only under 992px */
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;flex:0 0 auto;
  border:1px solid var(--lv-line);border-radius:10px;
  background:transparent;cursor:pointer;padding:0;
}
.lv-nav-toggle span{
  display:block;width:18px;height:2px;margin:0 auto;border-radius:2px;
  background:var(--lv-text);
  transition:transform .28s var(--lv-ease),opacity .2s var(--lv-ease);
}
.lv-nav-toggle.lv-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.lv-nav-toggle.lv-open span:nth-child(2){ opacity:0; }
.lv-nav-toggle.lv-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.lv-nav-backdrop{
  position:fixed;inset:0;z-index:1035;
  background:rgba(4,5,7,.6);backdrop-filter:blur(2px);
  animation:lvFade .2s var(--lv-ease);
}
@keyframes lvFade{ from{opacity:0} to{opacity:1} }
body.lv-nav-lock{ overflow:hidden; }

/* ============================================================
   MOBILE  (< 992px)
   ============================================================ */
@media (max-width:991.98px){
  .lv-header-inner{ gap:.75rem;padding:.75rem 1rem; }
  .lv-header-right{ order:2; }
  /* keep the "Get started" pill but hide the desktop login text link on small screens */
  .lv-header-right .lv-nav-link{ display:none !important; }

  /* Drawer */
  .lv-nav{
    position:fixed;top:0;right:0;z-index:1040;
    height:100dvh;width:min(320px,86vw);
    margin:0;padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    background:var(--lv-ink);border-left:1px solid var(--lv-line);
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);
    flex-direction:column;align-items:stretch;gap:.125rem;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform .3s var(--lv-ease);
  }
  .lv-nav.lv-open{ transform:translateX(0); }

  .lv-nav-list{ flex-direction:column;align-items:stretch;gap:.125rem;width:100%; }
  .lv-nav-link{ padding:.8125rem .75rem;font-size:.9375rem;border-radius:10px; }

  /* Submenus: collapsed by default, revealed when parent .lv-sub-open */
  .lv-has-menu > .lv-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;min-width:0;
    padding:0 0 .25rem .5rem;
    max-height:0;overflow:hidden;
    transition:max-height .28s var(--lv-ease);
  }
  .lv-has-menu.lv-sub-open > .lv-menu{ max-height:420px; }
  .lv-has-menu > .lv-nav-link{ position:relative; }
  .lv-has-menu > .lv-nav-link::after{
    content:"";position:absolute;right:.75rem;top:50%;
    width:8px;height:8px;border-right:2px solid var(--lv-dim);border-bottom:2px solid var(--lv-dim);
    transform:translateY(-70%) rotate(45deg);
    transition:transform .28s var(--lv-ease);
  }
  .lv-has-menu.lv-sub-open > .lv-nav-link::after{ transform:translateY(-30%) rotate(-135deg); }
  .lv-menu li a{ padding:.625rem .75rem;font-size:.875rem; }

  .lv-nav-mobile{
    display:flex;flex-direction:column;
    border-top:1px solid var(--lv-line);margin-top:.75rem;padding-top:.75rem;
  }
}

/* Tiny phones: wordmark a touch smaller so the bar never wraps */
@media (max-width:360px){
  .lv-wordmark{ font-size:1.15rem; }
  .lv-header-right{ gap:.5rem; }
}

/* ---------- FOOTER ---------- */
.lv-footer{
  background:transparent;
  border-top:1px solid var(--lv-line);
  margin-top:3rem;
  position:relative;z-index:1;
}
.lv-footer-inner{ max-width:1280px;margin:0 auto;padding:1.5rem; }
.lv-footer-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
}
.lv-copy{ margin:0;color:var(--gray-400);font-size:.75rem;order:1;position:relative;z-index:2; }
.lv-footer-nav{ display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;order:2; }
.lv-footer-nav a{
  color:var(--gray-500);font-size:.75rem;font-weight:500;text-decoration:none;
  transition:color .18s var(--lv-ease);
}
.lv-footer-nav a:hover{ color:var(--brand-500); }
.lv-footer-utils{ display:flex;align-items:center;gap:1rem;order:3; }
.lv-footer-social{ display:flex;gap:.5rem; }
.lv-footer-social a{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--lv-line);color:var(--gray-500);text-decoration:none;font-size:.8125rem;
  transition:color .18s var(--lv-ease),border-color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-footer-social a:hover{ color:var(--gray-25);border-color:var(--gray-700);background:var(--gray-900); }

@media (max-width:767.98px){
  .lv-footer-row{ flex-direction:column;align-items:center;text-align:center;gap:1rem; }
  .lv-footer-nav{ justify-content:center; }
}

/* ---------- scroll-top (back-to-top widget) — removed ---------- */
.scroll-top{ display:none !important; }

/* ============================================================
   16. AUTH PAGES  (login / register / password reset)
   Matches the Lumvara mockup: near-black field, single centred
   card, amber glow pooling BELOW the card, pill CTA with glow,
   password reveal eye.
   ============================================================ */
.lv-auth{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--lv-void);
  overflow:hidden;
}

/* top bar */
.lv-auth-bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 1.5rem;
}
.lv-auth-back{ color:var(--lv-muted);font-size:.8125rem;font-weight:500;text-decoration:none;transition:color .2s var(--lv-ease); }
.lv-auth-back:hover{ color:var(--lv-text); }

/* centred body */
.lv-auth-body{
  position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1.25rem 3rem;
}

/* card */
.lv-auth-card{
  position:relative;z-index:1;
  width:100%;max-width:452px;
  background:var(--lv-ink);
  border:1px solid var(--lv-line);border-radius:20px;
  padding:2.25rem;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.lv-auth-card-wide,.lv-auth-wide .lv-auth-card{ max-width:660px; }
.lv-auth-wide .lv-auth-body{ padding-top:1.5rem; }

/* brand lockup inside the card (matches mockup) */
.lv-auth-brand{ display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;margin-bottom:1.75rem; }
.lv-auth-brand .lv-mark{ filter:drop-shadow(0 0 8px rgba(255,140,90,.5)); }
.lv-auth-logobox{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:#0B0D12;border:1px solid var(--lv-line);
}
.lv-auth-brand .lv-wordmark{ font-size:1.25rem; }

.lv-auth-title{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;
  color:var(--lv-text);font-size:2rem;line-height:1.05;margin:0 0 .5rem;
}
.lv-auth-sub{ color:var(--lv-muted);font-size:.9375rem;margin:0 0 1.75rem; }
.lv-auth-sub a{ color:var(--lv-lumen);font-weight:600; }
.lv-auth-note{ color:var(--lv-muted);font-size:.875rem;text-align:center;margin:1rem 0 0; }
.lv-auth-alt{ color:var(--lv-muted);font-size:.8125rem;margin:1.5rem 0 0;text-align:center; }
.lv-auth-alt a{ color:var(--lv-lumen);font-weight:600; }
.lv-auth-copy{ position:relative;z-index:1;color:var(--lv-dim);font-size:.75rem;margin:1.75rem 0 0;text-align:center; }
.lv-auth-link{ color:var(--lv-lumen);font-size:.8125rem;font-weight:500;text-decoration:none; }
.lv-auth-link:hover{ color:#FFC76B; }

/* fields */
.lv-field{ margin-bottom:1.25rem; }
.lv-field > label,
.lv-field label:first-child{
  display:block;font-size:.875rem;font-weight:500;color:var(--lv-muted);
  margin-bottom:.5rem;
}
.lv-input{
  width:100%;background:#0B0D12;border:1px solid var(--lv-line);border-radius:12px;
  padding:.875rem 1rem;color:var(--lv-text);font-size:1rem;font-family:inherit;
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-input:focus{ outline:none;border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(255,181,74,.12); }
.lv-input::placeholder{ color:var(--lv-dim); }
select.lv-input option{ background:var(--lv-elevated);color:var(--lv-text); }
.lv-help{ display:block;font-size:.75rem;color:var(--lv-dim);margin-top:.375rem; }
.lv-control :is(input,select,textarea){ width:100%;background:#0B0D12;border:1px solid var(--lv-line);border-radius:12px;padding:.875rem 1rem;color:var(--lv-text);font-size:1rem; }

/* password field w/ reveal eye */
.lv-input-wrap{ position:relative; }
.lv-input-wrap .lv-input{ padding-right:3rem; }
.lv-reveal{
  position:absolute;top:50%;right:.5rem;transform:translateY(-50%);
  width:2.25rem;height:2.25rem;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--lv-dim);border-radius:8px;
  transition:color .2s var(--lv-ease),background .2s var(--lv-ease);
}
.lv-reveal:hover{ color:var(--lv-muted);background:var(--lv-focusbed); }
.lv-reveal svg{ width:20px;height:20px;display:block; }

/* two-column grid for register */
.lv-grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:0 1rem; }
.lv-col-6{ grid-column:span 6; }
.lv-col-12{ grid-column:span 12; }
@media (max-width:575.98px){ .lv-col-6{ grid-column:span 12; } }

.lv-subhead{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lv-dim);
  margin:1rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--lv-line);
}

/* checkboxes — square, amber when checked (matches mockup) */
.lv-check{ display:inline-flex;align-items:center;gap:.625rem;color:var(--lv-text);font-size:.9375rem;cursor:pointer;margin:0; }
.lv-check input{ width:20px;height:20px;border-radius:6px;accent-color:var(--lv-lumen);flex:0 0 auto;cursor:pointer; }
.lv-tos{ margin-top:1rem;align-items:flex-start;font-size:.875rem; }
.lv-tos a{ color:var(--lv-lumen);font-weight:600; }

.lv-auth-row{ display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.25rem 0 1.75rem; }

.lv-optin{ margin-top:.5rem; }

/* pill CTA with amber glow (the hero of the mockup) */
.lv-btn-full{
  width:100%;
  padding:.9375rem 1rem;font-size:1rem;font-weight:700;
  border-radius:999px;margin-top:.5rem;
  box-shadow:0 0 30px -4px rgba(255,181,74,.55);
}
.lv-btn-full:hover{ filter:brightness(1.05);box-shadow:0 0 40px 0 rgba(255,181,74,.7); }

/* password strength meter tint */
.password-strength-meter .progress{ background:rgba(255,255,255,.07);border-radius:999px;height:6px;overflow:hidden;margin-top:.5rem; }
.password-strength-meter .progress-bar{ background:var(--lv-lumen); }

/* ghost button (generate-password) */
.lv-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--lv-muted);border:1px solid var(--lv-line);
  font-size:.8125rem;font-weight:500;border-radius:10px;padding:.5rem .875rem;cursor:pointer;
  transition:all .2s var(--lv-ease);
}
.lv-btn-ghost:hover{ background:var(--lv-focusbed);color:var(--lv-text); }

.lv-alert-info{ background:rgba(91,157,255,.08);border:1px solid rgba(91,157,255,.3);color:var(--lv-info);border-radius:10px;padding:.75rem 1rem;font-size:.8125rem; }

@media (max-width:479.98px){
  .lv-auth-card{ padding:1.75rem 1.5rem; }
  .lv-auth-title{ font-size:1.75rem; }
}

/* ============================================================
   17. TYPE SCALE UTILITIES  ()
   Use: <h1 class="txt-display-md">…</h1>, <p class="txt-md">…</p>
   ============================================================ */
.txt-display-2xl{ font-size:var(--text-display-2xl);line-height:var(--lh-display-2xl);letter-spacing:var(--tracking-display);font-family:var(--font-display); }
.txt-display-xl{ font-size:var(--text-display-xl);line-height:var(--lh-display-xl);letter-spacing:var(--tracking-display);font-family:var(--font-display); }
.txt-display-lg{ font-size:var(--text-display-lg);line-height:var(--lh-display-lg);letter-spacing:var(--tracking-display);font-family:var(--font-display); }
.txt-display-md{ font-size:var(--text-display-md);line-height:var(--lh-display-md);letter-spacing:var(--tracking-display);font-family:var(--font-display); }
.txt-display-sm{ font-size:var(--text-display-sm);line-height:var(--lh-display-sm);font-family:var(--font-display); }
.txt-display-xs{ font-size:var(--text-display-xs);line-height:var(--lh-display-xs);font-family:var(--font-display); }
.txt-xl{ font-size:var(--text-xl);line-height:var(--lh-xl); }
.txt-lg{ font-size:var(--text-lg);line-height:var(--lh-lg); }
.txt-md{ font-size:var(--text-md);line-height:var(--lh-md); }
.txt-sm{ font-size:var(--text-sm);line-height:var(--lh-sm); }
.txt-xs{ font-size:var(--text-xs);line-height:var(--lh-xs); }
.fw-regular{ font-weight:400; } .fw-medium{ font-weight:500; }
.fw-semibold{ font-weight:600; } .fw-bold{ font-weight:700; }

/* ============================================================
   18. FORM INPUTS  (component — matches Figma input states)
   Markup:
   <div class="ui-field">
     <label class="ui-label">Label <span class="ui-req">*</span></label>
     <div class="ui-input-box">
       <span class="ui-input-icon">…</span>              (optional leading)
       <input class="ui-input" placeholder="Placeholder">
       <span class="ui-input-trail">…</span>             (optional trailing)
     </div>
     <p class="ui-hint">This is a hint text to help user.</p>
   </div>
   State classes on .ui-input-box: .is-focus .is-error .is-disabled
   ============================================================ */
.ui-field{ margin-bottom:1.25rem; }
.ui-label{ display:block;font-size:var(--text-sm);font-weight:500;color:var(--gray-300);margin-bottom:.375rem; }
.ui-req{ color:var(--brand-500); }
.ui-input-box{
  display:flex;align-items:center;gap:.625rem;
  background:var(--gray-900);
  border:1px solid var(--gray-700);
  border-radius:12px;
  padding:0 .875rem;
  transition:border-color .2s var(--lv-ease),box-shadow .2s var(--lv-ease);
}
.ui-input-box:hover{ border-color:var(--gray-600); }
.ui-input-box:focus-within,
.ui-input-box.is-focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(254,181,74,.16);
}
.ui-input-box.is-error{
  border-color:var(--error-500);
  box-shadow:0 0 0 3px rgba(244,63,63,.14);
}
.ui-input-box.is-disabled{
  background:var(--gray-800);
  border-color:var(--gray-700);
  opacity:.6;pointer-events:none;
}
.ui-input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:0;
  color:var(--gray-25);
  font-family:var(--font-ui);font-size:var(--text-md);line-height:var(--lh-md);
  padding:.75rem 0;
}
.ui-input::placeholder{ color:var(--gray-500); }

/* ---- Kill the browser autofill light background (Chrome/Safari/Edge) ---- */
/* Autofilled fields force a pale bg + dark text; this keeps them dark. */
.ui-input:-webkit-autofill,
.ui-input:-webkit-autofill:hover,
.ui-input:-webkit-autofill:focus,
.ui-input:-webkit-autofill:active,
.lv-input:-webkit-autofill,
.lv-input:-webkit-autofill:hover,
.lv-input:-webkit-autofill:focus,
.lv-control input:-webkit-autofill,
.lv-control input:-webkit-autofill:hover,
.lv-control input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--gray-25) !important;
  caret-color:var(--gray-25);
  /* paint the dark fill via an inset shadow that covers the native yellow/lavender */
  -webkit-box-shadow:0 0 0 1000px var(--gray-900) inset !important;
  box-shadow:0 0 0 1000px var(--gray-900) inset !important;
  border-radius:inherit;
  transition:background-color 9999s ease-in-out 0s;   /* defeat the fade-to-white */
  font-family:var(--font-ui) !important;
}
/* Firefox autofill */
.ui-input:autofill,
.lv-input:autofill{
  -webkit-text-fill-color:var(--gray-25) !important;
  box-shadow:0 0 0 1000px var(--gray-900) inset !important;
}
.ui-input-icon,.ui-input-trail{ display:inline-flex;align-items:center;justify-content:center;color:var(--gray-400);flex:0 0 auto; }
.ui-input-icon svg,.ui-input-trail svg{ width:18px;height:18px; }
.ui-input-box.is-error .ui-input-trail{ color:var(--error-500); }
.ui-hint{ margin:.375rem 0 0;font-size:var(--text-sm);color:var(--gray-500); }
.ui-input-box.is-error ~ .ui-hint{ color:var(--error-500); }
/* leading avatar/dot dropdowns like the Figma */
.ui-dot{ width:20px;height:20px;border-radius:50%;background:var(--gray-500);flex:0 0 auto; }

/* ============================================================
   19. DROPDOWN / SELECT  (component — matches Figma)
   Closed:
   <div class="ui-select"> <span class="ui-dot"></span>
     <span class="ui-select-value">Placeholder</span>
     <svg class="ui-select-caret">…</svg> </div>
   Open menu:
   <div class="ui-menu"> <a class="ui-menu-item is-active">…</a> … </div>
   ============================================================ */
.ui-select{
  display:flex;align-items:center;gap:.625rem;
  background:var(--gray-900);
  border:1px solid var(--gray-700);
  border-radius:12px;
  padding:.75rem .875rem;
  color:var(--gray-25);font-size:var(--text-md);cursor:pointer;
  transition:border-color .2s var(--lv-ease),box-shadow .2s var(--lv-ease);
}
.ui-select:hover{ border-color:var(--gray-600); }
.ui-select.is-open,
.ui-select:focus-within{
  border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(254,181,74,.16);
}
.ui-select-value{ flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ui-select-value.is-placeholder{ color:var(--gray-500); }
.ui-select-caret{ width:18px;height:18px;color:var(--gray-400);transition:transform .2s var(--lv-ease); }
.ui-select.is-open .ui-select-caret{ transform:rotate(180deg); }

.ui-menu{
  margin-top:.375rem;padding:.375rem;
  background:var(--gray-900);
  border:1px solid var(--gray-700);
  border-radius:12px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.7);
}
.ui-menu-item{
  display:flex;align-items:center;gap:.625rem;
  padding:.625rem .75rem;border-radius:9px;
  color:var(--gray-300);font-size:var(--text-md);text-decoration:none;cursor:pointer;
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.ui-menu-item:hover{ background:var(--gray-800);color:var(--gray-25); }
.ui-menu-item.is-active{ background:var(--gray-800);color:var(--gray-25); }
.ui-menu-item .ui-check{ margin-left:auto;color:var(--brand-500);width:16px;height:16px;flex:0 0 auto; }
.ui-menu-item .ui-sub{ color:var(--gray-500);font-size:var(--text-sm);margin-left:.25rem; }

/* ============================================================
   20. TOOLTIP  (component — white bubble w/ arrow, per Figma)
   <span class="ui-tip" data-tip="This is a tooltip">trigger</span>
   direction: add .tip-top (default) / .tip-bottom / .tip-left / .tip-right
   Rich variant: put a .ui-tip-box directly.
   ============================================================ */
.ui-tip{ position:relative;display:inline-flex; }
.ui-tip::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);
  background:var(--white);color:var(--gray-700);
  font-size:var(--text-sm);line-height:1.3;font-weight:500;white-space:nowrap;
  padding:.5rem .625rem;border-radius:8px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--lv-ease),transform .18s var(--lv-ease);
  z-index:60;
}
.ui-tip::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%) translateY(4px);
  border:6px solid transparent;border-top-color:var(--white);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--lv-ease),transform .18s var(--lv-ease);z-index:60;
}
.ui-tip:hover::after,.ui-tip:hover::before{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); }
/* bottom */
.ui-tip.tip-bottom::after{ bottom:auto;top:calc(100% + 9px); }
.ui-tip.tip-bottom::before{ bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:var(--white); }
/* left */
.ui-tip.tip-left::after{ left:auto;bottom:auto;right:calc(100% + 9px);top:50%;transform:translateY(-50%) translateX(4px); }
.ui-tip.tip-left::before{ left:auto;bottom:auto;right:calc(100% + 3px);top:50%;transform:translateY(-50%) translateX(4px);border-top-color:transparent;border-left-color:var(--white); }
.ui-tip.tip-left:hover::after{ transform:translateY(-50%) translateX(0); }
.ui-tip.tip-left:hover::before{ transform:translateY(-50%) translateX(0); }
/* right */
.ui-tip.tip-right::after{ left:calc(100% + 9px);bottom:auto;top:50%;transform:translateY(-50%) translateX(-4px); }
.ui-tip.tip-right::before{ left:calc(100% + 3px);bottom:auto;top:50%;transform:translateY(-50%) translateX(-4px);border-top-color:transparent;border-right-color:var(--white); }
.ui-tip.tip-right:hover::after{ transform:translateY(-50%) translateX(0); }
.ui-tip.tip-right:hover::before{ transform:translateY(-50%) translateX(0); }

/* Rich tooltip (title + body), always-visible block element */
.ui-tip-box{
  position:relative;max-width:320px;
  background:var(--white);color:var(--gray-500);
  border-radius:10px;padding:.75rem .875rem;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);
  font-size:var(--text-sm);line-height:1.5;
}
.ui-tip-box .ui-tip-title{ color:var(--gray-700);font-weight:600;font-size:var(--text-sm);margin-bottom:.25rem; }
.ui-tip-box::after{
  content:"";position:absolute;top:100%;left:24px;
  border:7px solid transparent;border-top-color:var(--white);
}

/* ============================================================
   21. CHECKBOXES & RADIOS  (component — matches Figma)
   <label class="ui-check2"><input type="checkbox"><span class="ui-box"></span> Remember me</label>
   <label class="ui-check2 ui-lg">…</label>   (large)
   <label class="ui-radio"><input type="radio"><span class="ui-dot2"></span> Option</label>
   Card style: wrap in .ui-check-card / selected adds .is-checked
   ============================================================ */
.ui-check2,.ui-radio{
  display:inline-flex;align-items:center;gap:.625rem;
  color:var(--gray-100);font-size:var(--text-md);cursor:pointer;user-select:none;
}
.ui-check2 input,.ui-radio input{ position:absolute;opacity:0;width:0;height:0; }
.ui-box{
  width:20px;height:20px;flex:0 0 auto;border-radius:6px;
  background:var(--gray-900);border:1.5px solid var(--gray-600);
  display:grid;place-items:center;
  transition:background .15s var(--lv-ease),border-color .15s var(--lv-ease);
}
.ui-box::after{
  content:"";width:11px;height:11px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140E02' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6);transition:opacity .15s var(--lv-ease),transform .15s var(--lv-ease);
}
.ui-check2 input:checked + .ui-box{ background:var(--brand-500);border-color:var(--brand-500); }
.ui-check2 input:checked + .ui-box::after{ opacity:1;transform:scale(1); }
.ui-check2 input:focus-visible + .ui-box,
.ui-radio input:focus-visible + .ui-dot2{ box-shadow:0 0 0 3px rgba(254,181,74,.25); }
.ui-check2 input:disabled + .ui-box{ background:var(--gray-800);border-color:var(--gray-700);opacity:.5; }

/* radio */
.ui-dot2{
  width:20px;height:20px;flex:0 0 auto;border-radius:50%;
  background:var(--gray-900);border:1.5px solid var(--gray-600);
  display:grid;place-items:center;
  transition:background .15s var(--lv-ease),border-color .15s var(--lv-ease);
}
.ui-dot2::after{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-500);
  opacity:0;transform:scale(.4);transition:opacity .15s var(--lv-ease),transform .15s var(--lv-ease);
}
.ui-radio input:checked + .ui-dot2{ border-color:var(--brand-500); }
.ui-radio input:checked + .ui-dot2::after{ opacity:1;transform:scale(1); }

/* large variant */
.ui-lg{ font-size:var(--text-lg);font-weight:600;gap:.75rem; }
.ui-lg .ui-box,.ui-lg .ui-dot2{ width:24px;height:24px;border-radius:7px; }

/* card checkbox (Newest First / Save my login details) */
.ui-check-card{
  display:flex;align-items:flex-start;gap:.75rem;
  background:var(--gray-900);border:1px solid var(--gray-700);border-radius:12px;
  padding:.875rem 1rem;cursor:pointer;
  transition:border-color .18s var(--lv-ease),box-shadow .18s var(--lv-ease);
}
.ui-check-card:hover{ border-color:var(--gray-600); }
.ui-check-card.is-checked{ border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(254,181,74,.12); }
.ui-check-card .ui-box{ margin-top:.125rem; }
.ui-check-card .ui-cc-title{ color:var(--gray-25);font-weight:600;font-size:var(--text-md);line-height:1.3; }
.ui-check-card .ui-cc-sub{ color:var(--gray-500);font-size:var(--text-sm);margin-top:.125rem; }

/* ============================================================
   22. PAGINATION  (component — matches Figma dark variants)
   Numbered:
   <nav class="ui-pager">
     <a class="ui-page is-active">1</a><a class="ui-page">2</a>…
   </nav>
   With prev/next + spread:
   <nav class="ui-pager ui-pager-bar"> … </nav>
   ============================================================ */
.ui-pager{ display:inline-flex;align-items:center;gap:.375rem; }
.ui-page{
  min-width:40px;height:40px;padding:0 .5rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gray-900);border:1px solid var(--gray-700);border-radius:9px;
  color:var(--gray-300);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease),border-color .15s var(--lv-ease);
}
.ui-page:hover{ background:var(--gray-800);color:var(--gray-25);border-color:var(--gray-600); }
.ui-page.is-active{ background:var(--brand-500);border-color:var(--brand-500);color:#140E02; }
.ui-page.is-ellipsis{ border-color:transparent;background:transparent;pointer-events:none;color:var(--gray-500); }
.ui-page-icon{ width:18px;height:18px; }
/* prev / next text buttons */
.ui-page-nav{
  display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 .875rem;
  background:var(--gray-900);border:1px solid var(--gray-700);border-radius:9px;
  color:var(--gray-200);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .15s var(--lv-ease),border-color .15s var(--lv-ease);
}
.ui-page-nav:hover{ background:var(--gray-800);border-color:var(--gray-600);color:var(--gray-25); }
.ui-page-nav svg{ width:16px;height:16px; }
.ui-page-nav.is-disabled{ opacity:.4;pointer-events:none; }
/* full-width bar layout: Previous … numbers … Next */
.ui-pager-bar{ display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem; }
.ui-pager-bar .ui-pager-nums{ display:inline-flex;gap:.375rem;align-items:center; }
.ui-pager-count{ color:var(--gray-400);font-size:var(--text-sm);font-weight:500; }

/* ============================================================
   23. NOTIFICATION CARDS  (component — matches Figma dark)
   <div class="ui-note">
     <span class="ui-note-dot ui-dot-gray"></span>
     <div class="ui-note-body">
       <div class="ui-note-title">Version 1.4.1 is now available</div>
       <p class="ui-note-text">Includes the all new dashboard view…</p>
       <div class="ui-note-actions"><a class="ui-note-link">Install now</a><a class="ui-note-muted">Later</a></div>
     </div>
     <button class="ui-note-close">×</button>
   </div>
   dot colours: ui-dot-gray / ui-dot-success / ui-dot-warning / ui-dot-error / ui-dot-brand
   ============================================================ */
.ui-note{
  position:relative;display:flex;gap:.75rem;align-items:flex-start;
  background:var(--gray-900);border:1px solid var(--gray-800);border-radius:12px;
  padding:1rem 1rem 1rem 1rem;margin-bottom:.75rem;
}
.ui-note-dot{ width:12px;height:12px;border-radius:50%;flex:0 0 auto;margin-top:.25rem; }
.ui-dot-gray{ background:var(--gray-400); }
.ui-dot-success{ background:var(--success-400); box-shadow:0 0 0 3px rgba(87,204,125,.15); }
.ui-dot-warning{ background:var(--warning-500); box-shadow:0 0 0 3px rgba(252,135,18,.15); }
.ui-dot-error{ background:var(--error-400); box-shadow:0 0 0 3px rgba(252,93,93,.15); }
.ui-dot-brand{ background:var(--brand-500); box-shadow:0 0 0 3px rgba(254,181,74,.15); }
.ui-note-body{ flex:1;min-width:0; }
.ui-note-title{ color:var(--gray-25);font-weight:600;font-size:var(--text-sm);line-height:1.4; }
.ui-note-text{ color:var(--gray-400);font-size:var(--text-sm);line-height:1.5;margin:.25rem 0 0; }
.ui-note-actions{ display:flex;gap:1rem;margin-top:.625rem; }
.ui-note-link{ color:var(--brand-500);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer; }
.ui-note-link:hover{ color:var(--brand-400); }
.ui-note-muted{ color:var(--gray-400);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer; }
.ui-note-muted:hover{ color:var(--gray-200); }
.ui-note-close{
  position:absolute;top:.75rem;right:.75rem;
  width:24px;height:24px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:50%;color:var(--gray-500);cursor:pointer;font-size:15px;line-height:1;
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.ui-note-close:hover{ background:var(--gray-800);color:var(--gray-200); }
/* tag chips (Keyword Alert style) */
.ui-note-tags{ display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.625rem; }
.ui-tag{ background:var(--gray-800);color:var(--gray-300);font-size:var(--text-xs);padding:.1875rem .5rem;border-radius:6px; }

/* ============================================================
   24. PROGRESS BARS  (component — matches Figma)
   <div class="ui-progress"><span style="width:60%"></span></div>
   with label:  <div class="ui-progress-row"><div class="ui-progress">…</div><span class="ui-progress-val">60%</span></div>
   ============================================================ */
.ui-progress{
  height:8px;border-radius:999px;background:var(--gray-800);overflow:hidden;flex:1;
}
.ui-progress > span{
  display:block;height:100%;border-radius:999px;
  background:var(--brand-500);
  transition:width .4s var(--lv-ease);
}
.ui-progress-row{ display:flex;align-items:center;gap:.75rem; }
.ui-progress-val{ color:var(--gray-400);font-size:var(--text-sm);font-weight:500;min-width:38px;text-align:right; }

/* ============================================================
   25. TOAST MESSAGES  (component — matches Figma, colour-tinted)
   <div class="ui-toast ui-toast-success">
     <span class="ui-note-dot ui-dot-success"></span>
     <div class="ui-note-body"><div class="ui-note-title">…</div><p class="ui-note-text">…</p>
       <a class="ui-note-link">Set an address</a></div>
     <button class="ui-note-close">×</button>
   </div>
   variants: ui-toast-neutral / -success / -warning / -error
   ============================================================ */
.ui-toast{
  position:relative;display:flex;gap:.75rem;align-items:flex-start;
  border:1px solid var(--gray-800);border-radius:12px;
  padding:1rem 2.25rem 1rem 1rem;margin-bottom:.75rem;
  background:var(--gray-950);
  overflow:hidden;
}
.ui-toast .ui-note-title{ color:var(--gray-25); }
.ui-toast .ui-note-text{ color:var(--gray-300); }
/* colour wash from the left, fading right — like the Figma */
.ui-toast-neutral{ background:linear-gradient(90deg, var(--gray-900), var(--gray-950) 55%); }
.ui-toast-success{ background:linear-gradient(90deg, rgba(31,92,52,.55), var(--gray-950) 55%);border-color:rgba(38,147,74,.35); }
.ui-toast-warning{ background:linear-gradient(90deg, rgba(154,64,16,.55), var(--gray-950) 55%);border-color:rgba(197,81,8,.35); }
.ui-toast-error{ background:linear-gradient(90deg, rgba(130,26,26,.55), var(--gray-950) 55%);border-color:rgba(190,23,23,.35); }

/* reveal-eye button living in the input trailing slot */
.ui-reveal{
  background:transparent;border:0;cursor:pointer;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gray-400);transition:color .2s var(--lv-ease);
}
.ui-reveal:hover{ color:var(--gray-200); }
.ui-reveal svg{ width:18px;height:18px;display:block; }

/* native <select> sitting inside a .ui-input-box (register country/currency/security q) */
.ui-input-box.lv-select-box{ padding-right:.5rem;position:relative; }
.ui-input-box .ui-input{ appearance:none;-webkit-appearance:none; }
.ui-input-box select.ui-input{
  background:transparent;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA4B3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .25rem center;background-size:18px;
  padding-right:1.75rem;
}
/* custom-field inputs from WHMCS ($customfield.input) — give them the box look */
.lv-control :is(input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea){
  background:var(--gray-900) !important;border:1px solid var(--gray-700) !important;border-radius:12px !important;
  color:var(--gray-25) !important;padding:.75rem .875rem !important;font-size:var(--text-md) !important;width:100%;
}
.lv-control :is(input,select,textarea):focus{ outline:none;border-color:var(--brand-500) !important;box-shadow:0 0 0 3px rgba(254,181,74,.16) !important; }

/* ============================================================
   27. SIDEBAR APP SHELL  (replaces the top header)
   Fixed left sidebar + offset main content. Mobile: off-canvas
   drawer with a working toggle + backdrop (no stacking trap).
   ============================================================ */
:root{ --lv-side-w: 264px; }

.lv-shell{ min-height:100vh;min-height:100dvh;position:relative; }

/* ---------- SIDEBAR ---------- */
.lv-sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:1040;
  width:var(--lv-side-w);
  display:flex;flex-direction:column;
  background:var(--gray-900);
  border-right:1px solid var(--lv-line);
  padding:1.25rem .875rem;
}
.lv-side-brand{
  display:flex;align-items:center;gap:.625rem;text-decoration:none;
  padding:.5rem .5rem 1.25rem;
}
.lv-side-logobox{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--gray-950);border:1px solid var(--lv-line);flex:0 0 auto;
}
.lv-side-logobox .lv-mark{ filter:drop-shadow(0 0 8px rgba(255,140,90,.5)); }
.lv-side-brand .lv-wordmark{
  font-family:var(--font-display);font-weight:400;font-size:1.25rem;letter-spacing:-.03em;
  color:var(--gray-25);text-transform:lowercase;line-height:1;
}

/* nav */
.lv-side-nav{ display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem;flex:1; }
.lv-side-link{
  position:relative;display:flex;align-items:center;gap:.75rem;
  padding:.6875rem .75rem;border-radius:11px;
  color:var(--gray-400);font-size:var(--text-md);font-weight:500;text-decoration:none;
  transition:background .18s var(--lv-ease),color .18s var(--lv-ease);
}
.lv-side-link:hover{ background:var(--gray-800);color:var(--gray-100); }
.lv-side-ic{ width:20px;height:20px;flex:0 0 auto;color:var(--gray-500);transition:color .18s var(--lv-ease); }
.lv-side-link:hover .lv-side-ic{ color:var(--gray-200); }
/* active item — amber icon, subtle wash, left accent bar (per mockup) */
.lv-side-link.is-active{
  background:var(--gray-800);
  color:var(--gray-25);font-weight:600;
}
.lv-side-link.is-active .lv-side-ic{ color:var(--brand-500); }
.lv-side-link.is-active::before{
  content:"";position:absolute;left:calc(-.875rem);top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--brand-500);
}

/* footer user badge */
.lv-side-foot{ margin-top:auto;padding-top:.75rem;border-top:1px solid var(--lv-line); }
.lv-side-user{ position:relative; }
.lv-side-userbtn{
  width:100%;display:flex;align-items:center;gap:.625rem;
  background:transparent;border:0;cursor:pointer;
  padding:.5rem;border-radius:11px;color:var(--gray-100);text-align:left;
  transition:background .18s var(--lv-ease);
}
.lv-side-userbtn:hover{ background:var(--gray-800); }
.lv-side-userbtn::after{ margin-left:auto;border-top-color:var(--gray-500); }
.lv-side-avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,#FF6B5C,#B65CFF);
  color:#fff;font-size:.8125rem;font-weight:700;text-transform:uppercase;
}
.lv-side-uname{ font-size:var(--text-sm);font-weight:600;color:var(--gray-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lv-side-user .dropdown-menu{ width:100%; }

/* ---------- MAIN ---------- */
.lv-main{
  margin-left:var(--lv-side-w);
  width:calc(100% - var(--lv-side-w));
  max-width:calc(100% - var(--lv-side-w));
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  position:relative;
  background:var(--lv-void);
  overflow:hidden;
}
/* Lumvara signature bloom: amber (bottom-centre) + magenta/violet (bottom-right),
   spread across the lower third, fading to void before mid-height. Sampled from brand ref. */
.lv-main::after{
  content:"";position:fixed;left:var(--lv-side-w);right:0;bottom:0;
  height:42vh;
  background:
    radial-gradient(60% 130% at 50% 125%, rgba(255,150,60,.60) 0%, rgba(235,120,55,.34) 34%, rgba(200,100,50,.12) 58%, transparent 74%);
  pointer-events:none;z-index:0;
}
.lv-main > *{ position:relative;z-index:1; }
.lv-main #main-body{ flex:1;background:transparent; }
.lv-main .lv-footer{ margin-top:auto; }

/* ============================================================
   PERSISTENT TOPBAR (page title left, WHMCS actions right)
   ============================================================ */
.lv-topbar{
  position:sticky;top:0;z-index:1030;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.875rem 1.75rem;min-height:68px;
  background:rgba(11,10,15,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lv-line);
}
.lv-topbar-left{ display:flex;align-items:center;gap:.875rem;min-width:0; }
.lv-topbar-title{
  margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;
  font-size:1.25rem;color:var(--gray-25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lv-topbar-right{ display:flex;align-items:center;gap:.625rem;flex:0 0 auto; }

/* icon buttons (bell, cart) */
.lv-icon-btn{
  position:relative;display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border-radius:12px;border:1px solid var(--lv-line);background:var(--gray-900);
  color:var(--gray-300);text-decoration:none;cursor:pointer;
  transition:border-color .18s var(--lv-ease),color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-icon-btn:hover{ border-color:var(--gray-700);color:var(--gray-25);background:var(--gray-800); }
.lv-icon-btn svg{ width:20px;height:20px; }

/* bell notification count */
.lv-bell-dot{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--error-500);color:#fff;font-size:.625rem;font-weight:800;
  border:2px solid var(--lv-void);
}
/* cart badge on topbar */
.lv-top-cart-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--brand-500);color:#140E02;font-size:.625rem;font-weight:800;
  border:2px solid var(--lv-void);
}

/* bell dropdown */
.lv-bell-menu{ width:400px !important;min-width:400px !important;max-width:calc(100vw - 1.5rem);padding:.5rem !important;overflow:hidden; }
.lv-bell-menu .lv-bell-title{ color:var(--gray-25) !important; }
.lv-bell-menu .lv-bell-text{ color:var(--gray-500) !important; }
.lv-bell-menu span{ color:inherit; }
.lv-bell-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.625rem .75rem .5rem;font-family:var(--font-heading);font-weight:400;color:var(--gray-25);font-size:.9375rem;
}
.lv-bell-count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--brand-500);color:#140E02;font-size:.6875rem;font-weight:800;
}
.lv-bell-list{ display:flex;flex-direction:column;gap:.375rem;max-height:min(440px,70vh);overflow-y:auto;padding:.125rem; }
/* notification card — reference style: icon tile + title + text + (dismiss) */
.lv-bell-card{
  position:relative;display:flex;align-items:flex-start;gap:.625rem;
  padding:.75rem;border-radius:12px;border:1px solid var(--lv-line);background:var(--gray-950);
}
.lv-bell-ic{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
}
.lv-bell-ic svg{ width:19px;height:19px; }
.lv-bell-body{ flex:1;min-width:0;padding-right:.25rem; }
.lv-bell-title{ font-weight:700;color:var(--gray-25);font-size:var(--text-md);line-height:1.3;margin-bottom:.1875rem; }
.lv-bell-text{ color:var(--gray-500);font-size:var(--text-sm);line-height:1.45; }
.lv-bell-link{ color:var(--brand-500);font-weight:600;text-decoration:none;white-space:nowrap; }
/* severity accents on the icon tile */
.lv-bell-info .lv-bell-ic{ background:rgba(154,164,179,.12);color:var(--gray-300); }
.lv-bell-success .lv-bell-ic{ background:rgba(50,177,92,.16);color:#57CC7D; }
.lv-bell-warning .lv-bell-ic{ background:rgba(252,135,18,.16);color:#FC8712; }
.lv-bell-danger .lv-bell-ic{ background:rgba(245,61,61,.16);color:#FC5D5D; }
.lv-bell-empty{
  display:flex;flex-direction:column;align-items:center;gap:.625rem;
  padding:2rem .75rem;text-align:center;color:var(--gray-500);font-size:var(--text-sm);
}
.lv-bell-empty svg{ width:32px;height:32px;color:var(--gray-700); }

/* ---- user menu (account dropdown) with header + icons ---- */
.lv-usermenu{ width:270px;padding:.5rem; }
.lv-usermenu-head{ display:flex;align-items:center;gap:.75rem;padding:.625rem .5rem .5rem; }
.lv-usermenu-avatar{ width:42px !important;height:42px !important;font-size:.9375rem !important; }
.lv-usermenu-info{ display:flex;flex-direction:column;min-width:0; }
.lv-usermenu-name{ font-weight:700;color:var(--gray-25);font-size:var(--text-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lv-usermenu-email{ color:var(--gray-500);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lv-usermenu .dropdown-item{ display:flex;align-items:center;gap:.625rem; }
.lv-usermenu .dropdown-item svg{ width:17px;height:17px;flex:0 0 auto;color:var(--gray-500); }
.lv-usermenu .dropdown-item:hover svg{ color:var(--brand-500); }
.lv-usermenu .lv-fa-ic{ width:17px;text-align:center;color:var(--gray-500); }
.lv-item-danger{ color:#FC5D5D !important; }
.lv-item-danger svg{ color:#FC5D5D !important; }
.lv-item-danger:hover{ background:rgba(245,61,61,.10) !important; }

/* account button (avatar only) */
.lv-top-userbtn{
  display:grid;place-items:center;padding:0;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--lv-line);background:var(--gray-900);cursor:pointer;
  transition:border-color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-top-userbtn:hover{ border-color:var(--gray-700);background:var(--gray-800); }
.lv-top-avatar{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#B65CFF,#FF6B5C,#FFC76B);color:#fff;font-size:.8125rem;font-weight:700;
}

/* topbar logo — hidden on desktop, centered on mobile */
.lv-topbar-logo{ display:none;align-items:center;gap:.5rem;text-decoration:none; }
.lv-topbar-logo .lv-wordmark{ font-family:var(--font-display);font-weight:400;font-size:1.25rem;letter-spacing:-.03em;color:var(--gray-25);text-transform:lowercase;line-height:1; }
.lv-topbar-logo .lv-mark{ filter:drop-shadow(0 0 8px rgba(255,140,90,.5)); }

/* guest links */
.lv-top-guestlink{ color:var(--gray-300);font-weight:600;font-size:var(--text-sm);text-decoration:none;padding:.5rem .75rem;border-radius:9px;transition:color .15s var(--lv-ease); }
.lv-top-guestlink:hover{ color:var(--brand-500); }
.lv-top-register{ padding:.5rem 1rem !important; }

/* ---------- HAMBURGER (mobile) ---------- */
.lv-nav-toggle{
  display:none;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:0;
  width:44px;height:44px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid rgba(254,181,74,.28);
  border-radius:13px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(254,181,74,.14), transparent 60%),
    var(--gray-900);
  box-shadow:0 2px 10px -2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .22s var(--lv-ease),box-shadow .22s var(--lv-ease),background .22s var(--lv-ease);
}
.lv-nav-toggle:hover{
  border-color:rgba(254,181,74,.55);
  box-shadow:0 4px 18px -4px rgba(254,181,74,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.lv-nav-toggle:active{ transform:translateY(1px); }
.lv-nav-toggle span{
  display:block;width:19px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#FEC064,#FEB140);
  box-shadow:0 0 8px rgba(254,181,74,.35);
  transition:transform .3s var(--lv-ease),opacity .2s var(--lv-ease),width .3s var(--lv-ease);
}
.lv-nav-toggle span:nth-child(2){ margin:4px 0;width:14px;align-self:flex-start;margin-left:12.5px; } /* middle bar shorter, offset — distinctive */
.lv-nav-toggle.lv-open span:nth-child(1){ transform:translateY(6px) rotate(45deg);width:19px; }
.lv-nav-toggle.lv-open span:nth-child(2){ opacity:0; }
.lv-nav-toggle.lv-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg);width:19px; }

.lv-nav-backdrop{
  position:fixed;inset:0;z-index:1035;
  background:rgba(4,5,7,.6);backdrop-filter:blur(2px);
  animation:lvFade .2s var(--lv-ease);
}
@keyframes lvFade{ from{opacity:0} to{opacity:1} }
body.lv-nav-lock{ overflow:hidden; }

/* ============================================================
   MOBILE  (< 992px) — sidebar becomes off-canvas
   ============================================================ */
@media (max-width:991.98px){
  .lv-sidebar{
    transform:translateX(-100%);
    transition:transform .3s var(--lv-ease);
    box-shadow:24px 0 60px -20px rgba(0,0,0,.7);
    width:min(280px,84vw);
  }
  .lv-sidebar.lv-open{ transform:translateX(0); }
  .lv-main{ margin-left:0;width:100%;max-width:100%; }
  .lv-main::after{ left:0; }

  /* topbar stays persistent; hamburger left, logo center, actions right */
  .lv-topbar{ padding:.75rem 1rem;min-height:60px; }
  .lv-topbar-title{ display:none; }        /* no page title on mobile */
  .lv-topbar-logo{ display:flex; } /* full logo sits in the left group, next to hamburger */
  .lv-topbar-logo .lv-wordmark{ display:inline; } /* keep the full wordmark on mobile */
  .lv-topbar-left{ flex:0 0 auto; }
  .lv-nav-toggle{ display:flex !important; }
  .lv-top-guestlink:not(.lv-top-register){ display:none; }
  /* hide notification bell on mobile to save room (still in sidebar/pages) — keep cart + avatar */
}
/* hamburger is hidden on desktop (sidebar always visible there); logo hidden on desktop */
@media (min-width:992px){
  .lv-nav-toggle{ display:none !important; }
  .lv-topbar-logo{ display:none !important; }
}

/* ============================================================
   28. CART WIDGET (sidebar + topbar) + FOOTER SWITCHERS
   ============================================================ */

/* ---- sidebar cart ---- */
.lv-side-cart{
  position:relative;display:flex;align-items:center;gap:.75rem;
  margin-bottom:.75rem;padding:.6875rem .75rem;border-radius:11px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(254,181,74,.1), transparent 55%),
    var(--gray-800);
  border:1px solid rgba(254,181,74,.22);
  color:var(--gray-100);font-size:var(--text-md);font-weight:600;text-decoration:none;
  transition:border-color .2s var(--lv-ease),background .2s var(--lv-ease);
}
.lv-side-cart:hover{ border-color:rgba(254,181,74,.5);color:var(--gray-25); }
.lv-side-cart-ic{ display:inline-flex;color:var(--brand-500);flex:0 0 auto; }
.lv-side-cart-ic svg{ width:20px;height:20px; }
.lv-side-cart-label{ flex:1; }
.lv-side-cart-badge{
  min-width:20px;height:20px;padding:0 .375rem;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-500);color:#140E02;font-size:.6875rem;font-weight:800;line-height:1;
}

/* ---- topbar cart (mobile) ---- */
/* localisation modal styling is handled by .lv-modal (Section 40) */

.lv-footer-utils{ display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap; }
.lv-switchers{ display:flex;gap:.5rem;flex-wrap:wrap; }
.lv-switch{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;border-radius:10px;cursor:pointer;
  background:var(--gray-800);border:1px solid var(--lv-line);
  color:var(--gray-200);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;
  transition:border-color .2s var(--lv-ease),color .2s var(--lv-ease),background .2s var(--lv-ease);
}
.lv-switch:hover{ border-color:rgba(254,181,74,.4);color:var(--gray-25);background:var(--gray-700); }
.lv-switch svg{ width:16px;height:16px;flex:0 0 auto;color:var(--gray-400); }
.lv-switch:hover svg{ color:var(--brand-500); }
.lv-switch-caret{ width:14px !important;height:14px !important;margin-left:-.125rem; }

/* localisation modal styling is handled by .lv-modal (Section 40) */

@media (max-width:575.98px){
  .lv-footer-utils{ flex-direction:column-reverse;align-items:flex-start;gap:1rem;width:100%; }
}

/* ============================================================
   29. SIDEBAR NAV DROPDOWNS (expandable submenus)
   ============================================================ */
.lv-side-group{ display:flex;flex-direction:column; }
.lv-side-parent{
  /* it's a <button> styled exactly like .lv-side-link */
  width:100%;background:transparent;border:0;cursor:pointer;font:inherit;text-align:left;
}
.lv-side-parent .lv-side-chev{
  width:16px;height:16px;margin-left:auto;flex:0 0 auto;color:var(--gray-500);
  transition:transform .25s var(--lv-ease),color .2s var(--lv-ease);
}
.lv-side-group.is-open > .lv-side-parent .lv-side-chev{ transform:rotate(180deg);color:var(--brand-500); }
.lv-side-group.is-open > .lv-side-parent .lv-side-ic{ color:var(--brand-500); }

/* the submenu — collapsed by default, expands when parent group .is-open */
.lv-side-sub{
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin-left:2.1rem;position:relative;
  transition:max-height .3s var(--lv-ease),opacity .2s var(--lv-ease);
}
.lv-side-sub::before{
  content:"";position:absolute;left:-.5rem;top:.25rem;bottom:.5rem;width:1.5px;
  background:var(--lv-line);opacity:0;transition:opacity .2s var(--lv-ease);
}
.lv-side-group.is-open > .lv-side-sub{
  max-height:420px;   /* larger than any submenu; animates smoothly */
  opacity:1;
}
.lv-side-group.is-open > .lv-side-sub::before{ opacity:1; }
.lv-side-sublink{
  display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border-radius:8px;margin-top:.125rem;
  color:var(--gray-400);font-size:var(--text-sm);font-weight:500;text-decoration:none;
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.lv-side-sublink::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--gray-600);transition:background .15s var(--lv-ease),transform .15s var(--lv-ease);
}
.lv-side-sublink:first-child{ margin-top:.25rem; }
.lv-side-sublink:hover{ background:var(--gray-800);color:var(--gray-100); }
.lv-side-sublink:hover::before{ background:var(--gray-400); }
.lv-side-sublink.is-active{ color:var(--brand-500);font-weight:600; }
.lv-side-sublink.is-active::before{ background:var(--brand-500);transform:scale(1.2); }

/* ============================================================
   30. PAGE HEADER + BODY SPACING FIX
   (kills the giant hero-banner gap; tightens main-body)
   ============================================================ */
.lv-pagehead{
  padding:2rem 0 .5rem;
}
.lv-pagehead .container{ max-width:1140px; }
.lv-pagehead-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,3.5vw,2.5rem);letter-spacing:-.03em;
  color:var(--gray-25);margin:0;line-height:1.1;
}
.lv-pagehead-sub{ color:var(--gray-500);margin:.5rem 0 0;font-size:var(--text-md); }

/* main body: remove any inherited hero/top padding, keep content tight to header */
.lv-main #main-body{ padding-top:0 !important;padding-bottom:2.5rem; }
.lv-main #main-body > .container{ max-width:1140px;padding-top:1.25rem; }

/* kill leftover hero-banner classes from the parent theme if they appear */
.lv-main .hero-banner-eight,
.lv-main .bg-twelve{ padding:0 !important;background:none !important;min-height:0 !important; }

/* WHMCS contextual sidebar column — tidy it so it doesn't float oddly */
.lv-context-col .sidebar{ margin-bottom:1.5rem; }

/* ============================================================
   31. LAYOUT UNDERLAP + BLANK-SPACE HARD FIXES
   ============================================================ */
/* Parent theme puts big top padding on #main-body / its container via utility
   classes (pt-130 etc). Force it flush inside our shell. */
.lv-main #main-body{ margin-top:0 !important;padding-top:0 !important; }
/* NOTE: this previously read margin-left:0 !important;margin-right:auto,
   which overrode bootstrap's own margin-left:auto and pinned the container
   to the LEFT edge on every page. The notify zone centres with margin:0 auto,
   so the banner and the page content never lined up. Both margins auto. */
.lv-main #main-body > .container,
.lv-main #main-body > .container-fluid{
  margin-left:auto !important;margin-right:auto !important;
  padding-top:1rem !important;
}

/* The WHMCS contextual sidebar ("Your Info / Shortcuts") is redundant on the
   dashboard next to our nav sidebar, and its Bootstrap column was underlapping.
   Hide that column on the dashboard; keep it on inner pages that need it. */
body.primary-bg-color .lv-context-col{ /* stays visible on inner pages */ }

/* make the row wrap cleanly and never slide under the fixed nav sidebar */
.lv-main #main-body .row{ margin-left:0;margin-right:0; }
.lv-main .primary-content{ min-width:0; }

/* ============================================================
   32. DASHBOARD REDESIGN (clientareahome)
   ============================================================ */
.lv-dash{ display:flex;flex-direction:column;gap:1.25rem; }

/* ---- 3 stat cards ---- */
.lv-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
.lv-stat{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:16px;
  padding:1.375rem 1.5rem 1.5rem;text-decoration:none;overflow:hidden;
  transition:border-color .2s var(--lv-ease),transform .2s var(--lv-ease);
}
.lv-stat:hover{ border-color:var(--gray-700);transform:translateY(-2px); }
.lv-stat-num{ font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1;color:var(--gray-25); }
.lv-stat-label{ color:var(--gray-400);font-weight:600;font-size:var(--text-sm);margin-top:.5rem;text-transform:uppercase;letter-spacing:.06em; }
.lv-stat-ic{ display:inline-flex;color:var(--brand-500);opacity:.9; }
.lv-stat-ic svg{ width:26px;height:26px; }
.lv-stat-bar{ position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:3px;border-radius:3px 3px 0 0; }
.lv-bar-brand{ background:var(--brand-500); }
.lv-bar-info{ background:var(--blue-400); }
.lv-bar-warning{ background:var(--warning-500); }

/* ---- kb search (refresh) ---- */
.lv-kb-search{
  display:flex;align-items:center;gap:.75rem;
  background:var(--gray-900);border:1px solid var(--gray-700);border-radius:12px;
  padding:.875rem 1rem;transition:border-color .2s var(--lv-ease),box-shadow .2s var(--lv-ease);
}
.lv-kb-search:focus-within{ border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(254,181,74,.16); }
.lv-kb-search svg{ width:20px;height:20px;color:var(--gray-500);flex:0 0 auto; }
.lv-kb-input{ flex:1;background:transparent;border:0;outline:0;color:var(--gray-25);font-size:var(--text-md); }
.lv-kb-input::placeholder{ color:var(--gray-500); }

/* ---- card container ---- */
.lv-card{
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:16px;overflow:hidden;
}
.lv-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.125rem 1.375rem;border-bottom:1px solid var(--lv-line);
}
.lv-card-title{
  display:flex;align-items:center;gap:.625rem;margin:0;
  font-family:var(--font-heading);font-weight:400;font-size:1.125rem;color:var(--gray-25);letter-spacing:-.01em;
}
.lv-card-title svg{ width:19px;height:19px;color:var(--brand-500);flex:0 0 auto; }
.lv-card-link{
  color:var(--gray-400);font-size:var(--text-sm);font-weight:600;text-decoration:none;
  transition:color .18s var(--lv-ease);
}
.lv-card-link:hover{ color:var(--brand-500); }

.lv-grid-2{ display:grid;grid-template-columns:1fr 1fr;gap:1.25rem; }

/* ---- list rows ---- */
.lv-list{ display:flex;flex-direction:column; }
.lv-row{
  display:flex;align-items:center;gap:1rem;
  padding:.9375rem 1.375rem;border-bottom:1px solid var(--lv-line);
  text-decoration:none;
}
.lv-row:last-child{ border-bottom:0; }
.lv-row-link{ transition:background .15s var(--lv-ease); }
.lv-row-link:hover{ background:var(--gray-850,rgba(255,255,255,.02)); }
.lv-row-main{ flex:1;min-width:0; }
.lv-row-title{ color:var(--gray-25);font-weight:600;font-size:var(--text-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lv-row-sub{ color:var(--gray-500);font-size:var(--text-sm);margin-top:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lv-row-meta{ text-align:right;flex:0 0 auto; }
.lv-meta-label{ display:block;color:var(--gray-500);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em; }
.lv-meta-val{ display:block;color:var(--gray-200);font-size:var(--text-sm);font-weight:600;margin-top:.125rem; }
.lv-row-amt{ color:var(--gray-25);font-weight:700;font-size:var(--text-md);flex:0 0 auto; }

/* info button */
.lv-btn-info{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;
  background:var(--gray-800);border:1px solid var(--lv-line);color:var(--gray-300);text-decoration:none;
  transition:border-color .18s var(--lv-ease),color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-btn-info:hover{ border-color:rgba(254,181,74,.45);color:var(--brand-500);background:var(--gray-800); }
.lv-btn-info svg{ width:18px;height:18px; }

/* ---- status labels ---- */
.lv-status{
  flex:0 0 auto;display:inline-flex;align-items:center;
  padding:.25rem .625rem;border-radius:999px;
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid transparent;white-space:nowrap;
}
/* service statuses */
.lv-status-active{ background:rgba(87,204,125,.14);color:#57CC7D;border-color:rgba(87,204,125,.3); }
.lv-status-suspended{ background:rgba(252,135,18,.14);color:#FC8712;border-color:rgba(252,135,18,.3); }
.lv-status-pending{ background:rgba(254,181,74,.14);color:var(--brand-500);border-color:rgba(254,181,74,.3); }
.lv-status-terminated,.lv-status-cancelled{ background:rgba(252,93,93,.14);color:#FC5D5D;border-color:rgba(252,93,93,.3); }
/* invoice statuses */
.lv-status-paid{ background:rgba(87,204,125,.14);color:#57CC7D;border-color:rgba(87,204,125,.3); }
.lv-status-unpaid{ background:rgba(252,135,18,.14);color:#FC8712;border-color:rgba(252,135,18,.3); }
.lv-status-overdue{ background:rgba(252,93,93,.14);color:#FC5D5D;border-color:rgba(252,93,93,.3); }
.lv-status-cancelled,.lv-status-refunded{ background:var(--gray-800);color:var(--gray-400);border-color:var(--lv-line); }
.lv-status-collections{ background:rgba(252,93,93,.14);color:#FC5D5D;border-color:rgba(252,93,93,.3); }
/* ticket statuses */
.lv-tstatus-open{ background:rgba(87,204,125,.14);color:#57CC7D;border-color:rgba(87,204,125,.3); }
.lv-tstatus-answered{ background:rgba(88,150,255,.14);color:#7CA9FF;border-color:rgba(88,150,255,.3); }
.lv-tstatus-customer-reply,.lv-tstatus-customerreply{ background:rgba(254,181,74,.14);color:var(--brand-500);border-color:rgba(254,181,74,.3); }
.lv-tstatus-closed{ background:var(--gray-800);color:var(--gray-400);border-color:var(--lv-line); }
.lv-tstatus-onhold,.lv-tstatus-inprogress{ background:rgba(182,92,255,.14);color:#C88CFF;border-color:rgba(182,92,255,.3); }

/* news dot */
.lv-news-dot{ width:8px;height:8px;border-radius:50%;background:var(--brand-500);flex:0 0 auto;box-shadow:0 0 0 3px rgba(254,181,74,.15); }

/* empty state */
.lv-empty{ padding:2rem 1.375rem;text-align:center;color:var(--gray-500);font-size:var(--text-md); }
.lv-empty a{ color:var(--brand-500);text-decoration:none; }

/* responsive */
@media (max-width:767.98px){
  .lv-stats{ grid-template-columns:1fr;gap:.75rem; }
  .lv-grid-2{ grid-template-columns:1fr; }
  .lv-row{ flex-wrap:wrap;gap:.625rem .875rem; }
  .lv-row-meta{ text-align:left; }
}

/* ============================================================
   33. RESPONSIVE BLOOM
   Desktop bloom is wide & anchored bottom-right; retune for
   tablet/phone so it stays balanced and doesn't dominate.
   ============================================================ */
@media (max-width:991.98px){
  .lv-main::after,
  body::before{
    height:44vh;
    background:
      radial-gradient(70% 130% at 50% 125%, rgba(255,150,60,.55) 0%, rgba(235,120,55,.30) 34%, rgba(200,100,50,.11) 58%, transparent 74%);
  }
}
@media (max-width:575.98px){
  .lv-main::after,
  body::before{
    height:40vh;
    background:
      radial-gradient(90% 130% at 50% 128%, rgba(255,150,60,.52) 0%, rgba(235,120,55,.28) 36%, rgba(200,100,50,.10) 60%, transparent 76%);
  }
}

/* ============================================================
   34. EXTENDED ELEMENT COVERAGE + TYPOGRAPHY POLISH
   Skins remaining native WHMCS / Bootstrap elements to match.
   ============================================================ */

/* text-rendering polish across the whole client area */
.lv-main,.lv-sidebar,.lv-footer,.lv-auth{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.lv-main a{ color:var(--brand-500);text-decoration:none;transition:color .15s var(--lv-ease); }
.lv-main a:hover{ color:var(--brand-400); }
.lv-main strong,.lv-main b{ font-weight:600;color:var(--gray-100); }
.lv-main hr{ border:0;border-top:1px solid var(--lv-line);margin:1.5rem 0; }
.lv-main .text-muted{ color:var(--gray-500) !important; }
.lv-main .text-center{ text-align:center; }

/* ---- Breadcrumbs ---- */
.lv-main .breadcrumb{
  background:transparent;padding:0;margin:0 0 1.25rem;font-size:var(--text-sm);
  display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;
}
.lv-main .breadcrumb-item{ color:var(--gray-500); }
.lv-main .breadcrumb-item a{ color:var(--gray-400);font-weight:500; }
.lv-main .breadcrumb-item a:hover{ color:var(--brand-500); }
.lv-main .breadcrumb-item.active{ color:var(--gray-200); }
.lv-main .breadcrumb-item + .breadcrumb-item::before{ content:"/";color:var(--gray-600);padding:0 .375rem; }

/* ---- Pagination (native WHMCS) ---- */
.lv-main .pagination{ display:inline-flex;gap:.375rem;padding:0;margin:1rem 0; }
.lv-main .pagination .page-item .page-link,
.lv-main .pagination li a,
.lv-main .pagination li span{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--gray-900);border:1px solid var(--gray-700);border-radius:9px;
  color:var(--gray-300);font-size:var(--text-sm);font-weight:600;
}
.lv-main .pagination .page-item.active .page-link,
.lv-main .pagination li.active span,
.lv-main .pagination li.active a{ background:var(--brand-500);border-color:var(--brand-500);color:#140E02; }
.lv-main .pagination .page-link:hover{ background:var(--gray-800);color:var(--gray-25);border-color:var(--gray-600); }
.lv-main .pagination .disabled .page-link{ opacity:.4; }

/* ---- Native Bootstrap dropdowns (account menus, action menus) ---- */
.lv-main .dropdown-menu,.lv-sidebar .dropdown-menu{
  background:var(--gray-900);border:1px solid var(--gray-700);border-radius:12px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.7);padding:.375rem;font-size:var(--text-sm);
}
.dropdown-menu .dropdown-item{
  color:var(--gray-300);border-radius:8px;padding:.5rem .75rem;font-weight:500;
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{ background:var(--gray-800);color:var(--gray-25); }
.dropdown-menu .dropdown-item.active{ background:var(--brand-500);color:#140E02; }
.dropdown-menu .dropdown-divider{ border-color:var(--lv-line);margin:.375rem 0; }
.dropdown-menu .dropdown-header{ color:var(--gray-500);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;padding:.5rem .75rem; }

/* ---- Nav tabs (polish) ---- */
.lv-main .nav-tabs{ border-bottom:1px solid var(--lv-line);gap:.25rem;margin-bottom:1.25rem; }
.lv-main .nav-tabs .nav-link{
  background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;
  color:var(--gray-400);font-weight:600;font-size:var(--text-md);padding:.75rem 1rem;
  transition:color .18s var(--lv-ease),border-color .18s var(--lv-ease);
}
.lv-main .nav-tabs .nav-link:hover{ color:var(--gray-100);border-bottom-color:var(--gray-600); }
.lv-main .nav-tabs .nav-link.active{ color:var(--brand-500);border-bottom-color:var(--brand-500);background:transparent; }
/* pills */
.lv-main .nav-pills .nav-link{ border-radius:10px;color:var(--gray-400);font-weight:600; }
.lv-main .nav-pills .nav-link.active{ background:var(--brand-500);color:#140E02; }

/* ---- Modals (native) ---- */
.lv-main .modal-content,.modal-content{
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:16px;color:var(--gray-100);
}
.modal-content .modal-header{ border-bottom:1px solid var(--lv-line);padding:1.25rem 1.5rem; }
.modal-content .modal-title{ font-family:var(--font-heading);font-weight:400;color:var(--gray-25); }
.modal-content .modal-body{ padding:1.5rem; }
.modal-content .modal-footer{ border-top:1px solid var(--lv-line);padding:1rem 1.5rem;gap:.5rem; }
.modal-content .close,.modal-content .btn-close{ color:var(--gray-400);opacity:1;text-shadow:none; }
.modal-backdrop.show{ opacity:.7; }

/* ---- Progress bars (native) ---- */
.lv-main .progress{ background:var(--gray-800);border-radius:999px;height:8px;overflow:hidden; }
.lv-main .progress-bar{ background:var(--brand-500);border-radius:999px; }

/* ---- Code / pre / kbd ---- */
.lv-main code{ background:var(--gray-800);color:#FFB98A;padding:.125rem .375rem;border-radius:6px;font-size:.85em; }
.lv-main pre{ background:var(--gray-950);border:1px solid var(--lv-line);border-radius:12px;padding:1rem;color:var(--gray-200);overflow:auto; }
.lv-main kbd{ background:var(--gray-800);color:var(--gray-100);border:1px solid var(--gray-700);border-radius:6px;padding:.125rem .375rem;font-size:.85em; }
.lv-main blockquote{ border-left:3px solid var(--brand-500);padding:.5rem 0 .5rem 1rem;margin:1rem 0;color:var(--gray-300); }

/* ---- Well / card (bootstrap) ---- */
.lv-main .well,.lv-main .card{
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:14px;color:var(--gray-200);
}
.lv-main .card-header{ background:transparent;border-bottom:1px solid var(--lv-line);font-family:var(--font-heading);font-weight:400;color:var(--gray-25); }
.lv-main .card-footer{ background:transparent;border-top:1px solid var(--lv-line); }

/* ---- Tables: refine header + rows ---- */
.lv-main .table thead th{
  font-family:var(--font-heading);font-weight:400;font-size:var(--text-sm);
  text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);
  border-bottom:1px solid var(--lv-line);padding:.75rem 1rem;
}
.lv-main .table td{ border-top:1px solid var(--lv-line);padding:.875rem 1rem;color:var(--gray-200);vertical-align:middle; }
.lv-main .table-hover tbody tr:hover{ background:rgba(255,255,255,.02); }

/* ---- Form refinements: labels, selects, checks, validation ---- */
.lv-main label{ font-family:var(--font-ui);font-weight:500;color:var(--gray-300);margin-bottom:.375rem; }
.lv-main .form-control,.lv-main .form-select,.lv-main select.form-control{
  background:var(--gray-900) !important;border:1px solid var(--gray-700) !important;border-radius:11px !important;
  color:var(--gray-25) !important;padding:.6875rem .875rem !important;font-size:var(--text-md) !important;
  transition:border-color .2s var(--lv-ease),box-shadow .2s var(--lv-ease);
}
.lv-main .form-control:focus,.lv-main .form-select:focus{
  border-color:var(--brand-500) !important;box-shadow:0 0 0 3px rgba(254,181,74,.16) !important;outline:0;
}
.lv-main .form-control::placeholder{ color:var(--gray-500); }
.lv-main .form-text,.lv-main .help-block{ color:var(--gray-500);font-size:var(--text-sm);margin-top:.375rem; }
.lv-main .is-invalid,.lv-main .has-error .form-control{ border-color:var(--error-500) !important; }
.lv-main .invalid-feedback,.lv-main .text-danger{ color:var(--error-400) !important;font-size:var(--text-sm); }
.lv-main .is-valid{ border-color:var(--success-500) !important; }

/* input-group addons */
.lv-main .input-group-text{
  background:var(--gray-800);border:1px solid var(--gray-700);color:var(--gray-400);border-radius:11px;
}

/* ---- Tooltips / popovers (native) ---- */
.tooltip .tooltip-inner{ background:var(--gray-800);color:var(--gray-100);border-radius:8px;font-size:var(--text-sm);padding:.375rem .625rem; }
.popover{ background:var(--gray-900);border:1px solid var(--gray-700);border-radius:12px; }
.popover .popover-header{ background:transparent;border-bottom:1px solid var(--lv-line);color:var(--gray-25);font-family:var(--font-heading); }
.popover .popover-body{ color:var(--gray-300); }

/* ---- Definition lists / info rows commonly used on detail pages ---- */
.lv-main dl dt{ color:var(--gray-500);font-weight:500;font-size:var(--text-sm); }
.lv-main dl dd{ color:var(--gray-100);margin-bottom:.75rem; }

/* ---- Pager numbers already styled in §22; ensure font ---- */
.lv-main .btn{ font-family:var(--font-ui);font-weight:600;letter-spacing:.005em; }

/* ============================================================
   35. ADDON / NOTIFICATION PANELS (WHMCS $panels + addons_html)
   Styles third-party dashboard widgets to match Lumvara.
   ============================================================ */
.lv-addon-panels{ margin-top:.25rem; }
.lv-panel{
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:1.5rem;overflow:hidden;
}
.lv-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 1.5rem;border-bottom:1px solid var(--lv-line);
}
.lv-panel-title{
  display:flex;align-items:center;gap:.5rem;margin:0;
  font-family:var(--font-heading);font-weight:400;font-size:1.0625rem;color:var(--gray-25);
}
.lv-panel-title i{ color:var(--brand-500);font-size:1rem; }
.lv-panel-badge{
  display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:999px;
  background:var(--brand-500);color:#140E02;font-size:.6875rem;font-weight:700;
}
.lv-panel-btn{
  display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9px;
  background:var(--gray-800);border:1px solid var(--lv-line);color:var(--gray-200);
  font-size:var(--text-sm);font-weight:600;text-decoration:none;transition:all .18s var(--lv-ease);
}
.lv-panel-btn:hover{ border-color:rgba(254,181,74,.45);color:var(--brand-500); }
.lv-panel-body{ padding:1.25rem 1.5rem;color:var(--gray-200); }
.lv-panel-body a{ color:var(--brand-500); }
.lv-panel-list{ display:flex;flex-direction:column; }
.lv-panel-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.875rem 1.5rem;border-top:1px solid var(--lv-line);
  color:var(--gray-200);text-decoration:none;font-size:var(--text-md);
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.lv-panel-item:hover{ background:rgba(255,255,255,.02);color:var(--gray-25); }
.lv-panel-item.is-active{ color:var(--brand-500);font-weight:600; }
.lv-panel-item i{ color:var(--gray-500);width:16px;text-align:center; }
.lv-panel-foot{ padding:1rem 1.5rem;border-top:1px solid var(--lv-line);color:var(--gray-400);font-size:var(--text-sm); }

/* Third-party addon HTML (addons_html) — force its Bootstrap panels/alerts dark */
.lv-addon-html{ margin-top:.25rem; }
.lv-addon-html .panel,
.lv-addon-html .well,
.lv-addon-html .card{
  background:var(--gray-900) !important;border:1px solid var(--lv-line) !important;border-radius:1.25rem !important;
  color:var(--gray-200) !important;overflow:hidden;
}
.lv-addon-html .panel-heading,
.lv-addon-html .card-header{
  background:transparent !important;border-bottom:1px solid var(--lv-line) !important;
  color:var(--gray-25) !important;font-family:var(--font-heading);font-weight:400;
}
.lv-addon-html .panel-title{ color:var(--gray-25) !important;font-size:1.0625rem !important; }
.lv-addon-html .panel-body,.lv-addon-html .card-body{ color:var(--gray-200) !important; }
.lv-addon-html .panel-footer,.lv-addon-html .card-footer{
  background:transparent !important;border-top:1px solid var(--lv-line) !important;color:var(--gray-400) !important;
}
.lv-addon-html .list-group-item{
  background:transparent !important;border-color:var(--lv-line) !important;color:var(--gray-200) !important;
}
.lv-addon-html a{ color:var(--brand-500); }

/* ============================================================
   36. CLIENT-AREA NOTIFICATION BANNER ZONE
   WHMCS $clientAlerts (overdue invoice, expiring domain, email
   verification, etc.) — rendered at the top of the content.
   ============================================================ */
.lv-notify-zone{ position:relative;z-index:1; }
/* Must track .lv-main #main-body > .container exactly (max-width:1140px +
   bootstrap's gutter of calc(--bs-gutter-x * .5) = 12px a side), otherwise
   the banner overhangs the dashboard cards and the page reads as lopsided. */
.lv-notify-inner{
  max-width:1140px;margin:0 auto;
  padding:1.25rem calc(var(--bs-gutter-x, 1.5rem) * .5) 0;
  display:flex;flex-direction:column;gap:.75rem;
}
/* the anchor is a zero-height injection target for JS module banners (e.g. DiditKYC, Passkeys) */
.lv-notify-anchor{ height:0;margin:0;padding:0;border:0;order:-1; }
/* WHMCS's theme.css (loaded by head.tpl) ships:
     .main-content{ margin-bottom:60px; min-height:300px; }
   and .lv-notify-inner carries that class, so the zone reserved 360px the
   moment it held a real banner. The :not(:has()) rules below only cancelled
   it while the zone was EMPTY, which is why the gap appeared as soon as the
   verification banner started rendering. Neutralise it unconditionally. */
.lv-notify-inner.main-content{ min-height:0;margin-bottom:0; }
.lv-notify-zone.content-wrapper{ min-height:0;margin-bottom:0; }

/* collapse padding when empty, but DON'T display:none (breaks JS banner injection into .main-content) */
.lv-notify-inner:not(:has(> :not(.lv-notify-anchor))){ padding:0 !important;gap:0;min-height:0; }
.lv-notify-zone:not(:has(.lv-notify-inner > :not(.lv-notify-anchor))){ min-height:0; }
/* when the zone HAS a real banner, give it proper spacing */
.lv-notify-inner:has(> :not(.lv-notify-anchor)){ padding:1rem calc(var(--bs-gutter-x, 1.5rem) * .5) 0; }

/* individual alert banner
   Layout contract:
     desktop -> ONE line:  [dot] [title . desc ....flex....] [button] [x]
     mobile  -> TWO lines: [dot] [title . desc] [x]
                           [button]
   Severity drives --lv-alert-dot and --lv-alert-tint so the dot, the
   fade and the action button can never drift apart. */
.lv-alert{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.875rem;flex-wrap:nowrap;
  padding:.8125rem 1rem;
  border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:#0B0C0F;
  --lv-alert-dot:#9AA4B3;
  --lv-alert-tint:rgba(154,164,179,.16);
}
.lv-alert::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--lv-alert-tint) 0%, rgba(0,0,0,0) 62%);
}
.lv-alert > *{ position:relative;z-index:1; }

/* dot tile */
.lv-alert-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
}
.lv-alert-icon::before{
  content:'';width:9px;height:9px;border-radius:999px;background:var(--lv-alert-dot);
}
/* legacy markup shipped an <svg> here; the design uses a dot */
.lv-alert-icon svg{ display:none; }

/* title + desc sit inline on one line, wrapping only if they must */
.lv-alert-body{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
}
.lv-alert-title{
  font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:#fff;line-height:1.45;
}
.lv-alert-desc{
  font-size:.8125rem;color:var(--gray-400);line-height:1.45;
}

/* action slot — a real button, right-aligned on desktop */
.lv-alert-actions{
  flex:0 0 auto;display:flex;align-items:center;gap:.5rem;
}
.lv-alert-actions .lv-btn{
  padding:.4375rem .875rem;font-size:.75rem;white-space:nowrap;
}
/* tint the ghost button to the severity */
.lv-alert .lv-btn-ghost{
  border-color:color-mix(in srgb, var(--lv-alert-dot) 45%, transparent);
  color:var(--lv-alert-dot);
}
.lv-alert .lv-btn-ghost:hover{
  background:color-mix(in srgb, var(--lv-alert-dot) 12%, transparent);
  border-color:var(--lv-alert-dot);
}
/* inline text-link variant (used where there's no button) */
.lv-alert-link{
  flex:0 0 auto;display:inline-block;padding:0;margin:0;
  background:none;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--font-ui);font-size:.8125rem;font-weight:600;
  color:var(--lv-alert-dot);text-decoration:none;
  transition:opacity .16s var(--lv-ease);
}
.lv-alert-link:hover{ opacity:.75;text-decoration:none; }
.lv-main .lv-alert-link{ color:var(--lv-alert-dot); }

.lv-alert-x{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--gray-500);
  transition:background .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-alert-x svg{ width:15px;height:15px; }
.lv-alert-x:hover{ background:rgba(255,255,255,.08);color:#fff; }

/* severities — set the dot colour + the fade tint */
.lv-alert-danger{  --lv-alert-dot:#FC5D5D; --lv-alert-tint:rgba(252,93,93,.24); }
.lv-alert-warning{ --lv-alert-dot:#FDB022; --lv-alert-tint:rgba(253,176,34,.24); }
.lv-alert-success{ --lv-alert-dot:#57CC7D; --lv-alert-tint:rgba(87,204,125,.24); }
.lv-alert-info{    --lv-alert-dot:#7CA9FF; --lv-alert-tint:rgba(124,169,255,.24); }
.lv-alert-neutral{ --lv-alert-dot:#9AA4B3; --lv-alert-tint:rgba(154,164,179,.14); }

/* Bootstrap .alert fallback (in case a WHMCS include emits raw .alert markup) */
.lv-notify-zone .alert{
  border-radius:14px;border:1px solid var(--lv-line);
  background:var(--gray-900);color:var(--gray-100);padding:.9375rem 1.125rem;margin:0;
}
.lv-notify-zone .alert-danger{ background:rgba(252,93,93,.10);border-color:rgba(252,93,93,.28);color:#FFC9C9; }
.lv-notify-zone .alert-warning{ background:rgba(253,176,34,.10);border-color:rgba(253,176,34,.28);color:#FFE2AC; }
.lv-notify-zone .alert-success{ background:rgba(87,204,125,.10);border-color:rgba(87,204,125,.28);color:#B6E9C6; }
.lv-notify-zone .alert-info{ background:rgba(88,150,255,.10);border-color:rgba(88,150,255,.28);color:#C3D6FF; }
.lv-notify-zone .alert a{ color:var(--brand-500);font-weight:600; }

/* email verification banner (WHMCS emits its own block) */
.lv-notify-zone .verify-email,
.lv-notify-zone #verifyEmailBanner{
  border-radius:14px;border:1px solid rgba(254,181,74,.28);background:rgba(254,181,74,.10);
  color:var(--gray-100);padding:.9375rem 1.125rem;
}

/* ============================================================
   37. MODULE HOOK BANNERS (ClientAreaPageHeaderOutput etc.)
   Dark-theme any alert/notice HTML modules inject via hooks,
   wherever it lands (top of body or the notify zone).
   ============================================================ */
/* content injected right after <body> via ClientAreaHeaderOutput */
body.primary-bg-color > .alert,
body.primary-bg-color > .notification,
body.primary-bg-color > .announcement{
  max-width:1200px;margin:1rem auto 0;border-radius:14px;
  border:1px solid var(--lv-line);background:var(--gray-900);color:var(--gray-100);
  padding:.9375rem 1.125rem;
}
/* any alert/notice/announcement inside the notify zone (module banners) */
.lv-notify-zone .alert,
.lv-notify-zone .notification,
.lv-notify-zone .announcement,
.lv-notify-zone .promo-banner,
.lv-notify-zone [class*="banner"]:not(.lv-alert){
  border-radius:14px;padding:.9375rem 1.125rem;margin:0;
  border:1px solid var(--lv-line);background:var(--gray-900);color:var(--gray-100);
}
.lv-notify-zone .alert-danger,.lv-notify-zone .notification-danger{ background:rgba(252,93,93,.10) !important;border-color:rgba(252,93,93,.28) !important;color:#FFC9C9 !important; }
.lv-notify-zone .alert-warning,.lv-notify-zone .notification-warning{ background:rgba(253,176,34,.10) !important;border-color:rgba(253,176,34,.28) !important;color:#FFE2AC !important; }
.lv-notify-zone .alert-success,.lv-notify-zone .notification-success{ background:rgba(87,204,125,.10) !important;border-color:rgba(87,204,125,.28) !important;color:#B6E9C6 !important; }
.lv-notify-zone .alert-info,.lv-notify-zone .notification-info{ background:rgba(88,150,255,.10) !important;border-color:rgba(88,150,255,.28) !important;color:#C3D6FF !important; }
.lv-notify-zone .alert a,.lv-notify-zone .notification a,.lv-notify-zone [class*="banner"]:not(.lv-alert) a{ color:var(--brand-500);font-weight:600; }
/* dismiss buttons in module banners */
.lv-notify-zone .close,.lv-notify-zone .btn-close{ color:var(--gray-400);opacity:1;text-shadow:none;background:transparent;border:0; }

/* module-injected banners (DiditKYC #dkw-bar etc.) land in the notify zone */
.lv-notify-inner > #dkw-bar,
.lv-notify-inner > [id*="banner"],
.lv-notify-inner > [id*="-bar"]{ margin-bottom:0 !important; }

/* ============================================================
   38. MODULE-INJECTED SIDEBAR ITEMS
   Render ClientAreaPrimarySidebar hook items in the left nav.
   ============================================================ */
.lv-side-module{ /* inherits .lv-side-link / .lv-side-group styling */ }
/* FontAwesome icon variant for module items that supply their own icon class */
.lv-side-ic-fa{
  width:20px;flex:0 0 auto;text-align:center;font-size:1rem;color:var(--gray-400);
  transition:color .2s var(--lv-ease);
}
.lv-side-link:hover .lv-side-ic-fa,
.lv-side-link.is-active .lv-side-ic-fa,
.lv-side-group.is-open > .lv-side-parent .lv-side-ic-fa{ color:var(--brand-500); }
/* small divider above module items so they're visually grouped */
.lv-side-module:first-of-type{ margin-top:.5rem;padding-top:.5rem;position:relative; }
.lv-side-nav > .lv-side-module:first-of-type::before,
.lv-side-nav > .lv-side-group.lv-side-module:first-of-type::before{
  content:"";position:absolute;top:0;left:.75rem;right:.75rem;height:1px;background:var(--lv-line);
}

/* module items in the account dropdown (ClientAreaSecondaryNavbar) */
.lv-menu .dropdown-item i{ width:16px;text-align:center;margin-right:.5rem;color:var(--gray-500); }
.lv-menu .dropdown-item:hover i{ color:var(--brand-500); }

/* ============================================================
   39. KILL BLANK SPACE ABOVE DASHBOARD (notify zone + main-body)
   ============================================================ */
/* remove Bootstrap row/container gutters adding space in main-body */
.lv-main #main-body > .container > .row{ margin:0; }
.lv-main #main-body > .container > .row > .primary-content{ padding:0; }
/* dashboard starts flush under the notify zone / topbar */
.lv-main #main-body{ padding-top:.5rem !important; }
.lv-main #main-body > .container{ padding-top:.5rem !important; }
.lv-dash{ margin-top:0; }
.lv-dash > :first-child{ margin-top:0; }
/* if a module banner sits in the notify zone, keep a tidy gap, no more */
.lv-notify-zone + #main-body,
.lv-notify-zone ~ #main-body{ padding-top:0 !important; }
/* collapse any empty divs modules may leave behind in the content flow */
#main-body > .container > .row > .primary-content > div:empty:not([id]):not([class]){ display:none; }

/* ============================================================
   40. CLICKABLE NOTIFICATION CARDS + LOCALISATION MODAL
   ============================================================ */
/* notification cards are now <a> links */
a.lv-bell-card{ text-decoration:none;cursor:pointer;transition:border-color .15s var(--lv-ease),background .15s var(--lv-ease); }
a.lv-bell-card:hover{ border-color:var(--gray-700);background:var(--gray-900); }
.lv-bell-arrow{ width:16px;height:16px;flex:0 0 auto;align-self:center;color:var(--gray-600);opacity:0;transform:translateX(-4px);transition:opacity .15s var(--lv-ease),transform .15s var(--lv-ease); }
a.lv-bell-card:hover .lv-bell-arrow{ opacity:1;transform:translateX(0); }

/* localisation modal — solid dark, fully clickable */
.lv-modal .modal-content{
  background:var(--lv-elevated) !important;border:1px solid var(--lv-line) !important;border-radius:16px !important;
  color:var(--gray-100);box-shadow:0 30px 80px -20px rgba(0,0,0,.8) !important;
}
.lv-modal .modal-header{ border-bottom:1px solid var(--lv-line) !important;padding:1.125rem 1.25rem; }
.lv-modal .modal-title{ font-family:var(--font-heading);font-weight:400;color:var(--gray-25);font-size:1.0625rem; }
.lv-modal .modal-body{ padding:1.25rem; }
.lv-modal .modal-footer{ border-top:1px solid var(--lv-line) !important;padding:1rem 1.25rem; }
.lv-loc-heading{ margin:1.25rem 0 .75rem;font-family:var(--font-heading);font-weight:400;color:var(--gray-25);font-size:.9375rem; }
.lv-loc-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem; }
.lv-loc-item{
  display:block;padding:.625rem .75rem;border-radius:10px;text-align:center;
  border:1px solid var(--lv-line);background:var(--gray-950);color:var(--gray-200);
  font-size:var(--text-sm);font-weight:500;text-decoration:none;cursor:pointer;
  transition:border-color .15s var(--lv-ease),background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.lv-loc-item:hover{ border-color:var(--gray-700);background:var(--gray-900);color:var(--gray-25); }
.lv-loc-item.active{ border-color:var(--brand-500);background:rgba(254,181,74,.12);color:var(--brand-400); }
/* ensure the modal backdrop sits BEHIND the modal (fixes "blurry/not clickable") */
.modal-backdrop{ z-index:1050 !important; }
.lv-modal{ z-index:1055 !important; }
.lv-modal .modal-dialog{ z-index:1056; }

/* ============================================================
   41. DASHBOARD LIST ROWS + SECTION ICONS
   ============================================================ */
/* separator line between list rows (services, invoices) */
.lv-list-row + .lv-list-row{ border-top:1px solid rgba(255,255,255,.05); }
.lv-list-row{ position:relative; }

/* styled section-header icon tiles — gradient-filled, elevated */
.lv-sec-ic{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.lv-sec-ic svg{ width:18px;height:18px;position:relative;z-index:1; }
.lv-sec-ic-brand{ background:linear-gradient(135deg,rgba(254,181,74,.28),rgba(254,181,74,.08));color:#FEC05A;border:1px solid rgba(254,181,74,.22); }
.lv-sec-ic-pink{ background:linear-gradient(135deg,rgba(214,90,160,.28),rgba(214,90,160,.08));color:#E88AC0;border:1px solid rgba(214,90,160,.22); }
.lv-sec-ic-violet{ background:linear-gradient(135deg,rgba(182,92,255,.28),rgba(182,92,255,.08));color:#C88CFF;border:1px solid rgba(182,92,255,.22); }
.lv-sec-ic-blue{ background:linear-gradient(135deg,rgba(88,150,255,.28),rgba(88,150,255,.08));color:#7CA9FF;border:1px solid rgba(88,150,255,.22); }

/* tighten gap around module banners in the notify zone */
.lv-notify-inner #tp-dash-banner,
.lv-notify-inner #dkw-bar,
.lv-notify-inner [id*="banner"],
.lv-notify-inner [id*="-bar"]{ margin-bottom:0 !important; }
.lv-notify-zone:has(.lv-notify-inner > :not(.lv-notify-anchor)) + #main-body > .container,
.lv-notify-zone:has(.lv-notify-inner > :not(.lv-notify-anchor)) ~ #main-body > .container{ padding-top:1rem !important; }

/* ============================================================
   42. FILTER TABS + SEARCH (services / listing pages)
   ============================================================ */
.lv-filter-tabs{
  display:inline-flex;gap:.25rem;padding:.3125rem;border-radius:12px;
  background:var(--gray-900);border:1px solid var(--lv-line);flex-wrap:wrap;
}
.lv-filter-tab{
  padding:.4375rem .875rem;border-radius:9px;border:0;background:transparent;cursor:pointer;
  color:var(--gray-400);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;
  transition:background .15s var(--lv-ease),color .15s var(--lv-ease);
}
.lv-filter-tab:hover{ color:var(--gray-100); }
.lv-filter-tab.is-active{ background:var(--brand-500);color:#140E02; }

.lv-filter-search{
  display:inline-flex;align-items:center;gap:.5rem;min-width:220px;
  padding:.5rem .875rem;border-radius:12px;
  background:var(--gray-900);border:1px solid var(--lv-line);
  transition:border-color .15s var(--lv-ease);
}
.lv-filter-search:focus-within{ border-color:var(--brand-500); }
.lv-filter-search svg{ width:18px;height:18px;flex:0 0 auto;color:var(--gray-500); }
.lv-filter-search input{
  flex:1;border:0;background:transparent;outline:none;color:var(--gray-25);
  font-family:var(--font-ui);font-size:var(--text-sm);min-width:0;
}
.lv-filter-search input::placeholder{ color:var(--gray-500); }

/* "Buy Subscription" button — force dark text over the global .lv-main a amber rule */
.lv-main a.lv-btn-buy,
.lv-main a.lv-btn-buy:hover{ color:#140E02 !important; }
.lv-btn-buy svg{ color:#140E02; }

/* ============================================================
   43. AGGRESSIVE GAP KILL (notify zone -> dashboard)
   Nuclear option: zero out every possible spacer in the chain.
   ============================================================ */
.lv-main > .lv-notify-zone{ flex:0 0 auto; }
.lv-main > #main-body{ margin-top:0 !important; }
.lv-main > #main-body > .container{ margin-top:0 !important; }
.lv-main > #main-body > .container > .row{ margin-top:0 !important; }
.lv-main > #main-body > .container > .row > .primary-content{ margin-top:0 !important;padding-top:0 !important; }
/* flashmessage wrapper if empty */
.primary-content > .alert:empty,
.primary-content > div:empty:first-child{ display:none !important;margin:0 !important; }
/* the dashboard tailwind wrapper — no top margin */
.primary-content > .tw-flex:first-child,
.primary-content > .tw-flex.tw-flex-col:first-child{ margin-top:0 !important; }

/* ============================================================
   44. PRODUCT DETAILS PAGE (clientareaproductdetails)
   ============================================================ */
.lv-pd-overview{ display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem; }

/* hero */
.lv-pd-hero{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.5rem 1.75rem;border-radius:18px;position:relative;overflow:hidden;
  background:var(--gray-900);border:1px solid var(--lv-line);
}
.lv-pd-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 100% 0%, rgba(254,181,74,.14) 0%, transparent 55%);
}
.lv-pd-hero-active::after{ background:radial-gradient(120% 140% at 100% 0%, rgba(87,204,125,.16) 0%, transparent 55%); }
.lv-pd-hero-suspended::after{ background:radial-gradient(120% 140% at 100% 0%, rgba(255,170,60,.16) 0%, transparent 55%); }
.lv-pd-hero-terminated::after,
.lv-pd-hero-cancelled::after,
.lv-pd-hero-fraud::after{ background:radial-gradient(120% 140% at 100% 0%, rgba(240,90,110,.15) 0%, transparent 55%); }
.lv-pd-hero-main{ display:flex;align-items:center;gap:1rem;position:relative;z-index:1;min-width:0; }
.lv-pd-hero-ic{
  display:grid;place-items:center;width:56px;height:56px;flex:0 0 auto;border-radius:14px;
  background:linear-gradient(135deg,rgba(254,181,74,.24),rgba(254,181,74,.06));
  color:var(--brand-400);border:1px solid rgba(254,181,74,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.lv-pd-hero-ic svg{ width:28px;height:28px; }
.lv-pd-hero-txt{ min-width:0; }
.lv-pd-name{
  margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--gray-25);line-height:1.15;word-break:break-word;
}
.lv-pd-group{ margin:.25rem 0 0;color:var(--gray-400);font-size:var(--text-sm);font-weight:500; }
.lv-pd-hero-status{ position:relative;z-index:1;font-size:.8125rem;padding:.5rem .875rem; }

/* action buttons */
.lv-pd-actions{ display:flex;gap:.75rem;flex-wrap:wrap; }
.lv-main a.lv-pd-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.25rem;border-radius:12px;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:all .16s var(--lv-ease);
}
.lv-pd-btn svg{ width:17px;height:17px;flex:0 0 auto; }
.lv-main a.lv-pd-btn-upgrade{ background:var(--brand-500);color:#140E02 !important;border-color:var(--brand-500); }
.lv-main a.lv-pd-btn-upgrade:hover{ background:var(--brand-400);border-color:var(--brand-400); }
.lv-main a.lv-pd-btn-renew{ background:var(--gray-800);color:var(--gray-100) !important;border-color:var(--lv-line); }
.lv-main a.lv-pd-btn-renew:hover{ border-color:rgba(254,181,74,.4);color:var(--brand-500) !important; }
.lv-main a.lv-pd-btn-cancel{ background:transparent;color:#F0798B !important;border-color:rgba(240,90,110,.3); }
.lv-main a.lv-pd-btn-cancel:hover{ background:rgba(240,90,110,.08);border-color:rgba(240,90,110,.5); }
.lv-main a.lv-pd-btn.lv-disabled{ opacity:.5;pointer-events:none; }

/* info grid */
.lv-pd-info{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--lv-line);border:1px solid var(--lv-line);border-radius:16px;overflow:hidden;
}
.lv-pd-info-item{
  display:flex;flex-direction:column;gap:.375rem;
  padding:1.125rem 1.25rem;background:var(--gray-900);
}
.lv-pd-info-full{ grid-column:1/-1; }
.lv-pd-info-label{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gray-500);font-weight:600;
}
.lv-pd-info-value{ font-size:var(--text-md);color:var(--gray-100);font-weight:600;word-break:break-word; }
.lv-pd-info-value a{ color:var(--brand-500); }

/* ---- restyle the WHMCS tabs + cards below the overview ---- */
.lv-main #tabOverview .nav-tabs,
.lv-main .product-details-tabs .nav-tabs,
.lv-main .responsive-tabs-sm{
  border:0;gap:.25rem;margin-bottom:1rem;background:var(--gray-900);
  border:1px solid var(--lv-line);border-radius:12px;padding:.3125rem;display:flex;flex-wrap:wrap;
}
.lv-main .nav-tabs .nav-item{ margin:0; }
.lv-main .nav-tabs .nav-link{
  border:0 !important;border-radius:9px;color:var(--gray-400) !important;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;padding:.4375rem .875rem;
  background:transparent !important;transition:all .15s var(--lv-ease);
}
.lv-main .nav-tabs .nav-link:hover{ color:var(--gray-100) !important; }
.lv-main .nav-tabs .nav-link.active{ background:var(--brand-500) !important;color:#140E02 !important; }
.lv-main .nav-tabs .nav-link i{ margin-right:.375rem; }

/* tab content + inner cards */
.lv-main .product-details-tab-container,
.lv-main #tabAddons .card,
.lv-main .tab-content .card{
  background:var(--gray-900) !important;border:1px solid var(--lv-line) !important;
  border-radius:16px !important;color:var(--gray-200);
}
.lv-main .product-details-tab-container.bg-white{ background:var(--gray-900) !important; }
.lv-main .tab-content .card-body{ color:var(--gray-200); }
.lv-main .tab-content h3,
.lv-main .tab-content h4,
.lv-main .tab-content strong{ color:var(--gray-25); }
.lv-main .tab-content .row{ color:var(--gray-300); }
.lv-main .responsive-tabs-sm-connector{ display:none; }

/* config option / addon cards */
.lv-main .product-details-tab-container .card,
.lv-main .addon-card{ background:var(--gray-800) !important;border-color:var(--lv-line) !important; }

/* module-provided overview output — themed wrapper so it blends with Lumvara */
.lv-pd-module-overview{
  margin-top:1.5rem;padding:1.5rem;border-radius:16px;
  background:var(--gray-900);border:1px solid var(--lv-line);color:var(--gray-200);
}
.lv-pd-module-overview .card{ background:var(--gray-800) !important;border-color:var(--lv-line) !important; }
.lv-pd-module-overview h1,
.lv-pd-module-overview h2,
.lv-pd-module-overview h3,
.lv-pd-module-overview h4,
.lv-pd-module-overview strong{ color:var(--gray-25); }
.lv-pd-module-overview table{ color:var(--gray-200); }
.lv-pd-module-overview a{ color:var(--brand-500); }

/* ============================================================
   45. BILLING PAGES (invoices, view invoice, add funds)
   ============================================================ */
/* add-funds amount preset buttons */
.lv-amt.is-active{ border-color:var(--brand-500) !important;background:rgba(254,181,74,.12);color:var(--brand-400) !important; }

/* ---- view-invoice: map WHMCS-generated controls onto Lumvara components ---- */

/* gateway dropdown -> .lv-input component */
.lv-gateway-select select,
.lv-gateway-select select.form-control,
.lv-gateway-select .form-control{
  width:100%;background:#0B0D12;border:1px solid var(--lv-line);border-radius:12px;
  padding:.875rem 1rem;color:var(--lv-text);font-size:1rem;font-family:var(--font-ui);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA4B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;
  padding-right:2.75rem;
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-gateway-select select:focus{
  outline:none;border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(255,181,74,.12);
}
.lv-gateway-select select option{ background:var(--lv-elevated);color:var(--lv-text); }

/* payment button -> .lv-btn .lv-btn-primary .lv-btn-block component */
.lv-pay-btn{ margin-top:.25rem; }
.lv-pay-btn input[type="submit"],
.lv-pay-btn input[type="button"],
.lv-pay-btn button,
.lv-pay-btn .btn,
.lv-pay-btn a.btn{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:var(--lv-lumen) !important;color:#1A1204 !important;
  font-family:var(--font-ui);font-size:.9375rem;font-weight:700;
  padding:.8125rem 1rem;border-radius:10px;border:0;white-space:nowrap;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:filter .2s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-pay-btn input[type="submit"]:hover,
.lv-pay-btn input[type="button"]:hover,
.lv-pay-btn button:hover,
.lv-pay-btn .btn:hover,
.lv-pay-btn a.btn:hover{ filter:brightness(1.06);box-shadow:0 0 26px -6px var(--lv-lumen);color:#1A1204 !important; }
/* offline gateways (bank transfer) output plain markup, not a button */
.lv-pay-btn p{ margin:0;font-size:.8125rem;line-height:1.7;color:var(--lv-muted); }
.lv-pay-btn p:only-child{
  background:#0B0D12;border:1px solid var(--lv-line);border-radius:12px;padding:.875rem 1rem;
}

/* invoice status pills fallback (Payment Pending -> paymentpending class) */
.lv-status-paymentpending{ background:rgba(255,170,60,.12);color:#FFAA3C;border:1px solid rgba(255,170,60,.25); }

/* ============================================================
   46. LUMVARA DROPDOWN — native select enhancement
   Markup is generated by js/lumvara-dropdown.js from any
   <select> carrying [data-lv-dd] (or inside .lv-gateway-select).
   The real <select> stays in the DOM (visually hidden) so form
   submission + inline onchange handlers keep working.
   ============================================================ */
.lv-dd{ position:relative; width:100%; }
/* the real <select> stays for form submit but must never be seen.
   !important because the fallback rule .lv-gateway-select select
   (which styles the un-enhanced select) has higher specificity. */
.lv-dd-native,
.lv-gateway-select select.lv-dd-native,
.lv-select select.lv-dd-native{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;border:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;background-image:none !important;
  opacity:0 !important;pointer-events:none !important;
}

/* ---- the closed control ---- */
.lv-dd-toggle{
  display:flex;align-items:center;gap:.75rem;width:100%;
  background:#12151B;border:1px solid var(--lv-line);border-radius:14px;
  padding:.875rem 1rem;cursor:pointer;text-align:left;
  color:var(--lv-text);font-family:var(--font-ui);font-size:.9375rem;font-weight:500;
  transition:border-color .2s var(--lv-ease),box-shadow .24s var(--lv-ease);
}
.lv-dd-toggle:hover{ border-color:rgba(255,255,255,.18); }
.lv-dd-toggle:focus-visible{ outline:none; }
.lv-dd.is-open > .lv-dd-toggle,
.lv-dd-toggle:focus-visible{
  border-color:var(--lv-lumen);
  box-shadow:0 0 0 3px rgba(254,181,74,.10);
}
.lv-dd-ic{
  display:grid;place-items:center;flex:0 0 auto;
  width:20px;height:20px;border-radius:999px;background:#697586;color:#0C0B10;
}
.lv-dd-ic svg{ width:12px;height:12px; }
.lv-dd-label{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lv-dd.is-placeholder .lv-dd-label{ color:var(--lv-dim); }
.lv-dd-chev{
  flex:0 0 auto;width:18px;height:18px;color:var(--lv-muted);
  transition:transform .22s var(--lv-ease),color .2s var(--lv-ease);
}
.lv-dd.is-open .lv-dd-chev{ transform:rotate(180deg);color:var(--lv-lumen); }

/* ---- the panel ---- */
.lv-dd-panel{
  position:absolute;z-index:60;top:calc(100% + .5rem);left:0;right:0;
  background:#12151B;border:1px solid var(--lv-line);border-radius:14px;
  padding:.375rem;overflow:hidden auto;max-height:16rem;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--lv-ease),transform .18s var(--lv-ease),visibility .18s;
}
.lv-dd.is-open .lv-dd-panel{ opacity:1;visibility:visible;transform:translateY(0); }
.lv-dd-panel::-webkit-scrollbar{ width:8px; }
.lv-dd-panel::-webkit-scrollbar-thumb{ background:var(--gray-700);border-radius:99px;border:2px solid #12151B; }

.lv-dd-item{
  display:flex;align-items:center;gap:.75rem;width:100%;
  background:transparent;border:0;border-radius:10px;
  padding:.8125rem .75rem;cursor:pointer;text-align:left;
  color:var(--lv-text);font-family:var(--font-ui);font-size:.9375rem;font-weight:500;
  transition:background .14s var(--lv-ease);
}
.lv-dd-item:hover,
.lv-dd-item.is-active{ background:var(--gray-850,#1A1F28); }
.lv-dd-item[aria-selected="true"]{ background:var(--gray-850,#1A1F28); }
.lv-dd-check{
  flex:0 0 auto;width:16px;height:16px;color:var(--lv-lumen);
  opacity:0;transition:opacity .14s var(--lv-ease);
}
.lv-dd-item[aria-selected="true"] .lv-dd-check{ opacity:1; }
.lv-dd-item[disabled]{ opacity:.45;cursor:not-allowed; }

/* drop upward when there's no room below */
.lv-dd.is-up .lv-dd-panel{ top:auto;bottom:calc(100% + .5rem);transform:translateY(6px); }
.lv-dd.is-up.is-open .lv-dd-panel{ transform:translateY(0); }

/* ============================================================
   47. ADD FUNDS — deposit flow
   ============================================================ */
.lv-af{ display:flex;flex-direction:column;gap:1.25rem;font-family:var(--font-ui); }

.lv-af-head{ display:flex;align-items:center;gap:.875rem; }
.lv-af-head h1{
  margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--gray-25);
}
.lv-af-head p{ margin:.125rem 0 0;font-size:var(--text-sm);color:var(--gray-500); }

.lv-af-grid{ display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start; }
@media (min-width:992px){ .lv-af-grid{ grid-template-columns:1fr 300px; } }
.lv-af-main{ display:flex;flex-direction:column;gap:1.25rem; }

.lv-af-eyebrow{
  display:block;font-size:.625rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gray-500);
}

/* ---- amount entry ---- */
.lv-af-amt-card{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%, rgba(254,181,74,.10) 0%, var(--gray-900) 60%);
  border:1px solid var(--lv-line);border-radius:18px;padding:1.5rem;
  transition:border-color .2s var(--lv-ease);
}
.lv-af-amt-card.has-error{ border-color:rgba(245,61,61,.5); }

.lv-af-amt-entry{
  display:flex;align-items:center;justify-content:center;gap:.25rem;
  margin:1.25rem 0 1.5rem;
}
.lv-af-cur{
  font-family:var(--font-display);font-size:2rem;color:var(--gray-500);line-height:1;
}
.lv-af-amt-entry input{
  width:100%;max-width:320px;border:0;background:transparent;outline:none;
  font-family:var(--font-display);font-size:3.25rem;font-weight:600;line-height:1;
  color:var(--gray-25);text-align:center;padding:0;
  caret-color:var(--brand-500);
}
.lv-af-amt-entry input::placeholder{ color:var(--gray-700); }
@media (max-width:575.98px){
  .lv-af-amt-entry input{ font-size:2.5rem; }
  .lv-af-cur{ font-size:1.5rem; }
}

/* ---- preset chips ---- */
.lv-af-presets{ display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center; }
.lv-af-chip{
  flex:1 1 auto;min-width:64px;
  padding:.625rem .875rem;border-radius:999px;cursor:pointer;
  background:var(--gray-950);border:1px solid var(--lv-line);
  color:var(--gray-300);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;
  transition:border-color .16s var(--lv-ease),color .16s var(--lv-ease),background .16s var(--lv-ease);
}
.lv-af-chip:hover{ border-color:rgba(254,181,74,.4);color:var(--gray-100); }
.lv-af-chip.is-active{
  background:rgba(254,181,74,.14);border-color:var(--brand-500);color:var(--brand-400);
}

.lv-af-limits{
  display:flex;align-items:center;justify-content:center;gap:.4375rem;
  margin:1.25rem 0 0;font-size:var(--text-xs);color:var(--gray-500);text-align:center;
}
.lv-af-limits svg{ width:14px;height:14px;flex:0 0 auto; }
.lv-af-limits b{ color:var(--gray-300);font-weight:600; }

.lv-af-err{
  margin:.75rem 0 0;text-align:center;font-size:var(--text-xs);color:#FC5D5D;
}

/* ---- payment method ---- */
.lv-af-pay-card{
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:18px;padding:1.5rem;
}
.lv-af-submit{ margin-top:1rem;padding:.875rem 1rem;font-size:var(--text-md); }
.lv-af-submit svg{ width:16px;height:16px; }

/* ---- summary ---- */
.lv-af-sum{
  background:var(--gray-900);border:1px solid var(--lv-line);border-radius:18px;padding:1.5rem;
}
.lv-af-sum-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.75rem 0;font-size:var(--text-sm);color:var(--gray-400);
}
.lv-af-sum-row + .lv-af-sum-row{ border-top:1px solid rgba(255,255,255,.05); }
.lv-af-sum-row b{ color:var(--gray-100);font-weight:600;white-space:nowrap; }
.lv-af-sum-row:first-of-type{ padding-top:1rem; }
.lv-af-sum-row:first-of-type b{
  font-family:var(--font-display);font-size:1.375rem;color:var(--brand-500);font-weight:600;
}
.lv-af-sum-total{ border-top:1px solid rgba(255,255,255,.1) !important;margin-top:.25rem; }

.lv-af-note{
  display:flex;align-items:flex-start;gap:.5rem;
  margin:1rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.05);
  font-size:var(--text-xs);line-height:1.6;color:var(--gray-500);
}
.lv-af-note svg{ width:14px;height:14px;flex:0 0 auto;margin-top:.125rem;color:var(--warning-400,#FDB022); }

/* ============================================================
   48. QUOTES LIST
   ============================================================ */
.lv-q{ display:flex;flex-direction:column;gap:1.25rem;font-family:var(--font-ui); }
.lv-q-head{ display:flex;align-items:center;gap:.875rem; }
.lv-q-head h1{ margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--gray-25); }
.lv-q-filters{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem; }

.lv-q-list{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--gray-900);border:1px solid rgba(255,255,255,.06);border-radius:16px;
}
.lv-q-item{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;cursor:pointer;
  transition:background .14s var(--lv-ease);
}
.lv-q-item:hover{ background:rgba(255,255,255,.02); }
.lv-q-ic{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:rgba(200,140,255,.12);color:var(--violet-400,#C88CFF);
}
.lv-q-ic svg{ width:22px;height:22px; }
.lv-q-main{ flex:1;min-width:0; }
.lv-q-subject{ font-weight:600;color:var(--gray-25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lv-q-meta{ margin-top:.125rem;font-size:var(--text-sm);color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lv-q-valid{ flex:0 0 auto;text-align:right;display:none; }
@media (min-width:768px){ .lv-q-valid{ display:block; } }
.lv-q-valid .k{ display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500); }
.lv-q-valid .v{ display:block;font-size:var(--text-sm);font-weight:600;color:var(--gray-200); }
.lv-q-acts{ flex:0 0 auto;display:flex;align-items:center;gap:.375rem; }
.lv-q-dl{ display:inline; }
.lv-q-acts .lv-btn svg{ width:14px;height:14px; }
.lv-q-empty{ padding:3rem 1.25rem;text-align:center;color:var(--gray-500);font-size:var(--text-sm); }

/* quote stage pills */
.lv-status-draft{ background:rgba(154,164,179,.12);color:#9AA4B3;border:1px solid rgba(154,164,179,.25); }
.lv-status-delivered{ background:rgba(253,176,34,.12);color:#FDB022;border:1px solid rgba(253,176,34,.25); }
.lv-status-onhold{ background:rgba(154,164,179,.12);color:#9AA4B3;border:1px solid rgba(154,164,179,.25); }
.lv-status-accepted{ background:rgba(87,204,125,.12);color:#57CC7D;border:1px solid rgba(87,204,125,.25); }
.lv-status-lost{ background:rgba(154,164,179,.12);color:#9AA4B3;border:1px solid rgba(154,164,179,.25); }
.lv-status-dead{ background:rgba(245,61,61,.12);color:#FC5D5D;border:1px solid rgba(245,61,61,.25); }

/* ============================================================
   49. ACCOUNT PAGES — shared design system
   ============================================================ */
.lv-acc{ display:flex;flex-direction:column;gap:1.25rem;font-family:var(--font-ui); }

.lv-acc-head{ display:flex;align-items:center;gap:.875rem; }
.lv-acc-head h1{ margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--gray-25); }
.lv-acc-head p{ margin:.125rem 0 0;font-size:var(--text-sm);color:var(--gray-500); }

/* ---- nav ---- */
.lv-acc-nav{
  display:flex;gap:.25rem;overflow-x:auto;padding:.3125rem;
  background:var(--gray-900);border:1px solid rgba(255,255,255,.06);border-radius:14px;
  scrollbar-width:none;
}
.lv-acc-nav::-webkit-scrollbar{ display:none; }
.lv-acc-tab{
  display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:.625rem .875rem;border-radius:10px;white-space:nowrap;
  color:var(--gray-400);font-size:var(--text-sm);font-weight:500;text-decoration:none;
  transition:background .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-acc-tab svg{ width:16px;height:16px;flex:0 0 auto; }
.lv-acc-tab:hover{ background:rgba(255,255,255,.04);color:var(--gray-100); }
.lv-acc-tab.is-active{ background:rgba(254,181,74,.12);color:var(--brand-400); }
.lv-main .lv-acc-tab.is-active{ color:var(--brand-400); }

/* ---- cards ---- */
.lv-acc-card{
  background:var(--gray-900);border:1px solid rgba(255,255,255,.06);border-radius:16px;
  padding:1.5rem;
}
.lv-acc-card + .lv-acc-card{ margin-top:1.25rem; }
.lv-acc-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.06);
}
.lv-acc-card-head h3{
  display:flex;align-items:center;gap:.625rem;margin:0;
  font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:var(--gray-25);
}
.lv-acc-card-head h3 svg{ width:18px;height:18px;color:var(--brand-500); }
.lv-acc-card-head p{ margin:.25rem 0 0;font-size:var(--text-xs);color:var(--gray-500);font-weight:400; }
.lv-acc-card-sub{ margin:-.75rem 0 1.25rem;font-size:var(--text-sm);color:var(--gray-500);line-height:1.6; }

/* ---- form grid ---- */
.lv-acc-grid{ display:grid;grid-template-columns:1fr;gap:0 1.25rem; }
@media (min-width:768px){ .lv-acc-grid{ grid-template-columns:1fr 1fr; } }
.lv-acc-grid .lv-field{ margin-bottom:1.125rem; }
.lv-acc-full{ grid-column:1 / -1; }

/* disabled inputs (uneditable fields) */
.lv-input:disabled,
.lv-input[disabled]{
  opacity:.55;cursor:not-allowed;background:#090B0F;
}

/* ---- actions row ---- */
.lv-acc-actions{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:.25rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.06);
}
.lv-acc-actions .lv-btn{ padding:.625rem 1.125rem;font-size:var(--text-sm); }

/* ---- toggle switch ---- */
.lv-switch{ display:inline-flex;align-items:center;gap:.75rem;cursor:pointer; }
.lv-switch input{ position:absolute;opacity:0;width:0;height:0; }
.lv-switch-track{
  position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:999px;
  background:var(--gray-700);border:1px solid var(--lv-line);
  transition:background .2s var(--lv-ease),border-color .2s var(--lv-ease);
}
.lv-switch-track::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;
  background:var(--gray-400);transition:transform .2s var(--lv-ease),background .2s var(--lv-ease);
}
.lv-switch input:checked + .lv-switch-track{ background:rgba(254,181,74,.25);border-color:var(--brand-500); }
.lv-switch input:checked + .lv-switch-track::after{ transform:translateX(18px);background:var(--brand-500); }
.lv-switch input:focus-visible + .lv-switch-track{ box-shadow:0 0 0 3px rgba(254,181,74,.15); }
.lv-switch-label{ font-size:var(--text-sm);color:var(--gray-200); }

/* ---- checkbox rows ---- */
.lv-check{
  display:flex;align-items:flex-start;gap:.625rem;padding:.75rem 0;cursor:pointer;
  font-size:var(--text-sm);color:var(--gray-200);
}
.lv-check + .lv-check{ border-top:1px solid rgba(255,255,255,.04); }
.lv-check input{ margin:.1875rem 0 0;width:16px;height:16px;accent-color:var(--brand-500);flex:0 0 auto;cursor:pointer; }

/* ---- verified / status chips ---- */
.lv-chip{
  display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:999px;
  font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.lv-chip svg{ width:12px;height:12px; }
.lv-chip-ok{ background:rgba(87,204,125,.12);color:#57CC7D;border:1px solid rgba(87,204,125,.25); }
.lv-chip-warn{ background:rgba(253,176,34,.12);color:#FDB022;border:1px solid rgba(253,176,34,.25); }
.lv-chip-off{ background:rgba(154,164,179,.12);color:#9AA4B3;border:1px solid rgba(154,164,179,.25); }

/* ---- alerts (WHMCS alert.tpl override) ---- */
.lv-acc .alert{
  padding:.875rem 1.125rem;border-radius:12px;font-size:var(--text-sm);border:1px solid transparent;
}
.lv-acc .alert-success{ background:rgba(87,204,125,.1);border-color:rgba(87,204,125,.3);color:#57CC7D; }
.lv-acc .alert-danger,
.lv-acc .alert-error{ background:rgba(245,61,61,.1);border-color:rgba(245,61,61,.3);color:#FC5D5D; }
.lv-acc .alert-info{ background:rgba(124,169,255,.1);border-color:rgba(124,169,255,.3);color:#7CA9FF; }
.lv-acc .alert-warning{ background:rgba(253,176,34,.1);border-color:rgba(253,176,34,.3);color:#FDB022; }

/* ---- empty ---- */
.lv-acc-empty{ padding:3rem 1.25rem;text-align:center;color:var(--gray-500);font-size:var(--text-sm); }
.lv-acc-empty svg{ width:40px;height:40px;color:var(--gray-700);margin-bottom:.75rem; }

/* ---- list rows inside account cards ---- */
.lv-acc-list{ display:flex;flex-direction:column;margin:0 -1.5rem -1.5rem; }
.lv-acc-row{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;
  transition:background .14s var(--lv-ease);
}
.lv-acc-row + .lv-acc-row{ border-top:1px solid rgba(255,255,255,.05); }
.lv-acc-row:hover{ background:rgba(255,255,255,.02); }
.lv-acc-row-ic{
  display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  background:rgba(254,181,74,.12);color:var(--brand-500);
}
.lv-acc-row-ic svg{ width:19px;height:19px; }
.lv-acc-row-main{ flex:1;min-width:0; }
.lv-acc-row-t{ font-weight:600;color:var(--gray-25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lv-acc-row-s{ margin-top:.125rem;font-size:var(--text-sm);color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lv-acc-row-acts{ flex:0 0 auto;display:flex;align-items:center;gap:.375rem; }

/* danger button variant (2FA disable, delete actions) */
.lv-btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:rgba(245,61,61,.12);color:#FC5D5D;border:1px solid rgba(245,61,61,.3);
  font-size:.8125rem;font-weight:600;text-decoration:none;
  padding:.5rem 1rem;border-radius:10px;white-space:nowrap;cursor:pointer;
  transition:background .2s var(--lv-ease),color .2s var(--lv-ease);
}
.lv-btn-danger:hover{ background:#F53D3D;color:#fff;border-color:#F53D3D; }
.lv-main a.lv-btn-danger{ color:#FC5D5D; }
.lv-main a.lv-btn-danger:hover{ color:#fff; }

/* permissions box (invite flow) */
.lv-perm-box{
  background:var(--gray-950);border:1px solid var(--lv-line);border-radius:12px;
  padding:.25rem 1rem;margin-bottom:.25rem;
}
.lv-perm-box.w-hidden{ display:none; }
.lv-btn.disabled{ opacity:.4;pointer-events:none;cursor:not-allowed; }

/* ============================================================
   51. RADIO / CHECKBOX components
   ============================================================ */
.lv-radio{
  display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;cursor:pointer;
  background:var(--gray-950);border:1px solid var(--lv-line);border-radius:12px;
  font-size:var(--text-sm);color:var(--gray-200);
  transition:border-color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-radio + .lv-radio{ margin-top:.5rem; }
.lv-radio:hover{ border-color:rgba(255,255,255,.18); }
.lv-radio input{ position:absolute;opacity:0;width:0;height:0; }
.lv-radio-dot{
  position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:.0625rem;
  border-radius:999px;border:2px solid var(--gray-600);background:transparent;
  transition:border-color .18s var(--lv-ease);
}
.lv-radio-dot::after{
  content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:999px;
  background:var(--lv-lumen);transform:translate(-50%,-50%) scale(0);
  transition:transform .18s var(--lv-ease);
}
.lv-radio input:checked ~ .lv-radio-dot{ border-color:var(--lv-lumen); }
.lv-radio input:checked ~ .lv-radio-dot::after{ transform:translate(-50%,-50%) scale(1); }
.lv-radio:has(input:checked){ border-color:var(--lv-lumen);background:rgba(254,181,74,.06); }
.lv-radio input:focus-visible ~ .lv-radio-dot{ box-shadow:0 0 0 3px rgba(254,181,74,.15); }
.lv-radio-body{ flex:1;min-width:0; }
.lv-radio-t{ font-weight:600;color:var(--gray-100); }
.lv-radio-s{ display:block;margin-top:.125rem;font-size:var(--text-xs);color:var(--gray-500);line-height:1.5; }

.lv-cb{
  display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;cursor:pointer;
  background:var(--gray-950);border:1px solid var(--lv-line);border-radius:12px;
  font-size:var(--text-sm);color:var(--gray-200);
  transition:border-color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-cb + .lv-cb{ margin-top:.5rem; }
.lv-cb:hover{ border-color:rgba(255,255,255,.18); }
.lv-cb input{ position:absolute;opacity:0;width:0;height:0; }
.lv-cb-box{
  position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:.0625rem;
  border-radius:5px;border:2px solid var(--gray-600);background:transparent;
  transition:border-color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-cb-box::after{
  content:'';position:absolute;top:1px;left:4.5px;width:4px;height:8px;
  border:solid #1A1204;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .18s var(--lv-ease);
}
.lv-cb input:checked ~ .lv-cb-box{ background:var(--lv-lumen);border-color:var(--lv-lumen); }
.lv-cb input:checked ~ .lv-cb-box::after{ transform:rotate(45deg) scale(1); }
.lv-cb:has(input:checked){ border-color:var(--lv-lumen);background:rgba(254,181,74,.06); }
.lv-cb input:focus-visible ~ .lv-cb-box{ box-shadow:0 0 0 3px rgba(254,181,74,.15); }

/* ============================================================
   52. LUMVARA TABS — universal component
   Three variants:
     .lv-tabs            contained pill row (default)
     .lv-tabs.lv-tabs-line   underline + amber dot
     .lv-tabs-chip       standalone pills w/ badges
   Item: .lv-tab  ·  active: .is-active
   Optional dot: <span class="lv-tab-dot"></span>
   Optional badge: <span class="lv-tab-badge">2</span>
   ============================================================ */

/* ---- shared item ---- */
.lv-tab{
  display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:.625rem 1rem;border-radius:10px;white-space:nowrap;cursor:pointer;
  background:transparent;border:1px solid transparent;
  color:var(--lv-muted);font-family:var(--font-ui);font-size:.9375rem;font-weight:500;
  text-decoration:none;
  transition:color .16s var(--lv-ease),background .16s var(--lv-ease),border-color .16s var(--lv-ease);
}
.lv-tab:hover{ color:var(--lv-text); }
.lv-tab svg{ width:16px;height:16px;flex:0 0 auto; }

.lv-tab-dot{
  flex:0 0 auto;width:13px;height:13px;border-radius:999px;background:#5A6478;
  transition:background .16s var(--lv-ease),box-shadow .16s var(--lv-ease);
}
.lv-tab.is-active .lv-tab-dot{ background:var(--lv-lumen); }

.lv-tab-badge{
  display:inline-grid;place-items:center;flex:0 0 auto;
  min-width:20px;height:20px;padding:0 .375rem;border-radius:999px;
  background:var(--gray-700);color:var(--gray-200);
  font-size:.6875rem;font-weight:700;line-height:1;
}
.lv-tab.is-active .lv-tab-badge{ background:var(--lv-lumen);color:#1A1204; }

/* ---- variant A: contained ---- */
.lv-tabs{
  display:flex;gap:.25rem;align-items:center;
  padding:.3125rem;overflow-x:auto;scrollbar-width:none;
  background:#12151B;border:1px solid var(--lv-line);border-radius:14px;
}
.lv-tabs::-webkit-scrollbar{ display:none; }
.lv-tabs .lv-tab.is-active{
  background:var(--gray-850,#1A1F28);border-color:var(--lv-line);color:var(--lv-text);font-weight:600;
}
.lv-main .lv-tabs .lv-tab{ color:var(--lv-muted); }
.lv-main .lv-tabs .lv-tab:hover{ color:var(--lv-text); }
.lv-main .lv-tabs .lv-tab.is-active{ color:var(--lv-text); }

/* ---- variant B: underline ---- */
.lv-tabs.lv-tabs-line{
  background:transparent;border:0;border-bottom:1px solid var(--lv-line);
  border-radius:0;padding:0;gap:.25rem;
}
.lv-tabs-line .lv-tab{
  border-radius:0;border:0;padding:.75rem 1rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.lv-tabs-line .lv-tab.is-active{
  background:transparent;color:var(--lv-text);font-weight:600;
  border-bottom-color:var(--lv-lumen);
}
.lv-main .lv-tabs-line .lv-tab.is-active{ color:var(--lv-text); }

/* ---- variant C: standalone chips ---- */
.lv-tabs-chip{
  display:flex;gap:.5rem;align-items:center;
  overflow-x:auto;scrollbar-width:none;padding:.125rem;
}
.lv-tabs-chip::-webkit-scrollbar{ display:none; }
.lv-tabs-chip .lv-tab{
  border-radius:999px;border:1px solid var(--lv-line);background:#12151B;padding:.5625rem .875rem;
}
.lv-tabs-chip .lv-tab:hover{ border-color:rgba(255,255,255,.18); }
.lv-tabs-chip .lv-tab.is-active{
  background:var(--gray-700);border-color:var(--gray-600);color:var(--gray-25);font-weight:600;
}
.lv-main .lv-tabs-chip .lv-tab.is-active{ color:var(--gray-25); }

/* ============================================================
   53. EXISTING TABS -> adopt the universal design
   (.lv-filter-tabs on services/invoices/quotes, .lv-acc-nav)
   ============================================================ */
.lv-filter-tabs{
  display:flex;gap:.25rem;align-items:center;
  padding:.3125rem;overflow-x:auto;scrollbar-width:none;
  background:#12151B;border:1px solid var(--lv-line);border-radius:14px;
}
.lv-filter-tabs::-webkit-scrollbar{ display:none; }
.lv-filter-tab{
  display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:.5625rem .875rem;border-radius:10px;white-space:nowrap;cursor:pointer;
  background:transparent;border:1px solid transparent;
  color:var(--lv-muted);font-family:var(--font-ui);font-size:.875rem;font-weight:500;
  transition:color .16s var(--lv-ease),background .16s var(--lv-ease),border-color .16s var(--lv-ease);
}
.lv-filter-tab:hover{ color:var(--lv-text); }
.lv-filter-tab.is-active{
  background:var(--gray-850,#1A1F28);border-color:var(--lv-line);color:var(--lv-text);font-weight:600;
}

.lv-acc-nav{ background:#12151B; }
.lv-acc-tab{ font-size:.9375rem; }
.lv-acc-tab.is-active{
  background:var(--gray-850,#1A1F28);border:1px solid var(--lv-line);color:var(--lv-text);font-weight:600;
}
.lv-main .lv-acc-tab.is-active{ color:var(--lv-text); }

/* dropdown: two-part label (Name + description) — data-lv-dd-split=" - " */
.lv-dd-name{ font-weight:600;color:var(--lv-text); }
.lv-dd-desc{ margin-left:.5rem;color:var(--lv-dim);font-weight:400; }
.lv-dd-item[aria-selected="true"] .lv-dd-name{ color:var(--lv-text); }

/* ============================================================
   54. STATE FIELD — WHMCS StatesDropdown.js
   StatesDropdown.js swaps #inputState (text) for a generated
   #stateselect (<select>) when the country has states. That select
   is created after page load, so it carries no lv- classes.
   lumvara-dropdown.js now enhances it on arrival; this styles the
   raw select as a fallback if JS is unavailable.
   ============================================================ */
select#stateselect,
select[name="state"],
#inputState{
  width:100%;background:#0B0D12;border:1px solid var(--lv-line);border-radius:12px;
  padding:.875rem 1rem;color:var(--lv-text);font-size:1rem;font-family:var(--font-ui);
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
select#stateselect:focus,
select[name="state"]:focus,
#inputState:focus{
  outline:none;border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(254,181,74,.12);
}
select#stateselect option{ background:var(--lv-elevated);color:var(--lv-text); }
/* once enhanced, the native select must stay hidden */
select#stateselect.lv-dd-native{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;border:0 !important;opacity:0 !important;
}

/* ============================================================
   55. PHONE FIELD — intl-tel-input (WHMCS bundled build)
   WHMCS ships an older intl-tel-input that emits
   .intl-tel-input / .flag-container / .selected-flag /
   .country-list / .country / .iti-flag / .iti-arrow — NOT the
   modern .iti__* names. Verified against the bundled scripts.min.js.
   Markup: <div class="intl-tel-input allow-dropdown">
             <div class="flag-container">
               <div class="selected-flag"><div class="iti-flag"></div><div class="iti-arrow"></div></div>
               <ul class="country-list"><li class="country">…</li></ul>
             </div>
             <input type="tel">
           </div>
   ============================================================ */
.intl-tel-input{ display:block !important;position:relative;width:100%; }
.intl-tel-input .lv-input,
.intl-tel-input input[type=tel],
.intl-tel-input input[type=text]{ width:100%;position:relative;z-index:1;background:#0B0D12; }
.intl-tel-input.allow-dropdown input[type=tel],
.intl-tel-input.allow-dropdown .lv-input{ padding-left:3.5rem !important; }
.intl-tel-input.separate-dial-code input[type=tel],
.intl-tel-input.separate-dial-code .lv-input{ padding-left:6rem !important; }

.intl-tel-input .flag-container{
  position:absolute;top:0;bottom:0;left:0;right:auto;z-index:2;padding:1px;
}
/* Do NOT force display here. intl-tel-input lays this out itself:
   allow-dropdown      -> .selected-flag is width:36px, .iti-flag + .iti-arrow absolute
   separate-dial-code  -> .selected-flag is display:table, .selected-dial-code a
                          table-cell with padding-left:28px clearing the absolute flag.
   Overriding display/padding collapses the dial code under the flag. */
.intl-tel-input .selected-flag{
  height:100%;border-radius:12px 0 0 12px;cursor:pointer;outline:none;
  transition:background .16s var(--lv-ease);
}
.intl-tel-input .flag-container:hover .selected-flag,
.intl-tel-input .selected-flag:focus{ background:rgba(255,255,255,.05); }
.intl-tel-input.separate-dial-code .selected-flag{
  display:table !important;width:auto !important;background:transparent !important;
  padding-left:.9375rem !important;
}
.intl-tel-input.separate-dial-code .selected-dial-code{
  display:table-cell !important;vertical-align:middle;
  padding-left:28px !important;padding-right:.375rem !important;
  color:var(--lv-text);font-family:var(--font-ui);font-size:1rem;white-space:nowrap;
}
.intl-tel-input .iti-arrow{
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid var(--lv-muted);
}
.intl-tel-input .iti-arrow.up{ border-top:none;border-bottom:4px solid var(--lv-lumen); }

.intl-tel-input .country-list{
  position:absolute;z-index:60;list-style:none;margin:.5rem 0 0;padding:.375rem;
  background:#12151B;border:1px solid var(--lv-line);border-radius:14px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.75);
  max-height:16rem;overflow-y:auto;overflow-x:hidden;
  min-width:20rem;white-space:nowrap;text-align:left;
}
.intl-tel-input .country-list.dropup{ bottom:100%;margin-bottom:.5rem; }
.intl-tel-input .country-list::-webkit-scrollbar{ width:8px; }
.intl-tel-input .country-list::-webkit-scrollbar-thumb{ background:var(--gray-700);border-radius:99px;border:2px solid #12151B; }
.intl-tel-input .country-list .country{
  display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:10px;
  color:var(--lv-text);font-family:var(--font-ui);font-size:.875rem;cursor:pointer;
  transition:background .14s var(--lv-ease);
}
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover{ background:var(--gray-850,#1A1F28); }
.intl-tel-input .country-list .country-name{ color:var(--lv-text); }
.intl-tel-input .country-list .dial-code{ color:var(--lv-dim);margin-left:auto;padding-left:1rem; }
.intl-tel-input .country-list .divider{
  margin:.375rem 0;padding:0;border-bottom:1px solid var(--lv-line);
}
.intl-tel-input .country-list .flag-box{ flex:0 0 auto; }
.intl-tel-input.iti-container{ position:absolute;top:0;left:0;z-index:1060;padding:0; }

/* ============================================================
   56. FORM SYSTEM — fields, textarea, choice controls
   Markup:
     <div class="lv-field">                      (+ .lv-field-sm / .lv-field-lg)
       <label>Label <span class="lv-req">*</span></label>
       <div class="lv-ctl">                      (+ .has-l / .has-r for icon slots)
         <span class="lv-ctl-l">svg</span>
         <input class="lv-input">
         <span class="lv-ctl-r">svg</span>
       </div>
       <span class="lv-help">Hint text</span>
     </div>
   Error: add .is-error on .lv-field
   ============================================================ */

.lv-req{ color:#F53D3D;margin-left:.125rem; }

.lv-field > label,
.lv-field label:first-child{
  display:flex;align-items:center;gap:.375rem;
  font-size:.875rem;font-weight:500;color:var(--lv-muted);margin-bottom:.5rem;
}

/* ---- control shell (icon slots) ---- */
.lv-ctl{ position:relative;display:block;width:100%; }
.lv-ctl-l,.lv-ctl-r{
  position:absolute;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;pointer-events:none;
  width:20px;height:20px;border-radius:999px;color:var(--gray-500);
}
.lv-ctl-l{ left:.875rem; }
.lv-ctl-r{ right:.875rem; }
.lv-ctl-l svg,.lv-ctl-r svg{ width:16px;height:16px; }
.lv-ctl.has-l .lv-input{ padding-left:2.875rem; }
.lv-ctl.has-r .lv-input{ padding-right:2.875rem; }
.lv-ctl-r.is-clickable{ pointer-events:auto;cursor:pointer; }
.lv-ctl-r.is-clickable:hover{ color:var(--lv-text); }

/* ---- hint ---- */
.lv-help{ display:block;font-size:.75rem;color:var(--lv-dim);margin-top:.375rem;line-height:1.5; }

/* ---- error state ---- */
.lv-field.is-error .lv-input,
.lv-field.is-error .lv-textarea,
.lv-input.is-error{ border-color:#F53D3D; }
.lv-field.is-error .lv-input:focus,
.lv-field.is-error .lv-textarea:focus{ border-color:#F53D3D;box-shadow:0 0 0 3px rgba(245,61,61,.12); }
.lv-field.is-error .lv-help{ color:#F53D3D; }
.lv-field.is-error .lv-ctl-r{ color:#F53D3D; }
.lv-field.is-error > label{ color:var(--lv-muted); }

/* ---- disabled ---- */
.lv-input:disabled,.lv-input[disabled],
.lv-textarea:disabled,.lv-textarea[disabled]{
  opacity:1;background:#090B0F;color:var(--gray-600);cursor:not-allowed;
  border-color:rgba(255,255,255,.05);
}
.lv-field:has(.lv-input:disabled) .lv-ctl-l,
.lv-field:has(.lv-input:disabled) .lv-ctl-r{ opacity:.5; }

/* ---- sizes ---- */
.lv-field-sm .lv-input{ padding:.625rem .875rem;font-size:.875rem;border-radius:10px; }
.lv-field-sm .lv-ctl.has-l .lv-input{ padding-left:2.5rem; }
.lv-field-sm .lv-ctl.has-r .lv-input{ padding-right:2.5rem; }
.lv-field-sm .lv-ctl-l{ left:.75rem; } .lv-field-sm .lv-ctl-r{ right:.75rem; }
.lv-field-sm > label{ font-size:.8125rem; }

.lv-field-lg .lv-input{ padding:1.0625rem 1.125rem;font-size:1.125rem;border-radius:14px; }
.lv-field-lg .lv-ctl.has-l .lv-input{ padding-left:3.25rem; }
.lv-field-lg .lv-ctl.has-r .lv-input{ padding-right:3.25rem; }
.lv-field-lg > label{ font-size:1rem; }
.lv-field-lg .lv-help{ font-size:.875rem; }

/* ---- textarea ---- */
.lv-textarea{
  display:block;width:100%;min-height:8.75rem;resize:vertical;
  background:#0B0D12;border:1px solid var(--lv-line);border-radius:12px;
  padding:.875rem 1rem;color:var(--lv-text);font-size:1rem;font-family:var(--font-ui);
  line-height:1.6;
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.lv-textarea::placeholder{ color:var(--gray-600); }
.lv-textarea:focus{
  outline:none;border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(254,181,74,.12);
}

/* ============================================================
   57. CHOICE CONTROLS — bare + card variants, three sizes
   Bare:  <label class="lv-choice"><input type="checkbox"><span class="lv-cb-box"></span><span>Remember me</span></label>
   Card:  <label class="lv-cb"> … </label>   (existing card style)
   ============================================================ */
.lv-choice{
  display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;
  font-size:.9375rem;color:var(--lv-text);
}
.lv-choice input{ position:absolute;opacity:0;width:0;height:0; }
.lv-choice .lv-cb-box,
.lv-choice .lv-radio-dot{ margin-top:0; }

/* sizes — apply to .lv-choice, .lv-cb or .lv-radio */
.lv-choice-sm{ font-size:.8125rem;gap:.5rem; }
.lv-choice-sm .lv-cb-box,.lv-choice-sm .lv-radio-dot{ width:15px;height:15px; }
.lv-choice-sm .lv-cb-box::after{ top:1px;left:3.5px;width:3px;height:6.5px;border-width:0 2px 2px 0; }
.lv-choice-sm .lv-radio-dot::after{ width:6px;height:6px; }

.lv-choice-lg{ font-size:1.125rem;gap:.75rem; }
.lv-choice-lg .lv-cb-box,.lv-choice-lg .lv-radio-dot{ width:24px;height:24px;border-radius:7px; }
.lv-choice-lg .lv-radio-dot{ border-radius:999px; }
.lv-choice-lg .lv-cb-box::after{ top:2px;left:6.5px;width:5px;height:10px;border-width:0 2.5px 2.5px 0; }
.lv-choice-lg .lv-radio-dot::after{ width:11px;height:11px; }

/* round checkbox variant (image 3, bottom row) */
.lv-cb-round .lv-cb-box{ border-radius:999px; }

/* disabled choice */
.lv-choice input:disabled ~ .lv-cb-box,
.lv-choice input:disabled ~ .lv-radio-dot,
.lv-cb input:disabled ~ .lv-cb-box,
.lv-radio input:disabled ~ .lv-radio-dot{ opacity:.4; }
.lv-choice:has(input:disabled),
.lv-cb:has(input:disabled),
.lv-radio:has(input:disabled){ opacity:.6;cursor:not-allowed; }

/* ---- phone field: force parity with a plain .lv-input ----
   The wrapper intl-tel-input injects sits between .lv-field and the input,
   and its own stylesheet uses `.intl-tel-input input` (specificity 0,1,1)
   which outranks `.lv-input` (0,1,0). Pin every visual property so the
   field cannot drift from the ones beside it. */
.intl-tel-input{
  display:block !important;position:relative;width:100%;
  background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;
}
.intl-tel-input > input,
.intl-tel-input input[type=tel],
.intl-tel-input input[type=text]{
  width:100% !important;
  background:#0B0D12 !important;
  border:1px solid var(--lv-line) !important;
  border-radius:12px !important;
  padding:.875rem 1rem !important;
  color:var(--lv-text) !important;
  font-size:1rem !important;
  font-family:var(--font-ui) !important;
  line-height:normal !important;
  margin:0 !important;
  height:auto !important;
  position:relative;z-index:1;
  transition:border-color .24s var(--lv-ease),box-shadow .28s var(--lv-ease);
}
.intl-tel-input.allow-dropdown > input,
.intl-tel-input.allow-dropdown input[type=tel]{ padding-left:3.5rem !important; }
.intl-tel-input.separate-dial-code > input,
.intl-tel-input.separate-dial-code input[type=tel]{ padding-left:6rem !important; }
.intl-tel-input > input:focus,
.intl-tel-input input[type=tel]:focus{
  outline:none !important;border-color:var(--lv-lumen) !important;
  box-shadow:0 0 0 3px rgba(254,181,74,.12) !important;
}
.intl-tel-input > input:disabled,
.intl-tel-input input[type=tel]:disabled{
  background:#090B0F !important;color:var(--gray-600) !important;
  border-color:rgba(255,255,255,.05) !important;cursor:not-allowed;
}
/* WHMCS's own intl-tel-input css nudges these — neutralise */
.intl-tel-input .flag-container{ padding:0 !important; }
.intl-tel-input .selected-flag{ z-index:2; }

/* ---- phone: give the flag button room + keep the dial code legible ----
   In separate-dial-code mode the button is ~28px flag + dial code + arrow,
   so the input needs matching left padding or the text sits under it. */
.intl-tel-input.separate-dial-code .flag-container{ padding:0 !important; }
.intl-tel-input.separate-dial-code .iti-arrow{ margin-left:.25rem; }
.intl-tel-input.allow-dropdown:not(.separate-dial-code) .selected-flag{
  display:flex !important;align-items:center;padding:0 0 0 .9375rem !important;
}

/* ============================================================
   58. AUTH / STANDALONE CARDS (2FA, verify email, switch account)
   ============================================================ */
/* These reuse the auth classes for centred panels INSIDE the client-area
   shell (2FA challenge, verify email, invite accept, ticket feedback...).
   They MUST stay scoped to .lv-main: unscoped, the max-width here shrank the
   standalone login page's full-bleed dark background to a 34rem column and
   left the rest of the viewport white. */
.lv-main .lv-auth{
  min-height:0;max-width:34rem;margin:0 auto;font-family:var(--font-ui);
  background:none;overflow:visible;
}
.lv-main .lv-auth-wide{ max-width:47rem; }
.lv-main .lv-auth-card{
  background:var(--gray-900);border:1px solid rgba(255,255,255,.07);border-radius:18px;
  padding:2rem 1.75rem;box-shadow:none;max-width:none;
}
.lv-auth-card h3{
  margin:0 0 1.25rem;font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  color:var(--gray-25);text-align:center;
}
.lv-auth-ic{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1rem;border-radius:999px;
}
.lv-auth-ic svg{ width:28px;height:28px; }
.lv-auth-ic-ok{ background:rgba(87,204,125,.12);color:#57CC7D; }
.lv-auth-ic-warn{ background:rgba(253,176,34,.12);color:#FDB022; }
.lv-auth-ic-bad{ background:rgba(245,61,61,.12);color:#FC5D5D; }
.lv-auth-card p{ color:var(--gray-300);font-size:var(--text-sm);line-height:1.65;text-align:center; }
.lv-auth-foot{
  margin-top:1.25rem;padding-top:1.125rem;border-top:1px solid rgba(255,255,255,.06);
  text-align:center;font-size:var(--text-xs);color:var(--gray-500);
}
.lv-auth-foot a{ color:var(--brand-400);text-decoration:underline; }
.lv-code{
  display:block;margin:1rem 0;padding:1rem;border-radius:12px;text-align:center;
  background:rgba(253,176,34,.08);border:1px solid rgba(253,176,34,.3);
  font-family:var(--font-display);font-size:1.6rem;letter-spacing:.12em;color:#FDB022;
  word-break:break-all;
}
/* No !important: the payment-methods page toggles .fieldgroup-* with jQuery
   .show()/.hide(), which write inline display — an !important class here
   would outrank that and the card/bank forms would never appear. */
.w-hidden{ display:none; }

/* account picker */
.lv-pick{ display:flex;flex-direction:column;gap:.5rem;margin-top:1rem; }
.lv-pick a{
  display:flex;align-items:center;gap:.75rem;padding:.9375rem 1rem;border-radius:12px;
  background:var(--gray-950);border:1px solid var(--lv-line);
  color:var(--gray-100);font-size:var(--text-sm);font-weight:500;text-decoration:none;
  transition:border-color .18s var(--lv-ease),background .18s var(--lv-ease);
}
.lv-pick a:hover{ border-color:var(--lv-lumen);background:rgba(254,181,74,.06); }
.lv-pick a.disabled{ opacity:.45;pointer-events:none; }
.lv-pick a .lv-chip{ margin-left:auto; }
.lv-main .lv-pick a{ color:var(--gray-100); }

/* invite accept — two-up login/register */
.lv-invite-grid{ display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.25rem; }
@media (min-width:768px){ .lv-invite-grid{ grid-template-columns:1fr 1fr; } }
.lv-invite-box{
  background:var(--gray-950);border:1px solid var(--lv-line);border-radius:14px;padding:1.25rem;
}
.lv-invite-box h4{
  margin:0 0 1rem;font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  color:var(--gray-25);text-align:center;
}
/* password strength meter (PasswordStrength.js writes width/class on the bar) */
.lv-pw-track{
  height:8px;border-radius:999px;background:var(--gray-800);overflow:hidden;margin-top:.75rem;
}
.lv-pw-bar{
  height:100%;width:0;border-radius:999px;background:var(--lv-lumen);
  transition:width .3s var(--lv-ease),background .3s var(--lv-ease);
}
.lv-pw-bar.bg-danger{ background:#F53D3D; }
.lv-pw-bar.bg-warning{ background:#FDB022; }
.lv-pw-bar.bg-success{ background:#57CC7D; }

/* ---- card whose body is an edge-to-edge row list ----
   .lv-acc-list cancels the card padding with negative margins, so the card
   must keep its padding for that to net to zero. Rounds the last row so it
   follows the card's border-radius. Overflow is NOT hidden here: dropdown
   panels inside rows need to escape the card. */
.lv-acc-card-list .lv-acc-list:last-child{ margin-bottom:-1.5rem; }
.lv-acc-card-list .lv-acc-list > .lv-acc-row:last-child{ border-radius:0 0 15px 15px; }
.lv-acc-card-list .lv-acc-card-head{ margin-bottom:1rem; }

/* ============================================================
   59. LUMVARA DIALOG (vanilla, no Bootstrap)
   Named .lv-dlg deliberately: .lv-modal is already a SKIN applied to
   real Bootstrap modals (see footer.tpl), which supply their own
   display:none. Reusing that name left these with no hiding rule and
   they rendered inline as page content.
   Markup: .lv-dlg > (.lv-dlg-back + .lv-dlg-box > h4 + p + .lv-dlg-foot)
   Open by adding .is-open
   ============================================================ */
.lv-dlg{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;padding:1rem;
}
.lv-dlg.is-open{ display:flex; }
.lv-dlg-back{
  position:absolute;inset:0;background:rgba(5,6,9,.8);backdrop-filter:blur(3px);
}
.lv-dlg-box{
  position:relative;z-index:1;width:100%;max-width:26rem;
  background:var(--gray-900);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:1.5rem;box-shadow:0 24px 64px -12px rgba(0,0,0,.8);
  animation:lvDlgIn .18s var(--lv-ease);
}
@keyframes lvDlgIn{ from{ opacity:0;transform:translateY(8px) scale(.98); } to{ opacity:1;transform:none; } }
.lv-dlg-box h4{
  margin:0 0 .75rem;font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--gray-25);
}
.lv-dlg-box p{
  margin:0 0 .625rem;font-family:var(--font-ui);font-size:var(--text-sm);
  color:var(--gray-400);line-height:1.6;
}
.lv-dlg-foot{
  display:flex;gap:.5rem;justify-content:flex-end;
  margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.07);
}
.lv-dlg-foot .lv-btn{ padding:.5625rem 1.125rem; }

/* ============================================================
   60. PAYMENT METHODS — manage (card / bank capture)
   .form-group and .field-error-msg are REQUIRED here: WHMCS's
   showInputError()/setInputError() do
     this.closest(".form-group").addClass("has-error").find(".field-error-msg")
   Remove either and card validation errors silently never render.
   ============================================================ */
.lv-pm .form-group{ margin-bottom:1.125rem; }
.lv-pm .form-group > label,
.lv-pm .control-label{
  display:block;font-size:.875rem;font-weight:500;color:var(--lv-muted);margin-bottom:.5rem;
}
.lv-pm .field-error-msg{
  display:none;margin-top:.375rem;font-size:.75rem;color:#FC5D5D;
}
.lv-pm .form-group.has-error .lv-input{ border-color:#F53D3D; }
.lv-pm .form-group.has-error .lv-input:focus{ box-shadow:0 0 0 3px rgba(245,61,61,.12); }
.lv-pm .form-group.has-error .field-error-msg{ display:block; }

.lv-pm .gateway-errors{
  padding:.875rem 1.125rem;border-radius:12px;margin-bottom:1.25rem;text-align:center;
  background:rgba(245,61,61,.1);border:1px solid rgba(245,61,61,.3);color:#FC5D5D;
  font-size:var(--text-sm);
}
.lv-pm-loading{
  padding:2.5rem 1rem;text-align:center;color:var(--gray-500);font-size:var(--text-sm);
}
.lv-pm-spin{
  display:inline-block;width:18px;height:18px;margin-right:.5rem;vertical-align:-3px;
  border:2px solid var(--gray-700);border-top-color:var(--lv-lumen);border-radius:999px;
  animation:lvSpin .7s linear infinite;
}
@keyframes lvSpin{ to{ transform:rotate(360deg); } }

.lv-pm-types{ display:flex;flex-direction:column;gap:.5rem; }
@media (min-width:640px){ .lv-pm-types{ flex-direction:row;flex-wrap:wrap; } .lv-pm-types .lv-radio{ flex:1 1 12rem;margin:0; } }
.lv-pm-inline{ display:flex;gap:.5rem;flex-wrap:wrap; }
.lv-pm-inline .lv-radio{ flex:1 1 10rem;margin:0; }

.lv-pm-narrow{ max-width:22rem; }
.lv-pm-cvc{ display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; }
.lv-pm-cvc .lv-input{ max-width:8rem; }
.lv-cvv-link{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--brand-400);font-size:var(--text-xs);text-decoration:underline;
}
.lv-cvv-pop{
  display:none;margin-top:.625rem;padding:.625rem;border-radius:12px;
  background:#12151B;border:1px solid var(--lv-line);width:max-content;max-width:100%;
}
.lv-cvv-pop.is-open{ display:block; }
.lv-cvv-pop img{ display:block;border-radius:6px;max-width:100%; }

.lv-pm .auth3d-area{
  width:100%;min-height:600px;border:1px solid var(--lv-line);border-radius:12px;background:#fff;
}
#paymentGatewayInput:empty,
#tokenGatewayAssistedOutput:empty{ display:none; }
.lv-pm-dlg .lv-dlg-box{ max-width:48rem; }

/* ============================================================
   61. SUPPORT TICKETS — list, submit, feedback
   ============================================================ */
.lv-tk-bar{ display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:space-between; }
.lv-tk-tabs{ flex:1 1 auto; }
.lv-tk-num{
  display:inline-block;margin-right:.5rem;font-family:var(--font-display);
  font-size:.8125rem;color:var(--lv-dim);
}
.lv-acc-row-t .ticket-subject.unread{ font-weight:700;color:#fff; }
.lv-acc-row-ic.lv-tk-unread{ position:relative; }
.lv-acc-row-ic.lv-tk-unread::after{
  content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:999px;
  background:var(--lv-lumen);border:2px solid var(--gray-900);
}

/* ---- department picker ---- */
.lv-dept-grid{ display:grid;grid-template-columns:1fr;gap:.75rem; }
@media (min-width:768px){ .lv-dept-grid{ grid-template-columns:1fr 1fr; } }
.lv-dept{
  display:flex;align-items:center;gap:.875rem;padding:1.125rem 1.25rem;border-radius:14px;
  background:var(--gray-900);border:1px solid rgba(255,255,255,.06);text-decoration:none;
  transition:border-color .18s var(--lv-ease),background .18s var(--lv-ease),transform .18s var(--lv-ease);
}
.lv-dept:hover{ border-color:var(--lv-lumen);background:rgba(254,181,74,.05);transform:translateY(-1px); }
.lv-dept-ic{
  display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  background:rgba(254,181,74,.12);color:var(--brand-500);
}
.lv-dept-ic svg{ width:20px;height:20px; }
.lv-dept-body{ flex:1;min-width:0; }
.lv-dept-t{ display:block;font-family:var(--font-ui);font-weight:600;color:var(--gray-25);font-size:.9375rem; }
.lv-dept-s{ display:block;margin-top:.1875rem;font-size:var(--text-xs);color:var(--gray-500);line-height:1.5; }
.lv-dept-arrow{ width:16px;height:16px;flex:0 0 auto;color:var(--gray-600); }
.lv-main a.lv-dept{ color:inherit; }
.lv-main a.lv-dept:hover .lv-dept-t{ color:var(--brand-400); }

/* ---- attachments ---- */
.lv-file-row{ display:flex;gap:.5rem;align-items:stretch;margin-bottom:.5rem; }
.lv-file{ position:relative;flex:1;min-width:0; }
.lv-file .custom-file-input{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;
}
.lv-file-label{
  display:flex;align-items:center;gap:.5rem;margin:0;width:100%;
  padding:.75rem 1rem;border-radius:12px;cursor:pointer;
  background:#0B0D12;border:1px dashed var(--lv-line);
  color:var(--gray-500);font-size:var(--text-sm);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  transition:border-color .18s var(--lv-ease),color .18s var(--lv-ease);
}
.lv-file-label svg{ width:15px;height:15px;flex:0 0 auto; }
.lv-file:hover .lv-file-label{ border-color:var(--lv-lumen);color:var(--gray-300); }
#fileUploadsContainer .lv-file-row{ margin-top:.5rem; }

/* ---- kb suggestions ---- */
.lv-kb-sug{
  margin:1rem 0;padding:1.25rem;border-radius:14px;
  background:rgba(124,169,255,.06);border:1px solid rgba(124,169,255,.2);
}
.lv-kb-sug h4{
  margin:0 0 .375rem;font-family:var(--font-display);font-size:1.0625rem;color:var(--gray-25);
}
.lv-kb-sug-lead{ margin:0 0 .875rem;font-size:var(--text-xs);color:var(--gray-500); }
.lv-kb-list{ display:flex;flex-direction:column;gap:.5rem; }
.lv-kb-item{
  display:flex;align-items:flex-start;gap:.625rem;padding:.75rem .875rem;border-radius:10px;
  background:var(--gray-900);border:1px solid var(--lv-line);text-decoration:none;
  transition:border-color .16s var(--lv-ease);
}
.lv-kb-item:hover{ border-color:#7CA9FF; }
.lv-kb-item > svg{ width:16px;height:16px;flex:0 0 auto;margin-top:.125rem;color:#7CA9FF; }
.lv-kb-body{ flex:1;min-width:0; }
.lv-kb-t{ display:block;font-size:var(--text-sm);font-weight:600;color:var(--gray-100); }
.lv-kb-s{
  display:block;margin-top:.125rem;font-size:var(--text-xs);color:var(--gray-500);line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.lv-main a.lv-kb-item{ color:inherit; }

/* ---- feedback ---- */
.lv-fb-meta{
  display:grid;grid-template-columns:1fr;gap:.5rem;margin:1.25rem 0;
  padding:1rem;border-radius:12px;background:var(--gray-950);border:1px solid var(--lv-line);
}
@media (min-width:640px){ .lv-fb-meta{ grid-template-columns:1fr 1fr; } }
.lv-fb-meta > div{ display:flex;justify-content:space-between;gap:1rem;font-size:var(--text-sm); }
.lv-fb-meta span{ color:var(--gray-500); }
.lv-fb-meta strong{ color:var(--gray-100);text-align:right; }
.lv-fb-block{
  margin:1.25rem 0;padding:1.25rem;border-radius:14px;
  background:var(--gray-950);border:1px solid var(--lv-line);
}
.lv-fb-q{ margin:0 0 .75rem !important;font-size:var(--text-sm);color:var(--gray-300);text-align:left !important; }
.lv-fb-q strong{ color:var(--brand-400); }
.lv-fb-block .lv-textarea{ margin-bottom:.75rem; }
.lv-fb-scale{ display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap; }
.lv-fb-end{ font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-600); }
.lv-fb-nums{ display:flex;gap:.3125rem;flex:1;flex-wrap:wrap;justify-content:center; }
.lv-fb-num{ cursor:pointer; }
.lv-fb-num input{ position:absolute;opacity:0;width:0;height:0; }
.lv-fb-num span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--gray-900);border:1px solid var(--lv-line);
  font-family:var(--font-display);font-size:.875rem;color:var(--gray-400);
  transition:background .16s var(--lv-ease),border-color .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-fb-num:hover span{ border-color:var(--gray-600);color:var(--gray-200); }
.lv-fb-num input:checked + span{
  background:var(--lv-lumen);border-color:var(--lv-lumen);color:#1A1204;font-weight:700;
}
.lv-fb-num input:focus-visible + span{ box-shadow:0 0 0 3px rgba(254,181,74,.2); }

/* ============================================================
   62. NOTIFY ZONE — dismiss button + action button on .lv-alert
   The .lv-alert component already existed (section ~36) with icon /
   body / link and all four severities; these only add the pieces the
   verification banners need on top of it.
   ============================================================ */
.lv-alert-actions{ flex:0 0 auto;display:flex;align-items:center;gap:.5rem;margin-left:auto; }
.lv-alert-actions .lv-btn{ padding:.4375rem .875rem;font-size:.75rem; }
.lv-alert-x{
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--gray-500);
  transition:background .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-alert-x svg{ width:15px;height:15px; }
.lv-alert-x:hover{ background:rgba(255,255,255,.08);color:#fff; }
/* the x sits top-right, not vertically centred, per the design */
.lv-alert > .lv-alert-x{ margin-left:auto; }

@media (max-width:640px){
  .lv-alert-actions{ margin-left:0;width:100%;justify-content:flex-start;margin-top:.5rem; }
}

/* ============================================================
   63. ALERT BANNER — responsive
   Desktop keeps everything on one line. Below 640px the banner
   wraps to exactly two: text (with the close) on the first, the
   action button on the second, indented to line up under the text.
   ============================================================ */
@media (max-width:640px){
  .lv-alert{
    flex-wrap:wrap;align-items:flex-start;
    padding:.8125rem .875rem;gap:.625rem .75rem;border-radius:12px;
  }
  .lv-alert::before{
    background:linear-gradient(90deg, var(--lv-alert-tint) 0%, rgba(0,0,0,0) 88%);
  }
  .lv-alert-icon{ order:1;width:28px;height:28px;border-radius:8px;margin-top:.0625rem; }
  .lv-alert-icon::before{ width:8px;height:8px; }

  /* line 1: text + close */
  .lv-alert-body{ order:2;flex:1 1 0;align-items:flex-start;flex-direction:column;gap:.1875rem; }
  .lv-alert-title{ font-size:.8125rem; }
  .lv-alert-desc{ font-size:.75rem; }
  .lv-alert-x{ order:3;width:24px;height:24px;margin-top:-.0625rem; }
  .lv-alert-x svg{ width:14px;height:14px; }

  /* line 2: the button, indented past the dot tile */
  .lv-alert-actions{ order:4;flex:1 1 100%;margin-left:calc(28px + .75rem); }
  .lv-alert-actions .lv-btn{ padding:.4375rem .8125rem; }
  .lv-alert-link{ white-space:normal; }
}

/* very narrow: drop the tile, the fade already carries severity */
@media (max-width:380px){
  .lv-alert{ gap:.5rem .625rem;padding:.75rem; }
  .lv-alert-icon{ display:none; }
  .lv-alert-actions{ margin-left:0; }
  .lv-alert-actions .lv-btn{ width:100%;justify-content:center; }
}

/* tablet: one line still, fade eased out */
@media (min-width:641px) and (max-width:1024px){
  .lv-alert::before{
    background:linear-gradient(90deg, var(--lv-alert-tint) 0%, rgba(0,0,0,0) 75%);
  }
  .lv-alert-desc{ font-size:.78125rem; }
}

/* ============================================================
   64. AUTH PAGES — alignment + action stack
   The card mixed left-aligned titles with centred sub/alt text,
   which read as unaligned. Everything is left now, and the
   secondary route (create account / sign in) is a real button
   under the primary rather than a text link.
   ============================================================ */
.lv-auth-card{ text-align:left; }
.lv-auth-brand{ justify-content:flex-start;margin-bottom:1.5rem; }
.lv-auth-title{ text-align:left;font-size:1.75rem;margin:0 0 .375rem; }
.lv-auth-sub{ text-align:left;margin:0 0 1.75rem;font-size:.875rem; }
.lv-auth-note{ text-align:left; }

.lv-auth-actions{ display:flex;flex-direction:column;gap:.625rem;margin-top:1.5rem; }
.lv-auth-actions .lv-btn-full{ margin-top:0; }
/* the amber glow belongs to the primary CTA only */
.lv-btn-ghost.lv-btn-full{ box-shadow:none; }

/* a labelled divider between the two routes */
.lv-auth-or{
  display:flex;align-items:center;gap:.75rem;margin:.25rem 0;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--lv-dim);
}
.lv-auth-or::before,.lv-auth-or::after{
  content:'';flex:1;height:1px;background:var(--lv-line);
}

.lv-auth-row{ margin:.25rem 0 0; }

/* ============================================================
   65. AUTH STAGE — spotlight / hero / traces / card
   Full-bleed dark page: god-rays fanning from top centre, a
   two-line gradient headline, circuit traces bracketing the card.
   Appended last so it wins over the earlier .lv-auth-card rules.
   ============================================================ */
.lv-auth{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--lv-void);overflow:hidden;
}

/* The stage is min-height:100vh. Anything WHMCS's {$headeroutput} hook emits
   above the form adds to that, so the page ended up a little taller than the
   viewport and scrolled by exactly the height of the hook's output — a login
   page with a stray scrollbar and nothing below the fold.

   Letting the body own the viewport height and the stage take what is left
   makes the page fit whatever the hook adds, including nothing at all. The
   :has() is what scopes this to the standalone auth pages: only they put
   .lv-auth-form directly in <body>. */
body.primary-bg-color:has(> .lv-auth-form){
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
body.primary-bg-color:has(> .lv-auth-form) > .lv-auth-form{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
}
body.primary-bg-color:has(> .lv-auth-form) > .lv-auth-form > .lv-auth{
  flex:1 1 auto;min-height:0;
}

/* backdrop: diagonal weave + spotlight + rays

   position:fixed, not absolute.

   The standalone auth pages put .lv-auth-form straight into <body>, under
   whatever WHMCS's {$headeroutput} hook emits. On an install where that hook
   has content, the stage starts a few dozen pixels down the page — and an
   absolute backdrop, anchored to .lv-auth, started there too. The strip above
   it stayed bare body background: a hard black band across the top, with the
   god-rays visibly beginning below it.

   Pinning the backdrop to the viewport paints it from the top edge regardless
   of what sits above the form, so the band cannot appear whatever a hook adds
   or removes. Nothing is hidden — the hook's output still renders over it.

   Safe as fixed: this is a decorative layer (pointer-events:none, z-index:0)
   on a page that is one viewport tall by design, and .lv-auth has no transform
   or filter to trap it. */
.lv-auth-rays{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.014) 38px 39px);
}
.lv-auth-rays::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 65% 45% at 50% -8%, rgba(254,181,74,.20), transparent 62%),
    radial-gradient(ellipse 30% 24% at 50% -4%, rgba(254,192,90,.26), transparent 58%);
}
.lv-auth-rays::after{
  content:'';position:absolute;left:50%;top:-6%;
  width:150%;height:90%;transform:translateX(-50%);
  background:conic-gradient(from 150deg at 50% 0%,
    transparent 0deg,
    rgba(254,181,74,.09) 6deg,  transparent 10deg,
    transparent 14deg, rgba(254,181,74,.05) 18deg, transparent 22deg,
    transparent 26deg, rgba(254,192,90,.11) 30deg, transparent 35deg,
    transparent 39deg, rgba(254,181,74,.05) 43deg, transparent 47deg,
    transparent 51deg, rgba(254,181,74,.08) 55deg, transparent 60deg,
    transparent 360deg);
  filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 55%, transparent 88%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 55%, transparent 88%);
}

/* brand pinned top-left of the page (not inside the card) */
.lv-auth > .lv-auth-brand{
  position:absolute;top:1.75rem;left:2rem;z-index:3;
  display:inline-flex;align-items:center;gap:.625rem;
  text-decoration:none;margin:0;
}
/* WHMCS's own logo ($assetLogoPath). Height-capped so a wide or tall
   upload can't blow out the corner; falls back to the company name. */
.lv-auth > .lv-auth-brand .lv-auth-logo{
  display:block;height:34px;width:auto;max-width:210px;object-fit:contain;
}
.lv-auth > .lv-auth-brand .lv-wordmark{
  font-family:var(--font-ui);font-weight:700;font-size:.9375rem;color:#fff;letter-spacing:-.01em;
}

.lv-auth-body{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6rem 1.25rem 2rem;
}

/* two-line gradient headline */
.lv-auth-hero{
  text-align:center;margin:0 0 2.75rem;
  font-family:var(--font-ui);font-weight:800;letter-spacing:-.025em;line-height:1.06;
}
.lv-auth-hero span{ display:block; }
.lv-auth-hero-a{
  font-size:clamp(1.75rem,4.4vw,3.05rem);
  background:linear-gradient(178deg, #FFEBC6 0%, #FEB54A 58%, #7A5417 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lv-auth-hero-b{
  font-size:clamp(1.5rem,3.7vw,2.55rem);
  color:var(--brand-400);
}

/* stage holds the card plus the circuit traces either side */
.lv-auth-stage{ position:relative;display:flex;justify-content:center;width:100%; }
.lv-auth-trace{
  position:absolute;top:50%;transform:translateY(-50%);
  height:calc(100% + 3.5rem);width:min(30vw,360px);
  pointer-events:none;z-index:0;
}
.lv-auth-trace-l{ right:calc(50% + 196px); }
.lv-auth-trace-r{ left:calc(50% + 196px); }
.lv-auth-trace::before{
  content:'';position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom, transparent, rgba(254,181,74,.38), transparent);
}
.lv-auth-trace::after{
  content:'';position:absolute;top:50%;height:1px;left:0;right:0;
}
.lv-auth-trace-l::before{ right:0; }
.lv-auth-trace-l::after{ background:linear-gradient(to left, rgba(254,181,74,.38), transparent); }
.lv-auth-trace-r::before{ left:0; }
.lv-auth-trace-r::after{ background:linear-gradient(to right, rgba(254,181,74,.38), transparent); }
@media (max-width:980px){ .lv-auth-trace{ display:none; } }

/* the card */
.lv-auth .lv-auth-card{
  position:relative;z-index:2;width:100%;max-width:392px;
  background:#0A0A0C;border:1px solid rgba(255,255,255,.06);border-radius:16px;
  padding:1.75rem;text-align:left;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 70px -22px rgba(254,181,74,.20);
}
.lv-auth .lv-auth-card-wide{ max-width:660px; }
.lv-auth .lv-auth-title{
  text-align:center;font-family:var(--font-ui);font-weight:700;
  font-size:1.375rem;color:#fff;letter-spacing:-.01em;margin:0 0 .375rem;
}
.lv-auth .lv-auth-sub{
  text-align:center;color:var(--gray-500);font-size:.8125rem;margin:0 0 1.5rem;
}
.lv-auth .lv-field{ margin-bottom:1rem; }
.lv-auth .lv-field > label{ font-size:.8125rem;color:var(--gray-400);margin-bottom:.4375rem; }
.lv-auth .lv-input{ border-radius:10px;padding:.75rem .875rem;font-size:.875rem;background:#111114; }
.lv-auth .lv-auth-row{ margin:.25rem 0 1.25rem; }
.lv-auth .lv-auth-link{ font-size:.75rem;color:var(--gray-400); }
.lv-auth .lv-auth-link:hover{ color:var(--brand-400); }
.lv-auth .lv-choice{ font-size:.75rem;color:var(--gray-400); }

/* the CTA is a soft-cornered solid button here, not the glowing pill */
.lv-auth .lv-btn-full{
  border-radius:10px;box-shadow:none;margin-top:0;
  padding:.8125rem 1rem;font-size:.9375rem;font-weight:600;
}
.lv-auth .lv-auth-actions{ margin-top:1.25rem;gap:.5rem; }
.lv-auth .lv-auth-or{ font-size:.625rem;margin:.125rem 0; }
.lv-auth-copy{
  position:relative;z-index:1;text-align:center;
  color:var(--gray-600);font-size:.75rem;margin:2.5rem 0 0;
}
@media (max-width:640px){
  .lv-auth > .lv-auth-brand{ top:1.25rem;left:1.25rem; }
  .lv-auth-body{ padding:5rem 1rem 2rem; }
  .lv-auth-hero{ margin-bottom:2rem; }
}

/* Register uses the wide card (660px), so the traces need pushing out past
   its edge — the default offset is half of the 392px login card. They also
   hang off .lv-auth-body there rather than a .lv-auth-stage, so cap the
   height instead of tracking the card. */
.lv-auth-body > .lv-auth-trace{ height:min(72%, 540px); }
.lv-auth-body:has(.lv-auth-card-wide) > .lv-auth-trace-l{ right:calc(50% + 348px); }
.lv-auth-body:has(.lv-auth-card-wide) > .lv-auth-trace-r{ left:calc(50% + 348px); }
@media (max-width:1240px){
  .lv-auth-body:has(.lv-auth-card-wide) > .lv-auth-trace{ display:none; }
}

/* ============================================================
   66. CHOICE — checked state for the bare .lv-choice variant
   The checked/focus rules were only ever written for .lv-cb and
   .lv-radio (the card variants). .lv-choice got sizing rules but
   no state, so a bare checkbox (login "remember me", register
   TOS / marketing opt-in) rendered a box that never ticked —
   the input toggled fine, it just never showed.
   ============================================================ */
.lv-choice input:checked ~ .lv-cb-box{
  background:var(--lv-lumen);border-color:var(--lv-lumen);
}
.lv-choice input:checked ~ .lv-cb-box::after{ transform:rotate(45deg) scale(1); }
.lv-choice input:focus-visible ~ .lv-cb-box{ box-shadow:0 0 0 3px rgba(254,181,74,.15); }

.lv-choice input:checked ~ .lv-radio-dot{ border-color:var(--lv-lumen); }
.lv-choice input:checked ~ .lv-radio-dot::after{ transform:translate(-50%,-50%) scale(1); }
.lv-choice input:focus-visible ~ .lv-radio-dot{ box-shadow:0 0 0 3px rgba(254,181,74,.15); }

/* the box must not shrink when the label text wraps */
.lv-choice .lv-cb-box,
.lv-choice .lv-radio-dot{ flex:0 0 auto; }
.lv-choice{ align-items:flex-start; }
.lv-choice > span:last-child{ line-height:1.45; }

/* ============================================================
   67. AUTH — secondary CTA
   The ghost button rendered as a near-black box with underlined
   white text: it inherits the global link underline and .lv-btn-ghost
   carries no colour of its own. Give it the brand outline + amber
   label, and kill the underline on both states.
   ============================================================ */
.lv-auth .lv-btn-ghost{
  background:transparent;
  border:1px solid rgba(254,181,74,.32);
  color:var(--brand-400);
  text-decoration:none;
  transition:background .18s var(--lv-ease),border-color .18s var(--lv-ease),color .18s var(--lv-ease);
}
.lv-auth .lv-btn-ghost:hover,
.lv-auth .lv-btn-ghost:focus{
  background:rgba(254,181,74,.08);
  border-color:var(--lv-lumen);
  color:var(--lv-lumen);
  text-decoration:none;
}
/* anchors styled as buttons pick up the underline from the global link rule */
.lv-auth a.lv-btn-ghost,
.lv-auth a.lv-btn-primary,
.lv-auth a.lv-btn-full{ text-decoration:none !important; }

/* ============================================================
   68. GENERATE PASSWORD MODAL
   Bootstrap's .modal shell stays (WHMCS opens it with the BS4
   jQuery plugin), skinned to match .lv-dlg. The header is forced
   flush: bootstrap/theme.css give .modal-header padding, borders
   and align-items:flex-start, and .close floats right with a
   white text-shadow — all of it fights the flex row.
   ============================================================ */
.lv-genpw{ padding:0 1rem; }
.lv-genpw .modal-dialog{ max-width:25rem;margin:1.75rem auto; }
.lv-genpw .modal-content{
  background:var(--gray-900);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  box-shadow:0 24px 64px -12px rgba(0,0,0,.8);overflow:hidden;
}

.lv-genpw .modal-header{
  display:flex;align-items:center;justify-content:flex-start;gap:.75rem;
  background:transparent !important;
  border:0 !important;border-bottom:0 !important;
  padding:1.375rem 1.375rem .875rem !important;
  margin:0;
}
.lv-genpw .modal-title{
  flex:1;min-width:0;text-align:left;
  font-family:var(--font-display);font-weight:400;font-size:1.0625rem;
  letter-spacing:-.01em;color:var(--gray-25);margin:0;line-height:1.2;
}
.lv-genpw-x{
  display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;
  float:none;margin:0;padding:0;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--gray-500);opacity:1;text-shadow:none;font-size:inherit;
  transition:background .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-genpw-x svg{ width:15px;height:15px;display:block; }
.lv-genpw-x:hover{ background:rgba(255,255,255,.08);color:#fff;opacity:1; }

.lv-genpw .modal-body{ padding:0 1.375rem 1.125rem !important; }

/* length row */
.lv-genpw-len{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;
}
.lv-genpw-len label{ font-size:.8125rem;font-weight:500;color:var(--gray-500);margin:0; }
.lv-genpw-len .lv-input{
  width:4.5rem;text-align:center;padding:.4375rem .5rem;border-radius:9px;
  font-family:var(--font-display);font-size:.9375rem;
}

/* generated password — the .lv-code treatment */
.lv-genpw-out{ position:relative;margin-bottom:.625rem; }
.lv-genpw-out .lv-input{
  width:100%;padding:.9375rem 3rem .9375rem 1rem;border-radius:12px;text-align:center;
  background:rgba(253,176,34,.08);border:1px solid rgba(253,176,34,.3);
  font-family:var(--font-display);font-size:1.125rem;letter-spacing:.06em;color:#FDB022;
}
.lv-genpw-out .lv-input:focus{
  border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(254,181,74,.12);
}
.lv-genpw-copy{
  position:absolute;top:50%;right:.5rem;transform:translateY(-50%);
  display:grid;place-items:center;width:28px;height:28px;
  background:transparent;border:0;border-radius:8px;cursor:pointer;color:#FDB022;
  transition:background .16s var(--lv-ease);
}
.lv-genpw-copy svg{ width:14px;height:14px;display:block; }
.lv-genpw-copy:hover{ background:rgba(253,176,34,.16); }

.lv-genpw-new{ width:100%;justify-content:center;font-size:.8125rem;padding:.5rem; }

.lv-genpw .modal-footer{
  display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:nowrap;
  background:transparent !important;border:0 !important;border-top:0 !important;
  padding:0 1.375rem 1.375rem !important;margin:0;
}
.lv-genpw .modal-footer > *{ margin:0; }
.lv-genpw .modal-footer .lv-btn{ font-size:.8125rem;padding:.5625rem .875rem; }
.lv-genpw .modal-footer .lv-btn-primary{ flex:1; }

@media (max-width:420px){
  .lv-genpw .modal-footer{ flex-direction:column-reverse; }
  .lv-genpw .modal-footer .lv-btn{ width:100%;justify-content:center; }
}
.modal-backdrop{ background:#000; }
.modal-backdrop.show{ opacity:.72; }

/* ============================================================
   69. VIEWTICKET — WHMCS native structure, themed
   Keeps WHMCS's own markup (.ticket-reply / .posted-by /
   .message / .custom-file / .markdown-editor) and skins it.
   Includes a dark theme for EasyMDE, which WHMCS swaps in for
   .markdown-editor and which ships light-themed CSS — that's
   what rendered as a white slab in the thread.
   ============================================================ */
.lv-ticket{ max-width:60rem; }
.lv-ticket-head{ margin-bottom:1rem; }
.lv-ticket-head-top{ display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap; }
.lv-ticket-head-id{ min-width:0; }
.lv-ticket-subject{
  font-family:var(--font-display);font-weight:400;font-size:1.375rem;
  color:var(--gray-25);letter-spacing:-.01em;margin:.375rem 0 .625rem;line-height:1.25;
}
.lv-ticket-facts{ display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:.8125rem; }
.lv-ticket-actions{ display:flex;gap:.5rem;flex:0 0 auto;flex-wrap:wrap; }
.lv-ticket-actions svg{ width:13px;height:13px; }

.lv-ticket-thread{ display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem; }

/* WHMCS puts .ticket-reply on each post and adds .staff for operators */
.lv-ticket-thread .ticket-reply{ padding:0;overflow:hidden; }
.lv-ticket-thread .ticket-reply.staff{ border-color:rgba(254,181,74,.28); }
.lv-reply-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  padding:.75rem 1rem;background:var(--gray-900);border-bottom:1px solid var(--lv-line);
}
.ticket-reply.staff .lv-reply-head{ background:rgba(254,181,74,.08); }
.lv-reply-who{ display:flex;align-items:center;gap:.5rem;min-width:0;flex-wrap:wrap; }
.lv-reply-head .posted-by-name{ font-size:.875rem;font-weight:600;color:var(--gray-25); }
.ticket-reply.staff .posted-by-name{ color:var(--brand-400); }
.lv-reply-tag{
  font-size:.5625rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.125rem .375rem;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--gray-500);
}
.lv-reply-date{ font-size:.75rem;color:var(--gray-600);white-space:nowrap; }
.lv-reply-body{ padding:1rem;font-size:.875rem;line-height:1.6;color:var(--lv-text);overflow-wrap:anywhere; }
.lv-reply-body > :first-child{ margin-top:0; }
.lv-reply-body > :last-child{ margin-bottom:0; }
.lv-reply-body a{ color:var(--brand-400); }
.lv-reply-body pre{ background:var(--lv-void);border:1px solid var(--lv-line);border-radius:8px;padding:.75rem;overflow-x:auto;font-size:.8125rem; }
.lv-reply-body code{ background:var(--lv-void);border-radius:4px;padding:.0625rem .3125rem;font-size:.8125rem; }
.lv-reply-body img{ max-width:100%;border-radius:8px; }
.lv-reply-body blockquote{
  margin:.5rem 0;padding:.25rem 0 .25rem .75rem;
  border-left:2px solid rgba(254,181,74,.4);color:var(--lv-muted);
}
.lv-reply-ip{ padding:0 1rem .75rem;font-size:.6875rem;color:var(--gray-600); }
.lv-reply-rate{ padding:0 1rem .875rem; }

.lv-reply-files{ padding:.875rem 1rem;background:var(--gray-950);border-top:1px solid var(--lv-line); }
.lv-reply-files-head{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gray-500);margin-bottom:.5rem;
}
.lv-file-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem; }
.lv-file-chip{
  display:inline-flex;align-items:center;gap:.4375rem;
  padding:.375rem .5rem;border-radius:8px;
  background:var(--lv-void);border:1px solid var(--lv-line);
  font-size:.75rem;color:var(--lv-text);text-decoration:none;
  transition:border-color .16s var(--lv-ease);
}
.lv-file-chip svg{ width:13px;height:13px;flex:0 0 auto;color:var(--brand-400); }
.lv-file-chip:hover{ border-color:rgba(254,181,74,.4);color:#fff; }
.lv-file-chip.is-gone{ opacity:.5; }
.lv-file-chip.is-gone svg{ color:var(--gray-600); }
.lv-file-name{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:18rem; }

/* Bootstrap sets .custom-file-input{opacity:0} and puts the visible control on
   .custom-file-label — WHMCS's JS writes the chosen filename into that label.
   Hiding the label made the whole field disappear. The input stays invisible
   but on top so it still catches the click. */
.lv-attach-row{ display:flex;gap:.5rem;align-items:stretch;margin-bottom:.5rem; }
.lv-attach-row .custom-file{ position:relative;flex:1;min-width:0;height:2.5rem; }
.lv-attach-row .custom-file-input{
  position:absolute;top:0;left:0;z-index:2;
  width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.lv-attach-row .custom-file-label{
  position:absolute;top:0;right:0;left:0;z-index:1;
  display:flex;align-items:center;height:2.5rem;margin:0;
  padding:0 6.5rem 0 .875rem;
  background:var(--lv-void);border:1px solid var(--lv-line);border-radius:10px;
  color:var(--gray-500);font-size:.8125rem;font-weight:400;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-attach-row .custom-file-label::after{
  content:'Browse';
  position:absolute;top:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;padding:0 .875rem;
  background:var(--gray-800);border-left:1px solid var(--lv-line);
  border-radius:0 9px 9px 0;color:var(--lv-text);font-size:.75rem;
  height:auto;
}
.lv-attach-row .custom-file-input:hover ~ .custom-file-label{
  border-color:rgba(254,181,74,.4);color:var(--lv-text);
}
.lv-attach-row .custom-file-input:focus ~ .custom-file-label{
  border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(254,181,74,.12);
}
.lv-attach-row .input-group-append{ flex:0 0 auto;display:flex;align-items:center; }
.lv-attach-row .input-group-append svg{ width:12px;height:12px; }
#fileUploadsContainer .file-upload{ margin-top:.5rem; }

.lv-reply-submit{ display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1rem; }
.lv-reply-submit .lv-btn{ cursor:pointer; }

/* ---- EasyMDE / SimpleMDE dark theme (WHMCS's markdown editor) ---- */
.editor-toolbar{
  background:var(--gray-900) !important;
  border:1px solid var(--lv-line) !important;border-bottom:0 !important;
  border-radius:12px 12px 0 0 !important;opacity:1 !important;
}
.editor-toolbar button,
.editor-toolbar button i,
.editor-toolbar a{ color:var(--gray-400) !important;border:0 !important; }
.editor-toolbar button:hover,
.editor-toolbar button.active,
.editor-toolbar a:hover{
  background:rgba(255,255,255,.08) !important;border:0 !important;color:#fff !important;
}
.editor-toolbar i.separator{ border-left:1px solid var(--lv-line);border-right:0; }
.editor-statusbar{ color:var(--gray-600) !important;font-size:.6875rem;padding:.25rem .5rem; }
.editor-preview,
.editor-preview-side,
.editor-preview-active,
.editor-preview-active-side{
  background:var(--gray-950) !important;color:var(--lv-text) !important;
}
.editor-preview a{ color:var(--brand-400); }
.editor-preview pre,
.editor-preview code{ background:var(--lv-void) !important;border-radius:6px; }
.editor-toolbar.fullscreen,

@media (max-width:640px){
  .lv-ticket-head-top{ flex-direction:column; }
  .lv-ticket-actions{ width:100%; }
  .lv-reply-submit{ flex-direction:column-reverse; }
  .lv-reply-submit .lv-btn{ width:100%;text-align:center; }
}

/* ============================================================
   70. VIEWTICKET — polish fixes
   ============================================================ */

/* --- rating stars ---
   The parent draws these with content:"\f005" in "Font Awesome 6 Pro",
   a PAID font this site doesn't load — so every star rendered as a tofu
   box. Redrawn with an SVG mask: no font dependency, and it takes the
   brand colour. */
.ticket-reply .rating span.star,
.ticket-reply .rating-done span.star{
  width:17px;height:17px;display:inline-block;vertical-align:middle;
  font-family:inherit !important;
  background-color:var(--gray-700);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color .14s var(--lv-ease);
}
.ticket-reply .rating span.star:before,
.ticket-reply .rating-done span.star:before{ content:none !important; }
/* stars are emitted 5→1, and the parent lights them with `:hover ~ star`,
   which only reads correctly if they render right-to-left */
.ticket-reply .rating{ direction:rtl;display:inline-flex;gap:2px; }
.ticket-reply .rating span.star:hover,
.ticket-reply .rating span.star:hover ~ span.star{ background-color:var(--lv-lumen); }
.ticket-reply .rating-done{ display:inline-flex;align-items:center;gap:2px; }
.ticket-reply .rating-done span.star.active{ background-color:var(--lv-lumen); }
.ticket-reply .rating-done .rated{
  font-size:.75rem;color:var(--gray-500);margin-right:.5rem;order:-1;white-space:nowrap;
}
.lv-reply-rate{ display:flex;justify-content:flex-end; }

/* --- markdown editor ---
   WHMCS loads the editor's CSS from its own assets, not the theme, so the
#ticketReplyContainer .editor-toolbar button:hover,
#ticketReplyContainer .editor-toolbar button.active,
.lv-ticket .editor-toolbar button:hover,
.lv-ticket .editor-toolbar button.active{
  background:rgba(255,255,255,.09) !important;color:#fff !important;border:0 !important;
}
#ticketReplyContainer .editor-toolbar i.separator,
.lv-ticket .editor-toolbar i.separator{ border-left:1px solid var(--lv-line);border-right:0; }
#ticketReplyContainer .editor-statusbar,
.lv-ticket .editor-statusbar{
  background:var(--gray-900) !important;color:var(--gray-600) !important;
  border:1px solid var(--lv-line) !important;border-top:0 !important;
  border-radius:0 0 10px 10px !important;
  padding:.3125rem .625rem !important;font-size:.6875rem !important;
}
#ticketReplyContainer .editor-preview,
#ticketReplyContainer .editor-preview-side,
.lv-ticket .editor-preview,
.lv-ticket .editor-preview-side{
  background:var(--gray-950) !important;color:var(--lv-text) !important;
}
.lv-ticket .editor-preview a{ color:var(--brand-400) !important; }
.lv-ticket .editor-preview pre,
.lv-ticket .editor-preview code{ background:var(--lv-void) !important;border-radius:6px; }
.editor-toolbar.fullscreen{ background:var(--gray-900) !important;z-index:1200; }
.editor-preview-active-side{ z-index:1200; }

/* --- legibility ---
   The status chip and several muted strings were near-invisible on the
   dark card. */
.lv-ticket-facts .lv-badge{ font-weight:600;letter-spacing:.02em; }
.lv-ticket-facts .lv-muted{ color:var(--gray-400); }
.lv-ticket .lv-eyebrow{ color:var(--gray-500); }
.lv-reply-ip{ color:var(--gray-500); }
.lv-ticket .lv-help{ color:var(--gray-500);font-size:.75rem;margin-top:.5rem; }
.lv-ticket-thread .ticket-reply.staff{
  box-shadow:0 0 0 1px rgba(254,181,74,.08), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ============================================================
   71. VIEWTICKET — details sidebar, badges, legibility
   ============================================================ */
.lv-ticket-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;
  gap:1rem;align-items:start;max-width:none;
}
.lv-ticket-main{ min-width:0; }
.lv-ticket-side{ position:sticky;top:1rem;display:flex;flex-direction:column;gap:.75rem; }
@media (max-width:1100px){
  .lv-ticket-grid{ grid-template-columns:1fr; }
  .lv-ticket-side{ position:static;order:-1; }
}

.lv-side-card{ padding:1.125rem 1.25rem; }
.lv-side-title{
  font-family:var(--font-display);font-size:.9375rem;font-weight:400;
  color:var(--gray-25);margin-bottom:.875rem;
  padding-bottom:.75rem;border-bottom:1px solid var(--lv-line);
}
.lv-side-list{ margin:0;display:flex;flex-direction:column;gap:.75rem; }
.lv-side-row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.lv-side-row dt{
  font-size:.8125rem;font-weight:400;color:var(--gray-500);margin:0;flex:0 0 auto;
}
.lv-side-row dd{
  margin:0;text-align:right;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
}
.lv-side-strong{ font-size:.8125rem;font-weight:600;color:var(--gray-25); }

/* --- badges: the ticket chips were washing out on dark ---
   Scoped to .lv-badge on purpose: .lv-status-* is ALSO used with the
   .lv-status base class on invoices, services and quotes, so an unscoped
   .lv-status-on-hold here would have recoloured quote stages too. */
.lv-badge{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.25rem .5625rem;border-radius:999px;
  font-size:.6875rem;font-weight:600;letter-spacing:.02em;line-height:1.3;
  border:1px solid transparent;white-space:nowrap;
}
.lv-badge::before{
  content:'';width:5px;height:5px;border-radius:99px;background:currentColor;flex:0 0 auto;
}
.lv-badge.lv-status-open{
  background:rgba(87,204,125,.14);border-color:rgba(87,204,125,.35);color:#6FE39A;
}
.lv-badge.lv-status-answered{
  background:rgba(124,169,255,.14);border-color:rgba(124,169,255,.35);color:#9CBEFF;
}
.lv-badge.lv-status-customer-reply,
.lv-badge.lv-status-customerreply{
  background:rgba(254,181,74,.14);border-color:rgba(254,181,74,.35);color:var(--brand-400);
}
.lv-badge.lv-status-on-hold,
.lv-badge.lv-status-onhold{
  background:rgba(253,176,34,.12);border-color:rgba(253,176,34,.3);color:#FDB022;
}
.lv-badge.lv-status-in-progress,
.lv-badge.lv-status-inprogress{
  background:rgba(182,92,255,.14);border-color:rgba(182,92,255,.35);color:#C68CFF;
}
.lv-badge.lv-status-closed{
  background:rgba(154,164,179,.12);border-color:rgba(154,164,179,.28);color:#B4BCC7;
}

/* --- requestor badges: flat grey was unreadable and told you nothing --- */
.lv-reply-tag{
  padding:.1875rem .4375rem;border-radius:5px;
  font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  border:1px solid transparent;
}
.requestor-type-operator,
.requestor-type-admin{
  background:rgba(254,181,74,.16);border-color:rgba(254,181,74,.4);color:var(--brand-400);
}
.requestor-type-authorized_user,
.requestor-type-authorised_user{
  background:rgba(124,169,255,.16);border-color:rgba(124,169,255,.4);color:#9CBEFF;
}
.requestor-type-owner{
  background:rgba(182,92,255,.16);border-color:rgba(182,92,255,.4);color:#C68CFF;
}
.requestor-type-guest,
.requestor-type-other{
  background:rgba(154,164,179,.14);border-color:rgba(154,164,179,.3);color:#B4BCC7;
}

/* --- legibility pass --- */
.lv-reply-head .posted-by-name{ color:#fff;font-size:.9375rem; }
.ticket-reply.staff .posted-by-name{ color:var(--brand-400); }
.lv-reply-date{ color:var(--gray-500);font-size:.75rem; }
.lv-reply-body{ color:#D7DBE2; }
.lv-reply-ip{ color:var(--gray-600);font-size:.6875rem; }
.lv-ticket .lv-eyebrow{
  color:var(--gray-500);font-size:.6875rem;letter-spacing:.09em;
}
.lv-ticket-subject{ font-size:1.5rem; }
.lv-ticket .lv-help{ color:var(--gray-500); }
.lv-reply-files-head{ color:var(--gray-400); }
.ticket-reply .rating-done .rated{ color:var(--gray-400); }

/* --- editor: sit it flush inside the card --- */
#ticketReplyContainer .editor-toolbar{ padding:.3125rem .375rem !important; }
#ticketReplyContainer .editor-toolbar button{
  width:28px !important;height:28px !important;border-radius:6px !important;
  line-height:28px !important;
}
#ticketReplyContainer .editor-statusbar{ text-align:right !important; }

/* ============================================================
   72. MARKDOWN EDITOR — the textarea itself
#inputMessage,
textarea.markdown-editor,
#ticketReplyContainer textarea,
#frmReply textarea.markdown-editor{
  background:var(--lv-void) !important;
  color:var(--lv-text) !important;
  border:1px solid var(--lv-line) !important;
  border-top:0 !important;
  border-radius:0 !important;
  padding:.875rem !important;
  font-family:var(--font-ui) !important;
  font-size:.875rem !important;
  line-height:1.6 !important;
  min-height:180px !important;
  resize:vertical !important;
  box-shadow:none !important;
  -webkit-text-fill-color:var(--lv-text) !important;
}
#inputMessage:focus,
#ticketReplyContainer textarea:focus{
  outline:none !important;
  border-color:rgba(254,181,74,.45) !important;
}
#inputMessage::placeholder,
#ticketReplyContainer textarea::placeholder{ color:var(--lv-dim) !important; }
/* some builds drop a wrapper round the textarea — neutralise it if present */
#ticketReplyContainer .editor-toolbar + div,
#ticketReplyContainer .md-editor{ background:transparent !important; }

/* ============================================================
   73. MARKDOWN EDITOR — target by POSITION, not class name
   Four attempts at naming this element failed (.CodeMirror,
   .EasyMDEContainer, #inputMessage, .lv-md-host). What IS known
   from the rendered page: .editor-toolbar and .editor-statusbar
   are real (both take theming), and the white surface sits
   BETWEEN them as a sibling. So address it structurally — every
   sibling after the toolbar — which cannot miss whatever WHMCS
   actually renders there.
   ============================================================ */
#ticketReplyContainer .editor-toolbar ~ *,
#frmReply .editor-toolbar ~ *{
  background-color:var(--lv-void) !important;
  background-image:none !important;
  color:var(--lv-text) !important;
  border-color:var(--lv-line) !important;
}
/* children inherit the surface rather than painting their own */
#ticketReplyContainer .editor-toolbar ~ * *,
#frmReply .editor-toolbar ~ * *{
  background-color:transparent !important;
  background-image:none !important;
  color:inherit !important;
}
/* the status bar is also a sibling after the toolbar — restore it */
#ticketReplyContainer .editor-statusbar,
#frmReply .editor-statusbar{
  background-color:var(--gray-900) !important;
  color:var(--gray-600) !important;
  border-color:var(--lv-line) !important;
}
#ticketReplyContainer .editor-statusbar *,
#frmReply .editor-statusbar *{ color:var(--gray-600) !important; }
/* keep the preview pane legible */
#ticketReplyContainer .editor-preview,
#ticketReplyContainer .editor-preview-side{
  background-color:var(--gray-950) !important;
}
#ticketReplyContainer .editor-preview a{ color:var(--brand-400) !important; }

/* ============================================================
   74. REPLY CARD — blanket dark, then restore
   Five attempts to name the editor surface have missed
   (.CodeMirror / .EasyMDEContainer / #inputMessage / .lv-md-host /
   sibling-of-toolbar). WHMCS's editor CSS lives in its assets and
   isn't readable from the theme, so naming it is a dead end.

   This inverts the approach: NOTHING inside the reply card may
   paint its own background. That needs no class names and cannot
   miss. The handful of elements that genuinely need a surface are
   restored below at higher specificity.
   ============================================================ */
#ticketReplyContainer *:not([class*='lv-btn']):not(.lv-sec-ic){
  background-color:transparent !important;
  background-image:none !important;
}
#ticketReplyContainer{ background:var(--gray-950) !important; }

/* editing surface + any text the editor renders */
#ticketReplyContainer textarea,
#ticketReplyContainer [contenteditable],
#ticketReplyContainer pre,
#ticketReplyContainer .CodeMirror-lines,
#ticketReplyContainer .cm-content{
  color:var(--lv-text) !important;
  -webkit-text-fill-color:var(--lv-text) !important;
  caret-color:var(--lv-lumen) !important;
}
#ticketReplyContainer textarea{
  border:1px solid var(--lv-line) !important;
  border-radius:0 0 10px 10px !important;
  padding:.875rem !important;
  min-height:180px !important;
  font-family:var(--font-ui) !important;
  font-size:.875rem !important;
  line-height:1.6 !important;
  resize:vertical !important;
}
#ticketReplyContainer textarea:focus{
  outline:none !important;border-color:rgba(254,181,74,.45) !important;
}

/* --- restore the surfaces that should have one --- */
#ticketReplyContainer .lv-btn-primary{
  background:var(--lv-lumen) !important;color:#1A1206 !important;
}
#ticketReplyContainer .lv-btn-primary:hover{ filter:brightness(1.07); }
#ticketReplyContainer .lv-btn-ghost{
  border:1px solid var(--lv-line) !important;color:var(--lv-text) !important;
}
#ticketReplyContainer .lv-btn-ghost:hover{ background:rgba(255,255,255,.06) !important; }
#ticketReplyContainer .custom-file-label{ background:var(--lv-void) !important; }
#ticketReplyContainer .custom-file-label::after{
  background:var(--gray-800) !important;color:var(--lv-text) !important;
}
#ticketReplyContainer [class*='toolbar']{
  background:var(--gray-900) !important;
  border:1px solid var(--lv-line) !important;border-bottom:0 !important;
  border-radius:10px 10px 0 0 !important;
}
#ticketReplyContainer [class*='toolbar'] button:hover,
#ticketReplyContainer [class*='toolbar'] button.active,
#ticketReplyContainer [class*='toolbar'] a:hover{
  background:rgba(255,255,255,.09) !important;color:#fff !important;
}
#ticketReplyContainer [class*='statusbar']{
  color:var(--gray-600) !important;
}
#ticketReplyContainer [class*='preview']{
  background:var(--gray-950) !important;color:var(--lv-text) !important;
}
/* any element still rendering dark text on the now-dark card */
#ticketReplyContainer .lv-field > label,
#ticketReplyContainer .lv-eyebrow{ color:var(--gray-400) !important; }

/* ============================================================
   75. REPLY CARD — contrast pass
   Section 74 killed the light backgrounds but left borders and
   text colours alone, so the editor kept a bright frame and its
   icons stayed near-black on the now-dark surface.
   ============================================================ */
/* no light borders anywhere in the card (restores below win on specificity) */
#ticketReplyContainer *{ border-color:var(--lv-line) !important; }
#ticketReplyContainer [class*='toolbar']{
  border:1px solid var(--lv-line) !important;border-bottom:0 !important;
}

/* toolbar icons were inheriting a dark ink colour */
#ticketReplyContainer [class*='toolbar'] button,
#ticketReplyContainer [class*='toolbar'] a,
#ticketReplyContainer [class*='toolbar'] i,
#ticketReplyContainer [class*='toolbar'] span,
#ticketReplyContainer [class*='toolbar'] svg{
  color:var(--gray-300) !important;
  fill:currentColor !important;
  opacity:1 !important;
  border-color:transparent !important;
  text-shadow:none !important;
}
#ticketReplyContainer [class*='toolbar'] button{
  border-radius:7px !important;
  width:30px !important;height:30px !important;line-height:30px !important;
}
#ticketReplyContainer [class*='toolbar'] button:hover,
#ticketReplyContainer [class*='toolbar'] a:hover{
  background:rgba(255,255,255,.1) !important;color:#fff !important;
}
#ticketReplyContainer [class*='toolbar'] button.active{
  background:rgba(254,181,74,.16) !important;color:var(--brand-400) !important;
}
/* the Preview / help controls carry a label, not just an icon */
#ticketReplyContainer [class*='toolbar'] button[class*='preview'],
#ticketReplyContainer [class*='toolbar'] a[class*='preview'],
#ticketReplyContainer [class*='toolbar'] button[title*='Preview'],
#ticketReplyContainer [class*='toolbar'] a[title*='Preview']{
  width:auto !important;padding:0 .625rem !important;
  color:var(--gray-300) !important;
}
#ticketReplyContainer [class*='toolbar'] i.separator,
#ticketReplyContainer [class*='toolbar'] [class*='separator']{
  border-left:1px solid var(--lv-line) !important;border-right:0 !important;
}
/* fullscreen / side-by-side icons sat pure white */
#ticketReplyContainer [class*='toolbar'] button[class*='fullscreen'],
#ticketReplyContainer [class*='toolbar'] button[class*='side'],
#ticketReplyContainer [class*='toolbar'] a[class*='fullscreen']{
  color:var(--gray-500) !important;
}

/* editing surface + status bar frame */
#ticketReplyContainer textarea{
  border:1px solid var(--lv-line) !important;
  border-top:0 !important;border-bottom:0 !important;
  border-radius:0 !important;
}
#ticketReplyContainer [class*='statusbar']{
  border:1px solid var(--lv-line) !important;border-top:0 !important;
  border-radius:0 0 10px 10px !important;
  padding:.375rem .75rem !important;
  color:var(--gray-500) !important;
}

/* ============================================================
   76. COMPONENT LIBRARY — extended palette
   Adds semantic colour variants across buttons, tags, callouts,
   meters and status dots, plus a set of new primitives (KPI,
   timeline, segmented control, steps, tooltip, skeleton, spinner,
   toast, ribbon, accordion, price, feature list, kbd).
   Existing components (.lv-chip, .lv-avatar, .lv-empty,
   .lv-switch, .lv-btn-info) are deliberately untouched.
   ============================================================ */
:root{
  --c-brand:#FEB54A;
  --c-brand-ink:#1A1206;
  --c-success:#57CC7D;
  --c-success-ink:#06210F;
  --c-sky:#7CA9FF;
  --c-sky-ink:#061229;
  --c-warn:#FDB022;
  --c-warn-ink:#1C1204;
  --c-danger:#FC5D5D;
  --c-danger-ink:#240707;
  --c-violet:#B65CFF;
  --c-violet-ink:#160726;
  --c-pink:#FF6BB5;
  --c-pink-ink:#26071A;
  --c-cyan:#4ED4E8;
  --c-cyan-ink:#052227;
  --c-lime:#A3E635;
  --c-lime-ink:#12210A;
  --c-slate:#9AA4B3;
  --c-slate-ink:#0E1116;
}

/* --- buttons: solid --- */
.lv-btn-brand{ background:var(--c-brand);color:var(--c-brand-ink);border:1px solid var(--c-brand); }
.lv-btn-brand:hover{ filter:brightness(1.08); }
.lv-btn-success{ background:var(--c-success);color:var(--c-success-ink);border:1px solid var(--c-success); }
.lv-btn-success:hover{ filter:brightness(1.08); }
.lv-btn-sky{ background:var(--c-sky);color:var(--c-sky-ink);border:1px solid var(--c-sky); }
.lv-btn-sky:hover{ filter:brightness(1.08); }
.lv-btn-warn{ background:var(--c-warn);color:var(--c-warn-ink);border:1px solid var(--c-warn); }
.lv-btn-warn:hover{ filter:brightness(1.08); }
.lv-btn-solid-danger{ background:var(--c-danger);color:var(--c-danger-ink);border:1px solid var(--c-danger); }
.lv-btn-solid-danger:hover{ filter:brightness(1.08); }
.lv-btn-violet{ background:var(--c-violet);color:var(--c-violet-ink);border:1px solid var(--c-violet); }
.lv-btn-violet:hover{ filter:brightness(1.08); }
.lv-btn-pink{ background:var(--c-pink);color:var(--c-pink-ink);border:1px solid var(--c-pink); }
.lv-btn-pink:hover{ filter:brightness(1.08); }
.lv-btn-cyan{ background:var(--c-cyan);color:var(--c-cyan-ink);border:1px solid var(--c-cyan); }
.lv-btn-cyan:hover{ filter:brightness(1.08); }
.lv-btn-lime{ background:var(--c-lime);color:var(--c-lime-ink);border:1px solid var(--c-lime); }
.lv-btn-lime:hover{ filter:brightness(1.08); }
.lv-btn-slate{ background:var(--c-slate);color:var(--c-slate-ink);border:1px solid var(--c-slate); }
.lv-btn-slate:hover{ filter:brightness(1.08); }

/* --- buttons: soft (tinted) --- */
.lv-btn-soft-brand{ background:color-mix(in srgb, var(--c-brand) 15%, transparent);color:var(--c-brand);border:1px solid transparent; }
.lv-btn-soft-brand:hover{ background:color-mix(in srgb, var(--c-brand) 24%, transparent); }
.lv-btn-soft-success{ background:color-mix(in srgb, var(--c-success) 15%, transparent);color:var(--c-success);border:1px solid transparent; }
.lv-btn-soft-success:hover{ background:color-mix(in srgb, var(--c-success) 24%, transparent); }
.lv-btn-soft-sky{ background:color-mix(in srgb, var(--c-sky) 15%, transparent);color:var(--c-sky);border:1px solid transparent; }
.lv-btn-soft-sky:hover{ background:color-mix(in srgb, var(--c-sky) 24%, transparent); }
.lv-btn-soft-warn{ background:color-mix(in srgb, var(--c-warn) 15%, transparent);color:var(--c-warn);border:1px solid transparent; }
.lv-btn-soft-warn:hover{ background:color-mix(in srgb, var(--c-warn) 24%, transparent); }
.lv-btn-soft-danger{ background:color-mix(in srgb, var(--c-danger) 15%, transparent);color:var(--c-danger);border:1px solid transparent; }
.lv-btn-soft-danger:hover{ background:color-mix(in srgb, var(--c-danger) 24%, transparent); }
.lv-btn-soft-violet{ background:color-mix(in srgb, var(--c-violet) 15%, transparent);color:var(--c-violet);border:1px solid transparent; }
.lv-btn-soft-violet:hover{ background:color-mix(in srgb, var(--c-violet) 24%, transparent); }
.lv-btn-soft-pink{ background:color-mix(in srgb, var(--c-pink) 15%, transparent);color:var(--c-pink);border:1px solid transparent; }
.lv-btn-soft-pink:hover{ background:color-mix(in srgb, var(--c-pink) 24%, transparent); }
.lv-btn-soft-cyan{ background:color-mix(in srgb, var(--c-cyan) 15%, transparent);color:var(--c-cyan);border:1px solid transparent; }
.lv-btn-soft-cyan:hover{ background:color-mix(in srgb, var(--c-cyan) 24%, transparent); }
.lv-btn-soft-lime{ background:color-mix(in srgb, var(--c-lime) 15%, transparent);color:var(--c-lime);border:1px solid transparent; }
.lv-btn-soft-lime:hover{ background:color-mix(in srgb, var(--c-lime) 24%, transparent); }
.lv-btn-soft-slate{ background:color-mix(in srgb, var(--c-slate) 15%, transparent);color:var(--c-slate);border:1px solid transparent; }
.lv-btn-soft-slate:hover{ background:color-mix(in srgb, var(--c-slate) 24%, transparent); }

/* --- buttons: outline --- */
.lv-btn-out-brand{ background:transparent;color:var(--c-brand);border:1px solid color-mix(in srgb, var(--c-brand) 45%, transparent); }
.lv-btn-out-brand:hover{ background:color-mix(in srgb, var(--c-brand) 12%, transparent);border-color:var(--c-brand); }
.lv-btn-out-success{ background:transparent;color:var(--c-success);border:1px solid color-mix(in srgb, var(--c-success) 45%, transparent); }
.lv-btn-out-success:hover{ background:color-mix(in srgb, var(--c-success) 12%, transparent);border-color:var(--c-success); }
.lv-btn-out-sky{ background:transparent;color:var(--c-sky);border:1px solid color-mix(in srgb, var(--c-sky) 45%, transparent); }
.lv-btn-out-sky:hover{ background:color-mix(in srgb, var(--c-sky) 12%, transparent);border-color:var(--c-sky); }
.lv-btn-out-warn{ background:transparent;color:var(--c-warn);border:1px solid color-mix(in srgb, var(--c-warn) 45%, transparent); }
.lv-btn-out-warn:hover{ background:color-mix(in srgb, var(--c-warn) 12%, transparent);border-color:var(--c-warn); }
.lv-btn-out-danger{ background:transparent;color:var(--c-danger);border:1px solid color-mix(in srgb, var(--c-danger) 45%, transparent); }
.lv-btn-out-danger:hover{ background:color-mix(in srgb, var(--c-danger) 12%, transparent);border-color:var(--c-danger); }
.lv-btn-out-violet{ background:transparent;color:var(--c-violet);border:1px solid color-mix(in srgb, var(--c-violet) 45%, transparent); }
.lv-btn-out-violet:hover{ background:color-mix(in srgb, var(--c-violet) 12%, transparent);border-color:var(--c-violet); }
.lv-btn-out-pink{ background:transparent;color:var(--c-pink);border:1px solid color-mix(in srgb, var(--c-pink) 45%, transparent); }
.lv-btn-out-pink:hover{ background:color-mix(in srgb, var(--c-pink) 12%, transparent);border-color:var(--c-pink); }
.lv-btn-out-cyan{ background:transparent;color:var(--c-cyan);border:1px solid color-mix(in srgb, var(--c-cyan) 45%, transparent); }
.lv-btn-out-cyan:hover{ background:color-mix(in srgb, var(--c-cyan) 12%, transparent);border-color:var(--c-cyan); }
.lv-btn-out-lime{ background:transparent;color:var(--c-lime);border:1px solid color-mix(in srgb, var(--c-lime) 45%, transparent); }
.lv-btn-out-lime:hover{ background:color-mix(in srgb, var(--c-lime) 12%, transparent);border-color:var(--c-lime); }
.lv-btn-out-slate{ background:transparent;color:var(--c-slate);border:1px solid color-mix(in srgb, var(--c-slate) 45%, transparent); }
.lv-btn-out-slate:hover{ background:color-mix(in srgb, var(--c-slate) 12%, transparent);border-color:var(--c-slate); }

/* --- button extras --- */
.lv-btn-xs{ padding:.25rem .5rem;font-size:.6875rem;border-radius:7px; }
.lv-btn-lg{ padding:.8125rem 1.25rem;font-size:.9375rem; }
.lv-btn-icon{ width:2.25rem;height:2.25rem;padding:0;display:inline-grid;place-items:center; }
.lv-btn-icon.lv-btn-xs{ width:1.75rem;height:1.75rem; }
.lv-btn-pill{ border-radius:999px; }
.lv-btn-wide{ display:flex;width:100%;justify-content:center; }
.lv-btn[disabled],.lv-btn.is-disabled{ opacity:.45;pointer-events:none; }
.lv-btn-loading{ position:relative;color:transparent !important;pointer-events:none; }
.lv-btn-loading::after{
  content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:99px;
  color:inherit;animation:lvSpin .6s linear infinite;
}
.lv-btn-group{ display:inline-flex; }
.lv-btn-group > .lv-btn{ border-radius:0;margin-left:-1px; }
.lv-btn-group > .lv-btn:first-child{ border-radius:9px 0 0 9px;margin-left:0; }
.lv-btn-group > .lv-btn:last-child{ border-radius:0 9px 9px 0; }
@keyframes lvSpin{ to{ transform:rotate(360deg); } }

/* --- tags --- */
.lv-tag{
  display:inline-flex;align-items:center;gap:.3125rem;
  padding:.1875rem .4375rem;border-radius:6px;
  font-size:.6875rem;font-weight:600;line-height:1.3;border:1px solid transparent;
}
.lv-tag-dot::before{ content:'';width:5px;height:5px;border-radius:99px;background:currentColor; }
.lv-tag-pill{ border-radius:999px;padding:.1875rem .5625rem; }
.lv-tag-brand{ background:color-mix(in srgb, var(--c-brand) 14%, transparent);border-color:color-mix(in srgb, var(--c-brand) 34%, transparent);color:var(--c-brand); }
.lv-tag-solid-brand{ background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand); }
.lv-tag-success{ background:color-mix(in srgb, var(--c-success) 14%, transparent);border-color:color-mix(in srgb, var(--c-success) 34%, transparent);color:var(--c-success); }
.lv-tag-solid-success{ background:var(--c-success);color:var(--c-success-ink);border-color:var(--c-success); }
.lv-tag-sky{ background:color-mix(in srgb, var(--c-sky) 14%, transparent);border-color:color-mix(in srgb, var(--c-sky) 34%, transparent);color:var(--c-sky); }
.lv-tag-solid-sky{ background:var(--c-sky);color:var(--c-sky-ink);border-color:var(--c-sky); }
.lv-tag-warn{ background:color-mix(in srgb, var(--c-warn) 14%, transparent);border-color:color-mix(in srgb, var(--c-warn) 34%, transparent);color:var(--c-warn); }
.lv-tag-solid-warn{ background:var(--c-warn);color:var(--c-warn-ink);border-color:var(--c-warn); }
.lv-tag-danger{ background:color-mix(in srgb, var(--c-danger) 14%, transparent);border-color:color-mix(in srgb, var(--c-danger) 34%, transparent);color:var(--c-danger); }
.lv-tag-solid-danger{ background:var(--c-danger);color:var(--c-danger-ink);border-color:var(--c-danger); }
.lv-tag-violet{ background:color-mix(in srgb, var(--c-violet) 14%, transparent);border-color:color-mix(in srgb, var(--c-violet) 34%, transparent);color:var(--c-violet); }
.lv-tag-solid-violet{ background:var(--c-violet);color:var(--c-violet-ink);border-color:var(--c-violet); }
.lv-tag-pink{ background:color-mix(in srgb, var(--c-pink) 14%, transparent);border-color:color-mix(in srgb, var(--c-pink) 34%, transparent);color:var(--c-pink); }
.lv-tag-solid-pink{ background:var(--c-pink);color:var(--c-pink-ink);border-color:var(--c-pink); }
.lv-tag-cyan{ background:color-mix(in srgb, var(--c-cyan) 14%, transparent);border-color:color-mix(in srgb, var(--c-cyan) 34%, transparent);color:var(--c-cyan); }
.lv-tag-solid-cyan{ background:var(--c-cyan);color:var(--c-cyan-ink);border-color:var(--c-cyan); }
.lv-tag-lime{ background:color-mix(in srgb, var(--c-lime) 14%, transparent);border-color:color-mix(in srgb, var(--c-lime) 34%, transparent);color:var(--c-lime); }
.lv-tag-solid-lime{ background:var(--c-lime);color:var(--c-lime-ink);border-color:var(--c-lime); }
.lv-tag-slate{ background:color-mix(in srgb, var(--c-slate) 14%, transparent);border-color:color-mix(in srgb, var(--c-slate) 34%, transparent);color:var(--c-slate); }
.lv-tag-solid-slate{ background:var(--c-slate);color:var(--c-slate-ink);border-color:var(--c-slate); }

/* --- callouts --- */
.lv-call{
  display:flex;gap:.75rem;padding:.875rem 1rem;border-radius:12px;
  border:1px solid var(--lv-line);background:var(--gray-900);
  font-size:.8125rem;line-height:1.55;
}
.lv-call-ic{ flex:0 0 auto;width:18px;height:18px;margin-top:.0625rem; }
.lv-call-b{ display:block;font-weight:700;margin-bottom:.1875rem;color:var(--gray-25); }
.lv-call-body{ min-width:0;color:var(--lv-muted); }
.lv-call-bare{ background:transparent; }
.lv-call-lead{ border-left-width:3px; }
.lv-call-brand{ background:color-mix(in srgb, var(--c-brand) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-brand) 28%, transparent); }
.lv-call-brand .lv-call-ic{ color:var(--c-brand); }
.lv-call-brand.lv-call-lead{ border-left-color:var(--c-brand); }
.lv-call-success{ background:color-mix(in srgb, var(--c-success) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-success) 28%, transparent); }
.lv-call-success .lv-call-ic{ color:var(--c-success); }
.lv-call-success.lv-call-lead{ border-left-color:var(--c-success); }
.lv-call-sky{ background:color-mix(in srgb, var(--c-sky) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-sky) 28%, transparent); }
.lv-call-sky .lv-call-ic{ color:var(--c-sky); }
.lv-call-sky.lv-call-lead{ border-left-color:var(--c-sky); }
.lv-call-warn{ background:color-mix(in srgb, var(--c-warn) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-warn) 28%, transparent); }
.lv-call-warn .lv-call-ic{ color:var(--c-warn); }
.lv-call-warn.lv-call-lead{ border-left-color:var(--c-warn); }
.lv-call-danger{ background:color-mix(in srgb, var(--c-danger) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-danger) 28%, transparent); }
.lv-call-danger .lv-call-ic{ color:var(--c-danger); }
.lv-call-danger.lv-call-lead{ border-left-color:var(--c-danger); }
.lv-call-violet{ background:color-mix(in srgb, var(--c-violet) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-violet) 28%, transparent); }
.lv-call-violet .lv-call-ic{ color:var(--c-violet); }
.lv-call-violet.lv-call-lead{ border-left-color:var(--c-violet); }
.lv-call-pink{ background:color-mix(in srgb, var(--c-pink) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-pink) 28%, transparent); }
.lv-call-pink .lv-call-ic{ color:var(--c-pink); }
.lv-call-pink.lv-call-lead{ border-left-color:var(--c-pink); }
.lv-call-cyan{ background:color-mix(in srgb, var(--c-cyan) 9%, var(--gray-950));border-color:color-mix(in srgb, var(--c-cyan) 28%, transparent); }
.lv-call-cyan .lv-call-ic{ color:var(--c-cyan); }
.lv-call-cyan.lv-call-lead{ border-left-color:var(--c-cyan); }

/* --- status dots --- */
.lv-dot{ display:inline-block;width:8px;height:8px;border-radius:99px;flex:0 0 auto; }
.lv-dot-lg{ width:10px;height:10px; }
.lv-dot-pulse{ position:relative; }
.lv-dot-pulse::after{
  content:'';position:absolute;inset:0;border-radius:99px;background:inherit;
  animation:lvPing 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes lvPing{ 75%,100%{ transform:scale(2.4);opacity:0; } }
.lv-dot-brand{ background:var(--c-brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent); }
.lv-dot-success{ background:var(--c-success);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-success) 18%, transparent); }
.lv-dot-sky{ background:var(--c-sky);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-sky) 18%, transparent); }
.lv-dot-warn{ background:var(--c-warn);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-warn) 18%, transparent); }
.lv-dot-danger{ background:var(--c-danger);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-danger) 18%, transparent); }
.lv-dot-violet{ background:var(--c-violet);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-violet) 18%, transparent); }
.lv-dot-pink{ background:var(--c-pink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-pink) 18%, transparent); }
.lv-dot-cyan{ background:var(--c-cyan);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-cyan) 18%, transparent); }
.lv-dot-lime{ background:var(--c-lime);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-lime) 18%, transparent); }
.lv-dot-slate{ background:var(--c-slate);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-slate) 18%, transparent); }

/* --- meters / progress --- */
.lv-meter{ display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden; }
.lv-meter-sm{ height:5px; }
.lv-meter-lg{ height:12px; }
.lv-meter-bar{ display:block;height:100%;border-radius:99px;background:var(--lv-lumen);transition:width .5s var(--lv-ease); }
.lv-meter-striped .lv-meter-bar{
  background-image:linear-gradient(45deg,rgba(255,255,255,.16) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.16) 75%,transparent 75%,transparent);
  background-size:14px 14px;
}
.lv-meter-anim .lv-meter-bar{ animation:lvStripe 1s linear infinite; }
@keyframes lvStripe{ from{ background-position:0 0; } to{ background-position:14px 0; } }
.lv-meter-head{ display:flex;justify-content:space-between;font-size:.75rem;margin-bottom:.375rem; }
.lv-meter-head b{ color:var(--gray-25);font-weight:600; }
.lv-meter-head span{ color:var(--gray-500); }
.lv-meter-brand .lv-meter-bar{ background:var(--c-brand); }
.lv-meter-success .lv-meter-bar{ background:var(--c-success); }
.lv-meter-sky .lv-meter-bar{ background:var(--c-sky); }
.lv-meter-warn .lv-meter-bar{ background:var(--c-warn); }
.lv-meter-danger .lv-meter-bar{ background:var(--c-danger); }
.lv-meter-violet .lv-meter-bar{ background:var(--c-violet); }
.lv-meter-pink .lv-meter-bar{ background:var(--c-pink); }
.lv-meter-cyan .lv-meter-bar{ background:var(--c-cyan); }

/* --- KPI card --- */
.lv-kpi{ padding:1rem 1.125rem;border-radius:14px;background:var(--gray-900);border:1px solid var(--lv-line); }
.lv-kpi-top{ display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem; }
.lv-kpi-label{ font-size:.75rem;color:var(--gray-500); }
.lv-kpi-val{ font-family:var(--font-display);font-size:1.75rem;color:var(--gray-25);line-height:1; }
.lv-kpi-sub{ font-size:.6875rem;color:var(--gray-600);margin-top:.375rem; }
.lv-kpi-trend{ display:inline-flex;align-items:center;gap:.1875rem;font-size:.6875rem;font-weight:700; }
.lv-kpi-up{ color:var(--c-success); }
.lv-kpi-down{ color:var(--c-danger); }
.lv-kpi-flat{ color:var(--gray-500); }

/* --- timeline --- */
.lv-tl{ position:relative;padding-left:1.375rem; }
.lv-tl::before{ content:'';position:absolute;left:5px;top:.375rem;bottom:.375rem;width:1px;background:var(--lv-line); }
.lv-tl-item{ position:relative;padding-bottom:1rem; }
.lv-tl-item:last-child{ padding-bottom:0; }
.lv-tl-item::before{
  content:'';position:absolute;left:-1.375rem;top:.3125rem;width:11px;height:11px;border-radius:99px;
  background:var(--gray-900);border:2px solid var(--lv-line);
}
.lv-tl-item.is-done::before{ background:var(--c-success);border-color:var(--c-success); }
.lv-tl-item.is-now::before{ background:var(--lv-lumen);border-color:var(--lv-lumen);box-shadow:0 0 0 3px rgba(254,181,74,.2); }
.lv-tl-t{ font-size:.8125rem;font-weight:600;color:var(--gray-25); }
.lv-tl-d{ font-size:.6875rem;color:var(--gray-600);margin-top:.125rem; }

/* --- segmented control --- */
.lv-seg{ display:inline-flex;padding:3px;border-radius:10px;background:var(--gray-950);border:1px solid var(--lv-line);gap:2px; }
.lv-seg-item{
  padding:.375rem .75rem;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--gray-500);font-size:.75rem;font-weight:600;
  transition:background .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-seg-item:hover{ color:var(--lv-text); }
.lv-seg-item.is-active{ background:var(--gray-800);color:#fff; }
.lv-seg-brand .lv-seg-item.is-active{ background:var(--lv-lumen);color:#1A1206; }

/* --- steps --- */
.lv-steps{ display:flex;align-items:center;gap:.5rem; }
.lv-step{ display:flex;align-items:center;gap:.4375rem;font-size:.75rem;color:var(--gray-500); }
.lv-step-n{
  display:grid;place-items:center;width:22px;height:22px;border-radius:99px;
  background:var(--gray-850);color:var(--gray-500);font-size:.6875rem;font-weight:700;flex:0 0 auto;
}
.lv-step.is-done .lv-step-n{ background:var(--c-success);color:#06210F; }
.lv-step.is-now .lv-step-n{ background:var(--lv-lumen);color:#1A1206; }
.lv-step.is-now{ color:var(--gray-25);font-weight:600; }
.lv-step-line{ flex:1;height:1px;background:var(--lv-line);min-width:1rem; }

/* --- tooltip --- */
.lv-tip{ position:relative;display:inline-flex; }
.lv-tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  padding:.3125rem .5rem;border-radius:7px;background:#000;color:#fff;
  font-size:.6875rem;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .14s var(--lv-ease);z-index:60;
}
.lv-tip:hover::after{ opacity:1; }

/* --- skeleton --- */
.lv-skel{
  border-radius:7px;
  background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 37%, rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:lvShim 1.3s ease-in-out infinite;
}
.lv-skel-line{ height:.75rem;margin-bottom:.5rem; }
.lv-skel-title{ height:1.125rem;width:45%;margin-bottom:.75rem; }
.lv-skel-circle{ border-radius:99px; }
@keyframes lvShim{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* --- spinner --- */
.lv-spin{
  display:inline-block;width:16px;height:16px;border-radius:99px;
  border:2px solid rgba(255,255,255,.15);border-top-color:var(--lv-lumen);
  animation:lvSpin .65s linear infinite;
}
.lv-spin-sm{ width:12px;height:12px;border-width:1.5px; }
.lv-spin-lg{ width:26px;height:26px;border-width:3px; }

/* --- toast --- */
.lv-toast{
  display:flex;align-items:flex-start;gap:.625rem;
  padding:.75rem .875rem;border-radius:11px;
  background:var(--gray-850);border:1px solid var(--lv-line);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.8);font-size:.8125rem;max-width:22rem;
}
.lv-toast-ic{ flex:0 0 auto;width:16px;height:16px;margin-top:.0625rem; }
.lv-toast-b{ font-weight:600;color:var(--gray-25); }
.lv-toast-x{ margin-left:auto;background:0;border:0;color:var(--gray-600);cursor:pointer;padding:0;line-height:1; }

/* --- kbd + code chip --- */
.lv-kbd{
  display:inline-block;padding:.125rem .375rem;border-radius:5px;
  background:var(--gray-850);border:1px solid var(--lv-line);border-bottom-width:2px;
  font-family:var(--font-display);font-size:.6875rem;color:var(--lv-text);
}
.lv-copychip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4375rem .5rem .4375rem .75rem;border-radius:9px;
  background:var(--lv-void);border:1px dashed var(--lv-line);
  font-family:var(--font-display);font-size:.8125rem;color:var(--brand-400);
}
.lv-copychip button{ background:0;border:0;color:var(--gray-500);cursor:pointer;display:grid;place-items:center;padding:0; }
.lv-copychip button:hover{ color:var(--brand-400); }

/* --- ribbon --- */
.lv-rib{ position:relative;overflow:hidden; }
.lv-rib:not([data-rib])::before{ display:none; }
.lv-rib[data-rib]::before{
  content:attr(data-rib);position:absolute;top:9px;right:-30px;
  transform:rotate(45deg);width:110px;text-align:center;
  padding:.1875rem 0;font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--lv-lumen);color:#1A1206;
}
.lv-rib-success::before{ background:var(--c-success);color:#06210F; }
.lv-rib-danger::before{ background:var(--c-danger);color:#fff; }
.lv-rib-violet::before{ background:var(--c-violet);color:#fff; }

/* --- accordion --- */
.lv-fold{ border:1px solid var(--lv-line);border-radius:11px;overflow:hidden;background:var(--gray-900); }
.lv-fold + .lv-fold{ margin-top:.5rem; }
.lv-fold-h{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;padding:.8125rem 1rem;background:0;border:0;cursor:pointer;
  color:var(--gray-25);font-size:.8125rem;font-weight:600;text-align:left;
}
.lv-fold-h:hover{ background:rgba(255,255,255,.03); }
.lv-fold-chev{ width:14px;height:14px;color:var(--gray-500);transition:transform .2s var(--lv-ease);flex:0 0 auto; }
.lv-acc.is-open .lv-fold-chev{ transform:rotate(180deg); }
.lv-fold-b{ padding:0 1rem 1rem;font-size:.8125rem;color:var(--lv-muted);line-height:1.6; }

/* --- price --- */
.lv-price{ display:flex;align-items:flex-start;gap:.1875rem;font-family:var(--font-display);color:var(--gray-25); }
.lv-price-cur{ font-size:.9375rem;margin-top:.25rem; }
.lv-price-int{ font-size:2rem;line-height:1; }
.lv-price-cyc{ align-self:flex-end;font-family:var(--font-ui);font-size:.75rem;color:var(--gray-500);margin-bottom:.125rem; }
.lv-price-was{ font-size:.8125rem;color:var(--gray-600);text-decoration:line-through;margin-left:.375rem; }

/* --- feature list --- */
.lv-feat{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem; }
.lv-feat li{ display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;color:var(--lv-muted); }
.lv-feat svg{ width:14px;height:14px;flex:0 0 auto;margin-top:.125rem;color:var(--c-success); }
.lv-feat li.is-off{ color:var(--gray-600); }
.lv-feat li.is-off svg{ color:var(--gray-700); }

/* --- misc --- */
.lv-div{ height:1px;background:var(--lv-line);border:0;margin:1rem 0; }
.lv-div-txt{ display:flex;align-items:center;gap:.75rem;color:var(--gray-600);font-size:.6875rem;text-transform:uppercase;letter-spacing:.09em; }
.lv-div-txt::before,.lv-div-txt::after{ content:'';flex:1;height:1px;background:var(--lv-line); }
.lv-ava-stack{ display:flex; }
.lv-ava-stack > *{ margin-left:-8px;border:2px solid var(--gray-950);border-radius:99px; }
.lv-ava-stack > *:first-child{ margin-left:0; }
.lv-quote{ border-left:2px solid var(--lv-lumen);padding:.25rem 0 .25rem .875rem;color:var(--lv-muted);font-size:.875rem;line-height:1.6; }
.lv-code-block{
  background:var(--lv-void);border:1px solid var(--lv-line);border-radius:10px;
  padding:.875rem;font-family:var(--font-display);font-size:.8125rem;color:var(--lv-text);
  overflow-x:auto;line-height:1.6;
}

/* ============================================================
   77. VIEWTICKET — premium layout
   $statusClass emits WHMCS's own values (Open / Answered /
   Customer-Reply / On-Hold / In-Progress / Closed), which don't
   match the semantic tag names, so they're mapped here.
   ============================================================ */
.lv-tag-Open,.lv-tag-open{ background:color-mix(in srgb,var(--c-success) 14%,transparent);border-color:color-mix(in srgb,var(--c-success) 34%,transparent);color:var(--c-success); }
.lv-tag-Answered,.lv-tag-answered{ background:color-mix(in srgb,var(--c-sky) 14%,transparent);border-color:color-mix(in srgb,var(--c-sky) 34%,transparent);color:var(--c-sky); }
.lv-tag-Customer-Reply,.lv-tag-customer-reply{ background:color-mix(in srgb,var(--c-brand) 14%,transparent);border-color:color-mix(in srgb,var(--c-brand) 34%,transparent);color:var(--c-brand); }
.lv-tag-On-Hold,.lv-tag-on-hold{ background:color-mix(in srgb,var(--c-warn) 14%,transparent);border-color:color-mix(in srgb,var(--c-warn) 34%,transparent);color:var(--c-warn); }
.lv-tag-In-Progress,.lv-tag-in-progress{ background:color-mix(in srgb,var(--c-violet) 14%,transparent);border-color:color-mix(in srgb,var(--c-violet) 34%,transparent);color:var(--c-violet); }
.lv-tag-Closed,.lv-tag-closed{ background:color-mix(in srgb,var(--c-slate) 12%,transparent);border-color:color-mix(in srgb,var(--c-slate) 28%,transparent);color:#B4BCC7; }

.lv-tk{ display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:1rem;align-items:start; }
.lv-tk-main{ min-width:0;display:flex;flex-direction:column;gap:1rem; }
.lv-tk-side{ position:sticky;top:1rem;display:flex;flex-direction:column;gap:.75rem; }
@media (max-width:1100px){
  .lv-tk{ grid-template-columns:1fr; }
  .lv-tk-side{ position:static;order:-1; }
}

/* hero */
.lv-tk-hero{
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg, var(--gray-850) 0%, var(--gray-950) 62%);
  border:1px solid var(--lv-line);
}
.lv-tk-hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, rgba(254,181,74,.16), transparent 58%);
}
.lv-tk-hero-in{ position:relative;display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.375rem; }
.lv-tk-back{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;margin-top:.125rem;
  border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--lv-line);
  color:var(--gray-400);text-decoration:none;transition:all .16s var(--lv-ease);
}
.lv-tk-back svg{ width:16px;height:16px; }
.lv-tk-back:hover{ background:rgba(255,255,255,.1);color:#fff; }
.lv-tk-hero-id{ flex:1;min-width:0; }
.lv-tk-eyebrow{
  font-family:var(--font-display);font-size:.6875rem;letter-spacing:.14em;
  color:var(--brand-400);margin-bottom:.25rem;
}
.lv-tk-subject{
  font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.2;
  color:#fff;letter-spacing:-.01em;margin:0 0 .625rem;
}
.lv-tk-meta{ display:flex;align-items:center;gap:.625rem;flex-wrap:wrap; }
.lv-tk-sep{ width:3px;height:3px;border-radius:99px;background:var(--gray-700); }
.lv-tk-dept{ display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--gray-400); }
.lv-tk-dept svg{ width:13px;height:13px;color:var(--gray-600); }
.lv-tk-hero-act{ display:flex;gap:.5rem;flex:0 0 auto;flex-wrap:wrap; }
.lv-tk-hero-act svg{ width:13px;height:13px; }

/* thread rail */
.lv-tk-rail{ position:relative;display:flex;flex-direction:column-reverse;gap:.75rem; }
.lv-tk-rail::before{
  content:'';position:absolute;left:19px;top:1.25rem;bottom:1.25rem;width:1px;
  background:linear-gradient(to bottom, transparent, var(--lv-line) 12%, var(--lv-line) 88%, transparent);
}
.lv-tk-msg{ position:relative;display:flex;gap:.875rem;align-items:flex-start; }
.lv-tk-av{
  position:relative;z-index:1;flex:0 0 auto;
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--gray-850);border:1px solid var(--lv-line);
  font-family:var(--font-display);font-size:.9375rem;color:var(--gray-400);text-transform:uppercase;
}
.lv-tk-av.is-staff{
  background:linear-gradient(150deg, rgba(254,181,74,.3), rgba(254,181,74,.08));
  border-color:rgba(254,181,74,.4);color:var(--brand-400);
}
.lv-tk-bod{
  flex:1;min-width:0;border-radius:14px;
  background:var(--gray-900);border:1px solid var(--lv-line);overflow:hidden;
}
.ticket-reply.staff .lv-tk-bod{
  border-color:rgba(254,181,74,.22);
  box-shadow:0 0 0 1px rgba(254,181,74,.05), 0 10px 30px -16px rgba(0,0,0,.8);
}
.lv-tk-head{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.6875rem .875rem;border-bottom:1px solid var(--lv-line);
  background:rgba(255,255,255,.015);
}
.ticket-reply.staff .lv-tk-head{ background:rgba(254,181,74,.05); }
.lv-tk-name{ font-size:.875rem;font-weight:600;color:#fff; }
.ticket-reply.staff .lv-tk-name{ color:var(--brand-400); }
.lv-tk-time{ margin-left:auto;font-size:.6875rem;color:var(--gray-600);white-space:nowrap; }
.lv-tk-text{ padding:.9375rem .875rem;font-size:.875rem;line-height:1.65;color:#D7DBE2;overflow-wrap:anywhere; }
.lv-tk-text > :first-child{ margin-top:0; }
.lv-tk-text > :last-child{ margin-bottom:0; }
.lv-tk-text a{ color:var(--brand-400); }
.lv-tk-text pre{ background:var(--lv-void);border:1px solid var(--lv-line);border-radius:8px;padding:.75rem;overflow-x:auto;font-size:.8125rem; }
.lv-tk-text code{ background:var(--lv-void);border-radius:4px;padding:.0625rem .3125rem;font-size:.8125rem; }
.lv-tk-text img{ max-width:100%;border-radius:8px; }
.lv-tk-text blockquote{ margin:.5rem 0;padding:.25rem 0 .25rem .75rem;border-left:2px solid rgba(254,181,74,.4);color:var(--lv-muted); }

.lv-tk-files{ display:flex;flex-wrap:wrap;gap:.375rem;padding:0 .875rem .75rem; }
.lv-tk-file{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4375rem .5rem;border-radius:9px;max-width:100%;
  background:var(--lv-void);border:1px solid var(--lv-line);
  font-size:.75rem;color:var(--lv-text);text-decoration:none;
  transition:border-color .16s var(--lv-ease);
}
.lv-tk-file-ic{ display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(254,181,74,.12);flex:0 0 auto; }
.lv-tk-file-ic svg{ width:12px;height:12px;color:var(--brand-400); }
.lv-tk-file-n{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14rem; }
.lv-tk-file-dl{ width:13px;height:13px;color:var(--gray-600);flex:0 0 auto; }
.lv-tk-file:hover{ border-color:rgba(254,181,74,.4); }
.lv-tk-file:hover .lv-tk-file-dl{ color:var(--brand-400); }
.lv-tk-file.is-gone{ opacity:.5; }
.lv-tk-file-note{ font-size:.625rem;color:var(--gray-600);align-self:center; }

.lv-tk-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  padding:.5rem .875rem;border-top:1px solid var(--lv-line);background:var(--gray-950);
}
.lv-tk-foot:empty{ display:none; }
.lv-tk-ip{ font-size:.625rem;color:var(--gray-600); }
.lv-tk-rate{ margin-left:auto;display:inline-flex;align-items:center;gap:.375rem; }

/* reply card */
.lv-tk-reply{
  border-radius:16px;background:var(--gray-950);border:1px solid var(--lv-line);
  padding:1.25rem 1.375rem;
}
.lv-tk-reply-h{ display:flex;align-items:center;gap:.625rem;margin-bottom:1rem; }
.lv-tk-reply-t{ font-family:var(--font-display);font-size:1rem;color:var(--gray-25); }
.lv-tk-submit{ display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;margin-top:1rem; }
.lv-tk-submit .lv-btn{ cursor:pointer; }

/* sidebar */
.lv-tk-card{
  border-radius:14px;background:var(--gray-900);border:1px solid var(--lv-line);
  padding:1.125rem 1.25rem;
}
.lv-tk-card-h{
  font-family:var(--font-display);font-size:.9375rem;color:var(--gray-25);
  padding-bottom:.75rem;margin-bottom:.875rem;border-bottom:1px solid var(--lv-line);
}
.lv-tk-dl{ margin:0;display:flex;flex-direction:column;gap:.8125rem; }
.lv-tk-dr{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; }
.lv-tk-dr dt{ font-size:.75rem;font-weight:400;color:var(--gray-500);margin:0;flex:0 0 auto; }
.lv-tk-dr dd{ margin:0;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.lv-tk-dd{ font-size:.8125rem;font-weight:600;color:var(--gray-25); }
.lv-tk-help{ font-size:.75rem; }

@media (max-width:640px){
  .lv-tk-hero-in{ flex-wrap:wrap; }
  .lv-tk-hero-act{ width:100%; }
  .lv-tk-rail::before{ display:none; }
  .lv-tk-msg{ gap:.5rem; }
  .lv-tk-av{ width:30px;height:30px;font-size:.8125rem; }
  .lv-tk-submit{ flex-direction:column-reverse; }
  .lv-tk-submit .lv-btn{ width:100%;text-align:center; }
}

/* ============================================================
   78. VIEWTICKET — responsive + polish
   ============================================================ */
/* the rail line was drawn behind the avatars but ran past the last one */
.lv-tk-rail::before{ top:2.375rem;bottom:2.375rem; }
.lv-tk-rail:has(.lv-tk-msg:only-child)::before{ display:none; }

/* head row: the role tag was crowding the timestamp on narrow columns */
.lv-tk-head{ row-gap:.25rem; }
.lv-tk-time{ font-variant-numeric:tabular-nums; }

/* attachment chips were overflowing their card on small widths */
.lv-tk-file{ max-width:100%;min-width:0; }
.lv-tk-file-n{ max-width:min(14rem, 46vw); }

/* the reply card sat flush against the composer */
.lv-tk-reply{ padding:1.25rem; }
.lv-tk-reply .lv-field:last-of-type{ margin-bottom:0; }

/* sidebar: long department names were pushing the label off */
.lv-tk-dr dt{ max-width:45%; }
.lv-tk-dd{ font-variant-numeric:tabular-nums; }

/* --- tablet --- */
@media (max-width:1100px){
  .lv-tk{ gap:.75rem; }
  .lv-tk-side{ flex-direction:row;flex-wrap:wrap; }
  .lv-tk-card{ flex:1 1 20rem; }
  .lv-tk-help{ flex:1 1 16rem; }
  .lv-tk-dl{ display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem; }
  .lv-tk-dr{ flex-direction:column;align-items:flex-start;gap:.1875rem; }
  .lv-tk-dr dd{ text-align:left; }
  .lv-tk-dr dt{ max-width:none; }
}

/* --- mobile --- */
@media (max-width:720px){
  .lv-tk-hero-in{ flex-wrap:wrap;padding:1rem; }
  .lv-tk-subject{ font-size:1.25rem; }
  .lv-tk-hero-act{ width:100%;margin-top:.25rem; }
  .lv-tk-hero-act .lv-btn{ flex:1;justify-content:center; }
  .lv-tk-side{ flex-direction:column; }
  .lv-tk-card,.lv-tk-help{ flex:1 1 auto; }
  .lv-tk-dl{ grid-template-columns:repeat(2,1fr); }

  /* drop the rail: avatars stack into the card header instead */
  .lv-tk-rail::before{ display:none; }
  .lv-tk-msg{ gap:0;display:block; }
  .lv-tk-av{
    position:absolute;top:.5rem;left:.625rem;z-index:2;
    width:26px;height:26px;border-radius:8px;font-size:.75rem;
  }
  .lv-tk-msg{ position:relative; }
  .lv-tk-head{ padding-left:2.6875rem;min-height:2.75rem; }
  .lv-tk-name{ font-size:.8125rem; }
  .lv-tk-time{ width:100%;margin-left:0;padding-left:0; }
  .lv-tk-text{ padding:.75rem; }
  .lv-tk-files{ padding:0 .75rem .625rem; }
  .lv-tk-foot{ padding:.5rem .75rem; }
  .lv-tk-rate{ margin-left:0; }
  .lv-tk-foot{ flex-direction:column;align-items:flex-start; }

  .lv-tk-reply{ padding:1rem; }
  .lv-tk-submit{ flex-direction:column-reverse; }
  .lv-tk-submit .lv-btn{ width:100%;text-align:center;justify-content:center; }

  /* attachment row stacked — Add More was squeezing the file field to nothing */
  .lv-attach-row{ flex-direction:column; }
  .lv-attach-row .custom-file{ width:100%; }
  .lv-attach-row .input-group-append .lv-btn{ width:100%;justify-content:center; }
}

@media (max-width:420px){
  .lv-tk-dl{ grid-template-columns:1fr; }
  .lv-tk-hero-act{ flex-direction:column; }
  .lv-tk-hero-act .lv-btn{ width:100%; }
  .lv-tk-file-n{ max-width:52vw; }
}

/* print: drop the chrome */
@media print{
  .lv-tk{ display:block; }
  .lv-tk-hero-glow,.lv-tk-rail::before{ display:none; }
  .lv-tk-bod,.lv-tk-hero{ border-color:#ccc; }
}

/* ============================================================
   79. VIEWTICKET — details rows, dropzone, editor size
   ============================================================ */
/* --- details card: icon rows --- */
.lv-tk-card-h{ display:flex;align-items:center;gap:.625rem; }
.lv-tk-facts{ display:flex;flex-direction:column;gap:.125rem; }
.lv-tk-fact{
  display:flex;align-items:center;gap:.75rem;
  padding:.5625rem .5rem;border-radius:9px;
  transition:background .16s var(--lv-ease);
}
.lv-tk-fact:hover{ background:rgba(255,255,255,.03); }
.lv-tk-fact-ic{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  border-radius:8px;background:var(--gray-850);border:1px solid var(--lv-line);
  color:var(--gray-500);
}
.lv-tk-fact-ic svg{ width:14px;height:14px; }
.lv-tk-fact:hover .lv-tk-fact-ic{ color:var(--brand-400);border-color:rgba(254,181,74,.28); }
.lv-tk-fact-b{ display:flex;flex-direction:column;gap:.1875rem;min-width:0;flex:1; }
.lv-tk-fact-l{
  font-size:.625rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gray-600);
}
.lv-tk-fact-v{ min-width:0; }
.lv-tk-fact-str{
  font-size:.8125rem;font-weight:600;color:var(--gray-25);
  font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- upload dropzone ---
   .custom-file-input keeps bootstrap's opacity:0 and sits on top to catch
   the click; .custom-file-label is the visible surface and is what WHMCS
   writes the chosen filename into, so it must stay a sibling. */
.lv-drop{ display:block;margin-bottom:.625rem; }
.lv-drop .custom-file{ position:relative;display:block;width:100%;height:auto; }
.lv-drop .custom-file-input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;z-index:2;
}
.lv-drop .custom-file-label{
  position:static;display:flex;align-items:center;gap:.75rem;
  height:auto;min-height:3.25rem;margin:0;padding:.75rem .875rem;
  background:
    linear-gradient(rgba(254,181,74,.03), rgba(254,181,74,.03)),
    var(--lv-void);
  border:1px dashed rgba(255,255,255,.14);border-radius:11px;
  color:var(--gray-500);font-size:.8125rem;font-weight:400;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color .16s var(--lv-ease),background .16s var(--lv-ease),color .16s var(--lv-ease);
}
.lv-drop .custom-file-label::after{ display:none !important; }
.lv-drop-ic{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:9px;background:rgba(254,181,74,.1);border:1px solid rgba(254,181,74,.22);
  color:var(--brand-400);
}
.lv-drop-ic svg{ width:15px;height:15px; }
.lv-drop-t{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
.lv-drop .custom-file-input:hover ~ .custom-file-label,
.lv-drop .custom-file-input:focus ~ .custom-file-label{
  border-color:rgba(254,181,74,.45);
  background:linear-gradient(rgba(254,181,74,.07), rgba(254,181,74,.07)), var(--lv-void);
  color:var(--lv-text);
}
.lv-drop .custom-file-input:focus ~ .custom-file-label{ box-shadow:0 0 0 3px rgba(254,181,74,.1); }
#fileUploadsContainer .file-upload{ margin-top:0; }
.lv-drop-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  margin-top:.25rem;
}
.lv-drop-foot .lv-help{ margin:0;font-size:.6875rem;color:var(--gray-600);min-width:0; }
.lv-drop-foot .lv-btn svg{ width:12px;height:12px; }

/* --- editor: smaller --- */
#ticketReplyContainer textarea{ min-height:132px !important; }
#ticketReplyContainer [class*='toolbar'] button{
  width:28px !important;height:28px !important;line-height:28px !important;
}

@media (max-width:1100px){
  .lv-tk-facts{ display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.25rem; }
}
@media (max-width:720px){
  .lv-tk-facts{ grid-template-columns:repeat(2,1fr); }
  .lv-drop .custom-file-label{ min-height:3rem; }
  .lv-drop-foot{ flex-direction:column;align-items:stretch; }
  .lv-drop-foot .lv-btn{ width:100%;justify-content:center; }
}
@media (max-width:420px){
  .lv-tk-facts{ grid-template-columns:1fr; }
}

/* ============================================================
   80. ATTACHMENTS — "add more" control
   A soft violet chip read as a random coloured pill floating next
   to the dropzone. It belongs to the dropzone, so it borrows its
   language: same dashed border, same amber-on-hover.
   ============================================================ */
.lv-drop-add{
  background:transparent;
  border:1px dashed rgba(255,255,255,.14);
  color:var(--gray-500);
  font-size:.75rem;font-weight:500;
  padding:.4375rem .75rem;border-radius:9px;
  transition:border-color .16s var(--lv-ease),color .16s var(--lv-ease),background .16s var(--lv-ease);
}
.lv-drop-add svg{ width:12px;height:12px;opacity:.8; }
.lv-drop-add:hover{
  background:rgba(254,181,74,.06);
  border-color:rgba(254,181,74,.4);
  color:var(--brand-400);
}
.lv-drop-add:hover svg{ opacity:1; }
.lv-drop-add:active{ transform:translateY(1px); }

/* the foot reads as one line: hint left, control right */
.lv-drop-foot{ padding-top:.125rem; }
.lv-drop-foot .lv-help{ line-height:1.4; }

/* ============================================================
   81. BUTTONS — two latent bugs, theme-wide
   1. .lv-btn never sized its svg. An <svg viewBox> with no width
      defaults to 300x150, so any button with an inline icon blew
      out to ~400px. Only .lv-q-acts and .lv-drop-foot had scoped
      svg rules; everywhere else was unprotected.
   2. .lv-main a{color:var(--brand-500)} is (0,2,0) and outranks
      .lv-btn-primary{color:#1A1204} at (0,1,0) — so every button
      rendered as an <a> inside .lv-main drew amber text on its
      amber fill. Invisible label.
   ============================================================ */
.lv-btn svg,
[class*='lv-btn-'] > svg{
  width:14px;height:14px;flex:0 0 auto;
}
.lv-btn-lg svg{ width:16px;height:16px; }
.lv-btn-xs svg,
.lv-btn-sm svg{ width:12px;height:12px; }

/* beat .lv-main a on specificity (0,3,0) */
.lv-main a.lv-btn-primary,
.lv-main a.lv-btn-primary:hover,
.lv-main a.lv-btn-primary:focus{ color:#1A1204; }
.lv-main a.lv-btn-brand,
.lv-main a.lv-btn-brand:hover{ color:var(--c-brand-ink); }
.lv-main a.lv-btn-ghost,
.lv-main a.lv-btn-ghost:hover{ color:var(--lv-text); }
.lv-main a.lv-btn-danger,
.lv-main a.lv-btn-danger:hover{ color:#FC5D5D; }
.lv-main a.lv-btn,
.lv-main a[class*='lv-btn-']{ text-decoration:none; }

/* ---- masspay: invoice group headers + totals rows ---- */
.lv-mp-head td{ background:rgba(255,255,255,.03) !important;border-top:1px solid var(--lv-line); }
.lv-mp-total td{ border-top:0;padding-top:.25rem;padding-bottom:.25rem;font-size:.8125rem; }
.lv-mp-total:first-of-type td{ padding-top:.75rem;border-top:1px solid var(--lv-line); }
.lv-mp-due td{ border-top:1px solid var(--lv-line);padding-top:.75rem;padding-bottom:.875rem; }

/* ---- 3-D Secure iframe ----
   The bank's challenge page is cross-origin and cannot be themed.
   Banks serve light pages, so give the frame a light surface rather
   than a dark one — a dark frame round a white page reads as broken. */
.lv-3ds-frame{
  display:block;width:100%;border:1px solid var(--lv-line);border-radius:12px;
  background:#fff;
}

/* native WHMCS logo ($logo) in sidebar + topbar */
.lv-side-logo-img{ max-height:34px;max-width:170px;width:auto;object-fit:contain; }
.lv-topbar-logo-img{ max-height:28px;max-width:140px;width:auto;object-fit:contain; }

/* ============================================================
   66. PRELOAD — tuning-in screen
   Developer: Tivro.Net

   THE ONE RULE: this thing must always leave.

   lv-preload-out runs on the element itself with forwards fill, so
   the overlay clears at 4s whether or not any JavaScript runs. The
   script only makes it quicker. If lumvara-preload.js never loads,
   throws, or gets stripped, the page still frees itself — a stuck
   preloader is a dead shop, and no animation is worth that.

   Everything animated is transform/opacity only, so it stays on the
   compositor and does not fight the page it is covering for layout.
   ============================================================ */
.lv-preload{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--lv-void, #0C0B10);
  color:var(--lv-lumen, #FEB54A);
  animation:lv-preload-out .45s ease 4s forwards;
}
/* JS beat the safety net to it */
.lv-preload.is-done{ animation:lv-preload-out .45s ease forwards; }
@keyframes lv-preload-out{
  to{ opacity:0;visibility:hidden;pointer-events:none; }
}
.lv-preload-in{ display:flex;flex-direction:column;align-items:center;gap:1.5rem; }
.lv-preload-set{ position:relative; }
.lv-preload-svg{ width:112px;height:auto;display:block; }

/* the signal arriving: arcs fire outward in sequence */
.lv-preload-w1{ animation:lv-preload-wave 1.6s ease-in-out infinite; }
.lv-preload-w2{ animation:lv-preload-wave 1.6s ease-in-out .18s infinite; }
.lv-preload-w3{ animation:lv-preload-wave 1.6s ease-in-out .36s infinite; }
@keyframes lv-preload-wave{
  0%,70%,100%{ opacity:.18; }
  35%{ opacity:1; }
}

/* channel bars settling as it locks on */
.lv-preload-bars rect{ transform-origin:50% 74px; }
.lv-preload-b1{ animation:lv-preload-bar 1.15s ease-in-out infinite; }
.lv-preload-b2{ animation:lv-preload-bar 1.15s ease-in-out .1s infinite; }
.lv-preload-b3{ animation:lv-preload-bar 1.15s ease-in-out .2s infinite; }
.lv-preload-b4{ animation:lv-preload-bar 1.15s ease-in-out .3s infinite; }
.lv-preload-b5{ animation:lv-preload-bar 1.15s ease-in-out .4s infinite; }
@keyframes lv-preload-bar{
  0%,100%{ transform:scaleY(.32);opacity:.5; }
  50%{ transform:scaleY(1);opacity:1; }
}

/* scanline passing down the screen */
.lv-preload-scan{
  fill:currentColor;opacity:.14;
  animation:lv-preload-scan 2.4s linear infinite;
}
@keyframes lv-preload-scan{
  0%{ transform:translateY(-12px); }
  100%{ transform:translateY(62px); }
}

/* indeterminate track — a shuttle, not a fake percentage */
.lv-preload-track{
  position:relative;width:132px;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.lv-preload-track span{
  position:absolute;inset:0;display:block;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--lv-lumen, #FEB54A), transparent);
  animation:lv-preload-track 1.25s ease-in-out infinite;
}
@keyframes lv-preload-track{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* Motion off: keep the overlay (it still has to clear) but hold it
   still, and shorten the wait rather than sit on a frozen frame. */
@media (prefers-reduced-motion:reduce){
  .lv-preload{ animation:lv-preload-out .01s ease 1s forwards; }
  .lv-preload-w1,.lv-preload-w2,.lv-preload-w3,
  .lv-preload-b1,.lv-preload-b2,.lv-preload-b3,.lv-preload-b4,.lv-preload-b5,
  .lv-preload-scan,.lv-preload-track span{ animation:none; }
  .lv-preload-bars rect{ transform:none;opacity:1; }
  .lv-preload-track span{ transform:none;opacity:.6; }
}


/* ============================================================
   67. MARKDOWN EDITOR ON SUBMIT TICKET
   Developer: Tivro.Net

   The reply box was fixed by section 74 and this is the same method, because
   naming the editor does not work. Six attempts are now on record —
   .CodeMirror, .EasyMDEContainer, #inputMessage, .lv-md-host,
   sibling-of-toolbar, and .CodeMirror again — and all of them missed. WHMCS's
   editor CSS lives in its own assets and the rendered class names are not
   readable from the theme, so the only reliable statement is "everything
   inside this container".

   .lv-mde-host is on the message field's wrapper in
   supportticketsubmit-steptwo.tpl. Nothing inside it may paint its own
   background; the few things that genuinely need a surface are restored after,
   at higher specificity.

   :has() is a second route to the same place, so any other markdown field
   WHMCS renders gets caught without needing the class added by hand. It is
   listed separately rather than in one group — a browser that does not
   understand :has() would otherwise throw away the whole rule, including the
   .lv-mde-host half that works everywhere.
   ============================================================ */
/* border-color is in here for a reason. The blanket removed the editor's
   backgrounds but left its borders, and the surface it draws round itself is
   a 1px #ddd line — which on this background is a bright rule straight across
   the box. Caught by sampling pixels; the computed-style checks missed it
   because they were only reading backgrounds and text. */
.lv-mde-host *:not([class*='lv-btn']):not(.lv-sec-ic){
  background-color:transparent !important;
  background-image:none !important;
  border-color:var(--lv-line) !important;
}
.form-group:has(> .markdown-editor) *:not([class*='lv-btn']):not(.lv-sec-ic){
  background-color:transparent !important;
  background-image:none !important;
  border-color:var(--lv-line) !important;
}
/* The host IS the surface — this is the part that makes it work.

   #ticketReplyContainer succeeds because the container paints dark and
   everything inside is forced transparent, so whatever WHMCS renders shows
   that surface through. Setting the host transparent instead left the editor
   showing its own white, because the blanket only removes backgrounds — it
   does not supply one. */
.lv-mde-host{
  background:var(--gray-950) !important;
  border:1px solid var(--lv-line);
  border-radius:12px;
  overflow:hidden;
}
.lv-mde-host:focus-within{
  border-color:var(--lv-lumen);
  box-shadow:0 0 0 3px rgba(255,181,74,.12);
}

/* No sibling-of-toolbar rule here on purpose: that assumes the editor's
   internal structure, which is the assumption that has failed six times. The
   host's own background covers it whatever shape WHMCS renders. */

/* Text colour, caret and selection, addressed by ROLE rather than class:
   whatever the editor renders is one of these. -webkit-text-fill-color is
   here because a plain colour does not always win inside a textarea. */
.lv-mde-host textarea,
.lv-mde-host [contenteditable],
.lv-mde-host pre,
.lv-mde-host .CodeMirror-lines,
.lv-mde-host .cm-content,
.form-group:has(> .markdown-editor) textarea,
.form-group:has(> .markdown-editor) [contenteditable],
.form-group:has(> .markdown-editor) pre{
  color:var(--lv-text) !important;
  -webkit-text-fill-color:var(--lv-text) !important;
  caret-color:var(--lv-lumen) !important;
}
.lv-mde-host textarea::placeholder,
.lv-mde-host [contenteditable]::placeholder{ color:var(--lv-dim) !important; }
.lv-mde-host ::selection{ background:rgba(254,181,74,.28); }

/* Restored surfaces — note the doubled class.

   The blanket above is (0,3,0): the two :not() arguments each count. A plain
   `.lv-mde-host .editor-toolbar` is (0,2,0) and loses to it even with
   !important on both, because !important only decides between two important
   declarations by specificity. Measured: the toolbar came back transparent.
   Repeating the class lifts these to (0,4,0) so they land after the blanket. */
.lv-mde-host.lv-mde-host .editor-toolbar.editor-toolbar{
  background-color:var(--gray-900) !important;
  border-color:var(--lv-line) !important;
  border-radius:12px 12px 0 0;
}
.lv-mde-host.lv-mde-host .editor-toolbar button,
.lv-mde-host.lv-mde-host .editor-toolbar a,
.lv-mde-host.lv-mde-host.lv-mde-host .editor-toolbar button i{ color:var(--gray-400) !important;border:0 !important; }
.lv-mde-host.lv-mde-host.lv-mde-host .editor-toolbar button:hover,
.lv-mde-host.lv-mde-host.lv-mde-host .editor-toolbar button.active,
.lv-mde-host.lv-mde-host.lv-mde-host .editor-toolbar a:hover{
  background-color:var(--gray-800) !important;
  color:var(--lv-lumen) !important;
}
.lv-mde-host.lv-mde-host .editor-toolbar i.separator{ border-left:1px solid var(--lv-line);border-right:0; }
.lv-mde-host.lv-mde-host .editor-statusbar{
  background-color:var(--gray-900) !important;
  color:var(--gray-600) !important;
  border-color:var(--lv-line) !important;
}
.lv-mde-host.lv-mde-host.lv-mde-host .editor-statusbar *{ color:var(--gray-600) !important; }
.lv-mde-host.lv-mde-host .editor-preview,
.lv-mde-host.lv-mde-host.lv-mde-host .editor-preview-side,
.lv-mde-host.lv-mde-host.lv-mde-host .editor-preview-active,
.lv-mde-host.lv-mde-host.lv-mde-host.lv-mde-host .editor-preview-active-side{
  background-color:var(--gray-950) !important;
  color:var(--lv-muted) !important;
}
.lv-mde-host.lv-mde-host.lv-mde-host .editor-preview a{ color:var(--brand-400) !important; }

/* ============================================================
   68. STATUS BADGE — custom colours, and a readable one
   Developer: Tivro.Net

   WHMCS lets an admin set a colour per ticket status. When one is set it stops
   emitting a status class entirely and switches to status-custom with an
   inline background-color. The templates only read statusClass, so those
   statuses — and every admin-created status — rendered as .lv-status- with
   nothing after it, matched no rule, and showed no colour at all.

   The colour now arrives as --lv-stat and the badge builds itself from it.

   Not used as a flat background: those colours are picked in an admin panel
   with a white page in mind, and a mid-navy or maroon fill with light text on
   it is unreadable here. Instead the hue drives a soft tint, a border and the
   label, with the label lifted toward white so it stays legible whatever the
   admin chose. A very dark pick lightens to something readable rather than
   disappearing.
   ============================================================ */

/* ---- the badge itself, upgraded ----
   It was a flat pill with the label at 11px. Now: a status dot that takes the
   badge's own colour, tighter tracking, and a border on every variant so the
   shape reads on both the card and the table row. */
.lv-badge{
  display:inline-flex;align-items:center;gap:.4375rem;
  font-family:var(--font-ui);
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;
  padding:.3125rem .625rem;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;line-height:1.2;
  vertical-align:middle;
}
.lv-badge::before{
  content:'';width:6px;height:6px;border-radius:99px;
  background:currentColor;flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
/* a couple of badges are icon-led already — no dot for those */
.lv-badge.lv-badge-nodot::before{ display:none; }

/* Fallback FIRST, then the specific statuses override it.

   .lv-badge[class*="lv-status-"] is (0,2,0) — a class plus an attribute — and
   .lv-badge.lv-status-open is also (0,2,0). Equal specificity means source
   order decides, so with this written last it beat every status rule and
   turned them all grey. It belongs above them: an unknown status still gets a
   readable neutral instead of no colour at all, and a known one wins. */
.lv-badge[class*="lv-status-"]{
  background:rgba(154,164,179,.12);border-color:rgba(154,164,179,.28);color:#B4BCC7;
}

/* ---- ticket statuses: give every one a border to match ---- */
.lv-badge.lv-status-open{
  background:rgba(87,204,125,.14);border-color:rgba(87,204,125,.38);color:#6FE39A;
}
.lv-badge.lv-status-answered{
  background:rgba(124,169,255,.14);border-color:rgba(124,169,255,.38);color:#9CBEFF;
}
.lv-badge.lv-status-customer-reply,
.lv-badge.lv-status-customerreply{
  background:rgba(254,181,74,.14);border-color:rgba(254,181,74,.38);color:var(--brand-400);
}
.lv-badge.lv-status-on-hold,
.lv-badge.lv-status-onhold{
  background:rgba(253,176,34,.13);border-color:rgba(253,176,34,.34);color:#FDB022;
}
.lv-badge.lv-status-in-progress,
.lv-badge.lv-status-inprogress{
  background:rgba(182,92,255,.14);border-color:rgba(182,92,255,.38);color:#C68CFF;
}
.lv-badge.lv-status-closed{
  background:rgba(154,164,179,.12);border-color:rgba(154,164,179,.30);color:#B4BCC7;
}

/* The admin-colour badge goes LAST.

   .lv-badge[class*="lv-status-"] matches lv-status-custom as well — the
   substring is right there in the name — and both are (0,2,0). With the custom
   rules written earlier the catch-all won and every admin-coloured status came
   out the same grey. Measured: four different admin colours, one identical
   result.

   THE LABEL DOES NOT TAKE THE ADMIN'S COLOUR. Those are picked in an admin
   panel against a white page, so dark ones are common — and mixing them toward
   white to compensate measured 4.04:1 for a navy, 3.42:1 for a maroon and
   2.63:1 for a near-black, all under the 4.5:1 floor. Mixing far enough to
   save pure black would wash every vivid colour out to pastel.

   So the hue carries the dot, the tint and the border, where being dark costs
   nothing, and the label stays a fixed light grey that is readable whatever
   the admin chose. The status still reads as "their" colour at a glance. */
.lv-badge.lv-status-custom,
.lv-tag.lv-tag-custom{
  color:var(--gray-200);
  background:var(--gray-800);
  border:1px solid var(--lv-line);
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  .lv-badge.lv-status-custom,
  .lv-tag.lv-tag-custom{
    color:var(--gray-200);
    background:color-mix(in srgb, var(--lv-stat, #B4BCC7) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--lv-stat, #B4BCC7) 42%, transparent);
  }
  /* the dot is where the colour actually lives — lifted just enough that a
     near-black pick is still visible against the badge */
  .lv-badge.lv-status-custom::before,
  .lv-tag.lv-tag-custom::before{
    background:color-mix(in srgb, var(--lv-stat, #B4BCC7) 78%, #FFFFFF);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--lv-stat, #B4BCC7) 20%, transparent);
  }
}

/* ---- editor text, by blanket ----
   The background blanket worked; the text did not, because the colour rules
   named textarea / [contenteditable] / pre / .CodeMirror-lines / .cm-content
   and the editor rendered none of those. Measured: black text on the dark
   surface. Same answer as the background — set it on the host, force
   everything inside to inherit, restore the two bars that need their own. */
.lv-mde-host{ color:var(--lv-text) !important; }
.lv-mde-host *{ color:inherit !important; caret-color:var(--lv-lumen) !important; }
.lv-mde-host.lv-mde-host .editor-toolbar,
.lv-mde-host.lv-mde-host .editor-toolbar *{ color:var(--gray-400) !important; }
.lv-mde-host.lv-mde-host .editor-toolbar button:hover,
.lv-mde-host.lv-mde-host .editor-toolbar button.active,
.lv-mde-host.lv-mde-host .editor-toolbar a:hover{ color:var(--lv-lumen) !important; }
.lv-mde-host.lv-mde-host .editor-statusbar,
.lv-mde-host.lv-mde-host .editor-statusbar *{ color:var(--gray-600) !important; }

/* ============================================================
   69. INLINE-COLOURED STATUS TEXT
   Developer: Tivro.Net

   WHMCS hands the ticket status over as markup, not text:

     <span style="color:#000000">Answered</span>

   That colour is picked for the white admin panel. An inline style outranks
   every class rule short of !important, so the badge painted correctly and the
   word inside it stayed black — a correctly coloured pill with nothing legible
   in it. The templates now run the status through |strip_tags, which is what
   WHMCS's own template does.

   This is the backstop for everywhere else. WHMCS wraps text this way in more
   places than the ticket status — invoice states, service states, domain
   states — and a black span inside a dark badge is invisible in all of them.
   Any span carrying its own inline colour inside one of these components gives
   it up and inherits the badge's.

   Scoped to the badge components on purpose: an inline colour is legitimate in
   plenty of other places, and this must not reach them.
   ============================================================ */
.lv-badge span[style],
.lv-badge span[style] *,
.lv-tag span[style],
.lv-tag span[style] *,
.lv-status span[style],
.lv-status span[style] *,
.lv-tk-fact-v span[style],
.lv-reply-tag span[style]{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  background:none !important;
  font-weight:inherit !important;
}

/* The empty-class case: the live page rendered class="lv-tag lv-tag-" with
   nothing after the dash, which matched no variant and left the tag with no
   colour of its own. The templates now derive the modifier from the status
   text so this should not recur, but a tag that still lands without one gets a
   readable default rather than whatever it inherits. Written as a plain base
   rule so any real variant, being more specific, still wins. */
.lv-tag{ color:var(--gray-200); }


/* ============================================================
   70. SERVICE OVERVIEW (awc_lumvara module)
   Developer: Tivro.Net

   Styles the module's client-area overview.tpl, which uses these components
   instead of its own newstyle.css — a light theme with thirty-four separate
   uses of #fff that would otherwise be fought surface by surface.

   The lum-* class names left in that template are the module script's binding
   points, not styling hooks. Only .lum-copy-btn, .lum-input-error and
   .lum-submit-spinner are styled here, because the script puts them on screen.

   NOT built on .lv-card-head: that is justify-content:space-between, which
   pushed the icon to one edge of the card and the title to the other. .lv-ov-
   head is the same idea without the split.
   ============================================================ */
.lv-ov{ display:flex;flex-direction:column;gap:1.25rem; }

/* ---- hero: the countdown, which is what people open this page for ---- */
.lv-ov-hero{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.375rem 1.5rem;border-radius:16px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(254,181,74,.16), transparent 62%),
    var(--gray-900);
  border:1px solid rgba(254,181,74,.24);
}
.lv-ov-hero-main{ min-width:0; }
.lv-ov-hero-k{
  display:block;font-size:.6875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lv-dim);margin-bottom:.3125rem;
}
.lv-ov-hero-v{
  display:block;font-family:var(--font-display);font-size:2.125rem;line-height:1;
  color:var(--lv-lumen);
  /* the counter repaints every second — tabular figures stop the row
     twitching as the digits change width */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.lv-ov-hero-side{ display:flex;align-items:center;gap:.875rem; }
.lv-ov-hero-d{ display:block;font-size:1rem;font-weight:600;color:var(--lv-text); }
.lv-ov-hero-ic{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:12px;
  background:rgba(254,181,74,.12);color:var(--lv-lumen);
  border:1px solid rgba(254,181,74,.22);
}

/* ---- cards ---- */
.lv-ov-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.25rem; }
.lv-ov-card{ padding:0;overflow:hidden; }
.lv-ov-head{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--lv-line);
  background:rgba(255,255,255,.015);
}
.lv-ov-h{
  margin:0;font-family:var(--font-heading);font-weight:500;
  font-size:1rem;color:var(--gray-25);letter-spacing:.01em;
}
.lv-ov-ic{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;border-radius:9px;
  background:rgba(254,181,74,.10);color:var(--lv-lumen);
  border:1px solid rgba(254,181,74,.18);
}

/* ---- credentials: label above value, so long URLs and usernames get the
       full width instead of being squeezed into a right-hand column ---- */
.lv-ov-creds{ padding:.5rem 1.25rem 1.25rem; }
.lv-ov-cred{ padding:.875rem 0;border-bottom:1px solid var(--lv-line); }
.lv-ov-cred:last-child{ border-bottom:0;padding-bottom:0; }
.lv-ov-cred-k{
  display:block;font-size:.6875rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lv-dim);margin-bottom:.375rem;
}
.lv-ov-cred-row{ display:flex;align-items:center;gap:.625rem;min-width:0; }
.lv-ov-cred-v{
  flex:1 1 auto;min-width:0;
  font-size:.9375rem;font-weight:600;color:var(--lv-text);
  letter-spacing:.02em;overflow-wrap:anywhere;
}
.lv-ov-cred-plain{ display:block;letter-spacing:0; }
.lv-ov-cred-v a{ color:var(--lv-lumen);text-decoration:none; }
.lv-ov-cred-v a:hover{ text-decoration:underline; }

/* ---- copy button ----
   Labelled, not icon-only, because the script swaps the whole contents for
   "Copied" on success. A bare icon button would jump from square to
   word-width; starting with a word means the swap barely moves. */
.lv-ov-cred .lum-copy-btn{
  display:inline-flex;align-items:center;gap:.375rem;flex:0 0 auto;
  padding:.375rem .625rem;border-radius:8px;cursor:pointer;
  font-family:var(--font-ui);font-size:.75rem;font-weight:600;
  background:var(--gray-950);border:1px solid var(--lv-line);color:var(--lv-muted);
  transition:color .16s var(--lv-ease),border-color .16s var(--lv-ease),background .16s var(--lv-ease);
}
.lv-ov-cred .lum-copy-btn:hover{
  color:var(--lv-lumen);border-color:rgba(254,181,74,.4);background:rgba(254,181,74,.08);
}
/* the script's success state is a Font Awesome tick; the client area ships no
   icon font, so the empty <i> is hidden and only the word "Copied" shows */
.lv-ov-cred .lum-copy-btn i{ display:none; }

/* ---- connections meter ---- */
.lv-ov-meter{ display:flex;align-items:center;gap:.75rem; }
/* The fill is painted as a background-image on the rail, not as the width of
   a child, and that choice is the whole safety mechanism.

   width:calc(var(--n)/var(--d)*100%) parses fine — a var() could be anything —
   so it discards any width:0 written above it, then fails at computed-value
   time and falls back to width's initial value, auto. Measured: a rail showing
   "- of -" rendered 100% full. The opposite of the truth.

   background-image's initial value is none. So when the calc cannot resolve,
   the declaration drops and what is left is background-color: an empty rail.
   A meter that cannot compute itself shows nothing rather than everything. */
.lv-ov-meter-bar{
  flex:1 1 auto;height:6px;border-radius:99px;overflow:hidden;
  background-color:#212630;
  background-image:linear-gradient(90deg,
    #FEB54A 0 calc(var(--n) / var(--d) * 100%),
    transparent calc(var(--n) / var(--d) * 100%));
  background-repeat:no-repeat;
}
/* the <i> is kept only so the markup matches; the rail paints itself */
.lv-ov-meter-bar i{ display:none; }
.lv-ov-meter-t{ flex:0 0 auto;font-size:.8125rem;color:var(--lv-dim); }
.lv-ov-meter-t strong{ color:var(--lv-text);font-family:var(--font-display);font-size:1rem; }

/* ---- billing list ---- */
.lv-ov-list{ margin:0;padding:.5rem 1.25rem 1.25rem; }
.lv-ov-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6875rem 0;border-bottom:1px solid var(--lv-line);min-width:0;
}
.lv-ov-item:last-child{ border-bottom:0;padding-bottom:0; }
.lv-ov-item dt{ margin:0;font-size:.8125rem;color:var(--lv-dim);flex:0 0 auto; }
.lv-ov-item dd{
  margin:0;font-size:.9375rem;color:var(--lv-text);font-weight:600;
  text-align:right;min-width:0;overflow-wrap:anywhere;
}
.lv-ov-amt{ font-family:var(--font-display);font-size:1.0625rem;color:var(--lv-lumen); }

/* ---- change login ---- */
.lv-ov-form{ margin:0;padding:1.25rem; }
.lv-ov-fields{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.125rem 1.25rem; }
.lv-ov-help{ display:block;margin-top:.375rem;font-size:.75rem;color:var(--lv-dim);line-height:1.5; }
.lv-ov-actions{ margin-top:1.25rem; }
.lv-ov-err{
  margin-top:.875rem;padding:.6875rem .875rem;border-radius:10px;
  background:rgba(252,93,93,.1);border:1px solid rgba(252,93,93,.3);
  color:#FF9C9C;font-size:.875rem;
}
.lv-ov-loading{
  display:flex;align-items:center;gap:.625rem;margin-top:.875rem;
  font-size:.875rem;color:var(--lv-muted);
}
/* [hidden] loses to display:flex without this, so both blocks would sit
   open permanently */
.lv-ov-err[hidden],.lv-ov-loading[hidden]{ display:none !important; }
/* SPINNERS — literal colours, not var().

   This was `border:2px solid var(--lv-line)`. When a var() does not resolve
   the declaration is invalid at computed-value time and the property falls
   back to its initial value, which for border-color is currentColor. In this
   block currentColor is the near-white body text, so three sides of the ring
   turned #CDD5DF while only the top kept its amber — a white ring, spinning.

   A spinner is the one thing on screen when something has gone slow, so it is
   written with literal values and cannot inherit its way into the wrong
   colour. The two colours are the theme's --lv-line and --brand-500 resolved
   by hand; keep them in step if the palette changes. */
.lum-submit-spinner{
  width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  border-top-color:#FEB54A;
  animation:lv-ov-spin .7s linear infinite;
}

/* The script injects this into the Save button on submit:
     <span class="lum-button-spinner"></span><span class="lum-btn-text">Saving…</span>
   Nothing anywhere styled it — not the module's own stylesheet, not this one —
   so it rendered 0x0 and the button lost its spinner entirely. It sits on the
   amber button, so the ring is dark rather than light. */
.lum-button-spinner{
  display:inline-block;vertical-align:-2px;
  width:13px;height:13px;margin-right:.4375rem;border-radius:50%;
  border:2px solid rgba(26,18,4,.25);
  border-top-color:#1A1204;
  animation:lv-ov-spin .7s linear infinite;
}
.lum-btn-text{ vertical-align:baseline; }

@keyframes lv-ov-spin{ to{ transform:rotate(360deg); } }
.lum-input-error{
  border-color:#FC5D5D !important;
  box-shadow:0 0 0 3px rgba(252,93,93,.14) !important;
}

@media (max-width:640px){
  .lv-ov-hero{ flex-direction:column;align-items:flex-start;gap:1rem; }
  .lv-ov-hero-v{ font-size:1.75rem; }
  .lv-ov-item{ flex-direction:column;align-items:flex-start;gap:.25rem; }
  .lv-ov-item dd{ text-align:left; }
}

/* ============================================================
   71. iOS SAFARI — native control chrome and readonly fields
   Developer: Tivro.Net

   .lv-input never reset -webkit-appearance. Desktop browsers do not care,
   but iOS Safari falls back to its own native control rendering in some
   states — notably readonly and disabled — and paints a white gradient over
   whatever background the theme set. The awc_lumvara module marks both login
   fields readOnly while it saves, which is exactly when the screenshot showed
   two white boxes with barely-legible text.

   appearance:none stops Safari drawing its own control. The readonly and
   disabled rules then restate the surface explicitly, because a background
   set only on .lv-input is not always enough once Safari has decided the
   field is in a special state.

   Literal colours throughout, deliberately. These rules exist to survive a
   browser doing something unexpected, so they should not themselves depend on
   a var() resolving.
   ============================================================ */
.lv-input,
.lv-control :is(input,select,textarea),
.lv-textarea{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
/* keep the native arrow on selects — appearance:none removes it */
select.lv-input,
.lv-control select{ background-image:none; }

.lv-input[readonly],
.lv-input:read-only,
.lv-input[disabled],
.lv-input:disabled,
.lv-control input[readonly],
.lv-control input[disabled]{
  background-color:#0B0D12 !important;
  background-image:none !important;
  color:#FCFCFD !important;
  -webkit-text-fill-color:#FCFCFD !important;
  border-color:rgba(255,255,255,.10) !important;
  opacity:1;                       /* Safari dims disabled controls to ~0.4 */
  -webkit-opacity:1;
}
/* a readonly field is not editable, and should look it — without going pale */
.lv-input[readonly],
.lv-input:read-only{ cursor:default; }

/* The module's loading and error blocks, pinned the same way. These are the
   only things on screen when a save is in flight, so they are written with
   literal values rather than inheriting anything. */
.lv-ov-loading{
  background-color:transparent !important;
  color:#CDD5DF !important;
  -webkit-text-fill-color:#CDD5DF !important;
}
.lv-ov-loading span{ color:#CDD5DF !important; -webkit-text-fill-color:#CDD5DF !important; }
.lv-ov-err{
  background-color:rgba(252,93,93,.10) !important;
  color:#FF9C9C !important;
  -webkit-text-fill-color:#FF9C9C !important;
}

/* ============================================================
   72. INVOICE STATUS BADGE (viewinvoice.tpl)
   Developer: Tivro.Net

   viewinvoice.tpl writes its status as `badge b-{$status|lower|replace:' ':''}`
   — a different scheme from the .lv-status- badges used everywhere else, and
   one that had no rules in this stylesheet at all. Bootstrap's .badge supplies
   padding and a font size but no colour of its own, so a cancelled or refunded
   invoice rendered as bare text with no pill and no state.

   The class is built by lowercasing the status and removing spaces, so
   "Payment Pending" becomes b-paymentpending — no hyphen. That is why the
   names below look run-together; they have to match what the template emits.
   ============================================================ */
.badge[class*="b-"]{
  display:inline-flex;align-items:center;gap:.4375rem;
  font-family:var(--font-ui);
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;
  padding:.3125rem .625rem;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;line-height:1.2;vertical-align:middle;
  /* neutral floor: an unrecognised status still reads, rather than
     inheriting whatever the heading beside it happens to be */
  background:rgba(154,164,179,.12);border-color:rgba(154,164,179,.28);color:#B4BCC7;
}
.badge[class*="b-"]::before{
  content:'';width:6px;height:6px;border-radius:99px;
  background:currentColor;flex:0 0 auto;
}

.badge.b-paid{
  background:rgba(87,204,125,.14);border-color:rgba(87,204,125,.38);color:#6FE39A;
}
.badge.b-unpaid{
  background:rgba(254,181,74,.14);border-color:rgba(254,181,74,.38);color:var(--brand-400);
}
.badge.b-paymentpending{
  background:rgba(253,176,34,.13);border-color:rgba(253,176,34,.34);color:#FDB022;
}
.badge.b-draft{
  background:rgba(154,164,179,.12);border-color:rgba(154,164,179,.28);color:#B4BCC7;
}
.badge.b-cancelled{
  background:rgba(252,93,93,.12);border-color:rgba(252,93,93,.32);color:#FF9C9C;
}
.badge.b-refunded{
  background:rgba(124,169,255,.14);border-color:rgba(124,169,255,.38);color:#9CBEFF;
}
.badge.b-collections{
  background:rgba(252,93,93,.16);border-color:rgba(252,93,93,.42);color:#FF8A8A;
}

/* Same backstop as the ticket badges: WHMCS wraps status text in a span with
   an inline colour meant for a white admin page, and an inline style beats
   every class rule here. */
.badge[class*="b-"] span[style],
.badge[class*="b-"] span[style] *{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  background:none !important;
}

/* ---- captcha guard (see js/lumvara-captcha.js) ---- */
.lv-captcha-msg{
  margin:.5rem 0 0;font-size:.8125rem;line-height:1.5;
  color:#FF9C9C;
}
/* One red treatment for every kind of failure: the captcha and password checks
   in lumvara-formguard.js, and any field the browser itself rejects. Literal
   colours, because this is the state that has to be unmistakable. */
.lv-captcha-bad,
.lv-invalid,
input#inputCaptcha.lv-captcha-bad,
.lv-input.lv-invalid,
select.lv-invalid,
textarea.lv-invalid{
  border-color:#FC5D5D !important;
  box-shadow:0 0 0 3px rgba(252,93,93,.14) !important;
}
/* the checkbox and radio variants have no border of their own to colour */
.lv-invalid + .lv-cb-box,
.lv-invalid + .lv-radio-dot{
  border-color:#FC5D5D !important;
  box-shadow:0 0 0 3px rgba(252,93,93,.14) !important;
}

/* ---- submit held until the required fields are filled ----
   The theme already dims .lv-btn[disabled] to .45 and kills pointer-events.
   This adds the cursor so the state reads as deliberate rather than broken,
   and keeps the amber legible while dimmed. */
.lv-btn[disabled],
.lv-btn:disabled{
  cursor:not-allowed;
  pointer-events:auto;      /* so the title tooltip can still be read */
  opacity:.45;
}
.lv-btn[disabled]:hover,
.lv-btn:disabled:hover{ filter:none;transform:none; }