/* Shared liquid material for shell, standalone auth and body-mounted overlays.
   Load after the page/table skins. The two real page scopes in :is() give the
   adapters enough specificity for legacy WHMCS rules without changing layout.
   Developer retains its own material/engine; these use the same optical values.
   Only surfaces refract. Text, icons, table rows and menu items remain sharp. */
@media screen {
  body.hx-liquid-theme {
    --hx-liquid-panel: #141922;
    --hx-liquid-control: #252e3b;
    --hx-liquid-hover: #354152;
    --hx-liquid-dialog: #202734;
    --hx-liquid-field: #111b29;
    --hx-liquid-edge: rgba(239, 247, 255, .14);
    --hx-liquid-text: #f5f7fb;
    --hx-liquid-muted: #b1bbcc;
    --hx-liquid-primary: #17487f;
    --hx-liquid-primary-hover: #1e5997;
    --hx-liquid-danger: #832f3b;
    --hx-liquid-danger-hover: #9a3543;
    --hx-liquid-success: #205639;
    --hx-liquid-warning: #63491f;
    --hx-liquid-reflections:
      inset 0 0 0 1px rgba(244, 249, 255, .055),
      inset 1px 2px 1px -1px rgba(244, 249, 255, .36),
      inset -1px -1.5px 1px -1px rgba(218, 237, 255, .26),
      inset 0 -7px 3px -6px rgba(233, 244, 255, .18),
      inset 0 2px 5px rgba(0, 0, 0, .16),
      inset 0 -3px 5px rgba(0, 0, 0, .12);
  }

  /* Opaque defaults also work with JavaScript disabled or blur unavailable. */
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .card, .panel, .well, .hx-support-card, .affiliate-stat-card,
    .hx-pd-tab-panel-card, .hx-pd-vm-state__card, .invoice-container,
    .hx-config-group, .hx-order-aside__inner, .hx-login-card,
    .hx-servers-panel-outline, .table-container, .hx-support-table-wrap,
    .ticket-reply, .list-group
  ) {
    --hx-liquid-surface: 1;
    --hx-liquid-blur: 14px;
    --hx-liquid-refraction: ;
    border-color: var(--hx-liquid-edge);
    border-radius: var(--hx-page-radius, 22px);
    background: var(--hx-liquid-panel) !important;
    box-shadow: var(--hx-liquid-reflections), 0 12px 36px rgba(0, 0, 0, .20) !important;
    color: var(--hx-liquid-text);
  }

  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .btn:not(:where(.btn-link, .hx-modal-btn-action, .hx-btn-reveal-pw, table *, #CPROWS *, .md-editor *)),
    .hx-user-menu-trigger, .hx-mobile-icon-btn, .hx-pd-icon-btn, .hx-nav-top-link:where(.hx-nav-item.active > *),
    .hx-system-status-link:not(:where(table *)), .hx-page-size-trigger,
    .page-link, .paginate_button:not(.page-item), .nav-tabs, .nav-pills,
    .hx-pd-bracket-tabs__list, .hx-btn-login-submit, .hx-servers-tag-filter-btn,
    .hx-modal-btn-action__icon-wrap, .hx-ticket-dept-btn
  ) {
    --hx-liquid-surface: 1;
    --hx-liquid-blur: 8px;
    --hx-liquid-refraction: ;
    --hx-liquid-fill: var(--hx-liquid-control);
    --hx-liquid-over: var(--hx-liquid-hover);
    border-color: var(--hx-liquid-edge) !important;
    background: var(--hx-liquid-fill) !important;
    box-shadow: var(--hx-liquid-reflections), 0 4px 12px rgba(0, 0, 0, .18) !important;
    color: var(--hx-liquid-text);
    transition: background-color .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .2s ease;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .btn:not(:where(.btn-link, .hx-modal-btn-action, .hx-btn-reveal-pw, table *, #CPROWS *, .md-editor *)),
    .hx-user-menu-trigger, .hx-mobile-icon-btn, .hx-pd-icon-btn, .hx-nav-top-link:where(.hx-nav-item.active > *),
    .hx-system-status-link:not(:where(table *)), .hx-page-size-trigger,
    .page-link, .paginate_button:not(.page-item), .hx-btn-login-submit, .hx-servers-tag-filter-btn, .hx-ticket-dept-btn
  ):where(:hover, :active):not(:where(:disabled, .disabled, [aria-disabled="true"])) {
    background: var(--hx-liquid-over) !important;
    box-shadow: var(--hx-liquid-reflections), 0 6px 16px rgba(0, 0, 0, .24) !important;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .btn-primary, .hx-btn-login-submit, .page-item.active .page-link, .paginate_button.current
  ) {
    --hx-liquid-fill: var(--hx-liquid-primary);
    --hx-liquid-over: var(--hx-liquid-primary-hover);
    border-color: rgba(148, 204, 255, .30) !important;
    color: #fff !important;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) .btn.btn-danger {
    --hx-liquid-fill: var(--hx-liquid-danger);
    --hx-liquid-over: var(--hx-liquid-danger-hover);
    border-color: rgba(255, 183, 189, .35) !important;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) .btn.btn-success {
    --hx-liquid-fill: var(--hx-liquid-success);
    --hx-liquid-over: var(--hx-liquid-success);
    border-color: rgba(117, 227, 164, .30) !important;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) .btn.btn-warning {
    --hx-liquid-fill: var(--hx-liquid-warning);
    --hx-liquid-over: var(--hx-liquid-warning);
    border-color: rgba(238, 197, 119, .35) !important;
    color: #fff1d2 !important;
  }

  /* Inputs retain their native select arrows, validation marks and joined seams. */
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .form-control, .custom-select, .custom-file-label, .input-group-text,
    .select2-selection, .dataTables_filter input, .dataTables_length select,
    .hx-input-group-login, .hx-servers-datatable__search .input-group
  ) {
    --hx-liquid-surface: 1;
    --hx-liquid-blur: 8px;
    --hx-liquid-refraction: ;
    background-color: var(--hx-liquid-field) !important;
    border-color: var(--hx-liquid-edge) !important;
    box-shadow: inset 0 1px 0 rgba(244, 249, 255, .10), inset 0 -1px 0 rgba(218, 237, 255, .055) !important;
    color: var(--hx-liquid-text) !important;
    color-scheme: dark;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .form-control, .custom-select, .hx-input-group-login, .select2-selection
  ):is(:focus, :focus-within) {
    border-color: #9bcaff !important;
    box-shadow: inset 0 1px 0 rgba(244, 249, 255, .14), 0 0 0 3px rgba(155, 202, 255, .15) !important;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(.form-control, .custom-select).is-invalid { border-color: #ffaaa9 !important; }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(.form-control, .custom-select).is-valid { border-color: #91eab1 !important; }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(.has-error .form-control, .was-validated .form-control:invalid, .was-validated .custom-select:invalid) { border-color: #ffaaa9 !important; }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(.form-control, .custom-select):disabled { opacity: .6; cursor: not-allowed; }
  body.hx-liquid-theme :is(.form-control, .custom-select)::placeholder { color: var(--hx-liquid-muted); opacity: 1; }
  body.hx-liquid-theme select option { color: #f5f7fb; background: #202734; }
  body.hx-liquid-theme :is(input[type="checkbox"], input[type="radio"]) { accent-color: #82b9ff; }

  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .dropdown-menu, .modal-content, dialog:not(.hx-dev-modal), .popover, .tooltip-inner,
    .hx-service-tags-panel, .hx-servers-tags-overlay__panel, .hx-servers-tag-filter-overlay__panel, .hx-pd-logs__filters-card,
    .select2-dropdown, .tt-menu, .daterangepicker
  ) {
    --hx-liquid-surface: 1;
    --hx-liquid-blur: 16px;
    --hx-liquid-refraction: ;
    border: 1px solid var(--hx-liquid-edge) !important;
    background: var(--hx-liquid-dialog) !important;
    box-shadow: var(--hx-liquid-reflections), 0 4px 12px rgba(0, 0, 0, .18), 0 18px 50px rgba(0, 0, 0, .35) !important;
    color: var(--hx-liquid-text);
  }
  body.hx-liquid-theme :is(.dropdown-menu, .popover, .select2-dropdown, .tt-menu) { border-radius: 16px; }
  body.hx-liquid-theme .hx-user-menu-dropdown { border-radius: 24px; }
  body.hx-liquid-theme .dropdown-divider { border-color: var(--hx-liquid-edge); }
  body.hx-liquid-theme :is(.dropdown-item, .select2-results__option) { color: var(--hx-liquid-text); }
  body.hx-liquid-theme .dropdown-item:is(:hover, :focus, .active) { background-color: rgba(207, 227, 255, .10); }
  body.hx-liquid-theme :is(.modal-header, .modal-body, .modal-footer, .popover-header, .popover-body) { color: var(--hx-liquid-text); }
  body.hx-liquid-theme dialog::backdrop { background: rgba(4, 8, 16, .42); }

  /* The outer panel is the material: don't stack opaque tables or wrapper cards. */
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .card:has(.table-container), .hx-servers-panel-outline .hx-pd-tab-panel-card,
    #hx-order-configurator .hx-order-form, .card .list-group, .card .ticket-reply,
    .hx-input-group-login .form-control, .hx-input-group-login .hx-btn-reveal-pw,
    .hx-servers-datatable__search :is(.form-control, .input-group-text)
  ) {
    --hx-liquid-surface: 0;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .hx-servers-panel-outline, .table-container, .hx-support-table-wrap,
    .hx-pd-tab-panel-card, .invoice-container
  ) :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) {
    background: transparent !important;
  }
  /* Open menus rise above sibling panels. A visible nested Bootstrap modal must
     keep the viewport as its containing block, rather than its blurred card. */
  body.hx-liquid-theme :is(.card, .panel, .hx-support-card, .hx-pd-tab-panel-card, .hx-servers-panel-outline):has(.dropdown-menu.show) { position: relative; z-index: 20; }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .card, .panel, .well, .hx-support-card, .hx-pd-tab-panel-card, .hx-servers-panel-outline
  ):has(.modal.show) { --hx-liquid-surface: 0; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
    .btn-link, .hx-modal-btn-action, .hx-btn-reveal-pw, table .btn, #CPROWS .btn, .md-editor .btn
  ) { --hx-liquid-surface: 0; }

  /* Semantic notices stay distinct; lightweight inset content doesn't need lenses. */
  body.hx-liquid-theme .alert { border-radius: 14px; border-color: var(--hx-liquid-edge); box-shadow: inset 0 1px 0 rgba(244, 249, 255, .10); }
  body.hx-liquid-theme :is(.alert-info, .alert-primary) { background: rgba(34, 79, 134, .32); color: #d2e7ff; }
  body.hx-liquid-theme .alert-success { background: rgba(33, 99, 64, .32); color: #bbf4cf; }
  body.hx-liquid-theme .alert-warning { background: rgba(118, 83, 32, .32); color: #ffe3af; }
  body.hx-liquid-theme .alert-danger { background: rgba(120, 41, 53, .38); color: #ffd0d3; }
  body.hx-liquid-theme :is(.alert-secondary, .alert-light, .alert-dark) { background: var(--hx-liquid-panel); color: var(--hx-liquid-text); }
  body.hx-liquid-theme .alert a { color: inherit; text-decoration: underline; }
  body.hx-liquid-theme :is(.card-header, .panel-heading, .card-footer, .panel-footer) { color: var(--hx-liquid-text); }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(.card-header, .panel-heading) { background: transparent !important; }
  body.hx-liquid-theme .list-group-item { background: transparent; color: var(--hx-liquid-text); border-color: var(--hx-liquid-edge); }
  body.hx-liquid-theme .list-group-item.active { background: var(--hx-liquid-primary); color: #fff; }
  body.hx-liquid-theme .hx-ticket-reply-card:has(.ticket-reply.staff) { border-color: rgba(136, 186, 255, .45); }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) .order-block[aria-pressed="true"],
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) .hx-billing-radio:checked + .card-product {
    border-color: #88baff !important; background: var(--hx-liquid-primary) !important;
  }
  body.hx-liquid-theme .hx-side-nav-footer-status .hx-system-status-link { border-color: rgba(var(--hx-sidebar-status-rgb, 115, 215, 160), .28) !important; }

  /* Auth pages share the material without gaining the signed-in navigation. */
  body.hx-liquid-theme.hx-body-dark-full { background-color: #0b0e14; color: var(--hx-liquid-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif; }
  body.hx-liquid-theme.hx-body-dark-full .hx-login-card { border-radius: 26px; }
  body.hx-liquid-theme.hx-body-dark-full :is(.form-control, .custom-select, .hx-input-group-login) { min-height: 44px; border-radius: 12px; }
  body.hx-liquid-theme.hx-body-dark-full :is(.btn:not(.hx-btn-reveal-pw), .hx-btn-login-submit) { min-height: 44px; border-radius: 999px; }
  body.hx-liquid-theme.hx-body-dark-full .hx-input-group-login .form-control { border-radius: 12px 0 0 12px; }
  body.hx-liquid-theme.hx-body-dark-full :is(.card-title, label, .text-muted) { color: var(--hx-liquid-text) !important; }
  body.hx-liquid-theme :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #9bcaff; outline-offset: 3px; }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(.btn, .hx-btn-login-submit, .page-link, .paginate_button):is(:disabled, .disabled, [aria-disabled="true"]),
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) .page-item.disabled .page-link { opacity: .5; box-shadow: none !important; }
}

@media screen {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.hx-liquid-theme {
      --hx-liquid-panel: rgba(20, 25, 34, .72);
      --hx-liquid-control: rgba(187, 201, 220, .10);
      --hx-liquid-hover: rgba(196, 213, 234, .17);
      --hx-liquid-dialog: rgba(25, 33, 46, .74);
      --hx-liquid-field: rgba(8, 17, 29, .42);
      --hx-liquid-primary: rgba(30, 100, 188, .40);
      --hx-liquid-primary-hover: rgba(40, 119, 212, .50);
      --hx-liquid-danger: rgba(163, 45, 60, .54);
      --hx-liquid-danger-hover: rgba(185, 53, 69, .66);
      --hx-liquid-success: rgba(42, 117, 74, .42);
      --hx-liquid-warning: rgba(127, 89, 33, .46);
    }
    /* Keep this list aligned with the component adapters above and the engine's
       candidates. Empty local refraction prevents a child inheriting its lens. */
    :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(
      .card, .panel, .well, .hx-support-card, .affiliate-stat-card, .hx-pd-tab-panel-card,
      .hx-pd-vm-state__card, .invoice-container, .hx-config-group, .hx-order-aside__inner,
      .hx-login-card, .hx-servers-panel-outline, .table-container, .hx-support-table-wrap, .ticket-reply, .list-group,
      .btn:not(:where(.btn-link, .hx-modal-btn-action, .hx-btn-reveal-pw, table *, #CPROWS *, .md-editor *)),
      .hx-user-menu-trigger, .hx-mobile-icon-btn, .hx-pd-icon-btn, .hx-nav-top-link:where(.hx-nav-item.active > *), .hx-system-status-link:not(:where(table *)),
      .hx-page-size-trigger, .page-link, .paginate_button:not(.page-item), .nav-tabs, .nav-pills,
      .hx-pd-bracket-tabs__list, .hx-btn-login-submit, .hx-servers-tag-filter-btn, .hx-modal-btn-action__icon-wrap, .hx-ticket-dept-btn,
      .form-control, .custom-select, .custom-file-label, .input-group-text, .select2-selection,
      .dataTables_filter input, .dataTables_length select, .hx-input-group-login, .hx-servers-datatable__search .input-group,
      .dropdown-menu, .modal-content, dialog:not(.hx-dev-modal), .popover, .tooltip-inner,
      .hx-service-tags-panel, .hx-servers-tags-overlay__panel, .hx-servers-tag-filter-overlay__panel, .hx-pd-logs__filters-card,
      .select2-dropdown, .tt-menu, .daterangepicker
    ) {
      -webkit-backdrop-filter: blur(var(--hx-liquid-blur, 8px)) saturate(150%);
      backdrop-filter: blur(var(--hx-liquid-blur, 8px)) var(--hx-liquid-refraction, ) saturate(150%);
    }
    /* Prepared lenses also win over specialized renewal/menu blur rules. */
    :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) [data-hx-liquid-ready] {
      backdrop-filter: blur(var(--hx-liquid-blur, 8px)) var(--hx-liquid-refraction, ) saturate(150%) !important;
    }
  }
}

/* Accessibility preferences take precedence over both CSS blur and SVG lenses. */
@media screen and (prefers-reduced-transparency: reduce), screen and (prefers-contrast: more), screen and (forced-colors: active) {
  body.hx-liquid-theme {
    --hx-liquid-panel: #141922; --hx-liquid-control: #252e3b; --hx-liquid-hover: #354152;
    --hx-liquid-dialog: #202734; --hx-liquid-field: #111b29;
    --hx-liquid-primary: #17487f; --hx-liquid-primary-hover: #1e5997;
    --hx-liquid-danger: #832f3b; --hx-liquid-danger-hover: #9a3543;
    --hx-liquid-success: #205639; --hx-liquid-warning: #63491f;
    --hx-liquid-edge: #8394ad; --hx-liquid-muted: #d1d9e6;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) :is(*, [data-hx-liquid-ready]),
  body.hx-liquid-theme *::before, body.hx-liquid-theme *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media screen and (forced-colors: active) {
  body.hx-liquid-theme {
    --hx-liquid-panel: Canvas; --hx-liquid-control: ButtonFace; --hx-liquid-hover: ButtonFace;
    --hx-liquid-dialog: Canvas; --hx-liquid-field: Canvas; --hx-liquid-text: CanvasText; --hx-liquid-muted: CanvasText;
    --hx-liquid-primary: Highlight; --hx-liquid-primary-hover: Highlight; --hx-liquid-danger: ButtonFace;
    --hx-liquid-danger-hover: ButtonFace; --hx-liquid-success: ButtonFace; --hx-liquid-warning: ButtonFace;
    --hx-liquid-edge: ButtonText;
  }
  :is(body.hx-liquid-theme, body.hx-liquid-theme #whmcs-tw-app-shell #main-body) * { box-shadow: none !important; }
  body.hx-liquid-theme :focus-visible { outline-color: Highlight; }
}
@media screen and (prefers-reduced-motion: reduce) {
  body.hx-liquid-theme *, body.hx-liquid-theme *::before, body.hx-liquid-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media screen and (max-width: 640px) {
  body.hx-liquid-theme.hx-body-dark-full :is(.form-control, .custom-select) { font-size: 16px; }
}
@media print {
  body.hx-liquid-theme *, body.hx-liquid-theme *::before, body.hx-liquid-theme *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}